HTML - Images

In HTML, images are inserted into a web page using the <img> tag. The <img> tag is a self-closing tag, meaning it doesn't have a closing tag. Here's a breakdown of the <img> tag:Tag: <img>

The <img> tag is used to embed images in an HTML document.

The <img> tag requires the src attribute, which specifies the source or location of the image file. Additionally, the alt attribute should be used to provide alternative text for the image, which is displayed if the image cannot be loaded.

<img src="image.jpg" alt="Description of the image">

Here are the main attributes used with the <img> tag:src attribute: Specifies the source or location of the image file. It can be a relative or absolute URL pointing to the image file.

alt attribute: Provides alternative text for the image. It is displayed if the image fails to load or for accessibility purposes.

width attribute: Sets the width of the image in pixels or as a percentage of the available width.

height attribute: Sets the height of the image in pixels or as a percentage of the available height.

Here's an example that demonstrates the usage of the <img> tag:html

<img src="image.jpg" alt="A beautiful sunset" " height="300">

In the example above, we have an <img> tag that specifies the source (src) as "image.jpg" and provides a brief description of the image in the alt attribute. Additionally, the width is set to 400 pixels and the height to 300 pixels.It's important to note that the alt attribute is crucial for accessibility. It helps screen readers and visually impaired users understand the content of the image. Therefore, it's recommended to provide meaningful and descriptive alternative text for images.Images can be stored locally within the same directory as the HTML file or can be referenced using a URL pointing to an image hosted on a web server. Additionally, images can be styled using CSS to adjust their appearance, alignment, borders, and more.html

<img src="https://www.example.com/image.jpg" alt="A remote image" style="border: 1px solid black;">

In the example above, the src attribute references an image located on a remote server, and a CSS style is applied to add a 1-pixel black border around the image.Adding an image with a relative path and alternative text:

<img src="images/pic.jpg" alt="A beautiful picture">

Specifying image dimensions with width and height attributes:

<img src="images/pic.jpg" alt="A picture" " height="200">

Adding a remote image with a URL:

<img src="https://www.example.com/image.jpg" alt="A remote image">

Adding a caption to the image using the figcaption and figure elements:

<figure>
  <img src="images/pic.jpg" alt="A picture">
  <figcaption>This is a beautiful picture.</figcaption>
</figure>

Making the image a clickable link using the <a> tag:

<a href="https://www.example.com">
  <img src="images/logo.jpg" alt="Company Logo">
</a>

Applying CSS styles to the image for customization:

<img src="images/pic.jpg" alt="A picture" style="border: 1px solid #ccc; border-radius: 5px;">

Remember to replace the src attribute with the appropriate image file or URL, and provide meaningful and descriptive alt text for better accessibility. Additionally, adjust the width and height attributes according to your desired dimensions.Remember to ensure that you have the appropriate rights and permissions to use images on your website, and consider optimizing the size and format of images for better page performance and loading speed.