← Images with img, src and alt lesson New set →

HTML Worksheet: Images and Alt Text

HTML and CSS lesson 7: Images with img, src and alt · Set 256 · 40 questions
TalentJR

Code tip (File and words): <img src="file.jpg" alt="what it shows" width="200"> — no closing tag. src = which file to load; alt = words describing it; width / height = size in pixels. If the picture fails, the browser shows the alt text; screen readers read it aloud.

NameDateTime takenScore ___ / 40
  1. 1.🖼️ Which attribute of <img> describes the picture? (a) width (b) alt (c) height (d) src
  2. 2.🖼️ Does <img> need a closing tag? (a) No (b) Yes
  3. 3.🖼️ Which tag puts a picture on a page? (a) <pic> (b) <img> (c) <a> (d) <p>
  4. 4.True or false: in <img>, alt sets how wide it is. (a) True (b) False
  5. 5.🖼️ How many pixels wide is the picture drawn?
    <img src="bus.jpg" alt="Our school bus" width="200">
  6. 6.🖼️ How many pixels wide is the picture drawn?
    <img src="moon.png" alt="The full moon" width="100">
  7. 7.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="tiger.jpg" alt="A tiger asleep" width="50">     (a) tiger.jpg (b) width (c) A tiger asleep (d) A red kite
  8. 8.🖼️ How many pixels wide is the picture drawn?
    <img src="moon.png" alt="The full moon" width="300">
  9. 9.🖼️ Which picture file does the browser load?
    <img src="tiger.jpg" alt="A tiger asleep" width="150">     (a) map.png (b) tiger.jpg (c) A tiger asleep (d) kite.png
  10. 10.🖼️ Which picture file does the browser load?
    <img src="cake.jpg" alt="Birthday cake" width="100">     (a) dog.jpg (b) moon.png (c) cake.jpg (d) Birthday cake
  11. 11.🖼️ Which attribute of <img> is read by screen readers? (a) alt (b) src (c) height (d) width
  12. 12.True or false: in <img>, src tells which image to load. (a) False (b) True
  13. 13.True or false: in <img>, height sets how tall it is. (a) True (b) False
  14. 14.🖼️ Which picture file does the browser load?
    <img src="map.png" alt="Map of India" width="400">     (a) cake.jpg (b) map.png (c) dog.jpg (d) Map of India
  15. 15.🖼️ Which attribute of <img> shows if the image fails? (a) alt (b) src (c) height (d) width
  16. 16.True or false: in <img>, src names the picture file. (a) False (b) True
  17. 17.True or false: in <img>, height tells which image to load. (a) True (b) False
  18. 18.🖼️ How many pixels wide is the picture drawn?
    <img src="kite.png" alt="A red kite" width="300">
  19. 19.🖼️ How many pixels wide is the picture drawn?
    <img src="tiger.jpg" alt="A tiger asleep" width="300">
  20. 20.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="kite.png" alt="A red kite" width="250">     (a) kite.png (b) width (c) A red kite (d) Map of India
  21. 21.🖼️ How many pixels wide is the picture drawn?
    <img src="dog.jpg" alt="A happy dog" width="50">
  22. 22.🖼️ Which attribute of <img> tells which image to load? (a) height (b) src (c) alt (d) width
  23. 23.True or false: in <img>, src describes the picture. (a) True (b) False
  24. 24.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="dog.jpg" alt="A happy dog" width="100">     (a) A happy dog (b) width (c) The full moon (d) dog.jpg
  25. 25.🖼️ Which picture file does the browser load?
    <img src="map.png" alt="Map of India" width="200">     (a) dog.jpg (b) map.png (c) cake.jpg (d) Map of India
  26. 26.🖼️ Why do we add alt text to an image? (a) to colour it (b) to load it faster (c) to describe the image (d) to make it bigger
  27. 27.🖼️ Which picture file does the browser load?
    <img src="tiger.jpg" alt="A tiger asleep" width="50">     (a) map.png (b) A tiger asleep (c) kite.png (d) tiger.jpg
  28. 28.🖼️ How many pixels wide is the picture drawn?
    <img src="dog.jpg" alt="A happy dog" width="200">
  29. 29.True or false: in <img>, width names the picture file. (a) False (b) True
  30. 30.🖼️ Which attribute of <img> sets how wide it is? (a) alt (b) src (c) height (d) width
  31. 31.🖼️ Which attribute of <img> names the picture file? (a) alt (b) width (c) src (d) height
  32. 32.True or false: in <img>, alt is read by screen readers. (a) False (b) True
  33. 33.🖼️ Which picture file does the browser load?
    <img src="cake.jpg" alt="Birthday cake" width="150">     (a) moon.png (b) cake.jpg (c) Birthday cake (d) dog.jpg
  34. 34.🖼️ Which picture file does the browser load?
    <img src="kite.png" alt="A red kite" width="150">     (a) cake.jpg (b) A red kite (c) map.png (d) kite.png
  35. 35.🖼️ How many pixels wide is the picture drawn?
    <img src="fort.jpg" alt="An old fort" width="350">
  36. 36.🖼️ How many pixels wide is the picture drawn?
    <img src="tiger.jpg" alt="A tiger asleep" width="400">
  37. 37.True or false: in <img>, alt shows if the image fails. (a) False (b) True
  38. 38.🖼️ The picture cannot load. Which text does the browser show instead?
    <img src="kite.png" alt="A red kite" width="100">     (a) width (b) kite.png (c) A red kite (d) Map of India
  39. 39.🖼️ How many pixels wide is the picture drawn?
    <img src="tiger.jpg" alt="A tiger asleep" width="100">
  40. 40.🖼️ How many pixels wide is the picture drawn?
    <img src="bus.jpg" alt="Our school bus" width="250">

Answer key

  1. alt
  2. No
  3. <img>
  4. False
  5. 200
  6. 100
  7. A tiger asleep
  8. 300
  9. tiger.jpg
  10. cake.jpg
  11. alt
  12. True
  13. True
  14. map.png
  15. alt
  16. True
  17. False
  18. 300
  19. 300
  20. A red kite
  21. 50
  22. src
  23. False
  24. A happy dog
  25. map.png
  26. to describe the image
  27. tiger.jpg
  28. 200
  29. False
  30. width
  31. src
  32. True
  33. cake.jpg
  34. kite.png
  35. 350
  36. 400
  37. True
  38. A red kite
  39. 100
  40. 250

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