p09.html

	Previous Contents Next
9. Linking Pages

One of the defining characteristics of the World Wide Web is the availability of hypertext links. These links provide the ability to roam from a web page on your desktop computer to another page virtually anywhere in the world, all with the click of the mouse. This is one of the reasons for referring to the linkages as a "web" rather than as simply a network of computers and documents. The accessibility entangles you in an interconnected web of information and entertainment resources which grows daily and from which--with its intrigue and value--it is often times difficult to extract yourself. The power of the web, though, is at your discretion and at your fingertips, both as a user and an author, thanks to the convenience and power of hypertext links.

Linking to External Sites

Setting up links to the World Wide Web is quite simple. The basic link is between a word or phrase in your document and a page somewhere else in the world. (Amazing, isn't it!) The word or phrase is marked to indicate that it is a link to somewhere; and when the user clicks on this "hot spot," transfer is made to that page. Therefore, the HTML code needed to accomplish this task is simply to identify the hot spot and name the link.

Hypertext links are provided with the <A> (anchor) tag. Its general format is

where HREF (hypertext reference) gives the location of the page to which to link, and text is the word or phrase in the current document that will be clickable to activate the link. The anchor tag, therefore, surrounds the text to be used as the hypertext link. Usually the text is descriptive of the site to be visited. When displayed in the browser, this clickable text is usually rendered in a special color (normally blue) and it is underlined. There are no particular restrictions on which text can be used as a link: plain text, headings, list items, text with formatting codes, all can have hypertext links attached.

Before you establish a link, though, you will need to know your destination's URL location. All Web sites have unique Universal Resource Locator addresses. These are the funny looking names that show up in your browser's address, or location, window and take the general form:

http://www.who.what/where

The "www" portion indicates that this is a World Wide Web site, the "who" portion denotes the name of the site, the "what" portion signifies the type of site (com = commercial, edu = educational, gov = governmental, etc.), and the "where" portion identifies where at the site the particular page is located.

To get the exact address of the site to which you want to link, get on the Web and go to that site and the particular page. Then note the full URL address that appears in your browser's location window. This is the location you'll need to put into your <A HREF= > tag to link to that page.

Let's say you want to establish a link on your page to the Netscape intranet solutions page at Netscape communications. This page is shown in Figure 9-1. When you visit this page, note the address shown in the browser's location window. This is the address you use in your anchor tag:

Note the linked text above: "Netscape intranet solutions page". This is the text that has been marked to provide the link just discussed. It is no more difficult than that. Later, on this page, you will learn how to associate links with graphic images.

Figure 9-1. Opening page at Netscape Communications' intranet solutions site.

Linking to Local Documents

When you develop your own web site you will likely have more than a single page. If so, you will need to be able to link to them so the viewer can visit all the pages.

You will notice that at the top and bottom of this page there are hypertext links from the words Previous, Contents, and Next, each to a different page in this web. Taking the first of these links--to the previous page--as an example, the HTML is

<A HREF="p08.html">Previous</A>

The word "Previous" is used as the anchor text for the link and "p08.html" is the URL--the name of the HTML document (the previous page) to which a jump is made when the user clicks the anchor text. Here, the location designation is simple because the document is located in the same directory as the page on which the link appears. This will normally be the case for all your web pages. So, you will only need to provide the name of the link-to document--not its full WWW address.

Before beginning to establish links among your documents, give careful thought to the need for and the ramifications of such links. It can be as frustrating for the user to have to deal with an overabundance of unnecessary links as it is with a shortage of needed links. Don't, therefore, make links just because it's fun and easy to do so. At the one extreme, don't leave the user dangling at the end of a series of links with no way to return; at the other extreme, don't make the user wander in a perpetual cycle of links that have no apparent end. Basically, give consideration to how the user is likely to browse the web site or how you would prefer the site to be viewed. Then use a minimum number of obvious links to accomplish that purpose.

Locating Documents

It should be noted that the example given above assumes that all the HTML documents that are linked together appear in the same directory on your computer's hard drive. For simple webs with a moderate number of documents this will probably be the case. As webs become more complex, however, you may have the need to arrange your documents within multiple subdirectories in a hierarchical structure. In this case, the HREF reference to a particular document much indicate the directory structure.

Still, it is relatively easy to make a link to a document in a different directory. If the document you wish to link to resides in a subdirectory of the directory containing your current document, simply append the subdirectory name and a slash (/) to the front of the document name:

That is, go down one directory level to find the document. Use as many subdirectory/ prefixes as necessary to reach the level of the document.

On the other hand, if your link-to document resides in a higher-level directory from your current directory, append "../" as a prefix to the document name:

That is, go up one directory level to find the document. In general, use as many parent directory (../) references as necessary to reach the higher-level directory.

In complex cases you may need to go up and over and down to reach a document. Still, just follow the directory structure to reach it:

That is, go up three directory levels and then down two levels to find the document. Since all directory structures are tree-like structures, it should be no great problem to manuever to the proper directory containing the link-to document. Still, you might give pause before overly complicating your directory structure.

Linking Inside Documents

The basic link described above links to a particular document; when accessed, the document is displayed starting at the top of the page. In certain cases you may want to provide links to points within documents rather than to their top. For example, with a long page you might want to provide the ability for the user to jump to specific sections on the page rather than having to scroll through it. To see the effect, click on Linking to Local Documents to jump directly to the previous section of this page dealing with local links (then scroll back down to here).

Establishing these links is a two-step process. Assuming you want to create these links on a single page:

First, label the section to which you want to provide the link. Often this is a section heading, although it doesn't have to be. The location is labeled by assigning a name to a string of text on the line you want to link to. This name is given in the NAME parameter of the <A> anchor tag surrounding the string of text to be marked. In the previous example, the heading "Linking to Local Documents" that appears near the top of this page can be assigned the name "label1" in this fashion:

<A NAME="label1"><H3>Linking to Local Documents</H3></A>

Here the anchor tag surrounds the entire heading specification, although it doesn't need to. The name assigned can be any name but must be unique within the page.

Second, include an anchor tag at the location from which you want to link. If you want to link from here, then use an <A> tag to make the text clickable:

...want to link from <A HREF="#label1">here</A>, then use...

Note that HREF specifies the name you previously assigned to the location in the document to which you want to link. This name is preceded by the # sign in the HREF parameter.

You can also provide links to labels you establish on other pages. In these cases simply prefix the label name in the HREF parameter with the name of the document on which the label appears. For example,

Receiving Mail

You can permit others to contact you through your Internet e-mail by using a variation on the anchor tag. Instead of an "http://" address use a "mailto:" address

<A HREF="mailto:me@email.address">Please send mail!</A>

When the viewer of your page clicks on the link (Please send mail!), their e-mail program activates and prepares for a message to be sent to the specified address. The mailto: anchor is a common component of the ADDRESS section of a Web document.

Linking with Graphics

Using a clickable image to anchor a link is not much different from using text. The <IMG> tag used to identify and locate the graphic image is placed inside the <A> tag that anchors the link. For example, the NASCAR On-line logo to the right has been set up as a clickable link to the site www.nascar.com with the following specification:

Note that when an image is made clickable it is surrounded by a border, in the same sense that clickable text is underlined. If you wish, you can use a BORDER=0 parameter in the <IMG> tag to remove the border.

Often times small, "thumbnail" images are used as anchors for links to much larger renderings of the same picture. The reason for doing this is to reduce the amount of time needed to load a page, over the time it would take if multiple full-scale images were downloaded. The user can choose whether or not to view the large picture. In this example, the original 5-inch wide photo (14KB) was reduced to a 1-inch wide thumbnail (2KB) and used for the anchor image. The original image was placed on a page by itself.

Notice also that the thumbnail is surrounded by a blank border and additional blank space to separate it from the text on its right. This was done with the tag:

The BORDER parameter was set to 0 pixels so the picture, since it is an anchor image, would not have a colored border around it. Plus, additional space between the image and the text is done with the HSPACE and VSPACE parameters. HSPACE gives the number of pixels of horizontal space to the left and right of the image; VSPACE gives the number of pixels of vertical space to the top and bottom of the image (in addition to any border pixels). Using these parameters, a picture can still serve as a link and be offset from surrounding text, but without the colored border. Don't forget: the IMG tag shown above is still surrounded by an anchor tag to make the link.

If you tried this link you should have noticed that on return to this page you ended up at about the same position on the page as when you left. This is because a named target link was assigned to the "Linking with Graphics" heading on this section. The link from the other page was back to this named target.

Images Within Lists

Small images (icons) can be used in place of bullets or numbers in lists and made clickable. Use a definition list (DL) structure with the definitions (DD) preceded by a small image that has an anchor attached to it:

Here is a clickable list:

First item

Second item

Third item

The above list was created with the code:

<DL><B>Here is a clickable list:</B>
<DD><A HREF="target1.html"><IMG SRC="ball.gif" BORDER=0> First item</A>
<DD><A HREF="target2.html"><IMG SRC="ball.gif" BORDER=0> Second item</A>
<DD><A HREF="target3.html"><IMG SRC="ball.gif" BORDER=0> Third item in</A>
</DL>

Note that the <IMG> tag and the text are both enclosed within the <A HREF> tag so that a link is provided by either the image or the text. Also, even thought this is a definition list, the definition term <DT> is not being used.

Menu Bars

A variation on the use of images as "hot links" is the menu bar. As shown below, a series of images placed side by side across a line--each image made clickable with a link to an appropriate target page--puts in one place the major links from the page. Often, the menu bar is common to all pages in the web to provide an overall navigation structure. It is also a good idea to provide text links in addition to a menu bar for browsers that operate in text mode.

Previous Page Contents Next Page

A general format for producing the menu bar and text links shown above is:

<CENTER>
<A HREF="link1.html"><IMG SRC="image1.gif"></A>
<A HREF="link2.html"><IMG SRC="image2.gif"></A>
<A HREF="link3.html"><IMG SRC="image3.gif"></A>
<P>
<A HREF="link1.html">Previous Page</A>
<A HREF="link2.html">Contents</A>
<A HREF="link3.html">Next Page</A>
</CENTER>

Don't run off now...things are starting to hop.

Previous Contents Next