Webwork
/
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:

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 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 >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma   See also jayboersma.com