In this episode, Jeri is delighted to find that she has successfully sent an E-mail from within her own web page.

She has also made good use of the theft lesson, "stealing me blind". She uses part of her booty, my E-mail icon, to create a push-button for her E-mail invitation.

In this lesson, she goes on to experiment with different decorative wallpapers (backgrounds) and fancy text colors and sizes.

Finally, a little bit of clean-up, and Jeri's getting pretty close to publishable.



Lesson 9:  Dress-Up: Backgrounds & Color

 
Contents of Lesson 9
Pause and Reflect, Lesson 8:
   Using Theft to Add an E-Mail Button
Lesson 9:  Dress-Up:
Backgrounds and Color:
   Backgrounds (Wallpaper)
   Text Color
   A Bit of Clean-Up
View Results of Lesson 9
Pause and Reflect, Lesson 9:
   Homework Projects
Prologue to Lesson 10

Pause and Reflect, Lesson #8:
Using Theft to Add an E-Mail Button

3/31/97, Jeri to Lehua:

Re: Guess Who??

Gee, guess where this note is coming from???

YUP, it's from my page, wow, this is just so cooooollllll!

Jeri


3/31/97, Lehua to Jeri and the Forum:

All:
  I opened my mail, and guess who had sent me an e-mail... FROM HER WEB PAGE!!! --- JERI!


>>So what next--INVADE MEXICO???????<<
YESS! But, I will have to make you a new transparent map, to include Mexico.

As you can see, ladyfriend, your page is about ready to publish. Anytime you're feeling ready, get into live WinCim, and GO HPWIZ, to download the upload software.

And now, as our pre-install lessons near a close.....

>>I went to your homepage and "stole you blind" (gg). There's isn't a web page "safe" anywhere now!!!!!!!!!<<

ROFLMAO! Go, girl! Now that you've stolen my mail icon, zmail1.gif, let's put it to some use. At the close of the last lesson, you added the following just before the end-HTML:

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

Now, let's dress that up, and make it a button just like the mini-tree, by replacing that statement with:

<P><A HREF="mailto:73543.1720@compuserve.com"><IMG SRC="zmail1.gif"></A> And feel free to E-mail me.</P>

Save and view. Nice, yes? Okay, onward...


Lesson 9:  Dress-Up:
BACKGROUNDS AND COLOR

At last -- you can find out what I had in mind for you with those funny-looking little JPG images that I sent to you via E-mail. We're going to use them for backgrounds.

[Note to those following along: Now that you and Jeri have learned to steal, you can steal these practice images from this site.]

Backgrounds (Wallpaper)

Near the beginning, you have your start-body statement:

<BODY BGCOLOR="#AAaaFF">

Let's add a background to that, also called a tiled wallpaper. Tiling means that, if an image is smaller than the screen, multiple copies of the image will be laid out, both upward and downward, until the screen is filled. In Netscape, a page background is automatically tiled, so it can be very small. There are seamless backgrounds, that don't have any visible start and end, and there are un-seamless ones.

Let's start with xindex2.jpg for your home page's wallpaper. Add a new parameter, BACKGROUND, to the body statement:

<BODY BGCOLOR="#AAaaFF" BACKGROUND="xindex2.jpg">

Save and view. WOWWWWWWWWW!!! Look at those pretty shades of blue! This is a seamless tile, a long narrow image shading from light blue into medium blue.

Let's try a different one -- let's use xindex1.jpg:

<BODY BGCOLOR="#AAaaFF" BACKGROUND="xindex1.jpg">

Save and view. Double-wow -- this one's even prettier, shading from a dark royal to a dark periwinkle. But now we have a new problem. Not only is the basic text hard to read, but the link-text (like TREE OF HOPE) is imPOSSible to read. Time to learn about text color.


Text Color

There are even more parameters for the body statement -- there are parameters to control the color of the normal text and the text in link statements.

Let's start with normal text. Add the following parameter to your body statement:

<BODY BGCOLOR="#AAaaFF" BACKGROUND="xindex1.jpg" TEXT="#FFFFFF">

Save and view. Too, too beautiful. Your text is now white. Just as a color number of all zeroes is the absence of light, namely black, a color number of FFFFFF (the highest value of each color, red-green-blue) is equal to white light. Now -- what are we going to do about the links?

Add the following parameter to your body statement, to make the link a nice baby blue:

<BODY BGCOLOR="#AAaaFF" BACKGROUND="xindex1.jpg" TEXT="#FFFFFF" LINK="99ccff">

Whoopsee, nothing happened -- ??? We got no results because there are TWO main kinds of link text: links we've been to, and links we haven't been to. LINK is the parameter for links we haven't yet followed. Since we've already followed the links in your home page several times, this color no longer applies. We need to put in a color for visited links, like so:

<BODY BGCOLOR="#AAaaFF" BACKGROUND="xindex1.jpg" TEXT="#ffffff" LINK="99ccff" VLINK="cc99ff" >

Save and view. There we are. Now the visited link text shows up well, in a light orchid.

Text within the body of the page can be changed on the fly, as well as being set in the body statement. To do that, we use a font command.

Immediately after the end of your start-body statement, and before your first line of text, add the following:

<CENTER>
<P>GO ARIZONA WILDCATS</P>
</CENTER>

Save and view. Now, insert the font command into the text:

<P><FONT COLOR="#ffff33">GO ARIZONA
WILDCATS</FONT></P>

Save and view. YAY! Now the text is a bright yellow. Notice that the font command needs an end-font (</FONT>).

There are other uses for the font command, including making the text bigger. We do this by adding the size parameter to the font command:

<P><FONT COLOR="#ffff33" SIZE="+1">GO ARIZONA WILDCATS</FONT></P>

Save and view. Now it's a little bigger, and looks even better. You can also create larger text by using the header command, because font sizes are a built-in part of the different header levels, as we saw in previous lessons. Just before your "go Arizona" statement, add a header for your page:

<CENTER>
<H3>Jeri's Home Page</H3>
<P><FONT COLOR="#ffff33" SIZE="+1">GO ARIZONA WILDCATS</FONT></P>
</CENTER>

Save and view. See how the header command also enlarges the text? Trouble is, now the size of the header competes with the size of "go Arizona". So, let's make Arizona REALLY big:

<P><FONT COLOR="#ffff33" SIZE="+3">GO ARIZONA WILDCATS</FONT></P>

Save and view. -- THAT's more like it. Now let's get really cute and shade both the color and the size:

<P><FONT COLOR="#ffff33" SIZE="+2">GO </FONT><FONT COLOR="#ff9966" SIZE="+3">ARIZONA </FONT><FONT COLOR="#ff3366" SIZE="+4">WILDCATS</FONT><FONT COLOR="#ff0000" SIZE="+5"> ! !</FONT></P>

Save and view. I am ready to faint from impressed-ness. See how the color shades from yellow to orange to read, and grows in size. Notice also how, with certain color combinations, it gives almost a 3D effect.

Now let's go back to our beloved tree page and add a background. Let's use xjtree2.gif, which is ruby shading to emerald, redolent of pine boughs, cactus blooms, and woodpeckers.

<BODY BGCOLOR="#ccffcc" BACKGROUND="xjtree2.gif">

Save and view ... and... same problem as with the home page -- the text is now too dark. But this time, we know what to do:

<BODY BGCOLOR="#ccffcc" BACKGROUND="xjtree2.gif" TEXT="#cc9966" LINK="#99ff99">

This brings our text to a nice saddle leather color, our unvisited links to a light green, and our visited links to a bright gold, to match the star on the tree.

Side note: There's another kind of link text, called "active link" text, which shows only during the instant that you click something. I usually don't bother with it, but if you want you can add that by saying something like:

<BODY BGCOLOR="#ccffcc" BACKGROUND="xjtree2.gif" TEXT="#cc9966" LINK="#00cc00" VLINK="#ffcc00" ALINK="000000">


A Bit of Clean-Up

Now let's just do some general cleanup on the tree page. First, let's center the top text areas and, while we're at it, add a heading. Before the Here is.. text, add:

<CENTER>
<H3>The Tree of Hope</H3>

And, because many browsers need an end-center, lets add </CENTER> after the </map>.

And let's get cute by completely removing the view the poem text. Now, the only way they would stumble on that is by clicking on it. Such hidden goodies are known as "Easter eggs" in the trade. In fact, we can add an Easter egg for the deer by coding, after the poem and before the return-to-home:

<A NAME="deer"><H3>The Miracle Deer</H3></A>
<P>Congratulations, you spotted the Miracle Deer who brings blessings to our tree. Coming attractions for this website include a closeup of this fine visitor.</P>

Wow, this is getting scarey -- do you realize, you have a publishable web site????

View the pages after this lesson

Pause and Reflect, Lesson 9:
Homework Projects

Some thoughts for homework projects:

  1. Center the deer text section?
  2. Check out the ornament wallpaper, xornment.gif?
  3. Add a description of the purpose and intent of the tree?
  4. Steal a "return" button and use it instead of return-text?
  5. Steal a background for the friends page? Or give it a color?
  6. Add more links to the friends page?
  7. Increase the size of the poem's title?
  8. Add your e-mail invitation to the tree page, like the home page?
  9. Put a link to the tree page onto the friends page?
  10. Put a link to the friends page onto the tree page?
  11. Add a title to the friends page?

Hopefully, you'll have loads of fun with the current lesson. Let me know when you've finished.

( I am so, so, so, so proud of you )

Love and hugs,
   Lehua


Prologue to Lesson 10

4/1/97, Lehua to Gene:

... it's like we're all really together. I feel like I can see Jeri's face light up when the new page comes up on the screen, I can see you standing next to me, both of us watching this great achievement. It's been more fun than anything I've done in a long time. And Jeri's a pistol, isn't she? We dragged her kicking and screaming from a place of great skepticism, to where we can't hold her down <g>.

Hugs,
  Lehua


4/2/97, Gene to Lehua:

<<We dragged her kicking and screaming from a place of great skepticism, to where we can't hold her down <g>.>>

Absolutely right!

Now Jeri, the once fearful acolyte, has turned into a monster. A remorseless cyberthief--plagarising code, lifting gifs and jpegs, hustling backgrounds. Even you, her mentor, find your own homepage subjected to her depredations. Now noone is safe!

And she brags about it! That's what gets me. Right in public and in your face. Doesn't care who is watching. Dares you to look at her creation with a "You got a problem wi' dat?" look in her eye.

You must be so proud! <vbg>

In a strange way, so am I.

Love,
Gene


4/2/97, Jeri to Gene:

>> Now Jeri, the once fearful acolyte, has turned into a monster... Now noone is safe! <<

I just went and "snatched" a "coat of arms" for my Sherman genealogy--They never suspected a thing (ggg)--God, it was sooooo easy!!!!!!!!!!

"You got a problem wi' dat?"

(gggggggggggg)

Jeri


4/2/97, Jeri to Lehua:

>> And Jeri's a pistol, isn't she? We dragged her kicking and screaming from a place of great skepticism, to where we can't hold her down <g>.<<

Yes and to be exact a "38 Colt Police Special" (ggg). And I must agree I was "dragging" my feet in the beginning, I was all for Gene M. doing it for me (VBG)!!!!

But it is great fun because you can actually see each piece fit into the puzzle.

We had a power outage this morning for a few hours then I had to steam clean some of the carpets so I can get the machine back to my neighbors, but I'm going to go work on the last lesson right now!!!!!!!

Hugs,
Jeri


Next Lesson