One change, every page
The made-up Eastfield Film Club website has ten pages. The club changes its colour from blue to green. In the first version, someone must edit ten pages by hand. They miss two.
In the second version, every page shares one style and one template. One change updates all ten. This lesson shows how to build that way.
By the end of this lesson
Note
I can build a small page with a shared style, a template and a working form.
Key words
| Word | What it means |
|---|---|
| Template | a ready-made page layout you fill in |
| Style sheet | one set of rules for colours, fonts and spacing |
| Form | a set of boxes a user fills in and sends |
| Interactive content | content that reacts when the user acts |
| Personal data | facts that identify a living person, such as a name |
| Edit | to change content to fit its job |
The cells students fill in are left blank in this preview.
Starter: what you already know
Have a go
Starter: what you already know
4 questionsYour answers are marked here and are not kept. A college account keeps every student’s marks.
One style sheet gives every page one look
A template gives every page the same parts: a header, the main content and a footer. A style sheet holds the colours, fonts and spacing in one place, so the pages look like one family.
A content management system does this for you. The code below shows what it makes underneath.
Try it: change the style once
<header><h1>Eastfield Film Club</h1></header>
<main>
<h2>This week</h2>
<p>Film night is on Friday at 7pm.</p>
<a class="btn" href="#join">Join the club</a>
</main>
<footer>Questions? Ask in Room 4.</footer>
Check
Have a go
Check
3 questionsYour answers are marked here and are not kept. A college account keeps every student’s marks.