February 7, 2012 - Exercise 1 and Exercise 2 are due on February 21 - Final Projects due on May 22, 2012

URLs and Paths

Universal Resource Locators

The Universal (or Uniform) Resource Locator (URL) is the exact location or address of a file or directory on the hard drive of a web server. In the case of web pages, knowing this URL allows us to view and link to the page. For example, the URL of this page is:

http://art.wallyzone.com/dm60a/tutorials/paths.shtml

The URL breaks down like this:

http://	art.wallyzone.com/	dm60a/	tutorials/	paths.shtml
The protocol for the request	Domain name or IP address	"Root level" Directory (dm60a)	"Sub" Directory (tutorials)	Name of the file

Note that the domain name, directories, and destination file are all separated by a forward leaning slash (/). The domain name is not case sensitive; all directories and file names are. Past the domain name, the path just represents the directory and file name structure of a computer hard drive.

Paths, Absolute and Relative

Paths tell us how to get to a destination. Paths in the real world may be tree lined and serene or rocky and bumpy; web paths are absolute or relative. For our use, the absolute path is the same as the URL; that is, the exact web address of a particular file or directory. As you can see from the breakdown of the URL, it follows a path to get there. The relative path is the description of the path to the destination file in relation to the current file.

How Paths Work

Here is a simplified visual representation of the directory structure, or "tree," of a Web server called www.server.com (A). See below for an alternate visual model of this same file structure.) The server contains two directories (folders), dayclass (B) and nightclass (D), as well as a file called index.html (C) . We speak of items B, C, and D as being at the top level, or "root" level, of the server. (Yes, I know that one would normally think of a root level as being at the bottom instead of the top, but that's the way this jargon works.)

In turn, the dayclass and nightclass directories contain subdirectories and files, and so on "down" the tree. For example, the dayclass (B) directory contains, among other things, the SkyJohn (E) directory, which contains the final_project (J) directory, which contains the Web page page1.html (Q). Going "up" the tree, page1.html is inside final_project, which is inside SkyJohn, which is inside dayclass, which is at the root level of the server.

Relative Paths

If two files are in the same directory tree (this usually means they are on the same server) a relative path can be used to describe the way to link one file to another.

If two files are in the same directory, the relative path from one file to another is simply the file name of the other file. For example, the relative path from page1.html (Q) to page2.html (R) is page2.html. We say that files in the same directory are at the same "level of hierarchy."

If two files are on the same server but are in different directories, then more information is needed to describe the relative path from one to the other. Because the files are at different levels of hierarchy, it is necessary to travel either "up" or "down" the tree structure to go from one file to the other. Let's say we want to travel from K to Q. Q is inside J (the final_project directory), which is inside E (the SkyJohn directory). K, our starting point, is also inside E. Starting from inside E, we need to go into J to get to Q. So the path from K to Q is final_project/page1.html. In other words, if we need to go "down" the tree, the names of the directories we travel through are separated by slashes.

What does the path look like if we need to go down through two levels? The path from F, which is inside B, to Q is SkyJohn/final_project/page1.html.

Going up the tree, we use two dots instead of directory names. For example, ../ means "go up one level of hierarchy." The path from K to F is ../index.html. Going up two levels, the path from Q to F is ../../index.html.

If the two files are on different servers, a relative path cannot be used to describe the way to get from one file to the other. In this case a URL is needed to describe the way to get to the destination.

Uniform Resource Locators (URLs)

A URL (uniform resource locator, or universal resource locator) is a unique address on the Internet. For example, the URL of Q is:
http://www.server.com/dayclass/SkyJohn/final_project/page1.html.

Absolute vs Relative

Why all the fuss about URLs and paths? We use them as an attribute value to link many and diverse items to our web pages: in hyperlinks, for images, to cgi scripts, for external Cascading Style Sheets, and to JavaScript files to name some examples.

Absolute paths are used for a variety of reasons. Often, a busy web site will have one web server hosting the web pages and web based applications used by a site, another server to host the secure content of a web site (in the case of ecommerce), and a third server to host the image files. REALLY popular sites have duplicates or clones of the original web site hosted on multiple servers in multiple locations throughout the world that use load balancing software/hardware to distribute web page requests so that no one server is ever overloaded and your requested files are coming from the closest physical server near you to skip network congestion.

Linking files on different servers requires the use of the absolute path. The absolute path is usually easy to obtain from the location window of your browser. Copy the URL and paste it into your tag as a value of an attribute. You may use the absolute path for all your links if you desire, just not for the exercises or final project in this class. Please use relative paths for all links except those to external web sites.

The convenience of using relative paths is that you may work on the files locally (on your own computer's hard drive) and mirror (duplicate) the file structure of the web site. When the files are uploaded to the server, all the links should work as they did locally. This is a boon for those not having a constant connection to the internet. It also allows you to carry linked files on a floppy or Zip disk or burn them to a CD, then browse them with a web browser on another computer. How about linked pages for a help file that comes with an application? Using relative paths also makes your pages portable should you need to change the servers on which they are hosted.

The main reason you will use relative paths for your assignment links is so your instructor can download them to Zip disk and "browse" them locally rather than online over my less-than-speedy Internet connection. This will be especially important until everyone has learned to optimize their images.

All this talk of urls and paths will come in handy when it comes time to link pages together using the anchor tag.

Alternate model of the same file structure

paths list

Special thanks to John Govsky for file structure graphics and lots of content.