Comp25: Links and Navigation

Websites are rarely just one page. They usually contain a number of pages all hyperlinked together, and often have links to external pages that aren't part of the website.

Navigation is the process of moving from one web page to another. Creating a usable navigation for your viewers is a very big part of website design.

Anchors

The basis of links in HTML is a very special tag called anchor, or <A>.

An anchor is a section of your page (such as a word, a sentence, or an image) that has been marked using the <A> tag to link to somewhere.

Anchors can link to other pages in your website, an image, a document (like Word or Excel), a song, or start a new email.

The <A> Syntax

The anchor tag can be very tricky because it must be perfect! There is a lot going on in this little tag and it's easy to make a mistake.

Consider this example:

<a href="http://www.pacific.edu">Click here to visit the Pacific webpage.</a>

You'll immediately see that we have surrounded "Click here to visit the Pacific webpage" with a beginning and ending <a> tag. But if you look carefully, you'll see that our starting <a> tag has something new in it: an attribute called "href". An attribute is a setting you use to specify the way a tag behaves.

In this example we are specifying that the <a> tag is a link to http://www.pacific.edu. We use the "href" attribute to do that. Note that we surround the address in quotation marks. This is a requirement.

Remember that everything between the start <a> and ending </a> will become the link (or "anchor"). We call the whole thing an anchor element.

Linking to a Page in our Website

Linking to a page on our own website is relatively easy. Let's assume we have a page we have saved as "products.html". For now, that page must be in the same directory as the page we are making the link on. Here's what our anchor would look like:

<a href="products.html">My Products</a>

Remember the "href" is an attribute that tells the <a> tag how to behave. In this case, it says where the link should go.

We're saying that there is a page called "products.html" and that if someone clicks here, to open that page.

Linking to Another Web Site

When linking to a web page that is not part of your own website you must include the full URL in the href attribute. That tells the browser to pull up a page from somewhere else, not the website it's currently on.

In this example we are linking to Pacific's homepage:

<a href="http://www.pacific.edu">Click here to visit the Pacific webpage.</a>

And here we are linking to Microsoft.com:

<a href="http://www.microsoft.com">Microsoft</a>

The following will not work properly because we have forgotten to type http://

<a href="www.pacific.edu">Click here to visit the Pacific webpage.</a>

You don't just have to link to the "root" level of a website. If you wanted to go straight to a page or graphic inside that website, you can. This code will link to the full directory for Pacific's website:

<a href="http://www.pacific.edu/atoz.asp">Directory</a>

Linking to Documents, Songs, Etc

Remember that you can link to any kind of document on your website. If you were linking to an Excel document called "sales forecast.xls" your code would look like this:

<a href="sales forecast.xls">2006 Sales Forecast</a>

Notice that we have included the space in our filename as well as the .xls file extension.

Linking to an Email

If you want an anchor to launch an email when clicked on, you can do that with the href attribute:

<a href="mailto:ddiskin@pacific.edu">Send Me an Email</a>

Instead of prefacing the href attribute with http://, we're putting mailto: in front of the email address.

Note that if you are in Pacific's lab and click on an email link such as this it will try to launch Groupwise and may not work properly.

Navigation

Navigation is the concept of moving about a website, and it is very important to the design of that website. Often very little thought will be put into the navigation and as a result users will have a difficult time finding the information they want. They may become "lost" on your website, get frustrated, and leave.

There are many ways to create great navigation for your users. Here are some common concepts:

Keep links near the top of the page. Users should not have to scroll down to the bottom of a page to navigate to another one.
Make the titles of links clear and concise. Three words is the recommended max.
Make your navigation area stand out. Use different colors, borders, fonts, or backgrounds to make it obvious that the navigation area is not the content area.
Keep every page's navigation area consistent with the rest of the website. Consider a "template" concept that each page follows strictly. Users will remember where the navigation is and will be frustrated if it has moved.
Always provide a link to the "home" page.
Don't make links for "back" or forward". A website is not a book with ordered pages, and users rarely navigate through a website in a sequential order.

Through a little work, you can create a great-looking navigational tool that will impress your visitors as well as be useful to them.

Special Notes

On the internet, filenames are case sensitive. You will need to specify the exact filename with the same capital/lowercase letters used. It is recommended that you always use lowercase when naming your files. This applies to images, songs, documents... everything!

You must also specify the filename extension of the file you are linking to. Just linking to "products" isn't good enough. Is that "products.html" or "products.xls"?

Next... Images