A complete URL always begins with the protocol used to access a resource, continues with the Internet domain name of the host Web server, a port number if necesary, and then finally the location of the resource which is most often a path to a file. Here are some examples:
http://www.ryerson.ca/JavaScript/lectures/index.html gopher://gopher.ryerson.ca:70/00/.computing/.ACAD-CCS/.January-18-2001 ftp://ftp.ryerson.ca/public/xyz/con.zip
In these examples (some of which are not real addresses) the protocols are http, gopher, and ftp. The domain names are all at Ryerson and may refer to software (Web, gopher, or ftp servers) running on different host machines or the same host computer. When a document is loaded into a Web server the browser keeps track of its location (URL). Links to image files and other documents within the currently loaded document do not have to be complete URLs. Instead partial URLs can be used. Partial URLs rely on providing just enough information for the browser to compose a new URL from the location of the currently loaded document and the partial URL in a link.Partial URLs are useful because they are easier to work with and make it possible to create a Web site on one machine and then transfer it to another without having to edit any links.
In the picture of a directory tree at left the email.html file
and envelope.gif image file are both in the services
directory. Since they are both in same directory (or if you prefer in the same
folder) all that is necessary to place the image envelope.gif into
the email
document is the following image tag: 
.html
<img src="envelope.gif">
When the browser loads the email.html file and reads this image
tag it will request the envelope.gif file from the same server
and directory it loaded the email.html file from. So for example
if the full URL to the email.html file is
http://www.ryerson.ca/ccs/services/email.html
then the browser will combine the location of the file
http://www.ryerson.ca/ccs/services/
with the image's file name envelope.gif to compose the new URL
http://www.ryerson.ca/ccs/services/envelope.gif
and request this file which it will display as an image in the email.html
file. Note: these examples assume that the Web server at www.ryerson.ca
is mapping the public_html directory on some file system to the
URL http://www.ryerson.ca/ccs.
When an image is downloaded it is usually stored in a special chache folder
by the browser. The next time the browser needs to retrieve the same image it
can usually retrieve it from its cache folder rather than wasting time fetching
it from its original location on the Web. The browser keeps track of the location
(full URL) it retrieved each image in cache from and loads it from cache when
it encounters a request for an image from the same location. A well designed
Web site will therefore store only one copy of each image in one of a small
number of locations. For example a company logo should only be stored in one
location (directory) and every document with that image in it would have to
provide a path to the image in that directory. However, the partial URLs to
reach files in other directories are a little more complicated than a parital
URL for a file in the same directory. For example, if the index.html
file located in the public_html had to contain an image tag to
the the logo.gif file located in the images directory,
the image tag to do this would be:
<img src="images/logo.gif">
The current location of the document is the public_html directory
and the images directory is a directory inside the public_html
directory. So the src "images/logo.gif" can be read as
"go to the images subdirectory that is in the directory we are already
in, then retrieve the logo.gif file from that location. This works
because the location of the current document is the public_html
directory and the images directory is a subdirectory (a directory
inside a directory). So the URL will be composed by the browser by adding together
the two URLs:
http://www.ryerson.ca/ccs/
and
images/logo.gif
to form the complete URL
http://www.ryerson.ca/ccs/images/logo.gif
The effect of this operation is much like changing the current directory, or navigating from directory to directory when working with files. To find a file in a subdirectory we first go to the "parent" directory, open it, and then open the subdirectory that is inside it. In the preceding illustration this is the same as working our way from folder to folder down the tree . It is also necessary to be able to move from a subdirectory to directories "above it" in the tree. The special notation used to move up a directory tree to the parent directory of a subdirectory is
../
To move up two levels in the directory tree two sets of double dots can be used:
../../
If, for example, we want to have a link from the email.html document
in the services directory to the index.html file in
the public_html directory we would need an anchor tag like this
one inside the email.html document:
<a href="../index.html>Home</a>
Since the services directory is inside the public_html directory
where the index.html file is the browser will take the location
of the current document
http://www.ryerson.ca/ccs/services/
and then interpret the first part of the partial URL ../ to go
up one level in the directory tree
http://www.ryerson.ca/ccs/
and then add on the last part of the parital URL to get
http://www.ryerson.ca/ccs/index.html
The following examples are all based on the preceding directory tree illustration. Please read each example, work your way from the current document to the resource being linked to in the tree and try to compose the partial URL that is required. Write it down and then check it against the answers provided at the bottom of the page.
You wish to provide a hypertext link from the index.html file
to the passwordReset.html file in the forms directory.
Note: the forms directory is in the help directory
which is in the public_html directory which is where the index.html
file is that you want to place the link in. What is the partial URL you need
to place in the blank space inside the quotes in the anchor tag:
<a href=" ">request a password reset</a>
of the index.html page.
Assuming someone has navigated from the home page (index.html)
to the password reset page (passwordReset.html), decides not to
fill in the form and wants to go back to the home page. What is the partial
URL required to take them back up two directory levels and load the index.html
page again by clicking inside the passwordReset.html page. Fill
in the blank inside the quotes:
<a href=" ">Home</a>
You wish to place an image tag that will display the logo.gif
file inside the phoneNumbers.html file. But the logo.gif
file is in the images subdirectory of the public_html
directory and the phoneNumbers.html file is inside the help
directory which is also inside the public_html directory. This
means we must compose a parital URL that goes up from the help directory to
the public_html directory and then down to the images directory before loading
image file. Fill in the blank space inside the quotes in the image tag so the
logo.fig file will appear in the phoneNumbers.html
page:
<img src=" ">
You wish to put a link to the accountRequest.html page inside
the email.html page so that someone reading about email accounts can immediately
request one using the form in accountRequest.html. Complete the
link that you would put inside the email.html page to make this
possible:
<a href=" ">sign up for an account now.</a>
<a href="help/forms/passwordReset.html">request a
password reset</a><a href="../../index.html">Home</a><img src="../images/logo.gif"><a href="../help/forms/accountRequest.html">sign up
for an account now.</a>