Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 37 · 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 of these is an empty tag? (a) <b> (b) <p> (c) <li> (d) <br>
2. 2.📄 What is the big heading shown on this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>Art Gallery</title>
   </head>
   <body>
     <h1>Easy snacks</h1>
     <p>Here is my best one.</p>
   </body>
   </html> (a) Here is my best one. (b) Easy snacks (c) Art Gallery (d) body
3. 3.🔗 Which address opens when you click this link?
   <a href="art.html">Take the quiz</a> (a) news.html (b) art.html (c) quiz.html (d) Take the quiz
4. 4.📄 What is the big heading shown on this page?
   <!DOCTYPE html>
   <html>
   <head>
     <title>Art Gallery</title>
   </head>
   <body>
     <h1>Welcome!</h1>
     <p>Here is my best one.</p>
   </body>
   </html> (a) Art Gallery (b) Welcome! (c) Here is my best one. (d) body
5. 5.✍️ What value is given to color in this rule?
   p {
     color: red;
     font-weight: bold;
     background-color: yellow;
   } (a) 20px (b) red (c) color (d) center
6. 6.True or false: “link text “click here”” makes the page harder to use. (a) False (b) True
7. 7.✍️ Which property is set to red in this rule?
   .note {
     background-color: yellow;
     color: red;
   } (a) red (b) font-size (c) text-align (d) color
8. 8.📦 In the box model, which part is a solid or dotted edge? (a) padding (b) border (c) margin (d) content
9. 9.📋 Which list suits a shopping list in any order? (a) <ul> (b) <ol> (c) <br> (d) <hr>
10. 10.⚡ Which tag holds JavaScript in a page? (a) <style> (b) <script> (c) <js> (d) <code>
11. 11.True or false: HTTPS scrambles data on its way. (a) True (b) False
12. 12.🌐 Which one opens web pages for us? (a) a web server (b) a code editor (c) a web browser
13. 13.🌈 Which colour is #ffffff? (a) bright green (b) red (c) white (d) cyan
14. 14.Which of these is safe to do online? (a) type a password on http (b) download from pop-ups (c) use a nickname in games (d) put secrets in comments
15. 15.🚀 Which file should this code go in: <a href="a.html">Go</a> (a) style.css (b) script.js (c) index.html
16. 16.🔍 One closing tag is missing. Which one?
    <h2>Rain today</h2>
    <p>Cricket is fun.
    <strong>My pets</strong> (a) </h2> (b) </p> (c) </small> (d) </strong>
17. 17.True or false: “write clear link text” makes the page harder to use. (a) True (b) False
18. 18.📊 Which tag holds the whole table? (a) <th> (b) <caption> (c) <table> (d) <td>
19. 19.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 40px wide (no margins).
20. 20.⚖️ What colour is the text of this element?
    <h1 class="menu" id="main">Hi</h1>
    CSS:
    #main { color: green; }
    #main { color: red; } (a) orange (b) white (c) red (d) green
21. 21.🔗 Which words do you click on?
    <a href="https://example.com">About us</a> (a) About us (b) href (c) Contact us (d) https://example.com
22. 22.🚀 Which tag loads script.js into a page? (a) <link script.js> (b) <a href="script.js"> (c) <js src="script.js"> (d) <script src="script.js">
23. 23.True or false: <tr> gives the table a title. (a) False (b) True
24. 24.⚡ What number does this code print?
    let a = 38;
    let b = 1;
    console.log(a + b);
25. 25.True or false: <ol> shows 1, 2, 3 numbers. (a) True (b) False
26. 26.True or false: alert("Hi"); goes in style.css. (a) True (b) False
27. 27.📝 How many <input> tags are in this form?
    <form>
      <input type="checkbox">
      <input type="password">
      <input type="date">
      <input type="text">
      <input type="email">
      <input type="submit" value="Send">
    </form>
28. 28.🔠 Which heading shows the BIGGEST text: <h4>, <h6>, <h3> or <h5>? (a) <h3> (b) <h6> (c) <h5> (d) <h4>
29. 29.True or false: “use headings in order” helps everyone use the page. (a) True (b) False
30. 30.🌐 Which one sends pages over the net? (a) a code editor (b) a web browser (c) a web server
31. 31.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
32. 32.🎨 One CSS file can style how many pages? (a) only one word (b) no pages (c) only one image (d) many pages
33. 33.✍️ CSS declarations go inside which brackets? (a) [ ] (b) < > (c) { } (d) ( )
34. 34.True or false: <title> goes in the head. (a) False (b) True
35. 35.🔍 Which is the odd one out? (a) makes a form box (b) lays out the page (c) gives the page structure (d) makes a link
36. 36.📋 What number does the browser show next to “Litchi”?
    <ol>
      <li>Guava</li>
      <li>Mango</li>
      <li>Litchi</li>
    </ol>
37. 37.🔗 Which address opens when you click this link?
    <a href="art.html">Play games</a> (a) quiz.html (b) art.html (c) Play games (d) news.html
38. 38.📋 Which list tag shows 1, 2, 3 numbers? (a) <li> (b) <ol> (c) <ul>
39. 39.📱 What does a media query check? (a) the page title (b) the time of day (c) the screen width (d) the battery level
40. 40.🖌️ Which CSS property colours behind the text? (a) font-weight (b) font-family (c) background-color (d) color

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