URLs

URLs are meant to specify the locations of resources in files on any computer in the world, so they can be a little complex. Fortunately, most of it is straightforward and familiar to you. Suppose we have a URL like:

http://cs.wellesley.edu/~cs110/lectures/L03-html/index.html

PROTOCOL://SERVER.DOMAIN/PATH/FILE

Let's break it down:

http:// This is the protocol, which is almost always HTTP, the Hyper Text Transport Protocol. You'll also occasionally see FTP, the File Transfer Protocol; HTTPS, the secure version of HTTP; and others.
cs.wellesley.edu/ This is the server: a machine connected to the internet that hands out files to anyone who asks. "cs" is the name of the machine; "wellesley.edu" is the domain. The name of the server combined with the domain must be unique in the world. In fact, the domain must be unique in the world, and the server name must be unique within the domain.
~cs110/lectures/L03-html This is the path: a sequence of directories, separated by slashes, that indicates where on the server the file is. In this path, there's a a tilde (~), which means to start at the public_html directory under the home directory of the cs110 account. We'll always be using that kind of URL in this class, so keep this special rule in mind.
index.html This is the file that is being requested.

Because URLs can specify files on many different kinds of computers, you should stick to a lowest common denominator when naming your directories and files, to avoid confusing machines and browsers. The lowest common denominator means:

use letters and digits, but no special characters like /, *, #, &, and so forth
no spaces (this is the most common error for Mac and PC users). For example, if you want to have a web page named “cats and dogs.html” you're much safer with cats-and-dogs.html or cats_and_dogs.html

Furthermore, be careful with upper and lower case. To your eyes, cats.html and Cats.html may seem like the same filename, but to a computer, they're as different as cats.html and dogs.html. The same rule is true of directory names: they are case-sensitive. Many people like to stick to all lower-case, just so they don't have to remember.

Exercise 1

Use a file transfer program (such as Fetch or WinSCP) to create a path of directories in your CS account, and then create a simple web page that just says “hello world” and put it in the bottommost directory. Finally, put in a link to that “hello world” page in little.html.

The Tree Directories

Today, most operating systems (including Unix, Macs, and Windows), organize the contents of a computer's hard drive in directories (AKA folders). Directories and files form a "tree" structure, because of the ability of directories to contain other directories. Here's a made-up example, for a web site about Joss Whedon:

A sideways tree	A tree of folders

What we're trying to show here is the kind of listing you might get from either the Windows Explorer or the Macintosh finder, where the contents of a directory are indented underneath the directory. Here, we've drawn a solid vertical line to indicate the extent of the directory. A short horizontal line connects a directory to the directory it's in.

For example, we can see that "buffy.html" and "willow.html" are both files in the same directory, the one called "cast," which is, in turn, one of three things in the directory called "Buffy," which is in the directory called "Joss." Joss contains two directories (Buffy and Angel) and a file called "comics.html"; and so on. Take a minute to be sure you understand the relationships among the directories and files.

Relative URLs

We can use these relationships to form a shorthand way of specifying a URL. This is called a relative URL, because we specify the location of a file relative to a known file. Here are the basic rules:

Relative URLs are only for files on the same server. Therefore, we can leave off the protocol and server name.
If a file is in the same directory as you, just give its name. If we want to put a link in the file buffy.html linking it to willow.html, we can say
```
<a href="willow.html">her best friend Willow</a>
```
If a file is in a sibling subdirectory, you can just give the path starting from the sibling. So, if we are in the file called "mythology.html" and we want to give a link to the file "angel.html," we can say:
```
<a href="cast/angel.html">Angel, the vampire with a soul</a>
        
```
If the file is in a subdirectory of a directory that contains us, we have to go "up" the tree (go left on the diagram). To go up, we say "../": that's "dot, dot, slash." For example, if we are in the file "host.html" and we want to make a link to "season3.html," we can say:
```
<a href="../season3.html">the Host returned in season 3</a>
```
That last step, with the ".." is tricky: to go up, we say ".."; while to go down we have to say which subdirectory we mean. In either case, we separate these up/down steps with a slash. Here's another example: suppose we want to put a link from "buffy.html" to "comics.html," we can say:
```
 
<a href="../../comics.html">another layer in the comics</a>
```

Exercise 2

Create some additional directories in your CS account and practice with the relative URLs. Relative URLs will make your lives much easier when you produce different versions and when you deliver your web site to your client. Try the equivalent of:

A link from "plot.html" to "comics.html"
A link from "season3.html" to "plot.html"
A link from "gunn.html" to "willow.html"

For Next Time

We'd like you to start thinking about web design: how the pages of a site are laid out, the color and font choices, how visitors navigate around the site, and issues like that. Some of this is pretty intuitive, and you probably already have some good ideas about this, so we're interested in sites that you think are well designed.

Please email your instructor and send him/her the URL of a web site that you think is well designed. If you'd like, you can say why, but that's not necessary. We'll collect these and tell the class about them.

Solutions to Exercises

Exercise 1 omitted
Exercise 2 Explore the pages in this directory tree and try the links, looking at the page source.

© Computer Science 110 Staff
This work is licensed under a Creative Commons License
Date Modified: Thursday, 24-Jan-2008 12:16:13 EST