The Anchor Tag and Hyperlinks
What Are Hyperlinks?
Hyperlinks are the clickable, underlined words you find on a web document. They are created using the anchor tag.
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.
The destination of the hyperlink is defined using the <a></a>
anchor tag with the href attribute.
<a href="url">Underlined Text</a>
Other attributes: target, title, download
Hyperlinks have default colors which can be changed using your style sheet.
An unvisited link is blue
A visited link is purple
An active link is red
The anchor tag requires a closing tag. </a>
The anchor tag can be used as a standalone tag, or can be set in paragraphs or lists.
<p><a href="url">Going somewhere</a></p>
<ul>
<li><a href="url">Going somewhere</a></li>
<li><a href="url">Going somewhere</a></li>
</ul>
Lists are often used with hyperlinks to create drop down menus.
Easy Linking
HTMLPad makes coding EASY!
If you just like to type, GO FOR IT.
If you're a little lazy like me, you'd probably rather point and click than type something like: <a href="features.html" target="_blank">HTMLPad Features</a>
I'd rather highlight the text and click the anchor icon 
.
Then, browse to the page you want and fill in the rest of your preferred options by clicking.
Try it free for 30 days.
Or find out more about HTMLPad 2014 Personal
Who needs it? Only serious web authors!
Grab it Today and get our Exclusive Discount!
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/">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. This practice is acceptable when creating menus.
The code:
a { text-decoration : none}
Download Attribute
In the old days and many still today if we wanted a special file like a pdf, zip, exe, etc. to be available for download by our user we would simply use the url with the path to the file. The person downloading the file would get a dialogue box that asked them what they wanted to do with the file.
Today you can specify that the file is available for download and the user agent(browser) will follow normal protocol procedures for downloading the file.
The url looks the same in the link but we add the download attribute as shown:
<a href="templates/309.zip" download="309.zip">Download Template</a>
Note that the href specifies the path to the file and the download attribute requires only the file name.
Target Attribute
Probably the most used attribute of the anchor tag beside the href is the target attribute.
You can tell the new page to open in a fresh browser window by using target="_blank"
Other choices are _self and _parent.
You can also, set an iframe on the page, give it a unique name and send the web page to it.
Click the Click This link on the next line and watch as one of our other sites opens in the iframe window.
Target Attribute Demo
Here's the simple code we used:
<p><a href="http://www.create-a-website-with-html.com" target="bottompage">Click This</a></p>
<iframe name="bottompage" style="width: 95%; height: 400px; box-shadow: 4px 4px 8px #202020">
</iframe>
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 {color :#000000}
a:visted{color :#BFBFBF }
a:hover{color :#DFDFDF }
See also: Creating Buttons with CSS