Building Web Pages

Lesson Overview

This 45-minute technology lesson is tailored specifically for Year 6 students and aligns with the UK National Curriculum for Computing. It focuses on introducing students to web page creation using HTML and CSS, equipping them with basic coding skills and fostering creativity in digital design. The lesson challenges pupils to think critically, work collaboratively, and create their own visually appealing internet pages. The lesson directly relates to the Key Stage 2 Computing curriculum, particularly the strand: "design, write and debug programs to accomplish specific goals, including controlling or simulating physical systems."

Lesson Objectives

By the end of this lesson, pupils should be able to:

Understand what HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are and why they are essential in making websites.
Write simple HTML code to structure a basic web page.
Use CSS to style web pages (e.g., changing colours, fonts, and layout).
Combine creativity with technical skills to create a prototype web page.

Resources Needed

Laptops or Computers (1 per student)
Text Editor: Use a simple one like Notepad++ (Windows) or TextEdit in plain text mode (Mac).
Printouts of a basic HTML & CSS cheat sheet (key tags and properties).
Pre-prepared "My About Me Page Template" (see Task 2).
Optional: Large printed cards with HTML tags (e.g., <h1>, <p>, <body>).

Lesson Structure

Introduction (10 minutes)

Hook (2 minutes)
- Begin by showing students a simple example of a web page and then show the same page in "inspect" mode (using the browser's Developer Tools).
- Explain: "Everything we see online is made up of code! Today, you're going to create your own web page."
Brief Explanation (8 minutes)
- Explain the roles of HTML (structuring content) and CSS (styling content).
- Demonstrate creating a simple web page in real-time using this example:
```
<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph!</p>
</body>
</html>
```
  - Save it as mypage.html and open it in a browser to show how the code becomes a web page.

Main Activity (30 minutes)

Task 1: Explore and Identify (5 minutes)

Have students break into small pairs. Provide them with a pre-made example web page on their computers.
Ask them to open the file, look at the code, and identify key elements like:
- <h1> - Headings
- <p> - Paragraphs
- <body> - Main content
Give a brief challenge, e.g., "Can you find the title of this webpage? Where does it appear in the browser?"

Task 2: Create the Skeleton of a Page (10 minutes)

Each pupil will start creating their own web page following a given "About Me Template":
1. Open their text editor.
2. Type the following starter code:
```
<!DOCTYPE html>
<html>
<head>
    <title>About Me</title>
</head>
<body>
    <h1>My Name is...</h1>
    <p>I am from...</p>
    <p>My favourite hobby is...</p>
</body>
</html>
```
3. Save their file as aboutme.html and open it in the browser to see their structured content.

Task 3: Styling with CSS (15 minutes)

Have students add CSS inline within their HTML code to make the page more visually appealing. Examples:
- Change text colour – <h1 style="color: blue;">My Name is...</h1>
- Change alignment – <p style="text-align: center;">I am from...</p>
- Add a background colour – <body style="background-color: lightgrey;">
Encourage them to experiment with their page, trying out different colours and fonts from the printed HTML & CSS cheat sheet.

Challenge Activity (Optional): Fancy Web Design

For students who finish early, challenge them to:
- Add an image to their webpage:
  <img src="image-link.jpg" alt="A picture of me">.
- Create a clickable link:
  <a href="https://www.example.com">Click to Visit!</a>.

Plenary (5 minutes)

Conduct a "Gallery Walk":
- Each student shows the class their web page on their screen.
- Ask them to share one feature they are proud of and one challenge they overcame.
Recap Key Learning:
- What is HTML? (Structuring content)
- What is CSS? (Styling content)
Preview Next Lesson:
- "Next time, we’ll learn how to add more interactivity to your web pages!"

Differentiation Strategies

Support for Lower Ability Students:
- Provide a partially filled template with starter tags already in place.
- Assign a buddy or an adult assistant to aid during the styling phase.
Challenge for Higher Ability Students:
- Encourage embedding custom fonts using Google Fonts (briefly demonstrate the <link> tag in <head> for external resources).
- Ask them to use CSS classes or embed an external CSS file.

Assessment

Formative Assessment: Observe students’ progress during practical activities and support where required.
Summative Assessment: Completed HTML web pages saved and shared with the teacher for review. Mark based on creativity, correct use of tags, and application of styles.

Reflection

Encourage students to reflect after the lesson:

"What did you enjoy about making your web page?"
"What would you want to create next if you could design any webpage?"

End the lesson by celebrating their efforts with positive feedback and enthusiasm for their burgeoning coding skills!

Building Web Pages

Teaching Instructions

Building Web Pages

Lesson Overview

Lesson Objectives

Resources Needed

Lesson Structure

Introduction (10 minutes)

Main Activity (30 minutes)

Plenary (5 minutes)

Differentiation Strategies

Assessment

Reflection

Create Your Own AI Lesson Plan