Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Challenge: Images | Media and Tables
Ultimate HTML

Challenge: ImagesChallenge: Images

🏁 Goal

Practice using the absolute path for images in HTML. By the end of this challenge, you will:

  • Gain hands-on experience using the absolute path in an HTML document;
  • Learn how to provide meaningful alt text for images to ensure accessibility and user experience.
content

📋 Task

  1. Ensure the src attribute of the first image uses the absolute path. You can find the image at: https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/adik.png.
  2. Utilize the absolute path for the src attribute of the second image. Access the image here: https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/joking.png.
  3. Specify the appropriate alt attribute value for both images. Remember, the alt value is crucial for providing context in case images fail to load or for users relying on screen readers.
html

index.html

css

index.css

js

index.js

  1. Use the img tag to specify an image.
  2. Use the src attribute to specify the image's location.
  3. Use the alt attribute to furnish a descriptive text for the image.
  4. You can use the width attribute to define the image's width.
  5. You can use the height attribute to define the image's height.
html

index.html

css

index.css

js

index.js

¿Todo estuvo claro?

Sección 4. Capítulo 3

Challenge: ImagesChallenge: Images

🏁 Goal

Practice using the absolute path for images in HTML. By the end of this challenge, you will:

  • Gain hands-on experience using the absolute path in an HTML document;
  • Learn how to provide meaningful alt text for images to ensure accessibility and user experience.
content

📋 Task

  1. Ensure the src attribute of the first image uses the absolute path. You can find the image at: https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/adik.png.
  2. Utilize the absolute path for the src attribute of the second image. Access the image here: https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/joking.png.
  3. Specify the appropriate alt attribute value for both images. Remember, the alt value is crucial for providing context in case images fail to load or for users relying on screen readers.
html

index.html

css

index.css

js

index.js

  1. Use the img tag to specify an image.
  2. Use the src attribute to specify the image's location.
  3. Use the alt attribute to furnish a descriptive text for the image.
  4. You can use the width attribute to define the image's width.
  5. You can use the height attribute to define the image's height.
html

index.html

css

index.css

js

index.js

¿Todo estuvo claro?

Sección 4. Capítulo 3
some-alt