Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 285 · 40 questions

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.

1. 1.🖌️ Where does the text sit on its line?
   h1 {
     text-align: left;
     color: orange;
     background-color: blue;
     font-size: 24px;
   } (a) on the right (b) on the left (c) in the middle
2. 2.🖌️ Which CSS property centres a heading? (a) background-color (b) color (c) text-align (d) font-size
3. 3.💬 Which text will NOT show on the page?
   <p>My best friend</p>
   <p>Rain today</p>
   <!-- <p>Hello, world!</p> -->
   <p>The red kite</p> (a) Rain today (b) My best friend (c) Hello, world! (d) The red kite
4. 4.📄 What is the first line of an HTML5 page? (a) <body> (b) <html> (c) <head> (d) <!DOCTYPE html>
5. 5.🔍 Which line is missing its closing tag?
   line 1: <b>My pets
   line 2: <p>My best friend</p>
   line 3: <h3>Our school trip</h3> (a) line 2 (b) line 3 (c) line 1
6. 6.🔠 How many <h1> headings should a page usually have? (a) 1 (b) 10 (c) 6 (d) 3
7. 7.🖼️ Which picture file does the browser load?
   <img src="bus.jpg" alt="Our school bus" width="400"> (a) tiger.jpg (b) Our school bus (c) bus.jpg (d) fort.jpg
8. 8.🌍 What is the protocol in this URL?
   https://www.example.net/index.html (a) www.example.net (b) http (c) /index.html (d) https
9. 9.💬 Which text will NOT show on the page?
   <!-- <p>Hello, world!</p> -->
   <p>I love mangoes.</p>
   <p>Rain today</p> (a) Hello, world! (b) I love mangoes. (c) Rain today
10. 10.📋 Does this list show bullets or numbers?
    <ul>
      <li>Litchi</li>
      <li>Banana</li>
    </ul> (a) numbers (b) bullets
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      font-style: italic;
      text-align: center;
      font-size: 20px;
    }
12. 12.🔁 What does this code print?
    let age = 5;
    if (age < 45) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) child (b) teen
13. 13.Which of these is true of <header>? (a) holds one blog post (b) sits at the bottom (c) sits at the very top (d) holds the main content
14. 14.📋 How many items does this list show?
    <ul>
      <li>Grapes</li>
      <li>Banana</li>
      <li>Mango</li>
    </ul>
15. 15.🔗 Where does this link open?
    <a href="maths.html">Visit the site</a> (a) in a new tab (b) in the same tab
16. 16.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Jamun</td><td>Banana</td><td>Banana</td><td>Banana</td></tr>
    </table>
17. 17.📝 What does <p> make? (a) a link (b) a picture (c) a paragraph (d) a table
18. 18.💪 Which justify-content value packs boxes at the start? (a) center (b) flex-end (c) space-between (d) flex-start
19. 19.🌍 What is the domain name in this URL?
    https://kids.example.org/maths/tables.html (a) school.example.in (b) https (c) /maths/tables.html (d) kids.example.org
20. 20.🌐 Which one opens web pages for us? (a) a code editor (b) a web browser (c) a web server
21. 21.True or false: HTML on its own cannot add up two numbers. (a) True (b) False
22. 22.🔍 Which is the odd one out? (a) saves our .html files (b) is where we type code (c) answers page requests (d) shows line numbers
23. 23.💬 How does an HTML comment start? (a) # (b) /* (c) <!-- (d) //
24. 24.💬 Which text will NOT show on the page?
    <p>I love mangoes.</p>
    <p>Good morning!</p>
    <p>Rain today</p>
    <!-- <p>Hello, world!</p> --> (a) I love mangoes. (b) Hello, world! (c) Rain today (d) Good morning!
25. 25.📋 What number does the browser show next to “Banana”?
    <ol start="5">
      <li>Mango</li>
      <li>Papaya</li>
      <li>Jamun</li>
      <li>Banana</li>
    </ol>
26. 26.💬 How many paragraphs show on the page?
    <!-- <p>I love mangoes.</p> -->
    <p>Fun facts</p>
    <!-- <p>Rain today</p> -->
    <!-- <p>My pets</p> -->
27. 27.📋 What number does the browser show next to “Banana”?
    <ol start="9">
      <li>Guava</li>
      <li>Orange</li>
      <li>Papaya</li>
      <li>Banana</li>
    </ol>
28. 28.True or false: #top { color: blue; } goes in index.html. (a) True (b) False
29. 29.⚖️ What colour is the text of this element?
    <p class="note" id="logo">Hi</p>
    CSS:
    p { color: blue; }
    p { color: purple; } (a) red (b) white (c) purple (d) blue
30. 30.🔠 How many heading levels does HTML have? (a) 6 (b) 4 (c) 3 (d) 10
31. 31.True or false: <h1> goes in the head. (a) True (b) False
32. 32.🔁 How many times does this code print “Hi”?
    for (let i = 0; i <= 7; i++) {
      console.log("Hi");
    }
33. 33.⚡ What number does this code print?
    let score = 18;
    score = score + 2;
    score = score - 4;
    console.log(score);
34. 34.🖼️ Which attribute of <img> names the picture file? (a) src (b) alt (c) height (d) width
35. 35.🔠 Which heading shows the SMALLEST text: <h3>, <h2>, <h6> or <h1>? (a) <h1> (b) <h2> (c) <h6> (d) <h3>
36. 36.🎯 Which CSS selector matches this element?
    <p class="star" id="main">Hello</p> (a) p (b) #star (c) #logo (d) h1
37. 37.🖌️ Which CSS property picks the font style? (a) text-align (b) font-family (c) color (d) font-weight
38. 38.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="moon.png" alt="The full moon" width="350"> (a) moon.png (b) Our school bus (c) The full moon (d) width
39. 39.⚖️ What colour is the text of this element?
    <p class="box" id="main">Hi</p>
    CSS:
    p { color: white; }
    p { color: black; } (a) white (b) red (c) black (d) purple
40. 40.⚖️ What colour is the text of this element?
    <p class="note" id="top">Hi</p>
    CSS:
    .note { color: white; }
    .note { color: black; } (a) orange (b) purple (c) black (d) white

Free html and css lessons, practice and worksheets at talentjr.in/html-css-for-kids