HTML From the Ground Up

by L. Downs

Making Your Links Go Anywhere You Want

So far we've barely touched on the most important feature of Web pages, the ability to link to other pages. In actual fact, you can not only link to another page, but sometimes even to a specific place in that page (or the same page you're in, for that matter).

The simplest link is to another page in the same directory as the current one. In other words, both files (the page with the link and the page being linked to) have to be in exactly the same place, whether it's a file on a hard disk or on a Web site. In that case, linking is very easy. You'll remember that you create a link by using the <A> tag with an HREF attribute specifying the destination. Here all you need for the destination is the file name.

For example, if you are linking to a file called "anotherpage.html" in the same directory as the file containing the link, and you want the user to see the link in the form of text reading "Here is another page", you would insert the following code:
<A HREF="anotherpage.html">Here is another page</A>

Also very easy is linking to another page somewhere else on the Web. Just use the page's URL as the destination in the HREF attribute. If linking to another site, you must use the entire URL, including the "http://" part, or the link may not work. For example, if you want to link to Lamont's Cel Gallery, which has the URL www.twinplanets.com/cels/index.html, you would use this code:
<A HREF="http://www.twinplanets.com/cels/index.html">Go to Lamont's Cel Gallery!</A>

NOTE: If a URL does not end with an actual filename, the server will look for a file called index.html in the location given. For example, if you have a link to www.twinplanets.com/music/ the server will actually look for www.twinplanets.com/music/index.html. In cases like this, it's a good idea to include the slash at the end of the URL, so that the server knows that the filename isn't present in the URL. If in doubt, the best way to determine the correct URL for a site is to actually go there and copy the URL from the address bar of your browser.

Things become more complicated when you're linking to a file on the same site as your page but in a different directory. There are several ways to do this:

Absolute addressing: This means you give the entire URL for the page you're going to, even if it's on the same Web site as your page. This only works if your file is already on a Web server; it's rather tricky to do on a PC and varies from one browser to another.
Relative addressing:
- If the file is in a subdirectory below the one your file is in, include only the name of the subdirectory (or subdirectories, if it's several layers down), followed by the filename. For example, if your file is C:\webfiles\mypage.html and you want to link to C:\webfiles\policies\summary.html you could use this code:
  <A HREF="policies/summary.html">Summary of policies</A>
  NOTE that you do not include a slash in front of the first subdirectory in your link.
- If the file is in a subdirectory above the one your file is in, include this:
  ../
  in front of the filename to indicate that the file is one directory higher in the directory "tree." For example, if your file is C:\webfiles\procedures\checkout.html and you want to link to C:\webfiles\index.html you could use this code:
  <A HREF="../index.html">Main home page</A>
  If your destination is more than one subdirectory higher than the page with your link, include one ../ for each subdirectory level you're jumping up through.
- A different kind of relative link only works on Websites. In this case, your Webmaster will tell you what the "root URL" of the site is, and you only need to add the part of the link following that. For example, if the "root URL" of the Twinplanets Website is www.twinplanets.com and you want to link to the page www.twinplanets.com/cels/gallery_misc.html you would use the code:
  <A HREF="/cels/gallery_misc.html">Miscellaneous animation cels</A>
  NOTE that in this case you do include the slash in front of the first subdirectory in your link, unlike in the case above. Confused yet?

You're not limited to placing text between the <A> and </A> tags. You can also place an <IMG> tag there instead, in which case the graphic you've inserted becomes a hot link in its own right. This is how live buttons, etc. are inserted into Web pages.

Let's create a page with some links of various kinds. First, go to Example 1 for this lesson and follow the directions there. You'll end up with some text on your computer's clipboard and several new graphics on your hard disk.

Now let's continue. Create a new blank document in Notepad and add the required HTML tags (if you're not sure what these are, refer back to the first lesson).

Position the typing cursor between the <BODY> and </BODY> tags and insert the text you copied to the clipboard by pressing <CTRL><V>. Add a title between the <TITLE> and </TITLE> tags that reads: Links of all kinds. Save your file under any name you choose (but be sure that you give it an .html extension), load it into your browser, and view it.

So far it's pretty dull. First, add a pair of <BR> tags after each paragraph, to get rid of that "run-on" look. Next, let's add a few links. Locate the words "Twinplanets Home Page" at the end of the first paragraph, and let's make it into a link:

In front of the word "Twinplanets" add the tag <A HREF="http://www.twinplanets.com/twinplanets.html">
After the word "Page" add the ending tag </A>

Save and reload. "Twinplanets Home Page" should now be a "hot link." Clicking the link should take you to the Twinplanets home page.

You can also use the URL that you're going to as the link text that the user sees. Locate the URL "www.ala.org" at the end of the second paragraph, and make it a link as follows:

In front of the URL add the tag <A HREF="http://www.ala.org/">
Note that you must include the http:// in the actual link even if you don't show it to the user; otherwise the link will not work.
After the URL add the ending tag </A>

Again, save and reload. If you want, try leaving out the http:// from the HREF attribute and see if the link still works.

Now let's use a graphic as a link instead. Just before the paragraph which starts "Links don't have to be text" add a graphic by inserting this tag:
<IMG SRC="star3.gif" ALIGN="LEFT">
and view the results. (By the way, if you're wondering about the ALIGN="LEFT" attribute, this causes the text to "wrap around" the graphic as well as keeping it to the left. Try leaving out this atttribute and see what happens).

Now we have a pretty star, but nothing more. Let's make it into a link as follows:

Before the <IMG> tag, add the tag <A HREF="http://www.nasa.gov/">
After the <IMG> tag, add the ending tag </A>

Once you save and reload, you'll find that your graphic now has a border around it. Clicking the graphic will take you to the stars (surprise!). However, we now have that ugly blue (purple, once you've clicked on it) border around the graphic. How do we get rid of it?

Simple. Just add BORDER="0" to the <IMG> tag, so that it now looks like this:
<IMG SRC="star3.gif" ALIGN="LEFT" BORDER="0">

Once you save and reload, the border should be gone (you may still have a thin dotted line around the graphic at times, depending on your browser.) The BORDER attribute specifies how thick (in pixels) the border should be. The default is one pixel, so if that's what you want just leave it out.

You're not limited to making only text or graphic a link. You can do both at once if you want, and this can be useful if it's not clear where clicking on a graphic will take you. Just put everything you want to be "hot" between the <A> and </A> tags. For example, at the end of the next paragraph of text (ending with the words "it will work, like this:") add this code:
<BR><BR>
<A HREF="http://www.nasa.gov/"><IMG SRC="star4.gif" BORDER="0">
<BR>Welcome to NASA</A>

In the next lesson we'll continue working with this file, and show how to jump to a specific place in a page rather than always starting at the top.

Terms to know from this lesson

Absolute addressing: Specifying the entire URL of a link.

Relative addressing: Specifying a link destination in terms of its relative position to the page with your link.

BORDER attribute: Sets the width of a border in pixels.

Portions of this tutorial originally appeared in Technotes, a publication of the UNLV Libraries, and are copyright by the University of Nevada, Las Vegas; used by permission. All remaining material © 2003 Lamont Downs.