10 Multimedia · 2026
Week 1 · Lesson 02

Your First HTML Page

Week 1 · 75 minutes · Year 10 Industrial Technology — Multimedia

IND5-3IND5-5IND5-6

Learning intentions

  • I can open VS Code and create a new HTML file.
  • I can write the basic HTML document structure from memory.
  • I can preview my HTML file live in Chrome using Live Server.

Success criteria

  • My file has a valid DOCTYPE, html, head, body structure.
  • My file has a <title> I chose, not 'Document'.
  • My page displays my name as an <h1> and one paragraph about me.

Do Now · 5 min

A Word document and a webpage look similar on screen. But they are built differently. What do you think is different about how they are stored on a computer?

A Word document is a _____________ file.

A webpage is a _____________ file.

Hint: try opening both with the "open as text" option and see what happens.

I Do · ~10 min Teacher demonstration

Teacher demonstrates, live in VS Code:

  1. Open VS Code
  2. File → Open Folder → create Y10-MULTI-T2 in OneDrive
  3. File → New File → save as hello.html
  4. Type ! then press Tab — Emmet expands to a full HTML starter
  5. Right-click → "Open with Live Server"
  6. Type inside <body>, save, watch the browser refresh

Starting HTML (what ! Tab expands to):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>
Teacher notice: change <title>Document</title> to something real. That Document default is the #1 giveaway that someone rushed.

Alternative — GitHub Codespaces (no installation required)

If you can't install VS Code on your school device, GitHub Codespaces gives you VS Code running in your browser. Everything we do in VS Code also works in Codespaces. The only difference: your files live on GitHub, so you're also learning the publishing workflow for free.

For Support-tier students: Codespaces is the recommended path. You won't need to install anything; your teacher will help you set up GitHub.

We Do · ~15 min Guided build

Add these lines together inside <body>:

<h1>Hello, I am [your name]</h1>
<p>This is my first real webpage. I am a Year 10 student at Arthur Phillip High School.</p>
<p>I am learning HTML in my Multimedia class.</p>

Save with Ctrl+S. Watch Chrome refresh automatically. If it does not refresh, check Live Server is running (bottom right of VS Code should say "Port: 5500").

You Do · ~35 min Independent practice

Build your own hello.html page. Requirements:

  1. A meaningful title (something like "Yunshu's First Webpage")
  2. An <h1> with your name
  3. Two paragraphs about you — your year, your hobbies, what you want to build this term
  4. Take a screenshot of the browser showing your rendered page
  5. Save the HTML file and the screenshot to OneDrive

When you finish: open the exemplar first-page.html and view source (right-click → View Page Source).

Differentiation

Support

Teacher or paired peer opens VS Code and creates the file together. A pre-written starter file is available at exemplars/02-first-page.html — copy the structure and replace content only.

Core

Complete the task independently.

Extension

Add a third HTML tag you research on MDN (examples: blockquote, mark, small, time). Explain in a comment what your new tag does and when to use it.

Exit Ticket · 5 min

Exit ticket

1. Which goes inside the head and which inside the body?

a) <title> — head / body    b) <h1> — head / body    c) <meta> — head / body    d) <p> — head / body

2. What does DOCTYPE do?

____________________________________________________

3. Paste the URL of your saved OneDrive file or attach your screenshot to Google Classroom.

Resources for this lesson

📚 Deeper Reading

External references drawn from Shay Howe's "Learn to Code HTML & CSS" and University of Michigan's "Web Design for Everybody" Coursera specialization. All credit to original authors.