Lesson 8:  Getting Fancy

Lists
External Links & Mail Links
Image Buttons & Transparency
The Thrill of Stealing


In this episode, we get to play a bit.

First, Jeri learns to use ordered and unordered lists, learns to jump to other sites, and sets her page up to receive E-mail.

Then the fun begins -- Jeri expands her use of graphic images, adds graphical push-buttons, and learns how to steal graphics and more.


Contents of Lesson 8

Ordered and Unordered Lists

3/31:

>>OK, I'm ready for the next lesson, I worked on the last two last night and everything seems to be a go. All the font changes, heading changes, centering worked beautifully--What's next--I'm ready. I promise not to skip class this week now that the holiday is over (gg).<<

Allrighty! As a treat for your excellent work and dedication, we're going to play today.


Using Formatted Lists

First, we need a new page. We'll call it "the friends' page" and save it as "jfriend.htm". It starts real simple, like so:

<HTML>
<HEAD>
<TITLE>Jeri's Friends</TITLE>
</HEAD>

<BODY>
<P>Visit some of my wonderful friends:</P>
</BODY>

</HTML>


Step 1 is Completed --
View Friend Page Now?

Save and view. All is well? Okay. Now we're going to add a list. HTML has ordered lists and unordered lists (<OL> and <UL>). An ordered list is numbered automatically by the browser, and an unordered list has just dots. For our friends' page, we'll use start by using an ordered list.

After the text paragraph, add the following:

<H3>Friends from Compuserve's Cancer Forum</H3>

<OL>
<LI>Laura King
<LI>Janet Bernichon (her site includes poetry and art about cancer)
<LI>Helena Robinson
<LI>Musetta Giles (her site includes "Top 10 Reasons for Being Bald"!)
<LI>Lehua
</OL>


Step 2 is Completed --
View Friend Page Now?

Save and view. Cool, yes? Notice that the list commands need an end command -- an <OL> needs an </OL>, and a <UL> needs an </UL>. Each friend in the list is demarked with the <LI> (list item) command. <LI> is an exception to the rule in that it doesn't need an end-list. There is no </LI> command.

Notice how nicely it numbered your friends #1 thru 5, without your having to do anything. This is very convenient when you want to change things. In our case, however, we don't need numbering, so the next thing is to change the <OL> to <UL>, and change the </OL> to </UL>.

Save and view. Notice how now, instead of numbers, there are nice little bullet dots.


External Links

Now we're going to do an external anchor. We've already worked with name anchors, page-to-page anchors, and within-page anchors. Now let's add an external anchor to go to someone else's site. We've been able to test everything else without having to dialup to the network, but an external link can't be tested offline, so we'll forego testing until we're further along.

For Laura's line, we'll surround it with an anchor and an end-anchor, just like our internal links, but it will be longer:

<LI><A HREF="http://www.pacificnet.net/~fifi">Laura King</A>

Save & view. Notice that "Laura King" is now underlined and the text color has changed to something we call the "link color", which we'll talk more about later. If you move the cursor over her name, you'll see Laura's URL showing at the bottom line of the Netscape window. If you were to click on her name, Netscape will try to jump to her site, and will ask you to connect. If you want, you can go ahead and do that, but you'll probably want to save on the connect charges until we're really ready to go.

Notice also that with an external link, it needs the "http" and the provider, the full domain. When you leave off all that (for example, HREF="jtree.htm") it assumes you're within your own folder/site. But if you're going somewhere not in the same directory as your page, you need to give it the whole shebang.

Let's dress up the rest of our friends:

<LI><A HREF="http://www.cruzio.com/~zerocity/janetb">Janet Bernichon</A> (her site includes poetry and art about cancer)

<LI><A HREF="http://www.eclipse.net/~ksr/">Helena Robinson</A>

<LI><A HREF="http://www.netwalk.com/~musetta/">Musetta Giles</A> (her site includes "Top 10 Reasons for Being Bald"!)

<LI><A HREF="http://www.lehuanet.com/lehua/">Lehua</A>

Now all of our friends are linked. Just to be tidy, we'll add a "return" to the end of our page, like we did for the tree:

<P>Return to my <A HREF="index.htm">Home Page</A></P>

Step 3 is Completed --
View Friend Page Now?

Transparent Images

Now we're ready for some fun.

At last glimpse, your home page looked like so:

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

<BODY BGCOLOR="#AAaaFF">

Hi, I'm Jeri Walsh from SE Arizona. Welcome to my home page. Please visit "Our" TREE OF HOPE which is dedicated to cancer Survivors and Victims. Please visit my other pages. To visit my tree:
<A HREF="jtree.htm">Click here</A>

</BODY>
</HTML>

Right after SE Arizona, let's add an image from the homework packet I sent you. Make sure that the homework images are all saved in the same directory as your HTML pages.

<IMG SRC="varizona.gif">

Download Arizona GIF now?

Save and view. Notice something funny about the image? Only the map of Arizona shows, and not the background part of the Arizona picture. This is called a "transparent GIF". This means that one color has been chosen to not show on the page. In this case, I chose the background color for the picture of Arizona to be the invisible color. So, when you display the image, Arizona seems to float on the page, rather than being rectangular like the tree picture. There are many cool things you can do with this feature.


Images as Buttons

Now that you're comfortable with links, let's remove the click here statement and instead surround the TREE OF HOPE with an anchor:

Please visit "Our" <A HREF="jtree.htm">TREE OF HOPE</A> which is...

Your home page, at this point, should look like so:

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

<BODY BGCOLOR="#AAaaFF">

Hi, I'm Jeri Walsh from SE Arizona.
<IMG SRC="varizona.gif">
Welcome to my home page. Please visit "Our" <A HREF="jtree.htm">TREE OF HOPE</A> which is dedicated to cancer Survivors and Victims. Please visit my other pages.

</BODY>
</HTML>

Save and view. Now let's add a link to the friends' page, instead of Please visit my other pages.:

<P>Please also visit my <A HREF="jfriend.htm">friends around the world</A>.</P>

Save and view. Test your Friends link by clicking on it and then returning to your home page.

You now have a text-based set of links to your subpages; now let's add some more graphics-based links. Insert, just before end-body, the following:

<P><A HREF="jtree.htm"><IMG SRC="ztreebut.gif"></A>Click our Tree of Hope</P>

Download Tree-Button GIF now?

Save and view. Click on the tree, and then return to the home page. What we've done is use an image for the "what the viewer clicks on", instead of text.

Notice that the tree-button is also transparent, like the Arizona map. You'll also notice that there's a funny rectangular outline around the tree. This is because Netscape knows that the image is being used as a link, and surrounds it with the link color. Sometimes that's nice, and sometimes it isn't. In this case, it interferes with the transparent effect of the tree, so let's get rid of the border, by using the BORDER parameter of the image command:

<P><A HREF="jtree.htm"><IMG SRC="ztreebut.gif" BORDER=0></A>Click our Tree of Hope</P>

Save and view. Notice how we now have a nice floating tree with no borders.

Now, after the tree-button line, add the following:

<P><A HREF="jfriend.htm"><IMG SRC="vglobe.gif" BORDER=0></A>Click our World of Friends</P>

Save and view. Click on the globe, then return to your home page. Cooler and cooler!

Download the Globe GIF now?

Step 4 is Completed --
View Home Page Now?

E-Mail Links

As your final step, let's give people a way to talk to you. We'll use a new kind of anchor that connects to e-mail. Just before the end-body, add:

<P>And please feel free to E-mail me at
<A HREF="mailto:73543.1720@compuserve.com">
73543.1720@compuserve.com</P>

This type of link causes the viewer's browser to launch into the person's e-mail screen, with the specified e-mail embedded as the "to" address. The viewer can then just whip off a note. Note that everyone needs to set up their browser's mail preferences in order for that to work, but most people, if competent enough to browse, are also competent enough to set up their mail preferences. This is another option, like the external link, that can't be tested unless you connect. If you feel ready, you might try a connect, and see how this works "on the air".


The Thrill of Stealing

Homework for today's lesson:

AOL's kaka browser can't do this, but Netscape is wondrously theft empowered; all you have to do, to steal something, is click on your right mouse button. Today, I want you to steal a mailbox button for your next lesson. Go to my home page at:
http://www.lehuanet.com/lehua/

Position your mouse over my mailbox button. Press your right mouse button. Voila! A drop-down menu appears, encouraging you to "save image as". Save the mailbox in the same directory as your web pages.

Next, go to my heritage page at:
http://www.lehuanet.com/lehua/lehuaher.htm

Notice the pretty background? This is called lauhala, meaning "leaf of the hala tree". Outsiders unglamourously call it the "screw pine". It's a nasty, thorny substance, but when stripped makes beautiful woven rugs and baskets. Position your mouse on any non-jumper spot on the page (blank or text). Click your right mouse button. Voila! A drop-down menu appears encouraging you to steal my background wallpaper. Do so, saving it in the same directory as your web pages. Let me know how your first foray into thievery goes. <g>

Love & hugs,
Lehua

Next Lesson