Relative Addressing

Relative addressing, when done properly, saves effort and allows you to save your pages in a number of different directories and on different drives or systems while keeping all your references to links in tact. The examples below present this approach.

Let us assume the following directory setup on our PC and on our server. The files located in each of the specific directories are shown to the right as (file_name). For example, (goodjunk.html) is located in the directory <stuff>.

PC

Directories	Files
c:\www\	(index.html)
c:\www\graphics\	(cat.gif)
c:\www\topic1\	(mugwump.html)
c:\www\topic2\	(whatever.html)
c:\www\topic2\stuff\	(goodjunk.html, dog.gif)

Server

Directories	Files
home/www/	(index.html)
home/www/graphics/	(cat.gif)
home/www/topic1/	(mugwump.html)
home/www/topic2/	(whatever.html)
home/www/topic2/stuff/	(goodjunk.html, dog.gif)

Now let's say we want to 'call' (cat.gif) from (whatever.html). We use the relative address:

<img src="../graphics/cat.gif" />.

This is read as 'go up one level to <www> then down to <graphics> and fetch (cat.gif).'

Now let's say we want to 'call' (cat.gif) from (goodjunk.html). We use the relative address:

<img src="../../graphics/cat.gif" />

This is read as 'go up two levels to <www> then down to <graphics> and fetch (cat.gif).'

Now let's say we want to 'call' (cat.gif) from (index.html). We use the relative address:

<img src="./graphics/cat.gif" />

This is read as 'from where you are go down to <graphics> and fetch (cat.gif).'

Finally let's say we want to call (dog.gif) from (mugwump.html). We use the relative address:

<img src="../topic2/stuff/dog.gif" />

This is read as 'go up one level to <www> then go down two levels through <topics2> to <stuff> and fetch (dog.gif).'

This process might be likened to being in a hotel room. When you are in your room you can't even see the other room. You need to go out into the hallway first <www> to travel to another room. If you are in your bathroom you first need to re-enter your main room and then the hallway to travel between rooms. Remember that, every time it is used, ../ means go up a level in the directory structure (e.g., ../../../ means go up three levels). Also ./ means don't go anywhere. Start from your current location.

Note that this process only works if you set up your directories (i.e., folders) correctly. Also note that the same image calls work for our PC and for our server in spite of very different drive arrangements.

Finally in the interest of clarity a minimal <img ...> format was used above rather than the complete format<img; src="path/file_name" alt="image description" height="xx" width="yy" style="property: value;" />