9.HTML – IMAGES

HTML – IMAGES

 

In HTML, images are an essential part of creating engaging and visually appealing websites. The <img> tag is used to embed images in an HTML document. Here's a breakdown of how to work with images in HTML

Basic Syntax

<img src="mahek_Institute Rewa Logo.png" />

This will produce the following result:

 

Attributes

1. src: This attribute specifies the path to the image you want to display. It can be a relative path (to a file on your server) or an absolute path (a full URL).

2.alt: This attribute provides alternative text for the image. This text is displayed if the image cannot be loaded and is also used by screen readers for accessibility.

3.width: This optional attribute specifies the width of the image in pixels or as a percentage.

4.height: This optional attribute specifies the height of the image in pixels or as a percentage.

5.title: This optional attribute provides additional information about the image, which is displayed as a tooltip when the user hovers over the image.

Attributes of <img>

1.src (Source): Specifies the path to the image file.




Example:

<img src="mahek_Institute Rewa Logo.png" />

This will produce the following result:

2.alt (Alternative Text): Provides text that describes the image, useful for accessibility and shown if the image fails to load.

Example:

<img src="mahek_Institute Rewa Logo.png" alt="Logo" />

This will produce the following result:

 

 3.width and height: Define the dimensions of the image (in pixels).

Example:

<img src="mahek_Institute Rewa Logo.png" alt="Logo" width="300" height="200"/>

This will produce the following result:

 

 4.title: Adds a tooltip that appears when the mouse hovers over the image.

Example:

<img src="mahek_Institute Rewa Logo.png" alt="logo" width="300" height="200" title="Click to see details"/>

This will produce the following result:

 

 5.Responsive Images: Use style or CSS to make images responsive.

Example:

<img src="mahek_Institute Rewa Logo.png" alt="logo"  style="max-width: 100%; height: auto;"/>

This will produce the following result:

 Image Formats

• JPEG/JPG: Good for photographs and images with gradients.
• PNG: Supports transparency and is good for images with text or sharp edges.
• GIF: Supports animation and is suitable for simple graphics.
• SVG: Scalable vector graphics, ideal for logos and icons.

Set Image Border

By default, image will have a border around it, you can specify border thickness in ter

of pixels using border attribute. A thickness of 0 means, no border around the picture.

Example:

<img src="mahek_Institute Rewa Logo.png" alt="logo" border="3"/>

This will produce the following result:

Conclusion

sing images in HTML is straightforward with the <img> tag. Remember to always include the 'alt' attribute for accessibility and to consider the image format and size for optimal performance on your web pages.