Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 373 · 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 many paragraphs does this code make?
   <p>Cricket is fun.</p>
   <p>Hello, world!</p>
   <h2>My best friend</h2>
2. 2.What does font-family do? (a) centres a heading (b) makes letters bigger (c) makes the text bold (d) picks the font style
3. 3.🔍 One closing tag is missing. Which one?
   <i>Hello, world!
   <h2>Our school trip</h2>
   <b>Cricket is fun.</b> (a) </b> (b) </i> (c) </u> (d) </h2>
4. 4.🔍 Which is the odd one out? (a) adds space around boxes (b) lays out the page (c) sets colours and fonts (d) puts a picture on a page
5. 5.📄 Which part holds everything you see on the page? (a) the head (b) the body (c) the doctype (d) the title
6. 6.📋 Which list shows the steps of a recipe best? (a) <br> (b) <ol> (c) <ul> (d) <hr>
7. 7.📄 Where does the text of <title> appear? (a) at the bottom (b) on the browser tab (c) in a big heading (d) nowhere
8. 8.Which of these is padding? (a) space outside the border (b) a solid or dotted edge (c) the gap round content (d) the gap to other boxes
9. 9.📄 Can HTML on its own make a form? (a) Yes (b) No
10. 10.🔁 Which word runs code only when something is true? (a) for (b) log (c) let (d) if
11. 11.🧭 Which semantic tag is the page’s key part? (a) <main> (b) <nav> (c) <header> (d) <footer>
12. 12.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 18px;
      }
    }
13. 13.🖌️ What colour are the letters?
    li {
      text-align: right;
      font-size: 36px;
      color: yellow;
      background-color: red;
    } (a) red (b) yellow (c) blue
14. 14.🖌️ What colour are the letters?
    h1 {
      background-color: purple;
      font-size: 36px;
      color: yellow;
      text-align: right;
    } (a) yellow (b) orange (c) purple
15. 15.🖼️ Which attribute of <img> sets how tall it is? (a) alt (b) width (c) height (d) src
16. 16.🖌️ Which CSS property sets the letter colour? (a) font-family (b) font-weight (c) color (d) text-align
17. 17.📝 Which tag gives a form box a name you can click? (a) <h1> (b) <title> (c) <hr> (d) <label>
18. 18.💬 Which text will NOT show on the page?
    <p>Our school trip</p>
    <p>I love mangoes.</p>
    <p>Good morning!</p>
    <!-- <p>Hello, world!</p> --> (a) Good morning! (b) Hello, world! (c) Our school trip (d) I love mangoes.
19. 19.True or false: <li> is an ordered list. (a) True (b) False
20. 20.Which of these is not safe to do online? (a) use a nickname in games (b) share your OTP (c) use a strong password (d) think before you post
21. 21.True or false: img is an element selector. (a) False (b) True
22. 22.⚖️ What colour is the text of this element?
    <h1 class="menu" id="logo">Hi</h1>
    CSS:
    .menu { color: black; }
    .menu { color: white; } (a) black (b) green (c) white (d) yellow
23. 23.🔍 Which line is missing its closing tag?
    line 1: <em>Our school trip</em>
    line 2: <small>Good morning!
    line 3: <h1>I love mangoes.</h1> (a) line 3 (b) line 2 (c) line 1
24. 24.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 290px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 60px wide (no margins).
25. 25.🌍 What finds the server for a domain name like example.com? (a) CSS (b) alt (c) HTML (d) DNS
26. 26.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 6px;
      }
    } (a) Yes (b) No
27. 27.🔢 In a basic web page file, which comes first: “<head>” or “</html>”? (a) </html> (b) <head>
28. 28.📄 Where does <p> go: in the head or in the body? (a) in the head (b) in the body
29. 29.📋 Which list tag lists steps in order? (a) <ol> (b) <li> (c) <ul>
30. 30.✍️ Which property is set to center in this rule?
    h1 {
      font-size: 20px;
      text-align: center;
    } (a) text-align (b) center (c) margin (d) background-color
31. 31.🔠 Which heading shows the BIGGEST text: <h6>, <h5>, <h1> or <h2>? (a) <h5> (b) <h6> (c) <h1> (d) <h2>
32. 32.🖼️ Why do we add alt text to an image? (a) to describe the image (b) to make it bigger (c) to load it faster (d) to colour it
33. 33.True or false: in <img>, width sets how tall it is. (a) False (b) True
34. 34.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th><th>Day</th></tr>
      <tr><td>Orange</td><td>Mango</td><td>Papaya</td><td>Litchi</td></tr>
      <tr><td>Mango</td><td>Papaya</td><td>Papaya</td><td>Papaya</td></tr>
    </table>
35. 35.🧩 Which language puts a picture on a page? (a) CSS (b) JavaScript (c) HTML
36. 36.Which of these is safe to do online? (a) share your password (b) meet an online stranger (c) ask before downloading (d) share your OTP
37. 37.True or false: in <img>, alt describes the picture. (a) True (b) False
38. 38.📄 What is the first line of an HTML5 page? (a) <body> (b) <!DOCTYPE html> (c) <html> (d) <head>
39. 39.📋 Which list suits a shopping list in any order? (a) <ul> (b) <hr> (c) <ol> (d) <br>
40. 40.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="fort.jpg" alt="An old fort" width="200"> (a) An old fort (b) width (c) fort.jpg (d) A tiger asleep

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