How a web page is made

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.

1. Style sheet off
2. Try: swap the look
3. Worked example: one part, three layers › "This week", layer by layer
4. Worked example: one part, three layers › Find the mistake
5. Worked example: one part, three layers › Which layer?
6. Vary: change one layer › Colour
7. Vary: change one layer › Size
8. Vary: change one layer › Content
9. Practise: which layer? › Dark mode
10. Practise: which layer? › French
11. Practise: which layer? › A list
12. Practise: which layer? › Review: text
13. A new look

Keeping 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.

1. What the screen reader says
2. Try: listen to both pages
3. Worked example: three reasons › Separation pays off
4. Worked example: three reasons › Find the mistake
5. Worked example: three reasons › Phone or laptop
6. Vary: one change, many effects › A whole site
7. Vary: one change, many effects › Phone
8. Vary: one change, many effects › No style at all
9. Practise: why it matters › A site-wide change
10. Practise: why it matters › Screen readers
11. Practise: why it matters › Review: layers
12. Fix Page B