HTML Image Height Width Alt Alignments Border Attributes
Our HTML tutorial material is developed for beginners to Master Level Programmer up to project level. In our tutorial, each and every topic is given step-by-step so that you can learn it in a very easy way. You need not to search for more information.
CHAPTER – 3
HTML IMG(IMAGE)
The HTML IMG tag is used to insert image in the web page. The image is not technically insert but link of that image is given to web page. HTML img tag is an empty tag that contains attributes only. Empty means that it has no text content or closing tag are not used in HTML image element.
All attributes of HTML image tag are given below.
1) src
It is a main attribute that describes the source or path of the image. It instruction to browser where to look for the image on the server. The location of image may be on the same directory or another server location.
2) alt
The alt attribute defines an alternate text for the image., if the image can not be displayed due to wrong file name or extension, The text written(image discretion ) in the alt attribute will be displayed.
3) width
It is an optional attribute which is used to specify the width to display the image. It is not recommended now. But as per requirement of the web page where image is to insert matter that width will be reduce or to increase.
4) height
It is an optional attribute like width which is used to specify the width to display the image. It is not recommended now. But as per requirement of the web page where image is to insert matter that height will be reduce or to increase.
Note: If width or height is not given to image ,it will display in normal size as image is.
The image file formats that are most commonly used on the web are:
· APNG (Animated Portable Network Graphics)
· AVIF (AV1 Image File Format)
· GIF (Graphics Interchange Format)
· JPEG (Joint Photographic Expert Group image)
· PNG (Portable Network).
· SVG (Scalable Vector Graphics)
· WebP (Web Picture format)
Note: The image you want to insert in the web page these image file extension can be used.
Write the html code :
<html>
<head>
<title>Image Demo</title>
</head>
<body bgcolor="pink">
<div align="left">
<img src="advertise.jpg" height=20% width=20% border=3 alt="Aastha information">
</div>
<div align="center">
<img src="advertise.jpg" height=20% width=20% border=3 alt="Aastha information">
</div>
<div align="right">
<img src="advertise.jpg" height=20% width=20% border=3 alt="Aastha information">
</div>
</body>
</html>
The output of the Html Code will be like this:
How to Apply Hyperlink Tag to a image
A Html or webpage can contain various links that take you directly to other pages. These links are known as hyperlinks. Hyperlinks allow user to navigate between Web sites by clicking on words and images. Thus you can create hyperlinks using text or images available on a webpage or Html Page.
A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part where link tag is applied to reach to the linked page.
To do this, we have to put tag like this :
<a href=”demo.html”><img src="advertise.jpg" height=20% width=20% border=3 alt="Aastha information"></a>
Note:
When you want to check the hyper link tag, place the mouse pointer in the hyper link area then you will notice that the mouse arrow sign will become a hand like sign. Now you can click on that area, after that browser will open the linked page.
Link Sign Look Like This :
Blog Disclaimer :
Post a Comment