More Tricks with Links -
Relative and Absolute URLs

THIS AREA

MAIN

BASICS
Basic Tutorial

Advance Tutorial
tables
More Links
HTML
Maintaining

Beyond Tips
Composer Hints
Reviews

 

BWRS
SEARCH

So far you've been making links between files in the same folder (e.g. "nextpage.htm") or other sites on the web (e.g. "http://www.fluffbucket.com/index.htm")

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 folder contains both webpage (.htm) files 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. you'd just enter nextpage.htm into the (B) Link To Box

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 list.htm in parts to a file called phone.htm in the info 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 you'd type images/logo.gif into the (A) Image Location box

Whilst with list.htm it would be ../../images/logo.gif

BACK TO MORE LINKS MAIN

terms & conditions copyright © 1999-2003 legal notices
home credits contact us link to us

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

Page modified © 2002. A.Duncan BWRS