Writing HTML | About | FAQ | Alumni | Kudos | References | Tags | Lessons | previous | next |

8d. Links to Sections of a Page

You have seen how to link to other web pages, whether they are ones you created or have found elsewhere on the Internet. What if you wanted to connect to a specific section within a document? YOU CAN!

Objectives

After this lesson you will be able to:

Create a hidden reference marker for a particular section within an HTML file.
Build a hypertext link that will connect to a particular section within an HTML file.
Build a hypertext link that will connect to a particular section within another HTML file.
Create a hypertext table of contents for a web page.

Lesson

Note: If you do not have the working document from the previous lesson, download a copy now.

The Named Anchor

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. For example, on this page you are viewing, I could create a hidden marker called "check" that marked the heading below "Check Your Work". Then, I write an anchor link that connects to this section of this document. Once you click on a link to this named anchor, your web browser will jump so this line is at the top of the screen.

Here is an example you can try right now. Go to Check Your Work. When you get there look for a link that will return you to this very spot.

The HTML format for creating the named anchor is:


     <a name="NAME">Text to Link To</a>

or for the link you just tried above:


     <a name="check">Check Your Work</a>

Notice how this subtly differs from the anchor link <a href=... that we learned about in lesson 8a.

Writing a Link to a Named Anchor

When you want to create a hypertext link (or an "anchor link", see lesson 8a) to a named anchor, use the following HTML:


     <a href="#xxxxx">Text to act as hypertext</a>

or for the link you just tried that sent you to the section below:


     Go to  <a href="#check">Check Your Work</a>

The "#" symbol instructs your web browser to look through the HTML document for a named anchor called "xxxxxx" or in our example "check". 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 to the Volcano Web Lesson

Now, we will build a table of contents for our lesson that will appear at the top of our Volcano Web page. The entries for this will be the headings we have already created. Each will act as a hypertext link to a particular section of our lesson.

The first step is to create a named anchor for each of the heading sections in your Volcano Web lesson:

Open your index.html file in the text editor
Find the heading for the Introduction. Change it from:
```
<h2>Introduction</h2>
```
so that it looks like:
```
<h2><a name="intro">Introduction</a></h2>
```
NOTE: You have just marked the line that contains the header "Introduction" with a hidden reference marker, the named anchor "intro".

In a similar manner, change all header <h2> tags for the other sections:


  <h2><A NAME="term">Volcano Terminology</a></h2>
  
  <h2><A NAME="usa">Volcanic Places in the USA</a></h2>
  
  <h2><A NAME="mars">Volcanic Places on Mars</a></h2>
  
  <h2><A NAME="project">Research Project</a></h2>

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 in the Same Document

Now we will set up a table of contents that will appear at the top of the screen. We will use an unordered list (see lesson 6 for more on lists) to create this list:

If not already open, open your index.html file in the text editor.
Below the first sentence under the Volcano Web heading enter the following text:
```
<hr>
<b>In this Lesson...</b>
<ul><i>
<li>Introduction
<li>Volcano Terminology
<li>Volcanic Places in the USA
<li>Volcanic Places on Mars
<li>Research Project</i>
</ul>
```
NOTE: This index is marked off above and below by a solid line using the <hr> tag. The Italic style is used on the entries for the text. At this point we have only entered the text of the index entries. Below we will add the HTML to make the links active.
Save and Reload into in your web browser.

Finally, we want to make each item of the list act as a hypertext link to another section of the document. To do this, we will use a variation of the basic anchor link lessons 8a. Rather then linking to another file, we link to one of the named anchors (the hidden markers that you created above) within the same HTML file. We indicate a named anchor by preceding the reference marker name with a "#" symbol:

Open your index.html file in the text editor

Go to the first list item in your index section. Change it from:


    <li>Introduction

to look like:


    <li><a href="#intro">Introduction</a>

You should now be able to fill in the other links to named anchors so that the section looks like:


<hr>
<b>In this Lesson...</b>
<ul><i>
<li><a href="#intro">Introduction</a>
<li><a href="#term">Volcano Terminology</a>
<li><a href="#usa">Volcanic Places in the USA</a>
<li><a href="#mars">Volcanic Places on Mars</a>
<li><a href="#project">Research Project</a></i>
</ul>

Save and Reload into your web browser. When you click on an item in your index, the browser should display the associated section at the top of your screen.

NOTE:Your web browser will try its best to bring to the top of the browser the text enclosed by the <a name="xxx">...</a> occurs. In this case, there is no content after the last few examples, so when you click on the link to Research Project it will not jump to the very top of the screen. If you really wish to make this happen, until we write more content under this heading in youre document, you can insert 10-20 of <br> tags.

Adding Links to a Named Anchor in Another Document

You can create a link that jumps to a section of another HTML document that is marked by a named anchor. The HTML for building a link to a named anchor in another local HTML document is:


     <a href="file.html#NAME">Text to activate link</a>

and if the document exists on another web site:

    <a href="http://www.cheese.org/pub/recipe.html#colby">Colby Cheese</a>

In lesson 8a we created a hypertext link that jumped from the section of our lesson on Mount St. Helens to msh.html, a separate HTML file. Now we will add a link in that second document that will return to the original section of the main Volcano page.

Open your msh.html file in the text editor
Near the bottom of the HTML (but above the </body> tag) enter the following text:
```
<hr>
<a href="index.html#usa">Return to <i>Volcano Web</i></a>
```
NOTE: We have included the Italic Style tag <i>...</i> within the text marked by the named anchor "usa".
Save and Reload into your web browser. When you click on one of the hypertext links at the bottom of the msh.html page, you should jump back to the "Volcanic Places in the USA" section of the Volcano Web lesson.

In this case the link is just the name of another HTML file, msh.html, in the same directory as the index.html file. However, you can use a full URL (see lesson 7) to link to a named anchor in an HTML file on a remote computer. For example, to create a link to the "Introduction" section of an HTML file stored on the MCLI WWW server, the syntax would be:


   <a href="http://www.mcli.dist.maricopa.edu/tut/final/index.html#intro">
      Introduction to Volcano Web</a>

The reference marker "#anchor_name" is tacked onto the end of the URL.

Check Your Work

Compare your web page with a sample of how this document should appear. If your web page was different from the sample or the named anchor links do not properly connect, review the text you entered in the text editor.

Example of using the link to return to section on describing the named anchor...

Review Topics

How do you identify a named anchor?
What are the steps for creating a link to a different section within a document?
How do you modify an anchor link to connect to a named anchor in another HTML document?
How do you create a table of contents for a web page?
What is the difference in function between the tags <a href="...> and <a name="...> ?

Independent Practice

Create named anchors for the headings in your own web page and build an index that will link to these sub-sections.

Coming Next....

In the next lesson you will learn how to make a picture act as a hypertext link.

GO TO.... | Lesson Index | previous: "Links to the Internet" | next: "HyperGraphics" |

Writing HTML: Lesson 8d: Links to Sections of a Page
©1994-2002 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges
Questions? Comments? Visit our feedback center

URL: http://www.mcli.dist.maricopa.edu/tut/tut8d.html

This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License.