Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 282 · 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.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 130px;
     padding: 15px;
     border: 2px solid black;
     margin: 10px;
   }
2. 2.True or false: in <img>, src describes the picture. (a) True (b) False
3. 3.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
4. 4.📋 How many items does this list show?
   <ol>
     <li>Litchi</li>
     <li>Papaya</li>
     <li>Mango</li>
     <li>Grapes</li>
     <li>Guava</li>
   </ol>
5. 5.What is <input type="password"> for? (a) hides what you type (b) picks a day (c) lets you tick many (d) is for one line of words
6. 6.📄 Where does <ul> go: in the head or in the body? (a) in the head (b) in the body
7. 7.⚖️ What colour is the text of this element?
   <p class="red" id="end">Hi</p>
   CSS:
   #end { color: red; }
   p { color: yellow; }
   .red { color: purple; } (a) purple (b) yellow (c) orange (d) red
8. 8.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 130px;
     padding: 10px;
     border: 2px solid black;
     margin: 0px;
   }
9. 9.📊 How many cells does this table have in all?
   <table>
     <tr><th>Name</th><th>Fruit</th></tr>
     <tr><td>Papaya</td><td>Orange</td></tr>
     <tr><td>Papaya</td><td>Mango</td></tr>
   </table>
10. 10.True or false: the border is the gap round content. (a) True (b) False
11. 11.📊 How many cells does this table have in all?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Orange</td><td>Jamun</td><td>Litchi</td><td>Grapes</td></tr>
    </table>
12. 12.💬 How does an HTML comment end? (a) // (b) */ (c) --> (d) >>
13. 13.⚖️ What colour is the text of this element?
    <h1 class="box" id="hero">Hi</h1>
    CSS:
    #hero { color: blue; }
    h1 { color: orange; } (a) orange (b) green (c) white (d) blue
14. 14.🌍 Which one stores the site’s files? (a) the server (b) HTTPS (c) the browser (d) the URL
15. 15.📝 Which tag gives a form box a name you can click? (a) <hr> (b) <title> (c) <label> (d) <h1>
16. 16.True or false: <tr> holds the whole table. (a) True (b) False
17. 17.Which of these is padding? (a) the line round the box (b) the gap round content (c) a solid or dotted edge (d) the text or picture
18. 18.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Hobbies</title>
    </head>
    <body>
      <h1>My drawings</h1>
      <p>We won by 5 runs.</p>
    </body>
    </html> (a) index.html (b) We won by 5 runs. (c) My Hobbies (d) My drawings
19. 19.Which of these goes in the head? (a) <table> (b) <img> (c) <link rel="stylesheet"> (d) <p>
20. 20.⚖️ What colour is the text of this element?
    <h2 class="menu" id="hero">Hi</h2>
    CSS:
    .menu { color: orange; }
    #hero { color: yellow; }
    h2 { color: green; } (a) yellow (b) orange (c) green (d) red
21. 21.📝 Does <ul> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
22. 22.🔢 When you open a web page, which comes FIRST? (a) DNS finds the server (b) the browser shows it (c) the browser asks it (d) you type the URL
23. 23.🔗 Which words do you click on?
    <a href="https://example.com">Take the quiz</a> (a) Play games (b) Take the quiz (c) href (d) https://example.com
24. 24.True or false: <link rel="stylesheet"> goes in the body. (a) False (b) True
25. 25.📝 How many <input> tags are in this form?
    <form>
      <input type="number">
      <input type="checkbox">
      <input type="submit" value="Send">
    </form>
26. 26.🧩 An opening tag + content + a closing tag together make an ___. (a) address (b) attribute (c) editor (d) element
27. 27.💬 Can anyone read your comments by viewing the page source? (a) Yes (b) No
28. 28.📄 Which part holds everything you see on the page? (a) the body (b) the head (c) the title (d) the doctype
29. 29.🔗 Which code links to about.html? (a) <a alt="about.html"> (b) <link about.html> (c) <a href="about.html"> (d) <a src="about.html">
30. 30.📊 How many cells are in each row?
    <table>
      <tr><td>Grapes</td><td>Papaya</td><td>Orange</td></tr>
      <tr><td>Papaya</td><td>Banana</td><td>Litchi</td></tr>
    </table>
31. 31.Which of these has a closing tag? (a) <li> (b) <img> (c) <meta> (d) <hr>
32. 32.📄 Where does <p> go: in the head or in the body? (a) in the head (b) in the body
33. 33.🌐 Which one colours code to help us? (a) a code editor (b) a web browser (c) a web server
34. 34.Which of these is true of a web browser? (a) hosts websites online (b) sends pages over the net (c) shows line numbers (d) turns HTML into a page
35. 35.💬 Which text will NOT show on the page?
    <p>The red kite</p>
    <!-- <p>Cricket is fun.</p> -->
    <p>My pets</p>
    <p>Good morning!</p> (a) My pets (b) Good morning! (c) The red kite (d) Cricket is fun.
36. 36.🔠 Which heading shows the BIGGEST text: <h5>, <h3>, <h2> or <h4>? (a) <h4> (b) <h3> (c) <h2> (d) <h5>
37. 37.🧭 Who is helped most by semantic tags? (a) only the printer (b) screen-reader users (c) nobody (d) only the server
38. 38.🧩 Which language puts a picture on a page? (a) JavaScript (b) CSS (c) HTML
39. 39.What is <input type="email"> for? (a) takes only numbers (b) is for an email address (c) lets you tick many (d) lets you pick only one
40. 40.📝 How many <input> tags are in this form?
    <form>
      <input type="number">
      <input type="password">
      <input type="text">
      <input type="submit" value="Send">
    </form>

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