ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
FAQ
Login
 
XHTML Tutorial - Index
XHTML Tutorial - Introduction to XHTML
XHTML Tutorial - Formatting
XHTML Tutorial - Links
XHTML Tutorial - Images
XHTML Tutorial - Forms
XHTML Tutorial - Tables
XHTML Tutorial - Frames
XHTML Tutorial - Style Sheets
XHTML Tutorial - Advanced Tags
     

 
Online Personal Trainer Certification
Personal Trainer Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management Certification
Six Sigma Certification
Six Sigma Black Belt Certification
Master Black Belt Certification
Six Sigma Green Belt Certification
Life Coach Certification
Lean Management Certification
Lean Six Sigma Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification
Business Analyst Certification
SEO Certification
Online Business Writing Course & Certification
Makeup Artist Certification
Baby Sitting Course & Certification
Time Management Certification
Health Club Management Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management Certification
Kaizen Certification
Creative Writing Certification
Event Management Certification
Test Search by Job Title
Administrative Assistant Certification
Virtual Assistant Certification
  All Online Courses
   

   
   
   
   
   
   

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

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
<area href=”image1.jpg” alt=”my image” />
 

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

<area href=”image1.jpg” alt=”my image” coords=”6,116,97,44”/ >

 

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
<area href=”image1.jpg” alt=”my image” shape=rect cords=”6,116,97,44” />
 

  • 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
<area href=”image1.jpg” alt=”my image” shape=circle cords=”60,40, 44” />
 

  • 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
<area href=”image1.jpg” alt=”my image” shape=poly cords=”150,217, 190,257, 150,297, 110,257” / >
 
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.

 
     

 

 
     
Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
 
© ExpertRating 2015. All Rights Reserved.