When creating static sites, you will have to consider creating links when developing the site offline. I have always used relative linking, and this has done me fine, using the full http address (absolute) link doesn’t work whilst you developing offline, and it’s beneficial to use relative linking as websites will also work when used offline. Yet, relative linking has always nagged me, because I’m always having to figure out how far to go back up the directory and then drill back down into the correct one. In this example I have two menus on the page; I have to use ‘../’ to go back one directory for one menu, and ‘../../’ to go two steps back for another link, in the other menu.
<a href="../../index.html">Home</a>
<a href="../donkey_racing/index.html">Donkey Racing</a>
This works OK but can be confusing at a glance. I always wanted to just put the whole path in, but as it was relative, it would continue on from the current folder. Consider this relative path example:
<a href="services/donkey_racing/index.html">Donkey Racing</a>
As the link resides on a menu that exists on the page ‘beach-activities.com/ice-creams’ it would extend to this:
<a href="ice_cream/services/donkey_racing/index.html">Ice Cream</a>
Recently I got in a bit of a muddle using a link checker, it was showing broken links, but inspecting the code I couldn’t find it. I looked up relative and absolute links to get the full picture, and realised that there was a simple solution to return to the root of the directory and serve up the full path, by adding a backslash at the front.
<a href="/index.html">Home</a>
<a href="/donkey_racing/index.html">Donkey Racing</a>
I could serve up the previous example from any page in any directory, and it would work nicely.
<a href="/services/donkey_racing/index.html">Donkey Racing</a>
The only down side that this relative rooting will look for the relative root of your local machine, when developing offline. If anyone knows of one solution, I’m all ears.
There you have it, root relative linking, very simple file practise. I guess most will know this, but it’s just one of those things you overlook, if you have a solution that gets you by.
(0) Comments