Introduction to GUI HTML Editors
You can create Web pages using a graphical user interface (GUI) HTML editor, also called a What You See Is What You Get (WYSIWYG) editor. These editors allow Web authors to create Web pages without typing the requisite HTML code. Many WYSIWYG editors exist, such as Adobe Dreamweaver, Microsoft Expression Web and the open-source KompoZer
In this lesson, you will use KompoZer as your GUI editor. KompoZer complies with W3C
Web standards, creates pages as HTML 4.01 Transitional and uses CSS styles. However, you can change KompoZer settings and choose to develop Web pages using Strict or Transitional DTDs and as HTML 4.01 or XHTML 1.0. KompoZer also includes a built-in
HTML validator, which you can use to upload your pages to the W3C Markup Validation
Service (http://validator.w3.org) and check for compliance.
KompoZer is used for Web page creation, not Web site management. This fact greatly simplifies the program because it focuses on the creation of one page at a time, which is similar to the way you approached HTML and XHTML coding in previous lessons. When the pages are created, you can then join them using hyperlinks.
To learn about site management concepts and tools, it is recommended that you pursue the CIW Web Design Specialist course.
Types of GUI Editors
As mentioned, there are two types of GUI editors. Both are WYSIWYG programs:
1. Page editors - GUI page editors allow you to create a Web page using your mouse and a toolbar.
Functionality is usually limited to creating individual Web pages. Software program that provide only page editor functionality include:
Virtual Mechanics WebDwarf (www.virtualmechanics.com/products/dwarf).
2. Site management editors - GUI Web site management editors provide both Web page creation and site management functionality. They allow teams of designers and developers to work in an integrated environment to design, build and manage Web site and Internet applications. In addition to creating the Web pages, team members can manage the entire Web site with this type of application, both during and after development. Site management includes task automation and workflow integration with other programs (such as Microsoft Office and Web applications) in a production environment.
Software programs that provide these functions include:
Microsoft Expression Web.
Adobe Dreamweaver is similar to Microsoft Expression Web, but
Dreamweaver offers more advanced features such as
layer-to-table conversion of
GUI HTML Editor Functionality
GUI HTML editors allow you to create Web pages. In most cases, you enter and edit text similar to the way you would in a word-processing application. Images, tables, links, bookmarks and so forth can be created easily because the application writes the HTML code automatically.
The following features are offered by most GUI editors:
1. Templates and Wizards — allow you to create custom Web pages quickly by selecting from a series of choices.
2. Text Style options — allow you to format text in different font styles, alter text size and color, and apply formats such as centering, boldface and italics. Remember that some visitors to your site may not have all the fonts installed on their systems that you want to use on your Web pages. Choose your fonts carefully, or else your page
may not render as expected to some visitors.
3. Icon bars — offer easily identifiable graphic icons to provide the same functions
found in text-based menus.
4. Image features — allow you to easily insert graphic images into a Web page.
5. Hypertext Links features — allow you to create hypertext links to pages and files
within your Web site, and to pages and files on the World Wide Web. Once the link
has been created, the editor displays the target page.
6. Import HTML Pages features — allow you to open pages from the World Wide Web and, when permissible, save them to a Web site or local file system. The editor can also import all images on a page into a Web site or file system.
7. Table Creation features — allow you to add tables to arrange data or organize a
8. Spelling check — Most GUI editors provide an automatic spelling checker, similar to
those found in word-processing applications such as Microsoft Word and OpenOffice
(www.openoffice.org). However, understand that a mere spelling check cannot ensure that your Web pages project the proper message. Your page content should be edited by a knowledgeable professional who understands your organization's message and the languages your site uses.
9. Publish Documents features — allow you to click a button to post pages to a Web server. These features automatically copy files from a local hard drive to a directory on an ISP's server.
W3C Authoring Tool Accessibility Guidelines
The W3C Authoring Tool Accessibility Guidelines Recommendation outlines seven points that help determine the suitability of a GUI editor for developers with disabilities. All
seven points focus on the following issues:
1. The ability of the GUI editor to generate proper code
2. The usability of the GUI editor by a disabled person creating a Web page
The seven points each contain checkpoints (i.e., subpoints). Each checkpoint offers specific examples of usability techniques that the GUI editor must support. You can read the W3C Authoring Tool Accessibility Guidelines Recommendation at
As you design your Web pages, make sure that you consider the following points:
1. Some users may be unable to use a mouse to navigate between links. Make sure that your pages allow users to tab to new links.
2. You may need to provide larger text on your Web pages for visually impaired users.
HTML Text Editors vs. GUI Editors
The following sections describe some of the advantages and disadvantages of text editors
and GUI editors. The type of editor you choose depends on your personal preferences and
your specific Web project needs.
In most cases, you will use both types of HTML/XHTML editors. You can create the majority of your Web site quickly with a GUI editor, then use a text editor (most GUI editors include one) to enter scripts for advanced functionality.
HTML text editors:
Text editors such as Notepad, WordPad, Vi and Emacs present the following advantages
for Web page authors:
you must learn to write code manually. If you want to add forms to your Web pages, it
is also helpful to be proficient in HTML or XHTML.
2. If you know HTML or XHTML code, you can maximize the benefit of GUI HTML editors by manually modifying code, independently from the editor.
3. You can learn the fundamentals of HTML/XHTML and update your pages to the
Now consider the following drawbacks of using text editors to create Web pages:
1. Typing code can be time-consuming, especially if you must learn the latest changes
to code standards from the W3C.
2. People with disabilities may find manual entry too time-consuming and/or too difficult.
3. A text editor may require too much attention if you need only a simple page.
GUI HTML editors:
GUI HTML editors such as KompoZer, Sea Monkey Composer, Dreamweaver and
Expression Web present the following advantages for Web page authors:
1. GUI editors place code into files for you, which enables you to create pages quickly by
simply clicking your mouse.
2. Most GUI editors allow you to modify your code manually.
Now consider the following drawbacks of using GUI editors to create Web pages:
1. Some GUI editors will alter or ignore any code you enter manually. For instance, you
can manually add a paragraph tag <p/>, but the GUI editor may not recognize it.
This situation can be frustrating if you want to format a Web page your own way.
2. Many GUI editors have not kept pace with the evolution of HTML and XHTML, and thus do not provide options for using some of the recently developed tags. You must upgrade your GUI editor if you want to begin using a later version of HTML or
XHTML; thus, your code may not reflect the latest (and possibly most useful) standards.
GUI editors often simply fail to load and edit code that contains newer tags. Be careful when making changes to your pages. Make backup copies of your
pages first, then test each change in the GUI editor to make sure it understands the new code.
Previewing Pages and Validating Code
You have seen in the previous labs that it is necessary to preview your pages when using
a GUI editor, despite the WYSIWYG development environment. Most GUI editors make it quite easy to:
1. Preview pages in a browser.
2. View source code.
3. Validate code using built-in validators or a site such as http://validator.w3.org.
Many GUI editors allow you to choose the browser you use for previewing. By not limiting
you to any single browser, the GUI editor helps you to test your pages in multiple browsers, or to focus your development on your favorite or company standard browser.
Validating HTML code
When validating code created by a GUI editor, consider the following points:
1. Most GUI editors include their own native validation tools or offer menus that provide access to validators. For example, KompoZer provides the Validate HTML option,
which you will use in the next lab.
2. Some GUI editors have special features that help ensure accessibility in regard to validation.
Web Site Publishing
The final step in Web site development is publishing your site to the World Wide Web.
You can publish your site in several ways, depending on the tools used to create it. Most
GUI HTML editors provide a Publish feature that allows you to easily post your Web page
files to your designated Web host. You can also use a File Transfer Protocol (FTP)
client, such as Ipswitch WS_FTP Professional (www.ipswitch.com) or FTPx Corporation's
FTP Explorer (www.ftpx.com).
FTP is the protocol most often used to transfer files between two computers, or a server
and a computer, depending on the configuration. Transferring files over the Internet requires an FTP client to send the files and a destination FTP server to receive them. FTP can also be used to transfer files to an HTTP server, provided that the HTTP server is also running FTP. However, before you can transfer your Web site files, you must decide where your site will be hosted.
Publishing to a test Web server
Professional Web developers post the final version of the Web site files to a test Web server before moving them to the production server for the following reasons:
1. To verify that the Web server can process any CGI and database access requests.
2. To locate and repair any dead links.
3. To allow members of the development team and other stakeholders to preview the
site. You will find that many changes are needed before your "final" code is ready for
Test server configuration:
Your test server must be as nearly identical to the production server as possible. The test server should have:
1. The same operating system version — If your production server is a Linux system
or Windows Server 2008, for example, then your production system should be the
2. The same type and version of Web server software — Even if your test system uses a software type or version very similar to the production system, this test system is not adequate. For example, if your production Web server uses Apache Server 2.2.11 and your test server is using Apache Server 2.0.63, then your testing
server will not provide a true test of your site.
3. The same CGI interpreter software — If your production server uses PHP 5.2.9,
then your test server should use PHP version 5.2.9.
Test servers are often called staging servers.
Publishing with KompoZer
If you want to publish files directly from KompoZer, you simply select File | Publish, then
enter the appropriate information. Earlier in this course, you learned about the information required for publishing a Web site. Figure 10-9 shows example information that you might enter in the Settings tab of the Publish Page dialog box in KompoZer, such as authentication information and the name of the Web server to which you are sending the files.
In addition to the destination server's name (or IP address) and authentication information, you must also specify the location on the remote server that you want your files placed. In Figure 10-10, the résumé file is named default.html and will be placed in the /html/resume_files/ directory on the remote Web server.