 |
|
       |
| Building
a Collaborative Web Project |
|||||||||
| Define | |||||||||
Design
|
|||||||||
| Deliver |
 |
|
||||||||||||||
3. Use Relative Links
Build your web site inside just one main folder. Then, within that folder, use a "flat" filing system to organize your information. That is, use only one (or two) layers of folders inside your main Web folder. You'll begin losing files and folders if you begin stacking them more deeply than this.
[Note: Most new Web or HTML editors automatically create relative links. If your editor does not automatically support relative addressing, the following discussion will be helpful]
Don't Use Absolute Paths
To make your Web pages as transportable as possible, never use complete
paths or links (absolute references) to navigate within your pages. If you use absolute
paths to link pages in your different folders together, those links will be broken and
fail to work when you move your web pages to a new folder or disk or Web server. Note:
You can learn more about directories and relative links.
An absolute path is a URL which specifies the complete location, from beginning to end. They start with "http:" or "file:" or with a slash. Examples of absolute links to avoid:
<A HREF="file:///Main/Fruits/A.htm">
<A HREF="/Main/Colors/C.htm">
<A HREF="http://www.gsn.org/Main/Fruits/B.htm">
Do use Relative Paths
A relative path describes a path from the current page to a page in another folder. If all
of your Web pages are contained within one main folder and the links inside that folder
use relative addressing, you can move your Web project folder to any disk or server and it
will work properly.
Let's use the image below to illustrate these principles. The image shows a main project folder named "Main" which contains five other folders. The "Fruits" folder contains two web pages: A.htm and B.htm. The "Color" folder contains three pages, one named "C.htm", and the "Musical Styles" folder contains three pages, one named "D.htm".
Now let's see how we should describe our paths from one page to another.
Let's say you want to link from A.htm to B.htm. Since they are both in
the same folder, this is easy: you use this link:
<A HREF="A.htm">Link to A</A>
Now let's say that you want to link C.htm from page D.htm. This is more complex, because C.htm is in a different folder.
If you use absolute addressing, you would say, "Start at the Main
folder, go into the Colors folder and find C.htm." This would look like this:
<A HREF="/Main/Colors/C.htm">Link to C</A>
However, this path will fail as soon as you move your
"Main" folder to a different disk or different server.
The solution is to use relative addressing, in which you say, "We
are already in the "Musical Styles" folder. Now move up one folder (which is the
Main folder, go into the "Colors" folder and find C.htm." This would look
like this:
<A HREF="../Colors/C.htm">Link to C</A>
The symbol "../" means "move up one folder" and is the key to making relative addressing work.
You can combine multiple up-links to move up as many folders as you
need. For instance, "
<A HREF="../../../A/B/C.htm">Link to C</A>
Would move you up three folders and down into folder A, down another
level into folder B, and link you to page C.htm.
If you use relative links in this fashion, you can move the entire root folder or disk to any other server, disk, or location on your hard disk drive and it will function perfectly.
Note: You can learn more about directories and relative links.
Page 1: Naming conventions
Page 2: Color and Graphics
Page 3: Relative Links
Page 4: Finding a Web Host
Page 5: Keep it Simple
