L2: Appendix A: Hints for creating web pages

Designing A Web Page

When designing your web page, it is important to consider how an external audience will view it. The page should be accessible and look professional, irrespective of the browser being used. Authors should view their pages using more than one browser on multiple platforms, and ensure that HTML complies with the university's accepted standard number.

When creating a web page there are a few basic rules to follow.

Use of ALT attribute of the IMG tag to impart any information that may be contained in the image. If the image is purely for decoration, use ALT='' so that it degrades gracefully in text only browsers.
Navigation buttons should have ALT text that denotes them as such. One way to do this is <IMG SRC + 'next.gif' ALT='[next]'>.
Provide text alternatives to the choices contained in image maps. This can be done with a series of text options at the end of the page.
Avoid the use of phrases like 'Click here', that may be dependent on external devises, and reference the actual page the user will be connecting to eg. The University Guidelines.

Layout and Formatting

When formatting documents that have large amounts of text, it is best to break the text up into multiple pages the equivalent of an A4 page, to avoid excessive scrolling. Large documents should be referenced by an index or contents page. As alternatives to large text documents, authors should consider providing a downloadable file of the document in either pdf format or as a Text file. When inline graphics are used in a document they should be in GIF or JPG format.

Background Images and Colours

There are two schools of thought regarding background images and colours. The first dismisses these as superfluous - background images consume bandwidth and provide no added value. The second sees the careful use of background colours and images as a device to add a distinctive style to a collection of HTML documents.

Regardless of which school you ascribe to, we recommend following these guidelines:

Backgrounds should not adversely impact readability.

Some background colour/image choices make the text harder to read. For example, a dark background with link text coloured blue is very difficult to read. Background images or colours should be exactly that: in the background. If a background colour other than the default grey is to be used, it should be white or another light but matt (or dull) colour.

Light text on a dark background is also a poor choice for readability and can cause problems when printing. It should also be noted that colours do not always appear the same across platforms. What appears as orange on the Macintosh can appear as bright red on a Windows PC. Colour calibration across platforms is non-existent. If coloured backgrounds must be used, it is best to check them in browsers on a variety of platforms - Macintosh, Windows and UNIX as well as for different colour table configurations (16 as well as 256 colours).

Background images should be especially small in size and designed to tile properly across the screen. Remember that the user cannot see any of the documents until the background image has loaded, and that wait may be lengthy using a modem. Background images should have a minimum of detail and be kept to under 2 kilobytes. JPEG images should not be used for backgrounds as they take too long to dither and display on each page.

Naming Files

When creating web pages, and new sections of a web site, the following rules should be adhered to:

filenames should always be lower case
filenames should not have spaces
filenames should always end with a full stop and the four letter extension 'html' eg. index.html
the homepage in a directory should always be called index.html
every directory should have at least one file in it called index.html
image files should always end with a full stop and a three letter extension eg. '.jpg or. gif'

Unless you intend to allow people to see all the files in the directory, filenames should be long enough to have meaning, but not so long as to be cumbersome. Name files with 6-10 characters followed by the '.html' extension.

Re-directing pages

If you modify or restructure your web site, you may end up with 'orphan' pages. These are pages that are not linked to by any other pages. If these pages have been in any way significant, it is possible that visitors to your web site may have bookmarked these pages. If you delete the page, the visitor will get an error.

Instead of deleting your orphan pages, replace their content with text indicating that the page has moved or is no longer active, and provide a hypertext link to a more appropriate page in your web site, or the Home page of your web site.

A Warning about Using Visual Editors

Some Visual Editors may alter the template and cause it to be displayed differently in some browsers.

There are various ways to create a web page. People who are orientated towards programming tend to learn the HTML code and create their web pages with text editors. People who don't want to know anything about HTML code prefer to use HTML Visual Page Editors that provide more of a 'What you see is what you get' style of interface.

If you prefer to use the latter you need to be aware of some constraints in the available software.

Many of the HTML Visual Editors try to force HTML code to be written the way the manufacturer of the editor believes it should be written. This can have unwanted effects on your web page.

In particular, when using the University Web Page Templates, some editors incorrectly append a Paragraph Break after images, which breaks up the appearance of the banners at the top of the page. Both Netscape Composer, and Claris Homepage are two such programs that incorrectly modify the web code.

The recommended program is the latest version of Dreamweaver (version 2.0) by Macromedia (www.macromedia.com). Dreamweaver works very nicely as a hand-in-glove solution with the text editor, Homesite, by Allaire (www.allaire.com ) or BBEdit.

We recommend the use of Visual Editors that do not alter HTML code.