Basic HTML Tutorial

BHP HTML Basics - Hyperlinks


Linking Your Pages
A great deal of the power and magic of the Web comes from the ability to link your document to other documents, either your own pages or to any other page on the Web. This ability can be used effectively to expand the interest and the usefulness of your page.
Making a link relies on the same process that we used in specifying the location of a file for use as an image in our page. The location of the file that we want to link to is set by using its Web address or URL. Since each file on the Web has a unique address, by setting the URL in our link to a specific document, we can provide that document to our visitor with just a click of the mouse.
A link in an Web page is made by using the Anchor tag. The most basic form of the tag looks something like:
<A HREF="URL_to_be_linked_to">Text for link</A>
This link tag follows the same structure as the other tags we have seen. The name of the tag, or in this case just the first letter, A, is used to start the tag. The location of the file to link to is given by the HREF attribute. The text that will be used as the "clickable" component of the link is placed between the starting tag and the closing tag, </A>.
If we are linking to a file in the same directory as the current HTML document, we can use the relative URL as the value of our HREF attribute. For example, to link to the first page of this series of pages on HTML we can use something like:
<A HREF="index.html">HTML Basics</A>
This would give us a link that looked like:
HTML Basics
We can use a little "trick" to move around in our directory structure. To move up one level in a directory tree, you can use "../" as the first part of the path to the file. Since this file is in a subdirectory named "/basic", one level below the main directory, we can get back to the main directory by using something like:
<A HREF="../index.html">Would locate a page called index.html one level up</A>
We can also use this little trick to move to a different subdirectory in our directory tree. To reach the Web Support Color Table, which is in a subdirectory named "colors", we could use the "../" to move up to the main directory and the use the subdirectory name, "colors" to move back down the tree in a different subdirectory. The link would look something like:
<A HREF="../images/mypic.gif">Link to a picture within an images subdirectory</A>
When we want to make a link to a web file that is not within our directory structure, we need to use the absolute URL in the HREF attribute.
Using the absolute URL means that we set the complete protocol, server and domain name, as well as the complete path to the file we are linking to. To link to the UMUC Home Page, we would use something like:
<A HREF="http://www.umuc.edu">UMUC Home Page</A>
UMUC Home Page
By using the absolute URL in your link code, you can connect your page to any other page on the Internet.
You can also link to a specific area on the same page. This requires two steps: First, name the area you wish to link to using this tag:
<A NAME="name"</A>
You can use any name you want. If you're making a link to jump back to the top of the page, you may want to call it "top". Sometimes this is called an "anchor". This anchor will be invisible in your page. 
Next, create a link to the area on your page you've just named. This is very similar to the hyperlinks you've already learned. Use:
<A HREF="#top">Jump To the top of the page</A>
Notice that a # appears before the word top. This tells your browser that it should look within the page for the named location.
Now there's just one more trick to learn so hang in there! You can link to a specific area on another web page by combining the page name and the anchor name. You've probably used the URL http://www.umuc.edu/library/ to go to the library. And if you scroll down that page, you'll see a section called "News". It just happens that the programmers of that page used anchor names for each section of the page. So to link to the subject guides section (called "news") we'd use the tag:
<A HREF="http://www.umuc.edu/library/#news">UMUC Library Subject Guides section</A>
Here's a working version of the link. Click it to see the result: UMUC Library News
So what's the big deal? The link takes you to the bottom of the library page where the News link is found.
Review
Using links to connect your page to others can be done by using the Anchor tag, <A>.
The URL or web address of the page to be linked to is indicated using the HREF attribute.
When we link to a file within our directory structure, we can use a relative URL. When we link to a page elsewhere on the web, we must use the absolute URL.
Once we name a section of a page using an anchor, we can link specifically to that anchor from another part of that same page or from other pages.
Back
[Back] [Table of Contents]
Copyright 2000 John H. Bolgiano, Jr. - All rights reserved
Modified with permission for educational use by Roberta Bush