How to Create a Text Navigation Bar in HTML

Including a navigation bar helps your readers find information on your site. If you are building your Web page in an HTML text editor, the coding to create a navigation bar is easy. Here’s an example of a simple text navigation bar for a small consulting business:

Home | Services | Memberships | Publications | Experience | Contact me

Each tab is underlined to reflect that it’s a link to that page or multipage area of the site. Note that the Home tab is not underlined. When you click the word Experience on the text menu to go to the Experience page, the text navigation bar should change to reflect where you are:

Home | Services | Memberships | Publications | Experience | Contact me

Follow these instructions to create a text navigation bar:

1. Open a new, empty page in Windows Notepad, name the file and save it with .htm as the extension.

   
   

   For example, you might call it navbar.htm.

   
   



2. Type the elements of your site, with a word or two for each page or area.

   
   

   Use the vertical bar to separate the tabs.

   
   

   If the vertical bar character is not accessible from your keyboard, it should be available from the Symbol or similar menu in a word processing program. (There’s no such option in Notepad.) You can copy and paste the vertical bar into Notepad.

   
   



3. Center the navigation bar on the page by using the center attribute of the paragraph tag, like so:

   
   

           <p center>Home | Services | Memberships | Publications | Experience | Contact me</p>

   
   

   The text menu will be centered.

   
   



4. To link the Home tab to the home page of your site, surround the word Home with the <a> and </a> tags. Add the href attribute like so: <a href=“home.htm”>.

   
   

   The Insert Link dialog box appears.

   
   



5. Repeat for the remaining phrases and link them to the relevant page on your site.

   
   

   The pages don’t have to exist yet, though of course the links won’t work until the pages are there. Whenever you create a page, the name must match the name in the text menu exactly.

   
   



6. Copy the menu to each Web page of your site.

   
   

   Alternatively, you can create a new file (for any pages that don’t yet exist) and put the menu in it. As you proceed, delete the link from the tab representing the page you’re about to save.

   
   

dummies

Source:http://www.dummies.com/how-to/content/how-to-create-a-text-navigation-bar-in-html.html