HTML Images:

The <img> Tag:

There is only one tag used for adding images to our webpage. The tag is <img>. It is an empty tag which means it needs not to be closed. Out of many attributes, ‘src’ is used essentially with this tag since without ‘src’, <img> is of no use.

Syntax:

Example:

  <html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<img src="images/file1.jpg">
	</body>
  </html>

Output:

NOTE: While writing ‘src’ to the <img> tag, it must be kept in mind that the path can be of two types- absolute and relative.

Absolute path is given when the image is not in the same folder where the webpage is kept.
Relative path is given when the image is in same folder where the webpage is kept.

Here in this image, the path is relative. Absolute paths start with the root directory like- d:\abc\images\file1.jpg

<img> tag is used with following five attributes:

Height and Width
Border
Title
Alt

Height and Width: These are used to specify the height and width of the image. Though it does not change the properties of the image. It's just to show the image in that particular dimension. Here, it must be kept in mind that a number value as width keeps te width fixed while a percentage value as width makes the image responsive.

Syntax:

  <html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<img src="../img/scene.jpg" height="240" width="320">
		<br><br>
		<img src="../img/scene.jpg"width="40%">
	</body>
  </html>

Output: [Decrease the size of your browser to see the responsivenes in the second image]

Border: It is used to specify the width of border (in pixels). A ‘0’ means no border.

Syntax:

  <html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<img src="../img/scene.jpg" height="240" width="320" border="2">
	</body>
  </html>

Output:

Title: This attribute is used to specify a title for the image on mouse hover.

Syntax:

  <html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<img src="../img/scene.jpg" height="240" width="320" border="2" title="Manali, Himachal Pradesh">
	</body>
  </html>

Output:

Alt: It is used to specify an alternate text when image is not loaded.

Syntax:

  <html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<img src="img/scene.jpg" height="240" width="320" border="2" alt="Manali, Himachal Pradesh">
	</body>
  </html>

Output: