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

2. 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

3. 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

4. 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

5. 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

6. 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

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

8. 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

9. 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

10. 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

11. 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

12. 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

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

14. 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