[an error occurred while processing this directive]
Go to Bottom Nav - January 24, 2018 - No exercises at this time - ERRORblah Happy Holidays and Semester Break!

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:


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, Root, 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, root, or relative.

Using analogies, the absolute path (URL) is akin to the full postal address for sending a letter; you may send it from any post box and it will get to the right place. Absolute paths are bulky to use since they include the domain name and they are also stuck to that domain.

The root path starts at (and includes) the forward slash directly following the domain name and continues through the directores to the intended file. An analogy for the root path is that it is that all links using the root path will point downhill. Root paths work well with navigation schemes since you do not need to worry about making an uphill path out of subdirectories. Root paths are also not tied to a particular domain thus your work is more portable.

Relative paths only contain the information needed to get from the file you are at to the next one you want. I think of relative paths as “neighborhood paths;” you do not need to know which city you are in when you only want to go around the block to your friend's house. Absolute paths do have to go uphill somtimes; there is a convention for that. If the path starts with a ../ (dot dot forward slash), it is going up one directory level. Use as many ../’s to go up as many directory levels as needed to get to your destination. Web files using absolute paths are very portable and can be placed in any server directory.

How Paths Work

paths tree

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:

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.

Heading One
Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit interdum, velit magna volutpat turpis, at ornare sem magna et tellus. Sed pulvinar facilisis ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. Nunc sed ligula quam. Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed massa. Nullam ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.
Heading Three
Sed aliquet augue ut ligula porta gravida pellentesque sapien semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum. Etiam mi massa, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.
Pull Down Menu Close Menu