ITSS WebDev Guide

2 Creating your site : Absolute or relative links

Absolute links or relative links

There are three ways to make a link, an image tag, or any other URL based tag. There are absolute links and there are two types of relative links, server relative and file relative. Which type you use depends on where the file being referenced resides.

Absolute links are the ones that contain the entire URL of a file such as these:

<a href="http://www.d.umn.edu/itss/webdev/">Web Development Guide</a>
<img src="http://www.d.umn.edu/itss/logo.gif">

Relative links reference a file by its relative location to the server's main web directory (server-relative) or relative to location of the file containing the link (file-relative).

Server-relative links all start with / and are basically the absolute URL without the http:// and server name "http://www.server.name". The links above would now look like this:

<a href="/itss/webdev/">Web Development Guide</a>
<img src="/itss/logo.gif">

File-relative links behave a little differently. For instance, if you have an index.html file in your www directory and a graphic file, logo.gif, in the same directory, here are the three ways to reference that file:

<img src="http://www.server.name/yourdirectory/logo.gif">
<img src="/yourdirectory/logo.gif">
<img src="logo.gif">

As you can see, the last tag, a file-relative link, is much shorter. This has several advantages, the URL is shorter to type, there are fewer characters to send over the internet (better download time for the html file), and this code is much more portable. Absolute links are still needed to link to files on other sites and server-relative links some times work better for linking to other files on the same server.

Portable code such as relative links are very nice in the event your web site ever moves. For instance, if you first put your web site onto a server and later move it to a new server, you simply copy all the files to the new server and it is ready. The same thing goes for moving it from one account or directory to another account or directory if you use file-relative links. With absolute referencing, every single URL based tag would need to be fixed or your tags would be pointing to files that no longer exist at the old server. Relative referencing works nicely when moving parts of your web site around. There is of course the possibility that relative links may need to be changed if one file moves in relation to another.

One other nice thing about using file-relative links is that you can work on web site files on your hard drive. You can then use the browser to view your site right on the hard drive and see the links working and the images load.

Here is a sample web site directory to help with understanding relative links.

http://www.server.name/yourdirectory/
 
www:
cgi-bin  fossils  geology  index.html  shared  volcanoes
 
    geology:
    igneous  index.html  metamorphic  sedimentary  shared
 
        sedimentary:
        alluvial.html  glacial.html  index.html  pics  slump.html
 
        shared:
        footer.html  logo.gif  marble_back.jpg

 
            pics:
            cross_cut.jpg  fan.jpg  herring_bone.jpg  potter_noster.gif

In the above file listing (see a graphic representation), we will use the glacial.html as the file with the file-relative links in it. This file currently resides at the following URL:

http://www.server.name/yourdirectory/geology/sedimentary/glacial.html

To use the marble_back.jpg as a background image, we would use the following relative reference:

<body background="../shared/marble_back.jpg">

The ../ tells the browser to look in the parent directory of the current directory. In this case, the browser looks in the parent directory of sedimentary which is geology then looks for a directory named shared in the geology directory and then for a file named marble_back.jpg in the shared directory to use as a background image.

Now we will make some relative links to the slump.html that is in the same directory as the glacial.html and to the potter_noster.gif which is inside the pics directory in the same directory as the glacial.html:

<a href="slump.html">See some examples of slump deposits</a>
 
<img src="pics/potter_noster.gif"><br>
Diagram of Potter Noster Lakes<br>

In the first example above, we reference the slump.html with just the file name. In this case, the browser does not see any .. or any / so it assumes that the file will be found in the same directory as the glacial.html. In the second example, we use the same format since the pics directory is in the same directory as glacial.html. The /potter_noster.gif tells the browser that the image is inside the pics directory.

It may take a little experimenting to get used to using relative links but the benefits are well worth the effort of learning to use them. Even if you never move your site, the reduced typing (if you hand code URL's) and file sizes are a great advantage of relative links.

Rev: ajm 11.04

Inside WebDev Guide

ITSS WebDev Guide

Absolute links or relative links