Hypertext Links

Linking to Other Documents Using <A HREF>

Perhaps the best aspect of writing in HTML is its ability to link text to other texts, a concept commonly known as hypertext. HTML uses an anchor tag, or <A HREF>, to link documents together. Every anchor tag includes the following elements:

• the anchor code <A HREF=
• followed by the file to which it should connect;
• the text that be used as the "link," and
• the closing tag </A>

Sound complicated? In practice, it really isn't. Here's a typical anchor tag:

<A HREF="http://edweb.gsn.org">The EdWeb Home Page</A>

As you can see, the tag begins with an <A, the basic element of every anchor tag. After a single space, the <A is followed by HREF="http://edweb.gsn.org">. The HREF=" section tells the computer that this tag will link the document to another document. The next set of information, http://edweb.gsn.org">, is the name of the document to which it should connect, which in this case is a web page at edweb.gsn.org. Addresses such as these are often called Uniform Resource Locators, or URL's. The "> at the end of the address simply tells the computer that the address is over.

Next, we have some text which says The EdWeb Home Page. This is the information that will actually appear on the screen. The information is known as a link, for when you select it in your web browser by clicking it with a mouse or moving your cursor on top of it, it will connect you to the address (in this case, http://edweb.gsn.org). Finally, </A> is added at the end of the tag to tell the computer that the tag is complete.

While the anchor and the closing anchor in this kind of tag remain constant, the other two pieces, the URL and the link, are adjustable. URLs can include practically any file on the internet, such as a web site, a gopher server, even an email address, though most commonly you will link your documents to web sites. Here are some major examples of different types of URLs as they would appear within an anchor:

A link to the Stones Web Page           <A HREF="http://stones.com"> 
A link to a file in the same folder     <A HREF="homepage.html"> 
A link to the CoSN Gopher               <A HREF="gopher://digital.cosn.org"> 
A link to a newsgroup                    <A HREF="news:k12.chat.teacher"> 
A link to an outside network             <A HREF="telnet://capaccess.org"> 
To mail a message to my email            <A HREF="mailto:acarvin@gsn.org"> 
To copy the software, Netscape           <A HREF="ftp://mcom.com/netscape"> 

As you can see at the beginning of each URL, the anchor includes a basic code to designate what type of link is to be created. To transfer a file, the code is ftp://, and to access a gopher, it's gopher://. The only anchor which isn't as obvious is http://, which links you to a Web page. HTTP stands for HyperText Transfer Protocol, which is the technical name for the method of connecting to a Web page. As for the second example - the link to a file in the same folder - it's used when you are creating multiple documents for your Web site. If the other file is located in the same folder directory on your computer, all you have to do is include the name of the file, which in this case is called homepage.html.

If, however, the file is located in a different folder on your computer, you'll have to specify the entire URL for the computer to follow the path. Let's say you have a file in a folder called my.home.page, and you wanted to connect it to your friend Jane's home page, which happens to be in another folder called jane.folder on the same computer, which happens to be called my.computer.com. You'd have to write the anchor as if you were linking it to another computer, so your anchor might look like this long and ugly tag:

<A HREF="http://my.computer.com/jane.folder/jane.homepage.html">

When the computer looks up this link, it connects to the computer, my.computer.com, and then goes the folder jane.folder, which it knows to do because jane.folder is preceded by a slash (/) in the address (Note: slashes are used to designate the opening of a file folder, and because you may place a file within several layers of folders, the length of the address and the number of slashes may be quite large). The computer then sees another slash right before jane.homepage.html, the name of Jane's Web file. The computer opens jane.homepage.html and then presents it on the screen.

Of course, if you want your web users to know where a certain link goes, you'll have to provide them some information about the link. Let's look again at our example:

<A HREF="http://edweb.gsn.org">The EdWeb Home Page</A>

In the space between the anchor <A HREF="http://edweb.gsn.org"> and the closing tag </A>, we have the words The EdWeb Home Page. That's the link. When you open a Web document with this example in it, this is what you'd see:

The EdWeb Home Page

And that's it. The rest of the information is hidden away, but the computer still knows it's there. So, if you moved your mouse or cursor to the link and selected it, the computer would look up the URL that is listed within the anchor and bring you to it.

Using Anchors Within a Single Document

Sometimes when you're desigining a Web page with lots of information, it can be handy to make links within the document to other points in the text. For example, if you're putting together an on-line dictionary and one of your definitions is

Lynx

A textual browsing program used to access the World Wide Web.

That's all well and good, but what if the reader has no idea what the World Wide Web is? You'll want to be able to connect them to that information, and since our dictionary is in the form of one long file, we'll have to make a link to a definition further down within the document, something like this:

World Wide Web

A form of online hypertext multimedia.

To do this, you need to add an anchor to the words "World Wide Web" in your definition for World Wide Web, using a local anchor tag called <A NAME>:

<A NAME="web">The World Wide Web</a>

And within your definition for Lynx, you'll also have to add a link to "World Wide Web" so the computer knows to bring you to its definition. In this case, you would use a tag that is fairly similar to a typical anchor tag:

A textual browsing program used to access the <A HREF="#web">World Wide Web</a>.

The words World Wide Web are now a link to web, which you've just defined in the tag. The hash mark (i.e., the #) tells the computer it's looking for a link within a document. So, if you click on the words World Wide Web in our definition for Lynx, your web browser will jump you to the definition for WWW.

Finally, let's say you have a really, really big dictionary, and the letters T through Z are actually in a totally separate file called dic.t-z.html. You'd have to let the computer know that it needs to jump to a different file as well as go down to the definition for World Wide Web. Well, you'd use the same <A HREF> tag as you did above, with one new twist:

A browsing program used to access the <A HREF="dic.t-z.html#web">World Wide Web</a>.

Preceding the hash mark we've added the name of the file, dic.t-z.html. Now the computer knows to go to that file first before looking for the link.

Interactive Quiz

Hypertext anchors and links may be the most important HTML code you'll learn, so review the lesson and make sure it makes sense to you. When you're ready, take the next interactive HTML quiz and see how you do.

When you're done with it, move on to the next section or review the current lesson again.

---