Your Website - Growers' Tips
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:
- Begin with a simple text-book on HTML or web-page authoring, or an online HTML Tutorial.
- 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 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).
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 'BODY' can contain any text, tables, any number of headings or images etc. Headings come in six levels from:
<H1> (Largest) </H1> to
<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.
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.
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'.
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'. 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.
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:
- 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.
Home and Contents Page
: Home :
Developing EdWebs :
Useful Links :
Education Links :
The Universe :
Our Sponsors :
Make a Million