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

Answer key

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

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