| The term URL stands for Universal Resource
Locator, and is pronounced like the man's name, Earl. Essentially, it means the
Internet address of a web page.
What's an Absolute Path?
There are two ways to put links to Internet addresses on your webpages. One way is
to use absolute URLs in the HREF="..." attribute (i.e., a site's entire Internet
address, all the way from the http:// on down to the pagename.html). These URLs show
an "absolute" path through a folder structure to a Web page, from the server
down to the specific file. For example, the absolute path for this web page
is:
http://teachertech.rice.edu/Materials/GT2001/East/day04/urls.html
Absolute paths are essential when linking outside
of your site because your browser can't locate a file on the Web unless it knows the
site's exact location. When you click on an absolute path to a web page on the
Internet, you have to have a live Internet connection to reach that site. This can
be a problem if you want to test your pages on your computer before making them live.
For this reason, when you're linking to another page within your own site, it can
be helpful to set up your links using relative paths instead of absolute paths.
What's a Relative Path?
Relative paths tell your browser the location of
other Web pages within your site's folder structure "relative" to the page you
happen to be viewing, using a shorthand of "../" to indicate movement one level
up in the folder hierarchy. To move two levels up, just double the shorthand by
using "../../" (Old-school DOS and UNIX users will recognize this
shorthand immediately.) The page you're reading right now is in a folder called "day04".
The image we used at the top of our Pre-test page is located in the images
folder (which is in the East folder, just like the day04 folder
is). If we wanted to link to the Pretest image from this page, we could either write out the absolute path,
like this:
http://teachertech.rice.edu/Materials/GT2001/East/images/testlogo.jpg
Or we could write a link indicating the picture's
location relative to this page's location, i.e., the "testlogo.jpg"
image in the images folder, which is the same level as the "day04" folder, like this:
../images/testlogo.jpg
 |
Look at it this way. To the left is the directory
structure of the folders for this class. All of these files are inside a folder
called "East", because we were originally scheduled to teach
this class in the Eastern half of a lab called Symonds II. There are only three files in
the "East" folder, but there are eleven other folders inside
the "East" folder (and many other files inside those eleven
folders, of course). If we made a link on this web page (which is in the folder
named "day04") like this
<a href="../index.html">../index.html</a> it
should produce this link../index.html
it should take us out of this "day04 folder", and up one level (which is the
East folder). Since there's an "index.html" file in the "East" folder,
we should find ourselves back on the main page when we click on the link. Try it.
If we made a link on this page like this
<a href="../../">../../</a> it should
produce a link like this next one
../../
It should take us out of this folder, up one level (to the East folder), and up one more
level (to the GT2001 folder). There is no "index.html" file in that folder,
so we should just see a directory structure when we click on that link. Go ahead. |
If we wanted to leave the "day04" folder
and see a file inside the "day02" folder, a relative url would look something
like this. <a
href="../day02/thumb_rac.jpg">../day02/thumb_rac.jpg</a>
It would produce a link like this../day02/thumb_rac.jpg
That link should move us out of the "day04" folder, into the
"day02" folder, and display the picture "thumb_rac.jpg". See if
it does. |
Here are some more examples:
<A HREF="../index.html">
This link would take you to the index page one folder
level above the page where the link appears.
<A HREF="../../index.html">
This link would take you to the index page two levels
above the page where the link appears. Note, when you end your URL in a
"/" the browser will look for and load the index.html file in that folder,
meaning that you could leave it out of either of the two preceding examples, and write
them like this:
<A HREF="../">
<A HREF="../../">
If you want to climb up three directory levels and
then down into another branch of the filesystem tree, just append the new path like this:
<A HREF="../../../content/basics">
would take you to a folder two levels up and then down into a folder named
"content", into a folder named basics, to the index page there. |
