HTML Tutorial
HTML Images
The <img> tag is used to display the images on the web page. It doesn’t have any closing tags. It can change the appearance of the web pages. The <img> tag contains some attributes to display the images properly.
Image Attributes:
The image attributes are used to improve the design of the web pages. Such as src, alt, width and height attributes.
The image attributes are used to improve the design of the web pages. Such as src, alt, width and height attributes.
1. Src Attribute
The src attribute specifies the address of the web page (url)
Syntax:
<img src="url"> 2. Alt Attribute
The alt tag is used as alternative text for an image. If the browser will not find any image file (It occurred when slow network connection or any error in the src file), the alt text will be displayed on the output screen.
Syntax:
<img src="url" alt="alt text"> 3. Width and Height Attributes
The dimensions of the image are very important. It is based on the requirement of the web pages. The width and height of the images are specified in terms of pixels or percentage.
Syntax:
<img src="url" alt="alt text" width="" height=""> Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Images</title>
</head>
<body>
<img src="c1.jpg" alt="Hills" style="width:300px;height:300px;">
</body>
</html> How to use an image as a link?
Already we know the <a> tag specifies the link. So, we have to add the <img> tag inside the <a> tag.
Example
<!DOCTYPE html>
<html>
<head>
<title>How to use an image as a link</title>
</head>
<body>
<a href="https://codeamend.com/">
<img src="c1.jpg" alt="Hills Station" style="width:300px;height:300px;">
</a>
</body>
</html> How to set an image location?
We must set the correct location of the image to the src attribute. If the image may be placed inside the sub folders, we must include those folder names to the src attribute.
Example
<!DOCTYPE html>
<html>
<head>
<title>How to set an image location</title>
</head>
<body>
<img src="imges/new/img_hill.jpg" alt="Hills Station" style="width:300px;height:300px;">
</body>
</html> If the images are stored on another web server, you have to specify that website link with folder names.
Example
<!DOCTYPE html>
<html>
<head>
<title>How to set an image web location</title>
</head>
<body>
<img src="https://codeamend.com/imges/old/img_forest.jpg" alt="Hills Station" style="width:300px;height:300px;">
</body>
</html> How to set an image as a background to the HTML element?
To add the background image to the HTML element. Need to add CSS property background-image to the style attribute.
In this example, you can use this style attribute to any HTML element or full body of the page.
Example
<!DOCTYPE html>
<html>
<head>
<title>How to set image as background</title>
</head>
<body>
<div style="background-image: url('images/c2.jpg');">
<p>To add the background image to the HTML element. Need to add CSS property background-image to the style attribute.</p>
</div>
</body>
</html> The Picture Element:
The picture element <picture> is used to display different screen sized images for different devices. The browser can choose a perfect screen size image for the current device.
Example
<!DOCTYPE html>
<html>
<head>
<title>The Picture Element</title>
</head>
<body>
<picture>
<source media="(min-width: 650px)" srcset="c2.jpg">
<source media="(min-width: 465px)" srcset="c3.jpg">
<img src="c1.jpg">
</picture>
</body>
</html> Here, the <source> tag is used to display suitable attributes of the images for the suitable device.
Some browsers will not support the many image formats. So, the <source> tag is used to choose the correct format.
The <img> tag is also used as the last child element. If the browser will not support the picture element, This <img> tag is used to display the image.