CodesJava

Easy learning with example program codes

Image tag in HTML

HTML Image
To display an image on a web page, the HTML image tag is used. It is an empty tag with no closing tag. An empty tag in HTML usually contains attributes only.

Attributes:
The attributes of the HTML image tag are discussed below.
src:
It is used to describe the source or path of the image to be displayed and is thus a mandatory attribute of the HTML image tag.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<img src ="img_girl.jpg">  
</body>
</html>

Explanation:
In the above example, the “src” attribute of the image tag is used to display the “img_girl.jpg” image. Since the height and the width of the image is not specified, hence the image will be displayed in its full size.

alt:
It is used to specify an alternate text for the image to be displayed. The value of the alt attribute is usually a text describing the image and is displayed if the image itself is not displayed on the browser for any reason, and is also good for SEO perspective.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h3>Image</h3>
<img src ="girl.jpg" alt= "girl image">  
</body>
</html>

Explanation:
In the above example, the “src” attribute of the image tag is used to display the “girl.jpg” image and the “alt” attribute of the image tag is used to specify an alternate text for the image. Now, since the image does not exist, hence the value of the alt attribute will be displayed.

width:
It is used to specify the width of the image to be displayed. It is usually not required since the developers generally use CSS to serve all these purposes.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h3>Image</h3>
<img src ="img_girl.jpg" width = 200px alt= "girl image">  
</body>
</html>

Explanation:
In the above example, the “src” attribute of the image tag is used to display the “girl.jpg” image and the “alt” attribute of the image tag is used to specify an alternate text for the image. Since the width of the image is specified, hence the image will be displayed in its specified width. The height of the image will be varied accordingly.

height:
It is used to specify the height of the image. It is also usually not required since the developers generally use CSS to serve all these purposes.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h3>Image</h3>
<img src ="img_girl.jpg" width = 200px height = 150px alt= "girl image">
</body>
</html>

Explanation:
In the above example, the “src” attribute of the image tag is used to display the “girl.jpg” image and the “alt” attribute of the image tag is used to specify an alternate text for the image. Since both the width and the height of the image is specified, hence the image will be displayed in its specified size.

To get image from another directory/folder:
Example:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h3>Image</h3>
<img src ="D:/imgs/img_girl.jpg" width = 200px height = 150px alt= "girl image">
</body>
</html>

Explanation:
In the above example, the “src” attribute of the image tag is used to display the “girl.jpg” image from the path “D:/imgs/img_girl.jpg”, where “imgs” is a folder inside the “D:” directory, and the “alt” attribute of the image tag is used to specify an alternate text for the image. Since both the width and the height of the image is specified, hence the image will be displayed in its specified size.

Please follow and like us:
error
Posted in HTML   









Copyright © 2019 CodesJava DMCA.com Protection Status