Grade 7 Web Development Test

Type your answers in the boxes. When you are done, click Finish & download my answers at the bottom and hand in the file that downloads. Take your time — a partly right answer can still earn marks. It is okay if you do not finish the bonus.

Section A: HTML Basics (8 points)

A1. What does HTML do on a web page?

It makes the page colourful and pretty
It holds the content — the words, headings, lists, and pictures
It makes buttons do something when you click them
It connects the page to the internet

A2. Which tag makes the biggest heading on a page?

<p>
<h6>
<h1>
<big>

A3. Which tag creates a bullet-point list?

<ul>
<li>
<list>
<p>

A4. What is the alt in <img src="cat.jpg" alt="A sleeping cat"> for?

It is the file name of the picture
It describes the picture in words (for example, if it fails to load)
It sets how big the picture is
It is just a comment that does nothing

A5. In a table, what is the difference between <th> and <td>?

<th> is a header cell (a label); <td> holds the actual data
<th> is a row; <td> is a column
They are exactly the same
<th> is for text; <td> is for numbers

A6. Which tag makes one row of a table?

<table>
<row>
<tr>
<td>

A7. True or False: every tag you open, like <p>, should also be closed, like </p>.

True
False

A8. Which part of the page holds the title that shows on the browser tab?

the <body>
the <head>
the <h1>
the <footer>

Section B: CSS & Structure (10 points)

B1. What is the job of CSS? (2 pts)

B2. Match each CSS piece to what it means. Pick the correct letter for each one. (4 pts)

background-color		a) the space inside an element, around its content
h1 { }		b) sets the colour behind an element
padding		c) targets every <h1> on the page
.wonder-title		d) targets only elements with class="wonder-title"

B3. This line goes in the <head> to connect a stylesheet. Fill in the blank. (2 pts)

<link rel="stylesheet" ________="index.css">

The missing word is:

B4. In the rule below, name the two parts pointed to by the arrows. (2 pts)

body { background-color: lightblue; }
 ↑              ↑
(1)            (2)

(1) is called the

(2) is called the

Section C: Read the JavaScript (14 points)

Write EXACTLY what each program prints, in order. One line of output per console.log.

C1. (2 pts)

let score = 8;
score = score + 2;
console.log(score);

C2. (2 pts)

let animals = ["lemur", "orangutan", "snake"];
console.log(animals[0]);
console.log(animals.length);

C3. (3 pts)

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

C4. (3 pts)

let total = 0;
for (let i = 1; i <= 3; i++) {
  total = total + i;
}
console.log(total);

C5. (2 pts)

let age = 11;
if (age >= 13) {
  console.log("teen");
} else {
  console.log("kid");
}

C6. (2 pts) In the Zoo Webpage, a fact is chosen like this. Why does the code use Math.floor?

let i = Math.floor(Math.random() * facts.length);

Section D: Fix & Write (8 points + bonus)

D1. Each row of this table should have the same number of cells, but one row is broken so the table looks crooked. Which row is wrong, and how do you fix it? (3 pts)

<table>
  <tr> <th>Animal</th> <th>Home</th> </tr>
  <tr> <td>Penguin</td> </tr>
</table>

D2. Write the HTML for a heading that says My Favourite Animals followed by a bullet list of any three animals. (5 pts)

BONUS. Write a loop that prints the numbers 1 to 10, one per line. (3 pts)

✅ Done! Your answers file has downloaded. Hand it in the way your teacher asked (shared folder, USB, or class page). You can close this page now.