Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 10: GUI HTML Editors

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 browser – View source code – Validate code Validating HTML code – Specify the correct before validating; the GUI HTML editor may not do this – Many tools provide useful validation tools – Some editors provide tools for disabled users

Web Site Publishing GUI HTML editors usually provide a publishing feature FTP is the standard protocol for Web page publishing – Stand-alone FTP clients – FTP client provided by GUI HTML editor

Publishing to a Test Web Server Before publishing pages to a public site, post them to a test server – Often called a staging server – Verify that pages work and render as expected – Verify that CGI script works as expected – Locate and repair dead links – Allow stakeholders to preview the site Test server configuration – Test server must be identical to production server – Use the same Web server software and CGI solution

Web Site Publishing (cont'd) Example settings for publishing with KompoZer

Lesson 10 Summary 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