Tools for the Job

Writing Tools

To create your web pages you need some sort of editor program to produce the Hyper-Text Mark-up Language (HTML) code. There are dozens available, but we're looking for the low-cost options.

Editor	For	Against
Amaya Kompozer Serif WebPlus 6	What you see is what you get (WYSIWYG). Roughly. You edit directly onto the page, just like using a word-processor. Needs little knowledge of HTML. Amaya and Kompozer are free open-source programs, Serif's is a free (but complete) 'taster' for their latest commercial version 9.	Some effects are difficult or impossible to achieve. They may produce bulky code which takes longer to download.
Arachnophilia 4 1st Page 2000 Stone's Web Writer	Instant preview of your work. Menus ease many jobs. Error checking. Free download.	Need to know basics of HTML.
Notepad Notepad++	Notepad is included in Windows, Notepad++ is a free super-charged version. You're in TOTAL control (i.e. you're on your own) That's all, folks.	Need to fully know HTML. No error checking. No quick preview.

I started by drafting out pages with a WYSIWYG editor (Frontpage Express, once free from Microsoft) then, as knowledge increased, went on to tidying up and adding frills with a text-based HTML editor with quick browser preview and a few more specialist tools (Arachnophilia 4). Microsoft no longer distribute Frontpage Express, but Google will find a copy. The other WYSIWYG programs above are much more modern. Arachnophilia 4 has now been upgraded (currently at 5.3), but I still find the old version is easier to use in many ways. But there are many others available, so try a few and find one you like.

HTML is a very simple language to learn,and there are plenty of good tutorials on the 'net. You don't need a thick book – a 20-page print-out will cover the basics.

Your text is written out in plain English, with every block of text beginning with a "tag" saying whether it's a paragraph, a heading, a table, a list, whatever. When that block ends, you add a closing tag to say so. The tutorials on the links page reveal all.

You can check for typos and other coding mistakes with Tidy, a very useful utility built-in to some HTML editors, for example, 1st Page 2000.

WYSIWYG editors add the tags for you, you just pick the effects you want – font, size, bold, italic, etc, – from the menus.

A good tip when you're learning HTML is to use the "View Source" command on your browser to see how other authors have achieved various effects.

A word on fonts – you can write a web page in any font available on your computer, but viewers will only see it as you intended if they also have that font installed. So stick to the common ones. Everybody has Arial and Times Roman. The vast majority have Tahoma, Verdana and Comic Sans. Not so many have Lucida Console.

If you really want a fancy heading font, convert the words to a graphic and use that.

Adding Graphics

Two sources are ready-made clip-art and your own stuff, either done by the club artist, clipped out of magazines and comics, or from your photographs. The second source will need to be scanned. Here's a few tips:

Scan to produce a .tif or .bmp file bigger than you'll eventually need, do any re-touching needed before converting to a browser-friendly format.
For full-colour photos, use the jpeg format, for drawings and cartoons use gif.
See if you can make the background to your .gif cartoons transparent – it often looks better on the page.
Crop off all non-essential space round the edges – it makes the files smaller, so faster to download and photos will be more dynamic.
Work out how big you want the pictures on screen, then reduce your originals to that size – your browser could do the scale reduction, but the smaller files will download faster. (Don't try to enlarge using the browser – the quality will be terrible!)
Further compress the files using an Optimizer program - reasons as above.

The emphasis should be on making smaller, fast-loading files. Otherwise your viewers get bored waiting and move on.

And be selective – photographs are generally very slow to load. Why do you want a photo of the pub you meet in? Why the President? Go for close-up action shots showing your activities. Look in the magazine – which pictures have impact?

If a picture is worth a thousand words, make sure it's the right picture, the right words.

Good free graphics programs that can handle .gif transparency are thin on the ground. One way is to get everything ready then use an evaluation copy of Paint Shop Pro. For viewing, resizing, cropping and file conversion, Irfanview is free and well worth acquiring. Both programs are regularly on magazine cover cds or available at Shareware sites like Tucows.

Fancy Stuff

It's possible to spice up your web pages with various effects, gadgets and gizmos. The simplest is by using an animated gif graphics file, inserted in the same way as any other graphic. This contains a sequence of images like an animated cartoon.

Another favourite is the roll-over, where moving your mouse over a block of text or a picture does something. Try it on our lion here and the "back" buttons on this page.

Or you can pop up a little box to expand on highlighted text if clicked with the mouse.

These, and many of the other effects you see on web pages, are done with routines written in "Dynamic" HTML (DHTML), Javascript and other programming languages, and a wide range are freely available for you to copy into your own pages.

One tip is to encode your email address on the website with Javascript methods such as these, so spam merchants can't extract it with their automatic harvester spiders and send you a constant stream of junk mail.

Other effects can be achieved very simply with Cascading Style Sheets (CSS). Apart from making it possible to exactly specify the size of the body text and headings in your pages, set margins and line spacing (like using a style in your word-processor), you can jazz up your links like this: (If nothing happens, get a decent browser ;-)

A little knowledge of CSS also makes it much quicker and simpler to write pages. The same style sheet can be used on every page, giving a 'house style' to the site.

There are some invisible fancy effects worth using – preloading graphics and sound files on your home page means they are quickly available on the later pages that actually use them (working on the basis that people spend a minute or two there before moving in). Have a look at the Javascript routines in the Mexborough Lions home page code where we preload some images and music used on the "Area", "Youth" and "Social" pages.

One point to note - different browsers may show your pages in different ways – not all effects work exactly the same in Internet Explorer, Firefox and the others. Have a look at your work in at least the top two (IE and Firefox) to check for any serious problems.

Getting it up there

To transfer your web pages, graphic and sound files from your computer to your site on the host's server, where everybody else can view them, you need a program using the proper File Transfer Protocol. You can use some browsers (like Internet Explorer) but it's far easier with a proper FTP program.

A free one I'm using is WinSCP, giving a simple 2-pane view of local (hard-drive) and remote (webspace) folders and files. Files can be copied across just as in Windows Explorer. Another free one to look at is FileZilla.

So to make life easy, make a directory on your hard disk that is a duplicate of your web site, with all the web page files in it, together with any graphics and sound files you use on your pages. Use sub-directories for these if you're planning a big site.

One thing to remember is that if your starting or "Home" page has a file name like "index.htm" or "default.htm" (the actual name depends on your ISP) browsers will find and start it automatically. Otherwise, users will have to type in the full address and filename (like Abingdon Lions Club: http://www.users.waitrose.com/~johnprior/abingdon.htm – I get sore fingers just looking at it!)

Another point is that some hosts will only accept file names in lower case, so it's a good habit to get into. Most FTP programs have an option to automatically convert your file names to lower case before sending them, which cuts out accidental errors.

Back to Menu — Next Page