HTML Code Tutorial

Tutor Ebook Download

The Anchor Tag and Hyperlinks

Hyperlinks are the colored, underlined words you find on a web document. Clicking on these words will send you to a predefined location on the same document, to another page on the same server or to a location on another server.

Hyperlinks are created using the anchor tag.
<a command="target">Highlighted Text</a>

Commands for this tag can be:

href
Signifies a hyperlink.
name
Signifies a specified location on page.
See Intradocument Linking
img
Signifies an image to be displayed on the document.
Omit the a. <img>
See Placing Images

The anchor tag requires a closing tag. </a>

a href

Text links are defined with the hyperlink reference anchor.

It looks like this in your code:

<a href="target">Destination</a>

Location on Same Site

To link to another page on the same site the code would be:

<a href="samesite.htm">Another Page</a>


To link to another site:

Note: http:// is required.

<a href="http://www.destination.com/index.html">Another Site</a>

Removing the Underline

The default underline can be removed from the hyperlink using style sheets. Though, you should not remove the underline from links within your document body, there are times when this practice is acceptable.

The code:
a { text-decoration : none}

Rollover Effect

You've seen hyperlinks that change colors when the mouse is placed over them. We use this effect on our links. The code for assigning colors to the different states of the hyperlink is shown below. It can be placed in a style sheet in the head section of your document. Change the specified colors to produce your own version of rollovers.
a:link{color :#000000}
a:visted{color :#BFBFBF }
a:hover{color :#DFDFDF }

Advanced Effects

If you'd like to add some advanced effects to your links and you don't want to learn complicated javascript, here's a simple solution using some of the techniques mentioned above.

You've seen the fancy navbars created with javascript. You can mimic the color change of the buttons using simple CSS.

Use 2 different colored buttons for the active and hover states. You could add a third color for the visited state.

The code is very simple.

HTML code:
<div id="buttons" style="width: 200px; background-color: #0060ff; padding : 5px 5px 5px 5px; text-align: center">
<p><a href="#begin">Button1</a></p>
<p><a href="#begin">Button2</a></p>
</div>

The CSS:
#buttons img { padding: 0 0 0 0; margin: 0 0 0 0 }
#buttons p { margin:0 0 0 0; padding:0 0 0 0; text-align: center; text-indent: 0; line-height: normal}
#buttons a {display : block; font-family: arial; font-size: 9pt; color: #ffffff; width :182px; height: 42px; background-image : URL(button1.png); background-repeat : no-repeat; text-align: center; text-decoration: none; padding: 10px 0 0 0; margin:0 0 0 0}
#buttons a:hover {display: block; font-family: arial; font-size: 9pt; color: #0060ff; width :182px; height: 42px; background-image : URL(button2.png); background-repeat : no-repeat; text-align: center; text-decoration: none; padding-top: 10px 0 0 0; margin:0 0 0 0}


Copy the buttons: button1.png button2.png


Take a quiz. Take a Quiz on this Information.

See also:
Creating Buttons with CSS
Our Button Gallery for creating your own buttons.




CGI Online
How to Create a Website -Tutorial
Main Website


This Free HTML Tutorial
is provided by Net Success 2000 Plus Inc.
PO Box 1508
Somerset, KY 42502
Last Modified: May 30, 2008

HTML Codes Tutor Ebook