In this episode, Jeri starts having strong ideas about the appearance of her pages, and begins struggling with more tools and changes to achieve what she wants.

We extend our table lesson, and Jeri builds a complex table with multiple rows and multiple columns, that she'll eventually use to index our loved ones represented on the tree.



Lesson 11:  Complex Tables

 
Contents of Lesson 11
Pause and Reflect, Lesson 10:
   More Fooling with Colors & Backgrounds
Lesson 11:  Complex Tables
View Results of Lesson 11

Pause and Reflect, Lesson #10:
More Fooling with Text Colors and Backgrounds

>>light blue text next to my e-mail icon is too light<<

This is your LINK text; namely, links not yet gone to. Let's punch up the purity of the blue a bit, and change it from 99CCFF to 00FFCC:

<BODY BGCOLOR="#AAaaFF" BACKGROUND="xindex1.jpg" TEXT="#ffffff" LINK="00ffcc" VLINK="ffff99" >

Here is a sample of the old color
Here is a sample of the new color

Let me know if that does the trick.

>>I've become a Kleptomaniac... I tried adding it to our "friends" page but I didn't quite figure out right what all I had to do... Notice I used the term "WE"!!!!<<

LOL and double-LOL! Yes, I'm an inveterate thief too. I have all sorts of backgrounds -- clover, satin, gold foil, coffee beans, strawberries, everything you can imagine.

Backgrounds are part of the body command. You can just use a color for your background, or you can also use an image, which gets tiled. As we discussed, tiling just means that a small image gets repeated left-to-right and top-to-bottom until the whole screen "surface" is covered. The format of the background color parameter is:

<BODY ... BGCOLOR="#xxxxxx"...>

where the x's represent the RGB color you've chosen. See my website page for details on tutorials, color charts, and hex converters that you can use for color:

http://members.aol.com/lehua/mindsite.htm

The format for the background "wallpaper" parameter is:

<BODY ... BACKGROUND="whatever.gif" ... >

where whatever.gif is the name of the image you are using. Note that it must be spelled exactly right. If, for example, you're using whatever.jpg, and you say whatever.gif, the wallpaper won't work. It must also have the correct path. That means that if you say it as shown above, without a full file path, then it MUST BE in the same directory (folder) as your web page.

So, for the friend page, first of all make sure the background is in the same folder as jfriend.htm. Then, change your body statement as follows:

<BODY BGCOLOR="#AAaaFF" BACKGROUND="xindex1.jpg" TEXT="#ffffff" LINK="00ffcc" VLINK="ffff99" >

Then, change "xindex1.jpg" to be whatever the name is of the background you've chosen. BTW, mail me the background, so we can stay in synch with the lessons.

>>Let me know what I have to do use the ornament one<<

This is simple, just doing what we did with the friend page. In the tree page, your body command looks like so:

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

So, we just replace the image name in the background parameter, like so:

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

Save and view. Does this look a little funny to you? Maybe I should increase the free space around the ornaments. Let me know. In any case, notice that we now have to change the text colors, since they were set quite light to work on a dark background. Now we have a light background, so we need darker colors. Change the text from CC9966 to 005500, a nice dark green. Change the link color (unvisited links) to a nice bright blue, 3300cc. Change the vlink color (visited links) to 330099, a dark blue:

<BODY BGCOLOR="#ccffcc" BACKGROUND="xornment.gif" TEXT="#005500" LINK="#3300cc" VLINK="#330099" ALINK="000000">

Absorbing, isn't it? There's so much beauty and fun to play with.

Love & hugs,
  Lehua


Lesson 11:  Complex Tables:

4/4/97, Jeri to Lehua:

OK, lesson 10:

I found the spaces, so the dashes are gone.

The text next to my e-mail icon is fine now.

We now have color on our friends page.

I played with the ornament background and I'm not sure yet, maybe our writing on the screen has to be even bolder as the ornaments seem to overwhelm the page. Tell me, is this ornament just a gif regular gif file? I might check around and see if I can find some other ones, there's something about how you can see "inside" the ornament that looks different. Somehow on our "page" for cancer victims, I want to incorporate a nice "dove" I think, maybe as a background, like the ornament.

OK, I haven't set up the HPWIZ program but will tomorrow morning hopefully. I'm sure it'll be no problem. I also want to go to your homepage and find the tutors, color charts etc.

OK, I'm off to relax in front of the "other tube" for awhile (gg). Be sure and my new joke about AOL, it's scary (ggg).

Jeri


4/5/97, Lehua to Jeri:

Sounds like everything's cleared up just great. By all means, search around for ornaments and doves. (Yes, the ornament is an ordinary GIF).

Since you're slacking off, messing around watching TV, having nothing valuable to do with your life <g>, here comes:

Complex Tables

In lesson 10, we made a nice little pushbutton out of a simple table, that had only one row and only one cell:

<TABLE BORDER=5>
<TR>
<TD>
<A HREF="index.htm">Return to My Home Page</A>
</TD>
</TR>
</TABLE>

The row across began with <TR> and ended with </TR>, and within that, the "return" cell began with <TD> and ended with </TD>.

Now let's create an index to our loved ones' names. This will also be pretty simple, but we're going to eventually have more than one row, and we'll have more than one cell in each row. And we're going to reduce the border from 5 down to 2, because this will be more of a selection function than a single pushbutton.

Even though our first, simple table only used one row, and one cell within that row, we learned that:



Every cell must be contained within a start-cell and an end-cell, and must be contained within a row.  And we learned that every row must have a start-row and an end-row.

Right after the final "center" of the tree image's click-map, and just before the poem's text, add the following little table:

<TABLE BORDER=2>
<TR>
<TD>
Find our loved ones who have ornaments on the Tree of Hope:
</TD>
</TR>
</TABLE>

Save and view.
Find our loved ones who have ornaments on the Tree of Hope:

Notice that it looks a bit like the push-button we'd made previously, nothing particularly special.

Now, lets add another row, after the previous row's end, and before the end of the table:

<TABLE BORDER=2>
<TR>
<TD>
Find our loved ones who have ornaments on the Tree of Hope:
</TD>
</TR>
<TR>
<TD>
A-F
</TD>
</TR>

</TABLE>

Save and view.
Find our loved ones who have ornaments on the Tree of Hope:
A-F

Notice that now we have TWO rows. Looks a little odd, but we'll work on that.

Now add a 2nd cell into the 2nd row, after the last end-cell, but before the last end-row:

<TABLE BORDER=2>
<TR>
<TD>
Find our loved ones who have ornaments on the Tree of Hope:
</TD>
</TR>
<TR>
<TD>
A-F
</TD>
<TD>G-L</TD>
</TR>
</TABLE>

Save and view.
Find our loved ones who have ornaments on the Tree of Hope:
A-F G-L

Whoopsie! We now have two cells in the 2nd row, but... we also have two cells in the top row, where we only wanted one! Remember when I said that the browsers are very unforgiving about mistakes in a table? Well, here's a good example. Every row must have the same number of cells, and that's a fact that can't be ignored. But... there are ways around it.

First, let's decide how many cells we want in each row. I think 2 rows of 4 each would be nice, what do you think? So, let's make our title row stretch across 4 cells, as if it were all 4 cells for that row. To do that, we add the COLSPAN parameter to our cell command for the top row. COLSPAN tells the browser that a particular cell (in this case, our title cell) is going to span a certain number of columns. Change the first row's start-cell as follows:

<TD COLSPAN=4>

Save and view.
Find our loved ones who have ornaments on the Tree of Hope:
A-F G-L

This looks much better, yes? Although, now the 2nd row looks a little funny, but we'll fix that. Let's fill out the remainder of the cells for the 2nd row:

<TABLE BORDER=2>

<TR>
<TD COLSPAN=4>
Find our loved ones who have ornaments on the Tree of Hope:</TD>
</TR>

<TR>
<TD>A-C</TD>
<TD>D-F</TD>
<TD>G-I</TD>
<TD>K-M</TD>
</TR>

</TABLE>

Save and view.
Find our loved ones who have ornaments on the Tree of Hope:
A-C D-F G-I K-M

Pretty nice. Notice that, as we're going along, I'm playing with the spacing of the HTML code. This is a reminder that Netscape ignores HTML spacing, and also a reminder that we can adjust our spacing in a way that makes the code easier to read. Notice that the alignment of the cells looks a little ratty. I think it would look better if we centered each cell's contents. We can do that by adding the align parameter to the start-cell of each cell:

<TD ALIGN=CENTER>A-C</TD>
<TD ALIGN=CENTER>D-F</TD>
<TD ALIGN=CENTER>G-I</TD>
<TD ALIGN=CENTER>K-M</TD>

Save and view.
Find our loved ones who have ornaments on the Tree of Hope:
A-C D-F G-I K-M

Much nicer. Now let's add the final row, after the last end-row, but before the end-table:

<TR>
<TD ALIGN=CENTER>N-P</TD>
<TD ALIGN=CENTER>Q-S</TD>
<TD ALIGN=CENTER>T-V</TD>
<TD ALIGN=CENTER>W-Z</TD>
</TR>

Save and view.
Find our loved ones who have ornaments on the Tree of Hope:
A-C D-F G-I K-M
N-P Q-S T-V W-Z

Just to make it nice, let's add a start-center before the table and an end-center after the table. Also, to bring it down a bit from the tree picture, let's add a <BR> (break command) just before the table. So, our whole table should now look like this:

<BR>
<CENTER>

<TABLE BORDER=2>

<TR>
<TD COLSPAN=4>
Find our loved ones who have ornaments on the Tree of Hope:</TD>
</TR>

<TR>
<TD ALIGN=CENTER>A-C</TD>
<TD ALIGN=CENTER>D-F</TD>
<TD ALIGN=CENTER>G-I</TD>
<TD ALIGN=CENTER>K-M</TD>
</TR>

<TR>
<TD ALIGN=CENTER>N-P</TD>
<TD ALIGN=CENTER>Q-S</TD>
<TD ALIGN=CENTER>T-V</TD>
<TD ALIGN=CENTER>W-Z</TD>
</TR>

</TABLE>
</CENTER>

When the text of the loved ones' names has been added, you can put name anchors in front of the sections, and then add link anchors to the cells. For example, eventually, the "A-C" cell would look something like this:

<TD ALIGN=CENTER>
<A HREF="#a-c">A-C</A>
</TD>

But for now, add the table and it will be ready for our future moves.

Love & hugs,
  Lehua


View the pages after this lesson

Next Lesson