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