Links

Links are what put the "Hyper" into "HyperText." It's what makes the whole Web useful, and perhaps even possible. Web documents basically have two purposes:

to provide information, and
to link to other information.

This page covers linking to other information, using either External Links (links to other pages) or Internal Links (links to different places in the same document). Below that we cover Mailto Links, which let the reader send an e-mail message to whomever you like.

External Links

External Links link to other documents. These "other documents" can be other ones that you have made, at the same "Web site," or completely different documents on other sites made by other people. An example of an external link is the link taking you back to the Web Publishing Home Page found at the top of this and the other WebPub pages.

Here is some HTML for a basic link:
<A HREF="[[URL of document you're linking to]]">Text that will be used as the Link</A>
The URL, or Uniform Resource Locator, is the address of the document which you want people to see once they select that link. Remember to always put the URL, absolute or relative, in quote marks.

Learn about URLs before going on.

Here is an example:
<A HREF="http://www.yahoo.com">Go to Yahoo!</A>
This is rendered as:
Go to Yahoo!

For the text of your links, e.g. "Go to Yahoo!" above, do not use "Click Here." "Click Here" tells the reader absolutely nothing about the document they will be going to. Instead of "For an overview of our Course, click here," try to work the link into the text, as in "For more information, read an overview of our Course." Notice how much more informative the second version is. Also, not all readers will be using a mouse, so "Click Here" may be somewhat insulting.

Internal Links

Internal Links are much easier to understand than External Links, because you don't have to worry about any URLs. Here's how an Internal Link works. Pretend you have a page about chipmunks and squirrels, respectively. You might want a table of contents at the top of the page, with links to each section of the page. You could also put in links back to the top of the page, so people could go back to the contents and choose another section instead of scrolling around the page. We use <A NAME> to mark a spot, and <A HREF> to jump to that spot.

<P><A NAME="top">Table of Contents:</A></P>
<UL>
<LI><A HREF="#chipmunks">Chipmunks</A>
<LI><A HREF="#squirrels">Squirrels</A>
</UL>

<H2><A NAME="chipmunks">Chipmunks</A></H2>

<P>Very interesting Chipmunk stuff...</P>

<A HREF="#top">Back to the Contents</A>

<HR>

<H2><A NAME="squirrels">Squirrels</A></H2>

<P>Very interesting Squirrel stuff...</P>

<A HREF="#top">Back to the Contents</A>

Notice that we use the hash mark (#) in the value of the HREF attribute, so that the browser knows this isn't a URL, it's a jump inside this document. Notice that we don't use the hash mark in the value of the NAME attribute.

Here's how the example is rendered, for the curious:

Table of Contents:

Chipmunks
Squirrels

Chipmunks

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Back to the Contents

Squirrels

Back to the Contents

Mailto Links

You can create a link which, when selected, will bring up the reader's e-mail program so that they can send an e-mail message. Unlike other links, the reader isn't going somewhere; rather, they're doing something else (e-mailing) instead of surfing.

Here's an example:
Send a message to <A HREF="mailto:president@whitehouse.gov">the President</A>!
This is rendered as:
Send a message to the President!

It's usually a good idea to make the text of the Mailto Link the actual e-mail address used in the link. That way, if the reader prints out the page, she can still read get the address; also, some older browsers can't handle Mailto Links, so for those users, the address is still there for them to cut and paste or write down.

For example:
Send a message to Chris, at <A HREF="mailto:cburch@madison.k12.wi.us">cburch@madison.k12.wi.us</A>!
This is rendered as:
Send a message to Chris, at cburch@madison.k12.wi.us!

Previous: Text Level
Next: The FONT Element