Hyperlinks
Four kinds of hyperlinks
There are four kinds of hyperlinks. Hyperlinks typically connect to other web pages, but can also be used to link to PDFs, Microsoft Office documents, or full-size images.
- This is a relative link: <a href="index.html">relative link</a>.
In Dreamweaver properties, point to the file that you want to link to. Note that you can only create relative links to files that are within your local web site folder. Although you will usually link to another HTML file, you can also link to other file formats, such as PDF, Word documents, etc.
- This is an absolute link: <a href="http://www.w3c.org">absolute link</a>.
In Dreamweaver properties, enter the complete web site address that you want to link to. Be sure the address includes the http:// prefix. To ensure a working link, browse to the page first and then copy the web address and paste into the Dreamweaver link box.
- This is an e-mail link: <a href="mailto:paulhyde@udel.edu">e-mail link</a>.
In Dreamweaver, from the Insert menu, choose "Email Link". Use this to accept e-mails from your web page. There are additional techniques to minimize the amount of spam you might receive from posting your e-mail address on a web page.
- This is an anchor link: <a href="#launch">anchor link</a>.
This is a specialized link format for navigating up or down within large pages. It is also use for posting an internal link on a page so that people can be directed to that exact location. You can see examples of anchor links in the top left section of this page.
Four hyperlink states
There are four states for each of the four kinds of hyperlink.
- The default state is how a link appears on a web page is first presented to the user.
- The visited state is how a link appears on a when page when the user has already browsed to the linked page.
- The hover state is how a link appears on a web page when the mouse or cursor is over the link.
- The active state is how a link appears on a web page when the mouse or cursor is clicked on a link.
By applying CSS to an HTML link, a vast array of hyperlink styles can be achieved.
- Removing the underline from the default state of a hyperlink is one possibility.
- Adding a background color to the hover state of a hyperlink is another possibility.
- A combination of styles applied to multiple states of a hyperlink offers many more possibilities.
Here are ten more: List of 10+ usability-conscious link styles.
