I am teaching someone some simple HTML. While they’re really anxious to do useful things, it would be like throwing an infant into the deep end of the pool. Thus, we start with simple exercises, in order to have a firm grasp on the basics.
The example looks like this.
RED |
BLUE |
YELLOW |
C
O
L
O
R
S
|
GREEN |
The code is really pretty simple, but lets not put the whole thing in our mouth at once. Remember what mother said, take small bites, and chew each one 30 times.
<table height="600" cellspacing="0" cellpadding="0" width="600" align="center" border="0">
Start with a table tag. Zero the borders, give it a width. No spacing, no padding, give it a height, and make the table align center to it's parent.
<col align="middle" width="200">
<col align="middle" width="200">
<col align="middle" width="200">
We're going to have 3 columns, and we want each one to be a set width. 1/3 of 600 is 200.
<tr>
<td bgcolor="#FF0000" colspan="2"><h3><font color="#FFFFFF">RED</font></h3></td>
<td bgcolor="#0000FF" rowspan="2"><h3><font color="#FFFFFF">BLUE</font></h3></td>
</tr>
Row one has two cells, one two columns wide, then another two rows tall. Make the background color of each appropriate, using short-cut style hex notiation #RED_GREEN_BLUE (two numbers each, 0-F, single number means two of the same). After that, we're going to make the font larger using the h3 tag, and a color using the font tag with a color attribute. No CSS yet, this is BASIC HTML.
<tr>
<td bgcolor="#FFFF00" rowspan="2"><h3><font color="#FFFFFF">YELLOW</font></h3></td>
<td bgcolor="#000000"><h3>
<font color="#FF0000">C</font>
<font color="#FF6600">O</font>
<font color="#FFFF00">L</font>
<font color="#00FF00">O</font>
<font color="#0000FF">R</font>
<font color="#9900CC">S</font>
</h3></td>
</tr>
Another row bites the dust. We need a cell that is two rows tall again, and then just a single column, single row cell. Then comes the fun part, wrap each letter in a color, like the rainbow. It helps to have a color chart for this. Maybe Visibone?
<tr>
<td bgcolor="#00FF00" colspan="2"><h3><font color="#FFFFFF">GREEN</font></h3></td>
</tr>
</table>
Finish it up with the last cell, two columns wide. Don't forget to close the table tag! Congratulations, now you have a pretty finished product. You have used the table, tr, td, col, h3, and font tag. Play around with the values in the attributes and see how pretty or ugly you can make it.