Advertisements
HTML Images
Image Tag <img attributes />
HTML enables to display images/picture in a document. Images make the web page look so good.
HTML enables to display images/picture in a document. Images make the web page look so good.
The image tag is written as <img>. This is used to display an image in an HTML
document. The image tag is a singular tag, which means it need not be closed as
</img>. But, the latest version of HTML does not support this. In
the latest version, the image tag is to be closed by putting a (/)
backslash, e.g. <img/>.Attributes of <img> Tag
Src
Src is the source attribute. It indicates the location or the path of the picture to be displayed on the web page.
Syntax:
<img
src="c:\images\image_name.jpg" />
Alt
Alt is an attribute, which displays an alternative text if the picture is not displayed on the web browser.
Syntax:
Alt
Alt is an attribute, which displays an alternative text if the picture is not displayed on the web browser.
Syntax:
<img
src="c:\images\image_name.jpg alt="this is my image” />
Width
The width attribute determines how wide the picture is to appear on the web page.
Syntax:
Width
The width attribute determines how wide the picture is to appear on the web page.
Syntax:
<img src="c:\images\image_name.jpg"
alt="this is my image” width="105" />
Height
The height attribute determines the height of the picture that has to appear on the web page.
Syntax:
<img src="c:\images\image_name.jpg" alt="this is my image" height="100" />
Align
Align attribute sets the alignment or the position of the picture in relation to the text around it.
Syntax:
<img src="c:\images\image_name.jpg" alt="this is my image" align=left />
Border
The border attribute sets a border around the images. A border value greater than 0 puts a border around the image.
The height attribute determines the height of the picture that has to appear on the web page.
Syntax:
<img src="c:\images\image_name.jpg" alt="this is my image" height="100" />
Align
Align attribute sets the alignment or the position of the picture in relation to the text around it.
Syntax:
<img src="c:\images\image_name.jpg" alt="this is my image" align=left />
Border
The border attribute sets a border around the images. A border value greater than 0 puts a border around the image.
Syntax:
<img
src="c:\images\myimage.jpg" alt="this is my image"
align="left" border="2"/>
Area Tag
The area tag defines a region in an image map. This tag includes various attributes as it cannot function alone. It requires the href attribute to link to other documents.
Syntax:
<area attributes></area>
Href
The href tag indicates the URL that the tags links to. The syntax of this tag is similar to the anchor tag.
Syntax:
The area tag defines a region in an image map. This tag includes various attributes as it cannot function alone. It requires the href attribute to link to other documents.
Syntax:
<area attributes></area>
Href
The href tag indicates the URL that the tags links to. The syntax of this tag is similar to the anchor tag.
Syntax:
<area
href="image1.jpg" ></area>
Alt
The alt attribute in the <area> tags works just like it works in the <img> tags. It indicates the alternative text that is to be displayed if the browser does not display the picture.
Syntax:
<area href="image1.jpg" alt="my image" > </area>
Shape
The shape attributes indicate what shape the area is. The shape of the map must be set to the following values:
Rect
Rectangular shape indicates that the area is a rectangle. The cords attribute consists of two pair of x/y coordinates for a rectangle. The first pair sets the coordinates of the upper left corner of rectangle. The second pair sets the coordinates of the lower right corner of the rectangle.
Syntax:
<area href="image_name.jpg" alt="my image" shape="rect" cords="6,116,97,44" > </area>
Circle
Circle shape indicates that the area is a circle. The first two numbers in the cords attribute indicate the coordinates of the centre of the circle. The next number indicates the radius of the circle.
Syntax:
<area href="image_name.jpg" alt="my image" shape="circle" cords="60,40, 44" > </area>
Poly
Poly shape indicates that the area is some type of polygon. For a polygon each pair of coordinate in cords indicates the single corner of the polygon.
Syntax:
<area href="image1.jpg" alt="my image" shape="poly" cords="150,217, 190,257, 150,297, 110,257" > </area>
Default
Default indicates that the area isn’t really a shape but the href attribute applies to the whole area. In this attribute coordinates are not given.
Syntax:
<area href="image_name.jpg" alt="my image" shape="default" > </area>
Alt
The alt attribute in the <area> tags works just like it works in the <img> tags. It indicates the alternative text that is to be displayed if the browser does not display the picture.
Syntax:
<area href="image1.jpg" alt="my image" > </area>
Shape
The shape attributes indicate what shape the area is. The shape of the map must be set to the following values:
Rect
Rectangular shape indicates that the area is a rectangle. The cords attribute consists of two pair of x/y coordinates for a rectangle. The first pair sets the coordinates of the upper left corner of rectangle. The second pair sets the coordinates of the lower right corner of the rectangle.
Syntax:
<area href="image_name.jpg" alt="my image" shape="rect" cords="6,116,97,44" > </area>
Circle
Circle shape indicates that the area is a circle. The first two numbers in the cords attribute indicate the coordinates of the centre of the circle. The next number indicates the radius of the circle.
Syntax:
<area href="image_name.jpg" alt="my image" shape="circle" cords="60,40, 44" > </area>
Poly
Poly shape indicates that the area is some type of polygon. For a polygon each pair of coordinate in cords indicates the single corner of the polygon.
Syntax:
<area href="image1.jpg" alt="my image" shape="poly" cords="150,217, 190,257, 150,297, 110,257" > </area>
Default
Default indicates that the area isn’t really a shape but the href attribute applies to the whole area. In this attribute coordinates are not given.
Syntax:
<area href="image_name.jpg" alt="my image" shape="default" > </area>
Download Link
Advertisements
Our Social Link