Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 204 · 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>
   <h2>Hello, world!</h2>
   <p>Fun facts</p>
   <p>I love mangoes.</p>
   <p>Hello, world!</p>
2. 2.🔢 To build and share your first web page, what comes right after “add CSS styles”? (a) plan what to show (b) publish it online (c) test in a browser (d) write the HTML
3. 3.📄 Which part holds everything you see on the page? (a) the head (b) the body (c) the doctype (d) the title
4. 4.📝 How many <input> tags are in this form?
   <form>
     <input type="text">
     <input type="date">
     <input type="submit" value="Send">
   </form>
5. 5.📝 Does <b> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
6. 6.📦 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: 20px;
     border: 3px solid black;
     margin: 20px;
   }
7. 7.✍️ What value is given to padding in this rule?
   h1 {
     font-size: 20px;
     padding: 8px;
     text-align: center;
   } (a) bold (b) 8px (c) 2px solid (d) padding
8. 8.📦 In the box model, which part is the gap round content? (a) border (b) padding (c) content (d) margin
9. 9.📱 Responsive design means a page ___. (a) never changes (b) fits every screen (c) is only for laptops (d) has no pictures
10. 10.Which of these goes in the head? (a) <p> (b) <meta charset="utf-8"> (c) <a> (d) <table>
11. 11.🔒 What does the lock (HTTPS) in the address bar mean? (a) the data is scrambled (b) the site is free (c) the site is fast (d) the site is a game
12. 12.Which of these is a weak password? (a) S0lar!Pen#8 (b) Rain#Drop_42! (c) 123456 (d) Chai$Cup_19x
13. 13.True or false: padding is a solid or dotted edge. (a) True (b) False
14. 14.📋 How many items does this list show?
    <ol>
      <li>Jamun</li>
      <li>Banana</li>
      <li>Grapes</li>
      <li>Orange</li>
      <li>Mango</li>
      <li>Litchi</li>
    </ol>
15. 15.⚡ What does alert() show? (a) a pop-up box (b) a table (c) a new tab (d) a picture
16. 16.🧩 An opening tag + content + a closing tag together make an ___. (a) editor (b) address (c) element (d) attribute
17. 17.📝 Which tag makes a drop-down list? (a) <select> (b) <li> (c) <ol> (d) <ul>
18. 18.🖌️ What colour are the letters?
    li {
      font-size: 16px;
      color: black;
      text-align: center;
      background-color: green;
    } (a) black (b) white (c) green
19. 19.🎯 What kind of selector is h1? (a) an id selector (b) an element selector (c) a class selector
20. 20.💬 How many paragraphs show on the page?
    <p>Hello, world!</p>
    <!-- <p>Rain today</p> -->
    <p>My pets</p>
    <!-- <p>I love mangoes.</p> -->
21. 21.💬 How many paragraphs show on the page?
    <p>Hello, world!</p>
    <p>Good morning!</p>
    <!-- <p>Our school trip</p> -->
    <!-- <p>Rain today</p> -->
22. 22.What does color do? (a) sets the letter colour (b) centres a heading (c) makes the text bold (d) picks the font style
23. 23.True or false: in <img>, src is read by screen readers. (a) True (b) False
24. 24.🔗 Which address opens when you click this link?
    <a href="art.html">Play games</a> (a) news.html (b) Play games (c) art.html (d) quiz.html
25. 25.True or false: in <img>, src sets how tall it is. (a) False (b) True
26. 26.📋 Which list tag shows 1, 2, 3 numbers? (a) <li> (b) <ul> (c) <ol>
27. 27.💬 Which text will NOT show on the page?
    <p>The red kite</p>
    <p>Hello, world!</p>
    <p>Fun facts</p>
    <!-- <p>My pets</p> --> (a) The red kite (b) My pets (c) Hello, world! (d) Fun facts
28. 28.🎯 Which CSS selector matches this element?
    <div class="note" id="end">Hello</div> (a) span (b) .big (c) div (d) .end
29. 29.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
30. 30.📝 Which input type is for an email address? (a) password (b) radio (c) date (d) email
31. 31.Which of these does CSS do? (a) sets colours and fonts (b) makes headings and lists (c) gives the page structure (d) checks a quiz answer
32. 32.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="kite.png" alt="A red kite" width="400"> (a) kite.png (b) Map of India (c) A red kite (d) width
33. 33.💬 How many paragraphs show on the page?
    <p>Our school trip</p>
    <p>Hello, world!</p>
    <p>My best friend</p>
    <!-- <p>I love mangoes.</p> -->
    <!-- <p>Good morning!</p> -->
34. 34.True or false: <tr> makes a heading cell. (a) True (b) False
35. 35.True or false: <header> is the page’s key part. (a) False (b) True
36. 36.🖼️ Which attribute of <img> describes the picture? (a) height (b) src (c) width (d) alt
37. 37.🔗 Which tag makes a clickable link? (a) <p> (b) <img> (c) <link> (d) <a>
38. 38.⚖️ What colour is the text of this element?
    <p class="red" id="hero">Hi</p>
    CSS:
    #hero { color: blue; }
    #hero { color: yellow; } (a) blue (b) black (c) yellow (d) purple
39. 39.💬 How many paragraphs show on the page?
    <!-- <p>Hello, world!</p> -->
    <p>Good morning!</p>
    <!-- <p>Our school trip</p> -->
    <p>My pets</p>
    <p>Fun facts</p>
40. 40.🖼️ Does <img> need a closing tag? (a) Yes (b) No

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