● Many people want a Horizontal Navigation bar like the examples below.
✓ 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
Other People's Work:
Here are examples of work inspired by this tutorial.
Step #1: Open your Page in TextEdit ~
✓ Last time you worked on Links and created your pages.
✓ Open your index page …
✓ … hit 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.
✓ You could also put · 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 …