There are two ways of linking from an HTML file to other resources (files, images, style sheets, and others):

• Absolute Reference uses the complete URI of a resrouce
  • Uses the Internet to find the resource
  • Necessary when the resource is on a different server
  • Can be used for files on the same server
• Relative Reference is a way of explaining where a file is relative to the file containing the link (the "linking file").
  • Uses the server's internal system to find the resource
  • Can be used only when files are on the same server - that is, the server and domain names are the same, the only difference being the file name or path.

When you create a link to Web pages outside your site, you need to give the entire URL - for example, 

http://courses.wccnet.org/computer/mod/w23d.htm

When you're building the pages, they will be on your own computer, but when they're ready, you'll move them to the server.

When your server gets reorganized, or when you move to a new server or domain name, the files will be moved.

When I want to include a link in this module to another instructional module, I don't give the entire URL because all the modules are in the same directory - both on the server and on my own computer.

Suppose I want a link to module W55h "Uploading and Updating your Web Site". I link it simply with the file name w55h.htm . Browsers know that wherever the current module, w23d, came from, this other module should be in the same directory. The browser will fill in the address...

If I'm viewing it on my own computer, this file's address is:

file://localhost/C:/W/WEB/computer/mod/w23d.htm

so it completes the reference to the other file, making it

file://localhost/C:/W/WEB/computer/mod/w55h.htm

If I'm viewing this page on the Web, its address is

http://courses.wccnet.edu/computer/mod/w23d.htm

so the browser completes the address this way:

http://courses.wccnet.edu/computer/mod/w55h.htm

What if the files are in different directories? The file I want to link to may be on the same server, but in a different directory. The directory may be in any of three possible relationships with the file I'm working in:

• Down: in a directory that's a subdirectory under my current file's directory
• Up: in the parent (or "grandparent") of my current file's directory
• Over: in a different subdirectory of my current file's parent directory

In these examples, we'll be using this module's HTML file as the "current file". Its complete URL is:

http://courses.wccnet.edu/computer/mod/w23d.htm

Down-Links

If the file is down one level from the current page, simply put the name of the directory name file you want. Module W25d has a subdirectory for its example files; one such file is goldenrod.htm, whose URL is:

<a href="http://courses.wccnet.edu/computer/mod/w25d/goldenrod.htm">

Here's the relative link to that file from this page:

<a href="w25d/goldenrod.htm">

Notice that there's no "/" in front of the directory name here. Adding a slash would throw the relative reference entirely off, because "/" at the beginning of a relative link means "start at the root of the Website."

Up-Links

If the file is up one directory or folder level, use two dots. For example, the computer instruction page is one level up from the "mod" directory. The address of the computer instruction info page is:

<a href="http://courses.wccnet.edu/computer/">

From this document, the relative link would simply be:

<a href="../">

To address files several levels up, add more sets of ../ marks. This example is hypothetical:

<a href="../../../sitemap.htm">

Over-Links

If the file is under the same parent directory in a directory at the same level as the one this page is in, use the two dots followed by the name of the directory and the file. For example, a review of learning style measurement instruments is located at:

<a href="http://courses.wccnet.org/computer/krieg/research/learnsty.htm">

From this document, I would link it with:

<a href="../krieg/research/learnsty.htm">

Example Web Site: www.webshop.com

Figure 1. (Assume all Web files end with .htm and all images end with .gif.)

The index file in the third row (pink) is the file we're working on in this example. This will be our "linking file" in this example. We want to link to a number of other files.

But first: what is its complete URL?

http://www.webshop.com/shop/index.htm

The (X)HTML to do this is the simplest: just put the name of the file in the Href parameter. In this example, guide.htm is in the same directory. Here is the link to it:

<a href="guide.htm">Webshop Guide</a>

A down-link is one the refers to a file in a subdirectory contained in the same directory as the linking file. An example here is the file fiction.htm in the books directory. Here is the link:

<a href="books/fiction.htm">Current Fiction Listings</a>

Use:

1. the name of the subdirectory
2. a forward slash
3. the name of the file itself

Up-links

Up-links are one that point to a file in a directory above the linking file. Let's link to the file about.htm in the public_html directory:

<a href="../about.htm">About Webshop.com </a>

Use:

1. two dots to move upward
2. a forward slash
3. the name of the file itself

Links that go to a file in a completely different subdirectory are over-links or "cross-links". The reference points up from the current directory, then down to another subdirectory, through a series of subdirectories if necessary. Let's refer to icon1.gif in the "new" subdirectory of the "images" directory:

<img src="../images/new/icon1.gif"/>

Use:

1. two dots to move upward
2. a forward slash
3. the name of the subdirectory
4. another forward slash
5. the name of the file itself

Try this for practice:

1. Create the images and shop directories under your own public_html directory.
2. Create simple place-holder files to represent the other files shown in Figure 1 above.
3. Save any two handy images in images/new and images/old.
4. In shop/index.htm, put links to each of the other files in the structure and test them to see if they work correctly.