← Web development final test lesson New set →

Web Development Worksheet: Final Test

HTML and CSS lesson 30: Web development final test · Set 814 · 40 questions
TalentJR

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.

NameDateTime takenScore ___ / 40
  1. 1.🔗 Which address opens when you click this link?
    <a href="art.html">Take the quiz</a>
    (a) quiz.html (b) Take the quiz (c) art.html (d) news.html
  2. 2.🔗 Which address opens when you click this link?
    <a href="games.html">Play games</a>
    (a) Play games (b) games.html (c) contact.html (d) about.html
  3. 3.🎨 One CSS file can style how many pages? (a) no pages (b) many pages (c) only one word (d) only one image
  4. 4.True or false: to use a nickname in games is not safe. (a) False (b) True
  5. 5.💬 How does an HTML comment end? (a) */ (b) // (c) --> (d) >>
  6. 6.🖌️ Where does the text sit on its line?
    h2 {
      text-align: left;
      background-color: orange;
      color: blue;
      font-size: 16px;
    }
    (a) on the right (b) on the left (c) in the middle
  7. 7.Which of these is true of a code editor? (a) shows pages from the web (b) shows line numbers (c) hosts websites online (d) sends pages over the net
  8. 8.🧭 Why use <nav> instead of <div> for a menu? (a) it tells its meaning (b) it loads faster (c) it adds pictures (d) it makes text red
  9. 9.🖼️ How many pixels wide is the picture drawn?
    <img src="fort.jpg" alt="An old fort" width="100">
  10. 10.🌈 Which colour is #ff00ff? (a) red (b) blue (c) white (d) magenta
  11. 11.📄 Can HTML on its own make headings? (a) No (b) Yes
  12. 12.True or false: <li> is an empty tag. (a) True (b) False
  13. 13.🖌️ What colour are the letters?
    li {
      background-color: red;
      font-size: 32px;
      text-align: left;
      color: orange;
    }
    (a) black (b) red (c) orange
  14. 14.📄 Where does <meta charset="utf-8"> go: in the head or in the body? (a) in the head (b) in the body
  15. 15.🖌️ What colour is behind the letters?
    h2 {
      background-color: blue;
      font-size: 24px;
      text-align: center;
      color: orange;
    }
    (a) blue (b) orange (c) white
  16. 16.📄 Can HTML on its own keep a high score? (a) Yes (b) No
  17. 17.📄 Where does <img> go: in the head or in the body? (a) in the head (b) in the body
  18. 18.📄 Where does <h1> go: in the head or in the body? (a) in the body (b) in the head
  19. 19.🌈 Which colour is #00ff00? (a) cyan (b) yellow (c) bright green (d) black
  20. 20.🌍 What is the protocol in this URL?
    http://kids.example.org/news/today.html
    (a) /news/today.html (b) kids.example.org (c) https (d) http
  21. 21.🔁 What is the LAST number this code prints?
    for (let i = 0; i < 6; i = i + 2) {
      console.log(i);
    }
  22. 22.💬 Which text will NOT show on the page?
    <p>Hello, world!</p>
    <p>Our school trip</p>
    <!-- <p>My pets</p> -->
    <p>Cricket is fun.</p>
    (a) Cricket is fun. (b) Our school trip (c) My pets (d) Hello, world!
  23. 23.🖼️ Which picture file does the browser load?
    <img src="fort.jpg" alt="An old fort" width="350">
    (a) fort.jpg (b) kite.png (c) An old fort (d) tiger.jpg
  24. 24.⚡ What does this code print? (Look at the quotes!)
    let x = "7";
    let y = 3;
    console.log(x + y);
    (a) 73 (b) 10 (c) Error
  25. 25.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>Class 7 Blog</title>
    </head>
    <body>
      <h1>Welcome!</h1>
      <p>Thanks for visiting.</p>
    </body>
    </html>
    (a) Class 7 Blog (b) Thanks for visiting. (c) index.html (d) Welcome!
  26. 26.♿ Is this heading order correct (no level skipped)?
    <h1> → <h1> → <h2> → <h4>
    (a) No (b) Yes
  27. 27.Which of these is true of a web server? (a) is where we type code (b) stores a website’s files (c) shows pages from the web (d) opens web pages for us
  28. 28.🌈 In #008400 the green part is the hex number 84. What is it as a normal number?
  29. 29.🖼️ Which attribute of <img> shows if the image fails? (a) alt (b) src (c) height (d) width
  30. 30.🔍 Which is the odd one out? (a) opens web pages for us (b) saves our .html files (c) shows pages from the web (d) turns HTML into a page
  31. 31.🔍 Which is the odd one out? (a) changes the text size (b) rounds box corners (c) sets colours and fonts (d) gives the page structure
  32. 32.True or false: <input type="email"> is for an email address. (a) False (b) True
  33. 33.📄 What does the browser tab show for this page?
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Hobbies</title>
    </head>
    <body>
      <h1>All about me</h1>
      <p>We won by 5 runs.</p>
    </body>
    </html>
    (a) All about me (b) My Hobbies (c) index.html (d) We won by 5 runs.
  34. 34.📄 Can HTML on its own make bullet lists? (a) Yes (b) No
  35. 35.🎨 Which attribute adds CSS inside one tag? (a) style (b) src (c) alt (d) href
  36. 36.📊 How many heading cells (<th>) does this table have?
    <table>
      <tr><th>Name</th><th>Fruit</th><th>Price</th></tr>
      <tr><td>Mango</td><td>Guava</td><td>Jamun</td></tr>
    </table>
  37. 37.🔗 Which words do you click on?
    <a href="maths.html">Maths fun</a>
    (a) href (b) maths.html (c) Art corner (d) Maths fun
  38. 38.True or false: margin is the gap round content. (a) True (b) False
  39. 39.💪 Which flexbox property spaces boxes along a row? (a) align-items (b) flex-direction (c) justify-content (d) display: flex
  40. 40.🎨 Which tag connects an outside CSS file? (a) <css> (b) <a> (c) <link> (d) <img>

Answer key

  1. art.html
  2. games.html
  3. many pages
  4. False
  5. -->
  6. on the left
  7. shows line numbers
  8. it tells its meaning
  9. 100
  10. magenta
  11. Yes
  12. False
  13. orange
  14. in the head
  15. blue
  16. No
  17. in the body
  18. in the body
  19. bright green
  20. http
  21. 4
  22. My pets
  23. fort.jpg
  24. 73
  25. Class 7 Blog
  26. No
  27. stores a website’s files
  28. 132
  29. alt
  30. saves our .html files
  31. gives the page structure
  32. True
  33. My Hobbies
  34. Yes
  35. style
  36. 3
  37. Maths fun
  38. False
  39. justify-content
  40. <link>

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