Expertrating - XHTML Tutorial,Images

Home > Courses, Tutorials & eBooks > XHTML Tutorial > Images

XHTML Tutorial - Images

Page 2 of 2

Area Tag

The area tag defines a region in an image map. This tag has to include various attributes, as it cannot work alone. It requires the href attribute to link to another document.

In XHTML the area tag should be properly closed. It is done so putting a (/) backslash after the word area, i.e. <area/>.

Example

<area attributes/>

Attributes of Area Tag

Href

Href tag indicates the URL, which the <area> tag links to. It is used in a similar way as the anchor tag.

Example

<area href=”image1.jpg” />

Alt

The alt attribute in the <area> tag works just like it works in the <img> tag. It indicates the alternative text that is to be displayed if the browser does not display the picture.

Example

Coords

The cords attribute is the coordinate attribute. This tag is used with the shape attribute (the shape attribute has been described later). It specifies the coordinates of the area that has to be clicked and indicates where the shape is located in the image map. The Coords tag is necessary when the shape attribute is set to Rect, Circle or Poly. It is not used if the shape is set to Default.

Example

Shape

The shape attribute indicates what type of shape the area is. The shape of the map must be set to the following values:

Rect

Rect indicates that the area is a rectangle. For a rectangle, the cords attribute consists of two pair of x/y coordinates. 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 rectangle.

Example

Circle

Circle indicates that the area is a circle. For a circle, the first two numbers in cords attribute indicate the coordinates of the centre of the circle. The last number indicates the radius of the circle.

Example

Poly

Poly indicates that the area is a type of polygon. For a polygon, each pair of coordinate in cords indicates the single corner of the polygon.

Example

Summary

In this chapter you have learnt:

The image tag is used to display an image in an XHTML document.
Src is the source attribute of the image tag. It indicates the location or the path of the picture to be displayed on the web page.
The align attribute sets the alignment or the position of the picture in relation to the text around it.
Mapped image contains some regions that act as links to other documents.
The area tag defines a region in an image map. The href tag indicates the URL that the <area> tags links to.
The shape attribute in an image map indicates what shape the area is.

Review Questions

Question 1

Which tag is used to display an image in an HTML document?

Answer

Image Tag

Question 2

Which is the most important attribute of image tag?

Answer

Src attribute

Question 3

Which attribute is used to display an alternative text if the picture is not displayed on the web browser?

Answer

Alt attribute

Question 4

What is a mapped image?

Answer

It’s an image which contains some regions that act as links to other documents.

Question 5

Which tag defines a region in an image map?

Answer

Area Tag

What's Next

The next chapter will acquaint you with the basic concept of forms in a web page. It will further illustrate how to make different types of forms that collect information from the user.

Hop over to the next chapter to get a close up on forms.

ExpertRating XHTML Certification - Get Certified Now!!