Challenge: ImagesChallenge: Images

🏆 Challenge 1:

🏁 Goal

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

  • Understand the difference between relative and absolute paths for image sourcing.
  • Gain hands-on experience using absolute and relative paths in an HTML document.
  • Learn how to provide meaningful alt text for images to ensure accessibility and user experience.
content

📋 Task

  1. Use the absolute path for the src attribute of the first image. Here is the link to the image: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/ultimate-html/media+and+tables/joking.png.
  2. For the second image, use the relative path since it is located in the project directory. The path to the image is ./images/joke.png.
  3. Specify the correct value for the alt attribute for both images. Remember that the alt value will be shown to the user in case of failed images or if users use built-in browser tools that read the webpage content due to disabilities.

Note

The Code Sandbox is broken by default because no path is specified for the images' src attribute. After fixing this issue, we can view the live page.

Hint
1. Use the img tag to specify an image.
2. Use the src attribute to specify the path where the image is located, whether it's an absolute or relative path.
3. Use the alt attribute to provide a description for the image.
4. You can use the width attribute to specify the image's width.
5. You can use the height attribute to specify the image's height.

🏆 Challenge 2:

🏁 Goal

Elevate the visual experience of the website by seamlessly integrating images from the "images" folder into the content.

content

📋 Task

Bring life to the website by incorporating images from the "images" folder that perfectly complement the theme of dogs and cats. Your task is to:

  1. For the Dogs section: Insert an appropriate image from the images folder that captures dogs' loyal companionship and playful spirit. Remember to use the correct relative path.
  2. For the Cats section: Insert a suitable image from the images folder that reflects cats' mysterious charm and independent nature. Ensure you specify the correct relative path.
  3. Set the alt attribute to provide meaningful image descriptions.
  4. Adjust the width of both images to maintain a cohesive design.
Hint
1. Use the img tag to specify an image.
2. Use the src attribute to specify the path where the image is located.
3. Use the alt attribute to provide a description for the image.
4. You can use the width attribute to specify the image's width.
5. You can use the height attribute to specify the image's height.

Everything was clear?

Section 4. Chapter 3