Working with our last lesson, Jeri found out just how unforgiving a browser can be with table syntax errors. In this episode, she does some step-by-step debugging to get her table in shape.

This leads to some experimentation with how "comments" can help us, especially when the code is confusing by nature.

Finally, Jeri's burglary rampage across the net has paid off with some booty, but now... how to make the images "transparent"?



Lesson 12:  Comments-Code and Transparency

 
Contents of Lesson 12
Pause and Reflect, Lesson 11:
   Debugging Complex Tables
Lesson 12:
   Using Comments
   Transparency

Pause and Reflect, Lesson #11
Debugging Complex Tables

4/09/97, Jeri to Lehua:

OK, student has screwed up, she tried to follow lesson #11 and now I have a cute little mess with the button under the tree, I have two buttons on the first line with the text and the other 4 on the next line. I know, I tried to play with it myself and just ended up with a mess (gg):

</map></CENTER>

<CENTER>
<TABLE BORDER=2>
<TR>
<TD COLSPAN=4>
Find our loved ones who have ornaments on Our Tree of Hope:
<TD ALIGN=CENTER>A-F</TD>
<TD ALIGN=CENTER>G-M</TD>
</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>
</TD>
<TD>G-L</TD>
</TR>
</TABLE>
</CENTER>

Jeri (confused in AZ)


4/09/97, Lehua to Jeri:

>>I tried to play with it myself and just ended up with a mess (gg)<<
Didn't your mother ever warn you about that? <g>

(Here's how Jeri's table looks at this point:

Find our loved ones who have ornaments on Our Tree of Hope: A-F G-M
N-P Q-S T-V W-Z G-L

Take a look at your first row, and see that it looks like this:

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

Remember from our previous lesson that browsers are VERY unforgiving about mistakes with tables, particularly in the start/end department. To remedy the first row, all we need to do is supply the end-cell and end-row that were forgotten:

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

Save and view.

Find our loved ones who have ornaments on Our Tree of Hope:
A-F G-M
N-P Q-S T-V W-Z G-L
Notice that the first row now looks a lot better, but the subsequent cells are still a bit funny looking. Let's take a look at the second row:

<TD ALIGN=CENTER>A-F</TD>
<TD ALIGN=CENTER>G-M</TD>
</TD>
</TR>

Notice that although you have an end-row in this row, you have no start-row. So let's add it:

<TR>
<TD ALIGN=CENTER>A-F</TD>
<TD ALIGN=CENTER>G-M</TD>
</TD>
</TR>

Save and view.

Find our loved ones who have ornaments on Our Tree of Hope:
A-F G-M
N-P Q-S T-V W-Z G-L
...Still not right. Take another look at the 2nd row. Notice that each cell has an end-cell, but then there's an extra end-cell for no reason. Let's remove it.

<TR>
<TD ALIGN=CENTER>A-F</TD>
<TD ALIGN=CENTER>G-M</TD>
</TR>

Let's review for amount the rock-hard rules we've learned about tables:






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.

We were going to have 4 cells (columns) in each row. The first row is fine because we set the title up to use all 4 columns by using the COLSPAN parameter. But the second row has only 4 columns, and the third row has 5. So lets divide the alphabet into 8 groups, and put 4 on each line:

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

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
Perfect!

And now....


Lesson 12:  Comments-Code & Transparency

Using Comments

As you can see, certain parts of your web page get very confusing, especially tables. HTML allows you to put comments into your code, which are simply remarks that explain things to yourself, but get ignored by the browser -- i.e., it doesn't try to interpret them into HTML commands.

The format for an HTML comment is that it starts with:

<!--

... and ends with:

 -->

So, to make a comment, you could code something like:

<!-- Here is an ordinary comment -->

So you could put little reminders in, like I do, to help you understand your table. An example might be:

<!-- *********************************** -->
<!-- Start Survivors' Index Table -->
<!-- *********************************** -->

<CENTER>
<TABLE BORDER=2>

<!-- Table is 3 rows, of 4 columns each -->

<!-- ROW NUMBER 1: The title takes all 4 columns. -->
<TR>
<TD COLSPAN=4>
Find our loved ones who have ornaments on the Tree of Hope:</TD>
</TR>

<!-- ROW NUMBER 2: All 4 columns are used for A thru M. -->
<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>

<!-- ROW NUMBER 3: All 4 columns are used for N thru Z. -->
<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>
<!-- ********************* -->
<!-- END TABLE -->
<!-- ********************* -->

You'll find this very helpful as you go along.

Love & hugs,
  Lehua


Lesson 12:  Transparency

>>Is there a way I can just use the "dove" and not the background color used in the one I'm using as a tile?? It shows up on the index.htm page as a miniature "tile" and it would be nicer if it could be a "cut out" image of only the dove, like your globe<<

You've gotten very familiar now with using the common image formats, JPG and GIF.

GIF is an old format, originally developed by Compuserve to provide a generic way of passing images between unlike computers. Over the years, GIF format has been expanded and enhanced, and the latest version of GIF format allows for something called "transparency".

Transparency allows a person to choose one of the image's colors (any one of them) and make that color not show when the screen is "painted" onto the viewer's monitor. All the other colors will get placed on the screen, but the transparent color will not.

Non-transparent ovalHere is a graphic of an oval, created without transparency. Notice that it has a dull purple background.


Black-transparent ovalThis oval has three colors: A pink oval with a black outline on a purple background. If we were to choose black to be the transparent color, the black would "disappear", with the background showing through where the black outline used to be.


Pink-transparent ovalIf we were to choose pink to be the transparent color, the pink would "disappear", with the background showing through where the pink oval used to be.


Purple-transparent ovalIn our case, we want the image to appear to float on the page. So we would make the background color to be the transparent (invisible) color. Having done that, the background shows instead of the purple, and the pink and black show as they are in the original image.


Now... how to do this? There are several pieces of software that will do this. I have personally chosen GIFCon32™, by Alchemy Mindworks, because I love their other products, plus they're a nuts bunch of funny Canadian boys. You can download this from the web, and probably also from Compuserve.

If you choose this software, you would open the image, select "Insert" and then "Control", select "Edit" of the Control, turn delay to zero, and use the eyedropper to pick the transparent color. I am going to do this for you, for now, and mail you back the altered dove, but this is how you do it if you start wanting to do it yourself.

Love & hugs,
  Lehua


Next Lesson