More Tricks with Links -
Relative and Absolute URLs

But what if you want numerous separate folders in your web site (as we actually use). There are 2 ways of dealing with that

(1) Absolute URLs

With absolute you specify the entirety of your targets URL. You've been using this already when linking to other web sites (e.g. http://www.fluffbucket.com/index.htm)

This link is not dependant on the current location and and could apply from any page.

The disadvantage is that they can take along time to type in and if you move all your pages to a different site you'd have to recreate all your links. You've got to be very precise or it won't work

(2) Relative URLs

With relative URLs, the link is seen as relative to the current document. You've been doing it already

e.g. "nextpage.htm"

tells the browser to get nextpage.htm which is in the same folder

consider this web site example

The main (or root directory) folder contains both webpage files (.htm) and 4 subfolders (images, tech, shop & help). Both shop and tech subfolders have there own subfolder levels. Image acts as the repository for all graphic files used on the site

Say you have a page called start.htm in the main folder. Linking to another file in that folder is easy (e.g. "nextpage.htm").

If you want to link to file called list.htm in the parts subfolder of the tech subfolder your link would look like = tech/parts/list.htm

that makes the browser looks in the tech subfolder for the info subfolder containing the file list.htm

To go back the link would be = ../../start.htm

each ../ tells the browser to go back up the directory root (here we go back 2 folders to main one) and find the file in that.

See if you could work out the relative link from our file list.htm in the parts subfolder to a file called phone.htm in the help subfolder
(Answer at the bottom of page)

The same thing works for graphics

for example lets say all files would use an image called logo.gif which is in the images folder

On the start.htm in the main folder you'd type images/logo.gif into the (1) Image source box

Whilst with list.htm in the parts subfolder it would be ../../images/logo.gif

BACK TO MORE LINKS MAIN

The answer is ../../help/phone.htm