HTML – Images
Html Images are the part of any web document which can be used in many ways like making any website or web document look better, visualize any data, image examples, categories images, wallpapers images, graphical images, etc.
The image tag is used to embed the image in Html Documents.
Image Tag
The image tag is an unpaired tag with attributes. Any Image can make a visual better of any data and it can be used anywhere inside the body tag and style it as required.
Below is an example of an Html Image Tag
<!DOCTYPE html> <html> <head> <title>MMI - HTML Tutorials</title> </head> <body> <h1>MMI-HTML Image Tag</h1> <hr> <img src="image_name.jpg" alt="Alternate text" width="100" height="100"> </body> </html>
Here the image tag is used with src (source), alt (alternate text), width & height attributes.
Src Attribute
It provides a source to the file type like image in this case and “image_name.jpg” is the value used for src. The src attribute also provides the path to the file and a link/URL also used as a source.
<!DOCTYPE html> <html> <head> <title>MMI - HTML Tutorials</title> </head> <body> <h1>MMI-HTML Image Tag</h1> <h2>MMI-HTML Image Tag - Src Attribute</h2> <hr> <img src="image_name.jpg" alt="Alternate text" width="100" height="100"> <hr> <!--one-level up dir--> <img src="../image_name.jpg" alt="Alternate text" width="100" height="100"> <hr> <!--two-level up dir--> <img src="../../image_name.jpg" alt="Alternate text" width="100" height="100"> <hr> <!--three-level up dir and inside image dir--> <img src="../../../image_dir/image_name.jpg" alt="Alternate text" width="100" height="100"> <hr> <!--link url-> <img src="http://image_dir/image_name.jpg" alt="Alternate text" width="100" height="100"> <hr> </body> </html>
Here atl is used for providing an alternative text to the image like when any used will hover on the image then it will show the alt text. Width and Height are used for size adjustment of the image. The width and height are the part of the styling of an image, if these attributes are not used in the image tag and it is not style with CSS the image will appear in its original size.
Image Style and Link
Image Style like used in the above example width & height also an image that can be used as a hyperlink in the document.
Below is an example of Image Inline Style
<!DOCTYPE html> <html> <head> <title>MMI - HTML Tutorials</title> </head> <body> <h2>HTML Image Tag</h2> <!--image with inline style---> <img src="image_name.jpg" alt="This is an Alternate text" style="width:250px;height:250px"> </body> </html>
Image as HyperLink
<!DOCTYPE html>
<html>
<head>
<title>MMI - HTML Tutorials</title>
</head>
<body>
<h2>HTML Image Tag</h2>
<!--image as hyper link--->
<a href="url">
<img src="image_name.jpg" alt="This is an Alternate text" style="width:250px;height:250px">
</a>
</body>
</html>
Image used for background Image
Image as Background Image can be set by using the CSS style with the “background-image” property.
Below is an example of a background image.
<!DOCTYPE html>
<html>
<head>
<title>MMI - HTML Tutorials</title>
</head>
<body>
<h2>HTML Image Tag</h2>
<!--image as a background image--->
<hr>
<div style="background-image: url('../image/a.jpg');width:500px;height:500px">
This is a background image with dummy text
<br>
This is a background image with dummy text
<br>
This is a background image with dummy text
<br>
This is a background image with dummy text
<br>
This is a background image with dummy text
<br>
This is a background image with dummy text
<br>
This is a background image with dummy text
<br>
This is a background image with dummy text
<br>
This is a background image with dummy text
<br>
This is a background image with dummy text
<br>
This is a background image with dummy text
<br>
This is a background image with dummy text
<br>
This is a background image with dummy text
<br>
This is a background image with dummy text
<br>
</div>
</body>
</html>
Here the background image is set for a div element and CSS with inline styling is used for the background image. Dummy text inside the div tag shows that the image is actually a background image of the div container.