Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 537 · 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.🏷️ HTML marks up text using ___. (a) pixels (b) tags (c) keys (d) wires
2. 2.💬 Which text will NOT show on the page?
   <!-- <p>Fun facts</p> -->
   <p>Rain today</p>
   <p>Our school trip</p>
   <p>I love mangoes.</p> (a) I love mangoes. (b) Our school trip (c) Fun facts (d) Rain today
3. 3.🧭 How many <main> parts should a page have? (a) three (b) ten (c) none (d) one
4. 4.🧩 Which language shows a pop-up message? (a) HTML (b) CSS (c) JavaScript
5. 5.✍️ In color: blue; which part is the value? (a) ; (b) blue (c) : (d) color
6. 6.🚀 Which file should this code go in: p { color: red; } (a) index.html (b) style.css (c) script.js
7. 7.True or false: <nav> holds a news story. (a) False (b) True
8. 8.🔍 Which is the odd one out? (a) gives the page structure (b) puts a picture on a page (c) adds space around boxes (d) makes headings and lists
9. 9.⚖️ What colour is the text of this element?
   <p class="red" id="end">Hi</p>
   CSS:
   #end { color: yellow; }
   .red { color: blue; } (a) orange (b) blue (c) purple (d) yellow
10. 10.🔡 Are HTML tag names usually written in small letters? (a) No (b) Yes
11. 11.💬 How many paragraphs show on the page?
    <!-- <p>My pets</p> -->
    <!-- <p>Rain today</p> -->
    <p>I love mangoes.</p>
    <!-- <p>The red kite</p> -->
12. 12.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
13. 13.What is <input type="date"> for? (a) takes only numbers (b) is for an email address (c) picks a day (d) hides what you type
14. 14.True or false: <input type="number"> is for one line of words. (a) True (b) False
15. 15.🔁 What does this code print?
    let age = 23;
    if (age > 40) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) teen (b) child
16. 16.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="fort.jpg" alt="An old fort" width="350"> (a) width (b) An old fort (c) fort.jpg (d) A tiger asleep
17. 17.📊 Which tag makes one table row? (a) <caption> (b) <table> (c) <td> (d) <tr>
18. 18.🏷️ Which is the closing tag for <i>? (a) <\i> (b) <i> (c) </i> (d) <i/>
19. 19.🎯 Can many elements share the same class? (a) No (b) Yes
20. 20.True or false: “use headings in order” makes the page harder to use. (a) False (b) True
21. 21.🖼️ How many pixels wide is the picture drawn?
    <img src="cake.jpg" alt="Birthday cake" width="100">
22. 22.🚀 Where in index.html does the link to style.css go? (a) inside a <p> (b) after </html> (c) in the footer (d) in the head
23. 23.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 110px;
      padding: 25px;
      border: 3px solid black;
      margin: 0px;
    }
24. 24.🖼️ Which attribute of <img> describes the picture? (a) width (b) src (c) height (d) alt
25. 25.True or false: <td> holds the whole table. (a) False (b) True
26. 26.🖌️ What colour is behind the letters?
    h2 {
      font-size: 20px;
      color: orange;
      text-align: right;
      background-color: red;
    } (a) orange (b) red (c) purple
27. 27.📝 Does <b> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
28. 28.🌍 What is the path in this URL?
    https://school.example.in/index.html (a) /art/gallery.html (b) /index.html (c) https (d) school.example.in
29. 29.Which colour pair is hard to read? (a) light grey on white (b) black on white (c) yellow on black (d) dark grey on white
30. 30.🖼️ Which picture file does the browser load?
    <img src="bus.jpg" alt="Our school bus" width="150"> (a) tiger.jpg (b) Our school bus (c) bus.jpg (d) fort.jpg
31. 31.📝 Which tag makes a drop-down list? (a) <li> (b) <ol> (c) <select> (d) <ul>
32. 32.📦 In the box model, which part is the line round the box? (a) margin (b) content (c) border (d) padding
33. 33.🔗 Which words do you click on?
    <a href="maths.html">Take the quiz</a> (a) maths.html (b) Play games (c) Take the quiz (d) href
34. 34.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    }
35. 35.♿ Is this heading order correct (no level skipped)?
    <h1> → <h2> → <h3> → <h2> (a) No (b) Yes
36. 36.🔁 What number does this code print?
    let total = 0;
    for (let i = 1; i <= 5; i++) {
      total = total + 8;
    }
    console.log(total);
37. 37.🎯 Which CSS selector matches this element?
    <p class="red" id="top">Hello</p> (a) #intro (b) h1 (c) p (d) #red
38. 38.💬 Does the browser show comments on the page? (a) No (b) Yes
39. 39.📝 You type 5 spaces between two words in a <p>. How does the browser show them? (a) as a dot (b) as one space (c) as a new line (d) as 5 spaces
40. 40.🏷️ Which is the closing tag for <h2>? (a) <h2/> (b) <\h2> (c) </h2> (d) <h2>

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