Introduction to HTML Images
HTML images are added using the <img> element. This element is used to embed images in web pages. The image is defined by the src attribute, which specifies the path to the image file. The alt attribute provides alternative text for the image if it cannot be displayed.
Basic Image Syntax
The basic syntax for adding an image is as follows:
<img src="URL" alt="Description">Here, src specifies the path to the image, and alt provides a text description for the image.
Example 1: Displaying an Image from ShariqSP.com
Here’s how you can display an image from ShariqSP.com:
<img src="https://www.shariqsp.com/image1.jpg" alt="Example Image 1">Output:
Example 2: Image with a Custom Width
You can also control the size of the image using the width and height attributes:
<img src="https://www.shariqsp.com/image2.jpg" alt="Example Image 2" width="300">Output:
Image as a Link
Images can also be used as links. To do this, wrap the <img> element inside an <a> element:
<a href="https://www.shariqsp.com"><img src="https://www.shariqsp.com/image3.jpg" alt="Clickable Image"></a>Output:
Responsive Images
To make images responsive and adapt to different screen sizes, you can use CSS styles:
<img src="https://www.shariqsp.com/image4.jpg" alt="Responsive Image" style="width: 100%; height: auto;">Output:
