Relative Addresses

Relative Addresses

The term "path" is sometimes confusing for new users of the Web. However, it is really a simple concept: A path is the sequence of directories that must be traversed to get from one directory to another (On Macintoshes directories are often called "folders"; we will use the two terms as synonymns). In order to construct all but the simplest of Web documents, it is useful to know the basics of how to specify paths between directories and files.
The subsequent material in this section is somewhat more technical than the preceding discussion. It is not essential to casual Web use, but is important if you plan to construct your own Web site.
Directory Hierarchies
Consider the directory structure shown in the figure below.

This typical directory structure has a master directory (usually called the root directory and designated by the symbol "/") that contains within it all other directories as subdirectories, and each directory so contained may itself contain subdirectories. In this example the root directory contains the directory Dir1, and this directory in turn contains the directories Dir2 and Dir5. Finally, Dir2 contains subdirectories Dir3 and Dir4, while Dir5 contains a subdirectory Dir6.
The files on the system are contained in these directories. In the figure some representative files are illustrated in red. For example, the file index.html (see the green arrow) is contained in the directory Dir2, which is a subdirectory of Dir1, which is finally a subdirectory of the root directory.
Directory Trees
Another useful way to look at this directory structure is in terms of a Directory Tree. The adjacent figure shows a tree diagram corresponding to the directory structure illustrated in the first figure. If we view this as a tree (fallen on its side), the branches of the tree correspond to the subdirectory structure. If you stand the directory tree upright, this analogy also makes clear why the master directory containing all other directories is termed the "root" directory.

Paths
The directory tree diagram illustrates graphically the meaning of a path: it literally is a path: the (shortest) one that we would follow on the directory tree to go from one directory to another. For example, consider the files illustrated in the first diagram. Suppose we ask what the "path" is from the file index.html to the file file3.ext. The file index.html is in the directory Dir2 and file3.ext is in the directory Dir3. From the tree diagram, to get from index.html to file3.ext we must first go to the directory Dir3, which is contained in Dir2. We say that (relative to the file index.html ) the file file3.ext is at the location Dir3/file3.ext. Likewise, relative to the directory Dir1, the file file3.ext is at Dir2/Dir3/file3.ext, and so on. Examples such as these are termed "specifying the relative path to a file" from some starting point.

Specification of Paths
Thus, the complete path to a file that lies in a subdirectory of your present directory is specified by listing, in order, the directories (omit the one that you are in) that you must pass through to get to the file, with slashes after each directory name, and followed finally by the file name. Pretty simple, once you get the hang of it!
But what if the file is not in a subdirectory of your present directory? For example, where is the file file6.ext (which is in Dir6 ) relative to the file index.html? The same rule applies as before, but the adjacent figure illustrates that to get to the directory Dir6 from the directory Dir2 we must first go BACK in the directory hierarchy until we reach a directory that contains Dir6 (and, of course, Dir2) in its subdirectory structure.
Thus, to reach file6.ext from index.html we go back to Dir1, then to its subdirectory Dir5, and then to its subdirectory Dir6. The notation that is used to go back one level in a directory hierarchy is ".. /" (two dots, followed by a slash), and we may say that the location of file6.ext relative to index.html is .. /Dir5/Dir6/file6.html, as illustrated in the preceding figure.

Absolute and Relative Addressing
The examples of addresses we have just been considering are termed "Relative Addressing", because the location is specified relative to our present location. However, notice that we could also specify an "Absolute Address" for files by going back to the root directory and writing the complete path to the file from there. In the previous example, the absolute address of file6.ext is /Dir1/Dir5/Dir6/file6.ext, where the initial "/" stands for the root directory.
Notice the difference between absolute and relative addresses: if I move the file index.html to a new directory, the address of file6.ext relative to index.html changes, but its absolute address remains the same.
On the other hand, suppose I move the entire directory structure to the right of "Root" in the directory tree intact to a new location on the same computer or a different computer, as illustrated in the adjacent diagram. Then generally the absolute address of file6.ext would change, but its address relative to index.html (indeed, relative to any file in the directories that I moved) would stay the same.
Thus, in the preceding diagram the absolute address of file6.ext is /Dir1/Dir5/Dir6/file6.html in the upper example and /new/www/Dir1/Dir5/Dir6/file6.html in the lower example, but since the part inside the gray boxes is the same in the two cases, the relative address as referenced from index.html is unchanged.

Use Relative Addressing Whenever Possible
Absolute and relative addressing clearly each have advantages and disadvantages, but in producing Web pages it is advisable to make addresses to files on the same machine relative addresses unless there are circumstances dictating otherwise. Then, if the directories containing your Web pages are moved intact to another machine the links among these files should still work properly. If instead the files are specified by their absolute addresses, the links to local files in your directories will often "break" when you move the files, because the absolute addresses will generally change. Repairing these broken links can be a time-consuming task if your site involves many files.
Homepage Exercise: Relative and Absolute Addresses
Let's use your homepage folder and files to illustrate some of these ideas. Open your homepage folder and do the following:

Create a new folder inside your homepage folder; call it "gifs".

Use the Browser to go to the address
http://csep10.phys.utk.edu/next.gif.
Save the image that is displayed into your homepage folder with the default name "next.gif" by holding the right mouse button down over the image, choosing "Save this Image As", and selecting your homepage folder in the resulting dialog box.

Use the Browser to go to the address
http://csep10.phys.utk.edu/previous.gif.
Save the image that is displayed in the folder "gifs" that you created inside your homepage folder with the default name "previous.gif" (NOTE: Read the instructions carefully; this file goes to a different folder than the one in the previous step!).

Open your homepage file index.html with the editor and insert the following HTML code at a convenient place:

   <h2> Examples of Absolute and Relative URL's </h2>
   
   This image has an absolute address of "?":
   <p>
   <img src="?">
   <p>
   This is the same image displayed with a relative address
   "next.gif":
   <p>
   <img src="next.gif">
   <p>
   Here is another image in a subdirectory "gifs" 
   of the present directory; it is displayed using the
   relative address "gifs/previous.gif"
   <p>
   <img src="gifs/previous.gif">
   <p>

Save the homepage file, but leave the file open in the editor.

Use "Open File" from under the "File" menu of your Web Browser to open the image "next.gif" saved in your homepage folder. Copy the address displayed in the "Location:" window of the browser with the mouse. This is the (absolute) URL address of the file on your machine. It will typically look something like:
```
   file:///maindisk/myfolder/next.gif
```
(but the exact directory path will depend on your machine). Go to the homepage file still open in the editor and REPLACE THE TWO OCCURRENCES OF THE QUESTION MARK (?) WITH THE URL ADDRESS YOU HAVE JUST COPIED WITH YOUR MOUSE. Save the homepage file, and close the editor.
Supplementary Note: The preceding URL is the form for a URL address of a file on the same machine as the browser. The "file://" part tells us that. There then follows the absolute address of the file on the machine. In the example given above the absolute address is /maindisk/myfolder/internet_resources.gif. Notice that this explains why there are 3 slashes after a "file:" in URL addresses, but only two slashes after "http://"; the first two slashes are part of the specification for the method of transferring the file, but the third slash actually stands for the root directory on your machine in "file:///".
Now display your homepage with the browser (reload if necessary).

Your browser display should show something similar to the material between the following two horizontal lines:

Examples of Absolute and Relative URL's

This image has an absolute address of "file:///mormus/webcourse/next.gif":

This is the same image displayed with a relative address "next.gif":

Here is another image in a subdirectory "gifs" of the present directory; it is displayed using the relative address "gifs/previous.gif"

These elementary examples illustrate the difference between absolute and relative addressing, and how to implement relative addressing for the two simple (but common) cases where the file being addressed is either in the same directory as the HTML file (the next.gif example), or in an immediate subdirectory of the HTML file (the gifs/previous.gifs example). As we have noted above, it is generally advisable to use relative addressing in your Web pages to increase portability.

Next Back Top Home Help