Lesson 5:  Within-Page Anchors (Links)
& Paragraph Formatting

In this episode, Jeri discovers the miseries of HTML's formatting non-features, but also finds solutions.

After learning how to jump from page to page in previous lessons, Jeri now learns how to jump around within the same page.

Take a look at Jeri's comments at the end of this lesson, and see how her enthusiasm is growing.


Contents of Lesson 5


Pause & Reflect:  Titles and Bookmarks

At the end of our last episode, your tree page looked like so:


<HTML>
<HEAD>
<TITLE>Jeri Walsh's Home Page</TITLE>
</HEAD>

<BODY BGCOLOR="#ccffcc">
<IMG SRC="treehope.jpg">
Here is our Beautiful Tree of Hope.
To return to my home page:
<A HREF="index.htm">Click here</A>
</BODY>
</HTML>


Now, we're going to spend a minute on the <TITLE> command.

First, I want you to take the TITLE line out all together. Save your page, without the TITLE line, and view in Netscape. Go up to "Bookmarks" and choose "add bookmark" out of the dropdown menu. Then, choose "go to bookmarks" from the "Bookmarks" menu. At the very, very bottom, you will see that your bookmark has a very crappy name. It will look something like:

file:///C|/blahblah/blahblah/JTREE.HTM

Now, add the line back in that you just deleted, but this time, correct it to say the tree page:
<TITLE>Jeri Walsh's Tree of Hope Page</TITLE>

Now, save it and view it in Netscape. Do "add bookmark", then "go to bookmarks", and see what you've got. It should now say,

Jeri Walsh's Tree of Hope Page

Notice that the <TITLE> is unrelated to anything that the viewer sees in the page itself. It is used only by the browser, for the bookmark (or "favorite places") function.



Pause & Reflect:  More on Links


In our previous lessons, we did a simple page-to-page link internal to your site. You can also do a within-a-page link. Before we do that, let's pause and reflect on what a link is made out of.

In our current tree page, we have a line that looks like this:
<A HREF="index.htm">Click here</A>

Links are called "anchors" in HTML-babble. Like most other commands, there's a start:
<A ....>
and an end:
</A>

The parameters of a link are pretty simple:

Anchor (Link) Parameters

  • There's the place you want to go to if you click it:
    HREF="....whatever"
     
  • and there's the stuff you want the viewer to see, to click on:
    <A ....> stuff to see </A>

Anchor (Link) Parameters

So, in our tree page, the address to go to is your home page, which is "index.htm", and the stuff we want the viewer to see and click on is "Click here".


Lesson 5:  Within-Page Anchors (Links)
& Text Formatting

This same structure (anchor, address, stuff-to-click-on, end-anchor) works WITHIN the page itself. So, we're going to add two things to the tree page: a poem, and a link to the poem.

After the tree, and before the return-link, add the following:

Here is the poem we've chosen for our tree, which is on the sign that you see in the tree photo. It was given to me by George Sherman of the Compuserve Cancer Forum:
poem
poem
poem

Save and view in Netscape. Right away, you're going to notice that it all runs together in a mush, and looks something like this:

Here is our Beautiful Tree of Hope. Here is the poem we've chosen for our tree, which is on the sign that you see in the tree photo. It was given to me by George Sherman of the Compuserve Cancer Forum: poem poem poem To return to my home page: Click here


Text Formatting

This mooshing is because Netscape ignores the conventional spacing that we're used to, namely:  spaces and carriage returns (enter/new-line).  Only one blank is noted by Netscape, others are ignored.  So, to Netscape, three blanks look like one blank. And new-line is ignored completely.  We'll talk in later lessons about tables, and many other ways to get around these formatting problems. For now, let's learn the paragraph command to see how it helps us.

The paragraph, of course has a start and end. You may notice that Netscape allows you to leave off the end-paragraph, but this is not a good practice, since there are other browsers that get really confused if you do this. The paragraph command is very simple, just a "P". So, let's change the text to look like so:


<HTML>
<HEAD>
<TITLE>Jeri Walsh's Tree of Hope Page</TITLE>
</HEAD>

<BODY BGCOLOR="#ccffcc">
<IMG SRC="treehope.jpg">
Here is our Beautiful Tree of Hope.
<P>Here is the poem we've chosen for our tree, which is on the sign that you see in the tree photo. It was given to me by George Sherman of the Compuserve Cancer Forum:</P>

<P>poem
poem
poem
</P>
To return to my home page:
<A HREF="index.htm">Click here</A>
</BODY>
</HTML>


Add the <P> and </P> in the places shown. Save and view. Notice that the text now looks like:

Here is our Beautiful Tree of Hope.

Here is the poem we've chosen for our tree, which is on the sign that you see in the tree photo. It was given to me by George Sherman of the Compuserve Cancer Forum:

poem poem poem

To return to my home page: Click here

Much better, yes?

 

Within-Page Links

Okay, back to anchors. At the very top, after the <BODY..> parameters and before the <IMG>, move the line that says "Here is our beautiful tree". Now that line will appear before the tree picture, and the poem will appear after the tree picture. Now, add a line right after "Here is our beautiful tree," that says:

<A HREF="#poem">View the poem</A> that is on the signpost you see near the tree.

What we've done is give it an anchor (link) saying to go to internal-link-"poem" if they click on the words that say "View the poem". Notice that the remainder of the sentence is OUTSIDE the anchor/end-anchor, so it will not be clickable.

Save and view thru Netscape. You'll notice two things: One, if you click on the clickable part, it doesn't go anywhere. Two, the text is once again unformatted.

To resolve the formatting, add the <P>'s and </P>'s as we discussed above.

To make it clickable, we're missing one obvious thing: a place called "poem". When you want to go to an anchor within a page, rather than to the start of a page, you use the "#". That's the signal to the browser that the "address" (where you're going to) is somewhere WITHIN the page. But now, there has to be a place with that name. So... we have to create a place called "poem". [Remember that, like page names, internal HREF's are case-sensitive -- so, don't name it "Poem" and then go to "poem" -- it won't work.]

So, anywhere on or right before the first line of the poem, we give a funny looking anchor command that is used for naming. The format is:
<A NAME="whatever">place to go to</A>

In this case, let's surround the words "Here is the poem" with the NAME anchor. Our page should now look like this:


<P>Here is our Beautiful Tree of Hope.</P>

<P><A HREF="#poem">View the poem</A> that is on the signpost you see near the tree.</P>

<IMG SRC="treehope.jpg" BORDER=5>

<P><A NAME="poem">Here is the poem</A> we've chosen for our tree, which is on the sign that you see in the tree photo. It was given to me by George Sherman of the Compuserve Cancer Forum:</P>
<P>
poem
poem
poem</P>
To return to my home page:
<A HREF="index.htm">Click here</A>
</BODY>
</HTML>


Save your changes, view thru Netscape. Notice that when you click on the go-to-poem part, it jumps past the photo and down to the poem.

That's enough for one day, let me know when you've put this in.

Love & hugs,
   Lehua


3/27, Jeri to Lehua:

>> We can make that clickable, and have a jump to it on the same page. (Your lessons are FAR from over, girl! haha) <<

Hey, maybe we can make the Miracle Deer a clickable too although I'd have to do a separate JPG for him right?? I know, I know, let's take it one step at a time but it's so easy to get carried away!! This really is getting exciting, everyone should try this, it gives one such a feeling of accomplishment.

OK, I've printed off my next lesson and will work on it tonight and in the morning and then let you know how it goes. This is GREAT fun!!!!!!!

Off to dinner, Tom's so easy (ggg).

Jeri


View the Pages after Lesson 5

Next Lesson