Lab 5 • Tables • <TABLE> Attributes • <TR> Attributes • Image Map
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Lab 5• Tables
• <TABLE> Attributes• <TR> Attributes
• Image Map
Tables
Tables are defined with the <table> tag.
A table is divided into rows with the <tr> tag.
Each row is divided into data cells with the <td> tag.
<TABLE><TR>
<TD> Data < /TD><TD> Data < /TD>
< /TR>
<TR><TD> Data < /TD><TD> Data < /TD>
< /TR>
< /TABLE>
First Row
Second Row
2 colom
2 colom
Table Attributes
BORDER <TABLE BORDER="5">
WIDTH <TABLE WIDTH="600">
HEIGHT <TABLE HEIGHT="500">
CELLSPACING <TABLE CELLSPACING="10">
CELLPADDING <TABLE CELLPADDING="10">
ALIGN <TABLE ALIGN="Left"><TABLE ALIGN="Right">
BGCOLOR <TABLE BGCOLOR="#00FFFF">
< CAPTION> ... < / CAPTION>
<TR> Attributes
ALIGN <TR ALIGN="Left">"Right">
VALIGN <TR VALIGN="Top">"Bottom""Baseline"
BGCOLOR <TR BGCOLOR="#808080">
WIDTH , HEIGHT, BGCOLOR
COLSPAN , ROWSPAN
COLSPAN
ROWSPAN
IMAGE MAPS
What is an Image Map?
An image map is a way of defining "hot spot" links within an image on a Web page.
This means that, rather than having the whole image behave as one link, you can have different links within the one image.
(Example)
Creating an image map
Creating an image map involves using the 1
1. <img>2. <map>3. <area> tags.
1- The img
1. The <img> tag:
To associate an image map with an image, we simply add the usemap attribute to the standard <img> tag for the image
<img src="images.jpg" usemap="#MyMap">
2- The map Element
The map itself is defined using the <map></map> tag.
The <map> tag attributes: Attribute name = "value"
Identifies the image map
<map name = "MyMap"> ...</map>
3- The area Element
The hot spots within the map are defined using the <area></area> tag.
The area element is nested within the map element.
It’s used to tell the browser where the hot spots are in the image, and what the hot spots need to link to.
<map name = "MyMap"> <AREA><AREA><AREA ></map>
The area Element Attributes
Attribute shape = "value" Specifies the shape of the area, Possible values:
▪ rect , circle ,poly
Attribute coords="area-coordinates" Specifies the coordinates that define the corners of the
shape.
<MAP NAME=“MyMap">
<AREA SHAPE="poly"> <AREA SHAPE="rect"> <AREA SHAPE="circle">
< /MAP>
Shape
The area Element Attributes
Shape
Coordinates Description
rect coords="x1,y1,x2,y2" The top left and bottom right corners of the rectangle
circle coords="x,y,r" The centre and radius of the circle
poly coords="x1,y1,x2,y2,x3,y3,..."
The corners of the polygon
<map name = "MyMap">
<area shape="rect" coords="0,0,82,126" alt="Sun">
<area shape="circle" coords="90,58,3" alt="Mercury">
<area shape="circle" coords="124,58,8" alt="Venus“>
</map>
HREF
<map name = "MyMap">
<area shape="rect" coords="0,0,82,126" alt="Sun"href="sun.html">
<area shape="circle" coords="90,58,3" alt="Mercury"href="mercur.html">
<area shape="circle" coords="124,58,8" alt="Venus"href="venus.html">
</map>
Example<body><img src="shapes.jpg" usemap="#MyMap"><map name="MyMap">
<area shape="circle" coords="58,50,40" href=“.......htm"alt="Circle" >
<area shape="rect" coords="136,11,227,89" href=“.........htm"alt="Rectangle" >
<area shape="poly" coords="309,13,358,89,257,89" href=“.........htm"alt="Triangle" >
</map></body>
Example
Related Documents
![>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.](https://static.cupdf.com/doc/110x72/56649e7e5503460f94b810e8/-introduction-to-html-tables-html-is-used-to-give-websites-structure-5.jpg)
