Your Website - Growers' Tips

Save this page as 'source' to browse offline and/or print for easier reading and reference. My excuse for this lengthy (21K) file is that it is referenced with suitable anchor names (Danforth, CQR, Bruce, Fisherman's?). Use your browser's 'Back' button to retrace your steps when necessary.
A first page, - Text, - Graphics, - Navigation/Site-maps, - Education revisited, - MoreHTML, - Standards, - Garden Maintenance, - MoreRESOURCES

A First Page

HTML is still in development and has moved quickly from simple HTML2 through more sophisticated HTML3.2 to the regrettably complex HTML4. Most browsers still work fine with the basic HTML2 or 3. The simplest HTML page has a structure like the following:
HTML and text:
My Page Title
Text - Trevor's First Page
Open HTML tag
Open HEAD tag
The title appears in the browser
header, not on the page and is the
name used for bookmarks and saves
Close HEAD tag
Open BODY of page
Text, headings, images etc.
Close BODY tag
Close HTML tag
The html 'file' in the column on the left would need to be saved as a text-only file with the file extension .html or .htm (If using a Mac, simply save the file as Suitablename.html (or .htm) but without spaces or unusual characters in the file-name. Internet filenames are case-sensitive and conform to Unix conventions. If using a PC stick to DOS filename conventions and the .HTM extension. If using Windows 95, give up or buy a proper computer).

The 'BODY' can contain any text, tables, any number of headings or images etc. Headings come in six levels from:

<H1> (Largest) </H1>

<H6> (smallest) </H6>
and the appearance varies considerably between browsers. Try to use these headings in logical sequence ('biggest' first) and you may find H2 to H4 the most useful.

An HTML (web) page can only display the 'tags' enclosed in the '<' and '>' angle-brackets as here by using a 'cheat' which I won't go into here. (View source for clues if you really want to know). So you can't directly use the example above to make your first page (except possibly by saving as text, but the table will mess that up, or by 'drag highlight', copy and paste into a text file which is what I've just done to create the following copy). You can however use this copy. (Then come back here! Save that copy from your browser As Source and use the file-name copy.htm or name of your choice with htm or html extension. Then open it with a text editor such as Notepad or Simple Text. (You can also use a word-processor provided you remember to save it any time as 'Text only'))

If that looked pretty boring, it is nonetheless the basis for all web-pages. To change the background to white insert: bgcolor="#FFFFFF" into the opening BODY tag (immediately before the '>' angle bracket. The hache symbol # is often Alt3 or Option3). Save the file, then open it again in the browser, and hey presto! it's white. Change the title and short text (between the BODY tags) as you wish, then put an <H2 > </H2 > tag round the short text (not the title!), save the file (text only) and view again. (But don't use H Tags to create bold effects - use them for Headings as intended)

The background colour is expressed in hexadecimal RGB so FF0000 (zeros!) is RED, 00FF00 is GREEN, 0000FF is BLUE and 000000 is BLACK. Black causes all your text to disappear unless you change the colour of the text to say white by also inserting TEXT="#FFFFFF" into the body tag or using a FONT COLOR tag. For an example of how this looks see this copy of this file in course of development. Even worse than white on black is dark blue or purple on black as can be seen from the links on that page. If you do use background colours other than grey or white, use pastel shades and black or dark text.

The 'tags' in angle brackets often require a '/' closing tag (but not always) and are not case sensitive. So 'BODY' or 'body' do equally well.

More on Text

Using text colours is not standard HTML - but is generally supported by Netscape and Internet Explorer. You should not try to specify the typeface or font size in HTML documents as this is intended to be under the control of the browser/user. 10pt may be fine for young eyes and high-resolution monitors but the elderly, poor-sighted, bifocalled, or poor reader using a standard PC will prefer 12 or 14pt. So, whenever possible, leave the choice of typeface and size to the user. Breaking this 'rule' may be standard commercial practice but this hankers after the fine print quality (1400dpi) of the glossy magazine and is not appropriate to the 72dpi of a standard screen display.

Careful use of Headings, paragraphs, perhaps frames and tables, formatting tags like bold and possibly italic - or logical style tags such as 'Strong' and 'EM(phasis)', combined with a few small graphics, icons or buttons, 'internal' and external links (usually coloured blue) and the occasional use of text or font colour, background colour or 'plain' tiled background gif images can produce quite attractive pages. Don't use blue as I've just done twice because it's irritating to find it isn't a link!

Displaying text as a graphic, except perhaps in a simple logo, should be punishable by firing squad as should pale yellow text on 'wallpaper', purple text on dark blue or black backgrounds, strong background images rendering text illegible, and all similar atrocities. Here is an example of a less successful page for which I am guilty and here is an almost text only page which I'm quite pleased about even though it just 'grew'.

Most browsers now support tables but use unordered lists for preference and keep tables for tables rather than layout. (This 'rule' is broken in these pages several times!)

Graphics and Multimedia

An advantage of the web is the ability to combine graphics, sound, voice, music and even video with text. Anything more than text and simple graphics however results in large file sizes and correspondingly slow, and irritating, download times. These multimedia capabilities are best used very sparingly - a sound clip, an image, perhaps a video clip if it is clear that these will add significantly to the meaning of the 'page'.

'Younger readers' may well appreciate a helpful illustration, diagram or sound effect, but others may prefer 'books without pictures' and anyone will quickly become bored and frustrated if they have to wait forever for the file to download. It is also true that much of the multimedia potential is not at all straight forward to use - perhaps the user's browser software or system does not have the requisite 'plug-in', sound, video or processing capability. Then there is the extra effort in creating what is required.

Many of the animations, scrolling text, icons and graphics on so-called 'cutting-edge' websites in fact serve no useful purpose whatsoever and simply irritate and detract from the 'message'. (For a double-whammy example of 'images-off' and Javascript 'mouseOver' dysfunction see "intro rant" from the 'acclaimed' Urban75, a site which manages to combine colours, font and style tags to maximise illegibility). Neither do they provide meaningful 'entertainment' (beyond the initial novelty value which soon wears off). At the present, most 'multimedia' is best left to those media (eg. CD-Rom and video tape) which best support it. Authoring CD-Roms is well within the capabilities of both primary and secondary school pupils, but that is a different issue and combining CD with a web-presentation perhaps better left, with broadcast TV, to professionals in those media.

Using Graphics

Where graphics (still images in jpeg or gif formats, or possibly animated gifs) are to be used then a few simple 'rules' can enhance their use:


Help your reader to find their way around your pages. A standard 'navigation bar' top or bottom of the page as here below helps. You can do this with graphics or buttons if you insist, but text works perfectly well. Always have a link back to your home page. For an example of home page and 'section link-backs' which is about 80% successful, see Grimsby Online

An 'anchor' reference and especially one linking back to the 'Top of the Page' at intervals can sometimes be helpful.

'Previous' and 'Next' links to the previous or next page should only be used where appropriate. The reader may want to follow a 'route' of their own.

A 'contents' or 'index' page of all the relevant associated pages can sometimes be helpful if not shown on the 'home' (first) page. ('Home' pages which link to an 'index' page which link to a 'first' page are bloody irritating!). I am not convinced that a site 'map' or exhaustive index is always helpful. If the site is small, the reader will soon find everything. If it's more than a few pages the reader may not be interested in everything. Travelling without a map is sometimes more fun.

If you do have an index or site-map then consider the many different ways in which this might be presented. It could be alphabetical, 'logical' or 'structured' (like the chapters and sections in a book, a 'tree-structure' or a library classification), 'departmental', chronological (from 'archive' to 'what's new'), geographical (by region, town or county and from Land's End to John O'Groats or Acapulco to Zanzibar), numerical (simply numbered pages), or something else. Your reader may prefer more than one of these. This indexed structure may or may not reflect the way in which the files are stored on the web-server. Only one storage 'method' is required but many different 'structures' can be offered by appropriate classification, listing and linking. Again, see Tim Berners-Lee on this issue.

Also seeThe World Wide Web Consortium Pages on this topic and, if dedicated, the discussion at A.Secret Location

Now that we're hopelessly lost, it must be time for some Education, or, if in doubt, brew up.


This section expands on the trivial discussion at 'Educational' . An educational institution's 'corporate' web-site is likely to be even more tedious than the big corporations'. If there has to be a picture of the 'principal' then why not pictures of all the staff or department heads and the most important people locally, the 'secretary' and 'caretaker'? One reason why not might be any perceived 'danger' where this information (the identity of personnel) is publically accessible as it will be if on web-pages open to the internet.

Although a school or college 'brochure' or prospectus can be placed on the web at low cost, it is more useful if more detailed information (eg. of courses, results, planning, events etc.) can be put there to supplement printed material and take advantage of low storage cost, round the clock accessibility and easy updating.

However, it is the curricular use of the web which has the greatest potential. Students can readily 'publish' their work to a wider audience (of parents, employers, friends, and internationally whilst having regard for the 'dangers' of public access as indicated above). Some primary school sites have more to offer than many secondary or college sites and getting the 'customers' to produce the organisation's web-pages produces much more interesting results, an educational experience and can be very cost effective! For a good example of a special school's work see Ganton Special School in E.Yorks,. and for more local examples of the good, bad and indifferent see Education Links


This section is just a brief list of some useful links to HTML resources.
W3C on Colour Standards
Other W3C Recommendations
W3C HTML Validation service


Why have standards? What does this term suggest to you? 'Standard' can mean consistent, interchangeable or compatible, all the same, achieving a certain quality, or 'basic'. It can also be applied to many aspects of an 'Educational Website'. You may aspire to educational standards, writing standards, design standards, moral standards, 'house standards', or technical standards - in any of the above senses.

The technical standards (of consistency, cross-platform compatibility) which underlie the Net (for example, the various communications protocols, the universality of HTML), enable a tremendous openness and flexibility in content and presentation and both HTML and Hypertext itself give an empowering control to the reader. It is very difficult to understand why anyone would want to throw this away on web-pages which force a rigid style on the reader or require the latest version of Netscape or Internet Explorer (or any other Microsoft product) 'only'.

To ensure compatibility with any platform or software, it is helpful to build pages in HTML which conforms to an independent standard. It would be a pity if the early 'anyone can do it' simplicity of HTML were lost in the present push of publishing and technical professionals to create an exceedingly complex and sophisticated mark-up language or one which can only be handled satisfactorily by very expensive editing software. Let's hope that earlier HTML standards will not entirely be superseded by later versions and that simpler versions will continue to exist, be supported and remain compatible with later developments. The products you choose to use or buy may have some bearing on this.

Currently, HTML can conform to different standards by using a different 'DTD' (Document Type Declaration) header at the start of the page - see the HTML3.2 DTD header at the top of the source code for this page. Details of some possibilities can be found on the World Wide Web Consortium's pages and at The Kinder, Gentler Validator which has a catalogue of DTD's at KGV's public identifier catalog.

For other views on open standards and compatibility see EFF Blue Ribbon
The Blue Ribbon Online Free Speech Campaign!
and Convergence International - Wintel antidote!

Finally, before insisting on rigid standard house styles or site consistency, ask yourself if you would recommend a 'standard' book, or put everyone in grey uniform.


Maintaining a site of more than just a few pages can be much more difficult than creating it in the first place. This is especially so if you decide to provide numerous external links to other internet resources. I know, and it's painful! A hopelessly out of date web-site can be an embarassment. However, there are a number of ways to reduce the problem:


Any Browser Campaign
Electronic Frontier Foundation
Online Privacy Resource Page
Tim Berners-Lee on Style
Adobe PageMill
Claris HomePage
World Wide Web Consortium
W3C on Colour Standards
Other W3C Recommendations
HTML3.2 Standard
HTML4 Standard
W3C HTML Validator
Beginner's Guide to URL's
HTML and Web Design Guide

Home and Contents Page
: Home : About : Trevor : 'Educational' : Mission : Developing EdWebs :
: Useful Links : Education Links : The Universe : Our Sponsors : Make a Million