So you want to try something imaginative with HTML text formatting perhaps even make it bounce around a bit? As usual, tables came to the rescue.

Let’s take the word’Caterpillar.’ In its most ordinary form, the following code will give you simple results.

<center>
<b><font size=”+5”>CATERPILLAR</font></b>
</center>

The most basic example of a bounce is alternating the vertical alignment of every other letter.

Create a table and choose the first <td> tag to correspond with the first letter. So if you’d like the “C” in Caterpillar to be down use <td valign=bottom>
Alternate the vertical alignments for all the subsequent tags
You need to add spaces above and below the <td> tags. When your letter is down you must add a space above it:
<td valign=bottom><p>T</td>

And when it is up, add space below:

<td valign=top>E<p></td>

Follow all these instructions and you should get a code that looks like this:

<center>
<table>
<tr>
<td valign=bottom><p><b><font size=”+5”>C</font></b></td>
<td valign=top><p><b><font size=”+5”>A</font></b><p></td>
<td valign=bottom><p><b><font size=”+5”>T</font></b></td>
<td valign=top><p><b><font size=”+5”>E</font></b><p></td>
<td valign=bottom><p><b><font size=”+5”>R</font></b></td>
<td valign=top><b><font size=”+5”>P</font></b><p></td>
<td valign=bottom><p><b><font size=”+5”>I</font></b></td>
<td valign=top><p><b><font size=”+5”>L</font></b><p></td>
<td valign=bottom><p><b><font size=”+5”>L</font></b></td>
<td valign=top><p><b><font size=”+5”>A</font></b><p></td>
<td valign=bottom><p><b><font size=”+5”>R</font></b></td>

</tr>
</table>
</center>

Now, let’s suppose we don’t want the small sharp peaks of the previous example, and prefer smoother peaks and troughs.

1. Go ahead and select whether you want the first letter to be up or down.
2. Since the first letter was aligned bottom of the cell, the next letter is aligned to the center.
3. The third letter is now aligned to the top of the cell.
4. The descent is pretty much the same as the ascent.
5. Don’t forget to adjust the spacing as in the previous example

Here the caterpillar’s undulations are more controlled.

Here is what the resulting code could look like:

<center>
<table>
<tr>
<td valign=bottom><br><p><b><font size=”+5”>C</font></b></td>
<td valign=top><p><b><font size=”+5”>A</font></b></td>
<td valign=bottom><p><b><font size=”+5”>T</font></b><br><p></td>
<td valign=top><p><b><font size=”+5”>E</font></b></td>
<td valign=bottom><br><p><b><font size=”+5”>R</font></b></td>
<td valign=top><b><font size=”+5”>P</font></b><p></td>
<td valign=bottom><p><b><font size=”+5”>I</font></b><br><p></td>
<td valign=top><p><b><font size=”+5”>L</font></b></td>
<td valign=bottom><br><p><b><font size=”+5”>L</font></b></td>
<td valign=top><p><b><font size=”+5”>A</font></b></td>
<td valign=bottom><p><b><font size=”+5”>R</font></b><br><p></td>

</tr>
</table>
</center>

What if your caterpillar is not as undulating as the previous examples made it out to be? Well, it’s time to get subtle.

A more subtle form of the previous example

The trick is to remove the extra spacing for all table data except for the first, using this code:

<center>
<table>
<tr>
<td valign=bottom><br><p><b><font size=”+5”>C</font></b></td>
<td><b><font size=”+5”>A</font></b></td>
<td valign=top><b><font size=”+5”>T</font></b></td>
<td valign=top><b><font size=”+5”>E</font></b></td>
<td valign=bottom><b><font size=”+5”>R</font></b></td>
<td valign=top><b><font size=”+5”>P</font></b></td>
<td valign=bottom><p><b><font size=”+5”>I</font></b></td>
<td valign=top><b><font size=”+5”>L</font></b></td>
<td valign=bottom><b><font size=”+5”>L</font></b></td>
<td valign=top><b><font size=”+5”>A</font></b></td>
<td valign=bottom><b><font size=”+5”>R</font></td>

</tr>
</table>
</center>

PULL DOWN YOUR MENU

Here is an example of script that runs a basic pull-down menus. There are many ways in which menus can be designed, this example is one with a pull-down and a button, and it gives the user the time to consider and confirm the selected destination.

Select the name of your form to be used later in the JavaScript function. The opening tag <FORM NAME=”info”>achieves the task.
Also choose a name for the menu, in this case jumpMenu
Now, add the choices you’d like the user to see with the <OPTION>tag
Close the pull-down menu area with the </select>
And of course, add the button. In

The Pull-down menu is one of the simplest form of menus

This case it is lkabelled:GO!”, and on clicking it, the button invokes a JavaScript function jump() to perform a certain action.

The JavaScript function has really two components. The first is the

Varloc=document.info.jumpMenu.options(document.info.jumpMenu.selectedIndex). text:

Line which finds out what the user selected. The other part of jump() directs the user to the files corresponding to the choice of selection.

The entire scripts looks like this:

<HEAD>
<SCRIPT LANGUAGE=”JavaScript”>
function jump()
{
var loc=document.info.jumpMenu.options(document.info.jumpMenu.selectedIndex).text:
if(loc== “Stanley Kubrick”)
{
location = “Stanley.html”,
}
else if (loc= = “Peter Greenaway”)
{
location = “Peter.html”,
}else if (loc = = “Atom Egoyan”)
{
location = “Atom.html”,

A combination of pull-down menu and Go button gives the user time to consider his choice

}
else if (loc = =- “Wim Wenders”)
{
location = “Wim.html”,
}
else if (loc = = “Mike Leigh”)
{
location = “Mike.html”;
}
else if (loc = = “Spike Lee”)
{
location = “Spike.html”;
}
}
</SCRIPT>

<TITLE>main pull-down</TITLE>
<HEAD>
<FORM NAME=”info”>
<select NAME= “jumpMenu”>
<OPTION>Stanley Kubrick
<OPTION>Peter Greenaway
<OPTION>Atom Egoyan
<OPTION>Wim Wenders
<OPTION>Mike Leigh
<OPTION>Spike Lee
</select>s

<INPUT TYPE=BUTTON VALUE=”Go!” OnClick=”jump()”></FORM>