
Music \| Writing \| Travelogues \| Shakespeare Resource Center \| Contact

Hyperlinks

Hyperlinks are why we call HTML the HyperText Markup Language. Using a special set of tags known as Anchor Tags, we can create links to other HTML documents or placeholders within an HTML document. This requires a simple knowledge of URLs (the location of the HTML document), as you need to tell the browser where to find the document or placeholder. All this will be explained below.

URLs

URL is short for "Uniform Resource Locator." We'll also be referring to the URL as an address (that's exactly what it is). What's the address? That's the thing in your browser field that begins in "http://" and generally ends in ".html" (including everything in between). For instance, this page's Web site address is:

http://www.jmpressley.net/tech/htmltutor/links.html

This URL address identifies five things:

http://—this is the protocol, which is a fancy way of saying "I'm looking for a HyperText document on a Web server."
www.jmpressley.net—this specifies the server on which you'll be searching.
/tech—this is a directory (i.e., a folder) on the server.
/htmltutor—this is a subdirectory of the "tech" folder
/links.html—this is the page itself.

For more on URL addresses, take a look at "A Beginner's Guide to URLs" on the NCSA Web site.

Anchor Tags

Following our <TAG></TAG> format, the basis of an anchor starts with <A> and ends with </A>. However, you will need to define the <A> tag a little more carefully for it to perform any useful function. We do this with attributes within the <A> tag.

HREF stands for "Hypertext REFerence." This is how you tell the hyperlink how to get to the page you want to see. Most anchors are in the form <A HREF="URL">, where URL is the server, directory, and page location (see above example). For instance, this tutorial's introductory page has a URL of http://staging.gbop.org/tutor/basic/intro.html. Let's say we wanted to place a hyperlink back to the introduction on this page. The code for that link would look something like:

<P>Back to the <A HREF="http://www.jmpressley.net/tech/htmltutor/index.html">Intro</A>!</P>

Back to the Intro!

Partial (relative) URLs

We don't always have to spell out the entire URL for the browser to know where to go. There are some handy shortcuts we can use when writing hyperlinks into documents. A partial or relative URL leaves out part of the information, letting the machine assume the rest. For instance, the most basic shortcut is used throughout these tutorial pages; all these pages are in the same directory (tutor). Because of this, the really long HREF attribute can be considerably shortened to:

<P>Back to the <A HREF="index.html">Intro</A>!</P>

Back to the Intro!

Other examples include:

To link to a file in a subdirectory of the current folder:

<a href="folder/file.html">Text</a>

To link to a file in a directory one level up in the file structure:

<a href="../file.html">Text</a>

To default to the current server (e.g., "http://staging.gbop.org"):

<a href="/folder/file.html">Text</a>

"NAME" Attribute

For internal hyperlinks, use the NAME attribute. With NAME, you can place hyperlinks that jump to various locations within the same document. The format is as follows:

<H1><A NAME="top">Top of Page</A></H1>
This defines the heading "Top of Page" so that a hyperlink can find it.

<A HREF="#top">Back to Top</A>
This directs the hyperlink to find the heading "Top of Page" (note the # sign in front of the name; it's required).

Mail anchors

Ever notice the "e-mail" links on Web pages? Those take advantage of yet another type of anchor tag attribute in order to send an e-mail to a person:

e-mail <A HREF="mailto:john@doe.com">john@doe.com</A>

Note that the HREF doesn't make a call to an HTML page; instead of beginning with http://, the address protocol is mailto: followed by the appropriate e-mail address to which we want the correspondence directed.

Table of Contents Example

We're going to create a new document that uses a number of the elements we've discussed in the last few lessons, with an emphasis on anchor tags. This is to demonstrate the multiple possibilities of HTML in everyday use. First, take a good look at the marked-up text. Then examine the results in a standalone example page.

First, the code:

<HTML>
  <HEAD>
    <TITLE>Tutorial Directory</TITLE>
  </HEAD>
<BODY>

<H1><A NAME="top">HTML Tutorial - By Sections</A></H1>

<P>This page is a directory for all the HTML lessons. The hyperlinks are all 
working, and you can reach any page in the tutorial from this page. Please feel free
to click the "View Source" menu item to see this code in action.</P>

<P>This document is divided into the following sections:</P>

 <OL>
   <LI><A HREF="#a">Introduction</A></LI>
   <LI><A HREF="#b">Required Tags</A></LI>
   <LI><A HREF="#c">Formatting - Part I</A></LI>
   <LI><A HREF="#d">Formatting - Part II</A></LI>
   <LI><A HREF="#e">Hyperlinks</A></LI>
   <LI><A HREF="#f">Lists</A></LI>
   <LI><A HREF="#g">Tables</A></LI>
   <LI><A HREF="#h">Images</A></LI>
   <LI><A HREF="#i">Other Resources</A></LI>
 </OL>

<H2><A NAME="a">Introduction</A></H2>

<P>Introduces the student to the uses of HTML and tags; includes definitions 
and stock examples to help demonstrate the concepts.</P>

<P><A HREF="index.html">Go to the page</A></P>

<H2><A NAME="b">Required Tags</A></H2>

<P>Introduces the student to the required HTML tags that define an HTML 
document.</P>

<P><A HREF="required.html">Go to the page</A></P>

<H2><A NAME="c">Formatting - Part I</A></H2>

<P>Teaches the student how to mark up pages using paragraph and line 
break tags within the document.</P>

<P><A HREF="format1.html">Go to the page</A></P>

<H2><A NAME="d">Formatting - Part II</A></H2>

<P>Introduces the student to heading tags, text effect tags (such 
as <B>bold</B> and <I>italic</I>), and horizontal 
rules.</P>

<P><A HREF="format2.html">Go to the page</A></P>

<H2><A NAME="e">Hyperlinks</A></H2>

<P>Concepts, examples, and demonstrations on the uses of hyperlinks 
within and between HTML documents.</P>

<P><A HREF="links.html">Go to the page</A></P>

<H2><A NAME="f">Lists</A></H2>

<P>Teaches the markup for ordered, unordered, and definition lists.</P>

<P><A HREF="lists.html">Go to the page</A></P>

<H2><A NAME="g">Tables</A></H2>

<P>Teaches the markup for creating tables in a page.</P>

<P><A HREF="tables.html">Go to the page</A></P>

<H2><A NAME="h">Images</A></H2>

<P>Teaches the markup for attaching graphics to a page.</P>

<P><A HREF="images.html">Go to the page</A></P>

<HR>

<H2><A NAME="i">Other Resources</A></H2>

<P>Links to other HTML information sites on the World Wide Web.</P>

<P><A HREF="other.html">Go to the page</A></P>

<HR>

<P><A HREF="#top">Back to Top</A></P>

</BODY>
</HTML>

To see this example in action, Click Here.

Top | Home