Web Technologies: HTML and CSS Basics
An introduction to the basic building blocks of web pages: HTML for structure and CSS for styling.
About This Topic
HTML and CSS basics introduce Year 7 students to the core of web page creation. HTML uses tags like <html>, <head>, <body>, <h1>, <p>, <img>, <ul>, and <li> to build structure and organise content semantically. Students practise nesting elements and linking files. CSS complements this with selectors and properties such as color, font-size, background-color, margin, and padding to control appearance and layout.
This content aligns with KS3 Computing standards in programming and development, while linking to networks through web page delivery. Students explain HTML's structural role, design simple pages, and compare it to CSS's styling function, developing computational thinking and digital creation skills. Early separation of structure from style instils professional practices like accessibility and responsive design foundations.
Active learning excels here because students code in editors like CodePen or VS Code, refresh browsers for instant visual feedback, and iterate rapidly. Collaborative pair programming resolves syntax errors together, while sharing pages fosters peer feedback, making abstract markup tangible and boosting confidence in coding.
Key Questions
- Explain the role of HTML in structuring web content.
- Design a simple web page using basic HTML tags.
- Compare the function of HTML and CSS in web development.
Learning Objectives
- Explain the semantic role of HTML elements in structuring web content.
- Design a basic web page incorporating headings, paragraphs, lists, and images using HTML.
- Compare and contrast the functions of HTML for structure and CSS for presentation.
- Apply CSS selectors and properties to modify the appearance of HTML elements.
- Create a simple, styled web page by combining HTML and CSS.
Before You Start
Why: Students need a basic understanding of how computers and the internet work to grasp the concept of web pages.
Why: Creating web pages often involves saving and linking files, so familiarity with saving documents and understanding file types is helpful.
Key Vocabulary
| HTML | Stands for HyperText Markup Language. It is the standard language used to create and structure content on the World Wide Web. |
| CSS | Stands for Cascading Style Sheets. It is a language used to describe the presentation and styling of a document written in HTML. |
| Tag | A specific code word, usually enclosed in angle brackets (e.g., <p>), that tells a web browser how to display content or structure a page. |
| Selector | In CSS, a selector is used to find, select, and manipulate the HTML element(s) you want to style. |
| Property | In CSS, a property is a characteristic of an element that you want to change, such as 'color' or 'font-size'. |
| Element | An HTML structure that typically consists of a start tag, content, and an end tag (e.g., <p>This is a paragraph.</p>). |
Watch Out for These Misconceptions
Common MisconceptionHTML controls both structure and appearance of web pages.
What to Teach Instead
HTML organises content; CSS applies styles. Pair activities building plain HTML first, then styling it separately, let students compare before-and-after views in browsers. This visual contrast clarifies roles and prevents over-reliance on inline styles.
Common MisconceptionHTML tags do not need closing tags or proper nesting.
What to Teach Instead
All tags require pairs like <p> and </p>, with nesting for hierarchy. Hands-on debugging in small groups, where malformed code fails to display, teaches validation quickly. Peer checks reinforce correct syntax through shared editing.
Common MisconceptionCSS code belongs inside the HTML body.
What to Teach Instead
CSS typically links externally or uses <style> in <head>. Group challenges starting with embedded styles then moving to external sheets show organisation benefits. Browser testing highlights maintainability gains from separation.
Active Learning Ideas
See all activitiesPair Programming: Personal Profile Page
Pairs open a browser-based editor like CodePen. One partner writes HTML for heading, paragraph, unordered list of hobbies, and image; the other reviews structure before switching. Together, they add inline CSS for text color and background. Pairs present pages to class.
Small Groups: CSS Styling Relay
Provide groups with plain HTML for a school event poster. Each member adds one CSS rule: first colours headings, second styles body font, third adjusts spacing, fourth adds a border. Groups test in browser, refine collaboratively, then vote on best designs.
Individual: Tag Builder Challenge
Students start with a template HTML file. They add and nest five specified tags step-by-step, saving and viewing changes after each. Extend by writing custom CSS for a themed page like 'My Favourites'. Submit screenshots of progress.
Whole Class: Live Code-Along
Project your screen in a shared editor. Build a simple navigation page with teacher guidance on HTML first, then CSS. Pause for students to replicate independently on devices. Discuss variations as a class before independent tweaks.
Real-World Connections
- Web developers at companies like the BBC use HTML and CSS daily to build and maintain the structure and visual design of their news websites, ensuring content is accessible and engaging for millions of users.
- Graphic designers and UI/UX designers often use their understanding of HTML and CSS to prototype website layouts and interactive elements, collaborating with front-end developers to bring visual concepts to life.
- Content creators for platforms like Etsy or personal blogs utilize basic HTML and CSS to format their product descriptions or posts, making them more readable and visually appealing to potential customers or readers.
Assessment Ideas
Provide students with a short HTML code snippet and a corresponding CSS rule. Ask them to write on an index card: 1. What will this HTML code display on a webpage? 2. How will the CSS rule change its appearance?
Display a simple webpage on the projector. Ask students to identify specific HTML tags used for structure (e.g., heading, paragraph) and specific CSS properties used for styling (e.g., color, font size). Call on students to answer.
Students exchange their simple HTML/CSS pages. Ask them to check: 1. Is there a clear heading and at least one paragraph? 2. Is the text color or background color changed using CSS? They should provide one specific suggestion for improvement to their partner.
Frequently Asked Questions
What is the difference between HTML and CSS for beginners?
How to introduce HTML tags to Year 7 students?
How can active learning help students master HTML and CSS basics?
How to assess Year 7 understanding of HTML and CSS?
More in Data Representation
Operating Systems and Software
Understanding the role of operating systems and application software in managing computer resources and user interaction.
2 methodologies
Introduction to Binary
Learning to convert between base-2 and base-10 number systems.
2 methodologies
Binary to Denary Conversion
Practicing conversion from binary to denary numbers.
2 methodologies
Denary to Binary Conversion
Practicing conversion from denary to binary numbers.
2 methodologies
Binary Addition
Performing basic addition operations with binary numbers.
2 methodologies
Representing Characters (ASCII/Unicode)
Understanding how text characters are encoded using standards like ASCII and Unicode.
2 methodologies