Post by Skyrocket on Mar 30, 2006 14:30:00 GMT -5
If you have used the Internet then You will know what a Hyperlink is. It is simply something that you click to open another web location, which could be another webpage or a movie or music.
A hyperlink has three basic modes, called "states". These are Link, Active and Visited. The link color can be set to change dependent on it is state. In Internet Explorer for instance there is a default set of colors for these states: Link = Blue, Active = Blue, Visited = Purple. You can set the colors to any color you wish by putting the following code into the <body> tag and altering the colors.
<body link="blue" active="blue" visited="purple">
You can use the color names as I have done, or you can use hexadecimal colors, such as #0000FF (blue). If you want to find out the hexadecimal color code for the color you want then you can use this website to help you: www.virtualpromote.com/tools/colorchart/
I would recommend using hexadecimal color coding for all the colors on your site as it more likely that the color will show consistently across different browsers. So the code would look something like this now:
<body link="#0000FF" active="#0000FF" visited="FF00FF">
OK, now you know how to set the basic link state colors, I¡¦ll move on to actually adding links. If you want more advanced link coloring such as a different color when you hover over the link, or multiple link states for different links around the webpage, then You will need to read about in the Planning For Growth With CSS section of the Tool Kit.
The HTML tag for a link is known as the <a> tag. The text or image that you want to be the link needs to sit in between the <a> and the </a> tags. Of course, if you simply put:
<a>THIS IS A LINK</a>
Then you would get a link that didn't do anything, because you haven¡¦t told it where to link to. To do this you need to add in the href attribute. So if you wanted to link to a webpage called linkexchange.html then you would write the code like this:
<a href="linkexchange.html">GO TO LINK EXCHANGE</a>
If it is an external webpage, one that isn¡¦t part of your site, then you would have to use the full URL (web address), so it will now look something like this:
<a href="http://www.linkexchange.com/linkexchange.html">GO TO THE LINKEXCHANGE</a>
Most of the links You will have on your Three Phase Profits site will be provided for you, so all you have to do is make sure that you have copied the full URL from the code provided for you by the affiliate company.
That is the bare minimum when it comes to links, now lets get a bit smarter and control exactly how our links will behave when someone hovers over them or clicks on them.
The first and most important thing you need to do is make sure that the external links open in a new browser window. The way to do this is to give the link a target. Add target="_blank" to the <a> tag attributes and this will tell it to open in a blank (new) browser window. So it will look something like this:
<a href="linkexchange.html" target="_blank">GO TO THE LINKEXCHANGE</a>
Now you may have noticed that you can see the URL of the link in the bottom browser bar, or the Status Bar, when you hover over the link. Because a lot of affiliate links are long and messy, it is a lot more professional to change this to say something else, like "Click For More Information On This Excellent Opportunity".
To do this we have to get into what is called Dynamic HTML. Wow, so not only are you learning HTML, you are learning DHTML too! You will soon be an advanced web designer before you know it!
OK, back to it. You don¡¦t actually need to completely understand this code, just copy it into your <a> tag and change what it displays in the Status bar to what ever you want it to say. I have put in "Make Money Now!" in this example. Here¡¦s the code to add to your <a> tag:
onmouseover="window.status='Make Money Now!'; return true" onmouseout="window.status=''"
So the full link I have been using will now look like this:
<a href="linkexchange.html" target="_blank" onmouseover="window.status='Make Money Now!'; return true" onmouseout="window.status=''">GO TO THE LINKEXCHANGE</a>
Well that is about it for adding links to your webpage and controlling them. For more advanced styling of the link states, take a look at the Planning For Growth Using CSS section.
A hyperlink has three basic modes, called "states". These are Link, Active and Visited. The link color can be set to change dependent on it is state. In Internet Explorer for instance there is a default set of colors for these states: Link = Blue, Active = Blue, Visited = Purple. You can set the colors to any color you wish by putting the following code into the <body> tag and altering the colors.
<body link="blue" active="blue" visited="purple">
You can use the color names as I have done, or you can use hexadecimal colors, such as #0000FF (blue). If you want to find out the hexadecimal color code for the color you want then you can use this website to help you: www.virtualpromote.com/tools/colorchart/
I would recommend using hexadecimal color coding for all the colors on your site as it more likely that the color will show consistently across different browsers. So the code would look something like this now:
<body link="#0000FF" active="#0000FF" visited="FF00FF">
OK, now you know how to set the basic link state colors, I¡¦ll move on to actually adding links. If you want more advanced link coloring such as a different color when you hover over the link, or multiple link states for different links around the webpage, then You will need to read about in the Planning For Growth With CSS section of the Tool Kit.
The HTML tag for a link is known as the <a> tag. The text or image that you want to be the link needs to sit in between the <a> and the </a> tags. Of course, if you simply put:
<a>THIS IS A LINK</a>
Then you would get a link that didn't do anything, because you haven¡¦t told it where to link to. To do this you need to add in the href attribute. So if you wanted to link to a webpage called linkexchange.html then you would write the code like this:
<a href="linkexchange.html">GO TO LINK EXCHANGE</a>
If it is an external webpage, one that isn¡¦t part of your site, then you would have to use the full URL (web address), so it will now look something like this:
<a href="http://www.linkexchange.com/linkexchange.html">GO TO THE LINKEXCHANGE</a>
Most of the links You will have on your Three Phase Profits site will be provided for you, so all you have to do is make sure that you have copied the full URL from the code provided for you by the affiliate company.
That is the bare minimum when it comes to links, now lets get a bit smarter and control exactly how our links will behave when someone hovers over them or clicks on them.
The first and most important thing you need to do is make sure that the external links open in a new browser window. The way to do this is to give the link a target. Add target="_blank" to the <a> tag attributes and this will tell it to open in a blank (new) browser window. So it will look something like this:
<a href="linkexchange.html" target="_blank">GO TO THE LINKEXCHANGE</a>
Now you may have noticed that you can see the URL of the link in the bottom browser bar, or the Status Bar, when you hover over the link. Because a lot of affiliate links are long and messy, it is a lot more professional to change this to say something else, like "Click For More Information On This Excellent Opportunity".
To do this we have to get into what is called Dynamic HTML. Wow, so not only are you learning HTML, you are learning DHTML too! You will soon be an advanced web designer before you know it!
OK, back to it. You don¡¦t actually need to completely understand this code, just copy it into your <a> tag and change what it displays in the Status bar to what ever you want it to say. I have put in "Make Money Now!" in this example. Here¡¦s the code to add to your <a> tag:
onmouseover="window.status='Make Money Now!'; return true" onmouseout="window.status=''"
So the full link I have been using will now look like this:
<a href="linkexchange.html" target="_blank" onmouseover="window.status='Make Money Now!'; return true" onmouseout="window.status=''">GO TO THE LINKEXCHANGE</a>
Well that is about it for adding links to your webpage and controlling them. For more advanced styling of the link states, take a look at the Planning For Growth Using CSS section.