Hyperlinks

File Structure

Web site projects will inevitably require muiltiple files. Good web developers will ensure that they create a senisible file structure.

A good structure is easy to follow and groups similar files together. For example you will probably want all your images in an images folder and your styles in a css or styles folder.

As your site gets more complex you will also want to create folder for specific sections of your site, for example grouping all the content for staff in a staff folder.

The index.html is by convention your home page, so will appear at the top of the website 'root'.

By root we mean the top of the file structure.

Note that you can optionally place index.html files in other folders where it will act as a sub-homepage for that section.

Below is an example of a simple file structure for a website.

The <a> 'anchor' Tag

Now we have a file structure we can link one page to another. This is effectively the single most important feature of the web.

To do so we use the rather innocent looking <a> tag, <a> for anchor.

The <a> anchor tag is responsible for adding hyperlinks. The <a> tag can be placed around both text and images to make them hyperlinks. To do anything meaningful the <a> tag needs an attribute.

The main attribute associated with the <a> tag is href which stands for hypertext reference. This is the location of the file you wish to link to.

Using our file structure above we could link from index.html to about.html using:

The above example is straight-forward as the files were at the same level in the file structure. Technicall what we have here is a 'relative' path. A relative link is based on the relationship between the current file and the target file. They use the file structure (folders and files) to determine the path.

Linking Down the File Structure

In our file structure if we wanted to link from index.html to staff/staff-news.html we need a slightly more complex path. Basically we need to tell it which folder to look in to find the file. As such the link would be:

Linking Up the File Structure

If we want to link back from staff/staff-news.html up the file structure tree to index.html at the root we would use:

Here the ../ is used to navigate up one level in the file structure.

If you needed to move two folders up the file structure you would use ../../ and to go up three you would use ../../../ etc.

Relative and Absolute Paths

An important concept to understand in web design is the difference between relative and absolute paths.

Absolute Paths

An absolute path is one that contains the full URL of the page to be linked to or the image to be included in the file. An absolute path leaves no room for dispute as to its location on the internet. An example of an absolute path is http://www.mywebsite/section2/introduction.html:

Relative Paths

A relative path finds its way to a particular file based on its starting point. Relative paths can therefore be shorter than absolute paths but care needs to be taken to ensure the route taken is correct.

Absolute paths are most commonly used when you link to a page external to your own web site.

Relative paths are for internal links.

An example absolute path with the <a> would be:

Site Root Relative Paths

The relative paths we used above are strictly called 'document relative', in that they are built on the current file as the starting point.

Another trick with a relative path is to add a backslash / at the beginning. The backslash has the effect of making the path relative to the root of the web site. That is you are basically navigating to the top of the tree structure and then winding your way down from that point.

This technique is called 'site root relative'.

Using site root relative paths our two examples would be:

Notice the addition of the / at the start of the path.

Again notice the / and this time the lack of double dots.

Document Relative vs Site Root Relative

Both are equally valid. As a rule of thumb, for smaller projects use document relative, whereas larger projects with complex folder structures will benefit from the site root approach.

The title Attribute

Another attribute of the <a> tag is title. This adds a screen tip when the user places their cursor over a link in the browser. An example of a hyperlink with the title attribute would be:

When you make text a hyperlink it will appear blue and underlined. If you have visited that page already it will appear pink. The underline effect and colours are default styling, that as we will see later, can be changed by the addition of some CSS.