Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 853 · 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 heading shows the SMALLEST text: <h1>, <h5>, <h4> or <h2>? (a) <h2> (b) <h5> (c) <h4> (d) <h1>
2. 2.Which colour pair is easy to read? (a) red on green (b) blue on purple (c) yellow on black (d) light grey on white
3. 3.📝 How many paragraphs does this code make?
   <p>Our school trip</p>
   <p>The red kite</p>
   <p>Rain today</p>
   <p>The red kite</p>
4. 4.🎯 Which element does the selector #intro style? (a) <span id="main"> (b) <span class="intro"> (c) <span id="intro"> (d) <p class="red">
5. 5.📄 What is the big heading shown on this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>My Hobbies</title>
   </head>
   <body>
     <h1>My drawings</h1>
     <p>I like to read.</p>
   </body>
   </html> (a) body (b) My Hobbies (c) My drawings (d) I like to read.
6. 6.🌐 Which one sends pages over the net? (a) a web server (b) a web browser (c) a code editor
7. 7.📋 How many items does this list show?
   <ul>
     <li>Mango</li>
     <li>Grapes</li>
   </ul>
8. 8.🌈 What is the biggest number one colour can have in rgb()? (a) 1000 (b) 100 (c) 255 (d) 99
9. 9.🖼️ The picture cannot load. Which text does the browser show instead?
   <img src="kite.png" alt="A red kite" width="350"> (a) Map of India (b) A red kite (c) kite.png (d) width
10. 10.🧭 How many <main> parts should a page have? (a) ten (b) none (c) three (d) one
11. 11.🌈 Hex digits go 0 to 9, then A to which letter? (a) J (b) G (c) F (d) Z
12. 12.🧭 Why use <nav> instead of <div> for a menu? (a) it makes text red (b) it loads faster (c) it tells its meaning (d) it adds pictures
13. 13.🔗 Which words do you click on?
    <a href="games.html">Visit the site</a> (a) Maths fun (b) href (c) Visit the site (d) games.html
14. 14.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 440px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 50px wide (no margins).
15. 15.📊 Which tag gives the table a title? (a) <th> (b) <table> (c) <td> (d) <caption>
16. 16.True or false: the content is space outside the border. (a) False (b) True
17. 17.🖌️ Where does the text sit on its line?
    li {
      text-align: right;
      background-color: purple;
      color: yellow;
      font-size: 28px;
    } (a) in the middle (b) on the right (c) on the left
18. 18.Which of these goes in the head? (a) <table> (b) <p> (c) <style> (d) <ul>
19. 19.True or false: <main> is the page’s key part. (a) False (b) True
20. 20.🖼️ Which picture file does the browser load?
    <img src="moon.png" alt="The full moon" width="50"> (a) The full moon (b) bus.jpg (c) moon.png (d) fort.jpg
21. 21.Which of these is safe to do online? (a) put secrets in comments (b) type a password on http (c) post your home address (d) use a nickname in games
22. 22.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }
23. 23.🖼️ How many pixels wide is the picture drawn?
    <img src="bus.jpg" alt="Our school bus" width="200">
24. 24.📊 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>Grapes</td><td>Papaya</td><td>Litchi</td><td>Grapes</td></tr>
      <tr><td>Mango</td><td>Banana</td><td>Banana</td><td>Litchi</td></tr>
    </table>
25. 25.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) flex-start (c) center (d) flex-end
26. 26.🌍 What do we call the computer that stores a website? (a) a keyboard (b) a mouse (c) a server (d) a printer
27. 27.🎯 Which element does the selector #top style? (a) <h1 class="top"> (b) <h1 id="top"> (c) <h1 id="intro"> (d) <h2 class="menu">
28. 28.⚡ What number does this code print?
    let a = 35;
    let b = 30;
    console.log(a + b);
29. 29.🔗 Which code links to about.html? (a) <a src="about.html"> (b) <link about.html> (c) <a href="about.html"> (d) <a alt="about.html">
30. 30.🧩 An opening tag + content + a closing tag together make an ___. (a) editor (b) address (c) attribute (d) element
31. 31.📱 What does a media query check? (a) the time of day (b) the battery level (c) the page title (d) the screen width
32. 32.🔠 Which heading shows the SMALLEST text: <h5>, <h4>, <h2> or <h3>? (a) <h2> (b) <h4> (c) <h3> (d) <h5>
33. 33.📄 What is the first line of an HTML5 page? (a) <html> (b) <head> (c) <!DOCTYPE html> (d) <body>
34. 34.🖼️ How many pixels wide is the picture drawn?
    <img src="cake.jpg" alt="Birthday cake" width="350">
35. 35.True or false: the browser stores the site’s files. (a) True (b) False
36. 36.🔗 Which address opens when you click this link?
    <a href="maths.html">Take the quiz</a> (a) art.html (b) maths.html (c) news.html (d) Take the quiz
37. 37.🎨 Which tag holds CSS inside the head? (a) <style> (b) <css> (c) <body> (d) <script>
38. 38.🔤 In “HTML”, what does the M stand for? (a) Machine (b) Modern (c) Mouse (d) Markup
39. 39.🔠 Which tag is used for the main title on a page? (a) <br> (b) <h1> (c) <h6> (d) <p>
40. 40.🔍 One closing tag is missing. Which one?
    <p>Hello, world!</p>
    <b>Cricket is fun.</b>
    <small>My pets (a) </u> (b) </b> (c) </small> (d) </p>

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