Tailgunner404

Basic Links

Okay now lets look at "Links". You've gotten together all of the stuff that you want to share with the Internet Community. You have decided on the basic look of your page. You have picked out background colors or images. But what about "Links". Links? You know those Hypertext Links that take you from page to page. You gotta have them, or otherwise hows a body to find all of the good stuff you have published.

I am a firm believer that every page should have simple text links at either the top or bottom of the page. Notice that my pages have both. I have used "Java Script" menus...and I like them. They are neat. But even then I always include a top or bottom text menu. Look at the biggies, Yahoo, The Open Directory, Amazon.com, look closely at all of them and you will find simple html text links everywhere.

Okay where else do you use them? You can place "Active Links" in your sentences to direct a viewer to a resource. Like the COLOR WHEEL. This link will open a new window and take you to the Color Wheel we talked about in choosing colors. Here is what that link looks like:

<a href="htmlpage2.html" target="new">COLOR WHEEL</a>

Here is what you have got. The opening angle bracket "<" followed by "a" "href" (hypertext reference) "=" htmlpage2.html (the location of the page you want to link to) "target" (this tells the browser where the new page is going to be displayed) "=" "new" (the location is a new window) > (close the angle brackets...then the text of the active link...followed by the </a> (closing tag for a link)

I like to use the "target="new" to keep people on my page. I usually use it for resources that have a single function and have no links to anything else. Like the Color Wheel. I also like to use it when referencing other peoples web pages. That lets me link to them and still keep you here. When I am surfing I usually have at least 5 or 6 open browser windows. If the page does not open a new browser for me. I will use "Shift" when clicking on the link to force a new window to open. This is especially useful when going throught a search engine list. It allows me to keep the list on one page and look at the link without losing the list. If you don't want to use the "Target" attribute just eliminate it and use the basic tag as follows:

<a href="htmlpage2.html">Color Wheel</a>

You thought that I would tell you how to make the text multicolored? Take a look at the source code.

Notice the links at the top and bottom are separated by |? Here is how it is done:

First put the links in the order you want them. Write the link coding as above. On my text editor I like to place them in a list as follows just to make it easy for me to see what I have done. You can write them as a single line if you wanted to. A word of caution; be sure that you put the " " in the tag just as I have or the link will not work. If you forget one of the quote marks the text after it will be all screwed up. So if you display the page and it does not work as you expect look for unclosed quotes as a possible error. So here goes:

<a href="htmlpage2.html">Color Wheel</a> |
<a href="htmlpagex.html">Text X</a> & # 124;
<a href="htmlpagey.html">Text Y</a> |
<a href="htmlpagez.html">Text Z</a> |

In the first line I used the "|" key. To get the bar you use the shift, backslash key. On my keyboard it is the key just below the backspace. Or as in the second example I used the ASCII text code which is &# 124; I left a space between the # and the 1 so that it would display. Just remove the space and the browser will display the "bar".

You can also make an image an active link, but that is for another time.

Click Here for next tutorial.

Return to Top

Click Here to Email Tailgunner404