Relative vs. Absolute Links

Up until this assignment, all your links have been to pages in the same folder. If the file is in the same folder, a link to the name of the file is all that's needed. If the file is in a different folder, the hypertext reference must contain information that gives the browser directions in finding the referenced file. Suppose you have a web site with two folders (assignment06 & assignment07), as in the picture below.

Suppose we want to create a link on the assignment06 default.htm page that will take us to the default.htm document in the assignment07 folder. The HTML for this link can be either a relative link or an absolute link.

A relative link describes how to move up and out of the assignment06 folder, and down into the assignment07 folder. This kind of link relies on the the fact that you are starting in a "known" location. The notation in this case would be

Move up one folder, into the 565 folder

From the 565 folder, move down into the assignment07 folder

Locate the file called default.htm in that folder

The HTML code would look like this.

The "dot dot" is the code that tells the browser to go up one folder. Once in that folder, the browser is directed to the /assignment folder and pointed to the appropriate file (/default.htm).

This relative link will only work if the initial page is on the same server, and in a folder right beside the destination folder. If the same HTML code were to be placed on the 565/DEFAULT.HTM page (the "Main" page), it would not work. That is because the first step the browser will do is go up one folder. That would put the browser into the trusty folder, and there is no assignment07 folder in the trusty folder.

Relative links must be created with a knowledge of where the initial and destination files are located in relationship to each other.

Absolute Links