Three layers

Classroom resources

Load these into Waypoints Prepare: choose Load URL and paste the copied address, or download the file and import it. In Prepare, the worksheet's Teacher edition shows the answers; the student copy hides them.

• Slides Download Copy address for Prepare Present from the browser, or export to PowerPoint or PDF.
• Worksheet Download Copy address for Prepare Print the student copy; the Teacher edition has the answers.

Students will be able to

• I can name the three layers of a web page.
• I can say which layer a part or a change belongs to.
• I can change the look of a page without changing its structure or words.

Timing

Predict and Try 6 min · Worked example 10 min · Vary 12 min · Practise and Make 12 min

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

Answers to the checks

1. style sheet off: You switch off a web page's style sheet (its CSS). What is left?
   Everything except the look: the words (content) and the headings, list and menu (structure) are all still there, in the browser's plain default style.
2. Try: swap the look: Try at least two style sheets and show the structure. Then switch the style sheet off. What is left?
   
   The words and the structure (header, headings, list) are all still there. The style sheet only ever held the look.
3. "This week", layer by layer: Which layer is each one?
   The words "Bring a friend!" → Content; A photo of the robot → Content; <h2> marking "This week" as a heading → Structure; <ul> and <li> marking the list → Structure; <nav> marking the menu → Structure; color: teal → Presentation; font-size: 30px → Presentation; The page's background colour → Presentation
   Content is what it says; structure is what each part is (HTML tags); presentation is how it looks (CSS rules).
4. Find the mistake: Sam compares the Plain and Poster styles. Click the line where it first goes wrong.
   line 3
   Line 3: the style sheet changes how "This week" looks, never what it is. It is an h2 heading in every style. To make it a list item you change the HTML (structure).
5. Which layer?: You want every heading on the page to be purple. Which layer do you change?
   Presentation: one CSS rule
   h2 { color: purple; } in the style sheet: one rule, and the HTML is untouched.
6. Colour: In the style sheet, make the main heading (h1) a different colour. Did the structure or the words change?
   
   Add or change a rule such as h1 { color: crimson; }. The look changed; the structure and the words didn't.
7. Size: Now make every h2 heading at least 28 pixels tall, with one rule.
   
   h2 { font-size: 30px; } changes both h2 headings at once, because the rule applies to every h2.
8. Content: This time edit the HTML: change the words "This week" to "Today". Which layer changed?
   
   The content changed; the structure (still an h2) and the look didn't.
9. Dark mode: The school site gets a dark mode. Which layer changes?
   Presentation
   Dark mode is a different style sheet: only the look.
10. French: The page is translated into French. Which layer changes?
    Content
    The words change; the structure and look can stay.
11. A list: Three lines of text become a bulleted list. Which layer changes?
    Structure
    Wrapping them in <ul> and <li> tags changes what they are: a list.
12. Review: text: Review: how does the computer store the word "Hi" in the page?
    As numbers: one character code for each letter
    H is 72 and i is 105: content is numbers too.
13. a new look: Give the page a completely new look: a new background and a new heading colour, without changing the HTML.
    
    New presentation, same content and structure. That separation is what lets one site have many looks.

Solutions

One possible solution for each task. Other correct programs are fine.

Vary: change one layer › Colour

Open task: any program that does what the step asks.

Vary: change one layer › Size

Open task: any program that does what the step asks.

Vary: change one layer › Content

Open task: any program that does what the step asks.

a new look

Open task: any program that does what the step asks.

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.

Exit ticket

Give one example of each layer from a web page you use, and say which layer a dark mode changes.

For example: the article text (content), its headings and lists (structure), its colours and fonts (presentation). Dark mode changes presentation.

What each step is for

• style sheet off: Committing to what is left without the style sheet tests the new move: presentation is a separate layer from the content and structure.
• Try: swap the look: Swapping style sheets and switching the style off settles the prediction: only the presentation changes.
• Worked example: one part, three layers: Splitting one heading into its three layers models the new move. Sam thinks a style sheet changes what a part is, the misconception planted after the method.
• Vary: change one layer: Each task changes one layer and checks the others stay put: a colour, a size, then the content itself (in the HTML), not the look.
• which layer?: Naming the layer for everyday changes is the same move in mixed forms, plus a review of how text is stored.
• a new look: Restyling the whole page without touching the HTML reverses the process: from a look you want to the presentation rules that make it.

Where it leads

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

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