Anchor
Tag
Anchor Links
A named anchor is a hidden reference marker for a particular section of
your HTML file. This might be used to link to a different section of the
same page if it is long, or to a marked section of another page. In this
exercise we will create anchor links from the sections of the resume.
How it works:
The HTML format for creating the named anchor is:
<a name"education"> Education </a>
When you want to create a hypertext link to a named anchor, use the following:
<a href"#education"> Education </a>
The "#" symbol instructs your web browser to look through the
HTML document for a named anchor. When you select or click on the hypertext,
it brings the part of the document that contains the named anchor to the
top of the screen.
Adding Named Anchors
Step One:
Open yourlastname.htm
Step Two:
Locate and change all header <h3> tags in your resume:
<h3><a name="education">Education</a></h3>
<h3><a name="experience">Experience</a></h3>
<h3><a name="skills">SkilIs</a></h3>
If you reload now from your web browser, you will not notice any visible
change. The named anchor tags we have just added are hidden from the user's
view.
Adding Links to a Named Anchor
Step One:
Open yourlastname.htm
Step Two:
Locate the first table
Add <a href""> and </a> tags so that the section
looks like:
<table border= “1” width= “100%” >
<tr>
<td width=33%>
<div align"center">
<a href " #education" >Education</a></div>
</td>
<td width33%>
<div align"center">
<a href "#experience” >Experience</a></div>
</td >
<td width33%>
<div align"center">
<a href "#skills" >Skills~/a></div>
</td >
</tr>
</table>
Step Three
Save and load into your web browser. When you click on a link in the first
table, the browser should display the associated section at the top of
your screen. This document is really much too short to demonstrate the
benefits of anchor links. They are more useful in long documents and web
pages.
|