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, XML1<img src="" alt="">
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, XML1<img src="https://codesignal-staging-assets.s3.amazonaws.com/uploads/1702500465136/html-placeholder1.png">
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, XML1<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.
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.
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.
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, XML1<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.
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, XML1<!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>
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!