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!
After this lesson you will be able to:
Note: If you do not have the working document from the previous lesson, download a copy now.
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.
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.
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:
<h2>Introduction</h2>so that it looks like:
NOTE: You have just marked the line that contains the header "Introduction" with a hidden reference marker, the named anchor "intro".
<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>
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:
<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.
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:
<li>Introductionto look 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>
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.
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.
<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".
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.
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...
Create named anchors for the headings in your own web page and build an index that will link to these sub-sections.
In the next lesson you will learn how to make a picture act as a hypertext link.
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
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 2.5 License.