Project Management

Beat the hyperlink blues with these quick HTML tips

Are you tired of your hyperlinks always being the default blue? We'll show you how to liven up your Web page with colorful hyperlinks. With just a few bits of HTML code, your hyperlinks will jump off the page in brilliant reds, yellows, or purples.


Are you tired of not having it your way when it comes to the links on your Web page? Well, if you are sick of the default blue links on your Web site, and you want to spruce things up a bit, the following tips will allow you to take control of your links. Welcome to the Burger King of HTML!
Check out Jason Smith’s crash course in HTML series, parts one, two, and three.
The default blues
By default, when you create a link to another Web page or site, it is blue and underlined, indicating that it is indeed a hyperlink. However, you aren’t necessarily locked into this default setting. You can use the power of HTML to make your Web page look just the way you want it to look.

Changing colors
Let’s say you don’t mind that all of the links are blue, but you have one link that you would like to stand out. You want to make it a red link, instead of the default blue.
It would seem to make sense just to place a font color tag in front of the link as it has been done here:
<font color=”red”><a href=”page.html”>Click here</a></font>However, if you give this snippet of code a try, you will soon realize that it does not accomplish your goal at all.
The real solution
Rather than placing the font color tag in front of the link, you must place it in front of the words that represent the link, as shown here.
<a href=”page.html”><font color=”red”>Click here</font></a>

This will get the job done.

Changing all your links
Let’s say you want to go a step further and make all of the links in the entire document red. (I wouldn’t recommend this, but hey, it’s not my Web page, right?) You can add some extra code to your body tag to accomplish this task. By using link, alink, and vlink, you can define which colors your links are before they are clicked on (let’s make them green), while they are being clicked on (how about purple), and after the Web page has been visited (yellow—why not?). If you want to follow my psychedelic color scheme, then you would change your body tag to look like the code snippet below.
<BODY link=”green” alink=”purple” vlink=”yellow”>

That’s a wrap
Now that you have taken back control of your links (after all, they are your links), it’s time to talk about a more advanced topic of HTML—style sheets. But I don’t want to throw all of this at you at once. Change a few links on your Web page to suit your needs using the techniques offered here. Next time, we will do more with links using HTML style sheets.
If you manage to do something really cool with your hyperlinks, send me an e-mail so I can check it out!

Editor's Picks

Free Newsletters, In your Inbox