Site Outline

To build and maintain a website, it's important keep things organized. Some planning when setting up a site will make it much easier to work with later as it grows in size.

Usually, building a site begins with an outline that becomes the basis for the site's directory and file structure:

Some generalities:

1. The entry ("home") page for a site is always titled index.html and it is always at the top of the directory structure.
2. For consistency, all files, directories and sub-directories are labeled using only lower case characters.
3. Images files have the .jpg, .gif or .png suffix.
4. Directories (folders) do not have suffixes.

Paths

Paths (represented above by red lines) are text instructions that tell the web browser how to find things. They can be used to load a new page via a hypertext link or to load an image or media file into an existing page.

In the above www.im-a-vegetarian.com site, for the index.html document to load the cows.html page, it would need a path telling it where the cows.html page was located. Paths can be either full or relative:

A full path (also called an absolute path) would include the entire URL pointing first to the site and then to the file, starting with the top level domain name:

A relative path describes the location of the new file relative to the the referring file's location. In the above www.im-a-vegetarian.com site, for the index.html document to load the cows.html page, it would only need:

Using relative paths has the advantage that groups of files can be moved from one location to another without their links breaking. This is useful for developing a site off-line and later moving it on-line or developing it on one server and then moving it to another.

The advantage of using full paths is that various files from diverse locations across the Internet can be brought together in the same web page.

The forward-slash / in a path indicates a directory. In the above example, it indicates that the cows.html document is in the do-not-eat directory.

If the cows.html page included a photograph of a cow, the path in the image tag would look like this:

If the index.html page included the same cow photograph, the path in the image tag would look like this:

When you've taken a visitor to a page in your site that is nested one or more directories deep (meaning it is in a directory that is within another directory), backing out of the directory structure requires another bit of path knowledge:

So, in the above site, if the oranges.html page had a link back to the index.html page, the path would have to indicate moving up two levels in the hierarchy: