A First Page

• Begin with a simple text-book on HTML or web-page authoring, or an online HTML Tutorial. (Anything on HTML or web-authoring by Laura Lemay for detailed reference; or 'HTML in easy steps' by Andy Holyer ISBN 1-874029-46-6 at £7.50 from Computer Step of Warwickshire Tel:01926-817999 for a simple but excellent and comprehensive introduction and quick reference in just 150 pages.)
• Save interesting pages you see, including some simple ones consisting mainly of text without columns or complicated layouts and view their html source code.
• Copy and paste or edit the html source from a simple page as a text only file to create your own first pages.
• Don't begin with a 'wysiwyg' web-authoring tool - it is helpful to get a feel for how HTML works by 'raw-coding' it at first.
• When you do move on to an html editor, try Adobe PageMill or Claris HomePage - both available for Mac or PC. Don't rely on the dubious automated HTML output from a word-processor, DTP or Spreadsheet program.
• More sophisticated page layouts are often created by 'hidden' tables. You can make the structure visible on such pages by changing the "border" attribute of the table (example below) from "0" to "1". (View the source; find the border attribute in the TABLE tag and replace the "0" with a "1". Save the file, then view it in the browser.)

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>

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

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

'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

• Use as few images as possible on a single page (html file).
• Keep the physical size (measured horizontally and vertically in pixels) on the page small.
• Keep the resolution appropriately low (typically 72 dpi for screen display).
• Reduce the number of colours at least below 256 and as low as gives a satisfactory result. (Although a jpeg file may have to be saved in 'millions' of colours, the actual reduction to fewer different colours is not 'over-ridden' by such a save requirement).
• Use a small 'thumbnail' image to link to a full-size version so that users only download the larger file if they wish.
• Never inflict a large image (say over 40K) on the reader without warning.
• Use these and image-editing compression techniques to keep all file and total page sizes as low as possible. (A recommended maximum of 40-60K including all images is still not a bad idea).
• Remember that some browsers may have image loading turned off and you should always provide a text alternative.
• Check what your page looks like in a typical browser (or two!) with images turned off.
• Ask if each and every image (or multimedia feature) is really necessary and if it enhances the meaning of the page.

NAVIGATION

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.

EDUCATION

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

MORE HTML

STANDARDS

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.

• From which: "the following public identifiers are most likely to be widely recognized:

      "-//IETF//DTD HTML 2.0//EN"                         for HTML 2.0
      "-//IETF//DTD HTML 3.0//EN"                         for HTML 3.0
      "-//W3C//DTD HTML 3.2//EN"                          for HTML 3.2
      "-//Netscape Comm. Corp.//DTD HTML//EN"             for Netscape
      "-//Microsoft//DTD Internet Explorer 2.0 HTML//EN"  for MSIE
  

  Note that the string must appear exactly as shown, including case."

  For the current HTML4.0 standard see HTML 4.0

For other views on open standards and compatibility see
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.

SITE MAINTENANCE

• Limit the number of external links and concentrate on the local (which can't easily be found elsewhere) and truly useful or relevant.
• Try to create pages which have a timeless quality and limit those which must be updated frequently (eg. News, diaries and events require constant updating, but an event calendar might stand for a year and be easily adaptable the next.)
• Set aside a particular time each week (as a minimum) to review and update pages.
• Divide the task between as many people as possible whilst maintaining some central control, perhaps by working to style or other standards.
• Keep the content as varied as possible so there's something for everyone. Both these points imply encouraging student participation rather than having everything done by the local 'webmaster'!

MORE RESOURCES