Building sites

18th February 2000 at 00:00
I love newspapers for their looks - the infinite variation in balance between headline, photograph, and text - as well as for what they say.

In comparison, the design of webpages is constrained both by HTML, the language used to create them, and by the size of the monitor on which they are viewed.

Too many sites, trying to accommodate those viewing on laptops or small monitors, design pages with a fixed width. The result on a 17 or 19-inch monitor is a miserably pinched column with almost half the screen space unused. The alternative, which I prefer, is to make the page proportional, so that it voluptuously fills the width of the screen whatever the size. The downside of this is that the exact positioning of line-breaks is hard to determine as individual columns on the page shrink or broaden, depending on the screen size.

Too many people fight shy of HTML and let a program such as Frontpage do the work for them. This is silly, because learning the basics of HTML consists of little more than memorising a dozen or so tags, some of which are stunningly easy to remember. . LESS THAN LESS THAN


are the tags for bold and italic, for instance. . LESS THAN LESS THAN P

is the paragraph tag and . LESS THAN LESS THAN H1

the largest heading or headline tag. Basic HTML sets the screen to display text in a size relative to the browser's settings. Anyone who has designed a web page will have been disappointed by the maximum default size of text displayed bythe . LESS THAN LESS THAN H1

tag. To produce larger text, some sites create image files, which can take more time to download.

The answer is to use a "cascading style sheet" - a collection of rules that defines how HTML tags should be displayed. In this way the . LESS THAN LESS THAN H1

tag can be set to display text of any size desired. But what should really grab the attention of designers of school websites is the ability of a style sheet to attribute background and border colours to different elements of the page. This means that it is easy to give a whole site a uniform colour theme, perhaps using the school's colours. An example of this can be seen on the main page of my children's books site where each headline is displayed using the website's colour theme of green and pink. This is achieved with just six lines of style coding. The same effect could be achieved using tables, but it would be a nightmare to execute.

There are a number of online tutorials that will show you how to create a style sheet. The ones I have found most useful are: Webmonkey: http:hotwired.lycos.comwebmonkeyauthoringstylesheetstutorialstutorial 1.html Joe Expert: John C Gilson: www.bfree.on.caHTMLlesson30.htm And when you've finished, another site - www.htmlhelp.comtoolscsscheck - will check it for you. For a handy listing of HTML tags and style sheet syntax, nothing can beat the Hip Pocket Guide to HTML4 (IDG Books pound;13.99).


Log-in as an existing print or digital subscriber

Forgotten your subscriber ID?


To access this content and the full TES archive, subscribe now.

View subscriber offers


Get TES online and delivered to your door – for less than the price of a coffee

Save 33% off the cover price with this great subscription offer. Every copy delivered to your door by first-class post, plus full access to TES online and the TES app for just £1.90 per week.
Subscribers also enjoy a range of fantastic offers and benefits worth over £270:

  • Discounts off TES Institute courses
  • Access over 200,000 articles in the TES online archive
  • Free Tastecard membership worth £79.99
  • Discounts with Zipcar,, Virgin Wines and other partners
Order your low-cost subscription today