CLEAN UP Close the e-mail message window without sending the message, and then close the Notepad and Internet Explorer windows.
Creating and Hyperlinking to Anchors
An anchor is a marker within an HTML document, roughly analogous to a bookmark in a Word document . You define a specific location in the document with an anchor name, and then you can hyperlink directly to that anchor .
Anchors are most valuable in long documents with multiple sections . They provide a means for users to jump directly to whatever section they want rather than having to read or scroll through the entire document . You can do this internally by creating a list of hyperlinks at the top of the document, or you can do this externally by including an anchor name in a hyperlink to another document . There are two parts to the process:
you mark the anchor location, and then you create a hyperlink that refers to it .
To define an anchor, create an <a> tag around the destination text and include a name=
attribute . For example, suppose you have a heading that reads Conclusion, and you want to create an anchor point with that same name:
<a name="conclusion">Conclusion</a>
To refer to the anchor point, include its name in the href= attribute . Precede the anchor name with a pound sign (#) . If the anchor point is in the same document as the hyper-link, you can use a relative reference like this:
<a href="#conclusion">View the Conclusion</a>
Otherwise, you must include the name of the file in which the anchor is located . For example, if the anchor were in a file called report.htm, it would look like this:
<a href="report.htm#conclusion">View the Conclusion</a>
The same rules apply to the file name as they do with regular hyperlinks . If the document is not in the same folder, you must refer to the folder either absolutely or relatively . In this exercise, you will create and link to anchor points in an HTML document . SET UP Use the spray.htm and index.htm files in the practice file folder for this topic. These files are located in the Documents\Microsoft Press\HTML5 SBS\05Links\
CreatingAnchors folder. Open the spray file in Notepad and in Internet Explorer.
1.
Locate the Equipment heading (not the list item), enclose it with an anchor tag, and include equipment with the name= attribute .<a name="equipment"><h2>Equipment</h2></a>
Note You can nest the <a> tags within the <h2> tags or vice versa, but be consistent at both ends.
2.
Repeat step 1 for the other <h2> level headings in the document, using the lower-case title of each one as the anchor name .<a name="mixing"><h2>Mixing</h2></a>
...
<a name="spraying"><h2>Spraying</h2></a>
...
<a name="cleanup"><h2>Cleanup</h2></a>
3.
In the bulleted list at the top of the document, create a hyperlink from the Equip-ment list item to the corresponding heading .<a href="#equipment"><li>Equipment</li></a>
4.
Repeat step 3 for each of the other list items .<a href="#mixing"><li>Mixing</li></a>
<a href="#spraying"><li>Spraying</li></a>
<a href="#cleanup"><li>Cleanup</li></a>
5.
Save the file, and then refresh the Internet Explorer display .6.
Click each of the hyperlinks in the bulleted list; click the Back button after each one to return to the top of the page .Creating and Hyperlinking to Anchors 77
As you click each link, the browser scrolls down the page to display the correspond-ing headcorrespond-ing at the top of the window . The exception is Cleanup, which does not appear at the very top because it is so near the bottom of the page; instead, the lower portion of the page appears when the Cleanup link is clicked .
7.
Open the index file in Notepad .8.
Under HTML version, link each of the bulleted list items to the corresponding anchor point you created in the spray file .<ul><li><a href="spray.htm">HTML version</a>
<ul><a href="spray.htm#equipment"><li>Equipment</li></a>
<a href="spray.htm#mixing"><li>Mixing</li></a>
<a href="spray.htm#spraying"><li>Spraying</li></a>
<a href="spray.htm#cleanup"><li>Cleanup</li></a></ul></li>
9.
Save the file, and then refresh the Internet Explorer display .10.
Click each of the hyperlinks . Click the Back button after each one to return to the referring Web page .CLEAN UP Close the Notepad and Internet Explorer windows.