Tell a friend about this site

Home Page

Next Page

Previous Page

Contents Page


Download tutorial in Zip form







When your first web page is up on the World Wide Web, why not apply for our Good Start Award?

TaFWeb Good Start Award

Linking to Other Pages and Sites

Without the ability to switch easily from one page to another or even one site to another, the Internet wouldn't be of much use. If you've followed this course from the beginning you've switched between a number of pages by clicking a "link". Naturally, we use a HTML tag to put these links into our document.

In its simplest form, assuming you want your user to be able to switch to a new page on your site, the tag looks like this:

Now you can switch to <A HREF="newpage.html">a new page</A> by clicking a link.

The words a new page will form the link on which the user can click. This example assumes that the document newpage.html is on the same site and in the same folder/directory as the current document. If the new page were on the same site but located in a sub-folder/directory called newfolder, we would have to include this in the HREF part of the tag:

Now you can switch to <A HREF="/newfolder/newpage.html">a new page</A> by clicking a link.

To switch to a document held on another site, we need to quote the full URL (the internet address of the document). Suppose that newpage.html is on another site whose URL is http://another.site.com, then our link tag would look like this:

Now you can switch to
<A HREF="http://another.site.com/newpage.html">a new page</A> by clicking a link.

Sometime we may want the new document to open in a new window (if you've been clicking on the little camera images to see how the code looks, you'll have seen this in action). We can add another element to the link tag giving a name to the window we want to use. In this example I've called the window new_window. If the window has already been created (by clicking a previous link which targetted the same window) then it will be re-used for the current link, otherwise a new window will be opened.

Now you can switch to <A HREF="newpage.html" TARGET="new_window">a new page</A> by clicking a link.

Try the link now:

Now you can switch to a new page by clicking a link.

Sometimes you may want the user to be able to go to a particular point in a document. We can do this by using the link tag in a slightly different way to "name" a point in a document. Let's suppose that you want the user to be able to move back from this point in the document to the first example of the link tag which we gave above. First we would name the location of the first example by putting the following code at the point:

<A NAME="example-one">...<A>

The dots (...) in this case represent the text of the first example. Now, to allow the user to jump back to that point in the document, we could put the following link code:

Jump back to the <A HREF="#example-one">first example</A>.

Here is the actual link, so go ahead and try it, then scroll back down here:

Jump back to the first example.

This example assumes that the point we want the user to be able to jump to is in the same document, but just like the other cases we've discussed, you can include a document name or even a complete URL in the HREF part of the tag. Just remember that the name of the point you want to jump to must come at the end of the HREF section and begin with a hash symbol (#).

An important point to remember here is the one I made in the section on Using Images -- most computers which store pages for the internet use an operating system called UNIX. Unlike Windows, UNIX is case-sensitive. In other words if you create a link to a file called "NewPage.html" and your service provider's computer has the filename as "newpage.html", you'll get an error message saying that the file doesn't exist. The conventional way around this is always to use lower-case letters in both documents and images.

One last thing before we finish this section. Although we will normally link to other pages on the internet, its also possible to use the link tag to link to other things like, for example, email. The code shown below will create a link which, when clicked, will start the user's email program and insert the address me@somewhere.com into the address section:

Click here to <A HREF="mailto:me@somewhere.com">email me</A> - please!

You can see an example of this type of link in the copyright notice at the bottom of this page. Go ahead - click it and send me an email -- then go on to the next section on Brightening Up the Background.


rule


Top of Page


This page hosted by
Planet Tripod
Get your own
Free Home Page

 

These pages are copyright © Terry Franks June 2003.
Terry Franks
Last major revision: 22 August 1998 at 02:29 BST
This document URL: https://members.tripod.com/~terry_franks/webintro7.html
TerryFranks is
a member of

The HTML Writers Guild