Lesson 6:  Introduction to Clickable Images

In this episode, Jeri refines her formatting with the break command, and gets an introduction to clickable images.

Contents of Lesson 6

Pause and Reflect, More on Formatting:
Using the BREAK Command for Better Formatting


>>Lesson Completed, and it looks great. Now, I separated the "paragraphs" of the poem, but how can I separate just where I want a "carriage" return and not a complete paragraph "double line" to make the poem flow the way it should?

Now I know you probably have some "little" command like maybe a "small 'p'" or something that would only kick a sentence one line instead of a <P> paragraph "two lines"!

OK, what's next???<<

Excellent, perfect question.

You now know that <P> isn't entirely satisfactory for all spacing situations. If you write a paragraph as:

Oh, loved ones, I wish you had been here.
No Christmas on Earth could compare
With all the rapture and glory
We witnessed in Heaven so fair.</P>

, then it gets all mooshed like so:

Oh, loved ones, I wish you had been here. No Christmas on Earth could compare With all the rapture and glory We witnessed in Heaven so fair.

Yet, if you put <P> after each line, it causes TOO MUCH spacing, putting an extra line between each line of the poem. You're right, there IS a funny little HTML command that will take care of this. It's called the break command. Like the image command, it is one of those rare ones that doesn't need an end. So, where there is a <B>, there is no </B>. A break causes a carriage-return (new line) without adding an extra space, and without ending the characteristics of the paragraph (centering, etc.).

So, we can code this paragraph as follows:

<P>Oh, loved ones, I wish you had been here.<BR>
No Christmas on Earth could compare<BR>
With all the rapture and glory<BR>
We witnessed in Heaven so fair.</P>

, and it will now format out correctly. Add the <BR>s where necessary, and now see how good it looks.

Lesson 6:  Introduction to Clickable Images

>>we can make the Miracle Deer a clickable too although I'd have to do a separate JPG for him right??<<
Absolutely! We could either have the click go to a text explanation, or to a larger picture of him, either way.

For today's lesson, here's a little something that will get you so stoked....

Tree page:
Right now, our image statement for the tree looks like so:

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

Add a use-map parameter to the statement so it looks as follows. We'll name our map the same as our tree, but in capitals -- 'TREEHOPE". Since it's a "go-to label", as we discussed in the anchor lesson, we'll put a # in front when used as a reference. So, the image statement should now look like this:

<IMG SRC="treehope.jpg" BORDER=5 USEMAP="#TREEHOPE">

Now, cut and paste the following map command right after the image statement. You don't have to understand any of this, there's software that will do it for you, that we can discuss as we go along. And we'll learn more about this later.  But for now, the code to add is:

<map name="TREEHOPE">
<area shape="rect" coords="4,192,29,231" href="#poem">
<area shape="circle" coords="60,163,12" href="#deer">
<area shape="default" nohref>

When you've added the above code, save and view thru Netscape. When you slide the cursor over the part of the picture that has the signpost, watch what happens. Click it and watch what happens.

Love & hugs,

View the Pages after Lesson 6

Next Lesson