Site Structure and Paths

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:

Site outline for im-a-vegetarian.com:

File Structure for im-a-vegetarian.com:


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 (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 href="http://www.im-a-vegetarian.com/do-not-eat/cows.html">
Cows are things that vegetarians do not eat.</a>

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:

<a href="do-not-eat/cows.html">
Cows are things that vegetarians do not eat.</a>

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:

<img src="images/cow.jpg" height="400" width="400">

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

<img src="do-not-eat/images/cow.jpg" height="400" width="400">

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:

../ (dot dot forward-slash) means "back up one directory"

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:

<a href="../../index.html">Back to home page.</a>
Previous | Webwork Table of Contents | Next >

Semblance Portrait Project
The Built World
Hungary/Czech Republic
Simple Truths

Puebla, Mexico
Along the Mississippi
Santa Fe
The Reliance Building

The Web Page from Hell
The Portals Project
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Backgrounds 4 Us
Digital Sketches
© Jay Boersma