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

Attributes:

The <A> tag can take a host of attributes, including

•  ACCESSKEY—An access key is a shortcut key a reader can use to activate the hyperlink. If you set the access key to the letter “C”, for example, Windows users can press Alt+C on their keyboards to activate the link.

•  CHARSET—Denotes what character encoding to use for the linked document.

•  HREF—Gives the URL of the Web resource to which the hyperlink should point.

•  HREFLANG—Denotes the language context of the linked resource.

•  NAME—Specifies the name of the anchor being set up.

•  REL—Describes the nature of the forward link (see Table 3.3 for possible values).

•  REV—Describes the nature of the reverse link (see Table 3.3 for possible values).

•  TABINDEX—Specifies the link’s position in the document’s tabbing order.

•  TARGET—Tells the browser into which frame the linked document should be loaded.

•  TYPE—Specifies the MIME type of the linked resource.

Examples:

The following code sets up a simple hyperlink:

You can learn more about our
<A HREF=”prodserv.html TARGET=”main” ACCESSKEY=”P”>
products and services</A> as well.

To follow the link, a user can click the hypertext products and services or press Alt+P (on a Windows machine) or Cmd+P (on a Macintosh).

This code establishes a named anchor within a document:

...
<A NAME=”toc”>
<H1>Table of Contents</H1>
</A>
...

With the anchor set up, you can point a hyperlink to it by using code such as this:

<A HREF=”index.html#toc”>Back to the Table of Contents</A>

Image and Imagemap Tags

Without images, the Web would just be another version of Gopher. Web graphics give pages powerful visual appeal and often add significantly to the messages that authors are trying to convey.

Placing an image on a page is as simple as using the HTML <IMG> tag. In its most basic form, the <IMG> tag needs only one attribute to do its job. However, <IMG> supports as many as 10 attributes that you can use to modify how the image is presented.

• See “Advanced Graphics,” p. 155.

<IMG>

Type:

Standalone

Function:

Places an inline image into a document (see Figure 3.15).

FIGURE 3.15  Pictures, logos, and other graphical effects are placed into a document using the <IMG> tag.

Syntax:

<IMG SRC=”URL_of_image_file”
  WIDTH=”width_in_pixels” HEIGHT=”height_in_pixels”
  ALT=”text_description” BORDER=”thickness_in_pixels”
  ALIGN=”TOP|MIDDLE|BOTTOM|LEFT|RIGHT”
  HSPACE=”horizontal_spacing_in_pixels”
  VSAPCE=”vertical_spacing_in_pixels”
  LONGDESC=”URL_of_long_description”
  ISMAP USEMAP=”map_name”>

Attributes:

As you can see from the tag’s syntax, <IMG> can take several attributes (each attribute is described in detail in this section):

•  SRC—Specifies the URL of the file containing the image.

•  WIDTH and HEIGHT—Gives the width and height of the image in pixels. Specifying this information in the tag means that the browser can allot space for the image and then continue laying out the page while the image file loads.

•  ALT—A text-based description of the image content. Using ALT is an important courtesy to users with nonvisual browsers or with image loading turned off.

•  BORDER—Controls the thickness of the border around an image. An image has no border by default. However, a hyperlinked image will be rendered with a colored border. If you don’t want the border to appear around your image, you need to set BORDER=0.

•  ALIGN—Controls how text flows around the image. TOP, MIDDLE, and BOTTOM alignment aligns text following the image with the top, middle, or bottom of the image, respectively. However, after the text reaches the end of the current line, it will break to a position below the image. If you want text to wrap around the entire image, you need to use the LEFT or RIGHT values of the ALIGN attribute to float the image in the left or right margin. Text will wrap smoothly around a floated image.

•  HSPACE and VSPACE—Controls the amount of whitespace left around the image. HSPACE is set to the number of whitespace pixels to use on the left and right sides of the image. VSPACE controls the number of whitespace pixels remaining above and below the image.

•  LONGDESC—Points to a resource that contains a longer description of the image’s content.

•  ISMAP—Identifies the image as being used as part of a server-side imagemap.

•  USEMAP—Set equal to the name of the client-side imagemap to be used with the image.

Example:

<IMG SRC=”/images/logo.gif” WIDTH=600 HEIGHT=120
  ALT=”Welcome to XYZ Corporation” USEMAP=”#main”
  VSPACE=10>

One popular use of images is to set up imagemaps—clickable images that take users to different URLs, depending on where they click. Imagemaps are popular page elements on many sites because they provide users with an easy-to-use graphical interface for navigating the site (see Figure 3.16).

Imagemaps come in two flavors: server-side and client-side. When a user clicks a server-side imagemap, the coordinates of the click are sent to the server, where a program processes them to determine which URL the browser should load. To accomplish this, the server needs to have access to a file containing information about which regions on the image are clickable and with which URLs those regions should be paired.

With client-side imagemaps, the client (browser) processes the coordinates of the user’s click, rather than passing them to the server for processing. This is a more efficient approach because it reduces the computational load on the server and eliminates the opening and closing of additional HTTP connections. For the browser to be able to process a user’s click, it has to have access to the same information about the clickable regions and their associated URLs as the server does when processing a server-side imagemap. The method of choice for getting this information to the client is to pass it in an HTML file—usually the file that contains the document with the imagemap, although it does not necessarily have to be this way. HTML 4.0 supports two tags that enable you to store imagemap data in your HTML files: <MAP> and <AREA>. A discussion of these tags rounds out the coverage in this section.

• See “Imagemaps,” p. 137.

FIGURE 3.16  Imagemaps are commonly used as navigation interfaces and are usually accompanied by an equivalent set of hypertext links.