|
|
|
A relative URL is essentially a set of directions to a resource from your current location, like directions to the corner store given from your home or office. A relative URL is usually given in terms of the current location of an HTML page, whether it be on the Internet or elsewhere.
Relative URLs are, essentially, paths from the current HTML page location to the desired resource. These paths require special prefixes in order to operate correctly, as well as to maneuver through the server's directory structure.
There are three prefixes for relative URLs:
./ ../ /
./
(pronounced "dot-slash")
Conservative syntax for plain relative URL; it means "look for the resource in the same directory."
Example:
I am currently on index.html. There is a resource called page2.html in the same directory.
Relative URL from index.html to page2.html:
./page2.html
Hyper-reference on index.html using this URL:
<a href="./page2.html">Link to Page 2</a>
../
(pronounced "dot-dot-slash")
This means: "go up one directory level and start looking for the resource."
If you need to go up more than one directory level, add one "../" for each directory level you need to ascend.
To go up two directory levels and then start looking for the resource:
../../
To go up three directory levels and then start looking for the resource:
../../../
(and so on...)
Example (try drawing this out on a piece of paper):
I am currently on index.html, which is located in folder "gertrude". "gertrude" is located inside a folder called "harry". "fred" is another folder inside "harry"; thus, fred and gertrude are sibling folders inside the parent, harry. "fred" contains an HTML page called page5.html.
Relative URL from index.html to page5.html:
../fred/page5.html
Hyper-reference on index.html using this URL:
<a href="../fred/page5.html">Link to Page 5</a>
/
(pronounced "slash")
This means: "go to the root directory for the web server and start looking for the resource." A root directory for a web server is the single folder which has been assigned as the "public" web folder; any resource inside this "root directory" may be served to the outside world via the Web; no resources OUTSIDE this root directory may be served via the Web. For instance, the default HTML page in the root directory of Yahoo is invoked when I use the absolute URL,
Example:
Inside my main web folder (my root directory), I have a folder called "bernard". "bernard" contains an HTML page, page6.html.
Relative URL for page6.html that would work from any page on my server:
/bernard/page6.html
Hyper-reference using this URL:
<a href="/bernard/page6.html">Link to Page 6</a>
Note how we use additional slashes after directory names to create a complete path to a resource (this is done with all types of URLs). If we were looking at a folder called "harry" which sat in "bernard" above, and "harry" contained a resource called page8.html, we could access that resource using this syntax:
/bernard/harry/page8.html
If we were trying to create a relative URL depicting the path from page6.html to page8.html in the two examples above, it would look something like this:
./harry/page8.html
If we were trying to create a relative URL depicting the path from page8.html to page6.html, it would look something like this:
../page6.html
To further clarify how relative URLs work, I have created a series of nine illustrations which show the URL relationships between various files.
In the following examples, we will use A (anchor) tags to create hyper-references using relative URLs. Relative URLs, however, may be used with ANY tag that requires a URL, such as IMG or FRAME, among others:
Note: The relative URL prefix, "./", is left out by many people as a kind of relative URL shorthand. The following relative URLs would operate identically in today's browsers under normal circumstances:
<a href="./page2.html">Link</a>
is the same as:
<a href="page2.html">Link</a>
and
<img src="./graphics/capitalA.gif" width="54" height="54" />
is the same as:
<img src="graphics/capitalA.gif" width="54" height="54" />
Omitting the "./" prefix, however, may cause your pages to break under some conditions, such as when pages are served from a CDROM rather than a web server, or when you are using specialized technologies like Shockwave or Flash. Therefore, I recommend that you ALWAYS use the "./" prefix, as it will ensure that your relative URLs operate under ALL conditions.
Note on default HTML page names: If you are planning on serving your website from anything other than a web server (i.e. via a CDROM or over a company intranet which is not utilizing a traditional web server), make certain that you state ALL URLs explicitly, e.g. don't imply or leave out the default page name from your URL. For instance, if you were creating a relative URL to the default page for a folder, as with index.html in "gertrude" in the pictorial examples given above, you would always state the actual default page name as part of your URL rather than leaving it out (i.e.
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.