|
 Site Structure and Paths |
|
|
|
|
|
Site Structure and Paths |
|
|
To build and maintain a website, it's important 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:
Some generalities:
- The entry ("home") page for a site is always titled index.html and it is always at the top of the directory structure.
- All files, directories and sub-directories are labeled using lower case characters.
- HTML files have the .html (not .htm) suffix
Paths
Paths (illustrated here 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 page.
In the above www.myveggie.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 would include the entire URL pointing to the file, starting with the top level domain name:
<a href="http://www.myveggie.com/eat-no/cows.html">Cows are things that you should 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.myveggie.com site, for the index.html document to load the cows.html page, it would only need:
<a href="eat-no/cows.html">Cows are things that you should 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 means directory. In the above example, it indicates that the cows.html document is in the eat-no directory
If the cows 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" border="0">
If the index.html page included the same photograph of a cow, the path in the image tag would look like this:
<img src="eat-no/images/cow.jpg" border="0">
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 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>
