demosthenes.info

A blog by Dudley Storey on , , , , , , and anything else that strikes his fancy.

featured articles

popular favourites

Paths

Absolute links are easy to create, since they include the full path to the resource. Local links are a little harder, in the sense that the full path is not required, but rather it is relative between the document that contains the link and the file being linked to. The relative path has several advantages: paths are usually short, and will not change if entire site is moved to another server or domain.

To-folder linkPaths between files in the same location are assumed by the browser, as we have seen. However, if the file being linked to is in a folder next to the current file (the one being linked from) then you must specify the folder name:

  1. <a href="myfiles/mystuff.html">
  2. Go to my stuff</a>

If the file being linked from is inside a folder, and you wish to navigate to a file that contains the folder itself, you use ../ before the target. ../ means “go up one level”. For example, to get from a file inside a folder in a website to the index page on the root level of the site, you would use:

  1. <a href="../index.html">

This command is recursive, in the sense that "../../" means “go up two levels”.

You can also use the two path modifiers in combination: for example: "../images/me.jpeg" means "go up one level from the current file, find a folder called images, and retrieve the file "me.jpeg". Or, for the illustration below, from a page called “products.html” that resides in a products folder, to get up and out of that folder and reach the index.html page that exists at the same level as the products folder, the code on the “products.html” page would be:

  1. <a href="../index.html">Go to the index page</a>

out-of-folder linkFinally, the use of a single / before a file or directory name means “go to the root of the website”. It can be particularly useful technique on web pages when the active page is buried in a folder. Rather than navigating up to the root in a series of "../../", you can simply shortcut by using /. However the usefulness of this technique depends on the setup of your particular web server: it is not going to be helpful when we publish our files to the server here at school, as there will be nothing you can use at the root of the site (your own work will be several nested folders down).

web developer guide

featured comment

by JoelB in Goodbye, JQuery Validation: HTML5 Form Errors With CSS3

what i'm reading

A Storm of Swords: A Song of Ice and Fire: Book Three
A Storm of Swords: A Song of Ice and Fire: Book Three

what i'm watching

Californication: The Third Season
Californication: The Third Season

what i'm playing

Mass Effect 3 Collector's Edition
Mass Effect 3 Collector's Edition

what i'm hearing

Dub FX
Dub FX

blogs

podcasts

no ads ever

This blog is free of advertising, and always will be.

creative commons licensed

The content of this blog is free to use in whatever way you wish under the Creative Commons license.