HTML Images

HTML provides you <img> tag to add images to your webpages. Only using texts in website, it made them appear quite boring and uninteresting. So, <img> tag is used to add images in webpages. It helps you to improve the designs and appearance of web pages.

<img> tag is also known as empty tag because there is no closing tags. It contains attributes only.

Attributes of HTML <img> tags are:

Src- It is necessary attribute, it describes the path/source of the image. It instructs the browser where to look for the image to display in webpages. May be the image location is on same folder or another server.
Alt- It describes the alternate text for the image. If image can’t be displayed, the value of alt attributed describe the image in text.
Width- You can use width attributes to set the width of the image. But now you can set width by using CSS.
Height- Height attribute is used to set the height of the images, if you want. In this, you can use CSS to set the height of the image.

Let's take an example:

<!DOCTYPE html> 
<html> 
<head> 
	<title>Inserting an image</title> 
</head> 
<body> 
	<img src= "https://cdn140.picsart.com/315857494228201.jpg?type=webp&to=crop&r=256&q=70"
		alt="Img"> 
</body> 
</html>

Output:

Setting Height and width of the image: The attributes height and width value are specified in pixels by default.

Let's take an example of setting the height and width of the image:

<!DOCTYPE html> 
<html> 
<head> 
	<title>Inserting an image</title> 
</head> 
<body> 
	<img src= "https://cdn140.picsart.com/315857494228201.jpg?type=webp&to=crop&r=256&q=70"
		alt="Img" height="300" width="300"> 
</body> 
</html>

Output:

Adding animated Images: you can also add animated image in webpages. But it is necessary to use the extension of the image .gif.

Let's take an example of adding animated images:

<!DOCTYPE html> 
<html> 
<head> 
	<title>Inserting an image</title> 
</head> 
<body> 
<img src="1.gif" 
	alt="phptpoint.gif" height="300" width="300"> 
</body> 
</html>

Output:

« Previous

HTML Tutorial HTML Introduction HTML Tags HTML Headings HTML Paragraph HTML Hyperlink HTML Marquee HTML Font HTML List HTML Table HTML Form HTML Registration Form HTML Login Form HTML Attributes HTML Tutorial PDF HTML Formatting HTML Styles HTML Quotations HTML Iframes HTML Images

HTML 5 Tutorial

HTML Interview Questions

No Sidebar ads