Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

<MAP>

Type:

Container

Function:

Contains HTML tags that define the clickable regions (hot regions) of an imagemap.

Syntax:

<MAP NAME=”map_name”>
... hot region definitions go here ...
</MAP>

Attributes:

The NAME attribute gives the map information a unique name so it can be referenced by the USEMAP attribute in the <IMG> tag that places the imagemap graphic.

Example:

<MAP NAME=”navigation”>
<AREA SHAPE=”RECT” COORDS=”23,47,58,68" HREF=”search.html”>
<AREA SHAPE=”CIRCLE” COORDS=”120,246,150,246" HREF=”about.html”>
...
</MAP>

With the imagemap data defined by the map named navigation, you would reference the map in an <IMG> tag as follows:

<IMG SRC=”navigation.gif” USEMAP=”#navigation”>

If the map were stored in a file different from the document’s HTML file, you would reference it this way:

<IMG SRC=”navigation.gif” USEMAP=”maps.html#navigation”>

Related Tags:

The <AREA> tag is used to define the individual hot regions in the imagemap. The named map is referenced by the USEMAP attribute of the <IMG> tag.

<AREA>

Type:

Standalone

Function:

Defines a hot region in a client-side imagemap.

Syntax:

<AREA SHAPE=”RECT|CIRCLE|POLY|DEFAULT” COORDS=”coordinate_list”
  HREF=”URL_of_linked_document” TARGET=”frame_name”
  ALT=”text_alternative” TABINDEX=”tab_order_position” NOHREF
  ACCESSKEY=”key_letter”>

Attributes:

The <AREA> tag takes a number of attributes, including

•  ACCESSKEY—Defines a shortcut key combination that the user can press to activate the hot region (see the attribute listing for the <A> tag for more details).

•  ALT—Provides a text alternative for the hot region in the event that the image does not load or the user has image loading turned off. ALT text is also used by spoken-word browsers for the visually impaired.

•  COORDS—Specifies the coordinates that define the hot region. Coordinates are given as a list of numbers, separated by commas. No coordinates are needed when specifying a DEFAULT region.

•  HREF—Set equal to the URL of the document to associate with the hot region.

•  NOHREF—Using the NOHREF attribute in an <AREA> tag essentially deactivates the hot region by having it point to nothing.

•  SHAPE—Specifies the shape of the hot region being defined. Possible values of SHAPE include RECT for rectangles, CIRCLE for circles, POLY for polygons, and DEFAULT for any point on the image not part of another hot region.

•  TABINDEX—Defines the hot region’s position in the tabbing order of the page.

•  TARGET—Specifies into which frame to load the linked document.

---

NOTE:  Each type of hot region has a specific number of coordinate points that you need to specify to completely define the hot region. A rectangular region is defined by the coordinates of the upper-left and lower-right corners, a circular region by the coordinates of the center point and a point along the edge of the region, and a polygonal region by the coordinates of the polygon’s vertices.

---

Example:

<MAP NAME=”main”>
<AREA SHAPE=”POLY” COORDS=”35,80,168,99,92,145" HREF=”profile.html”>
<AREA SHAPE=”CIRCLE” COORDS=”288,306,288,334" HREF=”feedback.html”>
<AREA SHAPE=”DEFAULT” HREF=”index.html”>
</MAP>

Related Tags:

<AREA> tags are allowable only between <MAP> and </MAP> tags.

Table Tags

HTML table tags are not only a great way to present information, but a useful layout tool as well (see Figure 3.17). HTML 4.0 expands the table tags in several important ways:

•  Support for rendering parts of the frame around a table, rather than “all or nothing.”

•  Control over which boundaries to draw between cells.

•  Table header, body, and footer sections can be defined as separate entities.

FIGURE 3.17  Tables make complex page layouts possible because of the very fine alignment control you have within the table.

This section looks at all the table-related tags and their many attributes.

• See “Tables,” p. 183.

<TABLE>

Type:

Container

Function:

Contains all HTML tags that compose a table.

Syntax:

<TABLE ALIGN=”LEFT|CENTER|RIGHT” BORDER=”thickness_in_pixels”
  BGCOLOR=”color” WIDTH=”pixels_or_percentage_of_browser_width”
  COLS=”number_of_columns” CELLPADDING=”pixels” CELLSPACING=”pixels”
  FRAME=”outer_border_rendering” RULES=”inner_border_rendering”
  SUMMARY=”description_of_table_contents_and_structure”>
...
</TABLE>

Attributes:

The <TABLE> tag can take the following attributes to modify how the table is presented:

•  ALIGN—Controls how the table is aligned on the page. Possible values are LEFT, CENTER, and RIGHT. Tables that are left- or right-aligned will float in the margin, and text can wrap around them.The ALIGN attribute of the <TABLE> tag has been deprecated.

•  BORDER—Specifies the thickness of the table border in pixels.

•  BGCOLOR—Set equal to the background color to use in the cells of the table.

•  CELLPADDING—Controls the amount of whitespace between the contents of a cell and the edge of the cell.

•  CELLSPACING—Specifies how many pixels of space to leave between individual cells.

•  COLS—Set equal to the number of columns in the table. Knowing this value enables the browser to compose the table faster.

•  FRAME—Controls which parts of the table’s outer border are rendered. FRAME can take on the values shown in Table 3.4.