Link to a Named Anchor

Named anchor is used when you want to jump from one section to another section of the same web page, normally a web page with lot of content (long page). For instance, frequently asked questions (FAQs) often have hyperlinks at the top of the page listing the questions; when you click one of the hyperlinks, you jump further down the page to the question's answer.

See this example of FAQ page: http://wiki.creativecommons.org/Frequently_Asked_Questions.

To create a named anchor:

1. Add a named anchor to the location on the page where the user jumps
   <a id="hours" name="hours"></a>
2. Create a hyperlink at the top that links to the named anchor
   <a href="http://www.pcc.edu/links.html#hours" target="_self">Hours of operation </a>

Add a Mailto Link

It's nice to put a link in a web page to allow your user to send email. This is called a mailto link. However, there are some drawbacks in doing it this way versus creating a contact form:

• Your user must have an email application set up in their computer to work with the browser, such as Outlook, Eudora, Mail, etc. It will not work if your user only have a web-based email, such as Yahoo mail or Gmail.
• Spammers troll the Internet for mailto links. Expect to get a lot of spam, or junk email sent to the email address used in the mailto links.

You can use an email link obfuscator to cut back on the spam, such as the ASCII Email Obfuscator (http://digitalcolony.com/lab/maskemail/maskemailascii.aspx). These tools generate mailto links that work in your browser, but are very difficult for spammers to harvest. Just provide the email information you want to obfuscate, and the tool generates a piece of HTML code that you can paste into your page.

Tips to avoid spam:

• Don't enter your email address into guest books
• Don't respond to spam asking to be removed from a list
• Create a throwaway email address that you change every so often and use only for your website.

Anchor Tag Pseudo-classes

CSS pseudo-classes are used to add special effects to some selectors.

Anchor tag <a> consists of 4 pseudo-classes. Each of them controls a part of how a hyperlink function.

• A: link --> defines the styles for normal unvisited links.
• A: visited --> defines the style for visited links.
• A: active --> defines the style for active links. A link becomes active once you click on it.
• A: hover --> defines the style for hovered links. A link is hovered when the mouse moves over it.

Example:

<style type="text/css">

     A:link {text-decoration: none}

     A:visited {text-decoration: none}

     A:active {text-decoration: none}

     A:hover {text-decoration: underline; color: red;}

</style>

By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red