← How a web page is made

Three layers

A web page is content (the words and pictures), structure (HTML tags saying what each part is) and presentation (CSS saying how it looks). Swap the style sheet and only the look changes; show the structure and see the tags underneath.

One page, three completely different looks, and not a single word changed. What did change?

Put to work in: What your page gives away (Digital systems › Capture the flag) · Why keep them apart (Digital systems › How a web page is made)

Every web page you read is built in three layers: content (what it says), structure (what each part is) and presentation (how it looks). You don't need to write code to see them: this board takes one page apart.

PredictRead the problem and decide what you think before you try anything. A wrong guess is fine: it shows you what to look for.

Style sheet off

You switch off a web page's style sheet (its CSS). What is left?

TryTry it on the board and compare the result with your prediction.

Try: swap the look

Was your prediction right?

Try it yourselfYour edits are saved in this browser.

Try at least two style sheets and show the structure. Then switch the style sheet off. What is left?

Use the board. This ticks when you get there.

InvestigateWork out why it happens, one step at a time.

Worked example: one part, three layers

Worked exampleBefore each step, say what you think comes next.
  1. content: This week\text{content: } \textit{This week}The words on the page.

Now sort the parts of the page.

Which layer is each one?

The words "Bring a friend!"
A photo of the robot
<h2> marking "This week" as a heading
<ul> and <li> marking the list
<nav> marking the menu
color: teal
font-size: 30px
The page's background colour

Sam compares the Plain and Poster styles. Click the line where it first goes wrong.

You want every heading on the page to be purple. Which layer do you change?

ModifyChange the problem on purpose and see what happens.

Vary: change one layer

Try it yourselfYour edits are saved in this browser.

In the style sheet, make the main heading (h1) a different colour. Did the structure or the words change?

Use the board. This ticks when you get there.

Now make every h2 heading at least 28 pixels tall, with one rule.

Use the board. This ticks when you get there.

This time edit the HTML: change the words "This week" to "Today". Which layer changed?

Use the board. This ticks when you get there.

PractiseA few on your own, to check you have it.

Which layer?

The school site gets a dark mode. Which layer changes?

The page is translated into French. Which layer changes?

Three lines of text become a bulleted list. Which layer changes?

Review: how does the computer store the word "Hi" in the page?

MakeMake your own problem using what you have learned. Expect a few tries; that is normal.

A new look

Then: open any website and imagine its style sheet switched off. What would its structure be?

Try it yourselfYour edits are saved in this browser.
Need a hint?

Only the style sheet box is yours to change.

Another hint

Try body { background: …; } and h1 { color: …; }.

Another hint

For example body { background: black; color: white; } and h1 { color: gold; }.

Give the page a completely new look: a new background and a new heading colour, without changing the HTML.

Use the board. This ticks when you get there.

For teachers

Students swap style sheets, show a page's structure and switch the style off to separate content, structure and presentation, then change one layer at a time (AC9TDI10K02 nodes 1 and 2), with no coding needed. About 40 minutes.

Open the teacher guide: answers, solutions, slides and a worksheet.

Students will be able to

Before class

Try the boards yourself.

The one idea: content, structure and presentation are separate layers. This is a Knowledge and understanding lesson: students read and tweak a style sheet but never have to write a page. The Code pathway's HTML & CSS course is where they build pages (its Rules and selectors lesson links back here).

Node 2's minimum width asks students to write a small page; here they edit an existing one, which covers the explanation part. Students who want to write their own can open the HTML & CSS course's first lesson.

Hands-on: in a browser, many sites can be seen without their style sheet (Firefox: View › Page Style › No Style; Safari's Reader view is similar).

Running the lesson

  1. Predict: students who said a blank page think the style sheet holds the words.
  2. Try: ask what stayed the same across all three looks.
  3. Worked example: for each sorted item, ask "what it says, what it is, or how it looks?"
  4. Vary: after the content change, ask which layer a translator would change.
  5. Make: compare looks; ask whether anyone needed to touch the HTML.

The hard part (on purpose)

Students judge parts by how they look. Keep asking "what is it?" before "how does it look?", and use the Structure button to check.

When students get stuck

Stretch and support

Stretch: Find a website with a dark mode switch. Which layer does the switch change, and how could you tell?

Support: A three-column card: Content (what it says), Structure (what it is), Presentation (how it looks), with an example of each.

Where it leads

Next: Why keep them apart (sites, phones, screen readers).

Put to work in: Code › HTML & CSS (writing pages and style sheets).

What each step is for

Now you can
Next lesson2. Why keep them apartKeeping content, structure and presentation apart lets each change on its own: one style sheet restyles a whole site, the same page fits a phone or a laptop, and a screen reader can tell a blind reader what each part is. A page that fakes its structure with looks works for nobody but sighted readers.