Welcome back to our series on how to build a web page from scratch.  Today you will be learning how to add navigational links to your site.

Once someone gets to your web site, they will need to get around your site.  You will need to provide them with a link that will get them from one page to another.  Even a mini site needs navigational links.  These links are important to search engine spiders as well.  A link is how a spider (or crawler depending on the search engine), gets your site indexed into their database.  You need links for everything on the Internet.

At the minimum, you will need a “Home” link, a “Site Map” link, a “Contact Us” Link, an “About” link and a “Privacy Policy” Link.  The last link (Privacy Policy) is something new that is becoming a standard in web page design because your visitors want to know that the information that is being collected from their personal computers, while on your site, is not going to be used for SPAM.  They also want to know that you are not going to sell their personal info to anyone else.

An HTML (Site Map) is for your human visitors.  This web page is for the visitor to see, at a glance, what kind of pages you have on your site and what they contain.  It’s like going to the mall and using the locater map in the middle of the mall to find the stores that are in the mall and where they are located at.

You need a (Home) link so you visitors can get back to the welcome page.  This is normally the page that gets the most traffic. (The Site Map, Contact Us, About and Privacy Policy links are normally at the very bottom of the web site and we will cover these in latter lessons).

Once again we will be using the Nvu HTML editor to create these links.  Most Navigational links are presented in the common text color of the web page.  Normally that is the primary “Black”.  Black is seen better by your visitors and I suggest that you always us always use this color when you type your text information of your site.   However, once you make links out of these, they normally turn blue in color.  For our web site example, we are going to keep them black.  I will show you how to this in this lesson.

Also, I would suggest that you make your links in a font type called “Arial”.  There is a reason for this and I will show you why in a future lesson.  For now, we will create our links in this font and keep them that way in all our lessons.  You don’t have to use this font in your web pages if you don’t want.  It’s a matter of personal preference.

Hyperlinks are normally blue in color.  That is the default in all HTML editors and you will see this on most web pages. (On this blog, they are red by choice).  For our training purposes, we will be using “Black” instead of the normal stardard blue.  Again there is a reason for this and I will show you why in a later lesson.  Because we are wanting to use Arial as the font and Black as our link color, we will have to modify our Nvu editor.  Open your Nvu HTML editor and I will show you how to change your settings.

Change the settings for “New Pages”.  You can do this by clicking on the “Tools” button and highlight and click on the “Preferences…” link (CLICK HERE).  This will open up the “Options” menu.  You will need to click on the “New Page Settings” (CLICK HERE). This brings up our “Default Page Appearance”.  You will see the default colors radio button is already chosen for  you.  You will need to click on the “Use Custom Colors” radio button (CLICK HERE).

Next step is to change the all the link colors to “Black” except for the background setting.  Keep that white. (CLICK HERE) to see which buttons to change.  To change the color just click on the link button you want to change (CLICK HERE), and then pick the color you want to change it to (CLICK HERE).  Make sure the you click the “OK” button on the color pallet and the options page to lock in your new settings.  Now you need to close Nvu.  Just click the red “X” in the upper right hand corner.  Let it completely close and then open it again.

Now you need to load the web page frame work you created in our last post.  You should have called that “Template).  To open this HTML file you will click on the “Open” button in the upper left corner of Nvu and locate the “Template file” and then click the “Open” Button (CLICK HERE).  Now you will see the template you created in yesterday’s lesson on your desktop.  For this lesson we will only be working in the left column as this is the normal navigation area.

Now that you modified Nvu for all “New Pages” your links and text will always be “Black”  Next, before we put any text in the navigation area, we will want to change the font to Arial (CLICK HERE).  Make sure that when your start typing, the word “Arial” is present in the variable width window.  Start typing the the left hand column.  In this example I will use the word “Home” and then Page 1, Page 2, Page 3 etc…  These are just examples to show you how to add navigation links to your left hand column.  You will need to decide what to call each link yourself.  Also, the left hand column will expand as you type in that area.  We will change this later so don’t worry about it for now.

When you start to type your font may be a little larger than what we need.  You will need to adjust to size.  There are 2 buttons in Nvu that will adjust the size.  They have  downward arrow and an “A” or and upward arrow and an “A” on it.  (CLICK HERE).  You will need to become familiar with with this key as you will always be experimenting with the size of your type an every web page you create.

Now change the size of your font to look like this (CLICK HERE).

Last step is to highlight each link and give them the URL they will be transferring to.  See example (CLICK HERE).

Make sure that once you get your links in place, or at least typed out, that you save your “Template” HTML page so we can build on it in the next lesson.  Speaking of which, we will be adding text to to middle column of your new web page in tomorrow lesson.

Until my next post………hope your making money!!

Henry Michaels

Tags: links, web page, web site, create,