Back to index of articles

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: 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: 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: 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: 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.

Home Anime Cel Gallery Fiction
Music Trains E-Mail HTML Tutorial
This page last updated 2/5/2010.