10 Multimedia · 2026
Week 1 · Lesson 01

What is a Website? Anatomy of the Web

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

IND5-1IND5-3IND5-5IND5-9IND5-10

Learning intentions

  • I can describe how a website reaches my screen when I type a URL.
  • I can identify the three languages of the web (HTML, CSS, JavaScript) and what each one does.
  • I can use Chrome DevTools Inspect Element to see the code behind any webpage.

Success criteria

  • I can label 5 parts of a webpage (header, navigation, main content, footer, image).
  • I can open DevTools on any site and find the <h1> tag.
  • I can explain the difference between HTML, CSS, and JavaScript in one sentence each.

Do Now · 5 min

Open these three websites in three tabs:

Spend 2 minutes looking at them. In your notebook (or the worksheet zone below), write 3 things that are different between them, and 3 things that are the same.

Worksheet zone

Different:

1. _____________________________________________
2. _____________________________________________
3. _____________________________________________

Same:

1. _____________________________________________
2. _____________________________________________
3. _____________________________________________

I Do · ~10 min Teacher demonstration

Teacher traces the journey from typing apple.com to seeing the page render:

  1. You type a URL. The browser asks DNS (the phonebook of the internet) "where is apple.com?"
  2. DNS replies with an IP address (a phone number, like 17.253.144.10).
  3. Your browser sends a request to that address: "please send me the homepage."
  4. Apple's server responds with a bundle of files: HTML, CSS, JavaScript, images.
  5. Your browser renders those files into the page you see.
Key idea: a website is just text files that a computer sends to your computer. That's it. There is no magic. You can read every website's source code.

Teacher then opens DevTools (F12 or right-click → Inspect) on apple.com and shows:

The three languages:
HTML = content and structure (the skeleton)
CSS = presentation and style (the skin and clothes)
JavaScript = behaviour and interactivity (what happens when you click)

Bonus — A 1-minute history of web browsers (Browser Wars)

The web was invented in 1989 by Tim Berners-Lee. The first browser was Mosaic (1993). Netscape and Internet Explorer fought the "Browser Wars" in the late 90s (they deliberately broke compatibility to lock users in — your teacher remembers). Chrome launched 2008 and now dominates. Why does this matter? Because every modern browser still supports decades of legacy decisions — and that's why DevTools exists, to see what the browser actually rendered from your code.

Discussion: If you were designing the web today, what would you do differently?

We Do · ~15 min Guided build

Together, open en.wikipedia.org/wiki/Web_design and use Inspect Element to find:

  1. The page's single <h1> heading
  2. The <nav> element at the top
  3. One <img> element — note its src and alt attributes
  4. The first <p> paragraph

Class discussion: what are these tags called and what do they do?

<h1>Web design</h1>
<p>Web design encompasses many different skills...</p>
<img src="..." alt="Screenshot of a browser">

You Do · ~35 min Independent practice

Pick any website you visit often (YouTube, a game site, a shop, your school site). Use DevTools to find and note down:

  1. The main <h1> — write down what it says
  2. Count how many <a> (link) tags you can find in the navigation
  3. Find one image and write down its alt text (or note if it has no alt)
  4. Take a screenshot of the Elements panel showing any HTML tag you recognise

Save your screenshot to OneDrive in a folder called Y10-MULTI-T2/L01.

Launch the exemplar if you finish early: anatomy of a webpage.

Differentiation

Support

Teacher opens DevTools with the student on the first site. Provide a labelled screenshot of DevTools highlighting Elements / Styles / Console panels. Task reduced to just identifying h1 and one img.

Core

Complete the full task as written. Submit screenshot + written answers.

Extension

On any site, find one CSS property that is unusual or creative and write a sentence about what it does. Bonus: open view-source: in the URL bar and copy 5 lines of HTML you recognise.

Exit Ticket · 5 min

Exit ticket

1. Label the 5 parts of a webpage you see on screen:

Header, ______, ______, ______, Footer

2. Finish the sentence in one line:

"HTML gives a webpage its _______________________________"

"CSS gives a webpage its _______________________________"

"JavaScript gives a webpage its _______________________________"

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.