Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 818 · 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 empty space (px) is before the first box?
   .row {
     display: flex;
     width: 160px;
     justify-content: flex-end;
   }
   Inside are 2 boxes, each 40px wide (no margins).
2. 2.Which of these is a closing tag? (a) </b> (b) <body> (c) <title> (d) <b>
3. 3.📊 How many rows does this table have?
   <table>
     <tr><th>Name</th><th>Fruit</th></tr>
     <tr><td>Banana</td><td>Litchi</td></tr>
   </table>
4. 4.📄 What does the browser tab show for this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>Riya’s Recipes</title>
   </head>
   <body>
     <h1>Welcome!</h1>
     <p>Try this poha.</p>
   </body>
   </html> (a) Riya’s Recipes (b) Welcome! (c) Try this poha. (d) index.html
5. 5.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 190px;
     padding: 5px;
     border: 5px solid black;
     margin: 20px;
   }
6. 6.What does justify-content: space-between do? (a) puts boxes in the middle (b) packs boxes at the start (c) equal gaps, none at ends (d) packs boxes at the end
7. 7.🔠 Which heading shows the BIGGEST text: <h4>, <h1>, <h2> or <h5>? (a) <h4> (b) <h1> (c) <h2> (d) <h5>
8. 8.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 470px;
     justify-content: space-between;
   }
   Inside are 4 boxes, each 80px wide (no margins).
9. 9.💬 How does an HTML comment end? (a) // (b) */ (c) >> (d) -->
10. 10.🌍 What is the domain name in this URL?
    https://www.example.net/games/chess.html (a) www.example.net (b) https (c) learn.example.com (d) /games/chess.html
11. 11.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Hobbies</title>
    </head>
    <body>
      <h1>My drawings</h1>
      <p>Mars is red.</p>
    </body>
    </html> (a) index.html (b) Mars is red. (c) My Hobbies (d) My drawings
12. 12.🔍 Which is the odd one out? (a) hosts websites online (b) stores a website’s files (c) answers page requests (d) opens web pages for us
13. 13.True or false: JavaScript shows a pop-up message. (a) True (b) False
14. 14.🌍 Which one is the page’s address? (a) the browser (b) the server (c) the URL (d) HTTPS
15. 15.💬 How many paragraphs show on the page?
    <!-- <p>Fun facts</p> -->
    <!-- <p>My best friend</p> -->
    <p>Hello, world!</p>
    <!-- <p>Our school trip</p> -->
    <p>I love mangoes.</p>
16. 16.🔢 When you open a web page, what comes right after “the browser asks it”? (a) the browser shows it (b) DNS finds the server (c) you type the URL (d) the server sends files
17. 17.🔗 Which attribute holds the address of a link? (a) href (b) src (c) id (d) alt
18. 18.What is <input type="number"> for? (a) takes only numbers (b) lets you pick only one (c) is for an email address (d) sends the form
19. 19.🔤 In “HTML”, what does the L stand for? (a) Line (b) Laptop (c) Language (d) Link
20. 20.🖼️ Which picture file does the browser load?
    <img src="fort.jpg" alt="An old fort" width="350"> (a) An old fort (b) fort.jpg (c) tiger.jpg (d) kite.png
21. 21.🔗 Which address opens when you click this link?
    <a href="maths.html">School news</a> (a) School news (b) news.html (c) maths.html (d) art.html
22. 22.🎯 Which element does the selector #end style? (a) <h2 id="end"> (b) <h2 class="end"> (c) <h2 id="hero"> (d) <li class="menu">
23. 23.🔤 In “HTML”, what does the M stand for? (a) Modern (b) Mouse (c) Markup (d) Machine
24. 24.🔢 On a typical page, from top to bottom, what comes right after “<nav>”? (a) <footer> (b) <main> (c) <header>
25. 25.True or false: the content is the gap to other boxes. (a) True (b) False
26. 26.What is <input type="radio"> for? (a) lets you tick many (b) picks a day (c) sends the form (d) lets you pick only one
27. 27.📋 Does this list show bullets or numbers?
    <ol>
      <li>Mango</li>
      <li>Orange</li>
      <li>Papaya</li>
    </ol> (a) bullets (b) numbers
28. 28.🏷️ Is <b> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
29. 29.🌈 Which hex code is white? (a) #00ff00 (b) #000000 (c) #ffffff (d) #ffff00
30. 30.🔗 Which words do you click on?
    <a href="https://example.com">Take the quiz</a> (a) Play games (b) href (c) https://example.com (d) Take the quiz
31. 31.✍️ What value is given to padding in this rule?
    h1 {
      font-size: 20px;
      font-weight: bold;
      border: 2px solid;
      padding: 8px;
    } (a) padding (b) bold (c) 8px (d) 2px solid
32. 32.Which colour pair is easy to read? (a) pink on red (b) yellow on white (c) white on dark blue (d) light grey on white
33. 33.Which of these is a strong password? (a) Kite_Fl1es@Dawn (b) qwerty (c) riya2014 (d) abcd1234
34. 34.🔠 Which tag is used for the main title on a page? (a) <h6> (b) <h1> (c) <br> (d) <p>
35. 35.✍️ What value is given to margin in this rule?
    h1 {
      border: 2px solid;
      margin: 10px;
    } (a) 10px (b) 8px (c) bold (d) margin
36. 36.🧭 Which semantic tag holds the logo and title? (a) <aside> (b) <header> (c) <nav> (d) <main>
37. 37.⚖️ What colour is the text of this element?
    <h2 class="red" id="end">Hi</h2>
    CSS:
    #end { color: white; }
    #end { color: red; } (a) purple (b) white (c) red (d) blue
38. 38.🏷️ Which is the closing tag for <b>? (a) <b> (b) <\b> (c) <b/> (d) </b>
39. 39.🔠 How many heading levels does HTML have? (a) 3 (b) 4 (c) 10 (d) 6
40. 40.♿ Does this help everyone, or make the page harder to use: link text “click here”? (a) helps everyone (b) makes it harder

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