Relative addressing, when done properly, saves
effort and allows you to save your pages in a number of different directories (i.e., folders)
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, Hw2.htm is located in the directory Hw2.
PC
c:/IT130/ index.html
c:/IT130/Images/ me.jpg, dog.jpg, logo.gif
c:/IT130/Hw1/ Hw1.htm
c:/IT130/Hw2/ Hw2.htm
c:/IT130/Hw3/ Hw3.htm, aboutus.htm
c:/IT130/Hw3/Asgn/ Assignments.htm
Server (students.depaul.edu)
/yourname/public_html/IT130/ index.html
/yourname/public_html/IT130/Images/ me.jpg, dog.jpg, logo.gif
/yourname/public_html/IT130/Hw1/ Hw1.htm
/yourname/public_html/IT130/Hw2/ Hw2.htm
/yourname/public_html/IT130/Hw3/ Hw3.htm,
aboutus.htm
/yourname/public_html/IT130/Images/Hw3/Asgn/
Assignments.htm
Now let's say we want to reference dog.jpg from Hw1.htm. We use
the relative address:
<img src="../Images/dog.jpg" />.
Note: We do not write
<img src="http://students.depaul.edu/~yourname/IT130/Images/dog.jpg" />
This
is read as 'go up one level to IT130 then down to Images and
fetch dog.jpg.'
Now let's say we want to reference dog.jpg from Assignments.htm. We use
the relative address:
<img src="../../Images/dog.jpg" />
This is read as 'go up two levels to IT130 then down to Images and fetch dog.jpg.'
Now let's say we want to reference dog.jpg from index.html. We use
the relative address:
<img src="Images/dog.jpg" />
This is
read as 'from where you are go down to Images and fetch dog.jpg.'
This process might be likened to being in a hotel room. When you are in your room you can't even see the other rooms. You need to go out into the hallway first IT130 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).
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.
Absolute addressing specifies not only the location on the server, but the server itself. Notice that the addresses are unique to the servers, and are not portable. Use Absolute Addressing to link to other sites. So, for example, to link to this page from a page on your website you write <a href="http://condor.depaul.edu/~gandrus/130/docs/Reladdr.htm"> . . .<a>.