Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 208 · 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 has a closing tag? (a) <hr> (b) <img> (c) <br> (d) <p>
2. 2.🖌️ Where does the text sit on its line?
   h1 {
     text-align: center;
     background-color: purple;
     color: orange;
     font-size: 36px;
   } (a) on the right (b) on the left (c) in the middle
3. 3.🎯 Which element does the selector #hero style? (a) <p id="top"> (b) <p class="hero"> (c) <p id="hero"> (d) <h1 class="star">
4. 4.♿ Does this help everyone, or make the page harder to use: write clear link text? (a) helps everyone (b) makes it harder
5. 5.True or false: #top { color: blue; } goes in script.js. (a) False (b) True
6. 6.🌐 Which one has an address bar? (a) a code editor (b) a web server (c) a web browser
7. 7.📊 How many cells are in each row?
   <table>
     <tr><td>Litchi</td><td>Orange</td><td>Grapes</td></tr>
     <tr><td>Papaya</td><td>Jamun</td><td>Papaya</td></tr>
   </table>
8. 8.📋 How many items does this list show?
   <ol>
     <li>Banana</li>
     <li>Orange</li>
     <li>Grapes</li>
     <li>Litchi</li>
   </ol>
9. 9.⚖️ What colour is the text of this element?
   <p class="big" id="intro">Hi</p>
   CSS:
   #intro { color: blue; }
   #intro { color: white; } (a) white (b) red (c) blue (d) yellow
10. 10.🧭 Which semantic tag holds extra side notes? (a) <nav> (b) <main> (c) <aside> (d) <header>
11. 11.📋 How many items does this list show?
    <ul>
      <li>Orange</li>
      <li>Grapes</li>
      <li>Mango</li>
      <li>Guava</li>
      <li>Papaya</li>
      <li>Jamun</li>
    </ul>
12. 12.True or false: <input type="email"> hides what you type. (a) True (b) False
13. 13.🔁 What does this code print?
    let age = 4;
    if (age >= 42) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) teen (b) child
14. 14.🔗 Which words do you click on?
    <a href="about.html">Art corner</a> (a) Art corner (b) School news (c) href (d) about.html
15. 15.🔢 In a basic web page file, which comes first: “<html>” or “<head>”? (a) <html> (b) <head>
16. 16.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
17. 17.✍️ What is the selector in this CSS rule?
    .box {
      font-weight: bold;
      color: red;
      width: 300px;
      font-style: italic;
    } (a) font-weight (b) .box (c) h2 (d) red
18. 18.🔍 Which is the odd one out? (a) hosts websites online (b) shows pages from the web (c) opens web pages for us (d) turns HTML into a page
19. 19.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) green (c) blue (d) white
20. 20.🌍 Which one sends the page back? (a) the browser (b) the URL (c) the server (d) HTTPS
21. 21.True or false: the border is the gap round content. (a) False (b) True
22. 22.True or false: in <img>, alt is read by screen readers. (a) False (b) True
23. 23.🔁 What does this code print?
    let age = 15;
    if (age < 29) {
      console.log("teen");
    } else {
      console.log("child");
    } (a) teen (b) child
24. 24.🖼️ Which attribute of <img> tells which image to load? (a) alt (b) height (c) src (d) width
25. 25.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="radio" name="fruit"> Litchi
      <input type="radio" name="fruit"> Guava
      <input type="radio" name="fruit"> Papaya
      <input type="radio" name="fruit"> Mango
    </form>
26. 26.🎯 Which element does the selector #main style? (a) <span id="logo"> (b) <span id="main"> (c) <span class="main"> (d) <p class="star">
27. 27.🧭 Which semantic tag holds the menu of links? (a) <aside> (b) <nav> (c) <footer> (d) <main>
28. 28.📊 How many cells are in each row?
    <table>
      <tr><td>Grapes</td><td>Banana</td></tr>
      <tr><td>Jamun</td><td>Mango</td></tr>
      <tr><td>Papaya</td><td>Papaya</td></tr>
      <tr><td>Papaya</td><td>Grapes</td></tr>
    </table>
29. 29.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 24px;
      }
    } (a) Yes (b) No
30. 30.💬 How many paragraphs show on the page?
    <!-- <p>Our school trip</p> -->
    <p>Cricket is fun.</p>
    <p>The red kite</p>
    <!-- <p>Hello, world!</p> -->
31. 31.True or false: <caption> makes one table row. (a) False (b) True
32. 32.⚖️ What colour is the text of this element?
    <h1 class="big" id="logo">Hi</h1>
    CSS:
    #logo { color: white; }
    #logo { color: green; } (a) white (b) orange (c) black (d) green
33. 33.🖌️ What colour is behind the letters?
    p {
      background-color: red;
      color: blue;
      text-align: right;
      font-size: 32px;
    } (a) blue (b) red (c) purple
34. 34.🔠 How many heading levels does HTML have? (a) 3 (b) 6 (c) 10 (d) 4
35. 35.True or false: <h1> is an empty tag. (a) False (b) True
36. 36.⚖️ What colour is the text of this element?
    <h1 class="big" id="intro">Hi</h1>
    CSS:
    .big { color: white; }
    .big { color: purple; } (a) white (b) yellow (c) purple (d) orange
37. 37.🌈 Which colour is #ff00ff? (a) bright green (b) yellow (c) magenta (d) white
38. 38.📋 Which list suits a shopping list in any order? (a) <ol> (b) <ul> (c) <hr> (d) <br>
39. 39.🔠 Which heading shows the SMALLEST text: <h3>, <h1>, <h6> or <h5>? (a) <h3> (b) <h6> (c) <h5> (d) <h1>
40. 40.🔗 Which code links to about.html? (a) <a alt="about.html"> (b) <a href="about.html"> (c) <a src="about.html"> (d) <link about.html>

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