8d. Links to Sections of a Page

Over the last 3 lessons you have learnt how to link to other web pages, whether they where ones you created your self or have found elsewhere on the Internet. Well what if you wanted to connect to a specific section within a document? WELL YOU CAN!

THE NAMED ANCHOR.

A named anchor is a hidden reference marker within a document linked to a particular section of your HTML file. This might be used to link to a different section of the same page if it is a long page and you wish to go directly to that section, or to a marked section of another page on a separate HTML document. For example, on this page you are viewing now, I have created a hidden marker called "check" that marked the heading below "Check Your Work". Then, I wrote an anchor link that connects to this section of this document. Once you click on a link to the named anchor, your web browser will jump so this line is at the top of the screen.

Here is an example of what I mean, you can try right now. Click on Check Your Work. When you get down there look for the 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 in the example we just used

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

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

WRITEING A LINK TO A NAMED ANCHOR

When your creating 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 in the example we used

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

The "#" symbol instructs your web browser to look through the current HTML document for a named anchor called "xxxxxx" or in the example you used, "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 INTO OUR DOCUMENT.

Now, we are going to add named anchors into our lesson that will appear at the top of our Eazy Space Tours Web page. The entries for these will be the headings we have already created. Each will act as a hypertext link to a particular section of our document.

The first step is to create named anchors for each of the heading sections.

1. Open your index.html file in the text editor.
2. 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: We just marked the line that contains the header "Introduction" with a hidden reference marker, the named anchor "intro".

3. Now in the same manner, change all header <hN> tags for the other sections and remember each tag can be written on one line:

    <h2><a name="venus">Venus</a></h2>
      
    <h3><a name="volcanic">Volcanic Tours Of 
    Venus</a></h3>
      
    <h3><a name="tropical">Tropical Centres Of 
    Venus</a></h3>
      
    <h2><a name="uranus">Uranus</a></h2>
      
    <h3><a name="wannahock">Skiing On 
    Mt. WannaHockALoogie</a></h3>
      
    <h3><a name="unix">Skating on Lake Unix</a></h3>
      

4. Now reload your file in your web browser, you will not notice any visible change at all, it should look exactly the same as it did before. The named anchor tags that we just added are hidden from the user's view.

ADDING LINKS TO A NAMED ANCHOR IN THE SAME DOCUMENT

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

1. If not already open, open your index.htm file in the text editor.
2. Below the first sentence under the Eazy Space Tours heading enter the following text:

   <hr />
   <b>In this Lesson...</b>
    <ul><i>
      <li>Introduction</li>
      <li>Venus</li>
      <li>Volcanic Tours Of Venus</li>
      <li>Tropical Centres Of Venus</li>
      <li>Uranus</li>
      <li>Skiing On Mt. WannaHockALoogie</li>
      <li>Skating on Lake Unix</li>
   </i></ul>
   <hr />
   

   NOTE: This has been marked off above and below with a solid line using the <hr /> tag. The Italic style has been used on the entries of the text. Now at this point we have only entered the text of the index entries. Below we will add the HTML to make the links active.

3. Save and Reload the index.htm file in your web browser.

Now finally, what we want to do is to make each items of the list we made is to act as a hypertext link to another section of the document. Now to do this, we will use a variation of the basic anchor link we learnt in lessons 8a. So rather then linking to another file, we want to 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:

1. If not already open, open your index.htm file in the text editor.
2. Go to the first list item in your index section. Change it from:

      <li>Introduction</li>
      
      to look like this
      
      <li><a href="#intro">Introduction</a></li>
      

3. Now you can 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>
     
     <li><a href="#venus">Venus</a></li>
     
     <li><a href="#volcanic">Volcanic Tours Of 
     Venus</a></li>
     
     <li><a href="#tropical">Tropical Centres Of 
     Venus</a></li>
     
     <li><a href="#uranus">Uranus</a></li>
     
     <li><a href="#wannahock">Skiing on Mt. 
     WannaHockALoogie</a></li>
     
     <li><a href="#unix">Skating on Lake Unix</a></li>
   </i></ul>
   <hr />

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

ADDING LINKS TO A NAMED ANCHOR LOCATED IN ANOTHER DOCUMENT

You can create a hypertext 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="filename.htm#name">Text to activate link</a>

   Or if the document is on another web site
   
   <a href="www.cheeseman.org/bluevein/ages#matured">
   Text to activate link</a>   
   

OK, In lesson 8a we created a hypertext link that jumped from the section in our lesson on Eazy Space Tours to issapissin.htm, a separate HTML file. Now we are going add a link in the issapissin.htm, our second document that will return to the Introduction section of the main page.

1. Open your issapissin.htm file in the text editor
2. Near the bottom of the HTML (but above the </body> tag) enter the following:

   <hr />
   <a href="../index.htm#intro">Return to 
   <i>Eazy Space Tours</i></a>
   

   NOTE: We included the Italic Style tag <i>...</i> inside the text marked by the named anchor "intro"

3. Save and Reload into your web browser. When you click on the hypertext links at the bottom of the issapissin.htm page, you should jump back to the "Introduction" section of the Eazy Space Tours lesson.

CHECK YOUR WORK.
Compare your document with a SAMPLE of how this document should look. If your page looks different than the example, review the text you entered in the text editor. Make sure it matches the text instructions in the 8d. Links to Sections of a Page section of this lesson. After viewing the sample, you can close the window that opened.

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

WOW!!! The Sample page and my page are starting to have all this extra stuff on it now! Yep. Hopefully you've been practicing and you should have a page that looks just like or similar to this one.

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

Top of page | Previous Lesson| Lessons Index | Next Lesson