HTML Images
In HTML, images are used to add visual interest to web pages and convey information in a more engaging way. An image is a visual representation of something. It can be a picture, a drawing, a photograph, or any artwork that you can see. Images are used to make things more interesting and to help explain ideas in a way that words sometimes can’t.
How to Add an Image in HTML
To add an image to a web page, you use the <img> tag. This tag is self-closing, meaning it does not need a closing tag. The most important attributes of the <img> tag are:
⦁ src: This attribute specifies the URL of the image. It’s a required attribute, as it tells the browser where to find the image file.
⦁ alt: This attribute provides alternative text for the image if it cannot be displayed. It also helps with accessibility and SEO.
Example:
Let’s say we have an image of a cute puppy, and we want to display it on our web page. The image file is named puppy.jpg and is located in the same directory as our HTML file. Here is how we can add this image to our page:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Here is a picture of a cute puppy:</p>
<img src=”puppy.jpg” alt=”A cute puppy sitting on the grass”>
</body>
</html>
Output:
In this example:
The <img> tag that displays the image of the puppy. The src attribute specifies the file name puppy.jpg, and the alt attribute provides a text description “A cute puppy sitting on the grass” in case the image cannot be displayed.
Common Attributes of the Tag
Here’s the list of common attribute of the <img> tag:
| Attribute | Description | Example |
|---|---|---|
| src | Specifies the URL of the image file. | <img src=”example.jpg” alt=”Example Image”> |
| alt | Provides alternative text for the image. | <img src=”example.jpg” alt=”Example Image”> |
| width | Specifies the width of the image (in pixels). | <img src=”example.jpg” alt=”Example Image” width=”200″> |
| height | Specifies the height of the image (in pixels). | <img src=”example.jpg” alt=”Example Image” height=”150″> |
| title | Adds a tooltip when the mouse hovers over the image. | <img src=”example.jpg” alt=”Example Image” title=”Hover”> |
| loading | Defines how the image should be loaded. | <img src=”example.jpg” alt=”Example Image” loading=”lazy”> |
| srcset | Specifies multiple sources for the image, along with sizes. | <img srcset=”small.jpg 500w, medium.jpg 1000w” alt=”Responsive Image”> |
Width and Height Attribute of the Tag
You can control the size of the image using the width and height attributes.
⦁ width: This attribute specifies the width of the image, in pixels. You can set it to a specific number of pixels or a percentage of the container’s width.
⦁ height: Similar to the width attribute, the height attribute specifies the height of the image, in pixels or as a percentage of the container’s height.
Example:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>My Web Page</title>
</head>
<body>
<img src=”puppy.jpg” width=”300″ height=”300″>
</body>
</html>
Output:
In this example:
⦁ src=”puppy.jpg”: Specifies the path to the image file. In this case, the image file is named puppy.jpg and is located in the same directory as the HTML file.
⦁ width=”300″: Sets the width of the image to 300 pixels.
⦁ height=”300″: Sets the height of the image to 300 pixels.
Title Attribute of the Tag
The title attribute adds a tooltip that appears when the user hovers over the image. It’s helpful for providing additional information about the image.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>My Web Page</title>
</head>
<body>
<img src=”puppy.jpg” title=”Puppy image”>
</body>
</html>
Output:
In this example:
⦁ src=”puppy.jpg”: Specifies the path to the image file, just like before.
⦁ title=”Puppy image”: This attribute adds a title to the image. When a user hovers their mouse over the image, this title will be displayed as a tooltip.
Responsive Images
Responsive images adjust their size automatically to fit the size of their container, making them look good on any device, whether it’s a desktop, tablet, or mobile phone. To achieve this, we use CSS with relative units like percentages.CSS is used to make the image responsive by setting its width to 100% of its container’s width and its height to auto.
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>My Web Page</title>
</head>
<body>
<img src=”puppy.jpg” style=”width: 100%; height: auto;”>
</body>
</html>
Output:
In this example:
⦁ src=“puppy.jpg”: Specifies the path to the image file, which is named puppy.jpg.
⦁ style=“width: 100%; height: auto;”: This inline style makes the image responsive:
⦁ width: 100%;: Sets the width of the image to 100% of the containing element’s width, making it scale to fit the container.
⦁ height: auto;: Maintains the aspect ratio of the image as it scales, preventing distortion.
Displaying Images with Links
You can make images clickable by wrapping them in an <a> tag. This allows users to click on the image and be directed to another page or resource.
<!DOCTYPE html>
<html>
<head>
<title>Clickable Image</title>
</head>
<body>
<h1>Clickable Image</h1>
<a href=”https://iqratechnology.com”>
<img src=”puppy.jpg” alt=”Clickable image”>
</a>
</body>
</html>
Output:
In this example:
⦁ <a href=”https://iqratechnology.com”>…</a>:This is an anchor (<a>) element that creates a hyperlink.
⦁ href=”https://iqratechnology.com”: Specifies the URL that the hyperlink points to. In this case, it’s set to “https://iqratechnology.com”, which means clicking on the image will take the user to the specified website.
⦁ <img src=”puppy.jpg” alt=”Clickable image”>:Inside the anchor element (<a>), there’s an image (<img>) element.
⦁ src=”puppy.jpg”: Specifies the path to the image file named “puppy.jpg”.
⦁ alt=”Clickable image”: Provides alternative text for the image, which is displayed if the image fails to load or for accessibility purposes.
YouTube Reference :
Practice scenario
Scenario 1: Basic Image Display
Objective: Display an image on a webpage.
Expected Output: A webpage displaying an image.
Output:
Scenario 2: Image with Caption
Objective: Display an image with a caption.
Expected Output: A webpage displaying an image with a caption.
<!DOCTYPE html>
<html>
<head>
<title>Image with Caption</title>
</head>
<body>
<h1>Image with Caption</h1>
<figure>
<img src=”puppy.jpg” alt=”Description of the image”>
<figcaption>Caption describing the image</figcaption>
</figure>
</body>
</html>
Output:
Scenario 3: Responsive Image
Objective: Display an image that adjusts its size based on the screen width.
Expected Output: A webpage with an image that scales responsively.
<!DOCTYPE html>
<html>
<head>
<title>Responsive Image</title>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Responsive Image</h1>
<img src=”puppy.jpg” alt=”Description of the image”>
</body>
</html>
Output:
Scenario 4: Image Link
Objective: Display an image that acts as a link to another page.
Expected Output: A webpage with an image that, when clicked, navigates to another page.
Output:
Scenario 5: Image with Border
Objective: Add a border to an image.
Expected Output: A webpage with an image surrounded by a border.
Output:
