Course Content

Ultimate HTML

1. Web Development

Web World What is the Internet?Understanding How the Internet Works How a Website Works Frontend vs Backend Development Path to Success

2. Tags and Attributes

Unveiling the Potential of HTML Tags and Attributes Tags Attributes Paired and Single Tags Text Markup Challenge: Text Markup Special Purpose Text Markup Challenge: Special Purpose Text Markup Validation

3. Document Structure

Secrets of Structural Web Pages Structure Document Head Document Flow Challenge: Document Structure Developer Tools

4. Media and Tables

Magic of Rich Media and Dynamic Tables Images Challenge: Images Special Purpose Images Graphic Formats Audio and Video Embedding Challenge: Audio and Video Tables Challenge: Tables

5. Forms

Power of Forms: Interact and Engage Form Creation Basis Label for Input Element Input Attributes Input Types Challenge: Input and Label Textarea Element Select Element Datalist Element Group Form Elements

Ultimate HTML

Challenge: 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.

📋 Task

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.
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.
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.

Solution

🏆 Challenge 2:

🏁 Goal

Elevate the visual experience of the website by seamlessly integrating images from the "images" folder into the 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:

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.
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.
Set the alt attribute to provide meaningful image descriptions.
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.

Solution

Everything was clear?

Section 4. Chapter 3