Web Development Worksheet: Final Test
Code tip (Read it like a browser): Find the topic: HTML, CSS, JavaScript or how the web works. Read the code line by line, the way a browser would. For sums and loops, write each step down and check it again.
NameDateTime takenScore ___ / 40
- 1.True or false: <article> holds the logo and title. (a) False (b) True
- 2.🔒 What does the lock (HTTPS) in the address bar mean? (a) the site is free (b) the site is fast (c) the site is a game (d) the data is scrambled
- 3.True or false: the URL sends the page back. (a) False (b) True
- 4.📋 Which list tag is an ordered list? (a) <ol> (b) <li> (c) <ul>
- 5.📄 Where does <table> go: in the head or in the body? (a) in the head (b) in the body
-
6.📊 How many cells are in each row?
<table>
<tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
<tr><td>Mango</td><td>Grapes</td><td>Jamun</td><td>Mango</td></tr>
</table> -
7.✍️ What value is given to text-align in this rule?
h2 {
text-align: center;
font-style: italic;
background-color: yellow;
margin: 10px;
} (a) 10px (b) text-align (c) center (d) yellow - 8.What does background-color do? (a) centres a heading (b) picks the font style (c) makes letters bigger (d) colours behind the text
- 9.🔍 Which is the odd one out? (a) puts a picture on a page (b) makes a form box (c) gives the page structure (d) changes the page live
-
10.📦 How much space across (px) does this box take in all, margin included?
.box {
width: 200px;
padding: 5px;
border: 1px solid black;
margin: 0px;
} - 11.True or false: padding is space inside the border. (a) True (b) False
-
12.🔍 Which line is missing its closing tag?
line 1: <u>My pets
line 2: <strong>Our school trip</strong>
line 3: <small>The red kite</small> (a) line 2 (b) line 3 (c) line 1 - 13.True or false: in <img>, src is read by screen readers. (a) False (b) True
- 14.Which of these is true of a code editor? (a) turns HTML into a page (b) answers page requests (c) is where we type code (d) stores a website’s files
-
15.📦 How much space across (px) does this box take in all, margin included?
.box {
width: 200px;
padding: 20px;
border: 3px solid black;
margin: 0px;
} - 16.True or false: <ol> shows bullet points. (a) True (b) False
- 17.🔠 How many heading levels does HTML have? (a) 6 (b) 3 (c) 10 (d) 4
- 18.📋 Which list tag is one item of a list? (a) <li> (b) <ul> (c) <ol>
-
19.📄 What does the browser tab show for this page?
<!DOCTYPE html>
<html>
<head>
<title>My Hobbies</title>
</head>
<body>
<h1>Match report</h1>
<p>I like to read.</p>
</body>
</html> (a) I like to read. (b) index.html (c) My Hobbies (d) Match report - 20.Which of these is true of <aside>? (a) holds one blog post (b) sits at the bottom (c) holds extra side notes (d) helps you move around
- 21.📝 Does <li> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
-
22.📋 Does this list show bullets or numbers?
<ol>
<li>Mango</li>
<li>Litchi</li>
</ol> (a) bullets (b) numbers -
23.🔁 What number does this code print?
let total = 0;
for (let i = 1; i <= 8; i++) {
total = total + i;
}
console.log(total); -
24.♿ Is this heading order correct (no level skipped)?
<h1> → <h2> → <h3> → <h4> (a) Yes (b) No - 25.🔁 Which loop repeats code a set number of times? (a) else (b) for (c) let (d) if
-
26.📝 At most, how many of these can be chosen at the same time?
<form>
<input type="radio" name="fruit"> Papaya
<input type="radio" name="fruit"> Mango
<input type="radio" name="fruit"> Guava
<input type="radio" name="fruit"> Banana
</form> -
27.📝 How many paragraphs does this code make?
<p>Cricket is fun.</p>
<h2>Cricket is fun.</h2>
<p>I love mangoes.</p> - 28.True or false: padding is a solid or dotted edge. (a) False (b) True
- 29.True or false: <table> goes in the head. (a) True (b) False
-
30.🔗 Where does this link open?
<a href="maths.html">Play games</a> (a) in the same tab (b) in a new tab - 31.🔠 Which heading shows the BIGGEST text: <h3>, <h1>, <h6> or <h2>? (a) <h6> (b) <h2> (c) <h1> (d) <h3>
-
32.🖼️ The picture cannot load. Which text does the browser show instead?
<img src="tiger.jpg" alt="A tiger asleep" width="150"> (a) width (b) tiger.jpg (c) A tiger asleep (d) A red kite - 33.True or false: a code editor stores a website’s files. (a) True (b) False
- 34.🌈 Which colour is #ffff00? (a) magenta (b) white (c) yellow (d) black
- 35.True or false: <link rel="stylesheet"> goes in the body. (a) True (b) False
- 36.📊 Which tag makes a heading cell? (a) <table> (b) <caption> (c) <th> (d) <td>
-
37.⚖️ What colour is the text of this element?
<h2 class="menu" id="main">Hi</h2>
CSS:
#main { color: black; }
.menu { color: white; }
h2 { color: yellow; } (a) white (b) red (c) black (d) yellow - 38.🌈 Which colour is rgb(0, 0, 0)? (a) black (b) bright green (c) magenta (d) red
-
39.⚖️ What colour is the text of this element?
<h2 class="box" id="top">Hi</h2>
CSS:
.box { color: blue; }
h2 { color: purple; } (a) orange (b) purple (c) yellow (d) blue -
40.💬 Which text will NOT show on the page?
<!-- <p>My best friend</p> -->
<p>Rain today</p>
<p>I love mangoes.</p>
<p>My pets</p> (a) My pets (b) I love mangoes. (c) Rain today (d) My best friend
Answer key
- False
- the data is scrambled
- False
- <ol>
- in the body
- 4
- center
- colours behind the text
- changes the page live
- 212
- True
- line 1
- False
- is where we type code
- 246
- False
- 6
- <li>
- My Hobbies
- holds extra side notes
- has a closing tag
- numbers
- 36
- Yes
- for
- 1
- 2
- False
- False
- in the same tab
- <h1>
- A tiger asleep
- False
- yellow
- False
- <th>
- black
- black
- blue
- My best friend
Free html and css lessons, practice and worksheets at talentjr.in/html-css-for-kids