Even More HTML
Computing Resources >> Tutorials >> Web Development >> Even More HTML   

Text Alignment

Tables: Basics

Nested Tables

Experience Table

Definition Lists

Anchors

Colors & Links

Other Tags

Tutorial Handout

Evaluate this tutorial

 


 

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.

next section >

 

 

© 2003 Mrudula Yadav | iSchool | UT Austin | webmaster