Sorting webpage components into layers
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. The words 'Welcome to our school' inside an <h1> tag: which layer are the words themselves?
2. Which part of <h1>Our Team</h1> is the structure layer?
3. p { color: blue; } changes the font colour. Which layer is that?
4. In <a href="shop.html">Shop</a>, the destination shop.html tells the browser where the link goes. Which layer is the link itself?
5. A script shows a pop-up message when a user clicks a button. Which layer does the script belong to?
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1<h1>Welcome</h1> | AA CSS rule that centres text is presentation, not content. Content is the words and images themselves. | |
| 2p { color: navy; } | Bbutton.onclick = function() { alert('Hi'); }; | |
| 3Behaviour layer: a script reacts when the user clicks a button | CThe h1 tag is structure: it labels the text as the main heading. The word Welcome inside it is content. | |
| 4Structure layer: a link's destination is set by a tag attribute | DPresentation: a CSS rule that decides how paragraph text looks, without changing the words or the tags. | |
| 5<h1 style="color: red;">Sale</h1> (said to be only structure) | EThe colour red is presentation, not structure. Only the h1 tag is structure and the word Sale is content. | |
| 6h1 { text-align: center; } (said to be content) | F<a href="shop.html">Shop</a> |
C
Definitions
web page layers
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
<__>Welcome</h1>
2.
p { _____: blue; }
3.
<a ____="shop.html">Shop</a>
4.
<______>alert("Hi");</script>
5.
body { ________________: navy; }
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
<h1>My Pets</h1>
B
<p>Rex is a dog.</p>
C
<a src="pets.html">More</a>
Question 2
A
h1 {
B
color: navy;
C
background: #eef;
D
font-size; 32px;
E
}
Question 3
A
<body>
B
<h2>Our House</h3>
C
<p>Bricks hold it up.</p>
D
</body>
Question 4
A
<button id="btn">Hi</button>
B
<script>
C
btn.onclick == function() {
D
alert("Hello!");
E
};
F
</script>
Question 5
A
<style>
B
p { color= green; }
C
</style>
D
<p>Grass is green.</p>
Answer Key
Sorting webpage components into layers
Section A: Quick Questions
Q1
A — Content
Q2
A — The <h1> tags
Q3
A — Presentation
Q4
B — Structure
Q5
B — Behaviour
Section B: Match the Pairs
Q1
<h1>Welcome</h1> → The h1 tag is structure: it labels the text as the main heading. The word Welcome inside it is content.
Q2
p { color: navy; } → Presentation: a CSS rule that decides how paragraph text looks, without changing the words or the tags.
Q3
Behaviour layer: a script reacts when the user clicks a button → button.onclick = function() { alert('Hi'); };
Q4
Structure layer: a link's destination is set by a tag attribute → <a href="shop.html">Shop</a>
Q5
<h1 style="color: red;">Sale</h1> (said to be only structure) → The colour red is presentation, not structure. Only the h1 tag is structure and the word Sale is content.
Q6
h1 { text-align: center; } (said to be content) → A CSS rule that centres text is presentation, not content. Content is the words and images themselves.
Section C: Definitions
Q1
web page layers — Every part of a page is content (words, images), structure (tags), presentation (CSS colour, layout) or behaviour (JavaScript). Each layer can be changed on its own.Section D: Fill in the Blanks
Q1
<h1>Welcome</h1>Q2
p { color: blue; }Q3
<a href="shop.html">Shop</a>Q4
<script>alert("Hi");</script>Q5
body { background-color: navy; }Section E: Spot the Error
Q1
C — A link's destination is part of the structure layer and is set with the href attribute. src is used for images and scripts, so it should be <a href="pets.html">More</a>.
Q2
D — Font size is presentation, written in CSS as property: value. The colon is missing, so it should be font-size: 32px;.
Q3
B — The heading's tags are structure and must match. An h2 opens with <h2> and must close with </h2>, not </h3>.
Q4
C — JavaScript is the behaviour layer, reacting to clicks. The handler is assigned with a single =, so it should be btn.onclick = function() {.
Q5
B — Colour is presentation, set in a CSS rule. A declaration uses a colon, so it should be p { color: green; }.