CodesJava

Easy learning with example program codes

img HTML

HTML <img> Tag

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

Attributes:

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 <img> Tag.

Example:

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

Output:

Explanation:

In the above example, the “src” attribute of the HTML <img> 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 is 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>

Output:

Explanation:

In the above example, the “src” attribute of the <img> tag is used to display the “girl.jpg” image and the “alt” attribute of the <img> 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 is 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>

Output:

Explanation:

In the above example, the “src” attribute of the <img> tag is used to display the “girl.jpg” image and the “alt” attribute of the <img> tag is used to specify an alternate text for the image. Since the width of the image is specified, hence the image is displayed in its specified width. The height of the image is 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>

Output:

Explanation:

In the above example, the “src” attribute of the <img> tag is used to display the “girl.jpg” image and the “alt” attribute of the <img> 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 is 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>

Output:

Explanation:

In the above example, the “src” attribute of the <img> 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 <img> 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 is displayed in its specified size.

Global Attributes:

The HTML GLobal attributes are supported by the HTML <img> tag.

Event Attributes:

The HTML Event attributes are supported by the HTML <img> tag.

Supporting Browsers:

Chrome, IE, Firefox, Opera and Safari.

 

Please follow and like us:
error
Posted in HTML   









Copyright © 2019 CodesJava DMCA.com Protection Status