Lesson 5

Incorporating Images and Unraveling File Paths in HTML

Incorporating Images into HTML

Images enhance the visual appeal of webpages, making them more engaging. These images could range from a company's logo on its homepage to a gallery of photos on a portfolio website. To incorporate images into an HTML page, we use the <img> tag. Notice that the tag does not have a closing </img> tag. Here's the syntax:

HTML, XML
1<img src="" alt="">
Source Attribute (`src`)

The src attribute specifies the image source or URL. A webpage can add a diverse range of images, from a product image for an online store to an icon indicating a caution sign or even a background image to enhance the webpage's artistic appeal. Here's how to specify the source of an image using the src attribute:

HTML, XML
1<img src="https://codesignal-staging-assets.s3.amazonaws.com/uploads/1702500465136/html-placeholder1.png">
Alt Attribute (`alt`)

The alt attribute provides alternative text in case the image doesn't load or is processed by screen readers. This attribute is particularly crucial when the image fails to load for any reason or when visually impaired users use screen readers to comprehend the content of the page. Here's how to use it:

HTML, XML
1<img src="https://codesignal-staging-assets.s3.amazonaws.com/uploads/1702500465136/html-placeholder1.png" alt="A placeholder image">

In scenarios where the image doesn't load, the text "A placeholder image" is displayed instead.

Exploring File Paths

File paths are the addresses of files on your computer or online, guiding your HTML code to determine the file's location. Working with local files, such as images stored on your computer, necessitates an understanding of absolute or relative file paths.

Absolute File Paths

An 'absolute' path is like giving someone the full address to your house by starting with the city name, progressing to the area, street, and concluding with the house number. Absolute paths include the full directory path to the file. In the image example above, we used an absolute path, which is the full URL to the image.

Relative File Paths

A 'relative' path is like giving directions to a friend's house from your own house. A relative path refers to a location related to the current directory in which the HTML file resides. This approach is common when managing projects as it helps keep the files organized. For instance, for an image named "logo.png" stored in an "img" folder, its reference is:

HTML, XML
1<img src="img/logo.png" alt="Website Logo">

The src value here instructs the browser to look for the image in an "img" folder located in the same directory as the current HTML page.

Using File Paths to Incorporate Images

Let's apply this path concept in practice. Suppose we have a photo called "html-placeholder2.png" in a folder named "media". We can insert it into our HTML page this way:

HTML, XML
1<img src="media/html-placeholder2.png" alt="A second placeholder image">

The src attribute instructs the browser to fetch our image from the "media" folder, which is in the same directory as the HTML page.

Resizing Images

Another set of useful attributes to use are height and width to adjust the image size in pixels.

Here's how to add an image with a specified width and height:

HTML, XML
1<!DOCTYPE html> 2<html> 3<body> 4 <h1>Welcome to Space</h1> 5 <img src="https://codesignal-staging-assets.s3.amazonaws.com/uploads/1702500465136/html-placeholder1.png" alt="Universe" width="500" height="600"> 6</body> 7</html>
Wrapping Up and Practice Exercises

Great job! We've now learned how to incorporate images into web pages and have understood the significance of file paths in specifying the location of an image file. We've also explored absolute and relative file paths and the strategic organization of our resources. This strategic approach helps in managing and maintaining larger web projects effectively.

Next, we offer hands-on coding exercises that provide an opportunity to practice these concepts and solidify your understanding. These exercises will reinforce your knowledge about inserting images into a webpage using HTML tags and how different paths dictate where to fetch images from. Whether you are making a personal blog more vibrant with images or managing an image gallery for a photography website, the ability to manipulate and incorporate images is an indispensable skill in a web developer's toolkit. Happy coding!

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.