Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 855 · 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.Which of these is a closing tag? (a) <h1> (b) </li> (c) <li> (d) <body>
2. 2.🎨 Which tag holds CSS inside the head? (a) <script> (b) <style> (c) <body> (d) <css>
3. 3.💬 Can anyone read your comments by viewing the page source? (a) Yes (b) No
4. 4.What does justify-content: space-between do? (a) puts boxes in the middle (b) packs boxes at the start (c) packs boxes at the end (d) equal gaps, none at ends
5. 5.What does justify-content: flex-start do? (a) packs boxes at the start (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the end
6. 6.📊 How many cells does this table have in all?
   <table>
     <tr><th>Name</th><th>Fruit</th></tr>
     <tr><td>Litchi</td><td>Litchi</td></tr>
     <tr><td>Banana</td><td>Banana</td></tr>
   </table>
7. 7.📄 What does the browser tab show for this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>Class 7 Blog</title>
   </head>
   <body>
     <h1>Easy snacks</h1>
     <p>Here is my best one.</p>
   </body>
   </html> (a) index.html (b) Easy snacks (c) Here is my best one. (d) Class 7 Blog
8. 8.📝 Which input type sends the form? (a) email (b) password (c) checkbox (d) submit
9. 9.✍️ What is the selector in this CSS rule?
   #top {
     margin: 10px;
     background-color: yellow;
   } (a) yellow (b) #top (c) margin (d) li
10. 10.📛 In <a href="x.html">, what is href? (a) a comment (b) an attribute (c) an element name (d) a closing tag
11. 11.🌍 What do we call the computer that stores a website? (a) a keyboard (b) a server (c) a mouse (d) a printer
12. 12.True or false: to put secrets in comments is safe. (a) True (b) False
13. 13.📄 Where does the text of <title> appear? (a) at the bottom (b) nowhere (c) in a big heading (d) on the browser tab
14. 14.📊 Which tag gives the table a title? (a) <table> (b) <caption> (c) <tr> (d) <th>
15. 15.🧭 Is <nav> semantic or not semantic? (a) not semantic (b) semantic
16. 16.🔍 Which is the odd one out? (a) turns HTML into a page (b) has an address bar (c) shows pages from the web (d) sends pages over the net
17. 17.True or false: HTML on its own can run a game loop. (a) True (b) False
18. 18.🔗 Where does this link open?
    <a href="art.html">Take the quiz</a> (a) in the same tab (b) in a new tab
19. 19.📋 Does this list show bullets or numbers?
    <ul>
      <li>Papaya</li>
      <li>Orange</li>
    </ul> (a) numbers (b) bullets
20. 20.True or false: <ul> shows bullet points. (a) True (b) False
21. 21.⚖️ What colour is the text of this element?
    <h1 class="star" id="intro">Hi</h1>
    CSS:
    .star { color: yellow; }
    .star { color: purple; } (a) yellow (b) red (c) purple (d) green
22. 22.True or false: to share your OTP is safe. (a) False (b) True
23. 23.🚀 Which file should this code go in: body { margin: 0; } (a) index.html (b) script.js (c) style.css
24. 24.True or false: body { margin: 0; } goes in index.html. (a) True (b) False
25. 25.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
26. 26.True or false: <hr> is an empty tag. (a) True (b) False
27. 27.🖼️ How many pixels wide is the picture drawn?
    <img src="fort.jpg" alt="An old fort" width="100">
28. 28.What does justify-content: center do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the end (d) packs boxes at the start
29. 29.📝 Does <input> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
30. 30.🧩 An opening tag + content + a closing tag together make an ___. (a) attribute (b) address (c) editor (d) element
31. 31.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 220px;
      padding: 10px;
      border: 1px solid black;
      margin: 15px;
    }
32. 32.✍️ Which property is set to yellow in this rule?
    #top {
      border: 2px solid;
      background-color: yellow;
      font-size: 20px;
    } (a) background-color (b) yellow (c) margin (d) padding
33. 33.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="checkbox" name="fruit"> Guava
      <input type="checkbox" name="fruit"> Banana
      <input type="checkbox" name="fruit"> Litchi
      <input type="checkbox" name="fruit"> Mango
      <input type="checkbox" name="fruit"> Papaya
    </form>
34. 34.🚀 Which file should this code go in: <p>Hello!</p> (a) script.js (b) index.html (c) style.css
35. 35.♿ A part of the page is under a <h3> heading. Which tag should its sub-heading use? (a) <h5> (b) <h4> (c) <h1> (d) <h3>
36. 36.📊 Are <th> cells shown bold and centred by default? (a) No (b) Yes
37. 37.True or false: in <img>, src names the picture file. (a) False (b) True
38. 38.🖌️ What colour are the letters?
    li {
      color: blue;
      text-align: left;
      background-color: red;
      font-size: 36px;
    } (a) blue (b) white (c) red
39. 39.🎯 What kind of selector is .menu? (a) an element selector (b) a class selector (c) an id selector
40. 40.♿ Does this help everyone, or make the page harder to use: colour as the only clue? (a) helps everyone (b) makes it harder

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