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

Answer key

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

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