HTML tutorial : how to use invisible graphics

HTML tutorial 8

Author: Ian McAllister

Many uses for invisible graphic

You will notice that the first few lines of this paragraph are indented, as if a TAB key had been used, but as you know now, HTML ignores all spaces such as tabs and line feeds. Of course, you could get the indentation by repeated use of the no-break space special character ( ) but that gets very tiring when you need to use a lot of them. The indentation here is because there is an invisible picture to the left of the text. When the text goes back to the left without an indent, you know that the invisible picture has finished

Invisible picture loads fast

The invisible picture is only one pixel in size, so it takes no time to load. You use the width and height specifications to control how big the invisible picture appears (by trial and error) so as to make the blank space in your text the exact size you want. To copy the file, just right-click on the blank space to the left of the last paragraph, and save 1pixel.gif for future use - where? - in your HTML directory of course.

The tag that I used to get the above effect was
<img src="1pixel.gif" width="50" height="80" align="left">
Of course, I didn't use the alt tag here, because it is meant to be invisible!

Use to control table widths

I showed you how to specify the width of columns in a table. Unfortunately it doesn't work very well in all browsers.

Use an invisible picture to prevent browsers from shrinking the column width. For instance, in lesson three, Netscape insisted on making all the columns in my special characters table the same width. So I used the following code in the first cell of the first column to force a wider column.

<td align="center">
<img src="1pixel.gif" height="1" width="240"><br>
Description of character</td>

One trick I've used is to specify the width of a column as 5% or some other ridiculously small figure, then put in my invisible picture so that the column has to expand to the width of the picture.

Learning while you browse

Every time you find an idea that you really like in a web page that you visit, just click on the view menu, and choose to view the source code. Look through the code to find out how they did whatever you liked.

Often there is too much code to look through it all, so choose a key word that is near the feature that you liked, then hold down CTRL and press F (for find). Type in the word you want to find, and it will jump to the first occurrence of the word. If that is the wrong one, just repeat the find process till you find the one you want.

This process will not always work. If the technique you liked used a script, such as PERL or Java Script, you may be unable to view it. And the script may be copyright in any case.

Some pages try to prevent you reading the code. There are two main ways to do this. You can cram all your html code into one line (it works just as well) so that it is difficult to read, and you can insert two blank pages (use repeated breaks) before the enormous line, so unobservant people think there is only a blank page.

You would probably find it easier to study a page that is less unhelpful, but if you are really determined, just copy the code to your editor, and insert line returns to make it easy to read.

The other way to hide a page is to use CGI or PHP script to generate the page. Then there is no code to view.

Since I wrote the last paragraph PHP files have appeared on the scene. They can print the html code on the fly, or even use a command to include html files that are in directories not accessible to the visitor.

CSS files have also appeared on the scene. If you view source, and look in the head section you are likely to see a bit about a css file. Note the name of the file, and browse it. If you know a little about css, you can work out what they have done. A lot of the stuff uses colons where html would use equal signs. you finish each bit with a semicolon like this color:green;

Be cautious about trying too much clever stuff. You may think that I am over emphasising this, but I am assuming that you want to make money from your web site, not just do clever stuff. I hate to admit it, but I set up this site with all sorts of clever stuff, that I then removed bit by bit as I saw how quickly my visitors hit the back button.

Here is a free eBook that will show you more about the philosophy of concentrating on making money rather than on showing off to your visitors. After all, if they hit the back button before your fancy flash file has finished loading, they won't see how clever you are anyhow.

Next lesson - How to Use Forms to Gather Information.