BEHAVIOR hands on

TRANSPONDER

Would you like to slice and dice the contents of a Forum post, and lay out a feast for the readers' eyes? Well, there's a better way than assembling a whopping huge animated GIF or creating a picture of fancy text effects. The BEA Forum supports the same simple commands your browser uses for any other Web page with subdivided graphics or non-linear text.

The most common way to lay out such a page is to display it within a table. This gets a little tricky within a Forum post, because the pages are already displayed inside a set of tables. Some of what should work by normal HTML rules won't come out that way in a post; the only way to see what works and what doesn't is to dive in and try it.

We'll start with something simple: a line of text that ascends and descends. This could be achieved with a graphic, but that would mean storing and loading it-- something not everyone has the means to pull off unaided. By using nothing but text, it can be done without having to use any other files; such effects thus become merely a way to shape a post more artfully.

<table border=0 cellspacing=0 cellpadding=0>: (Defines the table.)
<tr>: (Table Row; starts a new horizontal line.)
<td>: (Table Data; begins each cell's content.)
<br><br>The : (The first word, plus two lines and a forced space.)
</td>: (End Table Data; closes a table cell.)
<td><br>classic </td>
<td>bell- </td>
<td><br>shaped </td>
<td><br><br>curve. </td>
</tr>: (End Table Row; closes a horizontal line.)
</table>: (Closes the table.)

The	classic	bell-	shaped	curve.

Now for something more complex: a picture with animation, composed of smaller pix held together by a table. The downside is that cutting up a file like this requires much more effort than just making a huge GIF. The advantage is that the animation can be made much smaller in filesize than if the whole image blinked, which also makes the animation appear smoother. Put about fifty of these on one page and you'll see what I mean.

(These settings keep images contiguous.)
<tr>
<td colspan=3>: (The variable lets this table cell fill three columns.)
<img src="http://204.216.206.220/~behavior/hands/top.jpg">: (The content of this cell is the top image section.)
</td>
</tr>
<tr>
<td>
<img src="http://204.216.206.220/~behavior/hands/midleft.jpg"> <img src="http://204.216.206.220/~behavior/hands/hands_on.gif"> <img src="http://204.216.206.220/~behavior/hands/midrite.jpg">: (The middle row of images, where the action is.)
</td>
</tr>
<tr>
<td colspan=3>
<img src="http://204.216.206.220/~behavior/hands/bottom.jpg">: (I hope by now it's obvious what this is!)
</td>
</tr>
</table>

To wrap up the demo, how about a neat way to show off your latest creations? Rather than just stringing them down the page, putting them in a table lets you add a title and some names. Makes the final result more presentable, and all it costs is a few hundred test posts!

<table width=400 align=center border=0 cellspacing=0 cellpadding=0>: (Defining the table width holds the images together.)
<tr>
<td align=center colspan=4>
<font size=5>The MASKerade Series</font>: (The series title, in a bigger font size.)
</td>
</tr>
<tr>
<td width=100 align=center>: (This width for four pix gives the table size.)
<A href="http://204.216.206.220/~behavior/hands/maria.jpg" target=blank>: (This tag links each thumb to its full-size pic.)
<img src="http://204.216.206.220/~behavior/hands/t_maria.jpg" border=0>: (The thumbs; if you use borders, add their size.)
</A>: (Closes the link tag set.)
<BR>Maria: (The name for the first pic.)
</td>
<td width=100 align=center>
<A href="http://204.216.206.220/~behavior/hands/autumn.jpg" target=blank>
<img src="http://204.216.206.220/~behavior/hands/t_autumn.jpg" border=0>
</A>
<BR>Autumn
</td>
<td width=100 align=center>
<A href="http://204.216.206.220/~behavior/hands/sarenna.jpg" target=blank>
<img src="http://204.216.206.220/~behavior/hands/t_sarenna.jpg" border=0>
</A>
<BR>SaRenna
</td>
<td width=100 align=center>
<A href="http://204.216.206.220/~behavior/hands/kelly.jpg" target=blank>
<img src="http://204.216.206.220/~behavior/hands/t_kelly.jpg" border=0>
</A>
<BR>Kelly
</td>
</tr>
</table>


The MASKerade Series
Maria	Autumn	SaRenna	Kelly

For more basic help learning HTML, start here:

Webwork - A Collection of HTML Writing Aids and Examples

Other HANDS ON articles:

HOW TO CHANGE TEXT SIZES IN A FORUM POST

HOW TO APPLY COLORS IN A FORUM POST

HOW TO POST MULTIPLE LINKS

HOW TO POST FORMATTED LISTS

YOU KNOW THE NAME; LOOK UP THE NUMBER...

HOW TO LEARN HOW TO!

HOW TO PUT UP A SIGNPOST!