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

Answer key

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

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