*** This is my practice website to learn and practice HTML, using Microsoft Step By Step book, by Faithe Wempen. ***

Notes about hyperlinks

Basic syntax

<a href="[web page, document, or anchor]">Click here</a>

Link to a web page

Visit <a href="http://www.writing.com/author/dutchhillgirl">my writing porfolio</a> to read some of my stories.

To open a page in a new window, add the argument target="_blank".
Visit <a href="http://www.writing.com/author/dutchhillgirl" target="_blank">my writing portfolio</a> to read some of my stories.
Result: Visit my writing porfolio to read some of my stories.

Link to a document

Link to a document in the same folder: <a href="example.xls">Click here</a> for an Excel version.
Link to a document in a child folder: <a href="articles/example.xls">Click here</a> for an Excel version.
Link to a document in a parent folder: <a href="../example.xls">Click here</a> for an Excel version.
Result: Click here for an Excel version.

Link to an e-mail address

<a href="mailto:dutchhillgirl20@yahoo.com">Contact me</a> for more information.

To add a default subject line, add ?subject=[subject] after the e-mail address.
To add a screen tip, add a title="[screen tip]" argument.
<a href="mailto:dutchhillgirl20@yahoo.com?subject=Question/Comment" title="dutchhillgirl20@yahoo.com">Contact me</a> for more information.
Result: Contact me for more information.

Link to an anchor

To define an anchor, create a tag around the text: <a name="[anchor name]>.
<a name="index">Index</a>
Result: Index

To refer to an achor point, include the anchor name in the href argument, preceded with a # sign: <a href="#top">Return to the top</a>
Result: Return to the top

If the anchor is in a different document, include the name of the file: <a href="report.htm#index">Return to the Index</a>

Hyperlink styles

<a href="colors.htm" style="color: magenta">Color Names</a>

To create a style rule for a pseudo-class: a:link {color: magenta}

  1. link (link that has not been visited)
  2. visited (link that has been visited)
  3. focus (link selected by using keyboard - obsolete?)
  4. hover (link the mouse is positioned over)
  5. active (link when it's clicked)
Back to the top