Lesson 4

Lesson 4 - Links

This is short and sweet, well, compared to the last lesson it is ! Links are how you move around from one place in a document to another and from one document to another as well. You can even fire up certain programs from a link, be it an email client, FTP client, Telnet, play sounds, etc etc etc.

We need to start a new file for this lesson, and we will be creating a page that contains internal and external links. As before, you need to get all the stuff in for the standard tags, I will only be showing the stuff that goes between the BODY tags. (I know, I keep saying this ......)

Internal links

An internal link is a link to another part of the same document. It needs two parts, an anchor tag <A> and the NAME attribute. The name is the part that acts like a bookmark and when you request a jump to this name, the browser knows where to go. You are allowed to use capitals & digits in the names, but no spaces please !

To insert a link to your 'bookmark' you use the same tag, the anchor tag, but this time you use the HREF attribute. When you click on the link, the 'bookmark' in the HREF part is checked and that location found in the document (or outside if it is an external link) and off you go.

Here is an example :

<A NAME="TopOfDocument">
This is the top of the document.
There now follows a number of blank lines. (You can fill in any text you like it matters not !)
 
 
 
 
 
 
You are here at the bottom of the document. Click <A HREF="#TopOfDocument">HERE</A> to return to the top.

Save the above, open it in your browser and see what happens. You will see a couple of lines at the top, 30 blank lines and a line at the bottom which has a link in it. If you scroll down to the bottom and click on the link, you will return back to the top as if by magic !

This sort of internal link is useful for having a table of contents at the top of a document with a link to each separate heading to allow the reader to go directly to places of interest within your page. (Come to think of it, I could have done that in this tutorial :o) )

Notice how the hash (pound if you are in the USA) sign (#) is used to define that this link is internal ? In the bookmark (as it were) the NAME attribute specifies the name of the current location in the file - in our small example, TopOfDocument. In the link itself, the HREF attribute tells the browser where to go. By having a '#' in front, the browser 'knows' that the target of the jump it is about to make lives somewhere in the current document.

The format of the actual jump may need a little explaining. I shall break it up (down) into its constituent parts :

<A HREF="#TopOfDocument">HERE</A>This is the complete tag, it is made up of the following parts :

<A This is the opening part of the anchor tag,
HREF="#TopOfDocument" this defines the destination of the link,
> indicates the start of the link text,
HERE is the text that appears underlined to indicate where you click to make the link. This is the link text and everything from the start of this text to the ...
</A> closing tag will be underlined on the screen.

External links

An external link is a link to another part of the same document. It needs only one part, the anchor tag <A> and the HREF attribute. The HREF tells the browser where to go. This time there is no hash present and the name of the external file (probably an HTML document) must be specified in full.

This poses a problem, what if your server (where the HTML pages are read from by the user) has a different directory structure to the one on your computer where you are creating them ? If you specify the full name of the file, then when you upload the files to the server - it probably won't be able to find the document and you will get the dreaded 'Error 404' when you try to follow the link.

Here is one solution. Create a directory for your web pages and call it anything you like. Into this directory, place all your HTML files. Keep images separate in an images sub-directory. So far so good, and this is fine for small web pages/documents. If you have a fairly large web site with different bits all over it (like mine !) then try this.

Create a top level directory and call it website (for example). Under this create a number of sub-directories for each specific part of your website. Into these place all the relevant HTML files. Images will still reside in the images sub-directory off of each of your various sub-directories. This way images are kept close to and related to the part of the site they are used in.

My web site looks like this :

TOP LEVEL
	QDOS
	HTML
	THASSOS
	NORMAN

Each sub-directory has an images sub-directory where appropriate. When I am putting these tutorials together, I store them in the HTML sub-directory, and any images go under that in the images sub-directory.

Referencing other files

So I know that all my HTML files are in the HTML sub-directory. If I want to refer to lesson one's file, I simply call it by its name 'lesson_one.html' and this is what the link will look like :

Go to <A HREF="lesson_one.html">lesson one</A>

which will look like this in the browser : Go to lesson one

Always make file names in links relative to the current directory. If you have to go up one directory then use '../filename.ext' which says, go up to the directory above the current one, then find the file called 'filename.ext' and load it (or do whatever happens with *.ext files !). If I wanted to refer to the file norman.html which lives in the norman sub-directory in my own web site, from a document in the HTML directory, I would do this in a link :

Go to <A HREF="../norman/norman.html">my personal details</A>

which will look like this in the browser :

Go to my personal details

(This link will not work !)

Another point to watch out for, directory separators in HTML are Unix flavoured - so you would specify a forward slash / between directory names, rather than a DOS style backslash \. Looks like Bill Gates doesn't quite rule the world !

Combining external & internal links

OK, so we can now jump into another document, or jump to another place in the current document - can we combine both ?

Of course we can. If you have saved the original file we created above to test the internal links, load it in again and change it to read as follows by adding the line shown in red :

<A NAME="TopOfDocument">
This is the top of the document.
There now follows a number of blank lines. (You can fill in any text you like it matters not !)
 
 
 
 
 
 
<A NAME="BottomOfDocument">
You are here at the bottom of the document. Click <A HREF="#TopOfDocument">HERE</A> to return to the top.

Now save this as combined.html and create a new document with the following in its BODY tags :

Click <A HREF="combined.html#BottomOfDocument">HERE</A> to go to the bottom of another document.

Notice how we have used the URL of the document, a hash and the bookmark (actually, the anchor) within the document where we wish to jump to. Save this file with any name you like (the extension should be .html !) and open it in the browser. click the link and be amazed !

Opening links in a new window

By default all links open in the same window as the one you are currently in. If you wish, you can force a new window to be opened by using the TARGET="_blank" attribute on the link. The above link would look like this :

Click <A HREF="combined.html#BottomOfDocument" TARGET="_blank">HERE</A> to go to the bottom of another document.

If you add this to your most recent example, and save it, then test it in the browser, your link will cause a new window to be opened and the referenced document displayed in it. Now you can see both documents at the same time.

Linking to another web site

A link to another web site is just a different form of an external link. You specify the web page address in the destination part of the link as usual, but you have to prefix it with 'http://' so a link to my own QDOS information pages would look like this :

Click <A HREF="http://www.dunbar.cwc.net/qdos/qdos.html">HERE</A> to go to QDOS documentation.

which looks like, and works like this :

Click HERE to go to QDOS documentation.

Linking to other files

Should you wish to play a sound when the user click on a link, simply do a link where the sound file name is used as the destination part of the link, an example follows :

Click <A HREF="cashreg.wav">HERE</A> to hear a sound.

which looks like, and works like this (if you have a program that runs *.wav files that is) :

Click HERE to hear a sound.

There will be more on links when we cover Images in Lesson 5, until then keep practising.

Previous Lesson

Home Page

Next Lesson