|
Hyperlinks
Hyperlinks are that's those bits of script that wizz you from one page (or site) to another. When you click on a hyperlink you activate a command in the code source. To hyperlink to (for example) this page, you could use a code like this:
<a href="scripts3.html">Click here...</a>
The link really looks like this Click here... on your browser. So let's examine how we do it.
First we designate a color for all the hyperlinks on your page. In the <HEAD> section of your page you can put in a line of code like this:
<BODY BGCOLOR="#FFFFFF" TEXT="#0000FF" LINK="#0000C0" VLINK="#0000C0" ALINK="#2080FF">
This is the actual code for part of this page.
The BODY BGCOLOR="#FFFFFF" means that I use a white background.
Text color is defined as TEXT="#0000FF" which gives you that subtle blue font color that you may or may not like. (I thought it would be a nice change from black).
Then it's the LINK="#0000C0" which means that the hyperlinks show up as a different shade of blue so you can see it's a hyperlink!
Next is the VLINK="#0000C0" which I have set to the same color as the hyperlinks. Usually, (if you have a lot of links) this color should be different so that someone returning to your page can see which links they have used already. The change can be very subtle, or you can be blatant about it and make them lime green! - or something!
Finally there is ALINK="#2080FF" which is the 'active link', meaning that this is the link that you are currently clicking on.
There is a Javascript command which is the 'hover' command which colors a link when you pass the mouse over it. Not the same as ALINK, but subtly different! This is a bit beyond basics.
Anyway, back to basic hyperlinking. As well as being a way to transport your visitor around your website, a hyperlink can execute the mailto e.mail command. Here's how you write it:
<a href="mailto:mail@yoursite.com">mail@yoursite.com</a>
I have highlighted the bit that 'shows' on the browser page in red for you. If you have read my graphics page you will know that instead of text, you can plant a graphic instead, so the code looks like this:
<a href="mailto:mail@yoursite.com"><img src="emailgraphic.gif" width="50" height="20" border="1" alt="My Graphic"></a>
Something I almost always do is put in 'onMouseover' within a hyperlink. Details of how to do this are in the Javascript pages.
'Exterior' hyperlinks are similar to 'interior' ones. The code is longer as you can see in this example of a hyperlink to this site:
<a href="http://tacticalpanda.freewebspace.com>Tactical Panda</a>
One useful addition to any 'external' linking method is the 'target='. Let me explain. If you place an external link (or an internal one for that matter), to open a new browser window you have to use the 'target=_blank' command. If you don't then once a link is clicked on the visitor leaves your website to go to the new one and in order to get them back to you they will have to click the 'Back' button on their browser.
This can be inconvenient for both of you. The solution is to place the following command after the onmouseover, title etc:
target="_blank"
So, the new link looks like this:
<a href="http://www.awebsite.com" onfocus="this.blur()" onMouseover="self.status='Click here';return true" title="Click here" target="_blank">Link name</a>
Finally for this page we will look at the command at the bottom of every page - the 'Top' (go to the top of this page) command. This is a simple command placed at the bottom (where else?!) of your page:
<a href="#top">Top</a>
You must place a 'target' at the top of the page which must have the same name as the 'GoTo' command.
<a name="top"></a>
Again you can use the onMouseover, onfocus and title commands if you want to make it look nicer. On the next page we will look at <HTML>, <BODY> and Header Commands.
Top
[1] [2] [3] [4] [5]
<<< Previous page
| 
