Week 27 — Your first web page — HTML¶

At a glance


Date	Friday, March 19, 2027
Unit	4 — Ship It
Big idea	A web page is just text with tags that tell the browser what each part means.
Goal	Every student leaves with a working `index.html` page that can become their first public website.
Student accounts needed	None. Use a browser HTML editor; school Google Drive only if the class already has it.
Prep time	5 minutes

Why this lesson looks the way it does¶

Last Friday we either finished Python mini-projects or used the flex week to catch up. Today is a deliberate reset: same problem-solving brain, new medium. Do not oversell HTML as "real programming" or undersell it as "just markup." The teachable point is better: the internet is built out of files, and students can make those files.

The mixed-age room is handled by keeping the first artifact tiny and public-ready. Starters get working code to change. Builders add structure. Extenders start thinking like front-end developers: semantic tags, accessibility, and clean paths. Everyone is moving toward Week 29, when these files leave the classroom.

CSTA 2026 standards¶

Concept area	Connection
Algorithms & Design	Plan a page by breaking information into sections before typing code
Programming	Use HTML elements and attributes to create a working digital artifact
Data & Analysis	Represent information with structured text that a browser can interpret
Systems & Security	Describe the browser as software that requests and renders files from the web
Computing & Society	Choose safe, appropriate public content that does not reveal personal information

"I can…" objectives¶

By the end of today, students can say:

I can explain that HTML tells the browser what each piece of content is.
I can edit a working web page without starting from a blank screen.
I can use headings, paragraphs, lists, links, and images safely.
I can choose public-safe content for a page that may go online.

Teacher prep — the 5-minute version¶

Open a no-login browser editor on the projector. Recommended: https://onecompiler.com/html or another school-approved HTML/CSS editor that shows a live preview.
Create a board list of safe public page ideas:
My favorite books/games/sports
A guide to a hobby
A mini museum page about an animal, invention, or place
A fictional character profile
Write the safety rule on the board:

Public page rule: first name or nickname only, no school details, no address, no phone/email, no photos of students.
Make a shared class folder named Unit 4 Drop Box for Week 29. Students do not need it today unless they finish early.

Minute-by-minute run sheet¶

0:00–0:04 — Anchor¶

Say roughly this:

"Last Friday we were finishing Python: text in, text out, logic in the middle. Today we switch to the thing your grandmother actually sees when she clicks a link: a web page.

The promise from August was that by May every one of you would have something live on the internet. This is the first brick."

Then ask:

"When you open a website, what do you think your browser is actually receiving?"

Take two answers, then land it: files.

0:04–0:12 — Mini-lesson: tags are labels¶

Project this tiny page and type it slowly enough that students can see the pattern:

<!doctype html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, internet.</h1>
    <p>This page was built by a student at ECA.</p>
  </body>
</html>

Say:

"HTML tags are not magic words. They are labels. This says: browser, this is the title; this is the main heading; this is a paragraph. The browser does the drawing. We provide the structure."

Privacy starts today

Say this before students personalize anything:

"In two weeks, some version of this can be public. Public means anyone with the link can see it. So we will use first names, nicknames, or project names only. No full names, no selfies, no contact info, no 'I go to school at...' details. Cool pages do not need private information."

0:12–0:36 — Paired build: make the page yours¶

Students work in pairs, but each student builds their own page. Pairing is for debugging, not sharing one artifact.

Give every student this starter. Starters copy it exactly, then change the words. Builders and Extenders may restructure it.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Jordan's Hobby Guide</title>
  </head>
  <body>
    <h1>Jordan's Hobby Guide</h1>
    <p>Welcome! This page is about something I enjoy learning.</p>
    <h2>Three things to know</h2>
    <ul>
      <li>It takes practice.</li>
      <li>You can start small.</li>
      <li>It is more fun with friends.</li>
    </ul>
    <h2>My favorite link</h2>
    <p>Learn more at <a href="https://www.khanacademy.org/" target="_blank">Khan Academy</a>.</p>
  </body>
</html>

Circulate with these questions:

"What is the browser showing that came from your code?"
"Which tag controls that part?"
"Is anything on this page too private to publish?"
"If someone visited this page without you there, would they understand what it is?"

The mixed-age move

When an older student finishes quickly, do not send them to random extra features. Ask them to help a younger student find one missing closing tag, then return and add a new section to their own page.

Choose two pages: one simple and clear, one with an interesting bug.

"We are not voting on the prettiest page. We are looking for pages a browser can understand and a stranger can understand. Those are two different kinds of clarity."

Ask the class to identify one tag they can see working.

0:42–0:45 — Teaser + prompt¶

"Next class is not next Friday — we have Good Friday and spring break. When we come back, we make these pages look like yours with CSS: colors, spacing, borders, fonts."

Tiered challenges¶

🟢 Starter — grades 5–6¶

Start with the exact code above. Change only the title, heading, paragraph, three list items, and link text. If you break the page, undo the last change and compare opening and closing tags.

🟡 Builder — grades 7–8¶

Add a second section:

<h2>Beginner tips</h2>
<ol>
  <li>Start with one small goal.</li>
  <li>Ask someone experienced to explain one step.</li>
  <li>Keep track of what worked.</li>
</ol>

Then add one safe image from a source your teacher approves. Use descriptive alt text:

<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg" alt="Simple placeholder image" width="300">

🔴 Extender — grades 9–10¶

Make the page more semantic:

<header>
  <h1>Jordan's Hobby Guide</h1>
</header>
<main>
  <section>
    <h2>Why I like it</h2>
    <p>Write two specific sentences here.</p>
  </section>
</main>
<footer>
  <p>Built in ECA Coding, 2027.</p>
</footer>

Then inspect whether every image has useful alt text and every link text makes sense by itself.

"Point to one thing on your page and tell us the exact HTML tag that created it."

🤔 Think About This¶

Notice one website this week that has a style you like. Not the topic — the style. What color, spacing, or layout choice makes it feel good to use?

🔌 Unplugged Plan B — if the internet is down¶

You can still teach HTML as structure. Run this instead:

Time	Activity
0:00–0:04	Same anchor: last unit was Python; this unit is files on the web
0:04–0:12	On the board, draw a simple page and label each part with paper tags: `<h1>`, `<p>`, `<ul>`, `<li>`, `<a>`
0:12–0:28	Students fold paper into a "browser window" and design a public-safe page. They must write the HTML tag name beside each content block.
0:28–0:36	Pair trade: partner checks for privacy problems and missing structure
0:36–0:42	Two students present their paper page; class names the tags
0:42–0:45	Same teaser: next time we style these with CSS

Keep the paper drafts. They become fast typing plans when the internet returns.

Common problems & fixes¶

Problem	Fix
Student types into the preview instead of the editor	Point to the code pane and say, "The left side is instructions; the right side is the browser obeying."
Missing closing tag makes everything look wrong	Have the student read tags aloud in pairs: "open h1, close h1."
Student wants to use full name or personal photo	Redirect: "Use a project name. Your work can be public without your private life being public."
Link does nothing	Check that `href` has quotation marks and starts with `https://`.
Image will not load	Do not troubleshoot image hosting for ten minutes. Replace it with text or the placeholder and keep moving.
Older student finishes early	Ask for semantic structure and alt text, not flashy scripts.

Vocabulary¶

HTML — the markup language that gives structure to a web page
Tag — a label inside angle brackets, like <p>, that tells the browser what something is
Element — an opening tag, content, and usually a closing tag together
Browser — software that requests web files and renders them for people to use
Public information — content safe for anyone on the internet to see

Reflection — fill in after class¶

Who was comfortable typing angle brackets and quotes?
Which students needed a no-blank-page starter every time?
Any privacy misconceptions to reteach before deployment?
Which pages are already close to publishable?

Next week: Week 28 — Styling with CSS — making it yours