How to Create a Navigation Bar for a Web Page

Visitors to your site can find their way around using a handy navigation bar to guide them!

Difficulty:

Easy

Instructions

A navigation bar that uses text only saves on download time and is easy to add.

1. Open the page using a text editing program, such as Notepad or EditPad. Position the cursor where the navigation bar will appear.

2. Type the following, changing the page names and locations where indicated:

   Home /  The center tag centers the entire navigational bar, while the remaining tags serve to add a text link to other pages. The last   tags add a space, a dividing line and another space between each link.

3. Continue adding pages in this manner, changing the names and locations where appropriate: What's New / 

4. Close the center tag by typing:

Use a table to line up the links and add color to a navigation bar. It is recommended you read the 'How to Add a Table to a Web Page' eHow first.

1. Open the page using a text editing program, such as Notepad or EditPad. Position the cursor where the navigation bar will appear.

2. Begin the table by typing the following:

   This tells the browser to begin a table with no border and a width of 100%.

3. Begin the table row:

4. Add the first link by typing the following:

. This tag tells the browser the first column has a width of 25% of the table, adds a link to the home page, centers the text and closes the column.

5. Continue adding links using the same tags, replacing the page name and location as needed.

.

6. Close the center tag by typing:

7. Close the row by typing:

8. End the table:

Home	What's New

Verify each link on the bar works. Visitors hate getting lost and won't return!

1. Save the newly revised page and upload it to your website.

2. Connect to the Internet and click on each link to verify it is correct.

3. Make any changes needed, save and upload again.

Tips & Warnings

• Add a background color to the table to make it stand out. After the WIDTH=100% tag, type the following, replacing with desired color or hexadecimal code: BGCOLOR='blue'.

• If you use a background color, make the text links bold or increase the font size to make them stand out better against the colored background.

• Add or decrease the number of columns by making sure the percentage of each column combined adds up to 100%. For instance, the above example uses four columns, each 25% of the table. For three columns, use 33%.