In this tutorial, we explore how to add images to a web page using HTML5 and CSS3. We cover creating an images folder, downloading images from Unsplash, renaming files, and using the IMG tag with attributes like source, width, height, and alt text.
Additionally, we discuss the importance of accessibility and image alignment. This comprehensive guide is perfect for beginners looking to enhance their web development skills.
Welcome to the seventh part of our HTML and CSS beginners tutorial series. In this tutorial, we will learn how to add images to our web pages. This is an essential skill for any web developer, as images play a crucial role in enhancing the visual appeal and user experience of a website.
Setting Up Your Workspace
To begin, open your Notepad file where you have been writing your HTML code. Simultaneously, open Google Chrome to preview your web page. To make it easier to work, minimise the browser window so you can access your project folder.
Creating an Images Folder
Within your project folder, create a new folder named images. This folder will be used to store all the pictures you want to display on your web page.
Downloading Images
Next, we will download an image to use in our project. A great resource for free stock images is Unsplash. Navigate to Unsplash and find a suitable image for your web page. For this tutorial, we will select an image and download it. Remember to acknowledge the photographer, as it is good practice to give credit for the images you use.
Renaming the Image
Once the image is downloaded, it is important to rename it for easier reference. You can rename the file by right-clicking on it and selecting “Rename,” or by clicking on the file once and then clicking again (not too fast). Alternatively, you can select the file and press F2 on your keyboard. For this tutorial, we will rename the image to image1.jpg.
Adding the Image to Your HTML Code
Now that we have our image ready, we will add it to our HTML code. Locate the section in your code where you want to insert the image, typically below any existing content like lists or text.
Writing the IMG Tag
To display the image, we will use the <img> tag. The basic syntax for the image tag is as follows:
<img decoding="async" src="path/to/image" alt="description" width="value" height="value">
In our case, the src attribute will point to the location of our image. Since we created an images folder and named our image image1.jpg, the path will be images/image1.jpg.
Example Code
Here’s how the code will look:
<img fetchpriority="high" fetchpriority="high" decoding="async" src="images/image1.jpg" alt="A beautiful flower painting" width="300" height="200">
After adding this code, save your file and refresh your browser to see the image displayed on your web page.
Troubleshooting Common Issues
If the image does not appear, check the following:
- Ensure the file path is correct. The folder name and file name must match exactly, including capitalisation.
- Make sure you have included the width and height attributes to prevent the image from displaying too large or too small.
Resizing Images
If the image appears too large, you can adjust the width and height attributes. For example, setting the width to 300 and height to 200 will resize the image appropriately without distorting its aspect ratio.
Importance of the Alt Attribute
Another important aspect of the <img> tag is the alt attribute. This attribute provides a text description of the image, which is crucial for accessibility. Screen readers use this text to describe images to visually impaired users. Additionally, using descriptive alt text can improve your website’s SEO.
Example of Alt Text
In our example, we used:
alt="A beautiful flower painting"
This description helps users understand what the image represents, even if they cannot see it.
Image Alignment
By default, images are left-aligned in HTML. However, you can change the alignment using the align attribute. For example:
<img decoding="async" src="images/image1.jpg" alt="A beautiful flower painting" width="300" height="200" align="right">
This code will align the image to the right side of the page. You can also use CSS for more advanced alignment options, which we will cover in future tutorials.
Conclusion
In this tutorial, we covered how to add images to your web page using HTML5 and CSS3. We discussed creating an images folder, downloading images, renaming files, and using the <img> tag with various attributes.
Remember to always include alt text for accessibility and SEO purposes. In future tutorials, we will explore more advanced techniques for image manipulation and styling using CSS. Thank you for following along, and I look forward to seeing you in the next part of our series!
