Scribd
Upload
38 views

Image Tags

The document discusses different image tags like <img>, <map>, <area> and <svg> in HTML. It explains the attributes of each tag and provides examples of using image tags to embed images on a page and create image maps with clickable areas.

Uploaded by

Rajneesh raj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
38 views

Image Tags

The document discusses different image tags like <img>, <map>, <area> and <svg> in HTML. It explains the attributes of each tag and provides examples of using image tags to embed images on a page and create image maps with clickable areas.

Uploaded by

Rajneesh raj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

venkatesh.mansani@yahoo.

com Naresh i Technologies

image tags
Image Tags:
1) <img> => It is used to embed an image in an html page.
2) <map> ... <map> => It is used to define an image map. An image map
is an image with clickable areas.
3) <area> => It is used to define an area inside an image map.
4) <svg> … </svg> => It is used to define a container for SVG(Scalable
Vector Graphics). It allows to draw circle, rectangle, square, .. etc.,

Attributes of <img> tag:


1) src="..." => It is used to specify the path of an image.
2) width="..." => It is used to specify the width of an image.
3) height="..." => It is used to specify the height of an image.
4) alt="..." => It is used to specify the alternate text for an image. If the
browowser is unable to load an image then the specified text displayed.
5) usemap="..." => It is used to specify the map name. This value must
match with name attribute value in <map> tag.

Attributes of <map> tag:


1) name="..." => It is used to specify the name of map. This value must
match with usemap attribute value in <img> tag.

Attributes of <area> tag:


1) alt="..." => It is used to specify the alternate text for an image.
2) coords="..." => It is used to specify the coordinates of the area.

Java By Venkatesh Mansani venkatesh.mansani@yahoo.com


venkatesh.mansani@yahoo.com Naresh i Technologies

3) href="..." => It is used to specify the path of an image.


4) shape="..." => It is used to specify the shape of the area.

Example1:
<html>
<body>
<img src="d:/roses&teddy.jpg" usemap="#demo" width="400"
height="400">
<map name="demo">
<area shape="rect" coords="50,250,100,100" href="d:/roses.avif">
<area shape="rect" coords="300,300,100,100" href="d:/teddy.webp">
</map>
</body>
</html>

Example2:
<html>
<body>
<a href="c:/flowers.jpg"><img src="c:/flowers.jpg" width=100
height=100 hspace=100 vspace=100></a>
<a href="c:/teddy.jpg"><img src="c:/teddy.jpg" width=100 height=100
hspace=100 vspace=100></a>
<a href="c:/roses.jpg"><img src="c:/roses.jpg" width=100
height=100></a>
</body>

Java By Venkatesh Mansani venkatesh.mansani@yahoo.com


venkatesh.mansani@yahoo.com Naresh i Technologies

</html>

Example3:
<html>
<body>
<svg width="800" height="600">
<circle cx="100" cy="100" r="50" stroke="red" stroke-width="5"
fill="yellow"></circle>
<rect x="200" y="50" width="200" height="100" stroke="red"
stroke-width="5" fill="yellow"></rect>
<text x="220" y="80" fill="red">India</text>
<rect x="500" y="50" width="100" height="100" rx="20" ry="20"
stroke="red" stroke-width="5" fill="yellow"></rect>
</svg>
</body>
</html>

By

Mr. Venkatesh Mansani


Naresh i Technologies

Java By Venkatesh Mansani venkatesh.mansani@yahoo.com

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy