Advanced / New HTML Features

In this article

As promised, this article will deal with new HTML features, like backgrounds and tables.

Document Backgrounds - A Netscapism

Document backgrounds, made popular by the Netscape graphical WWW browser, are fairly easy to implement, but be careful. Dark backgrounds tend to make text and links hard-to-read -- I am constantly receiving complaints about the colour clash on my homepage, and it's very difficult to find the correct link colour for such a background. Fortunately, backgrounds will not adversely affect text displays such as the Lynx browser.

I suggest that you keep your backgrounds to around 100x100x16 colours to keep them tiny in file size -- graphical browsers that support the background function will tile them for you. Remember that your backgrounds must be in GIF file format and that they must be loaded by the user's graphical browser before any other part of the document can be retrieved -- which is why they should be kept small.

If you know the "One True Way" of HTML coding, you know that every document has a certain structure, including the <html>, <head>, and <body> tags. Backgrounds simply use the <body> tag in a new and useful way. The format is fairly simple:

<body background="img/clsbackg.gif">

The text between quotation marks can be any gif's URL -- it does not need to be on your own diskspace. I believe that there are a few public collections of backgrounds; if anyone remembers the URLs, please let me know for a future article.

But didn't you say something about text colour?

Yes, foreground text colour, along with link and visited link (the magenta links in Netscape) colours (as well as background colour if you don't want to use a background), can be changed, but it's not as easy as adding two and two and two -- you have to convert it to hexadecimal (base 16). Let me explain.

The colours are specified in RGB (RedGreenBlue) colour format. Each colour has a value between 000 and 255, decimal (base 10). Thus, white, being an equal mixture of pure red, green, and blue, would be 255,255,255. However, Netscape wants these values (see below for the allowable values) in hexadecimal, which is an alternate numbering system that evil programmers invented to make counting easier for them but harder for future generations. Most operating systems have calculator applets that can help with this, but in their absence you can use the table below.

The best way to illustrate the usage of the tag is with an example. Here we want to set the background colour to Windows 95 Desktop Green (anyone for OS/2 Blue or Mac White?), the foreground text colour to white, the link text colour to black, and the visited link text colour to grey (note that all colours must be from the sixteen or so "solid" colours):

<body bgcolor="#008080" text="#FFFFFF" link="#000000" vlink="#C0C0C0">

Solid Colours (sorry fellow Lynx users)

Colour Value
Bright Red FF0000
Yellow FFFF00
Cyan 00FFFF
Magenta FF00FF
Bright Green 00FF00
Blue-Green 008080
Dark Red 800000
Dark Green 008000
Bright Blue 0000FF
Dark Magenta 800080
Dark Blue 000080
Black 000000
Dark Yellow 808000
Dark Grey 808080
Bright Grey C0C0C0

The Evil Explained

As Lynx users have now seen, tables are currently hard to read on CCN. Thus, I recommend against using them too much, and I'll only go into enough detail to explain how I did the table above. More detail can be found at Netscape.

Tables are surrounded by the <table></table> tag. Their structure in an HTML document is basically row-by-row, with individual "cells" making up each row (the cells in each row are arranged to form columns. Sound a lot like a spreadsheet to you?). Headers can be placed both in the first row or to the left of rows ("side headers"). There are many advanced features in tabling, all of which look awful to your fellow CCN users -- remember that! Here are the simple ones used above:

This tag is placed at the start and end of every row, including the row that includes the table headers.
This tag is placed around each header. Headers can be placed in the first row, or at the beginning of each row (the colspan and rowspan options can be used to make headers and cells span more than one column/line).
This tag is placed around each individual cell in a row.

And that's all I have to say about TablesÉ


Chebucto Connections TIPS FOR POWER USERS
is edited by Michael Smith
who is happy to receive Questions, Comments or Suggestions.
If your browser does not support mail, write to Michael later at aa529@ccn·cs·dal·ca.

Last Month: October 1995 Next Month: December 1995