Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 592 · 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.♿ What does good colour contrast mean? (a) text stands out clearly (b) many bright colours (c) only red text (d) no colours at all
2. 2.🎯 Which element does the selector p style? (a) <h2 class="box"> (b) <h1> (c) <li id="main"> (d) <p class="box">
3. 3.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 22px;
     }
   }
4. 4.📦 In the box model, which part is the gap round content? (a) margin (b) border (c) content (d) padding
5. 5.What is <input type="date"> for? (a) takes only numbers (b) picks a day (c) is for one line of words (d) lets you pick only one
6. 6.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) 600px or narrower (c) exactly 1000px (d) 600px or wider
7. 7.🔗 Which code links to about.html? (a) <a href="about.html"> (b) <a src="about.html"> (c) <a alt="about.html"> (d) <link about.html>
8. 8.🔢 To build and share your first web page, what comes right after “test in a browser”? (a) plan what to show (b) add CSS styles (c) publish it online (d) write the HTML
9. 9.📊 How many cells does this table have in all?
   <table>
     <tr><td>Litchi</td><td>Papaya</td><td>Banana</td></tr>
     <tr><td>Banana</td><td>Orange</td><td>Mango</td></tr>
     <tr><td>Banana</td><td>Grapes</td><td>Guava</td></tr>
     <tr><td>Grapes</td><td>Mango</td><td>Guava</td></tr>
   </table>
10. 10.📊 How many cells are in each row?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Guava</td><td>Papaya</td><td>Papaya</td></tr>
    </table>
11. 11.True or false: <input type="radio"> is for an email address. (a) True (b) False
12. 12.✍️ What value is given to color in this rule?
    #top {
      border: 2px solid;
      font-style: italic;
      color: red;
      background-color: yellow;
    } (a) color (b) 20px (c) center (d) red
13. 13.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 160px;
      padding: 25px;
      border: 4px solid black;
      margin: 10px;
    }
14. 14.🔠 Are headings shown in bold by default? (a) No (b) Yes
15. 15.True or false: in <img>, width shows if the image fails. (a) False (b) True
16. 16.🌈 In #0000e6 the blue part is the hex number e6. What is it as a normal number?
17. 17.🛡️ A pop-up says you won a prize and asks for your password. What do you do? (a) share it with friends (b) type the password (c) click it twice (d) close it, tell an adult
18. 18.📋 Which tag goes around each item of a list? (a) <li> (b) <p> (c) <ul> (d) <ol>
19. 19.💬 How does an HTML comment start? (a) /* (b) # (c) // (d) <!--
20. 20.📝 How many paragraphs does this code make?
    <p>The red kite</p>
    <p>I love mangoes.</p>
    <p>The red kite</p>
    <p>I love mangoes.</p>
    <p>I love mangoes.</p>
    <p>I love mangoes.</p>
21. 21.📋 What number does the browser show next to “Orange”?
    <ol>
      <li>Banana</li>
      <li>Guava</li>
      <li>Orange</li>
      <li>Mango</li>
      <li>Jamun</li>
    </ol>
22. 22.True or false: <ol> shows bullet points. (a) True (b) False
23. 23.📝 Does <meta> have a closing tag, or is it an empty tag? (a) an empty tag (b) has a closing tag
24. 24.🔠 How many headings are in this code?
    <h1>My pets</h1>
    <h4>Fun facts</h4>
    <p>Our school trip</p>
25. 25.🔒 Is the connection to this address scrambled (encrypted)?
    http://www.example.com/art/gallery.html (a) No (b) Yes
26. 26.True or false: <br> is an empty tag. (a) True (b) False
27. 27.🖌️ What colour is behind the letters?
    h2 {
      font-size: 36px;
      text-align: center;
      color: black;
      background-color: blue;
    } (a) orange (b) blue (c) black
28. 28.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Class 7 Blog</title>
    </head>
    <body>
      <h1>Welcome!</h1>
      <p>Try this poha.</p>
    </body>
    </html> (a) Try this poha. (b) index.html (c) Welcome! (d) Class 7 Blog
29. 29.⚖️ What colour is the text of this element?
    <p class="box" id="logo">Hi</p>
    CSS:
    #logo { color: black; }
    #logo { color: yellow; } (a) black (b) red (c) yellow (d) purple
30. 30.🎯 What kind of selector is .note? (a) an id selector (b) a class selector (c) an element selector
31. 31.🏷️ Every HTML tag starts with which sign? (a) ( (b) { (c) < (d) [
32. 32.🖌️ Which CSS property makes letters bigger? (a) background-color (b) color (c) font-size (d) text-align
33. 33.🔠 How many heading levels does HTML have? (a) 6 (b) 10 (c) 3 (d) 4
34. 34.🔗 Which address opens when you click this link?
    <a href="art.html">Contact us</a> (a) Contact us (b) news.html (c) quiz.html (d) art.html
35. 35.🌈 In #750000 the red part is the hex number 75. What is it as a normal number?
36. 36.🌐 Which one answers page requests? (a) a web server (b) a web browser (c) a code editor
37. 37.📋 Does this list show bullets or numbers?
    <ul>
      <li>Jamun</li>
      <li>Litchi</li>
      <li>Orange</li>
    </ul> (a) numbers (b) bullets
38. 38.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 14px;
      }
    }
39. 39.🔗 Which tag makes a clickable link? (a) <a> (b) <link> (c) <img> (d) <p>
40. 40.💬 Which text will NOT show on the page?
    <p>I love mangoes.</p>
    <!-- <p>The red kite</p> -->
    <p>My best friend</p>
    <p>My pets</p> (a) The red kite (b) My pets (c) I love mangoes. (d) My best friend

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