Links
How do I add links?
Now it's time to learn how to add a link to your page, and add some decoration to it. There are two basic ways to link to another page, either through a text link, or an image link. On this page, we'll cover both, as well as targetting the links and other related material.
Text Link
To add a general text link, use this code.
<a href="URL YOU WANT TO LINK TO">CLICK HERE</a>
In the above code, all you have to do is add in the URL of the page you want to link to, and add your own words to the text portion. This is a very basic, no frills link. But what if you want the link to be a certain color?
Text Link with Style
When you add font effects to a link, the font commands go inside the link command, like this.
<a href="URL YOU WANT TO LINK TO"><font color="COLOR">CLICK HERE</font></a>
Now, when you use a basic text link, in the form of above, the new page will open IN the page you are linking from, but this can be changed. Perhaps you want the link to open in a new window? Or maybe you're using frames, and want the link to open in another frame. This is called targetting.
Targetting Links
If you want your link to open in a new window, you would use this link.
<a href="URL YOU WANT TO LINK TO" target="_blank">CLICK HERE</a>
If you're using frames, and want to target the link to open in a particular frame, you would use this code, and replace FRAMENAME with the specified name of the frame you want the link to open in.
<a href="URL YOU WANT TO LINK TO" target="FRAMENAME">CLICK HERE</a>
Button Links
If you'd rather have a form button link, you could use this code. The result would look like this:
Simply add your own URL where the # sign shows up in the code.
<form method="get" action="#"><input type="submit" value="Click here"></form>
Button Links with Style
So you think the form button above looks a little plain? Use this code to add some color, and get the following result.
Simply add your own URL where the # sign shows up in the code.
<FORM METHOD="get" ACTION="#"><INPUT TITLE="submit" TYPE="submit" STYLE="background:#849AA4" VALUE="Click Here"></FORM>
Page Anchors
A page anchor is a link that takes you to another location on the same page. This works well if you have a lot of content on one page, and would like to offer a quick jump to your visitors. A page anchor is actually two small codes. First, use this code to create the link.
<a href="#LINKNAME">Click here</a>
Then, add this code to the spot on the page that you want the link to jump to.
<A name="LINKNAME"></A>
Image Links
Using an image as a link is simple, however please make sure you read the Using Images section before working with hotlinking images. Once you're familiar with images, this part will make a lot more sense to you. To use an image in a basic link, you would use this code.
<a href="URL YOU ARE LINKING TO"><img src="URL OF YOUR IMAGE"></a>
You'll notice that when that code is used, there is a blue border around the image, signifying it is a link. If you would like to remove that border, you can use this code instead. You'll notice the only thing that has changed is a border command inside the image tag.
<a href="URL YOU ARE LINKING TO"><img src="URL OF YOUR IMAGE" border="0"></a>
Adding Alt Tags to Links
An alt tag is a small box of text that appears when you hover over a link. To add one to your image link, you would use this code. You'll notice the only thing that is different is a small alt tag in the image code.
<a href="URL YOU ARE LINKING TO"><img src="URL OF YOUR IMAGE" alt="You want to click, you know you do!"></a>