Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 137 · 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 <input> tags are in this form?
   <form>
     <input type="email">
     <input type="password">
     <input type="text">
     <input type="date">
     <input type="number">
     <input type="submit" value="Send">
   </form>
2. 2.✍️ Which sign goes between a property and its value? (a) = (b) : (c) - (d) ;
3. 3.🎯 Which CSS selector matches this element?
   <span class="note" id="hero">Hello</span> (a) #top (b) p (c) #hero (d) .hero
4. 4.⚡ What number does this code print?
   let marks = 12;
   marks = marks + 2;
   marks = marks - 13;
   console.log(marks);
5. 5.🔍 Which is the odd one out? (a) shows pages from the web (b) opens web pages for us (c) has an address bar (d) sends pages over the net
6. 6.⚖️ What colour is the text of this element?
   <p class="box" id="hero">Hi</p>
   CSS:
   p { color: yellow; }
   .box { color: red; } (a) yellow (b) purple (c) red (d) white
7. 7.Which of these is true of a code editor? (a) hosts websites online (b) colours code to help us (c) sends pages over the net (d) stores a website’s files
8. 8.🔢 On a typical page, from top to bottom, what comes right after “<main>”? (a) <nav> (b) <footer> (c) <header>
9. 9.🔗 Which words do you click on?
   <a href="maths.html">Play games</a> (a) About us (b) maths.html (c) Play games (d) href
10. 10.⚖️ What colour is the text of this element?
    <h1 class="big" id="logo">Hi</h1>
    CSS:
    #logo { color: white; }
    .big { color: yellow; }
    h1 { color: blue; } (a) yellow (b) green (c) blue (d) white
11. 11.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
12. 12.🔍 One closing tag is missing. Which one?
    <h3>My pets</h3>
    <p>I love mangoes.
    <b>Cricket is fun.</b> (a) </p> (b) </h3> (c) </h2> (d) </b>
13. 13.📦 In the box model, which part is the gap round content? (a) padding (b) border (c) content (d) margin
14. 14.🎯 What kind of selector is p? (a) an id selector (b) a class selector (c) an element selector
15. 15.🧭 Is <main> semantic or not semantic? (a) semantic (b) not semantic
16. 16.✍️ How does a CSS comment start? (a) # (b) // (c) /* (d) <!--
17. 17.🌈 Which colour is #ff00ff? (a) blue (b) black (c) yellow (d) magenta
18. 18.💬 Which text will NOT show on the page?
    <p>Good morning!</p>
    <p>Cricket is fun.</p>
    <!-- <p>I love mangoes.</p> --> (a) Cricket is fun. (b) Good morning! (c) I love mangoes.
19. 19.🔢 When you open a web page, what comes right after “the server sends files”? (a) you type the URL (b) DNS finds the server (c) the browser shows it (d) the browser asks it
20. 20.What does font-family do? (a) centres a heading (b) picks the font style (c) sets the letter colour (d) makes the text bold
21. 21.💬 Which text will NOT show on the page?
    <!-- <p>I love mangoes.</p> -->
    <p>Hello, world!</p>
    <p>My best friend</p> (a) My best friend (b) Hello, world! (c) I love mangoes.
22. 22.💬 How does an HTML comment end? (a) --> (b) // (c) >> (d) */
23. 23.Which of these is true of <nav>? (a) holds the main content (b) holds one blog post (c) helps you move around (d) sits at the very top
24. 24.🔗 What does HyperText mean? (a) secret text (b) text in colour (c) text with links (d) very big text
25. 25.True or false: “images with no alt” helps everyone use the page. (a) True (b) False
26. 26.🔍 Which line is missing its closing tag?
    line 1: <h2>My best friend</h2>
    line 2: <p>Fun facts</p>
    line 3: <em>Hello, world! (a) line 2 (b) line 1 (c) line 3
27. 27.True or false: <title> is an empty tag. (a) True (b) False
28. 28.📝 At most, how many of these can be chosen at the same time?
    <form>
      <input type="radio" name="sport"> Kabaddi
      <input type="radio" name="sport"> Hockey
      <input type="radio" name="sport"> Chess
      <input type="radio" name="sport"> Football
      <input type="radio" name="sport"> Cricket
    </form>
29. 29.True or false: <img src="cat.png"> goes in script.js. (a) False (b) True
30. 30.🌍 What is the protocol in this URL?
    http://school.example.in/games/chess.html (a) school.example.in (b) http (c) /games/chess.html (d) https
31. 31.📝 What does <hr> draw? (a) a table (b) a link (c) a picture (d) a line across the page
32. 32.🌈 In #570000 the red part is the hex number 57. What is it as a normal number?
33. 33.True or false: in <img>, alt names the picture file. (a) True (b) False
34. 34.🎯 What kind of selector is #top? (a) a class selector (b) an element selector (c) an id selector
35. 35.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 4 (c) 2 (d) 3
36. 36.🔤 In “HTML”, what do the letters HT stand for? (a) High Tech (b) HyperText (c) Home Text (d) Hot Tags
37. 37.🔠 How many <h1> headings should a page usually have? (a) 3 (b) 10 (c) 1 (d) 6
38. 38.True or false: <h1>My Site</h1> goes in script.js. (a) True (b) False
39. 39.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 110px;
      padding: 10px;
      border: 1px solid black;
      margin: 0px;
    }
40. 40.🎯 Which element does the selector #end style? (a) <h2 id="hero"> (b) <li class="menu"> (c) <h2 id="end"> (d) <h2 class="end">

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