HTML tutorial - Back to basics

Back to basics

One of the first principles of HTML is that it's not a descriptive language - you can't say that things should appear in a particular font, or a particular size. But that said, new generations of browsers can help make it much easier to ensure that things look much as you intended, and to make pages look much more interesting that just text on a standard grey or white background.

The most common way of adding a little interest to your document is by using transparent images; programs like Lview for Windows and GraphicConvertor on the Macintosh allow you to select one of the colours in your picture and set it to be transparent. Usually the background colour is made clear, so that an image appears to be floating. For instance, if you create a picture of a globe to use as a button, it would usually be sitting in a square or rectangle of white. By making the white transparent, all people will see when they look at your page is the globe, sitting on the background of the page. The next page explains how to make transparent GIFs in more detail.

Another way of spicing things up is by using background images for your pages - but remember that if you use a bright or complicated picture, it might be hard to read the words in front of them. Not all browsers support background images, but they do work with NetScape, NetShark, Emissary and WebExplorer.

Background images can be GIF or JPEG format files - most browsers that support backgrounds also support JPEGS - and you add them to your document with an extension to the BODY command, like this

<body background="bg-pic.gif">

If the image is too small to fill the window, it'll be tiled to fill the whole area, so you can make it quicker to view the page by having a small background image that can be downloaded quickly and then tiled by the browser. Background images can work with transparent images too, so you'll be able to see the background through the clear sections of other images.

Of course, not everyone browses the web with images turned on, so you might find that a layout you carefully designed with pictures in mind looks strange when they're not loaded and all that's displayed is the 'missing picture' icon. Some browsers, including NetScape, allow you to specify the size of a picture in the <img> tag, so that even if you don't load the picture, you'll see a blank space the appropriate size, like the screenshot. This is what the extended tag looks like

<img src="pic.gif" alt="Alternative text" width=288 height=288>

Many of the new extensions to HTML have come from NetScape, and you can find out more details about them by selection 'Help on creating Web services' from the Help menu, but remember that if you rely on too many of them, you might find other people unable to make much sense of your pages.

There's lots more that you can do with your web pages - some of which involves complicated scripts and programs to produce special effects - than we have space for here, but you should have enough knowledge now to create pages that include backgrounds, forms and other special effects. In a future tutorial, we hope to be able to look at some more advanced features, including the new version of HTML, HTML 3.0, which will be supported by lots of browsers in future. Until then, good luck