Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 296 · 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 tag helps phones show a page at the right size? (a) the title tag (b) the hr tag (c) the br tag (d) the viewport meta tag
2. 2.📝 Does <title> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
3. 3.⚡ What does alert() show? (a) a new tab (b) a table (c) a pop-up box (d) a picture
4. 4.🖌️ How big is the text, in px?
   h2 {
     background-color: purple;
     color: orange;
     text-align: left;
     font-size: 24px;
   }
5. 5.Which of these is padding? (a) a solid or dotted edge (b) space outside the border (c) the gap to other boxes (d) the gap round content
6. 6.Which of these is margin? (a) space inside the border (b) a solid or dotted edge (c) the gap to other boxes (d) the text or picture
7. 7.📄 Can HTML on its own make tables? (a) No (b) Yes
8. 8.What is <input type="text"> for? (a) is for one line of words (b) takes only numbers (c) hides what you type (d) lets you tick many
9. 9.🛡️ A pop-up says you won a prize and asks for your password. What do you do? (a) click it twice (b) close it, tell an adult (c) share it with friends (d) type the password
10. 10.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th></tr>
      <tr><td>Papaya</td><td>Jamun</td></tr>
      <tr><td>Jamun</td><td>Mango</td></tr>
    </table>
11. 11.📄 Which part holds everything you see on the page? (a) the body (b) the title (c) the head (d) the doctype
12. 12.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 210px;
      padding: 30px;
      border: 4px solid black;
      margin: 10px;
    }
13. 13.🔐 Is password a strong or a weak password? (a) strong (b) weak
14. 14.🖼️ Does <img> need a closing tag? (a) Yes (b) No
15. 15.📝 Which input type is for one line of words? (a) text (b) password (c) submit (d) email
16. 16.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Banana</td><td>Grapes</td><td>Orange</td></tr>
      <tr><td>Jamun</td><td>Orange</td><td>Mango</td></tr>
    </table>
17. 17.⚖️ What colour is the text of this element?
    <p class="star" id="end">Hi</p>
    CSS:
    #end { color: green; }
    .star { color: white; }
    p { color: purple; } (a) white (b) purple (c) green (d) blue
18. 18.True or false: HTML gives the page structure. (a) False (b) True
19. 19.🖼️ Which picture file does the browser load?
    <img src="map.png" alt="Map of India" width="350"> (a) map.png (b) Map of India (c) dog.jpg (d) cake.jpg
20. 20.🎯 Can many elements share the same class? (a) No (b) Yes
21. 21.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 16px;
      }
    }
22. 22.📊 Where do <td> cells go? (a) inside a <li> (b) inside a <p> (c) inside the <head> (d) inside a <tr>
23. 23.⚖️ What colour is the text of this element?
    <p class="big" id="hero">Hi</p>
    CSS:
    p { color: blue; }
    p { color: orange; } (a) blue (b) white (c) orange (d) yellow
24. 24.📊 How many rows does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Mango</td><td>Papaya</td><td>Guava</td></tr>
    </table>
25. 25.What does text-align do? (a) makes letters bigger (b) colours behind the text (c) centres a heading (d) picks the font style
26. 26.💬 How many paragraphs show on the page?
    <!-- <p>Our school trip</p> -->
    <!-- <p>My best friend</p> -->
    <!-- <p>Fun facts</p> -->
    <p>I love mangoes.</p>
    <!-- <p>The red kite</p> -->
27. 27.🔗 Where does this link open?
    <a href="games.html">School news</a> (a) in a new tab (b) in the same tab
28. 28.📄 Where does <img> go: in the head or in the body? (a) in the head (b) in the body
29. 29.📝 What does <br> do? (a) makes text bold (b) adds a picture (c) makes a list (d) starts a new line
30. 30.🔢 In a basic web page file, which comes first: “<html>” or “</body>”? (a) </body> (b) <html>
31. 31.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 40px wide (no margins).
32. 32.True or false: the border is space inside the border. (a) False (b) True
33. 33.True or false: a web browser sends pages over the net. (a) False (b) True
34. 34.💬 Which text will NOT show on the page?
    <!-- <p>The red kite</p> -->
    <p>Rain today</p>
    <p>Fun facts</p> (a) Rain today (b) Fun facts (c) The red kite
35. 35.🔠 Which tag is the least important heading? (a) <h3> (b) <p> (c) <h6> (d) <h1>
36. 36.🧭 Is <footer> semantic or not semantic? (a) not semantic (b) semantic
37. 37.🌗 Is blue on purple easy or hard to read? (a) hard to read (b) easy to read
38. 38.🌈 What is the biggest number one colour can have in rgb()? (a) 1000 (b) 100 (c) 255 (d) 99
39. 39.✍️ What value is given to color in this rule?
    li {
      width: 300px;
      color: red;
      padding: 8px;
    } (a) 20px (b) center (c) color (d) red
40. 40.📦 In the box model, which part is space inside the border? (a) padding (b) margin (c) border (d) content

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