|
More Tricks with Links - |
So far you've been making links between files in the same folder 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 URLsWith 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. <a href="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. <a href="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
<a href="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
<a href="../../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 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 src attributes
for example lets say all files would use an image called logo.gif which is in the images folder
On the start.htm this would be <img src="images/logo.gif">
Whilst with list.htm it would be <img src="../../images/logo.gif">
