Navigation bars can be easy to create, but they require some planning to be effective. Up to this point in the book, you’ve been creating single pages with a common theme for eventual inclusion in a website, but you probably have not yet given a lot of thought to how the pages fit together. So before creating a navigation bar, you want to consider the overall structural plan for the site.

A navigation bar should contain links to the most important sections of the website, plus a link to the Home page (see Figure 10-1).

Figure 10-1. A horizontal, text-based navigation bar.

The navigation bar should not contain hyperlinks to every page in the site unless the site is extremely small and simple. Although there is no specific rule about the number of items a navigation bar can contain, most people try for somewhere between four and seven for a horizontal bar like the one shown in Figure 10-1. With fewer than four, your site doesn’t look very content-rich; with more than seven, the navigation bar becomes crowded and confusing. In addition, on low-resolution displays or in narrow browser windows, a horizontal navigation bar might wrap to a second (or even third) line or a vertical navigation bar might force the user to scroll down. This chapter discusses only horizontal bars, but you’ll learn how to make vertical navigation bars in Chapter 12.

Before building your navigation bar, create a diagram that outlines the site’s planned structure. It doesn’t matter if you haven’t created all the pages yet. You can be as fancy or as plain as you want with your chart. It can be scrawled on the back of a napkin or built using SmartArt (through a Microsoft Office application), Microsoft Visio, or some other charting tool. Choose file names for each planned page, so you can start referring to them in hyperlinks even if they don’t exist yet.

The organization of the Margie’s Travel site, which you’ve been creating pages for in this book’s examples, might look something like what’s shown in Figure 10-2.

Figure 10-2. It might be helpful to create a hierarchy chart to outline your website plan.

Notice that the level directly below the Home page consists of five pages. The navigation bar will contain hyperlinks to each of these pages. Two of these, Domestic and International, are primarily “lobby pages” (that is, introductory pages) for larger sections of content; the lobby pages of those sections will link to each page within that section. This website is modest in scope initially, but there is plenty of room for future expansion. You could add dozens of additional pages, such as pages for each destination within the regional categories, and pages for each individual tour that the company will be escorting to each destination.

Notice also that not every page referenced from the navigation bar is a major section. For example, Mailing List has no pages subordinate to it at all. It is simply a page that is important for visitors to be able to access quickly from any page.

A text-based navigation bar is the simplest and easiest, and it is also very user-friendly for all browsers and all users (including those with special needs). On simple webpages, text-based navigation bars are usually placed at the top of the page, in a single horizontal line (see Figure 10-3). Some web designers also place a copy at the bottom of each page so visitors don’t have to scroll back up to the top of a page to access the links.

Figure 10-3. The navigation bar displays at both the top and bottom of the page.

HTML5 includes a <nav> tag, a two-sided container tag in which you can optionally place the code for a navigation bar. The <nav> tag is designed to help browsers and style sheets identify sets of links as a navigational element and then handle them appropriately. If the browser does not support the <nav> tag, it is ignored. You’ll use the <nav> tag in this chapter because it’s good practice to start including HTML5 tags in your code, but you won’t be doing anything special with the <nav> tag’s attributes. However, in sites you create yourself, you are free to define style attributes for the <nav> tag in internal or external style sheets; this can be a way to help ensure consistency among the navigation bars throughout all the pages in your website.

In the following exercise, you will add a text-based navigation bar to the top and bottom of a webpage.

Text hyperlinks are clear and unambiguous but not all that attractive. You might prefer to create a navigation bar that uses buttons or other graphics instead of text links. You can create the graphics yourself in a graphics-editing program. If you do create your own, it’s a good idea to follow these guidelines:

If you have no talent or inclination for art projects, search the web; there are thousands of sites with free graphical buttons that you can download. (Make sure the buttons you download are not copyrighted and are royalty-free, so the owner of them can’t charge you a fee for using them.) Make several copies of a button you like and then use a text tool in a graphics-editing program to place different text on each copy. Here are a couple of links to free button sites to get you started:

Most professional website designers do not create their own buttons, nor do they acquire them from others; they instead use button-creation programs to generate them. Such programs make it very easy to create groups of identical buttons with different text on each one. There are commercial programs and standalone programs that make buttons; there also are free web utilities. Here are two sites; you can find many more with a simple web search.

You set up a graphical navigation bar just like a text-based navigation bar, but instead of hyperlinking from the text, you can hyperlink from the graphic by placing the <img> tag within the <a> tag:

<a href="product.htm"><img src="product_button.gif"></a>

In the following exercise, you will convert a text-based navigation bar to a graphics-based one.

After you have managed your own website for a while, you might decide you want to restructure its organization by renaming some pages, placing pages in folders, or hosting your site at a different location with a different URL. That is fine, but what about the people who bookmarked the original page? If you remove the old content entirely, they’ll be faced with an unfriendly Page Not Found message and they won’t have any way of finding the page in its new location.

To help your past visitors find the new page, you can leave the old page in place and replace its text with a hyperlink that tells them where the new page is located. You already know how to create a hyperlink—that’s simple. But you can take it one step further by setting up the old page to actually redirect to the new page. In other words, you can make the old page automatically display the new page.

It is customary for a redirection to include five seconds of delay, so users can cancel the redirect operation if desired. It is also customary to include a text hyperlink to the new page, in case the redirect operation fails for some reason (such as the browser not supporting it, although this is uncommon).

You implement a redirect operation by adding an attribute to a <meta> tag in the <head> section of the page (as you learned in Chapter 2). You must create a new <meta> tag for this operation; you cannot add the attributes to any existing <meta> tag that the document might have. For example, to redirect to the page support.microsoft.com after a five-second delay, use the following:

<meta http-equiv="refresh" content="5; url=http://support.microsoft.com">

Be sure to use a semicolon (not a comma) between the delay (the content attribute) and the url attribute.

In the following exercise, you will redirect one page to another page automatically after five seconds.

When a site visitor requests a page that doesn’t exist, the browser displays a 404 File Not Found error message. It’s not a very friendly-looking message (see Figure 10-4).

Figure 10-4. A generic 404 error message.

You can avoid users encountering such messages due to outdated links and information by keeping old pages up and redirecting, as you learned in the previous exercise. However, that won’t help users who have the wrong URL due to typing mistakes—yours or theirs.

Most web-hosting companies enable you to create a custom error page—in place of the generic one—that automatically displays when someone has the domain name right but the page name wrong. A two-step process is involved: first you create and upload the page to your server, and then you log into the configuration tools for your web-hosting account and set your 404 error page preferences. The steps for doing that latter part are different, depending on the hosting company. Figure 10-5 shows a sample from GoDaddy.com, a popular web-hosting company, but yours might look very different.

Figure 10-5. You might be able to set up your server to provide users with a custom error page or message.

In the following exercise, you will use the redirect page you created in the previous exercise as the basis for a new page that will display whenever a user requests a page that does not exist.