Global Schoolhouse Home Home Base: Harnessing the Power of the WebIntro to NetPBL: Collaborative Project-Based LearningBuilding Collaborative Student Web ProjectsGuide to Conducting Research on the InternetLibrary of References, Readings and ResourcesTable of Contents
Building a
Collaborative
Web Project
Define
Design
Site design
Project site
Web development resources
Web design
Write for the Web
Balance content & presentation
Copyright issues
Summary
Further reading
Deliver
1. Naming conventions
2. Color and Graphics
3. Relative Links
4. Finding a Web Host
5. Keep it Simple

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:

bullet.gif (931 bytes)<A HREF="file:///Main/Fruits/A.htm">

bullet.gif (931 bytes)<A HREF="/Main/Colors/C.htm">

bullet.gif (931 bytes)<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".

Use Relative Links

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:
bullet.gif (921 bytes) <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:
bullet.gif (921 bytes) <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:
bullet.gif (921 bytes) <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, "
bullet.gif (921 bytes) <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

Previous Page     Next Page
line

  Global SchoolNet Foundation    copyright 1996-2004     All Rights Reserved    Last Update: 02-Dec-2003