HTML Image Tag
-
HTML <img /> tag is insert image into a web document.
-
HTML image path define/declare inside <img /> tag.
-
The <img /> tag is empty tag, that mean's no closing tag.
-
<img /> tag have some attributes are use for display image on web page.
-
The src attribute, src stands for "source", that is path of image URL.
-
Alt Attribute used to define an "alternate text" for an image. This specifies text to be identified in the image name.
-
Width and Height specifies the size of image to display on webpage.
Image Tag Attribute
Attributes | Values | Description |
---|---|---|
src | "image source url path" | Required, Image path should be absolute path. |
width | "size_px" | Specifies the Width to display the image. |
Height | "size_px" | Specifies the Height to display the image. |
Align | "left"
"right" |
Specifies the image align side. |
Border | "Size"
eg. "0" |
Specifies the image border size. |
alt | "alternate text" | Required Attribute. Specifies text to be identify the image. |
Example
<html>
<head>
</head>
<body>
<img src="images/img_nat.png" width="120" height="70" alt="natural" />
</body>
</html>
Image alignment (Right side)
Image can be align in left or right relative such as paragraphs text.
<html>
<head>
</head>
<body>
<img src="images/img_nat.png" width="120" height="80" alt="Natural" align="right"/>
<p>Natural resources (economically referred to as land or raw materials)
occur naturally within environments that exist relatively undisturbed
by mankind, in a natural form. A natural resource is often characterized
by amounts of biodiversity existent in various ecosystems.</p>
</body>
</html>
Image alignment (Left side)
<html>
<head>
</head>
<body>
<img src="images/img_nat.png" width="120" height="80" alt="Natural" align="left"/>
<p>Natural resources (economically referred to as land or raw materials)
occur naturally within environments that exist relatively undisturbed
by mankind, in a natural form. A natural resource is often characterized
by amounts of biodiversity existent in various ecosystems.</p>
</body>
</html>
Image alignment (Wrap around)
<html>
<head>
</head>
<body>
<img src="images/img_nat.png" width="120" height="80" alt="Natural" align="left"/>
<p>Natural resources (economically referred to as land or raw materials)
occur naturally within environments that exist relatively undisturbed
by mankind, in a natural form. A natural resource is often characterized
by amounts of biodiversity existent in various ecosystems. Natural
<br clear="all" />
resources are derived from the environment. Many of
them are essential for our survival while others are used for satisfying
our wants. Natural resources may be further classified in different ways.
</p>
</body>
</html>
Image Link
<html>
<head>
</head>
<body>
<a href="http://www.way2tutorial.com/html/tutorial.php">
<img src="images/img_nat.png" width="120" height="70" alt="Natural" />
</a>
</body>
</html>