Links

The ability to "jump" from site to site, page to page and paragraph to paragraph is the keypoint to the WWW. "Surfing the Net" is only made possible through this function.
To start with site to site:-
Each web page has its own unique identity, its "URL" (Uniform Resource Locator) which is made up of three sections:

<Transfer Protocol> ... <Server> ... <File Path and Name>

The "Transfer Protocol" that you will almost always use is "HTTP" (Hyper Text Transfer Protocol). This governs the way that information in Hyper Text format is sent over the network.

The "Server" is the unique name of the computer that holds the HTML document you are referencing. Take, for example, a page on this website. All the pages are referenced by:

http://www.trenoweth.co.uk/ ... <File Path and Name>

The name of the server is "www.trenoweth.co.uk" but it doesn't sit here, in my computer. It sits on a bigger server which is run by my ISP (Internet Service Provider). This server has been set up to allow people from outside my computer (I have no network, so that's all of you!) to read files under a specific directory on my computer. These files have been uploaded from my computer on my desk to the server at my ISP by FTP (File Transfer Protocol). The "File Path and Name" specify the particular HTML document on the server and where in the directory structure it lives.
You probably followed a few links to arrive at this page, but you can access it directly by going to the server which has a directory "www" accessible to the outside world. On this directory is a sub directory "BrushHouse" which includes "lookituphere" which in turn has a further subdirectory "html" which consists of the various pages making up this tutorial. The one you are reading now is named "link.html". To access it directly you need to specify the URL:

http://www.trenoweth.co.uk/html/link.html

So, you are wondering, how do you link to another URL from within one of your HTML documents? With the "Anchor" tag!

<A HREF="the URL"> ... </A>

Anything you include between these two tags (text or pictures) becomes the link to the specified URL. The text or picture will appear between the tags and normally a browswer will underline the text or outline a picture which identifies the part of the page you need to click to activate the link. Sometimes the browsers settings will have been arranged so that the outline to the picture doesn't show, but this can't apply to text as if you cannot see the underline then you cannot see the text either!

Relative Addressing
Moving on to the second, page to page, type of link we arrive at the situation where a collection of pages within a document all reside on the same server. It would be a waste of time, not to mention somewhat repetitive, to keep on specifying the server, or indeed the directory if they all reside in the same one, so only the last part of the address is needed. Why tell your browser to go somewhere when it is already there? The "Contents" part of this site links to the other pages such as this one and as they are all on the same server and in the same directory all I needed to do to link to this page was write:

<A HREF="link.html">Links</A>

Simply clicking on "Links" in the "Contents" list directs your browser to display this page. (The underscore is added by the browser without any input by myself).

Links within a document
Now we come to the third, paragraph to paragraph, type of link where we want to "jump" from place to place within the same document. Once again we use our old friend the Anchor tag but this time it is linked with the hash mark (#).
First one must set up a destination tag at the point you want to link to:

<A NAME=" ... "></A>

Then, at the point you wish to jump from:

<A HREF="# ... "></A>

To activate the link, simply clicking on the <A HREF ... > link in the page will take you to the <A NAME ... > destination.
The tags we will use are, to jump to the bottom of the page:

<A HREF="#bottom"></A>

and at the bottom of the page:

<A NAME="bottom"></A>.

Clicking here will take you to the bottom of this page.


An anchor such as this can be used not only within the same document, but to "jump" to a specific part of a different document entirely - just remember to include the full path! I will set one up here as an example - once you have tried it simply close the screen that will have opened for it.

To go to the "Heading." part of the chapter on Text Appearance we need the following code:

Click <A HREF=""text.html#jump" TARGET="_BLANK">here</A> to make the jump.

The directory is called "text.html and I have inserted the anchor

<a name="#jump"><#/a>

in the appropriate place. Click here to make the jump. (Close the new window that opens to return here!)

What, you are wondering, is the TARGET="_BLANK" in the above code? Targets are something we shall see more of when we come to discuss frames, but in this usage it forces the browser to display the required page in a new window, not the one from which the command was actioned.
Other "TARGET" commands that could be used in similar circumstances are:

="_SELF" Load the referenced data in place of the current document.
="_PARENT"

Load the referenced data into the window containing (or that contained) the parent of the current document (the document from which the current document was accessed). If there is no parent, default to TARGET="_SELF".

="_TOP"

Load the referenced data into the window containing (or that contained) the "top" document (the document obtained by iteratively searching through successive parent documents until arriving at the initial, starting document). If there is no parent, default to TARGET="_SELF".

NOTE: All other names beginning with an underscore (_) are ignored by the browser.

In practice, the ones that are most frequently used are "_BLANK" and "_TOP".


This is where we have jumped to!

Although we set the "bottom" tag to be where we want to jump to, if there is only a small amount of page left beneath it, then the "jump to" point will be part way down the page as the bottom of the document cannot be above the bottom of the screen!

Having jumped to the bottom of the page, you will now want to return to the text you were reading so I had better put in another instruction to enable you to return! What is needed here is:

Clicking <A HREF="#return">here</A> will take you back.

and at the point we want to return to we insert:

<A NAME="return"></A>

Clicking here will take you back.