demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Paths

html / links

Estimated reading time: 2 minutes

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:

<a href="myfiles/mystuff.html">
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:

<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:

<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).

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.