Here are some very helpful tips and tricks you can use to make your HTML coding life a little easier.

Layout and Design

1. A very common way to indent and control space is by using a 1 x 1 transparent GIF. By using this you can control space by setting the WIDTH= and HEIGHT= attributes. It's very useful if you don't want to bother with tables. For example, I could place my transparent .gif at the beginning of a paragraph, to indent it, and set the width to WIDTH="15". For example:

   Here is a fake paragraph with no gif to indent it.

   Here is a fake paragraph with a gif to indent it.

   (Put your mouse over the empty space just before the text in the indented example)

Text

1. Header tags (<H1> - <H6>) have an annoying property that not everyone notices when they first begin coding. The Header will insert a blank line above and below itself. This can be challenging to place other elements around if you are not aware of it. Here is an example:

   The Code: Roses are Red <H5>Violets are Blue</H5> Yadda Yadda Yadda

   The Result: Roses are Red Violets are Blue Yadda Yadda Yadda

   To avoid this insidious little problem, just bold your text and assign it a bigger text size instead of using a header tag around your text.

Tables

1. Set the BORDER= attribute to a Value of "1" any time you are creating a table. This will allow you to view the entire table as you are building it. Once you have completed the table you can remove the border by changing the Value to "0".

2. By default Netscape and Internet Explorer will display a table with a CELLSPACING= value of 1 or 2. This can be annoying if you are trying to code a table with several cells and you don't want any lines showing between cells. To remove the little lines you must put in CELLSPACING="0" and BORDER="0".

   Without the CELLSPACING="0" BORDER="0" attributes blah blah blah blah blah blah blah blah

   With the CELLSPACING="0" attribute blah blah blah blah blah blah blah blah

   If you want to keep your text away from the walls, add CELLPADDING="5".

   blah blah blah blah blah blah blah blah

3. If you like using menu's with textured image buttons you can use a shortcut to cut down on loading time since you will only be using one image repeated in several cells.

   In your Table Cell tag, use the BACKGROUND= attribute and specify the filename of the blank button you wish to use, add the WIDTH= and HEIGHT= of the image and finally, put the text for each button in the individual cells, like this:

   <TABLE>
   <TR>
   <TD BACKGROUND="btn.gif" WIDTH="100" HEIGHT="20">Send Email</TD>
   </TR>
   <TR>
   <TD BACKGROUND="btn.gif" WIDTH="100" HEIGHT="20">Gallery</TD>
   </TR>
   <TR>
   <TD BACKGROUND="btn.gif" WIDTH="100" HEIGHT="20">Hobbies</TD>
   </TR>
   </TABLE>