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.