Linking between Web documents

Linking a Web Page to Other Pages

The links in your pages are what turn them into hypertext documents, rather than simply text marked up in a strange formatting language.

A link has the following parts:

The text you click on to activate the link. This is called the anchor.

The address of the page (or image or any other file) to jump to when the anchor is clicked. This is the page's URL ("Uniform Resource Locator").

The HTML tag for a link is basically <A>anchor text</A>
The address to jump to is given in an attribute (parameter) of the <A> tag, using the code HREF=
So the full tag is: <A HREF="url of page">anchor text</A>

For example:

<A HREF="http://www.israweb.co.il/judyk/">Judy Koren's Resource List</A>

This produces:

Judy Koren's Resource List

Types of Links

Though usually you want to link a document to another WWW document, it's possible to link it to any file that can be accessed via the Internet. This is because the first part of the URL, up to the symbols ://, indicate the type of document (technically, it's the name of the transfer protocol used to access the file).

The main types of possible links, and examples, are:

A link to a Web page on a different computer:<A HREF="http://www.israweb.co.il/judyk/">my Web page</A>

A link to a file in the same folder as this one:
<A HREF="graphics.html">Graphics tutorial</A>

And of course by specifying the path you can link to any file within the directory space of the current Web site:

<A HREF="tutorials/graphics.html">Graphics tutorial</A>where the file is in the directory "tutorials" which is a subdirectory of the one the current page is in.

A link to a gopher, e.g. the CoSN Gopher :
<A HREF="gopher://digital.cosn.org">CoSN Gopher</A>

A link to a newsgroup
<A HREF="news:k12.chat.teacher">The chat.teacher newsgroup</A>

A link to a computer running a database or other resource via a program that does not understand any of the above protocols (e.g. the Haifa University library catalog):
<A HREF="telnet://lib.haifa.ac.il">Haifa University Library Catalog</A>

(You get to the computer and have to log in to gain access to the resources on it).

To mail a message to my email
<A HREF="mailto:judyk@actcom.co.il">my email</A>

To download software from a software archive: e.g. to copy Netscape from the Netscape archive:
<A HREF="ftp://mcom.com/netscape">Download Netscape Now!</A>

Relative versus Absolute Links

Absolute links use URLs that give the full address of the file linked to, starting with http:// and the computer name.

You have to use them when linking to a file on a different computer.

You should use them when linking to a file in a different Web space on the same computer as the current file: e.g.
<A HREF="http://www.israweb.co.il/other-site/tutorials/graphics.html> Graphics tutorial</A>

You can use them even when linking to a file in the same Web space (set of directories storing a Web site) as the current file, e.g.
<A HREF="http://www.israweb.co.il/judyk/graphics.html>Graphics tutorial</A>.

Relative links use addresses that start from the directory of the current file. Since you haven't specified a transfer protocol and a computer name, the browser looks for a file on the same computer as the current page. For instance:
<A HREF="tutorials/graphics.html"> tells the browser to look for the file "graphics.html" in the directory "tutorials" which is a subdirectory of the one this page is in.
<A HREF="../tutorials/graphics.html"> tells the browser to look for the file "graphics.html" in the directory "tutorials" which is a sister directory of (on the same level as) the one this page is in. (HTML uses the conventions of DOS and UNIX, in which two dots: ../ means the parent directory of the current one).

It's recommended to use relative links to files within your own Web site, not absolute ones, for two reasons:

Your internal links will run faster, since the browser doesn't waste time deciphering the server name and finding it and then finding the directory: it knows to start from where it last was.

More important, if you need to move your site to another computer or domain name (e.g. you change your ISP, or your university decides to put your site on a different machine) you can just move it and all the links will work. If they're absolute links, you'll have to change every link in every page to the new address.

Links Within a Document

So far we've considered linking to "a document" or "a file", i.e. to the start of it. But If your page is long, or contains many separate pieces of information that you want separate access to, you may want to make links to particular items of text within the page. You can do this only in hypertext documents (WWW pages) - not, for instance, gopher menus or files in archives. But you can link to any point you like in a WWW page, either from the same page or from a different page.

To do this, you need to put a label at the point in the text that you want to link to, and a "jump to label" command at the point that you want to link from

The code for the label is: <A NAME="name">
e.g. <A NAME="section2">

Note that there cannot be a space in the label, but if you want you can use a hyphen or underline character in it.

The code for the anchor linking to that label from the same document is:
<A HREF="#section2">

The hash mark tells the computer to look for a label "section2" in the same document; without the hash mark, it would look for a file called "section2" in the same directory as this page.

To link to that label from another document you would need to put in the anchor also the file name:
<A HREF="homepage.html#section2">

And of course if necessary also the path:
<A HREF="tutorial/homepage.html#section2">

links to the label "section2" in the file homepage.html which is in the folder "tutorial" which is a sub-directory of the one that the file you are linking from is in.

Finally, to link to that label from a document on another computer you need the full URL plus the label at the end:
<A HREF="www.yourcomputer.com/tutorial/homepage.html#section2">

I don't recommend doing that -- it's very dangerous to link to a label in a Web page over which you have no control. One day soon they'll rewrite that page, and the label will change or disappear, and your link will not work any more, even if the same file still exists on the same computer.

One last point about labels: if you put a label less than one screen before the end of the page, clicking on the link to it will display the last screen of the page, since that is the least amount of information that the browser can display. Exactly how much fits on the last screen depends of course on the size of the window the user is running the browser in, his or her screen resolution, etc.

The solution: if the last heading or item you want to link to is very near the end of the page, insert a few empty line breaks at the end of the page to "pad" that last screen.