Lesson 5: Within-Page Anchors (Links)
|Contents of Lesson 5|
Pause & Reflect: Titles and Bookmarks
At the end of our last episode, your tree page looked like so:
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:
Now, add the line back in that you just deleted, but this time, correct it to say the tree page:
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:
Links are called "anchors" in HTML-babble. Like most other commands, there's a start:
The parameters of a link are pretty simple:
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)
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:
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?
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:
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>
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,
>> 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).
|View the Pages after Lesson 5|