Free Java! Track Links! Vote Now! HTML Help! Free Clipart! Free Fonts! The Net3Media Network Free Sounds! Web Freebies! Fun Riddles! One-Liners! JOKES! Get Funky! History Files! Funny Pictures! Rebus Puzzles! Get Laughs! Fun Riddles!


Helpful HTML Tips and Tricks

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.

    Sneaky little spacing gif is right here!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 blahblah blah blah blah
          With the CELLSPACING="0" attribute
    blah blah blah blahblah blah blah blah

    If you want to keep your text away from the walls, add CELLPADDING="5".     
    blah blah blah blahblah 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>

    This coding will give you the result below:

    Send EMail
    Gallery
    Hobbies
       
    This is the button
    background we used.



    If you are having problems with your coding not working properly, use these troubleshooting ideas to track down the problem:

    ~~~~~ On to "Trouble Shooting Techniques" ~~~~~




All contents copyright ©1998-2010 Net3Media / HTMLclinic.com   Contact Us:    Privacy Policy