A Complete Guide to Web Design

134 Chapter 8 – Creating Links

Linking Within a Document

Web Design in a Nutshell, eMatter Edition

<A HREF="../index.html">

This relative URL is the equivalent to the absolute URLhttp://www.littlechair.com/

web/index.html.

Linking Within a Document

By default, when you link to a page, the browser displays the top of that page. To

aid in navigation, you can use the anchor tag to link to a specific point or section

within a document. This is a two-step process.

Naming a fragment

First, you need to identify and name the portion of the document (called a frag-

ment) that you want to link to. The fragment is marked using the anchor (<a>) tag

with itsnameattribute, giving the document fragment a name that can be refer-

enced from a link.

To illustrate, let’s set up a named fragment within a sample document called

dailynews.htmlso users can link directly to the Stock Quotes section of the page.

The following anchor tag marks the Stock Quotes title as a fragment named

“stocks.”

<A NAME="stocks">Daily Stock Quotes</A>

Linking to a fragment

The second step is to create a link to the fragment using a standard anchor tag

with itshrefattribute. Fragment identifiers are placed at the end of the pathname

and are preceded by the hash (#) symbol.

To link to the “stocks” fragment from withindailynews.html, the link would look

like this:

<A HREF="#stocks">Check out the Stock Quotes</A>

Linking to a fragment in another document

You can create a link to a named fragment of any document on the Web by using

the complete pathname. (Of course, the named anchors would have to be in place

already.) To link to the stocks section from another document in the same direc-

tory, use a relative pathname as follows:

<A HREF="dailynews.html#stocks">Go to today’s Stock Quotes</A>

Use an absolute URL to link to a fragment on another site, as in the following

example:

<A HREF="http://www.webreview.com/style.html#fragment">

Using named anchors

Named anchors are most often used as a navigational aid by creating a hyper-

linked table of contents at the top of a very long scrolling web page. Users can see

the major topics at a glance and quickly get to the portions that interest them.