what are directories and subdirectories?

All operating systems use some form of structure for holding and organizing data files and applications. The terminology varies. If you use the Mac OS or Win95 you probably are used to speaking in terms of "Folders." If you are a Unix, Linux or DOS user then you speak in terms of "directories."

Most servers in Africa run on the Unix operating system, so it will help to have an idea of what is meant by a directory or a subdirectory.

If you are used to the term "folder" than here's the rule:

• A "directory" is a folder
• A "subdirectory" is a directory inside of a directory, a "folder" inside of a "folder."

Subdirectories and HTML paths

In the real world "Paths" explain how to get from one place to another. For example, to get from your house to the store you might describe the path as "Go out the front door, turn right, go 3 blocks, turn right at Maple Street, go one block, turn left on Elm Street and the store is at 2345 Elm."
In the same way, a path tells the computer's operating system how to get from one file to another.

When you create links from one page to another you need to tell the machine the path to the page. In general the syntax for creating a link is <a href = "path_goes here">Name of Link</a>

There are two kinds of paths, Relative and Absolute. Absolute paths should generally only be used to create links to outside pages (pages not on the same server as your Web project).

For example, to link from this page to the Global Schoolhouse™ Home Page, I would use an absolute path like this:
<a href="http://www.gsn.org">Global Schoolhouse™</a>

To link to any of my own team's files I should use relative paths. A relative path explains how to get from one of your pages to another file on the server. Use of relative paths makes your Web project "portable" - this means it will run on your machine, the ThinkQuest server, and any other server as long as all the files are kept in the same places.

Looking at our sample, let's say we want to create a link from index.html to elements.html, the HTML code would be
<a href="elements.html">Elements!</a>

So far so good, now let's look at a more difficult example.
Let's say that from index.html we want to include the image of the Earth (globe.gif) that is in the media directory. Well, for one we will be using the "image" tag instead of the "a href" but the important thing to notice is the PATH, let's look:
<img src="media/globe.gif" alt="picture of Earth" width=72 height=72 >

The path is included in src="media/globe.gif" which tells the server to go the media directory and to look inside and find globe.gif. If we would have used src="globe.gif" the image would not show up, because the server would be looking in the top level directory for globe.gif.

So, the general rule for moving down a directory is to use "directory_name/filename"

You want to go down two directories? No problem, use "directory1_name/directory2_name/filename"

Let's try another!
This time, suppose that in our file addguest.cgi we want to create a link to index.html This means that we need to go UP a directory. The correct link is
<a href="../index.html">Home!</a>

The general rule for going UP a directory is to use "../filename"
Want to go up two directories? no problem! use "../../filename"

Let's try one more. In this example we will go up AND down. Let's say that from addguest.cgi we need to get to guestbook (see one of the screen shots above to recall where these files are located).
The link would look as follows
<a href="../gather/guestbook">GuestBook</a>

In summary:

1. Create a common workspace on your local machine that mirrors the directory structure of the server.
2. Use Absolute paths to link to sites not on the server, use Relative paths to link to your own pages.
3. Follow the general rules above for creating links to files in various subdirectories. Good Luck!

Next section: Links to Web development resources