Lesson 10:
GUI HTML Editors

Copyright © 2004 ProsoftTraining, All Rights Reserved.

Lesson 10 Objectives
• Identify types of GUI editors that automatically create
HTML and XHTML code
• Identify specific features of GUI editors
• Create a Web page using a GUI editor
• Compare HTML text editors with GUI editors
• Preview and validate code for pages created with a GUI editor • Identify requirements for publishing a Web site to a
Web server

Introduction to GUI HTML Editors
• Graphical user interface (GUI) HTML editor • Automatically generates HTML (or
XHTML) code
• Developer inputs content as in a standard word processor
• Also known as WYSIWYG (What You See
Is What You Get) editors

Types of GUI Editors
• Page editors
– Simpler
– For smaller sites or non-collaborative work
• KompoZer
• Mozilla SeaMonkey Composer
• Site management editors
– Tools to manage pages and sites
– Integrates with related applications
– Designers and developers can collaborate to design, build and manage Web site and Internet applications
• Adobe Dreamweaver
• Adobe GoLive
• Microsoft Expression Web

GUI HTML Editor Functionality
• Features of GUI editors:
– Templates and wizards
– Text style options
– Icon bars
– Images
– Hypertext links
– HTML importing
– Table creation
– Spelling check
– Publishing

W3C Authoring Tool
Accessibility Guidelines
• The guidelines mandate:
– The ability of the GUI editor to generate proper code
– The usability of the GUI editor by a disabled person creating a Web page

• Seven specific points

Creating Web Pages with a GUI Editor
• Coursebook labs use the toolbar, menus and functions of a GUI Web page editor
• KompoZer

Text Editors vs.
GUI HTML Editors
• HTML text editors (e.g., Notepad, WordPad, Vi, Emacs)
– Easily include other code (e.g., JavaScript)
– Readily modify code
– Apply your HTML/XHTML knowledge and skills

• Drawbacks:
– Typing code is time-consuming
– People with disabilities may find manual entry difficult or impossible – Requires a higher degree of effort to create even a simple page Text Editors vs.
GUI HTML Editors (cont’d)
• GUI HTML editors
– Quick code creation
– Facilitate collaboration
– Spelling checker
– Automatic publishing

• Drawbacks:
– Rarely keep pace with the evolution of
HTML/XHTML standards
– Code you enter manually may be ignored

Previewing Pages and Validating Code
• Most GUI editors make it easy to:
– Preview pages in a