Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 214 · 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.📝 Does <img> have a closing tag, or is it an empty tag? (a) has a closing tag (b) an empty tag
2. 2.📱 The screen is 820px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 14px;
     }
   } (a) No (b) Yes
3. 3.True or false: body { margin: 0; } goes in style.css. (a) True (b) False
4. 4.📦 In the box model, which part is the text or picture? (a) content (b) border (c) margin (d) padding
5. 5.💬 How does an HTML comment end? (a) --> (b) >> (c) */ (d) //
6. 6.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Creative Sheet System (c) Cascading Style Sheets (d) Colourful Site Styles
7. 7.🔢 In a basic web page file, which comes first: “</head>” or “<!DOCTYPE html>”? (a) </head> (b) <!DOCTYPE html>
8. 8.🏷️ Which is the closing tag for <i>? (a) <i/> (b) <i> (c) <\i> (d) </i>
9. 9.⚖️ What colour is the text of this element?
   <p class="box" id="hero">Hi</p>
   CSS:
   .box { color: yellow; }
   p { color: red; } (a) green (b) purple (c) yellow (d) red
10. 10.Which colour pair is easy to read? (a) white on dark blue (b) light grey on white (c) blue on purple (d) yellow on white
11. 11.📝 Which tag makes a big box for many lines of text? (a) <textarea> (b) <br> (c) <p> (d) <input>
12. 12.🔗 Which words do you click on?
    <a href="news.html">School news</a> (a) href (b) School news (c) Take the quiz (d) news.html
13. 13.🎯 Which sign starts a class selector? (a) @ (b) . (c) & (d) #
14. 14.🖼️ Which tag puts a picture on a page? (a) <img> (b) <pic> (c) <a> (d) <p>
15. 15.🔠 Which heading shows the SMALLEST text: <h3>, <h2>, <h6> or <h1>? (a) <h1> (b) <h2> (c) <h3> (d) <h6>
16. 16.🖼️ Which picture file does the browser load?
    <img src="moon.png" alt="The full moon" width="400"> (a) The full moon (b) moon.png (c) bus.jpg (d) fort.jpg
17. 17.🏷️ Is <body> an opening tag or a closing tag? (a) an opening tag (b) a closing tag
18. 18.📋 Which list suits a shopping list in any order? (a) <ol> (b) <br> (c) <ul> (d) <hr>
19. 19.🏷️ What does a closing tag have that an opening tag does not? (a) a slash / (b) a dot . (c) a hash # (d) a dollar $
20. 20.🔗 What does HyperText mean? (a) text with links (b) text in colour (c) very big text (d) secret text
21. 21.True or false: HTTPS is the page’s address. (a) True (b) False
22. 22.🖼️ Does <img> need a closing tag? (a) No (b) Yes
23. 23.📦 In the box model, which part is space inside the border? (a) border (b) content (c) padding (d) margin
24. 24.💬 Which text will NOT show on the page?
    <!-- <p>Rain today</p> -->
    <p>The red kite</p>
    <p>My pets</p>
    <p>I love mangoes.</p> (a) I love mangoes. (b) Rain today (c) The red kite (d) My pets
25. 25.📄 Can HTML on its own count button clicks? (a) Yes (b) No
26. 26.🧩 Which language sets colours and fonts? (a) CSS (b) HTML (c) JavaScript
27. 27.⚖️ What colour is the text of this element?
    <p class="note" id="intro">Hi</p>
    CSS:
    p { color: red; }
    p { color: blue; } (a) green (b) purple (c) blue (d) red
28. 28.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) space-between (c) flex-start (d) center
29. 29.📊 How many rows does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Jamun</td><td>Mango</td><td>Grapes</td><td>Guava</td></tr>
      <tr><td>Orange</td><td>Mango</td><td>Grapes</td><td>Jamun</td></tr>
      <tr><td>Grapes</td><td>Jamun</td><td>Orange</td><td>Mango</td></tr>
    </table>
30. 30.🖼️ Why do we add alt text to an image? (a) to load it faster (b) to make it bigger (c) to describe the image (d) to colour it
31. 31.⚡ What does this code print? (Look at the quotes!)
    let x = "1";
    let y = 2;
    console.log(x + y); (a) 3 (b) 12 (c) Error
32. 32.📋 Which list tag is an ordered list? (a) <li> (b) <ul> (c) <ol>
33. 33.🔠 Which tag is used for the main title on a page? (a) <h6> (b) <br> (c) <p> (d) <h1>
34. 34.🔠 Which heading shows the SMALLEST text: <h4>, <h6>, <h2> or <h5>? (a) <h5> (b) <h4> (c) <h2> (d) <h6>
35. 35.🧭 Which semantic tag helps you move around? (a) <nav> (b) <article> (c) <footer> (d) <main>
36. 36.📊 Where do <td> cells go? (a) inside the <head> (b) inside a <tr> (c) inside a <li> (d) inside a <p>
37. 37.📊 How many rows does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th></tr>
      <tr><td>Guava</td><td>Papaya</td></tr>
      <tr><td>Mango</td><td>Grapes</td></tr>
    </table>
38. 38.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Space Facts</title>
    </head>
    <body>
      <h1>Match report</h1>
      <p>Mars is red.</p>
    </body>
    </html> (a) Space Facts (b) index.html (c) Mars is red. (d) Match report
39. 39.True or false: HTML gives the page structure. (a) False (b) True
40. 40.💬 Can anyone read your comments by viewing the page source? (a) No (b) Yes

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