Jump to content

Navigation


gffects

Recommended Posts

Hello all,

 

I have been using this forum for sometime now and personally I believe I have improved much faster, with the help and advice from the users on this site.

 

I am going to try and give back by posting my first tutorial type post on my favourite topic Navigation.

 

 

Introduction to web navigation:

 

The primary concern of most websites is the provision of information. The ability to have non-linear navigation through the use of links is one of the main things that set the Web apart from other media. But without a well organised and well built navigation even a site with the most amazing content will fail.

 

Navigation Types:

 

There are essentially three types of navigation-

 

In-line navigation: General links within the Web page itself.

 

Site navigation: The main area of navigation on a site also known as the navigation bar.

 

Search based navigation: A search box that enables specific searching based on your input.

 

Links:

 

The navigation itself is built up of links and there are a few different types of links.

 

Absolute links:

This link is the full URL which is usually used when linking to an external file, and this type of link provides the entire path to the destination file, including the transfer protocol, domain name, any directory names and the file name itself.

An example of this would be:

 

<a href="http://www.something.com/somthing/somthing.html">Link</a>

 

Relative links:

A relative link is one that locates a file in relation to the current document for example if you were in one section of a website and wanted to have a link back to the homepage you would use the following code:

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

 

the file name is preceded by ../ which tells the browser to move up one directory prior to looking for index.html

 

Root-relative links:

These links work in kind of the same way as absolute links but from the root of the website.

They begin with a forward slash, which tells the browser to start the path to the file from the root of the current website.

So regardless of how deep within a website you are a root-relative link will look like this:

 

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

 

Internal page links:

Along with linking to other documents, it's possible to link to another point within the same web page. This is handy for things like FAQ'S enabling the visitor to quickly jump directly to an answer and the back to the list of questions, or for a top of the page link, enabling the user in on click to get back to the top of the page after scrolling down through the content.

 

When linking to other elements on a site, you start by providing an id value for any element you want to be able to jump to. To link to that, you use a standard anchor (<a>) with an href value equal that to the defined id value, preceded by the hash (#) symbol.

 

An example of a list of question would be something like this:

 

<ul id="questions">

<li>< a href="#answer1">Question one</a></li>

<li>< a href="#answer2">Question two</a></li>

<li>< a href="#answer3">Question three</a></li>

</ul

 

Later in the document, the first answer might look like this:

<p id="answer1">The answer to question 1</p>

<p><a href="#questions">Back to questions</a></p>

 

Each link's href is prefixed with a hash sign. When the link is clicked, the web page jumps to the element with the relevant id value.

 

I will continue to edit this thread, to talk about link states,the difference between a and a:link, adding css styling, accessibility and usability, the title attribute and access key and tab index.

 

Hope you enjoyed this first attempt for a tutorial feedback is welcome.

Edited by gffects
Link to comment
Share on other sites

One important point to remember is that root relative links probably won't work on your local computer; many beginners use them and can't understand why they don't work.

 

Your root folder/directory on your computer is probably C:\ with lots of sub-folders before you reach the folder with the linked file so the path is wrong. It should work online from your host's server where your files and sub-directories are immediately in the root directory, or you can install Apache server inside WampServer or XAMPP on your computer and use Localhost to test root relative links.

Link to comment
Share on other sites

  • 2 weeks later...

This looks promising, as it will allow others like myself to make the odd comment or two, such as...

 

I've always viewed a file with this path (../) as exiting one directory (or folder) in-order to enter another. Saying things like this really helps peeps to visualise what's going on. I suppose you could even have (../../). Without the parenthesis of course, telling you that a file with this path is having to exit an inner folder and then its outer parent folder, where the last forward slash relates to the entering of yet another directory to which may reside some other media.

 

Please correct me if I'm wrong. I'm afraid I've been away far too long, and am now realising that what I've got to say might not be so relevant anymore. :rolleyes:

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...