2.
Locate the text HTML version and enclose it with an <a> tag that refers to spray.htm .<li><a href="spray.htm">HTML version</a></li>
3.
Locate the text Glossary of Terms and enclose it with an <a> tag that refers to glossary.htm and opens the glossary in a new window .<li><a href="glossary.htm" target="_blank">Glossary of Terms</a></li>
4.
Save the file, and then refresh the Internet Explorer display .CLEAN UP Close the Notepad and Internet Explorer windows.
Hyperlinking to an E-Mail Address
Hyperlinks can point to anything, not just to Web pages . You can create e-mail hyper-links, for example, that start the user’s default e-mail program, create a new message, and enter the recipient’s address . (You can also set it to fill in the message subject, if you like .)
72 Chapter 5
E-mail hyperlinks are useful when you want to direct someone to send a message to a particular person . For example, it is common to include a link to e-mail a site’s webmas-ter . To create a hyperlink to an e-mail address, use the same href attribute as you did previously, but instead of a Web address, type mailto: followed by the e-mail address, like this:
<a href="mailto:[email protected]">Contact Us</a>
Note Not everyone who has Web access also has an appropriate e-mail program set up to take advantage of a mailto: hyperlink. You might prefer to set up a Web-based contact form, which you will learn about in Chapter 14, “Creating User Forms.”
Not all browsers support live e-mail hyperlinks . It’s a good idea to also include the actual e-mail address in text form on the page, in case someone cannot use your hyperlink . In such a case, the text would mirror the address as follows:
Contact <a href="mailto:[email protected]">[email protected]</a>
Caution Including an e-mail address on a publicly accessible Web page is bound to generate a certain amount of incoming junk mail, or spam. For this reason, do not put your main e-mail address on a public page. If you have your own domain, or if your ISP or hosting company allows you to have multiple e-mail addresses, create a special account to be used for public contact (or ask your IT specialist to create one for you). That way, if you get too much junk mail, you can delete that address and start over with a new one without disrupting your main e-mail account. If you don’t have access to multiple e-mail accounts, consider a free Web-based account.
To add a default subject line to the e-mail, add a ?subject attribute after the e-mail address, like this:
<a href="mailto:[email protected]?subject=Comment">Contact Us</a>
The person using the hyperlink to contact you can change the subject line in her e-mail program before sending the message .
Tip Even if all e-mail from the site is directed to the same person, you might still create multiple e-mail hyperlinks, each one with different default subject lines.
Another option, title , specifies a ScreenTip for the hyperlink . This attribute displays a message when the user hovers the mouse pointer over the hyperlink . By default, the ScreenTip for a hyperlink shows the address of the link, but you can make it display
Hyperlinking to an E-Mail Address 73
In the following example, because the text is the same as the hyperlink, it would be a waste for the ScreenTip to repeat the same hyperlink yet again:
Contact <a href="mailto:[email protected]">[email protected]</a>
To display the message Please contact us with questions or comments, add the following to the code:
<a href="mailto:[email protected]" title="Please contact us with questions or comments">[email protected]</a>
You can also use the title attribute to omit extraneous portions of the complete hyperlink so visitors do not see them in the ScreenTip . For example, creating a title that contains only the e-mail address, and not the subject or title parts of the tag, makes it easier to read .
In this exercise, you will create a mailto: hyperlink .
Note Use the practice file provided specifically for this exercise rather than a file created in a previous exercise.
SET UP Use the index.htm file in the practice file folder for this topic. This file is located in the Documents\Microsoft Press\HTML5 SBS\05Links\LinkingEmail folder.
Open the index file in Notepad and in Internet Explorer.
1.
Locate the text Contact the Webmaster at the bottom of the document and enclose it in a hyperlink that sends e-mail to [email protected].<a href="mailto:[email protected]">Contact the Webmaster</a></p>
2.
Add a subject line of Question/Comment to the hyperlink .<a href="mailto:[email protected]?subject=Question/Comment">Contact the Webmaster</a></p>
3.
Add a title to the hyperlink that will display [email protected] as a ScreenTip .<a href="mailto:[email protected]?subject=Question/Comment" title=
"[email protected]">Contact the Webmaster</a></p>
4.
Save the file, and then refresh the Internet Explorer display .5.
In Internet Explorer, point to the Contact the Webmaster hyperlink at the bottom74 Chapter 5
Note The full text of the hyperlink is visible either in the status bar or in a separate pop-up ScreenTip, depending on the browser and whether the status bar is displayed. In Internet Explorer, it appears as shown in the image that follows because the status bar is hidden. To toggle the status bar on/off in Internet Explorer 9, choose View | Toolbars | Status Bar.
ScreenT p f the browser w ndow has a status bar, the UR appears there nstead of n a ScreenT p
6.
Click the Contact the Webmaster hyperlink .Your default e-mail program starts if it was not already running, and a new e-mail message opens with the specified information in the To: and Subject: lines . (Micro-soft Outlook 2010 is shown here .)