Step 3: WYSIWYG Editors

WYSIWYG means "What You See Is What You Get". WYSIWYG web-page editors are similar to word processors and they allow you to construct a web page without using HTML instructions. You simply type in your text, add pictures, etc, using familiar toolbars and menus. The editor makes the HTML code in the background.

Dreamweaver screenshotSome well-known WYSIWYG web-page editors:

The screenshot on the right is from Dreamweaver. Using the tools provided, you can add text, images and other elements directly onto the page.

These editors have obvious advantages such as speed and ease of use. However, there is a trade-off: They are not 100% reliable. If you examine the HTML code, you are likely to find mistakes and unwanted extra code. They also tend to be deceptive - you may think you're producing a fantastic page but find that it looks very different once you publish it. Remember that these editors usually use an approximation of how the page will look. To see your page as it really is you need to view it in a browser.

For these (and other) reasons, some professional web designers refuse to use WYSIWYG editors. Instead, they use simple text editors and compose all the HTML manually. However, it's becoming more common to use a mixture of both methods. A good WYSIWYG editor will give you the option to edit the HTML code manually. At the bottom of the Dreamweaver screenshot there is a panel which shows the HTML code for the page being worked on. As you edit the page in WYSIWYG mode, the HTML automatically updates. Likewise, you can edit the HTML code and the WYSIWYG view will be updated.


Finding the right software isn't easy. If possible you should try a number of different options - most good editors have free trial versions available. Here's what we think about a few leading contenders:

Move on to Step 4: Hosting

Subscribe to us on YouTube