HTML Tips & Tricks

Some people emailed me various questions about our pages, so I thought that this page might be helpful to some, especially HTML beginners.
If you find some of these tips useful, a small credit and an hyperlink to our homepage would be nice...

I might decide to sort them into categories at a later date, but for the moment, here they are...

1. Images
Images are one of the cool features offered by the World Wide Web. You can use them as a spot for an hyperlink. I used these on our pages:

You can save these pictures in the FILE>SAVE AS menu in Netscape (save them as .gif)

Jim Owers from IFL, told me how to get these nice transparent ones (no borders), such as :

You just have to save your picture as .gif, and using a picture editing program, you open it and set one colour to transparent (which is one of the features offered by GIF89a). Be careful, though, not to have different shades of this colour in your picture, as you can only set one colour to transparent.
You then need to add to your HTML tag BORDER=0 to get rid of the 3D border produced by Netscape.

<IMG ALIGN=TOP SRC="myimage.gif" BORDER=0 ALT="IMAGE">

I recently discovered how to position some text on the screen, so that it would not be affected by a window resize, as this is usually the case. It is very simple, and maybe not that much compliant with the HTML guidelines, but it works...
First, you need to create a NEW document in your drawing software, and in order to speed things up, create it in Black&White; save it as .gif (GIF89a) and define white as the transparent colour. Do not draw anything, just bear in mind that the size of this empty document will be the size of the tabulations you need.

Eg. (all measures are given in pixels (Horizontally first, Vertically second). Remember that most of the screens, that is 14", have 72 Dpi, 72 pixels per inch.)

A document measuring 100x1 pixels will give you a 100 pixel tab>>

<<Or a 1x100 pixel document will leave 100 pixels between two lines.
I also made a small box for precise alignment>><

Please note that these pictures are not to scale. The BORDER was added to allow you to see them.

This is obviously not the best way to insert some space in your HTML documents, but I found it so frustrating not to be able to insert some spaces where I wanted to (and the tab special character 	 is so dodgy to use)

You can download these empty pictures or create your own. Have a look at out Home page. I use this technique extensively on this one.

Another way to make your page different is to include a background picture to it. We used to have one on the school pages, but it takes some time to download, and very often the result is not easy to read. The HTML command to put a background is:

<BODY BACKGROUND="picturename.gif">

The depth of my background was 2 (the number of colours available is 2 to the power of 2 = 4 colours). This way the file can be huge, covering the whole of your page, yet very small in size, and therefore very quick to load...
I tried as well to put some embossed text as a background, but then the rest of the page is not very convenient to read.
Combining a background and the previous tip about transparent pictures, will give you a professional-looking interface.

2.Forms
Forms are a good way to get some information about the people who visit your pages. They are easy to create, and send the answers as an email message. You have to specify at the beginnig of your document (which should not be <HTML>, but <FORM>, by the way)

<FORM METHOD=POST ACTION="mailto:youremail@yourserviceprovider.co.uk">

In your form, you can have all sorts of computer-like

radio buttons Yes No

tick boxes One Two Three

multiple choice menu

or window

and finally textboxes like this

You should always finish your form with these two buttons:

and the appropriate tag </FORM> in your HTML document.

Tip: Have a look at the source of this document, for instance in selecting VIEW>SOURCE or FILE>SAVE AS and .htm in the dialog. You want to replace Variable1 - Variable5 by the name of your choice for these variables, but do not insert spaces, of funny characters such as : ? , in the name of your variable, as it will junk the answers you will get by email with some %1AE (or other) tags.

For more infos about these forms, I suggest that you follow this hyperlink to our questionaire about the Newbury bypass, and that you save this document as .htm (or .html on a Mac), so that you can have a look at how it was made.

3.The counter
People asked me many times how to get that swanky counter that shows the number of visitors on your web site:

You can register at http://counter.digits.com and follow the hyperlink there. Everything is explained, examples are given, and this service is free, provided that less than 1,000 persons consult your pages daily (which should be the case).

4. Animated pictures
If you use the latest version of Netscape (that is 2.0+), you will be able to see the animation below.

this animation is based on a picture "borrowed" somewhere else. All you have to do is open the picture in your drawing package, make various tranformations to it, save all the stages, and open your picture with one of the Shareware packages that suport animated GIF.
Personally, I use GifBuilder on my Mac (available at: http://www.tucows.com), which is a straightforward, simple and free program.
Animated pictures do not take up that much disk space. A set of 5 x 20K pictures usually weights in the region of 25K, which is excellent in terms of downloading times.

5. Java scripts
Java scripts ARE the future of the Internet. They are some sort of small programs that you can use within your Internet browser regardless of the platform you usually work on. Your browser needs to be Java-compatible, of course; you can download the latest version of Netscape at http://home.netscape.com/.

You can see examples of Java scripts at http://cyberjava.com . My advice on this subject is the same as the one I gave earlier on: look what people do, try to understand, and copy.

The number of things that you can actually learn from other people's pages are incredible. Always have the reflex of saving them so that you can have a look later offline.
Any comments, extra tips or other are welcome by email. Please remember that if you find some of these tips useful, a small credit and an hyperlink to our homepage would be nice...

©Nik 010296 Feel free to use our pictures in your docs.