Web Page CentralPoliciesHTMLFAQPublishingBookletToolsLinks

Home :: Learning HTML :: Links :: URLs

Search

[Help]
Match:

[Off Site Link]=Off Site Link[Help]

[Direct Link to File]=Link to File[Help]

URLs

There are two kinds of Uniform Resource Locators:

  1. Absolute
  2. Relative

Absolute URLs are a resource's complete "address." Relative URLs describe a resource's address relative to the current document, and are used when two documents are on the same server.

Absolute URLs

An absolute URL, in general, consists of these three parts:

  1. the protocol used by the resource
  2. the name of the computer the resource is on
  3. the path to the resource on that computer

Here are some examples:

The document you're reading right now is at http://www.madison.k12.wi.us/webpub/basics41.htm

  1. The protocol is http, or HyperText Transfer Protocol (the rules used to transfer documents on the Web).
  2. The computer's name is www.madison.k12.wi.us -- this is the name of the District's server.
  3. The path to the resource (this document) is /webpub/basics41.htm -- for our purposes, the path is basically the same as the folder(s) the file is in, plus the file name.

Yahoo is at http://www.yahoo.com

  1. The protocol again is http. This will usually be the protocol for your absolute URLs.
  2. The computer's name is www.yahoo.com
  3. In this case, there's no path. So what are you getting when you go to this address? You're getting the "default page." On our server (www.madison.k12.wi.us), default pages are given the name index.htm. So, when you go to http://www.madison.k12.wi.us, the document you're getting is really at http://www.madison.k12.wi.us/index.htm

You can also link to files on FTP sites. For example, we have a program for making image maps for Windows computers at ftp://ftp.madison.k12.wi.us/pub/mpths110.zip

  1. The protocol is ftp, or File Transfer Protocol, which is used to transfer files between computers.
  2. The computer's name is ftp.madison.k12.wi.us. MIS has a special place just for transferring files, so it has its own name.
  3. The path to the resource (in this case, a zipped file) is /pub/mpths110.zip which means that the file, called "mpths110.zip", is in the public directory, called "pub".

Relative URLs

Unless you're familiar with working in a Unix or DOS environment, relative URLs can be a bit tricky. In order to understand them, we're going to have to do a little imagining.

A key point to understanding relative URLs is that resources (HTML files and/or graphic files) in the same directory (folder) as the document you're working on are referred to just by their name. So if you're working on "index.htm" and you want to link to a file you've made called "life.htm", and it's in the same directory, the relative URL is life.htm. That's pretty easy, eh?

The tricky parts come in when you'd like to link to other files on the same server, but in different directories. Here's an example "file tree" (listing of directories and files) -- directories are underlined, their files and sub-directories are listed under them.

           / (server's root directory)
           | index.htm          |
           |                    |
         east                 images
         | index.htm            blueball.gif
         | calendar.htm
  _______|_______
 |               |
social         images
  index.htm      redball.gif

Notice how each directory can have a default file ("index.htm"). This is the "home page" of each directory. So, the address to the home page of the "east" directory could either be "http://www.madison.k12.wi.us/east/index.htm" or "http://www.madison.k12.wi.us/east/" - both would get you to the same document.

The root directory is where all other directories and their files "sprout" from, hence "root." So, the District's home page is represented by the file called "index.htm" at the top of the example. Let's imagine you're working on the home page of the "east" directory -- /east/index.htm. If you wanted to link to the file "calendar.htm", its relative URL would be calendar.htm. If you wanted to use the graphic "redball.gif" on "index.htm", its relative URL would be images/redball.gif.

Now let's say you were working on the home page of the "social" directory -- /east/social/index.htm. If you wanted to link back up the tree to "calendar.htm", the relative URL would be ../calendar.htm. ../ means "up one directory." If you wanted to use "redball.gif" on this page, the relative URL would be ../images/redball.gif -- this basically means "move up one directory, then go into the 'images' directory, then find the file called 'redball.gif'." You could also use the absolute URL, which would be http://www.madison.k12.wi.us/east/images/redball.gif. Finally, if you wanted a link from the home page of "social" to the district's home page, the relative URL would be ../../ (which is the same as ../../index.htm).

What would the relative URL of "blueball.gif" be, if you were working on the home page of "social"? From "calendar.htm"?


Home:: Learning HTML :: Links :: URLs

Home | Policies | HTML | FAQ
Publishing | Booklet | Tools | Links

Last Update: 2000-04-19
This Page's Address: http://www.madison.k12.wi.us/webpub/basics41.htm
District Home Page: http://www.madison.k12.wi.us
HTML Editor & Publisher: Chris Burch, cburch@madison.k12.wi.us
webmaster@madison.k12.wi.us