Be careful when saving from Notepad that you don't save in the Unicode format. This is an encoded format and you won't be able to see your files with a browser.
Copyright ©1996, Que Corporation. All rights reserved. No part of this book may be used or reproduced in any form or by any means, or stored in a database or retrieval system without prior written permission of the publisher except in the case of brief quotations embodied in critical articles and reviews. Making copies of any part of this book for any purpose other than your own personal use is a violation of United States copyright laws. For information, address Que Corporation, 201 West 103rd Street, Indianapolis, IN 46290 or at support@mcp.com.Notice: This material is excerpted from Running A Perfect Web Site with Apache, ISBN: 0-7897-0745-4. The electronic version of this material has not been through the final proof reading stage that the book goes through before being published in printed form. Some errors may exist here that are corrected before the book is published. This material is provided "as is" without any warranty of any kind.
It's easy to write an HTML document. After all, the main document is nothing but ASCII text, most of which is the plain-language text that you're trying to communicate on the page. The tricky part is getting the proper tags in the right place to make your text and images look like you want them to. Browser programs are very literal in the way that they interpret HTML, so errors in your HTML syntax make your page look very unusual. You need to take extra care to ensure that your page comes out looking like you planned.
Because HTML documents are all ASCII code, originally Web documents were written with simple text editors, such as the Windows Notepad. As people began writing longer and more complex documents, many turned to their favorite word processing programs (which can save documents in plain ASCII text) and wrote macros and tools to help them.
As the Web expanded, dedicated HTML editing programs (similar to word processing programs, but designed to produce results for the screen and not the printed page) began to appear. These programs allow Web page creators to more quickly format their text into proper HTML format by allowing authors to have codes placed automatically around text at the click of a toolbar button. Stand-alone HTML editors have since evolved into very advanced HTML authoring systems that provide end-to-end support for the Web page creation process.
In addition to editors and authoring systems, special filters and utilities that convert existing documents to HTML format have cropped up. These applications save authors an immense amount of time; they take information formatted for other programs and mark it up with HTML to produce the same formatting on a Web page.
As you can see, there are many ways you can write your HTML documents; you can use your favorite line editor, a word processor, or a dedicated HTML tool. The choice of which system to use depends on personal preference and your confidence in your use of HTML.
This chapter looks at five types of applications that are useful in developing HTML documents:
vi a very simple text editor that's comparable to the Windows NotePad editor. It has no HTML-specific codes or hotkeys or anything special; it is simply a fast, lightweight, easy-to-use text editor. vi is installed on every UNIX operating system by default.
Emacs, on the other hand, is a much more full-featured, and therefore heavyweight, beast. It is not standard with all operating systems, so you might have to install it on your machine. You can obtain it from the GNU archives at ftp://prep.ai.mit.edu/pub/gnu/.
Emacs has a full LISP interpreter embedded in the application. One particular LISP module, known as HTML-helper-mode, has been proven to be very very helpful in creating and managing HTML. It has the following features:
More information about HTML-helper-mode can be found at http://www.santafe.edu/~nelson/tools/.
This simplicity can be extremely useful. Many veteran HTML authors rely on a simple plain-text editor as they tweak specific points on any given page. Plain-text editors have the advantage of taking up less memory, which allows experienced authors to open multiple Web browser programs simultaneously to see how their page looks in each format. (Although a code for something to be bold is read by Internet Explorer, Mosaic, and Netscape as bold, the way bolded text appears may vary slightly with each browser.)
The major annoyance with plain-text editors is that HTML codes are not treated as complete units. You have to edit each keystroke in the HTML code, whereas many editor programs treat the code as an entire entity. In a plain-text editor, getting rid of the tag pair <B> and </B> around text requires deleting each keystroke. Some of the dedicated editors recognize the combination and eliminate the whole tag (and even delete its companion tag on the other side of the text).
Nevertheless, you will probably need to use a simple editor some time; become familiar with at least one, even if it's not what you usually use to compose your HTML files. You will undoubtedly use one someday to quickly edit your HTML.
The big drawback, of course, is that you have to open an MS-DOS window to get to the Editor. If you're not adverse to this, you can open up a window and type edit at the DOS prompt to fire up the Editor.
Like the MS-DOS Editor, Notepad saves files in ASCII format. It also provides menu options to cut, copy, paste, and find text, but it does not have a find-and-replace feature.
Be careful when saving from Notepad that you don't save in the Unicode format. This is an encoded format and you won't be able to see your files with a browser.
Notepad proves most useful if you just need to make a quick tweak on a document that's already mostly edited. You may be able to open the HTML document in Notepad and make the minor adjustment without having to go through the hassle of opening your word processor and activating the proper template.
If you use Notepad to edit HTML, activate the WordWrap option under the Edit menu. Otherwise, your HTML code can run off the edge of the window and you'll have to scroll to see parts of it.
WordPad offers full editing support through menu options to cut, copy, paste, and find and replace. When saving a document in WordPad, you have a choice of several formats. Be sure to choose the Text Document option.
You'll need to turn word wrapping on in WordPad as well when you work with plain text documents. You can do this by selecting Options under the View menu. The word wrap radio buttons are on the Text tab of the Options dialog box.
No plain text editor will check the syntax of your HTML for you. If you do most of your HTML authoring in a plain text editor, it's a good idea to check the HTML syntax in your documents before putting them on your server. See the "Analyzers" section at the end of this chapter for programs that will check HTML syntax.
For whatever reason, be it the strong use of Styles or an easy, powerful macro language, Microsoft's Word seems to be the word processor of choice for those writing HTML editing tools; the vast majority of these types of tools are written expressly for Word for Macintosh or Windows. The first two discussed in this section are simple shareware templates that add helpful toolbars and HTML-specific pull-down menu options to those already available in Word. Quarterdeck's WebAuthor 2.0 is a commercial package that not only provides assistance for HTML authoring, but for syntax checking as well. And, naturally, Microsoft has an offering to enhance Word: Microsoft Internet Assistant turns Word into a fully functional Web browser, in addition to adding support for HTML editing.
The information in this section is based on CU_HTML.DOT, version 1.5.3. You can acquire the template and its related files by directing your browser to http://www.cuhk.hk/csc/cu_html/cu_html.htm. This document provides information on the current release of CU_HTML and provides a link to the file cu_html.zip, which is the file you want to download.
CU_HTML comes with installation instructions in an HTML format. Use your browser to open the file cu_html.htm. If your browser isn't working, just open the Word document CU_HTML.DOC. After you install CU_HTML's files, you can select the CU_HTML template when you open a new document in Word.
If you choose this template, several new styles equivalent to HTML tags are loaded. From the Style option of the Format menu, you can apply formatting to produce the six heading levels, addresses, preformatted text, ordered and unordered lists, and horizontal rule. You can apply bold, italic, and underline styles using Word's usual formatting toolbar. When you instruct CU_HTML to write your final HTML document, it will convert these formats into the appropriate HTML tags.
There's also an extra pull-down menu, called HTML, and a new toolbar (see fig. 10.1). The HTML menu provides you with some options for tagging text, mostly for linking text in the document to other files (such as graphics or other hypertext links). Buttons on the toolbar replicate the choices found under the HTML menu, giving you quick access to these functions.
If you don't see the CU_HTML toolbar, place your mouse pointer over any toolbar button, right-click the mouse, and select HTML from the list you see to activate the toolbar.
Fig. 10.1 - Loading the CU_HTML template gives you an HTML pull-down menu and extra toolbar to assist you in your editing.
After you open a new document, you should save it. CU_HTML requires that you save a copy of the file before formatting text, placing graphics, and writing the final HTML file.
Once you've entered text, you can use the options under the HTML menu to format links to other files. You can link to a graphics file with the Insert Gif option, or another locally stored HTML file with Insert Link. You can create a link to another section of your Web document with Insert Local Link, or link to another document on the Web with Insert URL. The Delete Link option lets you remove any type of link you've inserted.
Like most of the templates for Word, CU_HTML creates files in Word format. You must be sure to save the completed document in HTML format before you try to use it on the Web. To do this using CU_HTML, open the HTML menu and choose Write HTML. This instructs CU_HTML to create an ASCII file in which all Word formatting codes are converted to HTML. The file will have the same name as your Word document, but it will end with the extension .htm.
The following section is based on GT_HTML, version 6.0d. You can download GT_HTML by pointing your browser to http://www.gatech.edu/word_html/. Look for the download link to the file gt_html.zip.
Installation of GT_HTML is simple; just copy the template file gt_html.dot into your templates subdirectory for Word. If you activate the template when you open a new document in Word, you have the ability to add the two new toolbars shown in figure 10.2. To activate the toolbars, open the View menu and choose Toolbars. In the Toolbars dialog box, select the Toolbar 1 (Gt_html) and Toolbar 2 (Gt_html) check boxes.
Fig. 10.2 - When you install GT_HTML, you have the option of turning on two toolbars to help you edit HTML.
In addition to the two toolbars, GT_HTML adds HTML-related options to most of Word's pull-down menus. The new options appear at the bottom of each pull-down menu and start with the word HTML. Since GT_HTML doesn't load a lot of styles into Word like CU_HTML does, most of your special formatting will be done using the new menu options.
One of the more helpful menu options is the HTML Browser option under the File menu. Selecting this option opens the browser you want to work with GT_HTML. Having quick access to a browser while you edit makes it easier to test your documents as you develop them.
Another helpful menu option is the HTML Toolbox under the Tools menu. You can quickly insert tags for rules, titles, comments, centering and blinking text, and line breaks using selections from the Toolbox. The Toolbox also gives you a way to launch GT_HTML's handy HTML Form Creator and HTML Table Converter. The Forms Creator launches a second dialog box in which you can configure your form input fields, while the Table Converter will convert a simple Word table (no cell in the table spans more than one row or one column) to HTML format. Toolbox items are shown in figure 10.3.
See "Creating Forms," (ch. 12) to learn about the HTML tags used to create forms.
Fig. 10.3 - GT_HTML's Pick a Tag Type dialog box makes it easy to insert many types of HTML tags.
The Format menu includes options for formatting highlighted text as a heading, preformatted text, or a numbered or bulleted list. To apply bold, italics, and underline styles, you can use Word's normal formatting toolbar. GT_HTML converts these formats to HTML tags when it saves the HTML version of your document.
The information in this section is based on the trialware version of WebAuthor 2.0. You can download the self-extracting archive containing the trialware files from Quarterdeck's Web site at http://www.qdeck.com/. You may evaluate the trialware version of WebAuthor 2.0 for 30 days, after which time the features that convert and save files to HTML will disable. If you choose to purchase the full WebAuthor package after the evaluation period, you will also get WebImage, a useful image editor and converter, and the Quarterdeck Mosaic browser. For current pricing information, consult Quarterdeck's Web site or contact its sales department at (800) 354-3222.
Windows 95 and NT users should note that the current release of WebAuthor only works with Word 6.0 (a 16-bit application). Quarterdeck anticipates releasing a 32-bit version of WebAuthor 2.0 in early 1996. Consult the Quarterdeck Web site at http://www.qdeck.com/ for the status of this release.
Fig. 10.4 - Installing WebAuthor 2.0 adds an HTML Authoring option to the Word Tools menu.
WebAuthor places gif images in your Windows document by converting the images to the Windows BMP format. When you access WebAuthor through the Tools menu, it checks to see if this converter has been installed. If you get a warning message telling you that your gif graphics converter has not been installed, you'll need to run your Word Setup program to install it. The filter you want to install is the CompuServe gif filter.
You activate WebAuthor's capabilities by selecting this new menu option. When you do, you're presented with a dialog box that gives you four options on how to proceed (see fig. 10.5). You can Create a New HTML Document if you have yet to write any or you can Open/Import Existing Documents for Editing. Additionally, you can choose to Convert Existing Documents to HTML or Set/Change Options for Document Conversion to HTML.
Fig. 10.5 - WebAuthor gives you four different options when you activate it from the Word Tools menu.
Fig. 10.6 - When starting a new document, you can set any document head option in the Document Parameters (Advanced) dialog box.
Once you specify a title and other document head information, you'll see a screen like the one shown in figure 10.7. Note that WebAuthor adds an extra toolbar to your Word window. Buttons on this toolbar let you create new documents (Word and HTML), open files (with or without converting), save files (in Word and HTML formats), toggle to the Edit view where you can make changes to your document, format characters and lists, or activate one of WebAuthor's special function managers. The three buttons on the end of the toolbar, labeled Char, Para, and Form toggle additional toolbars on and off. Figure 10.7 shows the new toolbar with the additional three turned on.
Fig. 10.7 - WebAuthor gives you an extra toolbar that you can use to activate as many as three other toolbars.
The document view you see in figure 10.7 is called the Edit view. While in this view, you can make additions or changes to your document. The Toggle Document View button in the main WebAuthor toolbar switches you to a near-WYSIWYG view that gives you a sense of how your document might look on a browser screen. You can't make edits while you're in the near-WYSIWYG view, so be sure to toggle back to the Edit view to make changes.
After you load a document, you may find that WebAuthor has placed a blank toolbar in your toolbar area. If so, find the Hide Blank Toolbar button at the left edge of the empty space and click it to recapture the space for your editing window.
Fig. 10.8 - You can load existing Word, HTML, or Rich Text Format documents with WebAuthor.
If you choose to set conversion options, you'll activate the Options File Editor. Selections under the Options menu in this program let you specify conversion parameters for logical and heading styles (Styles), physical styles (Direct Formatting), document head information (Document Information), hyperlinks (File Links), and tables (Tables). The Options File Editor with the File Links dialog box active is shown in figure 10.9.
Fig. 10.9 - The Options File Editor utility program lets you specify how WebAuthor should perform conversions to HTML from Word or RTF formats.
WebAuthor also gives you three different managers to assist you with placement of more complicated items. The Anchor Manager lets you specify an internal or external anchor to which a hypertext link can point. The Image Manager dialog box, shown in figure 10.10, prompts you for a gif or JPEG file, the size of the image, how it should be aligned, and what alternative text should be used if the image is unavailable. The Form Manager walks you through a set of dialog boxes in which you indicate what input fields should be used to build the form, as well as the URL of the processing script and how the form data should be sent to the script. Each of WebAuthor's special managers is accessible by a button on the main WebAuthor toolbar.
Fig. 10.10 - WebAuthor's Image Manager prompts you for the basic information needed to place an inline image into your document.
The List button on the main WebAuthor toolbar lets you create any one of the five types of HTML lists. The Insert Symbol buttons gives you a dialog box full of special characters, such as copyright and trademark symbols and characters with diacritical marks.
The information in this section is based on beta release 4 of Internet Assistant version 2.0z. This beta was written to work with Word 7.0 in Windows 95 or with Word 6.0 in Windows NT. For the latest release and links to the downloadable file, direct your browser to http://www.microsoft.com/msoffice/freestuf/msword/download/ia/default.htm. Microsoft will also ship a copy on floppy disk to registered owners of Word for a shipping and handling charge of $5. Call (800) 426-9400.
After downloading the file, the installation of Internet Assistant is fairly easy. If you have installed a Microsoft program yourself, this process should be familiar. During the installation, you are given the option to make Internet Assistant your default HTML browser. If you choose to do this, the Internet Assistant add-on will be placed in your Word Startup directory. This causes Internet Assistant's functionality to be loaded each time you start Word.
Be sure to close all open Windows applications, especially Word, before you install Internet Assistant. This minimizes the risk of crashing your computer.
Fig. 10.11 - The Switch to Web Browse View button activates the Web browser features included as part of Internet Assistant.
Fig. 12.5 - The Word Web browser supports most popular browser features for navigation and bookmarking.
In the figure, both the Standard and Formatting toolbars are open. Keep in mind that you can customize these toolbars, like all of the toolbars in Word. You can add buttons and rearrange their order; your toolbars may look different, therefore, than those shown in figure 10.13.
Fig. 10.13 - Starting a new document with Internet Assistant's HTML template modifies Word's Standard and Formatting toolbars.
As you type in the text of your Web page, you can mark it for specific text effects, such as bold or italic, using the standard Word tools. Word automatically translates those effects into HTML tags. You can also format text in HTML modes, such as Strong or Preformatted, by using the styles available under the HTML template. You can select a style using the Styles tool in the formatting toolbar, or you can open the Format menu and choose either Style or Style Gallery.
Internet Assistant also provides a way to place special codes such as diacritical marks, copyright and trademark symbols, or other special punctuation. To access these special characters, open the Insert menu and choose the Symbol option. A dialog box with listings of special characters appears. Double-clicking a specific character places it in the text where the I-beam cursor is located.
Fig. 10.14 - Internet Assistant's Insert HTML Markup dialog box lets you enter unsupported HTML tags.
To learn about the tags used to produce HTML forms, see "Creating Forms," (ch. 14).
Fig. 10.15 - Internet Assistant provides extensive support for creating HTML forms.
If you've created forms in Microsoft Access, you may recognize the look of some of these form tools. The Forms tool palette gives you point-and-click access to creating checkboxes, pull-down list boxes, radio buttons, and text boxes. This palette also provides standard Submit and Reset buttons. When you place a field in the form area, additional dialog boxes open to help you create the necessary choices for a pull-down list box or other controls to help make the form work.
The following information on Netscape Navigator Gold is based on the first public beta release of the software. When the final version of the software is released, a license will cost $79.00. For the most recent information on Navigator Gold, visit Netscape's Web site at http://home.netscape.com/.
Fig. 10.16 - A sample document loaded into the Navigator Gold browser.
Fig. 10.17 - The same sample document loaded into the Navigator Gold editor.
The middle toolbar handles common file and editing operations. It also provides buttons to open a new browser window, print the edited document, search for a specific text string, and access the Netscape Web Page Starter - a new feature on Netscape's Web site with links to several HTML authoring resources.
Items on the bottom toolbar are for the purpose of formatting text. A pull-down menu lists several styles you can apply to highlighted text. Other buttons let you format ordered and unordered lists, increase or decrease indent levels, and specify left, right, and center alignments.
Depending on your screen width, Navigator Gold's toolbar buttons may be arranged differently from how you see them in figure 10.17.
Along with the toolbars in the editor window, you also pick up two new menus in your menu bar. The Insert menu lets you place new links, images, rules, line breaks, and non-breaking spaces into your document. Many of these options call up a dialog box in which you can specify the different attributes of the item you're placing. Figure 10.18 shows the dialog box for inserting an image. Note how the information you're asked for in the dialog box directly corresponds to the different attributes of the <IMG ...> tag.
Fig. 10.18 - When inserting a new image into a Navigator Gold document, you can specify the attributes of the image in this dialog box.
The other new menu is the Properties menu. The different options under Properties let you review and change properties at the font, character, list, paragraph, and document levels.
Perhaps the most curious thing about the Navigator Gold editor is that there is no sign of any HTML tags. You don't see them on-screen and there are no menu options or toolbar buttons that explicitly refer to them. As you read about other HTML editors, you'll see that many of them make explicit mention of tags. Because they do this, the people who use them have to know at least some HTML. With Navigator Gold, you could theoretically not know a single HTML tag and still be able to author a Web document! The upshot of this is that Navigator Gold will make Web publishing accessible to a much larger group of people. Whether this is beneficial or not remains to be seen.
This review of HoTMetaL 2.0 is based on HoTMetaL FREE 2.0, which you can download by visiting http://www.sq.com/products/hotmetal/hm_ftp.htm. The features discussed here are also available in the PRO version, along with the added functionality noted above.
Fig. 10.19 - HoTMetaL's standard document template is in proper HTML form and encourages you to title your document immediately.
The completeness of HoTMetaL's default template points to one of the program's strengths: it forces you to use good HTML. HoTMetaL's Rules Checking feature makes it almost impossible to insert an inappropriate tag into your document. When Rules Checking is on, the tag insert features of HoTMetaL are context-sensitive and you are limited to inserting only those tags that are legal at the current cursor position. For example, if you were inside the <DL> and </DL> tags, you could only insert <DT> and </DT> tags or <DD> and </DD> tags. HoTMetaL prevents you from inserting other tags by graying them out or by just not presenting them.
Rules Checking can be annoying if you're a seasoned pro who has developed a particular authoring style. You can turn Rules Checking off or on by pressing Ctrl+K.
In addition to Rules Checking, HoTMetaL also comes with an SGML validator that tests your document for conformance to the rules of proper HTML. These features make HoTMetaL a great choice for the HTML beginner since they encourage good authoring habits right from the start.
The Common HTML Toolbar is below the Standard Toolbar and lets you quickly tag markup text with heading styles, frequently used logical styles (Emphasis, Strong, Block Quote, Address), and list tags. Buttons toward the end of the toolbar are not style-related and let you place images, horizontal rules, line breaks, and hyperlinks.
At the bottom, you'll find the Other Toolbar. The Other Toolbar is something of a concession on HoTMetaL's part because it allows for the use of the extensions to standard HTML. This becomes significant when you consider that earlier versions of HoTMetaL refused to recognize these tags and wouldn't even open documents that contained them! The HTML extensions are accessible on a pull-down menu that you see when clicking and holding on the HTML Extensions button. Other such pull-down menus give you quick access to tags for the document head, computer-related logical styles (Code, Keyboard, Variable, Sample), compact list tags, and form tags. You can also mark up text with physical styles using buttons in the Other Toolbar. Pressing the Special Characters button produces the floating palette you see in figure 10.20. This palette is handy when coding multilingual pages as it lets you place special characters by pointing to and clicking on them, rather than having to remember the escape sequence of the character. To close the special characters palette, just double-click the button in the upper left-hand corner of the palette.
You can suppress the display of any of the HoTMetaL toolbars by choosing the Toolbars option under the View menu.
Fig. 10.20 - The floating Special Characters palette makes placing foreign language characters as easy as pointing and clicking.
Fig. 10.21 - Unlike its predecessors, HoTMetaL 2.0 lets you load documents with non-standard HTML tags.
As you edit the document, you'll notice that HoTMetaL treats tag pairs as a single unit. If you delete one tag in the pair, its companion tag and all of the text between them is deleted as well. This is helpful in that it saves you some keystrokes and provides an almost iron-clad guarantee that there will be no stray tags floating around in your document.
When you delete a tag pair, you also delete all text that appears between the two tags. Make sure you cut and paste this text to another position in your document if you don't want to lose it.
When it's time to insert a tag, choose the Insert Element option under the Markup menu. You can then choose the tag you want to insert from the dialog box that appears. Remember that if Rules Checking is on, you'll be restricted to inserting only those tags that are legal at that point in the document.
Fig. 10.22 - HoTMetaL's publish feature allows you to quickly convert the local URLs in your documents to URLs appropriate for a Web server.
The information about HTMLEd Pro presented here is based on the demo copy of version 1.1. You can download the most recent version from Internet Software Technologies by visiting http://www.ist.ca/htmledpro/index.html. If you choose to buy HTMLEd Pro, the license will set you back US$99.95 plus US$10 for shipping and handling.
You can also choose to create a new document with a custom template of your own design. Just select the New with Document Template option under the File menu.
Fig. 10.23 - Starting a new document in HTMLEd Pro activates the program's speedbars and menu options.
When all speedbars are displayed, the topmost one is the Standard Speedbar. Buttons on this speedbar handle the most frequently used options like file and editing operations, paragraph and line breaks, horizontal rules, placing images, setting up hyperlinks, formatting unordered and definition lists, centering text, and applying bold and italics styles.
Just below the Standards Speedbar is the Common Tags Speedbar. Here you'll find many of the tags you use most, like heading styles, list and table tags, and tags for creating comments. The closing tags of many popular tag pairs are also available.
The first of the three speedbars at the bottom of the window is the Extended Characters speedbar. Placing any of the characters in this speedbar is as easy as clicking its button. This relieves you from having to remember or look up the escape sequences to produce these characters.
The other two speedbars along the bottom are the Special Characters speedbars. The two are essentially identical with the upper bar supporting the lowercase versions of characters in the lower bar. If you're editing other-than-English language HTML, you'll want to have these two speedbars active.
The speedbar on the right-hand side of the screen is the Custom Speedbar. Each button in this bar is custom designed by you. To place a button on the bar, right-click your mouse while it is pointing to an empty spot on the bar and choose New Button. Once you've placed the button, you can right-click again and choose Modify to get the Edit Custom dialog box, highlight the button you wish to edit, and then select the Edit button as shown in figure 10.24. Custom buttons are great for tag combinations, such as bold and italics, that would otherwise require the application of two or more separate styles.
Fig. 10.24 - You can customize buttons on HTMLEd Pro's Custom speedbar.
Most of the text formatting styles are found under the Font or Style menus. Specifically, the Font menu lets you apply any of the physical text styles and gives you access to the <FONT ...> and <BASEFONT ...> tags. The Style menu is home to the heading styles and the logical text styles.
Under the Element menu, you'll find options to activate HTMLEd Pro's Table Designer and Form Designer. The Table Designer makes it easy to set up a simple table of any number of rows or columns and to place headers and data in each of the table's cells. The Form Designer, shown in figure 10.25, is particularly nice because it lets you drag-and-drop form elements around on a blank worksheet. Click OK when you're done to place the appropriate HTML in your document.
Fig. 10.25 - HTMLEd Pro's Form Designer lets you drag-and-drop form elements on a blank page.
If you or a friend needs to get a home page up quickly, the HTML Page Builder under the Options menu is probably the way to go. The Page Builder "interviews" you over a series of several dialog boxes and composes a home page based on your responses. One of the Page Builder's dialog boxes appears in figure 10.26.
Fig. 10.26 - The HTMLEd Pro HTML Page Builder "interviews" you and creates a personal home page based on your responses.
You can further customize the editing environment by defining your own Quick Keys under the Quick Keys tab of the Preferences dialog box located under the Options menu. Rather than typing the same text in over and over, you can store frequently repeated text under one of the Quick Keys and save your fingers the extra effort.
You can also save a document without HTML tags. This option is useful when you've downloaded an HTML file and just want the plain-text content of the document. By saving the document without the HTML tags, you automatically strip out the HTML, leaving just a text file.
The following information on HotDog Pro is based on the fully functional demo that you can find bundled with the WebQuest software. You can also download it from Sausage Software's Web site at http://www.sausage.com/. You have 30 days to review the demo. After that, you can pay US$99.95 to license HotDog Pro or let the demo expire. If you choose to pay for a license, Sausage Software will send you a registration number by e-mail, saving you shipping and handling charges.
Fig. 10.27 - When you start HotDog Pro, the standard document template loads automatically.
You can reduce the amount of space the Button Bar takes up by changing them to "text only" buttons. This is done on the Display tab of the Options dialog box. You can shut off the Button Bar, as well as any other toolbar or informational bar, under the View menu.
Fig. 10.28 - You can remove buttons from the Button Bar or add your own custom buttons.
Immediately below the Button Bar is the Elements Bar. This toolbar has significantly smaller buttons than the Button Bar, but it provides you with single-click access to a large number of program options. Buttons on the Elements bar let you do common file and editing operations, apply physical or heading styles, align text after an image, create a list, insert a paragraph or line break, or place a horizontal rule very quickly.
The first informational bar is immediately below the horizontal scrollbar in figure 10.27. This bar is called the Documents Bar. A different tab, much like the tabs you see at the bottom of an Excel workspace to denote the different spreadsheets in the space, shows up on the bar for each document you have open. HotDog Pro lets you save multiple files together in what's called a project. Opening or saving a project opens or save each file contained in the project. This is a handy feature because the sites you develop are not likely to be comprised of just one page. You'll author many pages in creating a site and HotDog Pro's project capability is a great way to keep track of them all. The Project Manager, accessible under the File menu, lets you perform different tests on documents in a project and prints a report for you when the tests are complete.
Directly below the Documents Bar is the Status Bar. The Status Bar lets you know what the program is doing at any point and provides time and date information as well.
Once you're editing, HotDog Pro supplies you with lots of helpful editing tools. The Tags and Entity palettes are shown in figure 10.29. You can select and insert just about any piece of HTML markup you'll ever need from these two palettes. If a palette with the complete list of HTML tags is too much to scroll through, you can use options under the Tags menu to call up smaller versions of the palette that have similar tags grouped together. For example, the Graphics palette contains the <IMG ...> and <fig ...> tags, along with standard and extended attributes for each. The Entity palette is useful when you have a lot of special characters in your document.
You can activate the Tags or Entity palettes quickly by pressing the F6 or F7 keys, respectively.
Fig. 10.29 - The Tags and Entity palettes list all HTML tags and entities.
Options under the Insert menu use easy-to-follow dialog boxes to guide you through the insertion of complicated tags and tag sequences. The Insert List dialog box is shown in figure 10.30. Notice the options to create unordered, ordered, definition, and plain lists, as well as fields for entering a heading, specifying the bullet character, and making the list compact. Other options under the Insert menu let you insert embedded program items and marquees (a Microsoft Internet Explorer extension to HTML).
Fig. 10.30 - Dialog boxes accessible from the Insert menu guide you through the placement of complex HTML tags.
If you find you're performing a certain operation frequently and there is no shortcut key for that operation, you can define your own shortcut key in the Shortcut Keys dialog box (choose Tools, Shortcut Keys).
If you define a shortcut key that HotDog Pro assigns to another operation at startup, your definition will override the startup definition. However, the shortcut key will continue to appear next to the operation to which it was originally assigned.
After you make these checks on your document, you'll want to look at them in a browser to see how they appear on-screen. If you don't want to open a separate browser program to do this, you can try HotDog Pro's Real-time Output ViewER (ROVER) to test your document. Figure 10.31 shows the HotDog Pro editing window with a ROVER window open below it. The ROVER window provides a near-WYSIWYG display of how your document will look.
Fig. 10.31 - HotDog Pro's Real-time Output ViewER (ROVER) supports a near-WYSIWYG display of your document's online appearance.
This section on WebEdit is based on the shareware version of WebEdit 1.4b, which is included on the CD-ROM or which can be downloaded from Nesbitt Software's Web site. The URL is http://www.nesbitt.com/. You have 30 days to use the software. After that, the commercial license is US$79.95 and the educational license is US$39.95. When you pay for the license, Nesbitt Software will send you a registration number by e-mail, saving you shipping and handling charges. Some of the advanced features are disabled in the demo version and are only available in the "unlocked" version.
The 16-bit version of WebEdit can only handle file sizes of 64K or less. Windows 95 and Windows NT users will be pleased to know that a 32-bit version of WebEdit is scheduled for release on April 1, 1996. The 32-bit version will be able to handle files of any size.
Fig. 10.32 - The Plus (+) button on the WebEdit toolbar automatically places document structure tags into a blank file.
If this is your first time creating a page, WebEdit includes a Home Page Wizard. The Home Page Wizard allows you to create a simple home page with colored or textured backgrounds, inline images, a paragraph of text, links to other sites and pages, and contact information. Figure 10.33 shows one of the Home Page Wizard's dialog boxes.
Fig. 10.33 - WebEdit's Home Page Wizard authors a custom home page for you based on information it collects through a series of dialog boxes.
Buttons on the lower toolbar are for more HTML specific functions. You've already seen how the Plus button works to place document structure tags into a document. The corresponding Minus ([ms]) button removes all HTML tags from a highlighted portion of the file. Following the Plus and Minus buttons are ten buttons that give you access to practically any HTML tag you might need. Clicking any of the first nine of these buttons produces a drop-down list with the tags available under that button. Figure 10.34 shows the tags available under the List and Misc Tags button. Other buttons play host to document structure, block style, logical style, physical style, heading style, form, table, and math tags.
Fig. 10.34 - Clicking the List and Misc Tags button lets you select the tag you want from a drop-down list.
WebEdit has floating toolbars corresponding to each of the drop-down boxes. However, these toolbars are locked until you enter your registration code, so don't try to activate them until after you have entered your code.
The remaining buttons on the lower toolbar allow you to define custom tags, gain access to special characters sets, and place hyperlinks, images, and figures into your documents. The two buttons on the end each provide a different way to look at the documents you have under development. The View Document with Browser button fires up whatever browser you've selected to work with WebEdit and the Quick Preview button activates WebEdit's Quick Preview feature (see fig. 10.35). Quick Preview splits the screen in half and allows you to see the HTML source code on the left-hand side and what the document might look like on a browser on the right-hand side.
WebEdit's Quick Preview feature can only handle HTML tags up through those in the HTML 2.0 specification, even though the program provides full support for HTML tags from the HTML 3.0 and Netscape and Microsoft extensions to HTML.
Fig. 10.35 - WebEdit's Quick Preview gives you a quasi-WYSIWYG display of your documents.
Fig. 10.36 - The WebEdit Table Builder allows you to create a table right in the dialog box.
If you're putting imagemaps on your pages, you can use WebEdit's Map Builder to define the hot regions and their associated URLs. To activate the Map Builder, click the Use Mapping check box you see in the Image dialog box and then click the Map Builder button. The Map Builder supports both server-side and client-side imagemaps.
If you like to use color in your Web pages, you probably know the frustration of having to find out the Red/Green/Blue (RGB) codes for the color and then having to convert those numbers to hexadecimal (base 16) so you can specify the color in your HTML code. Using the Hexadecimal Color Value option under the Insert menu, you can choose the color you want from a either a pre-configured or custom color palette. Once you choose the color and click on OK, WebEdit converts the decimal RGB values to hexadecimal and places the hexadecimal triplet for the color right into your document.
The spellcheck feature is locked until you purchase your license and enter your registration code.
Once your documents are spellchecked, you can save them individually (Save) or all at once (Save All). The Export option under the File menu lets you export the files in either UNIX or Macintosh formats, making cross-platform development much easier.
The programs you've read about so far can only assist you with the HTML authoring component of your job as a site administrator. However, some forward-thinking companies are releasing software to assist you with all aspects of site administration, including document authoring and management, script authoring, and controlling access to the server. The next two sections point out the highlights of two such software packages: Netscape's LiveWire Pro and Microsoft's FrontPage.
You have already read about Navigator Gold 2.0 and how it can support you in creating Web pages. The LiveWire Site Manager gives you a graphical depiction of your site and lets you restructure the site using drag-and-drop operations. A page that is dragged and dropped to a new location will automatically have all links pointing to it reassigned to its new URL. The Site Manager also checks the validity of external links, supplies several Web page templates and page creation wizards, converts documents prepared in other programs (like Microsoft Word or Novell WordPerfect) to HTML form, and converts many types of images to a Web-compatible format.
The LiveWire Server Extensions are meant to plug in to the Netscape Application Programming Interface (NSAPI) and become an integral part of the server's operations. Server Extensions let you interpret and run scripts, install, remove and update applications created in LiveWire, and make local or remote additions and updates to pages.
Using Java is sometimes overkill in the case of small programs that perform relatively simple tasks. Netscape's Java-based scripting language gives programmers an easy-to-learn way of creating scripts to take care of these tasks. Scripts written in the Netscape scripting language can run on both the Netscape Navigator and Netscape server software. You can even compile the code to produce executable versions of your scripts.
The LiveWire Server Front Panel gives you a Web-like interface to operations of your server. The Front Panel lets you install, remove, and update applications running on your Netscape server. It also monitors these applications and provides you with an almost-real-time display of performance information.
If you're building a database into your site, you'll want to make use of LiveWire's easy connectivity to many popular Structured Query Language (SQL) databases, including those from Oracle, Informix, Sybase, and Microsoft. You can also use LiveWire to create the applications that allow users to query, browse, or update these databases.
The beta release of LiveWire Pro is due out during the second quarter of 1996 - right around the time this book is being published. For the most up-to-date information on LiveWire's specifications and pricing, consult Netscape's Web site at http://home.netscape.com/.
The server side of FrontPage is called Server Extensions. Server Extensions are CGI-based applications that are compatible with Netscape and Microsoft Web server software.
The FrontPage Explorer gives you several ways to look at your entire site. The Outline View presents documents in a hierarchical format, much like the way files are presented in File Manager (Windows 3.1 or 3.11) or in Windows Explorer (Windows 95). You can expand an element of the hierarchy to see the documents below it or collapse an element to see a more compressed view. The Link View shows how the pages of your site link to one another and the Summary View gives you a sortable list of the pages on the site and their properties. Additionally, FrontPage Explorer lets you restructure the site by dragging and dropping documents. Any link changes required after dragging and dropping are done automatically. FrontPage Explorer also validates internal and external links, gives you access to FrontPage's many templates and wizards, lets you control access to pages on your site, and makes it simple to port your site to another server.
The FrontPage Editor supports you in HTML authoring tasks. The Editor lets you easily create basic HTML constructs like headings and lists, as well as more complicated constructs like forms. You can convert images that aren't in gif or JPEG format using the Editor's image conversion facility. The Editor also converts RTF and text files to HTML format. You can even create imagemaps (clickable images) right in the Editor.
FrontPage's templates and wizards guide you in creating individual Web pages or your entire Web site. Web templates include a Normal Web, Personal Web, Project Web, and Customer Support Web. The Corporate Presence Web and Discussion Web Wizards walk you through the creation of a site according to your specifications in wizard dialog boxes. FrontPage has ready-made templates for many types of pages commonly found on a site including Frequently Asked Questions (FAQ), Feedback, Guest Book, Press Release, Table of Contents, and What's New pages. The Personal Home Page and Forms Page Wizards let you custom-design a personal page and online forms.
FrontPage WebBots handle common Web site functions without you having to program them. You can use WebBots to implement searches, feedback forms, threaded discussion groups, user registration, and tables of contents.
So that you can get a server up and running right away, FrontPage also includes an NCSA-based Personal Web Server that fully supports HTTP and CGI standards.
For the latest price information on Microsoft FrontPage, consult Microsoft's Web site at http://www.microsoft.com/.
Web site administrators with higher-end site management needs should keep their eyes open for Microsoft's Internet Studio. Internet Studio was originally designed only for use with the Microsoft Network, but Microsoft decided in February 1996 to forego the MSN-only version and develop its first release based on Internet standards. Keep watching Microsoft's Web site for information on Internet Studio pricing and release date.
HTML filters are attractive if you want a utility to convert your document with tags to HTML as you continue to work in your favorite editor. Filters tend to be fast and easy to work with, because they take a file name as input and generate an HTML output file.
The World Wide Web Consortium maintains a good list of HTML filters and converters. Check it out at http://www.w3.org/hypertext/WWW/Tools/Filters.html.
You can find many other Word filters by visiting http://www.w3.org/hypertext/WWW/Tools/Word_proc_filters.html.
A link to download WPTOHTML can be found at http://www.w3.org/hypertext/WWW/Tools/Word_proc_filters.html.
If the documents you need to convert were created in WordPerfect 6.1, you can use Novell's Internet Publisher to do the conversion.
Internet Publisher is available free-of-charge from Novell at http://wp.novell.com/elecpub/intpub.htm.
To learn more about FrameMaker 5, consult the Adobe site http://www.frame.com/PRODUCTS/fm5.html.
The DOS binary file for RTFTOHTML can be downloaded from http://www.georgetown.edu/acc/software/rtftohtm.zip. Note the name is abbreviated because of DOS's eight-character limit on file names.
Because many word processors handle RTF formats, you can import an RTF document into your favorite word processor, and then run one of the word processor specific filters. However, RTFTOHTML seems to be faster at performing this conversion.
TEX2RTF is available in a 32-bit version for Windows NT by anonymous FTP at ftp://ftp.aiai.ed.ac.uk/pub/packages/text2rtf/tex2rtf1.52_win32.zip.
The freeware version of PM2HTML is available by anonymous FTP at ftp://ftp.gate.net/pub/users/edco/. This is a busy site, so it may take you a while to access it.
The World Wide Web Consortium's list of filters reports that Adobe has released an HTML authoring plug-in for PageMaker 6.0, but a search of Adobe's Web and FTP sites yielded no information about this add-on.
You can learn more about XL2HTML.XLS at http://www710.gsfc.nasa.gov/704/dgd/xl2html.html. XTML lives under Ken Sayward's directory at http://users.aol.com/ksayward/xtml/.
Lotus has online information about Lotus InterNotes Web Publisher at http://www.lotus.com/inotes/. You can get information on how to order TILE at http://tile.net/info/about.html.
Cyberleaf 2.0 for Windows NT is due for release in early 1996. For the latest information, consult Interleaf's Web site at http://www.ileaf.com/ip.html.
Several HTML analyzers exist to help you avoid these problems. These handy utility programs are often Web-based and using them is a matter of pointing your browser to the appropriate page and letting the utility know the URL of the document to analyze. Others live on your hard drive and process the HTML files right on your machine.
Make sure Access Control is not enabled or Web-based HTML checkers will not have access to your files.
The command hierarchy analysis also indents nested tags, making them easier to read. The hierarchy test is best used in combination with one or more of the other tests.
To check your documents with Doctor HTML, direct your browser to http://imageware.com/RxHTML.cgi. The form-based interface lets you specify which tests you want done and the URL of the document to test.
You can open the HTML Check Toolkit at http://www.webtechs.com/html-val-svc/.
WWWeblint supports elements proposed in HTML 3.0, including table and math tags. You can ask WWWeblint to check a URL or you can supply a chunk of code for it to test.
You can clean the lint off your documents by checking out http://www.unipress.com/weblint/.
HTML_ANALYZER actually does three tests. It validates the availability of the documents pointed to by hyperlinks (called validation). It looks for hyperlink contents that occur in the database but are not, themselves, hyperlinks (called completeness). And it looks for a one-to-one relation between hyperlinks and the contents of the hyperlink (called consistency). Any deviations are listed for the user.
You can download the compressed archive that contains the HTML_ANALYZER files from http://www.gatech.edu/pitkow/html_analyzer/README.html.
Because new HTML authoring tools become available all the time, you should check one of the following Web sites for the most up-to-date information. The World Wide Web Consortium maintains a list of HTML editing tools at http://www.w3.org/hypertext/WWW/Tools/. You can read Mag's Big List of HTML Editors by pointing your browser to http://union.ncsa.uiuc.edu/HyperNews/get/www/html/editors.html. And of course, Yahoo provides an extensive list of editing tools at http://www.yahoo.com/
Computers_and_Internet/Internet/World_Wide_Web/HTML_Editors.
Many Web servers, like the WebQuest server included on the CD-ROM with this book, will validate local and remote hyperlinks. Refer to your server's documentation for how to perform the check.
