Relative addresses in URLs |
When you create a link in an HTML document, using an <a href=""> tag, you will need to specify the destination of the link. The simplest case is that where a complete URL is given. For example:
<a href="http://www.thuto.org/ubh">Link to Botswana History site</a>
producing
Link to Botswana History site
This is an absolute address.
When a link is to an external site, you will need to use a complete URL in this way. Note that the http:// must always be included.
However, when you refer to a page within your own site, it is normal to use a relative address. This is an address relative to the position of the source link. One reason for using relative addresses is that you may alter the arrangement of folders within your site: if all the addresses were absolute you would have to change all of them, whereas with relative addresses those which retain the same relative position are unchanged.
The following is intended to explain how to understand relative addresses. It is written mainly with Windows users in mind, because
You already know that, on a computer disk, your files are organized into folders (also known as directories). A file is anything with actual content, such as a word-processed document, an image file, or an application. A folder merely contains things. A folder can contain files, or folders, or both. If you open the Windows Explorer (Start Menu, Programs). you will see how the folders are organized on your hard drive.
On a normal PC, everything is stored on a hard drive, usually labelled "c:". (The Floppy disk (whichever one is inserted at the moment) is usually called "a:".) On the hard drive, there are a number of folders. Within these folders are more folders. Folders are thus nested one inside in the other in a hierarchy. Think of it as a sort of tree diagram, starting from c: at the top. The "top level" is things stored on c: which are not inside folders. E.g. consider the following simplified example:c: | ------------------------------------- | | | FILE1 folder1 folder2 | | ------------------- FILE2 | | folder3 FILE3 | ---------- | | FILE4 FILE5
FILE 1, folder 1 and folder 2 are all at the "top level".
Here is another way of looking at it, which is slightly more technical but which actually makes things rather clearer. Files are the things that are stored on a computer disk - a Word document, a web-page, a program, an image (graphic, i.e. a picture), a spraedsheet or whatever. A file has a name (a filename, in fact) such as REPORT.DOC.
A directory is a special sort of file. Instead of containing anything directly useful like a Word document or a picture, it just contains a list of other files. In fact it tells the computer where to find these files. A directory is the same thing as a folder; when we talk of it as a folder (the usual name in Windows) the name suggests a mental image of it as a sort of container that contains files and other folders - like a manilla folder in which we store papers. The name "directory" (the usual name in DOS and Linux) suggests a mental image of a series of pointers which lead eventually to the file we want.
In the example above, to reach FILE4 we go from C:
to folder1, to folder3, to FILE4. Using the image of
"folders" we say that FILE4 is in folder3, and folder3 is
in folder1 (and folder1 is on the C: drive). Using the image of
"directories" we say that the path from C: to FILE4
is C: - folder1 - folder3 - FILE4
We write this as
C:\folder1\folder3\FILE4
This is a pathname.
(Note that in DOS and Windows we use backslashes (\)
but in Linux, and in writing URLs, we use forward
slashes (/).
Note that you cannot have two files in the same directory with the same name (if you did, there would be no way of distinguishing them; they would both be C:\folder1\folder3\FILE4). But you can have files with the same name in different directories. You can think of this as like families: parents cannot have two children with the same name, but there is no problem with two children in different families having the same name. [This analogy is borrowed from the School of Mathematics, Statistics and Computer Science, University of New England, Armidale NSW, Australia, http://turing.une.edu.au/dept/material/other/ugguide/Unix_File_System.html.]
Windows shows you this in terms of icons. The next step,
however, is to see what they look like on the command-line.
To do this you must start a "DOS window". (DOS is a command-line
operating system that was the predecessor of Windows, and you
can still use it for some purposes.) Go to
Start Menu, Programs,
MS-DOS Prompt (or "Command prompt"). This will start
a window which will look something like this illustration.
In this window, you cannot use the mouse. You can only
use the keyboard. What you type appears in the last line.
This is called the "command line" because you use it to enter commands. Notice that at the left of the line is
C:\WINDOWS>
This indicates the folder that you are currently "in".
Every line will start with this "prompt". Try pressing the
Return key, and you will see that the prompt appears again.
C:\WINDOWS
means
"On the C: drive - folder WINDOWS". It shows
a path, starting at the top. The backslash "\" indicates
a change of level; or, to put it another way,
folder\FILE
means "this file in this folder".
You can specify a file anywhere on the
hard disk by giving its path. For example, consider the imaginary
example above. FILE4 can be specified by
c:\folder1\folder3\FILE4
- i.e., FILE4 is in folder3, which is in folder1,
which is at the top level of the c-drive.
In this example we have given each file a unique name,
but in fact two files can have the same name as long as they
are in different folders. Hence the need to specify the
folder as well as the file name
From the command line, you can change the "current directory"
by means of the "cd" (change directory) command. If you type
cd foldername
the computer will look for a folder of this name in the current
directory, and go into it. (Note that you must press the Return
key after entering a command. Until you press Return, nothing
happens and you could backspace to delate the command and do
something else.) To go up a level, you type
cd ..
The ..
means "the directory above this one". If the
current directory is C:\WINDOWS, and you type
cd ..
the directory will become C: (i.e. top level). See the
following illustration:
C:\WINDOWS>cd .. C:\>_ |
We will now create some folders and files to illustrate relative addresses.
cd ..
" to go up a level.mkdir test1
"cd test1
" to change to this directory.Your window should look something like this:
C:\WINDOWS>cd .. C:\>mkdir test1 c:\>cd test1 C:\test1>_ |
You are now in folder c:\test1". Next we create another folder and some files.
C:\test1> C:\test1>mkdir test2 C:\test1>cd test2 C:\test1\test2>_ |
mkdir test2
means "Create directory test2 within c:\test1"
cd test2
means "Change directory to c:\test1\test2"
Next we create small files both in test1 and in test2.
We will do this with the command
echo ZZZ >temp2.tmp
which creates a file temp2.tmp with the contents "ZZZ".
Don't worry about this - this is a command you don't
need to understand for our present purposes.
C:\test1\test2>echo ZZZ >temp2.tmp C:\test1\test2>cd .. C:\test1>echo YYY >temp1.tmp C:\test1>_ |
We are now in test1. If we type
type temp1.tmp
we will get the contents of file temp1.tmp i.e. "YYY":
C:\test1>type temp1.tmp C:\test1>YYY C:\test1\>_ |
But if we type "type temp2.tmp
" we will get a
"File not found" message, because this file is not
in the current directory. Instead we need to type
C:\test1>type test2\temp2.tmp C:\test1>ZZZ C:\test1>_ |
Note that we did not need to give the whole
path from the top. "test2\temp2.tmp" means
(i) look for folder test2 (in this directory)
(ii) within that folder, file temp2.tmp
Now we will change the directory to test2, and
then look for file temp1.tmp (which is in the
upper-level folder test1). To indicate "folder above"
we will use ..
C:\test1\>cd test2 C:\test1\test2>type ..\temp1.tmp C:\test1\test2>YYY C:\test1\test2>_ |
You now have the basic information necessary to write relative addresses in HTML. Before we do this, however, there is just one thing to note: whereas DOS uses the backslash "\", in HTML you must use the forward slash "/". But the way it works is the same.
Consider now the following HTML files, arranged in directories as follows:
www.ub.bw | --------------------------------------------- | | | dir. "xx" dir. "yy" aa.htm | | ------------- | | | | x1.htm x2.htm y1.htm
Now consider a link from x1.htm to x2.htm.
Since these are in the same directory, all you
need is the file name. So it will be
<a href="x2.htm">
Next, consider a link from aa.htm to x1.htm.
The link must specify
(i) directory "xx"
(ii) file x1.htm
so the relative address is
xx/x1.htm
(NB the forward slash "/".) So we have
<a href="xx/x1.htm">
What we are writing here is in effect a pathname similar to what we saw earlier. A path starts either at the root (C:\ etc) or from the directory you are currently in. For URLs we normally start from the current directory.
Next, consider a link from x1.htm to aa.htm. The link
must specify
(i) up one level
(ii) file name aa.htm
so we get
<a href="../aa.htm">
Notice that here have used .. to indicate that our path goes up a level.
Finally, consider a link from x1.htm to y1.htm.
The link must specify
(i) up level
(ii) directory "yy"
(iii) file y1.htm
so we get
<a href="../yy/y1.htm">
You can also write a link in terms of the root,
rather than starting from the current directory. You indicate
the root by "/". For example,
<a href="/ubh/index.html">
if found anywhere in the site www.thuto.org, points to
www.thuto.org/ubh/index.html
Thus, starting with "/" means starting with the top
level of the site. In general we recommend thuto.org
site users to avoid this.
Basically, that's all there is to it! To familiarize yourself with the way this works, I suggest the following exercises:
If a URL starts with "/", this means that the
start of the path is the top level of the whole site.
Thus, for any page in the thuto.org site,
<a href="/ubh/index.html">
is a link to the History Home Page,
http://www.thuto.org/ubh/index.html.
The link
<a href="/">
would link to the default page of thuto.org,
i.e the page you get with http://www.thuto.org.
This is not very useful unless you are running your
own complete site.
In DOS or Unix, "/" means the "root" i.e. the start
of the tree (directory trees grow downwards!) Thus
in DOS, the command "cd \
" is a quick
way of getting to the top level.
Copyright 2002 B. S. Bennett
Last updated 28 May 2004