Class – 9 | add Images in HTML | HTML Tutorial

HTML images are an essential aspect of web design, allowing you to display images on your web page. The following is a guide for adding images to your HTML page:

1. Creating an Image Folder: You must create an image folder before displaying images on your web page. You can do this by creating a new folder in your file explorer and naming it “images.”
2. Storing Images: Store the images you want to use in the image folder. You can do this by saving the images to the folder or by copying and pasting the photos into the folder.
3. Adding the Image to the HTML Page: Once you have created your image folder and stored your images, you can add them to your HTML page. To do this, you need to use the <img> tag. The following is an example of how to add an image to your HTML page:

<img src="images/image_name.jpg" alt="Image Description">

4. Understanding the src and alt Attributes: The src the attribute is used to specify the source of the Image and the alt attribute is used to describe the Image for accessibility purposes.
5. Image Size: You can also set the size of the Image using the width and height Attributes. For example:

<img src="images/image_name.jpg" alt="Image Description" width="300" height="200">

6. Aligning Images: You can align images to the page’s left, right, or center using the align attribute. For example:

<img src="images/image_name.jpg" alt="Image Description" align="left">

7. Image Links: You can also use images as links by wrapping the <img> tag inside a <a> tag. For example:

<a href="https://www.example.com">
  <img src="images/image_name.jpg" alt="Image Description">
</a>

These are the basic steps for adding images to your HTML page. You can use images to create visually appealing and engaging web pages with some practice and experimentation.

Next Class