Finding Information using Targets

The Anchor Tag

In your travels around the web, you may have noticed how some pages have links to specific sections of a page. A good example is a site that has some type of alphabetical list which allows the browser to jump to the middle of a page simply by pressing a letter of the alphabet. This specialized link is called an anchor or "named" link.

This type of link is very useful if you plan a very long page with diferent pieces of unrelated information and want to send the user to a specific location on that page. The user does not have to scroll down through a long document to find just the information they wish to see.

The code that determines where in the doucement the browser jumps to is:

<A name="Anchor Name">The text being pointed to</A>

Now that we have an named target or anchor set up, we need to point a hyper link to this anchor. Hyperlinks can be of two types:

External - refers to a link in another document on the same server or possibly a different site.

          or

Internal - these refer to a link within the current document

External Links

Now, lets look at the code for a link going to an external page on this site. Here is the code for the anchor section of the page. The page being used is ulinks.htm. We will create 3 anchors: Navy, HTML and art.


<H3><A name="Navy">Navy</A>/Military</H3>
<A href="http://www.ncts.navy.mil/navresfor/navair/">COMNAVAIRESFOR</A><BR>
<A href="http://www.spawar.navy.mil/nik/">Navy Internet Kit</A>
<BR>
<BR>
<H3>><A name="HTML">HTML</A> References</H3>
<A href="http://www.yahoo.com/Computers_and_Internet/Software/Data_Formats/HTML/">HTML Search Engines</A><BR>
<BR>
<BR>
<H3>Clip<A name="Art"> Art</A>></H3><BR>
<A href="http://www.carols-clipart.com/">Carol's Clip Art Collection</A><BR>

Now we need to set up the link that will call the various anchors created above. Notice that our link is calling ulinks.htm. We have added one additonal item to that link, the #Anchor Name, or target to find. This anchor name has to match and is case sensitive to what is on the anchor page. After looking at the code below, try the link. Notice that you go to page 16 but have gone to a link in the middle of the page.

Code

<A href="ulinks.htm#Navy">Navy Related Links</A><BR>
<A href="ulinks.htm#HTML">HTML References</A><BR>
<A href="ulinks.htm#Art">Web Art Work</A><BR>

Our working links

Navy Related Links
HTML References
Web Art Work

Internal Links

The code to set up an internal link within the same document is similiar to the code above. The named anchors must be set up in the document first. A HTML page name does not have to be given since the link is internal to the page we are currently on. See the anchor example below. Then set the links to call those anchors by using the following code:

#Anchor Name

I have created two internal links with in this document. Lets give them a try.

<A HREF="#Anchor">Anchor</A>
<A HREF="#External">External</A>

Home