In this episode, Jeri has her first serious encounter with bugs.  In the "Pause and Reflect" as we start out, take a look at Jeri's code and see if you can spot some of the problems.

After learning about differences in people's displays, she decides to adjust her text colors again.

Finally, Jeri starts getting really advanced, and create a small table. In the process, she learns how to save space by creating a push-button out of a table, intead of having to use an image.



Lesson 10:  Creating a Simple Table

 
Contents of Lesson 10
Pause and Reflect, Lesson 9:
   Debugging the Home Page
   Adjusting Text Colors
Lesson 10:  Creating a Simple Table
View Results of Lesson 10
Pause & Reflect, Lesson 10:
   Reviewing Our Table Code

Pause and Reflect, Lesson #9:
Debugging the Home Page
Adjusting Text Color


Debugging the Home Page

4/2/97, Jeri to Lehua:

Well, finally "whew" what a lesson (gg). I'm copying what I have on my home page for you to review, I periodically found little things I left out or off so I need an expert eye to check it out:

<HTML><HEAD>
<TITLE>Jeri Walsh's Home Page</TITLE></HEAD>
<BODY BGCOLOR="#AAaaFF" BACKGROUND="xindex1.jpg" TEXT="#ffffff" LINK="99ccff" VLINK="cc99ff">

<CENTER>
<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>

</CENTER>
Hi, I'm Jeri Walsh from SE Arizona<IMG RC="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. <P>Please also visit <A HREF="jfriend.htm"> my friends around the world.</A></P>

To visit my tree:
<A HREF="jtree.htm">Click here</A><P><A HREF="jtree.htm">

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

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

Ok, I couldn't get online to see if possibly the colors will look a different then when offline. At the moment the light orchid for the text, to me, is almost invisible.

I've changed the text about where the poem came from (gee on my own) and I'm going to scrutinize both poems now and see which I like better. I will upload both poems and maybe others can help me choose which they prefer. I like the new one also and it is anonymous which leaves no chance of copyright infringement. Of course that would mean reformatting it (gg)--ahh, I can do it!!

I absolutely love hiding the poem and deer by removing the text about them. I love "finding" things accidentally!!

I'll look over your TOP 11 homework projects and think about them. The ornament wallpaper I would definitely like as a background if that's possible.

I'm bushed but it wasn't the homework, just the steam cleaning the carpet (gg).

Love,
Jeri


4/2/97, Lehua to Jeri:

>>little things I left out or off<<

Just before the "go wildcats" section, right after the first <CENTER> command, we should have had a header:
<H3>Jeri's Home Page</H3>

Right before the "Welcome", we had the Arizona map, and the source parameter of the map's image is missing its 'S'. Instead of:
<IMG RC="varizona.gif">
We need:
<IMG SRC="varizona.gif">

Also, move the sentence's period to before the image, rather than after.

We need to completely remove the statements:
To visit my tree:
<A HREF="jtree.htm">Click here</A><P><A HREF="jtree.htm">

(Because we've replaced that with the clickable mini-tree.)

For the clickable mini-tree, we need to give the mini-tree a border of zero, so that the outline will be invisible. We also need to enclose it in paragraph commands, so that it will be on a separate line from the globe. So we need:

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

After the globe image, get rid of the space between the image and the end-anchor to get rid of the little orchid dash.


Pause and Reflect, Lesson 9:
Adjusting Text Colors

>>if possibly the colors will look a different then when offline... the light orchid... is almost invisible<<

It probably won't look any better online. I suspect that you're at 256 colors, so my setup isn't always going to be compatible for you. Let's try changing the VLINK (links we've visited) to a light yellow:

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

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

Does that look any better? If not we can keep fishing around till we get something we like.

>>I like the new one also... that would mean reformatting it (gg)--ahh, I can do it!!<<
Damn right!

>>The ornament wallpaper I would definitely like as a background if that's possible<<

It's most certainly possible. I'm not impressed with what I came out with (I am NOT a graphic artist), seems a little bland, but if I make it brighter, then you can't read the text. If you're happy, I'm happy. If we go with the ornament, we need to darken the text back again.

Love & hugs, you great coder you,
  Lehua


4/1/97, Jeri to Lehua:

Sure,

>> BTW, anyone who wants to follow along, I've loaded the little pieces (gifs, etc.) into:
http://www.lehuanet.com/marjiwells/webclass/
They can easily be stolen from there. <<

Sure, typical teacher, make the "student" do it the hard way, everyone else get's a freebie (gggg)!!

I'll print out my next lesson and work on it probably tonight, as today I'm going hiking before the rain and cold weather creeps back into AZ.

Hugs,
Jeri


Lesson 10:  A Simple One-Row Table

4/5/97, Lehua to Jeri:

>>I was all for Gene M. doing it for me ... But it is great fun because you can actually see each piece fit into the puzzle.<<

And the very best part is, now it's YOUR site, as it should be, you're the one who put all the work and love into the real tree.

Lest you think you've escaped my ferocious eye, I'm going to brave some fancy stuff with you:

Here's a nice trick taught to me by Kaye being Kaye, one of my two first site coaches. It's a real space saver, since it can create a pushbutton without the use of an image.

First, in your tree page, look at the text at the bottom that says:

<P>
To return to my home page:
<A HREF="index.htm">Click here</A></P>

Replace the <P> with the <TABLE> command, and replace the end-para with an end-table:

<TABLE>
To return to my home page:
<A HREF="index.htm">Click here</A>
</TABLE>

Now, after the start-table, add a start-table-row, and before the end-table, add an end-table-row:

<TABLE>
<TR>
To return to my home page:
<A HREF="index.htm">Click here</A>
</TR>
</TABLE>

Now, within that row, add a start-entry, and close with an end-entry (aka, start-cell and end-cell, or start-column and end-column):

<TABLE>
<TR>
<TD>
To return to my home page:
<A HREF="index.htm">Click here</A>
</TD>
</TR>
</TABLE>

Save and view:
To return to my home page: Click here

So far, it doesn't look very different. Now, add a parameter to the start-table command:

<TABLE BORDER=1>

Save and view.
To return to my home page: Click here

Notice we now have a very distinct box surrounding what we've done. To do this, we used a table "container" -- a start-table and an end-table; and within that we used a row "container" -- a start-row and an end-row; and within that we put a single cell -- a start-cell, the contents of the cell, and an end-cell.

HTML structure, simple table

Logical structure, simple table

Now, to make it look more like a button, change the border parameter to 5, and remove the text "to return to my home page":

<TABLE BORDER=5>
<TR>
<TD>
<A HREF="index.htm">Click here</A>
</TD>
</TR>
</TABLE>

Save and view.
Click here

Wow! It has magically turned into a push button. All we need to do now is surround the whole thing with a start-center and an end-center, and change the "click here" to say "Return to My Home Page":

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

Save and view.

Return to My Home Page

Perfect. Notice how Netscape automatically resized the "button" to accomodate the new text? Neat-o.

What you've just done is create a simple table with only one row that has only one column. It makes a nice looking and download-cheap push button.


Pause and Reflect: A Review of Tables
Or... What Was That We Just Did???

Word of warning: In our previous commands, most of them are very lenient. You can get away with certain mistakes, like forgetting an end, and Netscape will often forgive you. But in tables, THERE IS NO FORGIVENESS. Tables must be perfect, and logical, and will give you lots of grief if you make mistakes. They are quite Bach-like.

In the table command, we used the border parameter. BORDER expresses to the browser how fat we want the table's grid lines to be. This fatness is expressed in pixels (those dots that our screen image is made out of). We saw: no border (implied width of zero), a 1-pixel border, and finally a really fat 5-pixel border.

A table has to have at least one row, and you coded that by enclosing some stuff between the <TR> and the </TR>. Any row has to have at least one element (sometimes called a cell). These cells are defined by enclosing something between the <TD> and the </TD>. As you now have seen, an entry doesn't have to be just text, it can also be a link. It can even be an image, and as you learn to hate HTML's furshlugginer way of handling images, you might want to try using tables for images as an alternative to strong drink.

For now, let's settle for adding the same kind of return button to your friend page.

And now you can relax and enjoy your evening free of calvinistic twinges.

Love & hugs,
Lehua


View the pages after this lesson



Next Lesson