In this tutorial we'll show you 10 really handy tips and tricks for HTML newbies. If you're just starting out with building your Web pages, these techniques should be very useful to you!

1. Always Close Your Tags

When you type an opening HTML tag (e.g. <b>, <p>), always place the corresponding closing tag at the end. For example:

• <b>My favourite animals are horses and elephants.</b>

• <p>My favourite animals are horses and elephants.</p>

• <center>My favourite animals are horses and elephants.</center>

This will ensure that your HTML pages work properly on all browsers, and will help to prevent any strange problems occurring in your pages! This is especially important with <table>, <tr> and <td> tags.

Some tags don't have a corresponding closing tag - just use these tags on their own. Examples include:

• The <br> tag, for creating line breaks

• The <img> tag, for inserting images

2. Use Style Sheets Wherever Possible

Style sheets will make your HTML coding life so much easier. No more <font> tags everywhere! You also get much finer control over the way your pages look, and you can change their appearance just by editing one style sheet file.

If you haven't worked with style sheets yet, pop over to our Style Sheets Tutorials to get going!

3. Use an HTML Validator

It's a great idea to run your Web pages through an HTML validator before you publish them on your Web site. These programs will pick up potential problems such as missing closing tags on tables, and using tags that won't work properly on all browsers. Don't forget - just because your page looks great in the browser you're viewing it with doesn't mean it will work on other browsers!

HTML validators are also a good way to learn about the correct way to use HTML tags - you can learn from your mistakes!

Some good free validators on the Web include the W3C HTML Validation Service and the WDG HTML Validator. Many modern web authoring packages have built-in HTML checkers too.

4. Place HTML Comments Everywhere!

It is always good coding practice to put lots of comments in your code, and to place lots of space around tags where possible to break up your pages into logical sections. For example, here is a section of code from our PageKits page, with no comments:

<tr>
<td valign="top">
<p><a href="wipedout/" target="showcase"><img
src="images/wipedout.gif" width=108 height=80 border=0></a></p>
<p><b>WIPED OUT. - NEW!!</b>
<br>
Rough and ready surfing antics with this lovely funky
template!</p>
<p><a href="wipedout/" target="showcase">View PageKit</a>
<br><a href="wipedout.shtml">Download PageKit</a><br></p>
</td>
<td><img src="../../images/space.gif" width=10 height=1></td>
<td valign="top">
<p><img src="images/pagekit_blank.gif" width=108 height=78
border=0></p>
</td>
<td><img src="../../images/space.gif" width=10 height=1></td>
<td valign="top">
<p><img src="images/pagekit_blank.gif" width=108 height=78
border=0><a></p>
</td>
</tr>

And here is the same code with comments and spaces inserted:

<!-- Begin PageKits Table Row -->

<tr>


<!-- Column 1 -->

<td valign="top">

<p><a href="wipedout/" target="showcase"><img
src="images/wipedout.gif" width=108 height=80 border=0></a></p>

<p><b>WIPED OUT. - NEW!!</b>

<br>

Rough and ready surfing antics with this lovely funky
template!</p>

<p><a href="wipedout/" target="showcase">View PageKit</a>
<br><a href="wipedout.shtml">Download PageKit</a><br></p>

</td>


<!-- Spacer -->

<td><img src="../../images/space.gif" width=10 height=1></td>


<!-- Column 2 -->

<td valign="top">

<p><img src="images/pagekit_blank.gif" width=108 height=78
border=0></p>

</td>


<!-- Spacer -->

<td><img src="../../images/space.gif" width=10 height=1></td>


<!-- Column 3 -->

<td valign="top">

<p><img src="images/pagekit_blank.gif" width=108 height=78
border=0></p>

</td>


<!-- End PageKits Table Row -->

</tr>

You can see that the commented code is much easier to read!

5. Linking to Images

Linking correctly to images using the <img> tag is a common stumbling block for beginners. Often your web page will look great on your desktop PC, but when you upload the page to your site, all the images are broken!

The problem isn't helped by some web page editors, which incorrectly place "file://" image links instead of using relative links!

Follow these simple rules to make sure your images appear correctly every time.

A) If Possible, Use Relative Links

Relative links are usually the best to use because they will work wherever the page and images are located, provided they're always in the same place relative to each other. For example, if the image is in the same folder as the Web page, use:

<img src="myphoto.jpg">

If the image is in an images folder at the same level as the Web page, use:

<img src="images/myphoto.jpg">

If the image is in an images folder at a level above the Web page, use:

<img src="../images/myphoto.jpg">

B) Alternatively, Use Links Relative to the Document Root

If you have all your images in an images folder in the top level of your site (the Document Root), you can reference images like this:

<img src="/images/myphoto.jpg">

This has the advantage that you can move your Web page anywhere within your site, and the image links will still work, provided you keep the images in this global images folder.

The disadvantage of this approach is that it will only work when your web pages are being displayed via a Web server (using http://), not when viewed directly from your hard drive (using file://).

C) Do NOT Use Absolute Links!

If at all possible, avoid using absolute links within your site. An absolute link is a link that begins with http:// or file://. In particular, if the Web page on your hard drive contains an image link like this:

<img src="file:///C:|/mywebsite/images/myphoto.jpg">

It will NOT work when you upload it to your web server, as the img tag is directly referencing the file on your hard drive! Change the link to a relative link such as:

<img src="myphoto.jpg">

or maybe:

<img src="../images/myphoto.jpg">

as described in Rule A above.

6. Use Image Widths and Heights

It's a good idea to specify the width and height of an image when using an <img> tag. For example:

<img src="myphoto.jpg" width="234" height="123">

The advantage of doing this is that the Web browser can format the page more quickly as it is loaded, as it knows how to lay out the images before they've been downloaded. This means that your visitors can start surfing your page without having to wait for all the images to display!

Most graphics packages (Photoshop, Paint Shop Pro, etc) allow you to view the width and height of an image (in pixels) so that you can slot the values into the <img> tag. You can also right-click on the image and select Properties (in IE) or view the image in a window on its own and read the width and height in the title bar (in Netscape and many other browsers).

7. Non-Breaking Spaces

Sometimes you want to keep certain words together so that they're not split over two lines. The way to do this is with a non-breaking space. In HTML the tag for a non-breaking space looks like this:

 

For example, the following words will wrap if they fall at the end of a line:

<p>The quick brown fox</p>

while this example, which uses a non-breaking space, will keep the words "brown" and "fox" together even if they fall at the end of a line:

<p>The quick brown&nbsp;fox</p>

8. Use Tables to Lay Out Your Pages

Tables aren't just for displaying rows and columns of boring data like a spreadsheet! They're also a great way of laying out your page. You can use tables to separate elements on the page and ensure that the elements appear in the right place on the page.

9. Creating Empty Table Cells

Often you'll want to create table cells (<td>'s) with nothing in them; for example, to create some space within your page. Usually, the best way to create an empty table cell is with a non-breaking space, as follows:

<td>&nbsp;</td>

Don't just use <td></td> as this will cause your tables to appear rather strange on some browsers!

10. The Spacer GIF Trick

For really precise control over page layout, without resorting to using CSS positioning, you can't beat the old spacer GIF trick. This involves using a 1 pixel x 1 pixel transparent GIF, which will be invisible in your Web pages, and using the width and height attributes to control the precise padding between page elements such as images, text and table cells. For example, the code:

<img src="one.gif" width="20" height="20" border="0">
<img src="space.gif" width="10" height="1" border="0">
<img src="two.gif" width="20" height="20" border="0">

will create a 10-pixel horizontal gap between the two images, one.gif and two.gif.

You can use spacer GIF's in table cells to "pad out" the table cell and make sure it doesn't shrink below a certain width or height. In this code example:

<td><img src="space.gif" width="1" height="20" border="0"></td>

the table cell will always be at least 20 pixels high.

It's easy to make a spacer gif in your graphics package - create a new 1 pixel x 1 pixel image then save it as a GIF with a transparent background.