<a name=>

line.gif

Anchors in Documents

This section presents a few examples of creating anchors within pages. The tag <a> is the tag used to accomplish this task. Before discussing these examples it is worth noting that a book consisting of one or more very large pages with only anchors for navigation is generally difficult to use and comprehend. To produce well structured and easily accessible online books, some forethough should be given as to how the book is best organised in terms of chapters and topics, with individual topics being placed in separate HTML files. Anchors within pages is a nifty feature, but it seems to be often overused at present.

Example

Shown below is an example of how to layout a single page document using anchors. See explanation below.

<h2><a name=top>Table of Contents</a></h2>
<dl>
<dt><a href=#chapter1><img src=../gif/BookC.gif border=0 valign=middle> Chapter 1</a>
<dt><a href=#chapter2><img src=../gif/BookC.gif border=0 valign=middle> Chapter 2</a>
<dt><a href=#chapter3><img src=../gif/BookC.gif border=0 valign=middle> Chapter 3</a>
</dl>

<h3><a name=chapter1><img src=../gif/BookO.gif border=0 valign=middle> Chapter 1</a></h3>
<dl>
<dt><img src=../gif/Topic.gif border=0 valign=middle> Topic1
<dt><img src=../gif/Topic.gif border=0 valign=middle> Topic2
<dt><img src=../gif/Topic.gif border=0 valign=middle> Topic3
</dl>
<p><a href=#top>Go To Contents</a>

<h3><a name=chapter2><img src=../gif/BookO.gif border=0 valign=middle> Chapter 2</a></h3>
<dl>
<dt><img src=../gif/Topic.gif border=0 valign=middle> TopicA
<dt><img src=../gif/Topic.gif border=0 valign=middle> TopicB
<dt><img src=../gif/Topic.gif border=0 valign=middle> TopicC
</dl>
<p><a href=#top>Go To Contents</a>

<h3><a name=chapter3><img src=../gif/BookO.gif border=0 valign=middle> Chapter 3</a></h3>
<dl>
<dt><img src=../gif/Topic.gif border=0 valign=middle> TopicI
<dt><img src=../gif/Topic.gif border=0 valign=middle> TopicJ
<dt><img src=../gif/Topic.gif border=0 valign=middle> TopicK
</dl>
<p><a href=#top>Go To Contents</a>

Following is an example of the above code in action. Try taking a few of the links to see the repositioning within the page.

Table of Contents

Chapter 1
Chapter 2
Chapter 3

Chapter 1

Topic1
Topic2
Topic3

Go To Contents

Chapter 2

TopicA
TopicB
TopicC

Go To Contents

Chapter 3

TopicI
TopicJ
TopicK

Go To Contents

Explanation

In the source code above, the first three links (held in the table of contents) are to internal anchors. The first of these three links is shown below.

<dt><a href=#chapter1><img src=../gif/BookC.gif border=0 valign=middle> Chapter 1</a>

The # sign preceding the name being referenced implies that the link is to an anchor defined within the document itself. The displayable link data contains a closed book icon and the phrase "Chapter 1". Just below the three links contained in the table of contents, is the first of three chapter anchors (repeated below).

<h3><a name=chapter1><img src=../gif/BookO.gif border=0 valign=middle> Chapter 1</a></h3>

The open book icon and the text "Chapter 1" is enclosed within an anhcor. The name ascribed to that anchor is "chapter1". Defining an anchor like this ensures that the icon and text held within the anchor is able to be referenced from other parts of the document (or indeed directly from other documents, as shall be discussed next).

Links to Internal Anchor Points Residing in Other Documents

The syntax required to link to an anchor in another document is as follows.

<a href=document_name#anchor_name>

For example, the test document anametst.htm contains an anchor named internal_link. Thus, the code required to access that document, placing the named anchor at the top of the window is as follows.

<a href=anametst.htm#internal_anchor>Take this link to go to the other document!</a>

The above code is implemented immediately below. You should take the link to go there, whence you may take a link from there to return. Take this link to go to the other document!