Introduction
In this chapter, you will learn about HTML images, which are used to embed pictures and graphics into web pages. Images can enhance the visual appeal and user experience of a website. HTML provides the <img> tag to include images in your web pages.
Basic Syntax
HTML images are defined with the <img> tag. The src attribute specifies the path to the image, and the alt attribute provides alternative text if the image cannot be displayed.
Syntax
<img src="image-path" alt="description">
Example
<img src="https://www.example.com/image.jpg" alt="Example Image">
Image Attributes
Various attributes can be used with the <img> tag to control the appearance and behavior of images.
Width and Height
You can specify the width and height of an image using the width and height attributes. Values can be specified in pixels or percentages.
Example
<img src="https://www.example.com/image.jpg" alt="Example Image" width="500" height="300">
Example with Percentages
<img src="https://www.example.com/image.jpg" alt="Example Image" width="50%">
Border
You can add a border around an image using the border attribute.
Example
<img src="https://www.example.com/image.jpg" alt="Example Image" border="2">
Align
The align attribute is used to specify the alignment of the image with respect to the surrounding text.
Example
<img src="https://www.example.com/image.jpg" alt="Example Image" align="left">
<p>This text will wrap around the image.</p>
Using Images as Links
You can use an image as a link by placing the <img> tag inside an <a> tag.
Example
<a href="https://www.example.com">
<img src="https://www.example.com/image.jpg" alt="Example Image">
</a>
Responsive Images
To create images that resize automatically to fit the size of their container, use CSS.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Example</title>
<style>
.responsive-img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Responsive Image Example</h1>
<img src="https://www.example.com/image.jpg" alt="Example Image" class="responsive-img">
</body>
</html>
Example: Complete HTML with Images
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Images Example</title>
<style>
.responsive-img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>HTML Images</h1>
<p>This is an example of an inline image:</p>
<img src="https://www.example.com/image.jpg" alt="Example Image" width="500">
<h2>Image with Link</h2>
<a href="https://www.example.com">
<img src="https://www.example.com/image.jpg" alt="Example Image" width="300">
</a>
<h2>Responsive Image</h2>
<img src="https://www.example.com/image.jpg" alt="Example Image" class="responsive-img">
</body>
</html>
Conclusion
HTML Images enhances the visual appeal and user experience of a website. HTML provides the <img> tag to include images in your web pages. By using the <img> tag and its various attributes, you can control the appearance and behavior of images on your web pages. Understanding how to use images effectively is crucial for creating engaging and user-friendly web experiences.