Site Structure and Paths

TOC

To build and maintain a website, it's important to keep things organized. A little bit of 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 a directory and file structure:

My Brewing Website:Site structure:
  1. Things to drink
    1. Stouts
      1. Irish Stout
      2. Oatmeal Stout
      3. Muddy Paws
    2. Pale Ales
      1. High Sierra Pale Ale
      2. Lizard Lips Pale Ale
      3. Royal Empire IPA
    3. Amber Ales
      1. Agent Orange
      2. Redcoat Ale
      3. Captains Blood
    4. Water
  2. Things not to drink
    1. Coca-Cola
    2. Pepsi

Some generalities:

  1. The entry ("home") page for a site is always titled index.html and is always at the top of the directory structure.
  2. All files, directories and sub-directories are labled using lowercase characters, beginning with a letter, and having no spaces.
  3. HTML files have the .html (not .htm) suffix.

Paths

Paths (denoted below in red) are 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 pate.

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

A full path includes the entire URL pointing to the file, starting with the top level domain name: 

	<a href="http://www.mybrews.com/drink_no/coke.html">Coke is bad to drink</a>

A relative path describes the location of the file relative to the referring file's location. In the above www.mybrews.com site, for the index.html document to load the coke.html page, it would only need: 

	<a href="drink_no/coke.html">Coke is bad to drink</a>

This is because the directory drink_no/ is adjacent to (in the same directory with) the index.html file.

Using relative paths has the adventage that groups of files can e moved from one location to another without their links "breaking" (becoming inaccurate). This is useful when 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 domains across the Internet can be brought together in the same web page.

The forward slash "/" in a path means directory. In the above example, it indicates that the coke.html document is in the drink_no directory.

If the coke page included a photograph of a coke can or bottle, the path in the image tag would look like this: 

	<img src="images/coke_can.jpg" />

If the index.html page included the same photograph of a coke can, the path in the image tag would look like this: 

	<img src="drink_no/images/coke_can.jpg" />

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

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

So in the example site, if the lizard_lips.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>

<< GIFs and JPEGs | Index | Resizing and Thumbnailing Images >>