Chapter 3, Lesson 5

If you already know how to build text-based HTML hyperlinks to a target on the same web page, you can skip this lesson.

Sometimes, especially when we have a "long" web page (one that you have to scroll down several screens-worth to reach the bottom), we want to create a "link" that jumps to another part of the page. Our (Maddog 'n' Miracles) Poetry web page is a good example of this situation. This page would require that you scroll down 15 or 20 screens in order to get to a particular poem near the bottom of the page. Too much work! If it were a regular (paper) book of poems, we would have a "table of contents" at the front of the book, with the title of each poem, and a page number where you could find it. This won't work with HTML, however. If you hadn't noticed before, there's no way to designate a hard "page-break" in HTML. And since you don't know what size screen may be at the faraway browser, you can't predict exactly where the browser will create page breaks. So numbered pages are "out".

Never fear, our heroes who designed HTML came up with a pretty nifty solution. If you looked at the Poetry page, you may have noticed that we created a "Table of Contents" which was really a text list of "links", each link to a different poem, with all poems residing on the same page. If you clicked on the "link" for a particular poem, the browser immediately took you there. When you finished reading the poem, you could elect to click another link to take you back to the Table of Contents. Say...how'd I do that?

In HTML, there are two parts to implementing page "jumps". One you already know (building links using the <A> </A> anchor tag pair), but we need to elaborate on it just a bit. The second part is creating a "symbol" or "target" where a particular location in the document can be "marked" (but NOT displayed).

Before we can build a link to "jump" to another portion of the same document, we need to place a symbol in the HTML text so that the browser knows where to jump to. In HTML, this symbol is called a "NAME" and is imbedded inside an opening anchor tag, like so:

<A NAME="target-name"> </A>

This looks a lot like a link, but notice that instead of an 'HREF=', we have a 'NAME='. The "name" reference establishes a symbolic target within the HTML document. It exists, i.e., the browser knows about it, but it doesn't get displayed to the screen (as long as we don't insert any text between the opening <A>and closing </A>anchor tags). Once established, activating a link which points to it will cause the browser to jump to that particular position in the document.

Which brings us, logically, to this question: How do we build a link to "jump" to a named target? Easy! We'll develop a link just as we did for linking to another web page or site, except that this time we'll use a special syntax in the reference portion of our link, the '#' sign. In this case, we modify our usual link to look like so:

<A HREF="#target-name"> link-description </A>

Notice that all the usual rules about building links still apply. Also notice that we've inserted the "target-name" (that was created earlier, in a different portion of the document) in our HREF= reference. AND notice that we've placed a '#' sign immediately in front of the target name, without spaces, but still inside the quotation marks. Once again, it is mandatory that no spaces exist between the '#' sign and the target-name, and it's good practice to also avoid spaces around the '=' and after the first quoataion mark.

So now we've seen two distinct uses for the anchor tag pair: building hyperlinks (designated by the HREF= syntax in the reference), and building named targets (designated by the NAME= syntax). Let's demonstrate, OK? In this demonstration, we'll put enough extra <BR> tags between the separate text lines that we can be pretty well assured that only one text line will show up on the screen at any given time. We'll establish named targets in the source code, and then we'll have a text "index" of links pointing to each of them. Here we go:

<A NAME="idx"></A>
<A HREF="#target1">click here</A> to go to the first target;<BR>
<A HREF="#target2">click here</A> to go to the second target;<BR>
<A HREF="#lastone">click here</A> to go to the third target;<BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<A NAME="target1"></A>
<H2>Here's Our First Target</H2>
<A HREF="#idx">click here</A> to go return to top of page.<BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<A NAME="target2"></A>
<H2>Here's Our Second Target</H2>
<A HREF="#idx">click here</A> to go return to top of page.<BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<A NAME="lastone"></A>
<H2>Here's Our Third Target</H2>
<A HREF="#idx">click here</A> to go return to top of page.

click here to go to the first target;
click here to go to the second target;
click here to go to the third target;

Here's Our First Target

Here's Our Second Target

Here's Our Third Target

Notice that the named target "idx" marks the location of the top of our text (our "index"), and that there is a uniquely-named target ("target1", "target2", and "lastone") for each of the three other spots we want to mark in the text. Also note that, when you clicked on each link, the browser placed you at that point in the document where the named target was embedded in the text. If you thought you were going to a different document, you were fooled. You can scroll down through the demonstration part of this document to see that, indeed, you have to scroll a long way to get where you want to go. Not a half-bad feature, heh?

---

Overseer: Monty Northrup ... ... leave e-mail ...

---