Horizontal Navigation

    ●  Many people want a Horizontal Navigation bar like the examples below.

Learn About:

More Special Characters href tags Zip Files


  •   This tutorial is for the Fan-Tastic Project and is part of a series:

1 - First Web Page   2 - index Page   3 - Special Characters   4 - Ordered Lists   5 - Links   6 - Horizontal Nav

Step #1: Open your Page in TextEdit ~

Last time you worked on Links and created your pages.

Open your index page …

… hit enter several times inside the <body> tag and just below your banner to make some space where you want your horizontal menu.

Step #2: Type your Links ~

Remember your Links?

Type your links in a row …

Step #3: Separators ~

Add a separator line between each link |

The separator line is above the forward-slash key.

backslash line

You could also put &#183; between the links to create a · between them.

Step #4: Center your Text~

Surround your links with <p style="text-align: center"> if you want the links centered.


Don't forget to close the </p> tag …

View your work in a browser and you can style your horizontal links using everything you've learned about coding so far, including text sizes, lines and centering.

Step #5: Links ~

Surround the area you want to be a link with <a href="whatever.htm"></a> tags:

Copy the entire code and paste it on ALL your pages.

Step #6: Now you must Decide … ~

Now you must decide whether you want your navigation to be along the top …

… or vertical navigation down the side.

Most people choose the Horizontal Navigation - either way, you must delete the unnecessary parts and customize each page with the appropriate content for that page, as stated in the rubric.

Last Step: Save, Compress and Attach your Site ~

Right-Click the root folder of your site, and compress it.

Attach the .zip file with the completed steps and continue working …