Building Web Sites - Page Links

5. Page Links

This page describes how to:

Create several types of hypertext links
Understand when various link types are appropriate

Links

The Anchor element is the essence of HTML. It is marked text that is the start and/or destination of a hypertext link. The information on this page is linked under the following headings.

Anchors
Names
Remote Links
Local Links
Absolute vs. Relative
Mail To Links
Mail To Links
Graphic Links
Other Links

Anchors

Links depend on a container tag called an Anchor (<a>) tag, which accepts several attributes, but either the NAME or HREF attribute is required. All links are anchored at both ends.

Anchors can contain (among other things):

a hypertext reference (HREF) that tells the browser where or what to link to
a target window or frame name
a NAME (the identifier used as an internal destination to link to in a page)
a description (the text or graphic you click on to go to another page or page location

Anything between the opening and closing anchor tags (<A> and </A>) of an anchor link will be the "clickable" item.

Here's what a link to the unrelated.net home page looks like:
- in a text editor:
<a href="http://unrelated.net">unrelated.net</a>
- in the browser:
unrelated.net

You can link

within the page
to another file in the same location
to a file at another location
to a specific part of another file

For example, Page Top, (<a href="#top">Page Top</a>) links to the top of this page, where an anchor tag (<a name="top"></a>) is located.

Name

You use the NAME attribute with an ANCHOR tag to specify a location in a page so you can link to it. Look at the source for this page and this text as an example.

Format: <a name="name">Name</a>

Remote-URL Links

A URL is a "uniform resource locator" and it is the domain name and path to a page or other file or directory on a website. Any link to another URL is a remote link.

Format: <a href="http://unrelated.net">unrelated.net</a> (link to website)

Format: <a href="http://unrelated.net/learnweb/lsn05.htm#remote">http://unrelated.net/learnweb/lsn05.htm#remote</a> (link to specific location in a page in a website)

A "absolute path" includes the full file-system path to a file or directory. A "relative path" indicates the location of a file or directory in relation to the file containing the link that uses the relative path. So, if you want to link to a page in a different directory, but you don't know or don't want to use the full absolute path, you would use the relative path in your link.

For example:

This link:
<a href="./lsn04">Lesson 4</a>
-- would link to file in the same directory as the file containing the link.

This link:
<a href="./lessons/lsn04">Lesson 4</a>

-- links to a file in a directory under the directory that houses the file containing the link.

This link:
<a href="../lessons/lsn04">Lesson 4</a>

-- links to a file in a directory at the same level as the directory that houses the file containing the link.

Mail To Links

You can use anchor tags to embet "mailto:" links so people can send you mail. These only work, however, if the person using the link can send mail (has sendmail configured) from his or her browser.

Format: <a href="mailto:webmaster@unrelated.net">Send Email To the Webmaster</a>

Graphic Links

There are several ways to use images as links. The easiest is just to use a graphic instead of text within an ordinary hypertext link.

The format to include a graphic in an HTML page is: <img src="./image.gif">

To use that graphic in a hypertext link: <a href="./lsn04"><img src="./image.gif">Lesson 4</a>

You can also use things called image maps (to link to several pages or locations from a single image) or javascript, java, or Flash images for links too. Some of these options are discussed later in this course.