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

Answer key

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

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