Easy Web Design - Demystifying Basic HTML

Demystifying Basic HTML

Adding Navigation Links

Print This Procedure ( doc :: pdf )

Creating a navigation bar for the music site entails inserting button graphics and linking each graphic to a Web page. You’ve already inserted the logo and banner graphics, so you know how to use the <img> tag. Furthermore, you’ve linked the logo, so you’re also familiar with the <a></a> anchor tags. The only slightly tricky part about using navigation buttons in the music site is that each page shows a custom button for the current page. For example, whenever a user visits the home page, the black version of the Home button displays, and whenever a user visits another page in the site, the standard maroon Home button displays. This setup will become clearer as you progress through this section. To create a navigation bar on the home page, follow these steps:

1. If necessary, open your text editor and open index.html. You’ll place the navigation bar in the first column of the table’s second row, which will cause it to display on the left side of the page.

2. After the second <tr> tag, click after the first <td valign="top"> tag, press Enter, press Tab, and type   to insert a blank line between the logo graphic and the upcoming navigation bar.

In the next few steps, you’ll embed each button’s image tag within an anchor tag that links the button to an appropriately named Web page. You haven’t created the subpages yet, so take note of the filenames provided in the anchor tags. The subpage’s filenames will have to match the filenames in the anchor references. In all, you need to add seven buttons. You’ll start by adding the current-page version of the Home button. (Recall that you downloaded two versions of each button the current-page version of each button has a “2” at the end of the button’s filename.)

note If filenames in the button anchors don’t match the actual filenames, the buttons will not work. In this project, you name the files before you create them because you will be using the index.html page as a template to create the subpages. In future Web development endeavors, a file might already be named and the existing name should be used in a button’s anchor code.

3. Press Enter, press Tab, and type the following:

4. Type   to add two line spaces, press Enter, and press Tab.

You’re now set up to enter the next button link and graphic.

tip You can repeatedly type the HTML code with varied href file references, src filenames, and alt information, or you can copy the code you type in steps 3 and 4 and paste the copied code into the table cell six times. Then, replace the href file references, src filenames, and alt text definitions in each entry, as shown in the figure located after step 14.

5. Type the following:

6. Press Enter, press Tab, and type:

7. Press Enter, press Tab, and type:

8. Press Enter, press Tab, and type:

9. Press Enter, press Tab, and type:

10. Press Enter, press Tab, and type:

Notice that there are four   tags at the end of step 10. The extra line spaces are included because we also want to insert the Send Us A Note icon to give users an easy way to send e-mail messages to Chris. When you create an e-mail link, you use a special href format in the anchor tag, as follows.

11. Press Enter a couple times to separate the Send Us A Note HTML code from the main navigation bar HTML code, press Tab, and then type

except replace username@domain.com with your own e-mail address so that users will open a blank e-mail message addressed to you when they click the Send Us A Note icon.

note A mailto link opens a blank preaddressed e-mail message window when the link is clicked. To avoid spam, consider using an e-mail address encoder when you create mailto links. An e-mail address encoder (such as www.wbwip.com/wbw/emailencoder.html) enables you encode your e-mail address by using character entities instead of standard text. A character entity reference is a special key combination that includes the ampersand (&) symbol and enables you to display nonstandard characters such as accent marks, registered trademarks, and so forth in Web pages.

12. Insert the Send Us A Note icon and close the anchor reference by typing:

13. Save index.html. Your HTML code should look similar to the code shown in the following figure.

The navigation bar HTML code in a single table cell

14. Open index.html in your browser. Your home page should now include a navigation bar on the left, as shown in the following figure. Notice that the Home button displays differently than the other buttons to show that users are currently viewing the home page. Click the logo and Home button to make sure that the home page redisplays. (Clicking any other button in the navigation bar will display an error because you haven’t created those pages yet.) Hover your cursor over each button to ensure that the ALT text is correct throughout. Click the Send Us A Note icon to ensure that a blank e-mail message opens and is addressed to you.

Testing HTML coding by clicking the Home button and the Send Us A Note image

Next section