Session 19 — Your First Web Page

Duration: 60 min · Format: live online · Ages: 8–11

Session goal: by the end, students can explain that a web page is built from HTML "building blocks," write headings, paragraphs, an image, and a link, and see their own page come alive in the browser.

Before class — prep (5 min)

• Open CodePen in a tab and start a new Pen (top-left Create → Pen). You'll live-code in the HTML box and the result shows on the right — screen-share this.
• Pick one kid-safe image link ahead of time to paste (for example a picture of a planet, a puppy, or a pizza). Test that it loads.
• Have a printed or on-screen copy of the "tags come in pairs" idea ready (open tag, closing tag).
• Ask students to have paper and a pencil ready to sketch their page.

Agenda

0:00 · Hook (5 min)

Ask the class and take a few answers (chat or unmute):

• "Every website you've ever visited — YouTube, a game site, your school page — is made of a secret code. Any guesses what it's called?"
• "If a web page is like a house, what do you think the bricks are?"

Let them guess, then reveal: the bricks are called HTML, and today you'll stack your own bricks and build a real web page you can see in the browser.

0:05 · Teach — What is HTML? Headings and paragraphs (13 min)

Explain, writing the key words on your shared screen:

• HTML = HyperText Markup Language. It's the code that tells the browser what goes on a page.
• HTML is made of tags. A tag is a word inside angle brackets, like <h1>.
• Most tags come in a pair: an opening tag <h1> and a closing tag </h1> (the closing one has a slash /). Your text goes in between.

Share this diagram so students can see how the HTML tags they write turn into the finished web page people see in the browser:

Type this together in CodePen (in the HTML box):

<h1>My Amazing Page</h1>
<p>Hello! This is my very first web page.</p>

Point out what appears on the right: <h1> makes a big heading, <p> makes a normal paragraph of text.

⚠ Watch for the #1 beginner mistake: forgetting the closing tag or the slash in it. <h1>Hi<h1> is wrong; it must be <h1>Hi</h1>. Show what breaks when the slash is missing, then fix it live.

Add a few more so they see the pattern:

<h1>My Amazing Page</h1>
<h2>About Me</h2>
<p>I am 9 years old and I love drawing.</p>
<p>My favourite food is pizza.</p>

Ask: "What's the difference between <h1> and <h2>?" (Take 2–3 answers — <h1> is the biggest title; <h2> is a smaller sub-heading.)

0:18 · Teach — Images and links (12 min)

Explain: two of the most fun tags let you add a picture and a clickable link.

Type this together in CodePen:

<img src="https://picsum.photos/300/200" alt="A random photo">

Explain each part slowly:

• <img> is the image tag. It's special — it has no closing tag.
• src is the web address of the picture (where it lives on the internet).
• alt is a short description, in case the picture can't load or is read aloud.

⚠ Watch for: the src must be a real link wrapped in quotation marks. If the picture doesn't show, check for a typo in the link or a missing quote ".

Now a link — type this together in CodePen:

<a href="https://www.nasa.gov">Visit NASA</a>

• <a> is the link (anchor) tag.
• href is the address it jumps to.
• The words between <a> and </a> are what the reader clicks.

Ask: "What would you change to make the link go to a different website?" (Answer: change the address inside the href="..." quotes.)

0:30 · Activity — Build your own page (20 min)

Activity — My First Web Page (≈20 min). Each student opens their own new Pen at CodePen (or takes turns if you share one screen). Their page must include all four building blocks:

1. One <h1> title — the name of their page (e.g. "All About Me").
2. At least two <p> paragraphs — facts about themselves or a favourite topic.
3. One <img> — paste an image link (offer a safe one: https://picsum.photos/300/200).
4. One <a> link — to a website they like.

Circulate (or invite them to share screens) and help fix broken tags.

Debrief: "You just wrote real HTML — the same kind of code used on every website in the world."

0:50 · Check for understanding (7 min)

Ask these aloud or drop them in the chat. Answer key (for you):

1. What does HTML do? → It's the code that tells the browser what to put on a web page.
2. What is missing here: <p>Hello? → The closing tag </p>. It should be <p>Hello</p>.
3. Which tag makes a big heading, and which makes a clickable link? → <h1> makes a heading; <a> makes a link.

0:57 · Wrap-up + homework (3 min)

• Ask one student to name the four building blocks they used today (heading, paragraph, image, link).
• Homework — Plan Your Page: on paper, sketch a web page about yourself or a topic you love. Write a title, two facts, and pick one website to link to. Bring the sketch to Session 20 — you'll add colours and style to it.

Teaching notes

• Correct this misconception: "The picture and words live inside my code file." Reframe: the <img> only holds a link to a picture that lives somewhere else on the internet; your HTML points to it.
• Fast finishers (extension): introduce three more tags — <ul> and <li> to make a bullet list, and <br> to force a line break. Challenge them to add a "My Top 3" list to their page:

<h2>My Top 3 Foods</h2>
<ul>
  <li>Pizza</li>
  <li>Mango</li>
  <li>Ice cream</li>
</ul>

Then ask them to explain why <li> items sit inside <ul>. - Low-tech fallback: if devices are limited, screen-share one CodePen Pen and build the class page together — call on different students to dictate the next tag. On paper, students can "write HTML" by hand and you type the winning lines.

Practice set

Assign in class or as homework. Answers are for you, after the arrow.

1. What do the letters HTML stand for, roughly, and what is it for? → HyperText Markup Language — the code that tells the browser what to show on a page.
2. Write the HTML for a big heading that says "My Pets." → <h1>My Pets</h1>
3. Fix this broken tag: <p>I like football<p> → The closing tag needs a slash: <p>I like football</p>
4. Which tag adds a picture, and what does its src part hold? → The <img> tag; src holds the web address of the picture.
5. Write a link with the words "Play a game" that goes to https://scratch.mit.edu. → <a href="https://scratch.mit.edu">Play a game</a>
6. A student's image won't show up. Name two things you'd check. → The src link is spelled correctly and is a real address; the quotation marks " around the link are both there.

Going deeper (optional)

• Why tags come in pairs. Explain that the opening tag says "start treating text this way" and the closing tag says "stop here." Show a paragraph without its closing </p> and let students see the browser sometimes "guesses" — then land the point: closing your tags keeps the page tidy and predictable, especially once pages get big.
• What "alt text" really does. Explain that alt is read aloud to people who can't see the picture, and shows up if the internet is slow. Ask the class to write good alt text for a photo of their pet — not "image" but something useful like "my brown dog asleep on the sofa." This plants the idea that good web pages work for everyone.

Common mistakes & fixes

• Mistake: forgetting the closing tag, e.g. <h1>Title. → Fix: every pair needs its partner — <h1>Title</h1>. Read tags out loud as "open… close."
• Mistake: leaving the slash out of the closing tag, e.g. <p>Hi<p>. → Fix: the closing tag always has a slash: </p>. Point at the slash and say "this one turns it off."
• Mistake: putting an image link without quotation marks, e.g. <img src=https://...>. → Fix: the address must sit inside quotes: <img src="https://...">.
• Mistake: adding a closing tag to an image, e.g. <img>...</img>. → Fix: <img> is a lonely tag with no closing partner — write it just once.
• Mistake: typing text before the opening tag, e.g. Hello<p>there</p>. → Fix: put the text you want styled between the tags: <p>Hello there</p>.

Vocabulary

Resources

• CodePen — write HTML and see it instantly (main tool).
• MDN — HTML basics — friendly reference if you want more tags.
• Lorem Picsum — free placeholder photos; use https://picsum.photos/300/200 for a quick image.
• W3Schools — HTML Tags — a simple list of every tag, for the curious.

Next session

Session 20 — Make It Yours: students learn CSS to add colours, fonts, backgrounds, and spacing, and give their page its own style.