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.
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.
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
Free Tools We Recommend
- Free Ebook How to Code in HTML5 and CSS3
- "How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
- Free Logo Generator Turbologo.com
- If you are building a website for business you need to begin thinking about creating a brand identity. An unforgettable logo could be just the start you need. You can create it free at Turbologo.com. They also provide generators for business cards and letterheads.
- FREE HTML Editor (Windows): NoteTab Light
- All the features of a commercial HTML editor.
- FREE Apache Server (Windows): IndigoAmpp
- Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
- Linux Users
- If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
- For image resizing we've found the easiest Linux tool to be Krita.
Have you tried our free mobile ready website template kit? Download Template #402 - 6 Page Kit