Writing a Web Site:

 

What Tools do you Need?

 

The basic tools you need to write a Web site are:

You can include sound and video clips, or multimedia presentations, that are available ready-made. If you want to create your own, of course, you also need suitable software for that. The first part of this course includes creating sound files, which will be used by students in their Web sites.

The easiest way to create a presentation is to use MicroSoft PowerPoint and save the presentation as HTML. (To do that, you need to have installed PowerPoint via a "custom installation" and specify that you want the "Save as HTML" component. If you have a standard Office97 installation, it doesn't include that option. The only way to add it is to re-install all Office97 from the original CD.)

The HTML Editor

You can use several different types of editor:

A plain-text editor.

Since an HTML page is pure text with no control characters, you can write one with any plain (ASCII) text editor, even Notepad.

 
An HTML editor
 
One step above that is to use a special HTML text editor. It will have buttons for common commands, such as text formatting (boldface, italics, etc.), adding hypertext links to other pages, adding images, and making lists, tables and forms, and even framed areas. You still see the page content as a mixture of text and tags, and can display it either in your browser or in a built-in page display window that comes with some of the HTML editors.

Some HTML editors are: HomeSite, HotDog, HotMetal Pro, HTMLed and Flex. There are lots more out there.

HTML editors save a lot of time but you still have to know HTML. A button marked "Definition list" isn't much good if you don't know what a definition list is. And there are always corrections and "fine tuning" to be done. No editor has buttons for all of them, sometimes not even commands to do exactly what you want; and it's sometimes much faster to make a small correction by changing the tag directly.

 
A WYSIWYG HTML editor
 
These work like a modern word processor: you type as you would in a word processor, your text is displayed as it ought to look in the browser, and the HTML commands are inserted automatically.

Examples of WYSIWYG editors: PageMill, HomePage, and FrontPage Express. Perhaps the easiest is to write the page in MS Word and save it as HTML, but Word suffers from the limitations of most WYSIWYG editors creating HTML (see below).

Until very recently, WYSIWYG editors did a very bad job of creating HTML and no serious professional Web writer would recommend one even to beginners. They produced non-standard and/or "spaghetti" code which made the site very difficult to maintain. However, in April 1998 Microsoft released FrontPage Express (version 2 of FrontPage) and is distributing it free together with Internet Explorer version 4. This version of FrontPage has several advantages over every other WYSIWYG editor I've seen:

  • It produces relatively clean, almost-standard HTML code. Even if you change your mind about the text formatting several times.
  • It comes with a (very basic, Notepad-like) text editor, so you can fine-tune the HTML code.
  • Unlike the previous version of FrontPage, it doesn't remove or edit your changes to the HTML code: you can actually put in commands that Netscape needs and MS Internet Explorer doesn't, and they will stay in the file.
  • You can't beat the price!

For these reasons, this course will use FrontPage Express v.2 as the main HTML editor.

I still prefer, and recommend to serious Web authors, a good text HTML editor. But for beginners, and people who only need to write a few pages for their school, university department, or company, FrontPage Express is now the easiest tool to use.

Because many people using these tutorials will decide for themselves which editor is best for them, I decided not to teach "how to write a Website using FrontPage Express" (even though that's what we will be doing) but to teach standard HTML together with a series of separate pages on the tools we'll be using in the course.

The Graphics Editor

You need to be able to create buttons and logos, edit ones you may be able to copy from the Web or clip-art collections, and adapt photos and other pictures for your Web site. Therefore, even if you have never been able to draw and never will, you need basic graphics skills.

The two most common programs for Web graphics work are:

In this course we will be using PaintShop Pro.

An Image-Map Editor

If you've surfed the Web much, you're familiar with clickable images that send you to a different page depending on where you click. The image is just a regular graphic, the secret is the HTML code associated with it. Of course you can write that code yourself, but it's much easier to have a program that does it for you.

Some of the better HTML editors have this function built-in, but FrontPage Express doesn't. A separate image mapper costs around $20 or $30. Examples:

We'll be using MapEdit or CoffeeCup Image Mapper. They work very much the same and it doesn't much matter which you use.

 

An FTP Program

To upload your Web site from your PC to a WWW server, you need permission to write to the Web server, and a program that will do it. Even if you have the permission, your Web browser will only let you download files to your PC, not upload them from it. For that you need a full FTP program that works in both directions and also lets you make changes on the Web server (create directories, rename files, etc.)

This course uses WS-FTP, but all FTP programs are very similar and any one will do the job.

 

Back to course entry page

Written by J. Koren for Unesco
©1998