Copyright: This help file created   Thu Nov 27 11:28:01 1997. Copyright © 1997 SoftQuad Inc.
Citation: This information Copyright © 1997 SoftQuad Inc.


Introduction

Creating your first web page

Inserting links

Publishing your first site

Manipulating your text

Working with images

Working with tables

Converting word processor files

Editing HTML markup

Developing your Web site

Working with forms

Creating frames

Maintaining your Web site

Objects, applets, and scripts

Editing images

Using cascading style sheets

Visual Dynamic Keyboard

Using macros

Shortcut keys

Running a local Web server

Setting Editor display options

Open Market Digital Offers

 Accessing ODMA-compliant DMSs

Site template configuration

Glossary

Glossary


Introduction

Welcome to HoTMetaL PRO 4.0 Evaluation Version!

This brief introduction to HoTMetaL PRO includes the following topics:

•	System requirements.

•	Descriptions of the programs on the CD-ROM.

•	New features.

•	A description of the HoTMetaL PRO documentation and other information resources.

•	Internet service providers.

•	Accessibility.

The HoTMetaL PRO 4.0 Evaluation Version contains most of the functionality of HoTMetaL PRO 4.0. The following features are not present in HoTMetaL PRO 4.0 Evaluation Version:

•	Ulead PhotoImpact SE and Ulead GIF Animator, a suite of image editing programs.

•	HoTMetaL Power Tools: several programs that help with advanced Web design and management.

•	Visual Dynamic Keyboard: an on-screen keyboard that makes HoTMetaL PRO and other applications more accessible to users with mobility impairments.

•	The word-processor formats that you can convert to HTML are a subset of those supported in HoTMetaL PRO 4.0.

•	Batch conversion of word processor files into HTML.

•	British spell checking dictionaries: the Evaluation version contains only American spell checking dictionaries.

•	Site template wizard: create a new site from the Information Manager using site templates.

•	HoTMetaL effects: The Design-Time Controls and other effects available from the HoTMetaL FX Chooser are a subset of those shipped with HoTMetaL PRO 4.0.

•	Database Import wizard: import a database or spreadsheet into HoTMetaL PRO.

•	Document templates: the document templates available from the HoTMetaL PRO Editor New... command are a subset of those shipped with HoTMetaL PRO 4.0.

•	The decors, layouts, and content pages available from HoTMetaL PRO Site Maker are a subset of those shipped with HoTMetaL PRO 4.0.

•	Microsoft Internet Explorer 3.0.2: the previewing functionality of HoTMetaL PRO Site Maker will not be available unless you have this version (or a higher one) of Internet Explorer.

•	A printed User Guide (which includes tutorials) is shipped with HoTMetaL PRO 4.0.

  More on this topic


System requirements

HoTMetaL PRO runs under Windows 95 and Windows NT 4.0. Your system must have the following:

•	80486, 33MHz (Pentium recommended)

•	16 MB RAM

•	Super VGA display, 256 colors, 640 × 480 resolution

•	CD-ROM for installation


Contents of the CD

HoTMetaL PRO 4.0 includes a wide range of new and improved power features and tools that allow novices and experts alike to create and manage leading-edge Web sites. From the HoTMetaL PRO CD, you can install everything you need to create, view, and manage your Web site, including tools to create graphics and scripts.

  More on this topic


HoTMetaL PRO components

The Visual Dynamic Keyboard and Acadia Infuse ScriptBuilder, described in this section, are shipped with HoTMetaL PRO 4.0, but not with the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The HoTMetaL PRO installation program installs the following components.

HoTMetaL PRO Editor

HoTMetaL PRO contains an Editor for creating files that can be read by Web browsers (such as Netscape Navigator and Microsoft Internet Explorer) that are connected to the World Wide Web (WWW) or an intranet. The file format for such files is called HTML (Hypertext Markup Language). The main difference between the HoTMetaL PRO Editor and browsers such as Netscape Navigator is that HoTMetaL PRO is used to create and edit files, and browsers are used to retrieve, display, and read files. Any text editor can create an HTML file, but it's much easier in a graphical editor.

This latest version of the Editor offers three different authoring environments: for the novice, the intuitive WYSIWYG view makes it easy to create web sites without any HTML knowledge; for the intermediate user, the Tags On view shows the structure of the HTML markup, but still has authoring assistants to guide the way; and for power professionals, the HTML Source view is an advanced editor for editing code directly.

HoTMetaL PRO Information Manager

HoTMetaL PRO also contains an Information Manager component for managing collections of files and links between files. With the HoTMetaL PRO Information Manager, you can:

•	View the file and link structure of your site.

•	Move and rename files and automatically update links.

•	Add new files to your Web site or create whole new Web sites.

•	Copy your files quickly and easily to a different computer where they can be seen on the WWW (publishing).

•	Manage your files by keeping track of what you have put on the WWW so that you can replace out-of-date files quickly and easily.

See Publishing your first site for an introduction to the HoTMetaL PRO Information Manager.

HoTMetaL PRO Visual Dynamic Keyboard

The HoTMetaL PRO installation program includes the option to install the Visual Dynamic Keyboard (VDK). Developed in partnership with the Adaptive Technology Research Centre (ATRC) at the University of Toronto, the VDK is an on-screen keyboard alternative for users with mobility impairments. Users can choose commands, navigate dialog boxes, enter text, and emulate a mouse using alternative hardware and access methods instead of a keyboard and mouse.

Acadia Infuse ScriptBuilder

The HoTMetaL PRO installation program also includes the option to install Acadia Infuse ScriptBuilder, a JavaScript editor that enables you to develop JavaScript in a visual, drag-and-drop environment. Infuse ScriptBuilder uses visual trees to display JavaScript objects and other language elements, and includes an integrated script navigator. Install this program to create and edit JavaScripts from the HoTMetaL PRO Editor.

Technical support for Infuse ScriptBuilder is available from SoftQuad, or from support@acadians.com.


Ulead PhotoImpact SE

Ulead PhotoImpact SE and Ulead GIF Animator are shipped with HoTMetaL PRO 4.0, but not with the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

PhotoImpact SE is a special edition of PhotoImpact 3.0, a program designed for working with images in Windows 95 and Windows NT.

 PhotoImpact SE consists of four programs. The two main programs are PhotoImpact, for scanning, editing, enhancing, and adding special effects to your images; and Album, for cataloging, managing, browsing, converting and retrieving your files. Two additional utilities, PhotoImpact Explorer and Viewer, allow you to instantly view images in their folders or open them quickly in their own image windows. If PhotoImpact SE is installed, these utilities are available directly from the HoTMetaL PRO Editor Tools menu.

There are also separate installation programs available to add the PhotoImpact GIF Animator and PhotoImpact Web extensions.

The PhotoImpact GIF Animator is the default editor and viewer for animated GIFs. Use PhotoImpact SE to create the individual frames for your animation, then use the GIF Animator to organize, sort, and adjust the looping and speed.

The Web extensions include special Web image tools, including tools to help you create seamless background images. The Web extensions installation also adds Ulead SmartSavers—tools that allow you to optimize your images for the Web by optimizing color palettes, setting transparent colors, and controlling image compression and quality.

Technical support for using PhotoImpact SE with HoTMetaL PRO is available from SoftQuad, or directly from Ulead (see http://www.ulead.com/ or the PhotoImpact SE online help).


Internet Explorer

Microsoft Internet Explorer 3.0.2 is shipped with HoTMetaL PRO 4.0, but not with the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

To change and preview decor themes from the HoTMetaL Site Maker wizard, you will need Microsoft Internet Explorer 3.0.2 (or later). If you do not already have Internet Explorer installed, you can install it from the CD.


HoTMetaL PRO Power tools

The HoTMetaL Power tools are shipped with HoTMetaL PRO 4.0, but not with the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The HoTMetaL PRO CD also contains a collection of `Power Tools'—applications useful for creating Web sites, including special graphics tools and a personal Web server.

Note: Any Power Tool application on the HoTMetaL PRO CD can be installed at a later time, without reinstalling HoTMetaL PRO, but be sure to run the Configuration program as well. Double-click on the file `PTsetup.exe', from the main directory of the CD.

ZBServer Pro

ZBServer Pro Edition is an integrated Internet/intranet server package for PCs running Windows 95 and Windows NT.

ZBServer Pro offers Web, Gopher, FTP, and chat services in one powerful and easy-to-use software package. See http://www.zbserver.com for more information about ZBServer Pro and ZBServer Personal Edition software, including technical support. Limited technical support is also available from SoftQuad for configuring ZBServer with HoTMetaL PRO.

StarBase Versions 2.0

Install the 30-day demonstration copy of Versions 2.0, or register at www.starbase.com/verreg.htm before installing to receive a serial number and activation key.

Versions 2.0 provides version control, visual differencing, build and milestone management, audit logs, security, and an advanced project repository for individuals and local groups of web site developers.

Technical support for Versions 2.0 is available from http://www.starbase.com, support@starbase.com, or (714) 442-4460.

Aimtech Jamba

Jamba is an award-winning Java authoring tool for non-programmers and creative professionals that makes your Web pages come alive with Java applets.

Jamba's visual and intuitive drag and drop approach lets you easily add multi-media content including audio, animation, ticker tape text, picture push buttons, timers, and other special effects to static HTML web pages. Jamba's Internet capabilities and open environment can be extended with ActiveX, Java, or JavaScript.

 Technical support for Jamba is available from:

•	http://support.aimtech.com/jamba

•	support@aimtech.com

•	Phone: (800) 801-2884

•	Fax: (603) 883-5582

VReam VRCreator

A robust but easy-to-use VRML authoring tool with an intuitive interface, VRCreator supports JavaScript behaviors for VRML 2.0 and includes dozens of drag and drop VRML 2.0 behaviors.

The extensive library includes hundreds of VRML 3D objects, colors, textures, and sounds with which to build advanced VRML worlds.

Technical support information for VRCreator is available from techsup@platinum.com, or http://support.platinum.com.

DTL Dataspot

DataSpot™ is an advanced, programming-free tool that lets Web designers and database developers automatically publish their databases for Web browser access.

DataSpot enables non-technical users to explore databases via the Web in a user-friendly, intuitive way. Its unique combination of database comprehension and support of plain language, free-form queries makes it the most advanced database search and navigation software for the Web and corporate intranets available.

The product can be applied to a wide range of applications, including Web catalogs, Internet commerce, and various types of database querying tools and applications.

Technical support for DataSpot is available from http://www.dtl.co.il or support@dtl.co.il.


What's new in HoTMetaL PRO

If you have been using HoTMetaL PRO 3.0, you're probably interested in what's new in version 4.0.

First of all, the HoTMetaL PRO Information Manager, available for download to users of HoTMetaL PRO 3.0, has been improved and integrated into the product. The Information Manager is a powerful site manager that allows you to view links, import existing sites, and check for broken links and orphaned files.

The Editor now offers three different authoring environments: WYSIWYG view for the novice, Tags On view for the intermediate user, and the HTML Source view for power professionals.

HoTMetaL PRO MetalWorks has been replaced with Ulead PhotoImpact SE, a complete image editing package. If you still wish to continue using MetalWorks, leave MetalWorks installed and create a shortcut to mtlwks1.exe.

SoftQuad AdaptAble Technologies make HoTMetaL PRO, and the Web pages created using it, more accessible to everyone, including users with disabilities. The accessibility support includes the Visual Dynamic Keyboard, and accessibility prompting (guidelines for creating accessible pages).

HoTMetaL FX Chooser adds dynamic effects to your pages, including dynamic HTML, animated GIFs, graphics, Java applets, and JavaScripts.

HoTMetaL PRO 4.0 also includes new wizards, to guide you through certain operations:

•	The HoTMetaL PRO Site Maker walks users through the creation of a Web site, using provided templates.

•	The Database Import wizard helps users create queries, writing the SQL for you.

•	The HTML wizard helps you correct invalid markup, or add new elements or attributes to your documents.

See the file readme.wri in the HoTMetaL PRO folder for a detailed list of new features.


Finding information

A printed User Guide, and a Special Topics manual in several printable electronic formats, are shipped with HoTMetaL PRO 4.0, but not with the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

There are several different ways to find information on how to use HoTMetaL PRO.

•	User Guide – The User Guide covers the core topics that you need to be familiar with to create Web pages and manage a site with HoTMetaL PRO. Most chapters have both tutorial and reference sections. The reference sections are also contained in the online help. The basic information that you need in order to get started is in the following  sections: Creating your first Web page, Links and Publishing your first site. Even if you are familiar with HoTMetaL 3.0, you should read these chapters to become familiar with changes to the HoTMetaL PRO user interface.

•	Online help – Contains the reference sections of the User Guide, and extra information on special topics. You can access online help by choosing Contents or Search for Help on... from the Help menu, or typing F1, in either the Editor or the Information Manager. The HoTMetaL PRO Power Tools each have their own online help.

•	Help buttons – Most dialog boxes in HoTMetaL PRO have Help buttons, which take you directly to the appropriate help panel.

•	Technical Reference – Links to technical information about Web page creation can be accessed by choosing Technical Reference from the Help menu in the HoTMetaL PRO Editor.

•	Release notes – You can get the latest release information about HoTMetaL PRO by opening the readme.wri file in the HoTMetaL PRO folder (this file is accessible from the HoTMetaL PRO program group in Windows).

•	Special Topics manual – More advanced and specialized topics are covered in the Special Topics manual. This manual is supplied in printable electronic form on the HoTMetaL PRO CD, in the Special folder. The material in this manual can also be found in the online help file.


Special topics

A printed User Guide, and a Special Topics manual in several printable electronic formats, are shipped with HoTMetaL PRO 4.0, but not with the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

More advanced and specialized topics are covered in  this online help, and in the Special Topics manual. This manual is supplied in printable electronic form in the Special folder on the HoTMetaL PRO CD. The following topics are covered:

•	Spell checking

•	Thesaurus

•	Converting word-processor files

•	Detailed descriptions of Design-Time Controls

•	Editing images with PhotoImpact SE

•	Using cascading style sheets

•	Visual Dynamic Keyboard

•	Using macros

•	Running a local Web server (ZBServer Pro)

•	Setting Editor display options

•	Open Market Digital Offers

•	Accessing ODMA-compliant DBMs

•	Site Template Configuration

•	Advanced Glossary


Internet service providers

In order to use a Web browser and put your HTML documents and images on the Web, you must have access to an account with an Internet service provider (ISP). Most ISPs provide you with browser software to access the World Wide Web, and space on their server to put your HTML documents. Once your documents are on a server that is connected to the World Wide Web, they can be accessed from anywhere.


Accessibility

HoTMetaL PRO provides methods for checking whether your document is accessible to everyone, including users with disabilities and users of text-only browsers.

The Visual Dynamic Keyboard (VDK) is an on-screen keyboard that lets users enter text, select commands, activate dialog box controls, etc., without using the regular keyboard and mouse. It appears on-screen in a resizable window, as a keyboard with rectangular keys. The VDK provides greater accessibility to Windows applications to users with mobility impairments. The VDK also has additional support for the HoTMetaL PRO Editor. Using the VDK, users can work with applications using alternative access methods: automatic scanning, inverse scanning, direct-dwell selection, direct-click selection, and five-switch directed input.

The Visual Dynamic Keyboard is shipped with HoTMetaL PRO 4.0, but not with the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.


Creating your first web page

What's covered in this chapter

The tutorial and reference sections of this chapter describe the first steps in building a Web site: creating, editing, and saving a simple introductory page. The topics covered include:

•	Formatting your text, including creating paragraphs, headings, and lists.

•	Adding a background color or image.

•	Aligning page content.

•	Inserting a simple table.

Reference

The following reference guide sections explain how to create HTML markup in both the WYSIWYG view and the Tags On view. If you are familiar with word processor applications, but new to HTML, you may find it easier at first to work in WYSIWYG view. If you like to see how everything actually works, use the Tags On view. Most procedures can be done in either view.

  More on this topic


The Editor toolbars

You can access commands in the HoTMetaL PRO Editor through the toolbars. Tooltips—short descriptions of what a toolbar button does—appear near the toolbar buttons if you move your mouse cursor over them. There are nine toolbars available, though by default not all are displayed. When you open the HoTMetaL PRO Editor for the first time, the Standard, Formatting, Browsers, and Macros toolbars are turned on.

You can move any toolbar to any other position in the toolbar area at the top of the HoTMetaL PRO screen, or move a toolbar off that area, where it becomes a floating toolbar (sometimes called a `palette'). Floating toolbars can be moved anywhere on the screen.

•	Move your cursor over the toolbar's `handle' (the double line on the left of the toolbar), and click and hold on the handle.

•	Drag the toolbar to a different location at the top of the screen, or off of the top area of the screen if you want it to become a floating toolbar.

The locations of the toolbars will be saved when you exit the HoTMetaL PRO Editor, so they'll be in the same place when you open the Editor again.

To turn a particular toolbar on or off:

•	Choose Toolbars... from the View menu. The Toolbars dialog box appears.

•	Click on the check box for the toolbar that you want to turn on or off.

The following toolbars are available:

•	 The Standard toolbar contains many basic commands, including file commands.

•	 Use the Formatting toolbar to change the appearance of both inline text and block elements.

•	 Use the Advanced toolbar to insert advanced objects in your web page.

•	Use the Tables toolbar to create and edit tables.

•	 The Quick Tools toolbar has buttons for inserting various HTML elements. This toolbar retains much of the insertion functionality from HoTMetaL PRO 3.0.

•	Use the Forms toolbar to create forms and insert form objects.

•	Use the Macros toolbar to record and play macros.

•	Use the Browsers toolbar to preview your pages. When you install HoTMetaL PRO, you are prompted to tell HoTMetaL PRO what browsers you have installed. You can add more browsers to this toolbar by clicking on a blank toolbar button.

•	Use the Image Mapping toolbar to create and edit image maps. By default, this toolbar is turned off: it appears only when you insert an image, and becomes active when an image is selected.


Creating a new page using a template

The templates available in the Evaluation Version that you are now using are a subset of those provided with HoTMetaL PRO 4.0. Choose `How To Purchase' in the Help menu for ordering information.

You can use a template to help you create a new document:

•	Choose New... from the File menu or press Ctrl+N.

•	Choose a Template Group.

•	Choose a specific template based on the descriptions displayed.

•	Click on OK.

•	 Edit the page to insert your own content.

 You may later wish to refer to  the `Working with HTML' help section .


Creating a new, blank page

The HoTMetaL PRO Editor opens with a blank document window.

To start a new document:

•	Click on the [image] toolbar button.

This opens an empty document. If you are in WYSIWYG view, the insertion point will appear at the top of the document window. The insertion point will be inside a P element, and the status bar in the bottom left of the document window will reflect that.

From the File tab of the Options dialog, you can specify a different document to be opened when you click on the toolbar button.


Adding basic components

The most basic Web page consists of headings, paragraphs, and lists. Headings help to structure the information in the document; paragraphs convey the information itself; lists are used for information that is best expressed in point form.. While a page doesn't have to contain these features, many pages on the World Wide Web use this as their basic structure. From this you can build and improve the content and style of your pages as you learn more.


Inserting headings

Most Web pages contain at least one heading. There are six levels of headings, quite logically numbered from one to six. The topmost level of heading is called H1 (Heading 1). These headings imply levels of importance with respect to each other in the document, and they are formatted by Web browsers to indicate this relative importance. While your pages don't have to contain headings, they are useful for structuring your information.

Headings do not have to be in any particular order, but because of the way documents are displayed in browsers, you will get better results by following these guidelines:

•	Heading 1 headings (H1) should be used as the highest level of heading, Heading 2 (H2) headings as the next highest, and so on.

•	Try to avoid skipping heading levels: for example, a level 3 heading should not come after an level 1 heading unless there is a level 2 heading between them.

The cursor may change size depending on the level of heading you selected. Heading 1, for example, is usually displayed in a larger type size, so the cursor will get larger. When you type the text of the heading, HoTMetaL PRO will display the text similar to the way most Web browsers would display that level of heading (for example, bold face type, two points larger than the body type).

To create a new heading:

•	Place the insertion point at the end of the existing text and press Enter. A new line is created.

•	Choose Heading 1 (or lower level heading) from the pull-down menu of styles in the Formatting toolbar.

•	Type the text of the heading.

•	When you have finished typing the text of the heading, press Enter.

If you place the insertion point inside a paragraph and select a heading from the pull-down menu, the paragraph changes to a heading. Place the insertion point at the end of the existing text and press Enter to create a new line. Then you can change the new line to any element you wish.

In Tags on view, you can move the insertion point outside of any existing element (P, ADDRESS, PRE, etc.). Then, any element you select from the pull-down menu can be inserted at that point.


Inserting paragraphs

Paragraphs are the most common way to present blocks of text. When you start a new document in HoTMetaL PRO, you are ready to begin typing a paragraph.

To insert a new paragraph in your page:

•	Place the insertion point at the end of the existing text and press Enter. A new line is created.

Or:

•	Choose Paragraph from the pull-down menu of styles in the Formatting toolbar.

Your Web page has to conform to certain rules. For example, you cannot have a paragraph inside a heading, or a heading inside a paragraph. If the insertion point is inside a paragraph and you choose a heading from the pull-down menu, HoTMetaL PRO will change the whole paragraph into a heading. Similarly, if you have the insertion point inside a heading and you choose paragraph from the menu, you will change the heading to a paragraph.

  More on this topic


Splitting and joining paragraphs

You can create two elements of the same type from a single element, or join elements together. The most common use of joining elements is to join two elements of the same type (combining two paragraphs, for example): when two different elements are joined, the second element becomes part of the first and any special properties of the second element are lost. For example, if you have a heading followed by a paragraph that you have centered and you join the two, the result would be a long heading with default alignment (not centered).

To split a single paragraph into two paragraphs:

•	Press Enter at any point in the paragraph.

The paragraph will split at the insertion point.

To join two paragraphs together, do one of the following:

•	Place the insertion point at the start of the second paragraph and press Backspace.

•	Place the insertion point anywhere in the second paragraph and press Ctrl+Shift+J.

•	Place the insertion point anywhere in the second paragraph and choose Join to Preceding from the Edit menu.

The second paragraph will join the first. A space is added automatically between the two pieces of text.


Creating and editing lists

Lists are useful for presenting itemized information, sequential steps to perform a task, menus, or definitions.

Web pages can contain several different kinds of lists:

•	Numbered or ordered list (OL element) – Items in this type of list are numbered automatically by the Web browser. The numbering style will reflect nested lists.

•	Bulleted or unordered list (UL element) – Browsers will format unordered lists with a bullet or other special character. The character usually changes for nested lists.

•	Definition list (DL element) – An unordered list that contains pairs of terms (DT) and definitions (DD).

•	Directory list (DIR element) – This unordered list is used to create a directory (for example a file directory). Items in a directory list should not be longer than 24 characters.

•	Menu list (MENU element) – Menu lists are unordered lists. Items in a menu list should be no longer than one line.

You can insert lists a number of ways:

•	By creating a new list.

•	By demoting paragraphs.

•	By promoting second-level list items.

You can also change the list type after you have created your list. For example, you might create a numbered list and then decide that you would prefer bullets.

  More on this topic


Inserting a new list

To insert a new numbered, bulleted, directory, or menu list:

•	Place the insertion point where you want to insert the list and do one of the following:

•	Choose the type of list you want to add from the pull-down menu of styles in the Formatting toolbar.

•	Click on the [image] (numbered list) or [image] (bulleted list) toolbar button.

A new list is created, containing a single list item.

Pressing Enter in a list item inserts a new list item after the current one.

To terminate a list, press Enter twice (if you're in an empty list item, you just have to press Enter once).


Inserting a list inside a list

To insert a list inside a list (also called a nested list or sub-list):

•	Create a new list item after the current one (by pressing Enter, for example).

•	Press Tab, or right-click in the new list item and choose Demote from the pop-up menu.

This creates a new, empty list of the same type as the original list, inside the original list item. You can edit this list as you would any other list. To terminate this list and return to the outer list, press Enter twice.

If you have already created one or more list items that you wish to convert to a nested list:

•	Highlight the list item(s) that you want to put in a nested list.

•	Press Tab, or right-click and choose Demote from the pop-up menu.

You can also insert a list at any point in the current list item by choosing Element... from the Insert menu and inserting one of the list elements (OL, UL, DIR, or MENU).


Converting (demoting) paragraphs to a list

You can turn one or more paragraphs, block quotes, pre-formatted text blocks, or other paragraph-style text block into a bulleted list.

•	Select one or more paragraphs.

•	Press Tab.

If you demote paragraphs that are located between two bulleted lists, the two lists and the converted paragraphs will be combined.


Converting (promoting) list items to paragraphs

You can turn one or more list items to paragraphs.

•	Select one or more list items.

•	Do one of:

•	Press Shift+Tab.

•	 Right-click and choose Promote from the pop-up menu.

If you promote list items in the middle of a list, the list will be split.


Changing the list type

To change an existing list to a bulleted or numbered list, you can click on the toolbar buttons. For other list types, use the Style Element pull-down menu or the Insert Element dialog.

To change a list to another type:

•	Place your insertion point inside the list.

•	Choose the new list type from the Format menu.


Convert a pasted selection to a list

The HoTMetaL PRO Editor will convert a selection that has been pasted (or dragged and dropped) from another application into a list if:

•	Each line starts with one or more tabs.

•	There is only one data item per line (that is, after the initial tab(s) starting the line, there are no more tabs in the line).

•	Each line is indented (tabbed) by no more than one tab more or less than the previous line.

•	There are at least two lines.

Sub-lists will be created as necessary to reflect the indent levels of the list items.

A text selection could also be converted to a table. If the selection cannot be pasted as a list or table, it will be converted to a paragraph.


Using definition lists

Definition lists are a special kind of list because instead of consisting of ordinary list items, they consist of a combination of defined terms and definitions. A basic definition list consists of alternating terms and definitions, but you can also have several terms or definitions in sequence. Most browsers will indent the definitions. Of course, you don't have to use this kind of list just for definitions: you can use it for any purpose that is suited to two-part lists.

The most convenient way to work with definition lists is to use the QuickTools toolbar. If this toolbar is not displayed:

•	Choose Toolbars... from the View.

•	Turn on the QuickTools check box.

•	Click on OK.

To insert a definition list, do one of:

•	Choose Definition list from the pull-down list of styles in the Formatting toolbar.

•	Click on the [image] toolbar button in the QuickTools toolbar.

You can use the following techniques to edit definition lists:

•	To create a new instance of the current item (defined term or definition), press Enter.

•	To change a definition into a defined term, click on the [image] toolbar button.

•	To change a defined term into a definition, click on the [image] toolbar button.

•	To terminate a definition list, press Enter twice (if you are in an empty item, you just have to press Enter once).

•	If a defined term contains an image (usually found at the beginning, functioning as a list bullet), then when you press Enter to create a new defined term, that image will be duplicated in the new term.


Inserting tables

Tables are commonly used in Web pages to convey related information in a logical way. They can also be useful as layout tools for design purposes.

To insert a table:

•	Choose Insert Table from the Table menu.

•	Type the number of Rows and Columns you want in the table in the text boxes.

•	Click on OK.


Formatting text

You can change the way that your text appears in a number of ways—by changing the text alignment, style, color, or font. It is generally not good design practice to get carried away with these choices: multiple changes of font or color can be distracting and reduce readability, especially for users with visual impairments. Once you find a look for your text that you are happy with, you can apply it to all the documents in your site to create a consistent design style.

  More on this topic


Aligning blocks of text

You can align blocks of text (block elements) in your Web page to the left (default), to the right, or in the center. Headings, paragraphs, and table cells are some of the blocks of text you can align.

To set text alignment:

•	Put the insertion point in the block of text you wish to align.

•	To set the alignment, do one of:

•	Click on the [image] (Left Align), [image] (Right Align), or [image] (Center) toolbar button.

•	Press Ctrl+L (left align), Ctrl+R (right align), or Ctrl+E (center).

•	Choose Align Left, Align Right, or Align Centered from the Format menu.


Changing the text style

You can add emphasis to inline text by changing the text style. The Formatting toolbar includes buttons for bold, italic and underline.

There are also other HTML character format elements that you can use. Emphasis (EM) and strong (STRONG) are commonly used in place of italic and bold: most browsers will display them as italic and bold but their use gives more flexibility to the browser. Teletype (TT) will be displayed in a fixed-width, typewriter-style font, such as Courier. This is useful in technical documentation: if you are going to include any instructions for viewers on your site, you can use it to indicate text to be entered. All of these text styles are available from the Format menu.

Emphasized text should be used sparingly, or it will no longer stand out. Since browsers underline text links, underline text for emphasis only in special situations where you are sure it will not be confusing.

To change text style:

•	Select the text and do one of the following:

•	Click the [image] (Bold), [image] (Italic), or [image] (Underline) button in the toolbar.

•	Press Ctrl+B, Ctrl+I, or Ctrl+U.

•	 Choose a style from the Format menu.

Each of these methods can be used to either apply or remove the chosen style: for example, if you click on [image] with a selection that is already bold, the bold style will be removed.


Changing the text color

Most Web browsers will let you specify different colors for the the text in your document. You can specify the default text color for the whole document in the Document Properties dialog box , but you can also change the color for specific text in the document.

To change text color:

•	Select the text.

•	Click on the [image] toolbar button; this brings up the Windows Color dialog box.

•	Choose a color from the palette.

•	Click on OK. Your change will be reflected in the document window.


Changing the text size

You can change the size of text, as a relative value (+/-) or as an absolute value. These numbers do not represent actual point sizes, but rather a scale to be interpreted by the browser. Most browsers support font sizes between 1 to 7, with 3 being the default size. When you change the font size in the Editor, the size is increased or decreased.

To change text size:

•	Select the text, and do one of the following:

•	Click on the [image] or [image] toolbar button.

•	Press Ctrl+Shift+> (increase size) or Ctrl+Shift+< (decrease size).

•	Choose Increase Text Size or Decrease Text Size from the Format menu.


Changing the font

Some Web browsers will display different font faces in your page. Keep in mind that fonts are not common to all computer platforms. For example, UNIX and Macintosh users will not be able to use the same fonts as Windows users. Make sure that your pages are acceptable without your selected fonts.

To change the font of your text:

•	Select the text you want to display in a different font.

•	Pull down the menu of fonts in the Formatting toolbar.

•	Choose the font from the pull-down list. Your font selection will be reflected in the document window.


Showing and hiding invisible characters

Choose Show Invisibles in the View menu or click on the [image] toolbar button to see characters that would otherwise be invisible. A carriage return is represented by a `paragraph' symbol; a newline by a `sunburst' or `currency' symbol; a space by a raised dot; a tab by a hash (number) sign, `#'; and a zero-width character by a tilde, `~'.

Choose Hide Invisibles or click again on the [image] toolbar button to turn off the display of invisible characters.


Undoing and redoing changes

Whether you're making extensive changes to a Web page you've already created, or experimenting as you create a page from scratch, you can always change what you've done.

Any time you are not happy with a change you have made, or the result is not what you expected, you can use the Undo command to reverse the change. HoTMetaL PRO supports multiple undoing: that is, you can continue to select Undo until you are happy with the document. If you go too far, use the Redo command to come back.

To undo an edit, do one of:

•	Click on the [image] toolbar button.

•	Press Ctrl+Z or Alt+Backspace.

•	Choose Undo from the Edit menu.

To reverse the `undo', do one of:

•	Click on the [image] toolbar button.

•	Press Ctrl+Y.

•	Choose Redo from the Edit menu.


Adding common design items

This section describes some simple ways to add a little design to your Web page. More complicated methods of design (such as frames and tables) are covered later in this guide, but remember that often the simplest designs are the best.

  More on this topic


Document properties

The Document Properties dialog lets you set background images and colors, set text colors, and give the document a title.

Backgrounds

Backgrounds are an easy way to make your Web page more interesting and give it some style. You can specify a background color for your Web page or you can use a graphic, which will be tiled—that is, repeated over and over to fill up the background—by the browser.

You can specify either a background color or graphic using the Properties command. Take care to ensure that your color choices for text and background have enough contrast for readability. The background image should not contain information (such as a company or site name) that is not also included elsewhere in the document in text form.

To specify a background color:

•	Choose Properties from the File menu.

•	Click on the ... button next to the Color option; this brings up the Windows Color dialog box.

•	Choose a color from the palette.

•	Click on OK.

HoTMetaL PRO will now display your color choice as the background color.

To specify a background image:

•	Choose Properties from the File menu.

•	In the Image text box, type the full path and filename of the image you want to use for your background. Alternatively, you can click on Choose... to find the file.

•	Click on OK.

The background image you have selected is tiled, or repeated, as many times as necessary to fill the background.

Note: Use the Options dialog to choose whether to Show Background Images in the Editor document window.

Text colors

Click on the ... buttons or enter a hexadecimal red-green-blue value in the text boxes to choose colors for:

•	Normal text

•	Links (hot text; most browsers display this text in blue by default)

•	Visited links (links that have already been accessed)

•	An active link (this is the color that the link text will at the moment that someone is clicking on it).

Document title

You should specify a title for your document—most browsers will display this text in the title bar when your document is displayed.

To specify a title:

•	In the Document title text box, type a title for your document.


Adding horizontal lines

Sometimes you may want to break your page into sections, or add some graphical relief by inserting a horizontal line across the page.

To insert a horizontal rule:

•	Choose Horizontal Rule from the Insert menu. A horizontal line appears across the page at the insertion point.

Double-click on the line if you want to set properties for the rule.  The following properties are available:

•	SIZE – Height of the rule in pixels.

•	WIDTH – Width of the rule in pixels or percentage of screen width (percentage recommended).

•	NOSHADE – Indicates whether the rule has a 3D or flat look.

•	SRC – Specifies a URL to an image that will be displayed in place of the rule in browsers that support this.

•	ALIGN – Specifies left, center or right alignment for the rule.


Line breaks

Occasionally, you may wish to have a line break in a specific spot and wrap to the line below. This is sometimes the case with especially long headings.

To insert a line break into your document:

•	Press Shift+Enter.


Completing your page

You can save your Web page at any time using either Save or Save As in the File menu. However, there are a number of recommended steps you should really go through before considering your page complete and ready for public viewing:

•	Check your spelling.

•	Give the document a title.

•	Validate for accessibility to ensure that visitors using different browsers and various assistance tools can easily access this document.

•	Validate HTML to ensure that the document markup is not invalid in any way. This can also result in browsers not displaying the document properly.

•	Preview your document in a browser to see how it looks.

  More on this topic


Validating for accessibility

To ensure that your document is accessible to everyone, including users with disabilities and users of text-only browsers, choose Check Accessibility from the Tools menu.

To check your document for accessibility:

•	Choose Check Accessibility from the Tools menu. HoTMetaL PRO checks your document against a set of accessibility guidelines. If your document does not meet these guidelines, a message appears with a summary list of the accessibility problems.

•	Click on OK. A succession of dialog boxes appear, one for each problem. Some problems can be solved immediately using tools in the dialogs. If the problem is more complex, a textual warning appears which explains the problem.

If your document does not pass the accessibility check, it does not mean that the HTML markup is incorrect. It is advising you that your document could be marked up to be more accessible to people with disabilities. For information about creating Web pages that can be accessed by everyone, see Validating for accessibility.


Validating your page

You can use the Check HTML command to verify that the markup in a document is correct and complete. If the validation process finds an error in the document, a message appears and the insertion point will move to the error so that you can make the necessary change. .

To check your document for valid HTML markup:

•	Choose Check HTML from the Tools menu, or press F9. The Validation dialog box appears.

•	Click on the More... button to see which elements used in your document may not be supported by all browsers.

•	Click on OK.

 For more information about HTML rules, see Creating valid HTML.


Previewing your document

You can preview your document in a Web browser to see what the final product will look like. If your document has not been saved, you will be prompted to save and preview the document, save a temporary file and preview it, or cancel the operation.

To preview a document:

•	Click on the toolbar button that has the icon for your browser.

If no browser has been chosen, or you wish to choose a new browser:

•	Click on a blank toolbar button.

 The Choose Browser dialog box appears.

•	Select the path and filename for your browser and click on Open.

You can also preview a document, and add or delete a browser, by choosing Preview in Browser... from the File menu, or pressing Ctrl+M.


Closing the document

To close a document:

•	Choose Close from the File menu. If any changes have been made to the document since the last time it was saved, you will be prompted to save the changes before closing the file.


Exiting the Editor

To exit the HoTMetaL PRO Editor:

•	Choose Exit from the File menu. The application will close. If any open files have been changed since the last time they were saved, you will be prompted to save them before exiting.


Setting Editor options

To set HoTMetaL PRO Editor options:

•	Choose Options... from the HoTMetaL PRO Editor Tools menu.

This displays a dialog box with seven tabbed sections. You can set the following kinds of options:

•	General options

•	Options that configure the document window (View)

•	Fonts for tags and HTML source

•	Layout in HTML Source view

•	Helper Applications

•	Default template, and file saving (File)

•	Spelling dictionaries

  More on this topic


General options

To set Editor general options:

•	Choose Options... from the Tools menu.

•	 Click on the General tab.

This dialog box has several sections:

•	Enter user information: author name and organization.

•	Set the level of HoTMetaL PRO Editor accessibility prompting: this feature helps you create documents that are readable by the widest possible audience, including users with physical impairments.

•	Add a menu item for the Visual Dynamic Keyboard (VDK), an on-screen keyboard for users with mobility impairments, and position the VDK on the screen.

•	Specify the format for server-side image mapping files: this should correspond to the server type that your documents will reside on (you may need to obtain this information from your ISP or system administrator).

•	Miscellaneous options:

•	Show or hide screen tips, the small pop-up messages that appear above toolbar buttons.

•	Enable HoTMetaL PRO Editor to connect to ODMA-compliant databases.

•	Add menu items that enable you to create Open Market Pre-Digital Offers.

•	Turn automatic rules checking off by default.


Viewing options

To set Editor viewing options:

•	Choose Options... from the Tools menu.

•	 Click on the View tab.

The following options can be set:

•	Show background images: enable or disable the display of background images.

•	Show inline images: show or hide images (IMG elements).

•	Show comments: show or hide HTML comments in the Tags On view. Comments are not displayed in the WYSIWYG view.

•	Show URLs: show or hide the URL of links in the Tags On view. URLs are not displayed in the WYSIWYG view.

•	Show head element: show or hide the contents of the HEAD element (document title, meta-information, etc.) in the Tags On view. The HEAD element is not displayed in the WYSIWYG view.

•	Size text to window: if you turn on this option, wrapped lines will adjust their length to fit the window if the window is resized. If this option is turned off, wrapped lines will take their length from the global margins. Size text to window will cause a lot of reformatting, which may be slow for large documents.

You can also change the default formatting in the Editor window using the Display Options command in the Tools menu . This affects only the Editor display.


Font options

To set font options for tag icons in Tags On view, and for text in HTML Source view:

•	Choose Options... from the Tools menu.

•	 Click on the Fonts tab.

For tag icons displayed in Tags On view, you can select the default font, font size, and tag foreground (text) and background color.

You can change the font, font size, and colors used to display the following document components in HTML Source view:

•	Ordinary text (non-markup)

•	Start-tags (includes attribute names)

•	End-tags

•	Attributes (that is, attribute values)

•	Scripts (the contents of SCRIPT elements)

•	Comments

•	The DOCTYPE Declaration (located at the top of the document in HTML Source view).

These settings do not affect the way your document is displayed in a browser.

To change the fonts used in HTML Source view:

•	In the HTML Source View section of the dialog box, do any of the following:

•	Select a different display font from the Font drop-down list.

•	Change the display font size, using the Size drop-down list.

•	Choose a Foreground color (default text color) and Background color by clicking on the appropriate button.

•	Change the display color for any of the available markup components.


Source Layout options

The HoTMetaL PRO Editor uses indents and vertical spacing to display HTML source in a way that helps users distinguish content and markup. While the default settings should make it easier for you to work with source code (in comparison to a text editor), you may want to adjust the settings to make certain elements stand out. These settings also determine how the file is saved.

To change the HTML Source view layout:

•	Choose Options... from the Tools menu.

•	Click on the Source Layout tab.

•	Do any of the following:

•	Increase or decrease the Indent size (number of spaces inserted before all `block' elements, such as paragraphs and list items).

•	Increase or decrease the Maximum line length.

•	Select any element from the Elements list (`!--' stands for HTML comments) and change its display settings: you can indent the contents of the element, and add a blank line or line break around the start-tags or end-tags.


Helper application options

You can change the default editor and viewer for a particular image type. These applications will be launched instead of the default application when you right-click on an image file of a particular type in HoTMetaL PRO Editor, and choose Edit Image File or View Image File from the pop-up menu.

•	Choose Options... from the Tools menu.

•	Click on the Helper Apps tab.

•	Enter the file extension for the image type in the File Extension text box. If files of that type could have more than one extension (for example, .jpg and .jpeg), you will have to make a separate entry for each.

•	Click on Add New Type.

•	You can choose an editor, viewer, or both. Enter the locations and filenames of of the desired applications in the Viewer and Editor text boxes (you can use the Choose... button to select them).

•	Click on OK.


File options

To set file options:

•	Choose Options... from the Tools menu.

•	Click on the File tab.

You can choose a file that will be used as the default document template hen you create a new file by clicking on the [image] toolbar button.

You can cause HoTMetaL PRO Editor to create a backup file when you save a file.

You can cause HoTMetaL PRO Editor to save the current document automatically after a certain number of changes have been made, or after a certain number of minutes have elapsed. You can ask to be prompted before each auto-save.


Spelling options

To set spelling options:

•	Choose Options... from the Tools menu.

•	Click on the Spelling tab.

You can specify up to 24 supplementary dictionaries, or lexicons, of specialized terminology for your specific field. Unlike user dictionaries, supplementary dictionaries cannot be modified during a spell checking session. Supplementary dictionaries are created and edited using Edit Dictionary, like other dictionaries.

To choose supplementary dictionaries:

•	For each dictionary that you wish to add, click on the Add button and select the file

You can add your own list of words to a personal user dictionary. This is a way to avoid having the spell checker stop repeatedly for proper nouns and jargon that you use regularly.

You can load a different dictionary during a HoTMetaL PRO session, but only one user dictionary can be loaded at a time. The default user dictionary is the file user.dct, located in the lib\spell folder in the HoTMetaL PRO folder.

To select a default user dictionary:

•	Click on Choose... to select a user dictionary.


Inserting links

What's covered in this chapter

Links are key features of HTML pages because they enable you to link other documents to your pages and insert graphics and multi-media files. A URL (Uniform Resource Locator) is the part of a link that gives the location of the file that the link points to (and possibly a specific place in that file).

Some things that you can do with links are:

•	Create links to other pages .

•	Insert images in your page .

•	Create links to specific locations in a page (bookmarks).

•	Create a link to an e-mail address .

•	Drag and drop links from other applications

This section also has background material  on different kinds of URLs.

Reference

HoTMetaL PRO Editor makes it easy to create and edit links. There are several ways to do this:

•	You can create a hypertext link  to a file using the Link... command in the Insert  menu. With this command, you can link to files on your system or to remote files.

•	You can  insert an image  using the Image... command in the Insert  menu.

Dragging and dropping links

•	You can make a link to a document or image on your system by dragging and dropping its icon from Windows Explorer or the Desktop into the HoTMetaL PRO document window.

By default, dragging and dropping will create a relative  URL if the document that you are working on has been saved at least once (that is, it has an actual filename), and will create a absolute URL if the file you are working on has never been saved.

You can configure HoTMetaL PRO to always create absolute  URLs when you drag and drop a file.

•	You can copy a link from a file being displayed in a browser by dragging and dropping the link into the HoTMetaL PRO Editor document window.

If you drag a hypertext link, HoTMetaL PRO will create a link whose URL is the same as the URL of the link in the browser, and whose default text is the same as the text of the URL.

From Netscape Navigator, you can also drag the `Quick Link' icon (just to the left of the URL in the Navigator window) into the HoTMetaL PRO Editor document window. This creates a link to the page currently being displayed in the browser.

You can drag images from Microsoft Internet Explorer into the HoTMetaL PRO Editor document window. This creates a link to a copy of the image in the Temporary Internet Files folder, which is contained in the Windows folder. You will probably find it more useful to copy the image from that folder into one of your working folders, and modify the link accordingly.

•	If you paste some text that starts with `http://' from another application into the HoTMetaL PRO Editor window, it will automatically be converted into a link.

  More on this topic


Inserting hypertext links

A hypertext link is one in which the user clicks on some text or an image and the browser responds by displaying another document, location (bookmark), or image. To insert this kind of link (sometimes called an anchor):

•	Enter the text or image that will represent the the link. If you don't highlight some text or image before you create the link, the URL will be used as the default link text; you can then change this text if you wish.)

•	Highlight that text or image.

•	Do one of:

•	Click on the [image]   toolbar  button.

•	Press Ctrl+K.

•	Choose Link... from the Insert menu.

 The Insert Link dialog box appears: in this dialog, you can enter a URL specifying a file, a bookmark in a file, or both. You can also indicate which frame (in a frames document) that you want the document to be displayed in.

Linking to a file

To specify a file:

•	Enter the file's URL in the File or URL text box. You can enter any kind of URL here: an absolute or relative URL to a file on the WWW or on your local system.

You can choose a file on your local system by clicking on Choose File.... By default, this will create a relative URL if your document has been saved at least once; if your document has never been saved an absolute URL to the location on your hard disk will be created.

You can configure HoTMetaL PRO to always create absolute  URLs when you choose a file on yoursystem.

When you have entered the URL, you can, if you wish, add it to the HoTMetaL PRO hotlist by clicking on Add to Hotlist.... You can choose a URL from your HoTMetaL PRO hotlist by clicking on Hotlist....

Linking to a bookmark

If you want the link to point to a bookmark (a specific location in the document that you're linking to):

•	Enter the bookmark at the end of the URL you entered in the File or URL text box, separated from it by a `#' character. If you didn't specify a file, the bookmark will be the only thing in the text box.

 Here are two examples of URLs with bookmarks:

http://www.softquad.com/authors.htm#orwell

#madrid

The HoTMetaL PRO Editor Insert menu also has the commands Bookmark... and Link to Bookmark... for creating and linking to bookmarks.

Linking to a frame

If you want the file that you're linking to to be displayed in a particular frame in a frame document when the user clicks on the link:

•	Enter the frame name in the Target Frame text box.

If a frame of that name is not being displayed by the browser when the link is clicked on, the linked document will be displayed in the same frame as the current document.

Note: Inserting a link creates an `A' (anchor) element in your document.

  More on this topic


Creating a link to a file in your project

Links to files in your projects, which will eventually be moved to a server, can be either relative or absolute. You should choose whichever type suits your project and style of working.

In general, you should use relative links if:

•	You know what the folder structure of your site will be.

•	You've created a mock-up on your local system of what the site will look like when it's moved to the server.

•	Most of the structural changes will be `incremental'—they will add to the current structure rather than rearranging it.

If you expect to be making a lot of structural changes to your site, then absolute links will probably be more convenient. This is because relative links easily become broken if you move folders around.

A disadvantage to using absolute links while you're developing your site is that it's difficult to preview your work in a browser until the links work. If you wish to use relative links while you're developing your pages but change them to absolute links before moving the pages to your server, you can use the Find and Replace URLs... command  in the Edit menu to change all the links at once.

To create a link:

•	Enter the text or image that will represent the the link.

•	Highlight that text or image.

•	Do one of:

•	Click on the [image]   toolbar  button.

•	Press Ctrl+K.

•	Choose Link... from the Insert menu.

•	Enter the URL in the File or URL text box.


Creating a link to a file on another Web site

The URL for a document at another site has to be an absolute URL: it must contain a scheme (http) and site address, followed by folders, a filename, and a bookmark if necessary.

•	Enter the text or image that will represent the link.

•	Highlight that text or image.

•	Do one of:

•	Click on the [image]   toolbar  button.

•	Press Ctrl+K.

•	Choose Link... from the Insert menu.

•	Enter the URL in the File or URL text box.


Creating a link to a file on your local system

You can create a URL that refers explicitly to a location on your local network, hard disk, CD, or floppy drive. For example:

file:///c|/data/orwell/homage.htm

 This kind of URL is useful only in certain circumstances: if you have to make a link to a file on another drive on your network, or if you don't intend to publish your pages to a server. If you do intend to publish your files, it's best to use either relative URLs or http-style absolute URLs.

•	Enter the text or image that will represent the the link.

•	Highlight that text or image.

•	Do one of:

•	Click on the [image]   toolbar  button.

•	Press Ctrl+K.

•	Choose Link... from the Insert menu.

•	Enter the URL in the File or URL text box. The URL has the following structure:

1	The  file scheme, followed by the characters `:///'.

2	The drive name: replace the `:' in the drive name with a vertical bar, for example, `c|' instead of `c:',

3	The path/filename. You should separate the files and folders with forward slashes, `/'.

4	A bookmark, if desired.

You can also choose a file by clicking on the Choose... button. By default, however, this will create a relative URL if the current file has been saved at least once; if you would like HoTMetaL PRO to always create absolute  URLs when you choose a file:

•	Edit the file hmpro4.ini, in the HoTMetaL PRO folder, with a text editor such as Notepad.

•	Add the line:

urls_default_to_relative=false

If a setting for urls_default_to_relative is already present, change true to false.

•	Restart HoTMetaL PRO Editor.

Now you can use Choose File... to create file:/// URLs.

See the section Changing your URLs for the Web  for information on how to convert `local' URLs to URLs for the Web.


Inserting images

To insert an image using the toolbars or menu commands:

•	Place the insertion point at the location where you want the image to appear in the document (the document cannot contain a selection).

•	Click the [image] (Insert Image) toolbar button or choose Image... from the Insert menu.

The Image Properties dialog box appears.

•	Enter the URL for the image in the Image File text box, or click on Choose... to browse for the image file.

You can also specify the image properties.


Using the URL hotlist

HoTMetaL PRO lets you maintain a hotlist of frequently used URLs. When you need to insert one of these URLs, you can just pick it from the list instead of having to enter the information over again.

To add the current URL to the hotlist:

•	Do one of:

•	Click on the [image]   toolbar  button.

•	Press Ctrl+K.

•	Choose Link... from the Insert menu.

•	Enter the URL in the File or URL text box.

•	Click on Add to Hotlist....

You'll then get a dialog box that displays the URL and lets you enter a description. This description is how the URL will be displayed in the hotlist dialog box.

•	Enter the description. If you leave the description blank, the URL itself will be used as the description.

•	Click on OK.

To pick a URL from the hotlist:

•	Click on Hotlist... in the Insert Link dialog box.

A dialog box will appear, displaying the description of each URL in the hotlist.

•	Double-click on the URL you want. Alternatively, you can select a URL and click on OK.

To delete a URL from the hotlist:

•	Click on Hotlist... in the Insert Link dialog box.

•	Select the URL that you want to remove.

•	Click on Delete from Hotlist.

To append a Mosaic hotlist or Netscape Navigator bookmarks file to the HoTMetaL PRO hotlist:

•	Click on Hotlist... in the Insert Link dialog box.

•	Click on Append Hotlist... in the dialog box that appears.

•	Choose the hotlist or bookmark file that you want to append.

•	Click on OK.


Pointing to a specific location (bookmark)

Links can point not only to a document but also to a specific location (bookmark) in the document.

To set up this type of link you have to do two things:

1	Create the bookmark, using the Bookmark... command in the Insert menu.

2	Create a link to the bookmark, using the Link to Bookmark... command in the Insert menu.

Creating a bookmark

To create a bookmark:

•	Highlight some text at the location you want to link to. (Highlighting text is not mandatory, but some browsers will not be able to jump to the bookmark unless it contains some text.)

•	Choose Bookmark... from the Insert menu, or press Ctrl+G.

•	Enter a bookmark name of your choice in the dialog box that appears. Bookmark names typically consist of one word, but you can enter more. You should not use the same bookmark name twice in the same document.

•	Click on OK.

Creating a link to a bookmark

To create a link to a bookmark in an open document:

•	Highlight the text of the link.

•	Choose Link to Bookmark... from the Insert menu.

•	Choose the file containing the bookmark from the list of open files. The Bookmarks in file list will display all of the bookmarks in the file you chose.

•	Click on a bookmark in the list.

•	Click on OK.

To create a link to a bookmark in a document that isn't open:

•	Do one of:

•	Click on the [image]   toolbar  button.

•	Press Ctrl+K.

•	Choose Link... from the Insert menu.

•	In the File or URL text box, enter the URL for the document you want to link to.

•	Enter the bookmark name at the end of the URL you entered in the File or URL text box, separated from it by a `#' character.

Here are two examples of URLs with bookmarks:

http://www.softquad.com/authors.htm#orwell

#madrid


Linking to an e-mail address

You can create a link to an e-mail address so that:

•	A user can click on a link in a browser and open an e-mail editing window.

•	An online form can be mailed to an e-mail address.

The URL for this kind of link consists of the mailto scheme followed by a colon, `:', and then the e-mail address. For example:

mailto:charles@windsor.org

To create a link that brings up an e-mail editing window:

•	If you've already entered the text or image that represents the link, highlight it.

•	Do one of:

•	Click on the [image]   toolbar  button.

•	Press Ctrl+K.

•	Choose Link... from the Insert menu.

•	Enter the URL in the File or URL text box.

Note: Some browsers can read a `subject line' from the URL. For example, `mailto:charles@windsor.org?subject=Hi there' would generate a subject line of `Hi there'.

Some browsers do not support mailto but will at least display the e-mail address. Also, in order for this feature to work if your system is behind a firewall, you may need to configure your browser to use the correct proxy server. See your system administrator or browser documentation if this is the case.


Displaying links in the document window

By default, the Tags On view displays the URLs for relevant elements in the prefix of the element's start-tag.

To toggle the display of the URLs on or off:

•	Choose Options... from the Tools menu.

•	Click on the View tab.

•	Turn the Show URLs check box on or off.

•	Click on OK.


Understanding URLs

This section gives you some of the background information for understanding URLs. If you are already familiar with this material, you can skip over it.

The parts of a URL

 A URL can have the following parts:

•	A scheme that specifies how the browser should retrieve the file. Some common schemes are:

•	http: indicates an address on a Web server.

•	mailto: indicates that the URL specifies a mail address

•	file: indicates a file on a local filesystem.

•	ftp: indicates an address on an ftp server.

•	gopher: indicates an address on a gopher server.

•	A site address (for example, www.softquad.com) that specifies which site (server) the file is located on.

•	The site address can be followed by a `port number', for example: `www.sq.com:8888'. A port number is required if the Web server is not running on the default port (that is, 80).This normally occurs only if the site has more than one server running on it, so most likely you do not need to specify a port number.

•	A path, a sequence of folders, usually ending with a filename. This specifies the file to be retrieved.

•	A bookmark, that is, a reference to a specific location in the document that the URL is pointing to.

•	A query. If the URL points to a program instead of a document, you can attach a query string that specifies some information that the browser will send to the program.

Putting it all together

These components have to be arranged in a way that a Web browser will understand:

•	The scheme is separated from the site address by the characters `://'.

•	The site address, folder names, and file name are separated by forward slashes, `/'.

•	If the URL contains a bookmark, it's separated from the rest of the URL by a `#' character.

•	If the URL contains a query, it's separated from the rest of the URL by a question mark, `?'.

Here are some examples:

http://www.softquad.com/

http://www.softquad.com/whatsnew.htm

http://www.softquad.com/authors/orwell.htm#school

What kind of URL should I use?

Most components of a URL are optional: for example, you can create relative URLs that omit the scheme and site address. The kind of URL you use generally depends on where the document that you're linking to is located: on your own site or project, on another site, or on your hard disk or local network.

Mocking up your site

You'll find it easier to keep track of your links if, on your local disk, you create a mock-up of the files that you intend to publish to your Web or intranet server. If you do this, the links you create now will be less likely to break when you move your files to the server. It will also be much easier to move the files to the server using the Information Manager publishing function.

  More on this topic


Relative and absolute URLs

URLs can be divided into two groups: absolute URLs and relative  URLs.

Absolute URLs

An absolute URL is one that contains at least a scheme (such as http) and a site address (such as www.softquad.com). It can contain other components too, such as the folder path and filename, but it must have the scheme and site address in order to be an absolute URL.

The filename or even the whole path can be omitted from an absolute URL. In this case the URL implicitly refers to the file index.html on the server or folder that is specified in the URL. The URL for a site's home page often omits the path and filename: for example, http://www.softquad.com/ is the URL for SoftQuad's home page. The URL http://www.softquad.com/press means `the file index.html in the folder press on the www.softquad.com server'.

Relative URLs

A relative URL is one that doesn't have a scheme and site address; other components may be absent too. In this case the browser has to supply the absent information in order to know where to look for the file that the URL is pointing to. Normally the browser gets the absent information from the URL of the document that contains the relative URL.

 For example, suppose the document http://www.sq.com/doc/tutorial.htm contains a link to authors/orwell.htm. This URL contains a path and filename, but no server location. In this case, the browser will search for the document on the same server as tutorial.htm.

If you are linking to a file in the same project it's usually better to use a relative URL, for the following reasons:

•	If you move all the files to a different location (for example, when you publish them to a web server) but keep the same  folder  hierarchy, you don't have to revise the URLs.

•	Less typing is required to enter them.

•	The same file referred to by a relative URL can be accessed by different schemes (for example, both http and ftp).


Configuring HoTMetaL to create absolute URLs

As long as the current document has been saved at least once, HoTMetaL PRO creates relative URLs by default when you create a link by dragging and dropping, or with the Choose... button in the Insert Link dialog box.

If you would like HoTMetaL PRO to always create absolute URLs in these situations:

•	Edit the file hmpro4.ini, in the HoTMetaL PRO folder, with a text editor such as Notepad.

•	Add the line:

urls_default_to_relative=false

If a setting for urls_default_to_relative is already present, change true to false.

•	Restart HoTMetaL PRO Editor.


Understanding relative URLs

When the browser fills in the absent information in a relative URL, it usually gets this information from the URL of the document that contains the relative URL (this URL is called the base URL). The only exception to this is when the document contains an element called BASE, which specifies the base URL explicitly.

A relative URL can start with one of the following:

•	A file or folder name.

•	A single slash: `/'.

•	A double dot `..'.

•	A dot `.'.

•	A double-slash: `//'.

URLs that start with a folder or file

If the relative URL starts with a folder or filename, then the browser will look for the folder or file in the same folder as the current document. For example, suppose the relative URL is:

madrid.htm

The browser will look for the file madrid.htm in the same folder as the current file.

If the relative URL is:

orwell/homage.htm

then the browser will look for the file homage.htm in a folder called orwell that is in the same folder as the current file.

URLs that start with a slash

If the relative URL starts with a single forward slash, `/', then the scheme and the site address are absent. Both of these will be inherited from the current document (that is, the browser will look for the specified folder and file at the top level of the server). For example, suppose the current document is at the URL:

http://www.softquad.com/authors/contents.htm

and it contains the relative URL:

/images/orwell.gif

The browser adds the scheme and site address to the beginning of the relative URL to get:

http://www.softquad.com/images/orwell.gif

URLs that start with `..'

The characters `..' at the beginning of a relative URL mean `go up one folder level'. This kind of URL is interpreted the same as one that starts with a file or folder, except that the browser starts looking one level up from the current file. For example, suppose the current document is at the URL :

http://www.softquad.com/authors/english/index.htm

and it contains the URL:

../french/voltaire.htm

Instead of looking for the folder french in the current folder (english), the browser looks one level up, to the folder authors; then it looks for the folder french, and then for the file voltaire.htm. In this context, the relative URL is equivalent to:

http://www.softquad.com/authors/french/voltaire.htm

There are a couple of less common cases:

•	If the relative URL starts with `//', then the only thing absent is the scheme (http, etc.). In this case the browser uses the same scheme as it did for the current document..

•	The characters `./' at the start of a relative URL means `the current folder'. When the browser is interpreting a relative URL, the characters `./' will simply be removed.


For more information on links

 See our `Technical Reference' page (choose Technical Reference from the Help menu)  for references to standards documents that define URLs.


Publishing your first site

What you'll learn in this chapter

This chapter introduces the HoTMetaL PRO Information Manager. In this chapter, you will learn how to do the following:

•	View the files and folders in your project.

•	View your project as it would appear on the WWW.

•	View all links into and out of a particular file or view all links in your project.

•	Set options for your displays.

•	Move, copy, delete, and rename files and folders.

•	Launch the HoTMetaL PRO Editor and Web browsers from the Information Manager.

•	Create a new project , open an existing project , and add files to projects .

•	Create new links between files by dragging and dropping , and preserve links when you move, copy, delete, and rename files .

•	Change links for publishing .

•	Publish your files : choose the server , choose which files to publish , and finish the publish operation .

Reference

The HoTMetaL PRO Information Manager is the component of HoTMetaL PRO that manages your files and links between files. You can launch it by double-clicking on its shortcut icon (for example, in the Windows Explorer), or choosing HoTMetaL PRO Information Manager from its program group (under the Windows Start menu).

  More on this topic


Introduction to the Information Manager

 First, you should understand some of the terminology that is used in the Information Manager:

•	A collection of files is called a project. Project management is when the Information Manager helps you keep track of, edit, and manipulate files and links.

•	The Information Manager window is divided into three panels (divided sub-window areas).  On of these, the Link panel, can display any of three views.

There are many things that you can do with the Information Manager:

•	Move and rename files, and have the links to the files automatically updated to reflect the new names and locations of the files.

•	Examine your project in different ways to see how it is put together: view your project's links, or the actual structure of its files and folders.

•	Add new files to your project, or create whole new projects.

•	Copy your files quickly and easily to a different computer where they can be seen on the World Wide Web. (This is called publishing.)

•	Manage your files by keeping track of what you have put on the WWW so that you can replace out-of-date files quickly and easily.

For more details on creating a new site from scratch, see  Developing your Web site; for details on advanced file management features of the Information Manager, see  Maintaining your Web site .


Displaying your project

The main purpose of the Information Manager is to display and manage your project. To understand how the Information Manager lets you do that, let's take a look at the different parts of the Information Manager window.

The Information Manager window has three panels, which are empty if no project has been loaded. The Project panel, showing the files and folders within the project folder, occupies the upper left portion of the Information Manager window; the Link panel, showing hyperlinks between files, occupies the right side of the window, and the Pocket panel, showing user-selected groups of files, is in the lower left.

For more details on the Project panel, see Viewing the file structure of your project. For more details on the Link panel and the views in the Link panel, see Viewing the link structure of your project . For more details on creating Pockets and using Pockets to manage files, see Using Pockets to manage files .

The Information Manager panels show the same project in different ways: you can see files, links, or selected files depending on whether you are looking at the Project panel, Link panel, or Pocket panel. As well, when you click on a particular file in any panel, the file will also be selected in the other panels. For example, if you select a file in the Pocket panel, the file will also be selected in both the Project panel and the Link panel; if the Web View display is visible, it will rotate to show the selected file.

The Link panel can show the links in your project in one of three different views:

•	the Web View

•	the Single File View

•	the Tree View

You can switch between the views in the Link panel by clicking on the tabs at the bottom of the Link panel, or choosing Web View, Tree View, or Single File View from the View menu.

You can resize the panels by moving your mouse cursor over the separators between the panels. When the cursor changes to a double-headed `size' arrow, drag the separators by clicking the mouse button and holding it down as you move the mouse.

  More on this topic


Panel commands

Right-clicking on a file in any panel brings up a pop-up menu that lets you launch the Editor and the Browser, change the font for the panel or view and display the Windows Properties dialog.  The commands listed below are common to all panels. There are other commands that are specific to the various panels and views: look in the sections on the Project panel, Pocket panel, Web View, Single File View, and Tree View for the commands that are specific to each.

Launching the Editor and Browser

•	Edit File... opens the appropriate editor (the HoTMetaL PRO Editor, the cascading styles editor, or other editor registered for the file type in question) with the selected file. This is the same as choosing Edit File... from the Tools menu. (You can set which editors you want to launch for HTML, CSS, and image files in the Options dialog box. See  Information Manager options .)

•	View in Browser... launches your Web browser with the selected file. This is the same as choosing View in Browser... from the Tools menu. (You can set which Web browser you want to launch in the Options dialog box. See  Information Manager options.)

Changing the font

Font... lets you modify the font, font size, font style and font color used to display the text in the current panel.

You can choose a font from the Font list. Similarly, the various styles—bold and italic—and the point sizes of the fonts can be selected from the Font style list or Size list respectively, or entered into the appropriate text box. You can choose Effects (strikeout and underline), or select a font color from the drop-down list. Script lists the language scripts available for the particular font you have selected. An example of how the chosen font and options will look is shown in the Sample area. To apply the current settings, click on OK; click on Cancel to close the dialog box without making any font changes.

Properties

Properties launches the Windows Properties dialog for the file that you have selected. This is the same as choosing Properties from the Edit menu, or pressing Alt+Enter.


Viewing the file structure of your project

To see exactly what files are in your project and how they are arranged into folders, look at the Project panel (the panel in the upper left of the Information Manager window): it shows the folders, subfolders, and the files they contain. The icons that are used to represent files are the same ones used by Windows Explorer for each file type.

You can collapse or expand folders (that is, show or hide the files within those folders) by clicking on the [image] or [image] icon to the left of the folder icon. You can move up and down in the file list with the cursor keys; pressing the right arrow key shows the files in a folder, and the left arrow key hides them; pressing Home moves to the top of the file list; pressing End moves to the end of the file list.

Mark Site Files

The Project panel displays all files in the project folder, but some of these (orphan files) may not be part of the link structure of the project. To show which files are linked to the project, choose Mark Site Files from the View menu. In the Project panel, red crosses appear next to all files that aren't linked into the project, and blue check marks appear next to all files that are linked into the project. Choose Mark Site Files again to hide the checks and crosses. Orphan files can also be found using the Orphan Files... command in the Site menu. (See Finding orphan files.)

If you double-click on a file in the Project panel or select a file and press Enter, it will launch the application associated with the file type (just like the Windows Explorer). You can also drag a file icon from the Information Manager and drop it on another application icon to launch that application with the file. For example, you could drag an HTML file from the Information Manager and drop its icon onto the Web browser icon to open the Web browser with the file that you dragged and dropped.


Viewing the link structure of your project

To show the link structure of your project, look at your project in the Link panel, which occupies the right side of the Information Manager window. The views that appear in the Link panel do not show the file structure of your project; instead, they show the structure of the hyperlinks. While each icon in the link display represents a file, the structure of the link display reflects the links between files, and not the actual file and folder structure. That is, if a file makes a reference to another document or image, the file that the link refers to and the file that contains the link will be connected by a line in the link views.

Views in the Link panel

There are three different views in the Link panel: you can view your project in a Web View, in a Tree View, or in a Single File View:

•	The Web View shows the structure of the links in your project as a visitor to your site might follow those links—radiating out from the home page of your project.

•	The Tree View shows all the links to all the files in your project—the complete list of links.

•	The Single File View shows all the links into and out of the selected file.

More details on exactly what you are seeing in each view are given below, in the sections on each view.

To change views, do one of the following:

•	Click on the Web View, Tree View, or Single File View tabs at the bottom of the Link panel.

•	Press Ctrl+Alt+W (Web), Ctrl+Alt+T (Tree), or Ctrl+Alt+F (Single File).

•	Choose Web View, Tree View, or File View from the View menu.

•	Press Ctrl+Tab to cycle between views.

The link views show both local and external links (links to pages on the World Wide Web). However, the Information Manager does not automatically check the validity of those off-site links, nor does it show pages linked to those off-site Web pages. You can check your off-site hyperlinks by choosing External Links... from the Site menu. See External Links  for details.

Note:  Since the link views show only files that can be reached by outward links starting at the home page, they will not show files in the project that aren't linked into the project via the home page or files linked to the home page. You can see those `orphan' files in the Project panel, and you can identify and group orphan files by choosing the command `Orphan Files' from the Site menu (see Finding Orphan Files for details).

  More on this topic


Viewing options in the Link panel

By default HTML (.htm, .html, .shtml) files in the Link panel are displayed using their titles (the content of their TITLE element, if there is any). Image files and other files linked to the project are displayed using their actual file names.

You can toggle between showing filenames and showing titles for HTML files by right-clicking in any view in the Link panel and choosing Show Filenames or Show Titles. Files without TITLE elements will always be shown with a file name.


Viewing your project as it would appear on the Web

Web View

To check the validity of links in your document, get a sense of the overall shape of your project, and determine the route that users will follow when they access your information, use the Web View.

To display the Web View:

•	Click on the Web View tab at the bottom of the Link panel or choose Web View from the View menu.

The Web View display shows the link structure of your project as if it were sliding on the surface of a sphere. It's called the Web View because it looks like a web, and also because it most closely resembles the way that users will navigate your site when they encounter your pages on the World Wide Web.

The Web View uses a `breadth-first' method for displaying links. This means that when displaying the links for a page, the Information Manager will give priority to displaying the direct links from that page, rather than displaying all the sub-links from individual pages.

To navigate around the Web View and move other files closer to or farther away from the center of the Web View, move your mouse cursor in the panel until it becomes a hand (it should not be directly above a file). Clicking the left mouse button causes the hand to `grip'; keeping the mouse button held down allows you to move the Web View over the surface of the sphere, moving different files into view.

Showing all links from a file

You can recalculate the Web View to show all links based on a selected file. Choose Show All Links from the pop-up menu that appears when you right-click on a file in the Web View. Choosing Show All Links shows all links that radiate out from the selected file, and not just the links that radiate outward from the home page. This is similar to the Single File View, which shows all the links both into and out of one particular file, except that Show All Links only shows the links going out of the current file (as well as other links in the project).

  More on this topic


Displaying links in the Web View

The labels for the file names and links in the Web View are displayed in different colors, which show how they are linked into the project.

The legend describing the different colors and their meaning appears at the bottom of the Web View.

You can show or hide the legend by choosing Legend from the View menu, or right-clicking on the background of the Web View and choosing Show Legend / Hide Legend.

The different colors of the files in the Web View indicate the different types of links in a project:

•	Black – HTML file, image file, or other type of file.

•	Green – Home page of the project.

•	Red – Broken link.

•	Blue – External (World Wide Web) link, outside the local file system or a file outside of the current project folder.

•	Yellow – The currently selected file(s).

When you select any file in the Web View, the path to that file is shown at the bottom of the Information Manager window, and the corresponding file is highlighted in the Project panel, so that you can compare the Link panel with the actual file and folder structure of the project.

See Viewing options in the Web View for information on configuring the appearance of the Web View.


Viewing options in the Web View

Right-clicking on a file in the Web View brings up a pop-up menu that lets you change some viewing options. (Many of the other commands in this menu also appear when you right-click in the other panels.) The following options are available:

•	Show All Links – Recalculates the links using the current file as the temporary `home page'.

•	Full View/Minimal View — Full View shows all linked files in the project; Minimal View shows only certain kinds of files: by default, it shows HTML, plain text, and MS Word documents.

Note: The filetypes displayed in Minimal View can be configured by adding or deleting MIME-type entries from the `Minimal Mime Types' section of the `infomgr.ini' file.

•	Right Align – Toggles between displaying files linked to the home page clustered at the right edge of the Web View `sphere' and displaying them spaced around the entire sphere.

•	Display Long Text – Toggles between full and truncated link names. Sometimes the Web View is easier to read if the link names are abbreviated.

•	Show Legend / Hide Legend – Toggles between showing or hiding the legend at the bottom of the Web View.

There is also a command called Fix Broken Links in this menu. It is only used when there is a broken link in your project (displayed in red in the Web View). See  Fixing broken links for more information.


Structure of the Web View

The Web View is based on a home page, and all links are shown relative to that home page, and `outward' from the links on that home page. This means that `sideways' links between documents are not immediately visible; only links that go outward from the home page are visible. For example:

In this diagram, there are `outward' (`parent to child') links between file a.htm (the home page) and the files b.htm, c.htm, and d.htm. There is also a `sideways' (`child to child') link between b.htm and c.htm. The Web View, working outwards from the home page, a.htm, would show the links to files b.htm, c.htm, and d.htm; however, it does not show the link between b.htm and c.htm:

You can recalculate the Web View to show all links based on a selected file. Choose Show All Links from the pop-up menu that appears when you right-click on a file in the Web View. Choosing Show All Links shows all links that radiate out from the selected file, and not just the links that radiate outward from the home page. If links are recalculated when the b.htm file is selected, the following Web View would be shown:

In this case, the links between b.htm and c.htm are shown, since the links have been recalculated based on b.htm.


Viewing all the links for a particular file

To get a quick summary of all the links going into and coming from a particular file, use the Single File View.

To display the Single File View for a particular file:

•	Click on the file to select it.

•	Click on the Single File View tab at the bottom of the Link Panel or choose Single File View from the View menu.

The Single File View lets you check all the links in one file:

•	The file that you have currently selected is displayed at the center of the Single File View.

•	All the links leading into that file are shown on the left as file icons and names with arrows pointing towards the central file.

•	All the links going out from that file are shown on the right as file icons and names at the end of arrows pointing away from the central file.

Note: Files can link to themselves: bookmarks (document-internal links) will be displayed in the Single File View as links to a file icon for the same file.

The icons in the Single File View give you some information about what kind of file is being represented.

•	 – An HTML file on the local file system.

•	 – An image file.

•	 – An external Web page link on the WWW.

•	 – A link to a Usenet newsgroup.

•	 – A link to an FTP site.

•	 – A broken link to an HTML file.

•	 – A broken link to an image file.

•	 – An email (mailto) link (see Links ).

For details of how to repair broken links, see Fixing broken links.

To display all the links for a file that's already visible in the Single File View:

•	Click once on that file. It becomes the central file, showing all the links into and out of that file.

The Show All Links command  in the Web View is similar to the Single File View, but shows only the links from the selected file.


Viewing all of the links in a project

Tree View

If you want to see all the links from all files, select the Tree View.

To display the Tree View:

•	Click on the Tree View tab at the bottom of the Link Panel or choose Tree View from the View menu.

The Tree View gives you a more familiar hierarchical display, but it shows the links in the project, not the actual file structure. The home page for the project is shown at the top of the Tree View, and the files linked to the home page are shown in descending hierarchical order.

One of the important features of the Tree View is that it can show every link from every file, including files that were previously referred to. For example, if a file has fifteen links to it, then it will be seen fifteen times in the expanded file list of the Tree View, since each instance of a file icon is a link to the file. This means that the Tree View can get quite lengthy, especially for large projects.

Note: Files can link to themselves: bookmarks (document-internal links) will be displayed in the Tree View as links to a file icon for the same file.

Show Duplicate Links

To toggle between showing every link and showing only links to unique files:

•	Choose Show Duplicate Links in the View menu or right-click on the Tree View and choose Show Duplicate Links from the pop-up menu.

 Levels of hierarchy can be collapsed or expanded by clicking on the [image] or [image] icon to the left of each file icon, or select the file icon and press the right or left arrow keys.

The icons in the Tree View give you some information about what kind of file is being viewed.

•	 – An HTML file on the local file system.

•	 – An image file.

•	 – An external link to a Web page.

•	 – An external link to a newsgroup.

•	 – An external link to an FTP site.

•	– A link to an email address (mailto).

•	 – A broken link to an HTML file.

•	 – A broken link to an image file.

For details of how to repair broken links, see Fixing broken links.

Because the Tree View shows the links of every file (in contrast to the Web View display), selecting one file in the Project panel or Pocket panel may highlight several icons in the Tree View, showing several different links to that file.


Creating new projects

When you choose New Project from the File menu, you have the option of creating a new project from existing files, from a template, or from the Site Maker wizard.

Site Maker

To launch the Site Maker:

•	Choose New Project, and then choose From Site Maker... from the sub-menu.

Site templates

To create a new project from one of several templates:

•	Choose New Project, and then choose From Template... from the sub-menu.

See Developing your Web site for information about creating a project from a template or from the Site Maker.

Existing files

To create a project based on an existing set of HTML files:

•	 Choose New Project and then choose From File... in the sub-menu.

 A dialog box in which you specify a root page for the new project appears.

The root page must be specified in order to build different views of the project. The root page is the starting page for the Web View and Tree View; it is generally the page where many links to other pages are found. This file may be an index page, a table of contents page, or a welcome page in a group of HTML documents. Often, the root page of a project has a name such as index.htm or home.html.

•	Choose the root page for the project.

•	Click on Open to import the project and build the views.

 (See Link panel  for a description of how Link views work.)

When you create a new project, two files are created that store the information about the home page of the project, the link structure of the project, which files have been published, what Pockets have been created, etc. These files have the same name as the root page of your project, with a different file extension (.hpp and .hmp). You do not need to edit these files.


Remapping a project after changes

If the file or link structure of a project has been updated—for example, if a file has been deleted or a new link added—the Project and Link panels need to be updated: this is called remapping. The Information Manager re-scans your project, and updates the panels and the .hpp and .hmp files.

If you change the project from the Information Manager, it will be remapped automatically.

If you make a change with HoTMetaL PRO Editor or with another application (such as Windows Explorer), Information Manager will prompt you to remap the site. Click on OK. In the case of changes made with the Editor, you can turn off prompting, causing the Information Manager to remap immediately, in the background.

•	Choose Options... from the Information Manager Tools menu.

•	Turn on Immediate remap on Editor saves.

Choosing Remap links from the Site menu, pressing F5, or clicking on the [image] toolbar button will cause an immediate remap.


Opening an existing project

To open an existing project:

•	Choose the project file from the list in the File menu of the last four opened projects.

Or:

•	Do one of:

•	Click on the [image] toolbar button.

•	Press Ctrl+O.

•	Choose Open Project... from the File menu.
A dialog box appears, asking you to choose a project (.hpp) file.

•	Navigate to the project file that you want to open and select it.

The project will be opened in the HoTMetaL PRO Information Manager.

The last four previously opened or imported projects are listed in the File menu, above the Exit command. Choosing a project file from that list will open it in the Information Manager.


Adding existing pages to a project

Use the Import Site... command to add an existing HTML page (and some or all of the pages linked to that page) to a project. This is useful when you want to expand your current project in some way, or merge two or more sites into a single project.

To import an existing HTML file or files:

•	Have a project open.

•	Choose Import Site... from the File menu.

•	Select the root page of the site that you want to import from the Open dialog box that appears.

When you have selected the home page, the Import Site dialog box appears.

The structure of the site that you are importing is shown in a view similar to the Web View. In this dialog box, you must specify:

•	The level of associated files that you want to import.

•	The destination folder for the imported site.

•	Whether you want to import all files or selected files.

•	Choose the destination folder (that is, the project that you want to copy the files to) by either entering the path to that folder in the Import Destination text box, or clicking on Browse... to navigate to the folder.

You can select the number of levels of files linked to the main file that you want in the site that you're importing. By clicking on the Number of levels displayed control, you can choose the number of levels, from zero (just the home page) to the maximum in the site. The level control will only go up to the maximum number of levels in your site (which, if you're just importing one file that's not linked to any other file, will be zero). Clicking on Map Now will redisplay the site with the selected level of files.

Note: Only links to local files are displayed in the `Import Site' dialog. If there is a link to an external site, that page will not be displayed or imported.

You can import all of the files linked to the root page—to the maximum number of levels or to a selected level—or select individual files.

To import all of the linked files:

•	Turn on All Visible Levels.

•	Increase the Number of levels displayed as high as it will go.

•	Click on OK.

To manually select which files you want to import:

•	Turn on Selected Files Only.

•	Click on a file in the Web View of the Import Site  dialog. As soon as you click on a file, all other files become blue (deselected). The file you are clicking on remains yellow (selected).

•	To select more files, hold down the Control key and click on the file icons.

To re-select all visible files in the site, turn on All Visible Levels and use the Number of levels displayed control to show as many levels as you want to import.

When you have chosen both the file to import and its destination folder, click on OK in the Import Site dialog box; the files you have selected will be copied to the specified folder. If you choose a file that is linked to files in subfolders, the same file and folder structure will be re-created in the new location. You will be warned of any name conflicts with existing files and folders and given the chance to cancel the import if that occurs. The Information Manager will rebuild the views to show the new HoTMetaL PRO file that you have imported.

Note: A file imported into your project might not have any links to other files in your project. You may need to add links that point to the new file in order to make it part of the link structure of the HoTMetaL PRO project. You can do this by editing files, or by dragging and dropping files in the Information Manager. See Creating links by dragging and dropping for details.


Creating a new folder

To create a new folder in the current project folder:

•	Choose New Folder in the File menu.

This creates a new, empty folder, which is displayed in the Project panel. You can give the new folder a name when you create it, or you can right-click on the folder icon later and choose Rename from the pop-up menu.


Managing files and links between files

You can cut, copy, paste, delete and rename files in the Information Manager Project panel, and the Information Manager will help you keep track of and maintain the links to those files.

You can move or copy files within the Project panel much as you would in the Windows Explorer, by dragging and dropping files and folders. You can also choose the appropriate command from the Edit menu or from the right-click pop-up menu.

•	Cut (or press Ctrl+X) – Cuts the selected file or folder. You can paste the file or folder using the Paste command.

•	Copy (or press Ctrl+C) – Copies the selected file or folder.

•	Paste (or press Ctrl+V) – Pastes a file that you have cut or copied.

•	Delete (or press Delete) – Deletes the selected file or selected folder and all its contents. The file is sent to the Recycle Bin, and is not permanently removed from the disk until you empty the Recycle Bin.

To restore the file:

•	Open the Recycle Bin.

•	Right-click on the file and choose Restore from the pop-up menu.

The file will reappear in the folder you deleted it from. (You will need to choose Remap links from the Site menu, or press F5, to see the restored file in the HoTMetaL PRO.)

•	Rename – Lets you rename the selected file. The name of the file becomes editable, and the name change takes effect when you click outside of the file name or press Enter. When you finish renaming a file that is linked to other files, the Site Doctor dialog box appears.

If you click on Yes in this dialog box, the Site Doctor automatically updates all links to the file in the current project with the new filename.

•	You can create a new folder in the project by choosing New Folder from the File menu, or right-clicking on the Project panel and choosing New Folder from the pop-up menu. This command creates a new folder within the selected folder of the Project panel, which you can then rename.

When you move or rename a file, the Information Manager starts the Site Doctor; this will update the links as needed, so that they don't become broken. When you move a file, the links within the file that refer to other documents are not updated; in other words, moving the file will correctly update the files that  refer to the moved file, but may create broken links within that moved file.

Deleting a file can create broken links in your project; use the Link Views and the commands in the Site menu to check the link structure of your project.

Any of these operations can also be carried out by selecting the file and then choosing the appropriate command from the Edit menu or the pop-up menu.


Creating links by dragging and dropping

You can create links by dragging a file in the Link panel onto another file in the Link panel, from the Project panel onto a file the Link panel, or from Windows Explorer onto a file in the Link panel. The Site Doctor will appear, asking you if you want to create a link in the file that you are dragging onto, to the file that you are dropping.

The link that you create by dragging and dropping will be inserted at the top of the document; the initial hot text will be the path to the file. If you want to change the hot text or position of the link, edit the file using the HoTMetaL PRO Editor.

Note: It is not possible to drag a link into the Link panel from a browser window.


Changing your URLs for the Web

Before a completed HTML document is moved to a WWW server, all URLs should refer to documents that are available on some WWW server. (While the document is being created, they may refer to documents on your local system.)

For the most part, links in your HTML pages will have relative URLs, which won't be a problem on the WWW. However, in some cases (for example, when you create links to an unsaved document, or copy and paste links from other documents), your links may have absolute URLs that start with file:///. These links are not accessible over the WWW:

file:///c|/rodney/orwell/homage.htm

When the document is placed on your server, you must substitute URLs that refer to documents that are available on your server or some other server. For example:

http://www.sq.com/orwell/homage.htm

In the HoTMetaL PRO Editor, the Find and Replace URLs... command in the Edit menu gives you the opportunity to edit all the URLs, modifying them if necessary. This command is a form of `find and replace' for URLs.

To find and replace URLs:

•	Launch the HoTMetaL PRO Editor.

•	Open the document that you want to find and replace the URLs in.

•	Choose Find and Replace URLs... from the Edit menu.

A dialog box will appear containing two  text boxes.

 The first box (labeled Change URLs From) contains a part of the URL that you want to change; the second box (labeled To) contains the text that you want to change it to. You can enter text in these boxes to replace the default text.

If there were a large number of URLs for which you needed to change a local folder such as   file:///c|/rodney  to a server address, such as http://www.sq.com, you could enter:

file:///c|/rodney

 in the Change URLs From  text box, and:

http://www.sq.com

in the To text box.

  More on this topic


Finding and replacing URLs

When you click on Find Next, HoTMetaL PRO finds the next element that has a URL matching the Change URLs From text. The insertion point is placed inside that element, and the document scrolls to its location. The search starts at the insertion point or selection.

Clicking on Replace will change the text you're searching for to the text in the To box.

 Clicking on Replace All will make this change for all URLs in the document that contain the Change URLs From text. This also dismisses the dialog box. (The number of replacements is shown in the status bar at the bottom of the HoTMetaL PRO Editor window.)

This form of `find and replace' matches only starting at the first character of the URL.


Changing to relative URLs

You can change your URLs so that they are in relative rather than absolute form. What this generally involves is deleting the first part of all URLs; that is, the scheme, the host, and perhaps part of the path. For example, if your current links were all of the form file:///c|/rodney/orwell/file.htm and you wanted to put them in a directory on the Web, it could be useful to put them in relative form, if all your files were in a flat directory on your web site. In the Change URLs From text box, you would type file:///c|/rodney/orwell. You would not type anything in the To text box. The effect of that changing URLs operation would be to strip the scheme, host, and most of the path, and leave you with file.htm for all your URLs. For more details on relative and absolute URLs, see Links.


Publishing

Publishing a project means moving your documents to a server so that other users can have access to your project. The publishing component of the Information Manager lets you publish some or all of your files to a local or remote server. Once you have specified the destination server for your documents, the publishing component of the Information Manager will deliver the files to the location you specify, automatically logging into the server, if it's a remote site.

To publish a project, do one of the following:

•	Click on the [image] toolbar button.

•	Choose Publish... from the File menu.

•	Press Ctrl+Shift+P.

The Publish project to Web site dialog box appears.

There are two steps to publishing your project:

1	Specify the destination server that you want to move files to (see Choosing the server ).

2	Mark which files in the project are to be published (see Choosing which files to publish).

  More on this topic


Choosing the server

If you have defined one or more destination servers in previous publishing operations, a list of destination servers will appear in the Select Site drop-down list at the top of the Publish Project to Web Site dialog box. You can choose a server from that list or define a new destination.

Define a new destination

To define a new destination:

•	Click on Setup....

The Destination Site dialog box appears.

The list of destinations that have already been created (if there are any) is at the bottom of the Destination Site dialog box in a scrollable list. To edit an existing destination, select it from the list; all of the details of that destination server will then be displayed in the upper half of the dialog box (the Server area). To delete a destination from the list, select it and click on Delete.

To create a new destination:

•	Click on New.

•	Now enter the information describing the destination server.

To edit a new or existing destination:

•	Enter a descriptive name for this destination in the Name text box. The server will be identified by this name in the Destination list.

•	If the destination is a server that is mounted on your PC's file system (that is, accessible through Windows Explorer), click on the Local  radio button in the Server area of the dialog box. If the destination is a remote file server, which will require you to log into a different machine, choose the Remote radio button in the Server area of the dialog box.

Local server

If you have chosen a local server:

•	Enter the path on the local server in the Path text box. You can also use the Browse... button to select the path: you will be presented with a dialog box where you can navigate to the folder on your local file system that you would like to publish to.

Remote server

If you have chosen a remote server, several text boxes appear.

•	Enter the server name of the computer on the network that you are publishing to in the Host Name text box; for example, ftp.your_isp.com

•	Enter your User Name and Password for that computer in the text boxes. You also need to specify the path on the remote server: enter the path in the text box provided.

•	When you have finished entering hosts, click on OK to return to the Publish Project to Web Site dialog box.


Choosing which files to publish

The Mark files for Publishing section of the Publish Project to Web Site dialog box lets you choose to publish some or all of the files in the current project.

The Mark files for Publishing panel shows your project in an expandable hierarchical view of the actual files in your project, much like the Project panel. Check boxes appear to the left of the files in this panel, indicating your selection of files to be published. To select all the files in the project for publishing, click on the All button to the right of this display: green check marks appear to the left of the files in this publishing panel.

Clicking on None deselects all the files, and the checkmarks disappear.

You can also select or deselect individual files for publishing in this publishing panel by expanding the display—clicking on the plus or minus sign to view the files within the folders—and then clicking on the check box with the mouse cursor; the mouse-click changes the publishing status of a selected file to deselected and vice versa. If you deselect some of the files in a folder, the folder checkmark color changes from green to gray, indicating that not all the files in that folder have been selected. If you wish to select all the files in that folder, click on that check box again and it will turn to green.

If desired, you can click on Use Filters to select or deselect certain files or file types: the set of files that this applies to is configurable.

Now you can send your files to the destination server.


Filtering file selections

In addition to selecting and deselecting certain files in the Publish Project to Web Site dialog, you can specify that certain files or file types will be selected or deselected at the press of a button.

The choices you make are called filters because they filter out unwanted files. To create filters, you have to edit the file infomgr.ini in the Windows folder, using a text editor such as Notepad.

•	Go to the [publisher] section of the infomgr.ini file.

•	If you want orphan files to be deselected by default, locate the line:

exclude_orphans=false

Change it to:

exclude_orphans=true

 If you want orphan files to be selected by default, do nothing.

•	By default, new files or files that have changed since the last time you published them will be selected. If you don't want this behavior, locate the following line :

check_last_pub_date=true

Change it to:

check_last_pub_date=false

•	If you wish to specify an exclusion list, a list of files and/or file types to be deselected by default, locate the following line:

use_exclusion_list=false

Change it to:

use_exclusion_list=true

 If you don't want to use an exclusion list, do nothing.

•	To create an exclusion list, add lines such as the following:

exclusion0=*.txt

exclusion1=carolyn.doc

exclusion2=valerie.*

The first line excludes all files with the .txt file extension; the second line excludes the file carolyn.doc; the third line excludes all files that start with valerie. You can have up to 10 exclusions (that is, up to exclusion9).

•	When you've made the desired changes, save the infomgr.ini file.

•	To cause these filters to be loaded, close the Publish Project to Web Site dialog box (if it's open), and choose Publish... from the File menu.

To apply your filters:

•	Click on the Use Filters button in the Publish Project to Web Site dialog box.


Completing the publish operation

Once you have selected a host and marked the files that you want to publish, click on Publish at the bottom of the Publish Project to Web Site dialog box to copy the files to the selected server. The Publishing Progress... dialog box appears.

Status reports on the file transfer are shown at the bottom of this dialog box. Clicking on Stop stops the transfer. If you have specified directories in the path for publishing, they will be created: a dialog box will appear, asking you if you would like to create the specified directories.

You can also use one of the HoTMetaL PRO Power Tools to publish locally. HoTMetaL PRO provides the ZBServer PRO server, which allows you to publish files to a local drive and view them as if they were on the World Wide Web. This can be useful if you want to test CGI scripts and other features of Web pages that only work if pages are being served. You would need to publish the files to a local drive, accessible to ZBServer PRO. See  Running a local Web server for more information.


Setting the default editor and browser, and other options

You can set the default editor and viewer (Web browser) for the Information Manager by choosing Options... from the View menu. The Options dialog box appears.

In this dialog box, you can select an HTML viewer (that is, a Web browser), an HTML editor, and a cascading style sheet editor for your documents by clicking on Browse... and selecting the appropriate file. When you install HoTMetaL PRO, these options are set to the HoTMetaL PRO Editor and to the default browser that you selected during the install process.

You can choose whether the Information Manager will map the links within MS Office 97 documents by clicking on the Map Microsoft Office 97 Documents check box in the General section of the Options dialog box.

If you turn on Web View Smooth Scroll, the Web View will scroll more smoothly when you highlight a different file in the Project panel and the Web View scrolls to display the highlighted file in the center of the panel. This form of scrolling can be slower if you are displaying a large project.

By default, if you make a change to the file or link structure of the project with HoTMetaL PRO Editor, Information Manager will prompt you to remap the site. You can turn off this prompting, causing the Information Manager to remap immediately, in the background.

•	Choose Options... from the Information Manager Tools menu.

•	Turn on Immediate remap on Editor saves.

You can also configure the Information Manager to work with a proxy server.


Configuring a proxy server

Often, organizations with Internet access route their access through one machine, called a proxy server (or gateway or firewall), for security reasons. The proxy server, which is connected directly to the Internet, takes Internet requests and sends them out on the Internet, returning the responses to your computer.

In order to access the Internet from behind a firewall, you must configure your Internet software with the address of the proxy server. The Information Manager can be configured to use a proxy server for publishing and checking external links.

To configure a proxy server:

•	Choose Options... from the View menu.

•	Click on the Automatic Proxy or Manual Proxy radio button if you want the Information Manager to route its Internet information requests through the proxy server.

If you have set a proxy in your Web browser or directly from the Internet control panel under Windows, you can use those settings automatically by turning on Automatic Proxy. If not, you may need to ask your system administrator for this information.

To configure a manual proxy:

•	Enter the name or IP address of your proxy server in the IP address text box.

•	Enter the port in the Port text box.

You can also set a list of Exceptions: these are locations that the Information Manager can access directly without having to go through a proxy. The Options dialog allows you to set either local (intranet) addresses or use the bypass list from the registry.

If you have set a location for publishing that is in on a local intranet, selecting Local intranet addresses will allow publishing to that location without using a proxy. (Note that an address is considered to be local if it consists of exactly one word, without a domain. For example, triptych is considered a local address, but triptych.com is not.) If the selection of local intranet addresses does not have the desired effect, you can use a bypass list.

If you have set a bypass list of addresses that should be accessed without going through the proxy—in your Web browser, or directly from the Internet control panel—you can use those settings automatically by choosing Bypass list from registry.

Some proxy servers use a username@host style of ftp addressing. In this situation, when you are configuring a Destination Site for publishing, make the following settings:

•	Host Name – name of the proxy server.

•	User name – username@host

Make sure that you have selected No proxy or that the proxy server name is in your bypass list.


Manipulating your text

What's covered in this chapter

This chapter describes using the HoTMetaL PRO Editor to work with the text in your document. Topics include:

•	Selecting, copying, cutting, and pasting text.

•	Spell checking a document.

•	Finding alternative words in the thesaurus.

•	Searching and replacing text.

•	Moving between open documents.

•	Printing your document.

Reference

You can work with your text in the HoTMetaL PRO Editor much the same way you would in a word processing package, editing and moving words to reflect changes to the information in your document. There are, however, some minor differences that reflect the fact that you are working with a structured document that contains markup as well as text.

  More on this topic


Working with selected text

In HoTMetaL PRO, it is easy to select and move around parts of the document structure in the Editor without having to worry about making the markup invalid. Each time you select a start- or end-tag when you drag-select text, the corresponding tag (and all the content in between) is automatically selected, too. This ensures that you never cut, or move, just part of the markup. There are also a number of ways to quickly select a whole element (and any sub-element).

To select an element, do one of the following:

•	Choose Select Element from the Edit menu, or press Ctrl+Shift+T.

•	Right-click anywhere in the element and choose Select Element from the pop-up menu.

•	In Tags On view, you can also click once on either the start- or end-tag.

The element is selected.

To select several consecutive elements:

•	Place the insertion point anywhere in the first element to be selected, and drag in the appropriate direction until all of the elements are selected.

The Cut, Copy, and Paste commands are similar to those in other Windows applications. The only difference is that in HoTMetaL PRO, a selection can contain elements. Removing or pasting certain elements can cause invalid markup in some circumstances.

The Editor will not paste a selection that would cause the markup to become invalid. Cut and Delete will become disabled if you select required elements, such as HTML, HEAD, and BODY.

To select all the content in a document, do one of the following:

•	In Tags On view, place the insertion point just inside the BODY tag, and choose Select Element from the Edit menu.

•	With the insertion point anywhere in the document, press Ctrl+A.


Spell checking text

You can use the Spelling... command on the Tools menu to spell check selected text or the full document, using one or more dictionaries.

To spell check text, do one of:

•	Choose Spelling... from the Tools menu.

•	Press F7.

•	Click on the [image] toolbar button.

HoTMetaL PRO spell checks the document, starting at the insertion point, continuing to the end of the document (or the end of the selected text), and wrapping around to the top of the document. If a word is found that has no entry in any of the dictionaries, a dialog box appears: the word is displayed at the bottom of the dialog box next to the label Misspelled Word and is also highlighted in the document.

The dialog box will list a number of possible substitutions, based on words with spelling or pronunciation close to the unrecognized word.

  More on this topic


Dealing with misspelled words

If one of the possible substitutions is the correct word, click on that word. The word then replaces the unrecognized word in the Replace with text box. You can also type replacement text directly in the Replace with text box. When you are satisfied with the choice in the text box, click on Replace. The word is replaced in the document and spell checking continues.

If the unrecognized word is correct (perhaps it is a proper name or technical term), then do one of the following:

•	If you expect this word to appear often (for example, your company name), click Add to Dictionary. If there is no current user dictionary, the Load Dictionary dialog box appears. Type a name for your user dictionary (for example, user.dct) and click Open. At the prompt, click Create new dictionary. A user dictionary of that name is created and loaded. After you load the dictionary, click on Add to Dictionary again. The word is added to the dictionary and spell check will not stop for this word again.

•	If the word appears throughout the current document, but is not a word that will appear regularly in other documents, click on the Ignore button. The word will be added to a temporary list of correctly spelled words and will be ignored for the duration of this HoTMetaL PRO session, but will not be added to the dictionary. The next time you use HoTMetaL PRO with the same dictionaries, spell check will stop at this word.

•	If you think this is the only occurrence of the word, click on the Next button. The speck check will resume without changing the word. If the word occurs again, spell check will stop at it.

A notification prompt appears when no more misspelled words are found.


Restricting spell checking

To restrict spell checking to a section of your document, first define the search area and then enable restricted spell checking.

To define the restricted search area:

•	Select the section of the document to be spell checked.

•	Choose Spelling from the Tools menu.

•	Click on the Set Restriction button.

The restricted search area is now defined. Spell checking will be restricted to this area when restricted spell checking is turned on, even if another area of the document is selected.

To turn on restricted spell checking:

•	Turn on the Restrict check box in the Check Spelling dialog box. Now, you can proceed with spell checking.


Choosing a spell checking language

British spell checking dictionaries are available with HoTMetaL PRO 4.0, but are not supplied with the Evaluation Version you are now using. For ordering information, choose `How To Purchase' in the `Help' menu.

HoTMetaL PRO includes system dictionaries for both American English and British English. System dictionaries cannot be edited. The default is American English, unless you specified otherwise during the HoTMetaL PRO installation.

To switch to British English:

•	There are two parts to this procedure. First, open the file hmpro4.ini in a text editor and find the line:

spell_checking_language=AMERICAN

•	Change it to:

spell_checking_language=BRITISH

•	Save the file.

Then, change the supplementary dictionary and user dictionary options to British English:

•	Choose Options... on the Tools menu.

•	Click on the Spelling tab.

•	Click on the Choose... button beside the User dictionary text box and select the file userb.dct in the lib\spell folder in the HoTMetaL PRO folder.

•	Delete the supplementary dictionary hmpro4.dct by selecting it, and clicking on the Delete button.

•	Add the supplementary dictionary hmpro4b.dct by clicking on the Add button and selecting the file from the lib\spell folder in the HoTMetaL PRO folder.

•	Click on OK.

•	Close HoTMetaL PRO and start it again.


Loading a user dictionary

You can add your own list of words to a personal user dictionary. This is a way to avoid having the spell checker stop repeatedly for proper nouns and jargon that you use regularly.

You can load a different dictionary during a HoTMetaL PRO session, but only one user dictionary can be loaded at a time. The default user dictionary is the file user.dct, located in the lib\spell folder in the HoTMetaL PRO folder.

To select a default user dictionary:

•	Choose Options... from the Tools menu. The  Options dialog box appears.

•	Click on the Spelling tab.

•	Click on Choose... to select a user dictionary.

To create a new user dictionary or load an existing user dictionary:

•	Choose Edit Dictionary... from the Tools menu.

•	If no dictionary is currently loaded, the Load Dictionary dialog box appears. If there is a dictionary loaded, the Edit Dictionary dialog box appears. Click on the Load Dictionary... button. The Load Dictionary dialog box appears.

•	Select the name of the dictionary you want to load. If you enter the name of a file that does not exist, you will be prompted to create a new dictionary.

User dictionaries are binary files and cannot be modified with a text editor.

To edit a dictionary:

•	Create or load the user dictionary. The Load Dictionary dialog box appears.

•	Choose Edit Dictionary.... The Edit Dictionary dialog box appears, containing a list of words in the current user dictionary.

•	To add a word to the dictionary, type the word in the Word text box and click on the Add Word button.

•	To delete a word from the dictionary, click on the word in the list and then click on the Delete Word button.

You can also add words to the user dictionary as they are found by the spell checker.

Changes to the user dictionary will be saved automatically when you exit HoTMetaL PRO, save the current file, or switch dictionaries.


Supplementary dictionaries

You can specify up to 24 supplementary dictionaries, or lexicons, of specialized terminology for your specific field. Unlike user dictionaries, supplementary dictionaries cannot be modified during a spell checking session. Supplementary dictionaries are created and edited using Edit Dictionary, like other dictionaries.

Enter the names of supplementary dictionaries that you want to use in the Spelling section of the Options dialog box. HoTMetaL PRO includes a default supplementary dictionary containing Internet-related terms, hmpro4.dct.


Using the thesaurus

HoTMetaL PRO includes an online thesaurus. You can look up a word in your document and display meanings for that word. You can also view any of the following lists of related words:

•	Synonyms – Words that have the same or similar meaning as the current selection.

•	Antonyms – Words that have the opposite or near opposite meaning to the current selection.

•	Related Words – Words that have similar meanings, but are not as close as synonyms.

•	Contrasted Words – Words that oppose the current selection, but are not direct opposites.

•	See Also – Words that describe ideas related to the current selection.

To look up a word in the thesaurus:

•	Highlight the word in the document to look up.

•	Do one of:

•	Choose Thesaurus... from the Tools menu.

•	Press  Shift+F7.

•	Click on the [image] toolbar button.

 The Thesaurus dialog box appears, with the selection listed at the top. If the thesaurus does not contain the selected word, a message appears to indicate this.

•	To see another meaning for the selected word, click the Next Meaning button.

•	To view a list of related words, select the type of list from the menu. If you want to replace the current selection with a word from one of these lists, click on the word in the list or type any word into the Replace with text box and then click on the Replace button.

•	If you want to view thesaurus information for a new word, select the word in the document and click on the Get Word button.


Searching and replacing text

You can find and replace text, elements, and patterns. Search and replace operations in HoTMetaL PRO are similar to word processing applications with the following differences:

•	Text searches will not find a match if part of the text is found in a separate element. For example, if you are searching for `World Wide Web' and the word `Web' is in an EM element, the text will not be matched.

•	If rules checking is on, text will not be replaced if it will cause incorrect markup. If such a replacement occurs in a `replace all' operation, it will be skipped.

•	Choosing the Undo command after a `replace all' undoes all of the replacements.

To find text:

•	Choose Find and Replace... from the Edit menu, click on the [image] button, or press Ctrl+F. The Find and Replace dialog box appears. If text was selected, it appears in the Find text box.

•	Type the text to be found in the Find text box. The maximum length is 255 characters.

•	Specify replacement text in the Replace text box.

•	If desired, use the Find In text box to restrict your search to a particular element.

•	Click on the Find button. The first instance of the search text will be highlighted.

•	Click on Replace, Replace, Find or Replace All, as appropriate.

To search again using the most recent search text:

•	Choose Find Next from the Edit menu, or press F3.

Note: Turn on Use Pattern Matching to use search expressions.

  More on this topic


Specifying search options

You may want to search forward or backward through your document, match only whole words, match upper- and lower-case exactly, wrap back to the beginning of the document, or do a pattern search. You can set any of these options and even use them in combination.

To search backwards:

•	Choose Find and Replace... from the Edit menu, click on the [image] button, or press Ctrl+F. The Find and Replace dialog box appears.

•	Turn on the Backwards Search check box.

To turn on other search options in the Find and Replace dialog box:

•	Match Case – Searching will match text that is exactly as entered, matching upper case to upper case and lower to lower. For example, the search text `maria' would not match `MARIA' or `Maria'. This option applies to patterns as well as text.

•	Whole Words – Searching will match a sequence of one or more whole words only. For example, if you search for `red' with Whole Words turned on, HoTMetaL PRO will not find it in `Fred'.

•	Use Pattern Matching – Enables the search ability to find patterns. If Use Pattern Matching is turned off, any special search characters in the search or replace text will be treated as ordinary characters.

•	Wrap – Searching will wrap around to the top of the document and continue to the starting point (or to the bottom of the document for a backwards search), if Wrap is turned on.


Searching for elements

Both the search and replace text can consist of an element. Choose an element from the drop-down list or enter an open angle bracket (<), followed by a valid element name. Following the element name with a closing angle bracket (>) is optional. The angle bracket must be the first character. If the element is found, the insertion point is positioned to the right of the start tag for that element. For example,

<P

matches the element P. Element names are not case sensitive in HoTMetaL PRO, so `<p' would also find this element.

If the search and replace text are both elements, the element in the search text will be changed to the type specified in the replace text, if the HTML rules allow it. The contents of the element will be unchanged.

You can also search for instances of an element with certain attribute values, or search for text within a specific element type.


Searching for attributes

You can restrict the search text to an element with specific attribute values by following the element name with a space-separated list consisting of attribute names followed by an equal sign (=), followed by a value in double quotes (" "). For example:

<a name="donkey"

will search only for those A elements whose NAME attribute has the value `donkey'.

You can specify replacement attribute values in the replace text in the same way. For example, to change the above name attribute to `burro', type the following replacement text:

<a name="burro"


Searching for text within an element

In HoTMetaL PRO, you can restrict searches to a particular element type. Use the drop-down list beside the Find In text box to specify the element that you want to restrict searching to; specify the search text in the Find text box. For example, to find the word `now' in an EM element, enter the text in the Find text box and specify the element in the Find In text box, as follows:

<EM

>

Attribute values may also be specified in the Find In text box. For example:

<a name="donkey"

You can also search for specific text anywhere in a specific element type by entering the the element name, with opening and closing brackets, followed by the text in the Find text box. For example:

<EM

>the

This search text would match the word `the' anywhere within a EM element. This is similar to the restrictive searching that can be done using the Find In text. The two options can be used together to further restrict the search. In the above example, if the Find In text is set to:

<P

>

the word `the' would be matched if it appeared in a EM element within a paragraph, but not in any other context.

In the replace text, an element name cannot be followed by text: an error message will appear and the replacement will not occur.

If you have badly-formed search or replace text, an error message will appear, describing the error. For example, if you use the search pattern:

<QUAGMIRE

the following message appears:

Find: Invalid element name

because HTML rules do not allow an element called QUAGMIRE.

Possible errors include invalid attribute or element names, unmatched parentheses and brackets in search patterns, special search characters not preceded by a character, and invalid character ranges.


Using search patterns

If the Find Patterns option is turned on, the characters in the Find text box are interpreted as patterns. That is, the search text can contain special search characters that will match a class of text strings, or markup constructs. (If your search text does not contain any special characters, the text will be searched for exactly as entered.) The following special characters can be used:

. * ? + ^ $ [ ]

In addition, the character `<' is used to indicate an element search when it appears as the first character in the pattern.

To search for any special character as ordinary text when Find Patterns is turned on, precede it with a backslash. For example:

\.

will match a period.

Search patterns may be grouped by enclosing them in parentheses.

Matching any single character

To match any single character, including a blank space, use a period (.). For example

fo.d

would match `food', `ford', `fond', `fold', etc.

Matching zero or one

To match zero or one occurrences of a character, or series of characters enclosed in parentheses, follow the character with a question mark (?). For example:

colou?r

would match both color and colour.

Matching zero or more

To match zero or more occurrences of a character, or series of characters enclosed in parentheses, follow the character with an asterisk (*). For example:

l*ama

would match `ama', `lama', `llama', 'lllama', etc.

b(an)*a

would match `ba', `bana', `banana', etc.

You can combine the asterisk and period to match any text starting and ending with specified characters. For example:

s.*ch

would match `search', `such', `stretch', `stopwatch', as well as `sch' and `skip lunch'.

Matching one or more

To match one or more occurrences of a single character, or text enclosed in parentheses, follow the character with a plus sign (+). For example, the following search text would match `ben', `been', etc., but would not match `bn':

be+n

Matching either/or

To search for either of two search patterns, separate them with a pipe or vertical bar (|). For example, to search for `love' or `money' use:

love|money

You can combine this with other search patterns. For example, to find truth or dare:

tr.th|d.*e

Matching just after markup

To search for text only when it immediately follows a start or end tag, start the search pattern with a caret (^). For example, to find the word `Note' at the start of a paragraph use:

^Note

Matching just before markup

To search for text only when it is immediately followed by a start or end tag, end the search pattern with a dollar sign ($). The dollar sign is not treated as a special search character unless it is at end of a search pattern. There cannot be white space between the text to be found and the tag. For example, to search for the word `sub' immediately preceding a tag, use:

sub$

Matching character ranges

To define a range of characters to be matched, surround the group of characters with square brackets: `[' and `]'. The simplest form of character range matches any one of the characters within the brackets. For example:

t[ai]n

matches `tan' and `tin'.

A range of characters matches any character in that range of the alphabet. For example:

[b-d]

matches `b', `c', or `d'. The pattern:

[A-Za-z0-9]

matches any alphanumeric character. If Case Sensitive is turned off, the character range a-z will match any upper- or lower-case letter.

To reverse the meaning of a character range—that is, to match characters not in the range—place a caret ,`^', before the range. For example:

th[^ei]n

matches `than', but not `then' or `thin'. The expression:

[^m-p]

would match any lower-case letter in the alphabet before `m' or after `p'.

Re-using search text

To use a sub-expression in the search text in the replace text, surround the sub-expression with parentheses—`(' and `)'. Then refer to the sub-expression in the replace text in the form `\n', where n is a number from 1 to 9. This will then be replaced with whatever the nth expression in brackets in the search text has matched. For example, if the search text is:

(.)read

and the replace text is:

\1ox

then if the text `bread' is found, it will be replaced with `box'. The expression \1 is replaced by the matched text for the first expression in parentheses in the search text: in this case `(.)' was matched by `b'. Here's an example with more than one sub-expression. This time, let's say the search text is:

(v.*e) (v.*a)

and the replace text is:

\2 \1

Now, what happens if the text `vice versa' is found? The first sub-expression, `(v.*e)', matches `vice' and the second sub-expression, `(v.*a)', matches versa. In the replace text, the second expression found is followed by the first, so the text becomes `versa vice'.

You can even nest sub-expressions. The sub-expressions are numbered according to the order of their left parentheses. For example, if the search text is:

(cad(abra))

and the replace text:

\2 \1

`cadabra' will be replaced by `abracadabra'.

To retain the entire matched text, use `\0' in the replace text. For example, if the search text is:

fish

and the replace text is:

gone \0ing

then, `fish' will be replaced with `gone fishing'.

You can use `\n' expressions in attribute replacement values: one application of this is to change a group of URLs. For example, if you want to change all of the filenames in your A elements to have the `.htm' file extension instead of `.html', use the following find text:

<a href="(.*)html"

and the replace text:

<a href="\1htm"

The element is matched by `<a'; the attribute that contains the URL value is called HREF; the pattern `(.*)' matches everything in the URL up to the extension; that matched text is substituted for `\1' in the replacement text; and the new extension is added.


Search pattern summary

Expression	Matches
ordinary character	itself
<name or <name>	the element name
.	any single character
x*	0 or more occurrences of the character x
(pattern)*	0 or more occurrences of the pattern
x+	1 or more occurrences of the character x
(pattern)+	1 or more occurrences of the pattern
x?	0 or 1 occurrences of the character x
(pattern)?	0 or 1 occurrences of the pattern
pattern1|pattern2	pattern1 or pattern2
^pattern	pattern immediately following markup
pattern$	pattern immediately before markup
[string]	any single character in the string
[^string]	any single character not in the string
[char1-char2]	any character in the range
[^char1-char2]	any character not in the range
\n	in a replace string, is replaced by the text matched by the nth subexpression in brackets in the search string
\0	in a replace string, is replaced by the text matched by the entire search string


Moving between documents

If you have more than one document open in the Editor, you can move between the open documents in a variety of ways. The Window menu contains a list of open documents in the order that you opened them.

To move between documents, do one of the following:

•	Choose the appropriate file from the Window menu.

•	Choose Next, or Previous, from the Window menu, to move through the open documents in the order that you last viewed them.

•	Click on the [image] and [image] toolbar buttons, to move up and down the list of open documents.

•	Press Alt+Left arrow or Alt+Right arrow, to move up and down the list of open documents.

HoTMetaL PRO also allows you to move between documents by following local links. If your current document contains a link to a file on your PC, you can use this anchor to view or edit the linked document.

To follow a link:

•	Right-click on the anchor. A pop-up menu appears.

•	To edit the linked file, choose Edit Linked Item from the menu. The file opens in the Editor.

•	To view the linked file, choose View Linked Item from the menu. The file opens in your default browser.

You cannot use this feature of HoTMetaL PRO to edit or view external links (that is, to retrieve files from the Web). These commands are also available from the Tools menu.


Printing documents

You cannot print a document directly from the HoTMetaL PRO Editor: you can print your document from your browser.

To print:

•	Choose Preview in Browser from the File menu. The Choose Browser dialog box appears.

•	If required, set up a browser.

•	Once you have opened the file in your browser, use the Print command (usually Print on the File menu) to print the document.


Working with images

What's covered in this chapter

Images are one of the reasons the Web has become so popular. While your pages don't require images, they can make it more interesting to look at and can help you to communicate your ideas. Here's what you'll learn:

•	Displaying images in HoTMetaL PRO.

•	Browsing for images.

•	Inserting images into your page.

•	Editing image properties.

•	Extended image properties.

•	Images and accessibility.

•	Creating `hot' images.

•	Creating clickable image maps.

Reference

In part, the Web is distinguished from other Internet applications (for example, Usenet) by its ability to display inline images. Images have become more important to creating Web documents as the layout and display capabilities of Web browsers become more sophisticated. Using the HoTMetaL PRO Editor, you can insert and display many different image formats in the document window, then use the power of PhotoImpact SE (shipped with HoTMetaL PRO 4.0 but not available in the Evaluation Version) to convert your images for the Web.

PhotoImpact SE is documented in the HoTMetaL PRO online help; see the topic Editing images. PhotoImpact SE also has its own online help. If you want to try out PhotoImpact SE right now:

•	Choose Image Editor from the Tools menu.

Or:

•	Right-click on an image and choose Edit Image File from the pop-up menu.

  More on this topic


Web image basics

While you don't need to be a graphics wizard to insert an image into your page, before you begin it's a good idea to understand a bit about how images are displayed in the HoTMetaL PRO Editor and in Web browsers. If you're already familiar with using images on the Web, you can skip ahead .

Images can enhance the appearance of your page and make it easier to communicate your ideas, but they also increase the time it takes for someone to load your page over the Internet. Here are some guidelines for using images in your Web pages:

•	Try to keep your file sizes small. You can achieve this by keeping the actual dimensions of the image small, and also by reducing the number of colors that are stored in the file. You can use graphics software such as PhotoImpact SE (shipped with HoTMetaL PRO 4.0 but not available in the Evaluation Version) to reduce the number of colors in individual image files.

•	Don't rely exclusively on images to convey your information For example, using only a logo image to give the name of your company means that not everyone will get that important information.

•	Use alternate text for images. Providing a short text description of the image in its ALT attribute makes your page accessible to more people. Not only do some Web surfers still use text-based browsers like Lynx, or surf with images turned off in their browsers to speed up download time, but also people with visual impairments use voice synthesis technology to surf the Web. By taking the time to enter a meaningful description of your image you don't exclude these people from sharing your Web page.

•	Don't use background images that make it difficult to read the text of the page.

  More on this topic


Available image formats

HoTMetaL PRO can display many different image formats (for example, BMP, TIFF, JPEG, PNG, GIF) in the document window. Not all of these image formats are available to Web browsers, however, so you should convert the images before you upload them to the Internet or an intranet. The most common image format on the web is GIF.

All browsers that are capable of displaying images can display GIF files. Most newer browsers can also display JPEG images, and some browsers can display other platform-specific image types. If you want your Web pages to be viewed by the broadest possible audience, however, make sure that your images are in GIF or JPEG format.

Note: The HoTMetaL PRO Editor also supports the PNG image format (portable network graphic), which is a standard file format endorsed by the World Wide Web Consortium. While few browsers currently display this graphics format inline, future releases of Microsoft Internet Explorer and Netscape Navigator will support PNG graphics.

GIF or JPEG?

While GIF files were once the standard image format on the Web, most browsers now support JPEG files as well, and many people are confused about which file format is `better' for their Web images.

In fact, the two file formats are both good at specific tasks. The GIF format uses a maximum of 256 colors, and uses combinations of these to create colors beyond that number. The GIF format is better for displaying images that have been designed using a graphics program, like logos, icons, and buttons. JPEG files can contain millions of colors, and are much better for photographic images.

GIF images come in two different versions and have some extra functionality that JPEGs do not. You can save GIF images in GIF 87 or GIF 89a format. GIF 89a is newer and has the following features that GIF 87 and JPEG files do not:

•	Interlacing – if you save a GIF 89a image as interlaced, the browser will be able to display the image as it loads, getting gradually crisper and clearer until it is finished. Interlaced GIFs have slightly larger file sizes than non-interlaced GIFs, so you will have to decide whether the interlacing effect is worth the extra download time for your images.

•	Transparency – with GIF 89a format images you can set a single color to be transparent, that is, it will allow the background color or image to show through it. Transparency is most commonly used to make the rectangular background canvas of an image invisible; this feature can be very effective in Web page design. The image editing software included with HoTMetaL PRO, Ulead PhotoImpact SE, (shipped with HoTMetaL PRO 4.0 but not available in the Evaluation Version) makes it easy to save transparent GIFs.

•	Animated GIFs – GIF 89a images can also be animated using special software. Animated GIF images are simply a number of GIF images saved into a single file and looped. Netscape Navigator and Microsoft Internet Explorer can both display animated GIFs, but many other browsers cannot, and may not be able to display even the first image in the loop. Use animated GIFs with caution. HoTMetaL PRO includes Ulead's GIF Animator software (shipped with HoTMetaL PRO 4.0 but not available in the Evaluation Version) so you can create your own animated GIF images.

JPEG images don't give you the option of including transparency or of interlacing images, but they do allow you to specify the degree of file compression so that you can create a balance between image quality and file size. To learn more about how to do this using Ulead's PhotoImpact SE, see  Editing Images.


Image color

One of the most difficult aspects of working with computer images—especially over the Internet—is color. Good Web designers must always keep in mind that the images they put on the Web may look different on different machines depending on the user's display capabilities. This section gives a general overview of some image color issues. The Ulead PhotoImpact SE (shipped with HoTMetaL PRO 4.0 but not available in the Evaluation Version)online help contains a detailed discussion of image colors.

Image dithering

Keep in mind that, while your images may look fine on your computer, they may not look as good on other computers that may have fewer colors in their displays. Many users will have computers that have 8 bit displays, that is, they can display a maximum of 256 colors. This means that if a user loads a true-color (millions of colors) JPEG image, the browser has to use two pixels of different colors in combination to create colors above the 256 colors available. This process is called dithering. Because dithering uses two pixels to create a single color, it reduces the image quality.

Browser palettes

In addition, Web browsers use their own internal color palettes (tables of pre-defined colors available to create color images) to display images, which can sometimes result in your true-color images looking different in your browser. Many of the images provided with HoTMetaL PRO are true-color images, and may lose some of their quality on some systems and in some browsers.

Multiple palette problems

If you have a number of GIFs that will appear in a single browser window, you should take steps to maintain the image quality by making sure that their color palettes are compatible. For example, if you have two images, one with 200 shades of red and one with 150 shades of green, your total number of colors is more than 256. On systems that can display only 256 different colors, the browser will have to combine the palettes of each of these images and then dither both images to use the custom color palette. This results in lower image quality for both images. It's best to use a `browser safe' palette for all of your GIF images.


Displaying images in HoTMetaL PRO

HoTMetaL PRO can display graphics in many different formats, including BMP, PNG, JPEG, GIF, TIFF, and others. Images displayed in the HoTMetaL PRO Editor document window are displayed as they would be in a browser; that is, transparency and image size are accurately displayed in the HoTMetaL PRO Editor window. HoTMetaL PRO also displays background images.

All browsers that are capable of displaying images can display GIF files. Most newer browsers can also display JPEG images, and some browsers can display other platform-specific image types. If you want your Web pages to be viewed by the broadest possible audience, however, make sure that your images are in GIF or JPEG format.

You can configure the HoTMetaL PRO Editor to display or hide images and background graphics. The default settings for all documents are configured in the View tab of the Options dialog box (choose Options... from the Tools menu), you can choose whether inline and background images should be displayed in the window or not. This choice will then apply by default to all new documents.

You can override the inline images Options setting for individual documents using the Show/Hide Inline Images command in the View menu. If you don't want images to be displayed in the document, choose Hide Inline Images. The command will then toggle to Show Inline Images: if you choose this command, HoTMetaL PRO will resume displaying inline images.

You cannot override the background images settings in the Options dialog for individual documents.


Inserting images into your page

When you insert an image into your page you are actually creating a link to a graphic file using a URL. The Web browser puts the two together when you load the page. Similarly, HoTMetaL PRO displays the image within the document window so you have an idea of how it will look in the Web browser, although the WYSIWYG view does not exactly match a browser display. If you look at a document containing an image in Source View or Tags on View, however, you will see that the image is represented by an IMG element.

You can insert images into your page by dragging and dropping, or from the HoTMetaL PRO toolbars and menus. HoTMetaL PRO also gives you two powerful ways to browse for images for your page, then drag and drop them where you like. These are the Image Explorer  and the HoTMetaL FX Chooser.

  More on this topic


Inserting images from the toolbars or menu

To insert an image using the toolbars or menu commands:

•	Place the insertion point at the location where you want the image to appear in the document (the document cannot contain a selection).

•	Click on the [image] (Insert Image) toolbar button or choose Image... from the Insert menu.

The Image Properties dialog box appears.

Because images in HTML are represented by links, you have to specify the location of the image file the same way you would for any other kind of link. This information is required.

To specify the image file:

•	Enter the Internet address (URL) for the file in the Image File text box. (If you need more information on URLs, see the Links help.)

Or:

•	Click on Choose... and browse for the file.

In this dialog box you can also specify alternate text, alignment, width, and height. Using the Attribute Inspector, you can also control the image spacing and borders.

 You can bring up this dialog to edit an existing image's attributes in one of three ways:

•	Double-click on the image.

•	Right-click on the image and choose Image Properties... from the pop-up menu.

•	Click on the image and click on [image] again.

You can also edit all of the image's properties using the Attribute Inspector.


Alternate text

The Alternate Text text box in the Image Properties dialog box is for entering some text that will be displayed if the document is being read with a browser that can't display images or one that has image loading turned off. Some browsers display alternate text while the images are loading, or in a pop-up window when the cursor is over the image. Even though this information is not required, it is good HTML style to include it for the benefit of users without graphical browsers. Using meaningful alternate text also makes your page accessible to people with visual impairments who use assistive technology to surf the Web.


Alignment

The default alignment for images is BOTTOM, meaning that the bottom of the image will be on the baseline of the adjacent text. You can choose an alignment value from the Alignment pull-down list in the Image Properties dialog box.

You can set the image alignment to the following:

•	MIDDLE – Aligns the baseline of the current line with the middle of the image.

•	TOP – Image aligns with the top of the tallest item in the line.

•	LEFT – Image `floats' on the left margin and text wraps around it to the right.

•	RIGHT – Image `floats' on the right margin and text wraps around it to the left.

•	TEXTTOP – Image aligns with the top of the tallest text in the line.

•	BASELINE – Same as BOTTOM.

•	ABSMIDDLE – Aligns the middle of the current line with the middle of the image.

•	ABSBOTTOM – Aligns the bottom of the image with the bottom of the current line.

Not all of these image alignments are supported by all browsers, so use them with caution and make sure that your page looks acceptable on several different browsers.

Note that there is no `center' alignment: if you want to center an image, surround it with a block element (such as P) that you can then center-align. Some browsers also support the CENTER element, which you can put around the image.


Width and height

When you insert an image—by dragging and dropping or any other means—HoTMetaL PRO will automatically set the height and width attributes. These properties are measured in pixels; they tell the browser how large an image is. This will speed download times and page formatting. Height and width are not supported by all browsers, but do make a large difference to how fast a web page formats in many browsers. If you wish to change these values, you can edit them using the Height and Width text boxes in the Image Properties dialog box.

Note: Some browsers accept percentage values for the height and width. The percentage value represents a percentage of the window size. This can be useful for graphics that resize with the window, such as graphical horizontal rules.


Spacing and borders

Some browsers support the image attributes BORDER, VSPACE and HSPACE.

•	BORDER sets the border around the image in pixels. This can be set to `0' (zero), which creates a borderless image, often useful when making `hot images'.

•	Specify blank space on the top and bottom (VSPACE) and on the sides (HSPACE) of an image. The value is in pixels. This can be very useful for trying to create more precise layout.

To edit any of these attributes:

•	Right-click on the image and choose Attribute Inspector from the pop-up menu.

Or:

•	Click on the image and choose Attribute Inspector from the View menu.

Or:

•	Press F6.


Using Image Explorer

PhotoImpact Explorer is shipped with HoTMetaL PRO 4.0, but not with the Evaluation Version that you are now using. When you choose `Image Explorer', you will be prompted to choose an image thumbnail browser. Choose `How To Purchase' in the Help menu for ordering information.

PhotoImpact Explorer is a file explorer that displays thumbnails of a wide range of image types (BMP, CUR, GIF, JPEG, PCD, PCX, PNG, PSD, TGA, TIFF) in the selected folder.

To start the PhotoImpact Explorer:

•	Choose Image Explorer from the Tools menu.

The Image Explorer displays a folder tree view on the left side of the window and a thumbnail browser on the right. If the currently selected folder in the left frame contains any image files, their thumbnails will appear in the right frame.

The toolbar gives you access to all the available commands:

•	 Recently visited folders – gives you quick access to the last four folders browsed.

•	 Always on top – keeps the Explorer window on top of all other windows on your desktop.

•	View buttons:

•	Full view: displays the Explorer as a window with the file explorer and thumbnail frames visible.

•	 Align top, bottom, left, right: displays only the thumbnail viewer and aligns the Explorer with the specified edge of the desktop.

•	 Open to Viewer and [image] Open to PhotoImpact – opens the selected image to the PhotoImpact Viewer or Editor.

•	 Photo Properties – display the properties of the selected image.

•	Sort – sort the thumbnails.

You can drag and drop thumbnails into folders in the left frame. You can use this to move or copy images from other folders into your project folders for your pages. You can also insert an image by dragging and dropping a thumbnail directly into HoTMetaL PRO Editor.

When you drag and drop an image into a file that has never been saved (that is, it has a default name such as Document 1), HoTMetaL PRO will create an file:-style URL pointing to that file on your hard drive. This will cause problems if you move your site to the Web without modifying the URL. If the file has been saved, a relative URL will be created. For this reason, you should save your file at least once before dragging and dropping an image into it.

If you have a link to an image that is outside your project folder, the image will not be published automatically by the HoTMetaL PRO Information Manager. You should copy the images you want to use to your project folder. See the section on managing projects for more information.


HoTMetaL FX Chooser

The effects available from the HoTMetaL FX Chooser in the Evaluation Version that you are now using are a subset of those shipped with HoTMetaL PRO 4.0. Choose `How To Purchase' in the Help menu for ordering information.

The FX Chooser is a tool for browsing the libraries of images, applets, scripts, and HTML fragments that are supplied with HoTMetaL PRO.

To start the FX Chooser:

•	Click on the [image] (HoTMetaL FX Chooser) toolbar button.

Or:

•	Choose HoTMetaL FX Chooser from the Tools menu.

This command starts your default HoTMetaL PRO Web browser and loads the FX Chooser.

The FX Chooser gives you drag and drop access to images, applets, and other HTML features. This section explains how to use the HoTMetaL FX Chooser with images;   you can also use the HoTMetaL FX Chooser to insert applets, scripts, and other objects.

Use the FX Chooser to browse for images by category. In order to browse images, you must have the HoTMetaL PRO CD in your CD-ROM drive. If you want to select and install image libraries to your hard drive, go to the folder hmpro4 on the CD, run setup.exe, and choose a custom install.

•	Click on the pull-down menu at the top of the FX Chooser window; this gives you a list of categories.

•	Click on an `Images' sub-category from the menu below the category menu.

All of the images in that sub-category are displayed. Once you have found the image that you want, you can drag and drop it into your document.

  More on this topic


Drag and drop from the FX Chooser

The HoTMetaL FX Chooser displays images available in the HoTMetaL PRO image libraries.

When you drag and drop an image from the FX Chooser, HoTMetaL PRO copies the image file to the folder containing the document (HTML) file that you are editing and creates a relative link to the image, (that is, it creates a link relative to the root folder of the HTML page). You must save the HTML file at least once before you can drag and drop from the FX Chooser so HoTMetaL PRO can copy the image file relative to the HTML file's directory.

To drag and drop an image from the FX Chooser:

•	Make sure you have saved your HTML document.

•	Choose one of the `Images' sub-categories.

•	Select the file you want to drag and drop by clicking and holding the left mouse button on the small mouse icon beside the file's name (not on the image itself).

•	Continuing to hold down the left mouse button, drag your mouse pointer to the HoTMetaL PRO window; the mouse pointer will have a small chain-link icon beside it.

•	Release the mouse button wherever you want the image to appear in your document.

Now you can edit the image properties

When the FX Chooser copies the image file relative to the directory containing your HTML file, it mirrors the folder structure of the original file library. You may want to change the resulting folder hierarchy using the HoTMetaL PRO Information Manager.

Note: The FX Chooser always copies the files to folders located in the folder containing your page. If you have dragged and dropped a few files and then deleted them from your document (for example, trying a few to get the right look), the images and their folders remain in the folder with your page. You can use the HoTMetaL PRO Information Manager to remove these unused files later.


Drag and drop from Windows Explorer

To drag and drop an image file:

•	Open Windows Explorer and position it so that you can also see the HoTMetaL PRO window.

•	In Windows Explorer, navigate to the folder containing the image that you want to insert into your document.

•	Select the file you want to drag and drop by clicking and holding the left mouse button on the file icon or file name.

•	Continuing to press the left mouse button, drag your mouse pointer to the HoTMetaL PRO window; the mouse pointer will have a small plus sign over it.

•	Release the mouse button wherever you want the image to appear in your document.

The image will be visible immediately in the HoTMetaL PRO document window. You can now edit the image's properties.

When you drag and drop an image into a file that has never been saved (that is, it has a default name such as Document 1), HoTMetaL PRO will create an file:-style URL pointing to that file on your hard drive. This will cause problems if you move your site to the Web without modifying the URL. If the file has been saved, a relative URL will be created. For this reason, you should save your file at least once before dragging and dropping an image into it.

If you have a link to an image that is outside your project folder, the image will not be published automatically by the HoTMetaL PRO Information Manager. You should copy the images you want to use to your project folder. See the section on managing projects for more information.


The image pop-up menu

 Ulead PhotoImpact SE is shipped with HoTMetaL PRO 4.0, but not with the Evaluation Version that you are now using. Therefore, when you choose Edit Image File or View Image File, HoTMetaL PRO will try to carry out one of the following actions, in the order given:

•	If you have associated a helper application with the file extension of the current image, that application will be launched.

•	If you have selected a default image editor by choosing Image Editor from the Tools menu, that application will be launched.

•	Otherwise, you will be prompted to choose an application.

When you right-click on an image HoTMetaL PRO displays the image pop-up menu:

•	Edit Image File – Starts the image editor and loads the image file. The default image editor is Ulead PhotoImpact SE. You can choose different helper applications for editing specific image types from the Options dialog .

•	View Image File – Starts the image viewer and displays the image file. The default image viewer is Ulead PhotoImpact Viewer SE. You can choose different helper applications for viewing specific image types from the Options dialog.

•	Image Properties... – Brings up the Image Properties dialog.

•	Select Element – Selects the IMG element to cut or copy.

•	Attribute Inspector – Lets you edit all of the properties of the IMG element, including extensions.

  More on this topic


Choosing helper applications

You can change the default editor and viewer for a particular image type from the Options dialog. These applications will be launched instead of the default when you choose Edit Image File or View Image File for a file of that type.

•	Choose Options... from the Tools menu.

•	Click on the Helper Apps tab.

•	Enter the file extension for the image type in the File Extension text box. If files of that type could have more than one extension (for example, .jpg and .jpeg), you will have to make a separate entry for each.

•	Click on Add New Type.

•	You can choose an editor, viewer, or both. Enter the locations and filenames of of the desired applications in the Viewer and Editor text boxes (you can use the Choose... button to select them).

•	Click on OK.


Creating `hot images'

A `hot image' is a hypertext link from an image rather than from some text. You can use images to link to Internet destinations, start scripts, and other events that you can start by clicking in a browser.

To make an image `hot':

•	Do one of:

•	In Tags On view, select the image by clicking on the image tag.

•	In WYSIWYG view, right-click on the image and choose Select Element from the pop-up menu.

•	Click on the [image] (Insert Link) toolbar button, choose Link... from the Insert menu, or press Ctrl+K.

 This brings up the Insert Link dialog box.

•	Type the destination of the link (URL) in the Insert Link dialog box.

•	To prevent the browser from displaying a link color border around the `hot' image, set the value of the image's BORDER attribute to 0 (zero) using Attribute Inspector.

Note: While you can have images outside of block elements such as paragraphs, you cannot have link elements outside of block elements. If HoTMetaL PRO prevents you from inserting the link around the image, surround it with a paragraph, header, or other block element.


Inserting multimedia files

HoTMetaL PRO supports elements and attributes for inserting multimedia files such as sound and video, as well other special formats (for example, ShockWave) that require plug-ins in order to be displayed in the browser.

To insert any element referred to here, choose Element... from the Insert menu.

To edit the attributes of an element, put the insertion point inside the element and choose Attribute Inspector from the View menu.

It is easiest to work with this kind of element if you switch to Tags On view.

Sound files

Some common sound formats are MIDI, WAV, and AU. Netscape browsers use the EMBED element  to represent sound files. Microsoft Internet Explorer uses the BGSOUND element. BGSOUND must be inserted before any `block' elements in the document. The attributes of BGSOUND are:

•	SRC: the URL of the sound file.

•	LOOP: how many times the file plays (the value -1 or INFINITE causes it to play over and over).

•	DELAY: the number of seconds between each repetition.

•	TITLE: an identifying title.

Normally you should use both EMBED and BGSOUND so that your file can be played by both types of browsers.

Video

Video files often require a browser plug-in in order to be displayed. If in doubt, you should contact the vendor for the file format that you wish to use, to obtain details on the markup (elements and attributes) required for that format, and any plug-in(s) required to display it.

 Microsoft Internet Explorer and the Netscape browsers use the EMBED element  to represent video files. Internet Explorer also supports the IMG element for playing some video formats. The following IMG attributes are used for video:

•	DYNSRC – the URL of the video file.

•	START – This attribute specifies when the video file will be played. The value FILEOPEN causes this to happen as soon as the HTML document is opened; the value MOUSEOVER causes the video to be played when the mouse cursor is over the animation. If you supply both values, the video will be played in both situations.

•	 CONTROLS – If this attribute has the value CONTROLS, a set of controls will be displayed under the video.

•	LOOP – Specifies how many times the video should be played. The value `-1' or INFINITE will cause it to be played over and over.

Other multimedia formats

Other multimedia formats (for example, ShockWave) require a browser plug-in in order to be displayed. If in doubt, you should contact the vendor for the file format that you wish to use, to obtain details on the markup (elements and attributes) required for that format, and any plug-in(s) required to display it.

 Microsoft Internet Explorer and the Netscape browsers use the EMBED element  to represent multimedia files.

  More on this topic


Inserting multimedia files with EMBED

Web browsers lets you use the EMBED element to insert a `object' in an arbitrary format (sound, movie, etc.) into the document. These objects will be processed by `plug-in' applications. The essential attributes of EMBED are:

•	SRC – The URL of the file to be embedded.

•	HEIGHT– The height of the displayed image.

•	WIDTH – The width of the displayed image.

•	 NAME – giving the object a target name allows other objects and elements to refer to it.

The following EMBED element attributes are currently used only by Netscape Navigator:

•	ALIGN – Sets the alignment of the text around the controls in the same way as the ALIGN attribute in the IMG element. It can have the same values: TOP, BOTTOM, CENTER, etc.

•	BORDER – Specifies the width of the border (in pixels)

•	FRAMEBORDER – If this attribute has the value NO, no border will be drawn around the object

•	HSPACE – Specifies extra space that the browser draws to the right and left of the embedded object (in pixels)

•	PALETTE – An embedded graphical object uses either the foreground or background color palette. Choose FOREGROUND or BACKGROUND. (The default is BACKGROUND.)

•	PLUGINSPAGE – Allows you to specify a URL from which the user can download the necessary plug-in.

•	TYPE – Specifies the MIME-type. Either this attribute or the SRC attribute must have a value.

•	UNITS – Specifies whether WIDTH and HEIGHT values are to be interpreted as pixels or en dashes.

•	VSPACE – Specifies extra space that the browser draws above and below the embedded object (in pixels)

The following EMBED element attributes apply only to Netscape Navigator's LiveAudio plug-in:

•	AUTOSTART – Setting the attribute value to TRUE starts playing the sound automatically when the page is loaded into Netscape Navigator. The default is FALSE.

•	STARTTIME – Designates where in the sound file to begin playback. For example, to start playing the file at the forty-five second mark, enter `00:45'. (This will work only for the Windows 95, Windows NT, and Macintosh versions of Netscape Navigator.)

•	ENDTIME – Designates where in the sound file to end playback. For example, to finish playing at the one minute mark, enter a value of `01:00'. This is an absolute time measured from the beginning of the sound file; it is not the time elapsed from the STARTTIME attribute value. (This will work only for the Windows 95, Windows NT, and Macintosh versions of Netscape Navigator.)

•	HIDDEN – Hides the controls for an embedded sound object (this attribute may work for other types of EMBED elements, as well). You should give this attribute a value of TRUE to hide controls and have the sound file load as a background sound. (The attribute FALSE is not valid—if you don't want to hide the object controls, do not include the HIDDEN attribute.)

•	CONTROLS – Defines which control will appear in the Web browser for a given embedded object. This attribute can have the values CONSOLE, SMALLCONSOLE, PLAYBUTTON, PAUSEBUTTON, STOPBUTTON, and VOLUMELEVER. The default is CONSOLE. Only one control is allowed in each EMBED element. To have more than one control for a single sound or video, you must use separate EMBED elements with the same NAME attribute. Netscape's page on LiveAudio explains how to use multiple controls.

•	HEIGHT – Sets the value of the height of the console or control, in pixels. The default values of the controls are:

CONSOLE 60

SMALLCONSOLE 15

VOLUMELEVER 20

BUTTON 22

•	WIDTH – Sets the value of the width of the console or control, in pixels. The default values of the controls are:

CONSOLE 144

SMALLCONSOLE 144

VOLUMELEVER 74

BUTTON 37

•	MASTERSOUND – When using multiple controls for a single embedded sound, this attribute denotes which EMBED element's SRC attribute refers to the main sound file. This attribute is required when you use multiple controls. Netscape's page on LiveAudio explains how to use multiple controls for that plug-in.

•	NAME – Assigns a name to the embedded sound or control. In the case of multiple controls for a single sound, you must assign each of the controls the same name. Netscape's page on LiveAudio explains how to use multiple controls for that plug-in.

Netscape Navigator also allows you to insert variable or application-specific attributes in the EMBED element. These cannot be represented in SGML and therefore are not supported by the HoTMetaL PRO Editor's WYSIWYG view or Tags On view. If you want to insert such attributes, you should open the HTML file in HTML Source view and insert the attributes manually, inside the EMBED start-tag. The file will not validate if you switch to Tags On or WYSIWYG view; the HoTMetaL PRO Editor will attempt to `fix' the application-specific attributes.


Images and accessibility

While images are part of what makes the Web so popular, many people either cannot, or do not wish to, view images on the Web. Some of these people do so by choice, either turning the image display options off in their browsers, or using text-only browsers such as Lynx. On the other hand, users with visual impairments require assistive technology, such as screen readers, which generally cannot interpret images. There are a few simple things you can do to ensure that you make your pages accessible to people who cannot or do not wish to view images.

If you have Prompt for Accessibility turned on in the General tab of the Options menu, the Image Properties dialog will contain an Accessibility panel. It also prompts you to enter an alternate description of the image. This description should be brief, but at the same time meaningful; that is, simply putting graphic in the alternate text box won't help users understand what the graphic's purpose is while putting graphic: SoftQuad logo will.

HoTMetaL PRO was designed with accessibility issues in mind. The Accessibility panel gives you the option of writing a more detailed description of the image. This description is saved in an HTML file; HoTMetaL PRO generates a link to this file and places it next to the image in your document.

To add a detailed description in the Accessibility panel:

•	Click on Description... in the Accessibility panel; this brings up a text box.

•	Type a detailed description of the image, including the information it conveys to the viewer.

•	Type a file name for the image, the default is the image filename plus `-desc'.

 The description is saved as an HTML file. You can also choose an existing file by clicking on the Choose... button. (Some authors prefer to keep all the descriptions in a single file, rather than adding a number of small files to the site.) HoTMetaL PRO will insert a small letter `d' (which links to the description page) beside the image.


Creating clickable image maps

Image maps (or clickable image maps) are images that have been divided into regions; clicking in a region in a browser causes an action to occur (usually a link to another location). There are two types of image maps: client-side and server-side.

With client-side image maps, all of the information required for the browser to process the image map is contained in the document itself. This information includes a list of the co-ordinates that define the mapping regions, and the actions (for example, hypertext links) they are associated with. With server-side image maps, this information is in a separate map file.

Most Web browsers support server-side image maps, and client-side image maps are now also widely supported. You can use both a server-side and a client-side image map for the same image: if the browser accepts client-side image maps, then they will take precedence over server-side image maps.

Good HTML style involves giving users who do not have access to image map features an alternate way of accessing the pages that are linked to in an image map, for example, a text-only list. For more information see the accessibility help for client side and server side image maps.

  More on this topic


Server options for server-side image maps

There are two different types of Web servers: NCSA and CERN, and they require slightly different server-side map file formats. Before you create any server-side image maps, specify your server type (you may need to obtain this information from your ISP or system administrator):

•	Choose Options... in the Tools menu.

•	Click on the General tab.

•	In the Image Map Files group in the lower right corner of the tab, choose one of Save in NCSA format and Save in CERN format.

•	Click on OK.


Creating image maps

To create an image map:

•	Click on the image that you want to use as an image map; this activates the image mapping toolbar.

The image mapping toolbar provides tools for defining `hot' areas of different shapes: circle, rectangle, and polygon.

To define an image map area:

•	Click on the image to activate the image mapping toolbar.

•	Click on the toolbar button for the desired shape.

•	Move the mouse pointer over the image; the pointer will turn into a crosshair.

•	Click and drag the pointer to create the map area.

•	When you have defined the area, release the mouse button.

The Enter URL information dialog box appears. The following fields are available:

•	URL: the location of the document the area will link to.

•	Comments: a comment in the MAP element or map file to describe the link.

•	Alternate Text: alternate text describing the map areas, for text-only browsers and accessibility.

•	Target Frame: targets a particular frame  of a FRAMESET to load the linked document.

•	When you have entered the information in the dialog box, click on OK.

If this is the first region that you've defined for this image, the Image Map Options dialog appears.

The Image Map Options dialog specifies whether to save the image map information as a server-side image map (ISMAP), a client-side image map (USEMAP), or both.

Client-side

To create a client-side image map:

•	Turn on the UseMap check box in the Save Image Map dialog box; the UseMap name text box will now accept text.

•	You can give the image map a name in the UseMap name text box, or accept the default.

•	Click on OK.

For more information on client-side image maps, see  Background: Client-side image maps.

Server side

To create a server-side image map:

•	Turn on the Server-side Image Map check box in the Image Map Options dialog box; the adjacent text box will now accept text.

•	Type a file name and path for the mapping file or click on Browse... to choose an existing mapping file.

For more information on server-side image maps, see  Background: Server-side image maps.


Changing an image map

To move an existing image map region:

•	Click on the region and drag it to the desired new location in the image.

To edit the URL information for a region (that is, display the Enter URL Information  dialog box again):

•	Double-click on the region.

To display the Image Map Options dialog box for an existing image map:

•	Right-click on the image and choose Image Properties... from the pop-up menu.

•	In the Image Properties dialog box, click on the Edit Image Map Name... button.

To display all of the defined regions in an image map:

•	Click on the [image] toolbar button.


Background: Client-side image maps

Client-side image maps are generally faster than server-side image maps because the browser does the work, not the server. All of the links for a client-side image map are specified in a MAP element, which is usually in the same HTML document as the image.

The MAP element contains one or more AREA elements, each of which defines a region in the image map. An AREA has the same function as a line in an image map file. AREA doesn't have any content: all of the information is contained in its attributes.

MAP has an attribute called NAME: the value of this attribute is the map name, a string of characters that is used to identify the MAP. The USEMAP attribute of the corresponding IMG element has the same value as the map name (with `#' prepended). This is how the browser knows which MAP to associate with a particular image.

If you create a client-side image map with HoTMetaL PRO, the program creates the MAP and AREA elements and map name for you, and sets the USEMAP attribute to point to the MAP element.

For example, if you defined areas on an image, specified the target links, and chose the default name map1, HoTMetaL PRO creates a MAP element with the NAME map1 and sets the USEMAP attribute of the image to #map1.

For convenience, HoTMetaL PRO places the MAP element directly after the corresponding IMG element. The MAP is not displayed in the browser window.

Associating images with external MAP elements

It is possible to create and reference MAP elements in other documents. To do this you have to edit the USEMAP attribute of the image to point to the document containing the MAP element. For example, if you use the same image map in a number of documents, you may want to have the map element in just one of the documents. The USEMAP attribute of the image would consist of the URL followed by a `#' plus the name of the map. For example:

../public_html/index.html#map


Background: Server-side image maps

When you specify a server-side map, the image is surrounded by a link element (A) that associates the map file with the image. You are generally going to be creating a map file on your PC, and you will have to upload the file to your service provider so that it works on the Web. The following instructions apply to setting the URL (location) of the anchor which surrounds the image so that it points to the map file on the server.

In order to understand what's going on here you have to know that there is a program called imagemap on the server, which reads your image map file whenever someone clicks on the image. The browser sends the program the co-ordinates of the point that was clicked on. The imagemap program determines which region in the image was clicked on, and on the basis of this, tells the server which URL to access.

You use a URL to associate the image map file with your image. This URL tells the server two things:

•	The location (server address and folder) of the imagemap program.

•	The symbolic name for your image map file.

A typical location for the imagemap program is the cgi-bin folder on the server. In this case, the URL (in an  A element) would look something like this:

http://www.my-isp.com/cgi-bin/imagemap/triptych

(Here `triptych' may look like a filename, but it's actually the symbolic name of the image map file).

You will have to edit the URL of the anchor that has been created, so that it points to the correct position on the server.

•	Change the URL of the A element surrounding the image to a value such as the one in the example above.

The image that you applied the mapping to will have its ISMAP attribute set. This tells the server that this element points to a server-side imagemap.

Server-side image maps: informing the server

Not all Web servers deal with image maps in exactly the same way. For this reason, the instructions given here may not work for your server. The following discussion is based on the Unix NCSA httpd server. You should consult your server's documentation if you're unsure whether something applies.

Once you've created the image map file, you need to tell the server where it is. If you're using the Unix NCSA httpd server, you would do this by making an entry in the file imagemap.conf in the conf folder on the server. (You'll have to find out from a local administrator where the server folder is located.) If you're using a different server, the filenames given in this section may not be correct: you should consult the server documentation or talk to an administrator.

The imagemap.conf file consists of entries that associate a  symbolic name with every image map file known to your server. One line describes each map. You can choose whatever symbolic name you wish to use. In this example, the symbolic name is triptych, and the image map file is in /home/iain/public_html/heads.map. You should put the following line in the imagemap.conf file:

triptych:	/home/iain/public_html/heads.map

If someone else is administering the server, you may not be able to update this file yourself. You'll still have to choose a symbolic name for your image map file, because this name is used in the next step.


Image tips and tricks

You can try lots of different things to make your pages work better and look better. Some of the following are supported only by specific browsers, so you should make sure they look acceptable in other browsers before you include them in public pages. The following are just a few tricks:

•	Resizing logos to speed download time – If you have the same logo in different sizes throughout your site, try using the same source image for all of the tags, and set the HEIGHT and WIDTH properties to do the resizing for you. This works better with some images than others, so you should check to make sure it works. This means that users will only have to download a single image (which will be stored in their browser's cache) and let the browser do the work.

•	Removing borders for `hot' images – If you have created a `hot' image (an image that is also a hyperlink), your image may be displayed with a link-color border around it in a Web browser. This is because if you don't specify a border for your images, the browser assumes that a border is implied and will display it for linked images. To remove the border, set the BORDER attribute to 0 (zero) using the Attribute Inspector.

•	Using the  VSPACE and  HSPACE attributes for layout – The ability of some browsers to create absolute pixel spacing surrounding an image can give you greater control over how your pages appear. Experiment with different values for the VSPACE and HSPACE attributes to create `whitespace' around your images.

•	Using percentage values for height and width properties – Some browsers (for example, Netscape Navigator) accept percentage values for the HEIGHT and WIDTH properties. The percentage value represents a percentage of the window size. This can be useful for graphical horizontal rules that resize with the window; for example, you could use a Height of 3 (pixels) and a Width of 100%.


Scrolling `marquees'

A scrolling marquee is a piece of text that scrolls across a rectangular area that you define in the browser window. You specify the height and width of the marquee area, and then (if desired) specify margins. The scrolling text will be visible between the margins. Surrounding text can be aligned with the marquee area as you wish.

Note: Marquees are not supported by all Web browsers. Use this feature with caution, and make sure that all marquee documents contain markup readable by all browsers.

To create a marquee:

•	 Insert a MARQUEEelement (using  Element... in the Insert menu).

•	Between the tag icons, enter the text that you want scrolled.

The attributes of MARQUEE tell the browser exactly how the text will be displayed and scrolled. You can edit these attributes the Attribute Inspector in the View menu.

•	ALIGNMENT – how the surrounding text is aligned with the marquee text (TOP, MIDDLE, or BOTTOM).

•	BEHAVIOR – specifies the type of movement of the text. The choices are:

•	SCROLL – continuous scrolling on and off the screen (the default)

•	SLIDE – the text scrolls until one end reaches the margin

•	ALTERNATE – the text `bounces' back and forth between the margins

•	BGCOLOR – background color of the marquee area.

•	DIRECTION – direction (LEFT or RIGHT) that the text scrolls. LEFT is the default.

•	HEIGHT – height of the marquee area, in pixels (n), or as a percentage of the window height (n%).

•	HSPACE – width of the left and right margins, in pixels.

•	LOOP – the number of times the text will scroll. If this attribute has the value `-1' or INFINITE, the text will scroll `infinitely'.

•	SCROLLAMOUNT – the number of pixels between successive scrolls of the text.

•	SCROLLDELAY – the time in thousandths of a second between successive scrolls of the text.

•	VSPACE – the height of the top and bottom margins, in pixels.

•	WIDTH – width of the marquee area, in pixels (n), or as a percentage of the window width (n%).


Working with tables

What you'll learn in this chapter

Tables in HTML documents are used to present information that is naturally tabular, and to perform page layout.

All of the HoTMetaL PRO Editor's commands for inserting and modifying tables are in the Table menu. These commands can also be accessed from the Table toolbar. You can edit some table properties by right-clicking on a table and choosing commands from the pop-up menu.

You can add  and delete  rows and columns from an existing table, move  rows and columns, resize  rows and columns, merge  and split  cells, and set various table properties.  HoTMetaL PRO Editor provides keyboard commands for moving around  in a table. Tabular material in other applications can be pasted or dragged  into a HoTMetaL PRO document.

Reference

  More on this topic


Inserting a table

To insert a table:

•	Put the insertion point where you want to insert the table.

•	Click on the [image] toolbar button, or choose Insert Table... from the Table menu.

In the Insert Table dialog box, you can insert the table and set some of its properties.

•	Enter the number of rows and columns that the table should have initially. You can add and delete rows and columns later.

•	If desired, set the table properties. You can also set them later.


Setting table properties

You can set table properties (that is, those that apply to the whole table) from the Insert Table dialog box when you insert a table, or you can edit the properties of an existing table.

To edit the properties of an existing table:

•	Put the insertion point anywhere inside the table.

•	Do one of the following:

•	Right-click and choose Table Properties... from the pop-up menu.

•	Click on the [image] toolbar button.

•	Choose Table Properties... from the Table menu.

•	Now click on the Table tab in the Table Properties dialog that appears.

You can also set the properties of individual rows, columns, and cells  by clicking on the Row, Column, or Cell tabs, respectively.

 You can set the following table properties:

•	Default Background Color – The table's background color. Click on ... to bring up the Windows Color dialog. The color you select will be expressed as a hexadecimal red-green-blue value. You can also enter this hexadecimal value directly in the text box. You can enter a color name (red, green, etc.) in the text box, but remember that not all browsers support colors expressed in this way.

•	Width – You can specify the table width as an absolute number of Pixels or as a Percent of the document width.

•	Border – The lines that form the boundary of each table cell when the file is displayed in a browser.

•	Turn on Grid, and enter a Width of 1 or greater if you want to have a visible border.

•	Turn on Grid, and enter a Width of 0 if you want the lines in the border to have zero width.

•	Choose None if you want the border to be transparent.

Most browsers do not draw borders around empty table cells. A useful way of giving an empty cell `invisible' content, thereby forcing the browser to display the border, is to insert a `non-breaking space' into the cell, by pressing Ctrl+Shift+Space. A non-breaking space is displayed as an ordinary space in WYSIWYG view, and as an nbsp icon in Tags On view.

Some browsers support the FRAME and RULES attributes (see below) for more specific border drawing.

 There are several other table properties that can be set by editing the attributes of the table.

  More on this topic


Setting table properties by editing attributes

 All table properties can be set by editing attributes. The most common properties can also be set by choosing Table Properties.... This section describes table properties that can be set only by editing the attributes of the table.

To edit attributes, do one of the following:

•	Place the insertion point to the right of the TABLE start-tag in Tags On mode and choose Attribute Inspector from the View menu.

Or:

•	Place the insertion point anywhere in the table and choose Attribute Inspector from the View menu.

•	Choose TABLE from the Element list at the top of the Attribute Inspector dialog box.

Not all attributes will be recognized by all browsers. The attributes that you can change are:

•	CELLSPACING – This is the space (in pixels) between cells. If you want cells to touch (that is, there will be no space between cells), set both the cell spacing and the border to `0' (zero).

•	CELLPADDING – This is the space (in pixels) between the text of the cell and the cell border.

•	NOWRAP – Text will not wrap in table cells if this feature is turned on. This can create some very large table cells that scroll off the Web browser's window, so use this feature with caution.

•	BORDERCOLOR, BORDERCOLORLIGHT, BORDERCOLORDARK – Set the color of the border, or, for 3D (shadow-style) borders, set two different colors for the `light' and `dark' areas of the border.

•	VALIGN – Sets the vertical alignment of all cells in the table to top, middle, or bottom. You can also set the vertical alignment of data within individual rows, columns, and cells.

•	HEIGHT – Sets the height of the table in pixels or in percentage of the document height.

•	ALIGN – Tables can have alignment values of RIGHT, LEFT, CENTER, JUSTIFY (right and left alignment), BLEEDLEFT, and BLEEDRIGHT. These values determine how the entire table (not data within cells) is aligned in the document window. You can also set the alignment of data within individual rows, columns, and cells.

•	COLS – Specifies the number of columns in the table. This allows the browser to begin rendering the table before the whole table has been read.

•	FRAME – Specifies which part(s) of the table border will be drawn by the browser. The possible values are:

•	VOID: no border

•	ABOVE: top border only

•	BELOW: bottom border only

•	HSIDES: top and bottom only

•	VSIDES: right and left sides only

•	LHS: left side only

•	RHS: right side only

•	BOX: all four sides
Only one value for FRAME can be specified.

•	HSPACE – Extra horizontal space around the table (in pixels).

•	RULES – Specifies where rules (separators) will be drawn by the browser. The possible values are:

•	ALL: draw all separators

•	COLS: draw column (vertical) separators only

•	NONE: no separators

•	ROWS: draw row (horizontal) separator only
 Only one value for RULES can be specified.

•	VSPACE – Extra vertical space around the table (in pixels).


Setting table row properties

To specify the properties for a single table row:

•	Put the insertion point inside the row whose properties you want to modify.

•	Do one of the following:

•	Right-click and choose Table Properties... from the pop-up menu.

•	Choose Table Properties... from the Table menu.

•	Click on the [image] toolbar button.

•	Click on the Row tab in the Table Properties... dialog that appears.

You can set the following properties:

•	Color –The background color of the row. Click on ... to bring up the Windows Color dialog box. The color you select will be expressed as a hexadecimal red-green-blue value. You can also enter this hexadecimal value directly in the text box. You can enter a color name (red, green, etc.) in the text box, but remember that not all browsers support colors expressed in this way. Most browsers do not display the background color of empty table cells. A useful way of inserting `invisible' content in an empty cell, thereby forcing the browser to display the background, is to insert a `non-breaking space', by pressing Ctrl+Shift+Space.

•	Vertical Alignment – Where the cell contents are positioned vertically. Top, Middle, and Bottom are standard choices; if you choose Other you can enter an arbitrary vertical alignment value (this is to allow for enhancements to alignment support in various browsers; make sure that any value you enter is supported by the appropriate browser).

•	Horizontal Alignment – Where the cell contents are positioned horizontally. Left, Center, and Right are standard choices; if you choose Other you can enter an arbitrary horizontal alignment value (this is to allow for enhancements to alignment support in various browsers; make sure that any value you enter is supported by the appropriate browser).

•	Height – You can specifycell height as an absolute number of pixels. Setting the height in the Row tab automatically sets the heights of all cells in the current row. If you set the heights of individual cells, the browser will display the row using the height of the highest cell.

•	Cell Type – You can specify that all cells in the row will be of the type Data Cell (the normal type of table cell) or Header Cell (the contents will be centered and displayed in bold). Header cells will most frequently be used in the top row and the left-most column.


Setting table column properties

To specify the properties for a single table column:

•	Put the insertion point inside the column whose properties you want to modify.

•	Do one of the following:

•	Right-click and choose Table Properties... from the pop-up menu.

•	Choose Table Properties... from the Table menu.

•	Click on the [image] toolbar button.

•	Click on the Column tab in the Table Properties... dialog that appears.

You can set the following properties:

•	Color –The background color of the column. Click on ... to bring up the Windows Color dialog box. The color you select will be expressed as a hexadecimal red-green-blue value. You can also enter this hexadecimal value directly in the text box. You can enter a color name (red, green, etc.) in the text box, but remember that not all browsers support colors expressed in this way. Most browsers do not display the background color of empty table cells. A useful way of inserting `invisible' content in an empty cell, thereby forcing the browser to display the background, is to insert a `non-breaking space', by pressing Ctrl+Shift+Space.

•	Vertical Alignment – Where the cell contents are positioned vertically. Top, Middle, and Bottom are standard choices; if you choose Other you can enter an arbitrary vertical alignment value (this is to allow for enhancements to alignment support in various browsers; make sure that any value you enter is supported by the appropriate browser).

•	Horizontal Alignment – Where the cell contents are positioned horizontally. Left, Center, and Right are standard choices; if you choose Other you can enter an arbitrary horizontal alignment value (this is to allow for enhancements to alignment support in various browsers; make sure that any value you enter is supported by the appropriate browser).

•	Width – You can specify cell width as an absolute number of Pixels or as a Percent of the document width. Setting the cell width in the Column tab automatically sets the widths of all cells in the current column. If you set the widths of individual cells, the browser will display the column using the width of the widest cell.

•	Cell Type – You can specify that all cells in the column will be of the type Data Cell (the normal type of table cell) or Header Cell (the contents will be centered and displayed in bold). Header cells will most frequently be used in the top row and the left-most column.


Setting table cell properties

To specify the properties for a single table cell:

•	Put the insertion point inside the cell whose properties you want to modify.

•	Do one of the following:

•	Right-click and choose Table Properties... from the pop-up menu.

•	Choose Table Properties... from the Table menu.

•	Click on the [image] toolbar button.

•	Click on the Cell tab in the Table Properties... dialog that appears.

You can set the following properties:

•	Color –The background color of the cell. Click on ... to bring up the Windows Color dialog box. The color you select will be expressed as a hexadecimal red-green-blue value. You can also enter this hexadecimal value directly in the text box. You can enter a color name (red, green, etc.) in the text box, but remember that not all browsers support colors expressed in this way. Most browsers do not display the background color of empty table cells. A useful way of inserting `invisible' content in an empty cell, thereby forcing the browser to display the background, is to insert a `non-breaking space', by pressing Ctrl+Shift+Space.

•	Vertical Alignment – Where the cell contents are positioned vertically. Top, Middle, and Bottom are standard choices; if you choose Other you can enter an arbitrary vertical alignment value (this is to allow for enhancements to alignment support in various browsers; make sure that any value you enter is supported by the appropriate browser).

•	Horizontal Alignment – Where the cell contents are positioned horizontally. Left, Center, and Right are standard choices; if you choose Other you can enter an arbitrary horizontal alignment value (this is to allow for enhancements to alignment support in various browsers; make sure that any value you enter is supported by the appropriate browser).

•	Width – You can specify cell width as an absolute number of Pixels or as a Percent of the document width. If you set the widths of individual cells, the browser will display the column using the width of the widest cell.

•	Height – You can specifycell height as an absolute number of pixels. If you set the heights of individual cells, the browser will display the row using the height of the highest cell.

•	Cell Type – You can specify that the current cell will be a Data Cell (the normal type of table cell) or a Header Cell (the contents will be centered and displayed in bold). Header cells will most frequently be used in the top row and the left-most column. You can also change the cell type for the current cell by right-clicking in the cell and choosing Change to Header cell or Change to Data cell from the pop-up menu.


Adding table rows and columns

You can add rows and columns to an existing table.

To add one or more  rows or columns, from the Table menu:

•	Put the insertion point in a row or column next to where you want to insert the new rows or columns.

•	Choose Insert Rows or Columns... from the Table menu.

•	Turn on one of Insert Row Above, Insert Row Below, Insert Column Left, and Insert Column Right.

•	Enter the Number of Rows or Number of Columns.

•	Click on OK or Apply.

To add one row or column, from the toolbar:

•	Put the insertion point in a row or column next to where you want to insert the new row or column.

•	Click on the appropriate toolbar button:

•	 – Add a new row above the current row.

•	 – Add a new row below the current row.

•	 – Add a new column to the right of the current column.

•	 – Add a new column to the left of the current column.

You can add a row to the bottom of a table by pressing Tab in the last cell of the last row in the table.


Deleting rows and columns

You can delete one row or column at a time from a table.

To delete a row from a table:

•	Put the insertion point anywhere in the row that you want to delete.

•	Click on the [image] (Delete Row) toolbar button, or choose Delete Row from the Table menu.

To delete a column from a table:

•	Put the insertion point anywhere in the column that you want to delete.

•	Click on the [image] (Delete Column) toolbar button, or choose Delete Column from the Table menu.


Moving rows and columns

You can move a table row up or down by one row, and move a table column left or right by one column.

To move a table row:

•	Put the insertion point anywhere in the row that you want to move.

•	Choose Move Row or Column... from the Table menu.

•	In the dialog box that appears, turn on Move Row Up or Move Row Down.

•	Click on OK or Apply.

Or:

•	Put the insertion point anywhere in the row that you want to move.

•	Click on the [image] (Move Row Down) or [image] (Move Row Up) toolbar button.

To move a table column:

•	Choose Move Row or Column... from the Table menu.

•	In the dialog box that appears, turn on Move Column Left or Move Column Right.

•	Click on OK or Apply.

Or:

•	Put the insertion point anywhere in the column that you want to move.

•	Click on the [image] (Move Column Left) or [image] (Move Column Right) toolbar button.


Splitting cells

Splitting a cell means dividing one cell into two, either vertically (splitting into columns) or horizontally (splitting into rows).

To split a cell into two columns:

•	Put the insertion point anywhere in the cell that you want to split.

•	Click on the [image] toolbar button or choose Split Cell into Columns from the Table menu.

If the original cell had any content, it will be located in the left column after the split.

To split a cell into two rows:

•	Put the insertion point anywhere in the cell that you want to split.

•	Click on the [image] toolbar button or choose Split Cell into Rows from the Table menu.

If the original cell had any content, it will be located in the upper row after the split.


Merging cells

Merging cells means combining two adjacent cells into one cell.

To merge cells from the Table menu:

•	Put the insertion point anywhere in one of the cells that you want to merge.

•	Choose Merge Cell... from the Table menu.

•	In the dialog box that appears, turn on one of :

•	Merge Cell Up – Merge with the cell above this one.

•	Merge Cell Down – Merge with the cell below this one.

•	Merge Cell Left – Merge with the cell to the left of this one.

•	Merge Cell Right – Merge with the cell to the right of this one.

•	Click on OK or Apply.

To merge cells from the Tables toolbar:

•	Put the insertion point anywhere in one of the cells that you want to merge.

•	Click on one of:

•	 – Merge with the cell to the right of this one.

•	 – Merge with the cell to the left of this one.

•	 – Merge with the cell above this one.

•	 – Merge with the cell below this one.

The merge succeeds even if the current cell spans over two or more rows or columns. The reverse is not true, however: if the cell that the current cell is being merged with extends over more rows or columns (or a different set of rows or columns) than the current cell, the merge will not succeed (HoTMetaL PRO Editor will issue an error message).


Inserting a table caption

A table caption is a title for the table.

 To insert a table caption:

•	Put the insertion point anywhere inside the table.

•	Choose Insert Caption from the Table menu.

•	Enter the caption text.

If the current table contains a caption, the menu item will toggle to Select Caption. Choosing Select Caption will highlight the caption text; if the caption is empty, the insertion point will move to the caption location.

By default, browsers will display the caption above the table. Some browsers will display the caption below the table if you set the CAPTION element's ALIGN attribute to BOTTOM:

•	Put the insertion point inside the caption.

•	Choose Attribute Inspector from the View menu, or press F6.

•	Choose BOTTOM in the ALIGN field.

•	Press Enter.


Moving around in a table

There are several ways to move around the insertion point in a table:

•	You can move up, down, left, and right using the arrow (cursor) keys.

•	To move to the next cell on the right, press Tab. If you press Tab in the last cell in a row, the insertion point will move down to the first cell in next row. (If you press Tab in the last cell in the table, a new row is inserted at the end of the table.)

•	To move to the next cell on the left, press Shift+Tab. If you press Shift+Tab in the first cell in a row, the insertion point will move up to the last cell in the previous row.

•	To move to the last cell in the current row, press Alt+End.

•	To move to the first cell in the current row, press Alt+Home.

•	To move to the last cell in the current column, press Alt+PageDown.

•	To move to the first cell in the current column, press Alt+PageUp.

If a cell spans across two or more columns, the cell is considered to be contained in the leftmost of those columns for purposes of navigation. If a cell spans across two or more rows, the cell is considered to be in the topmost of those columns for purposes of navigation.

Because the Tab key is used for table navigation, if you want to insert the tab character itself in a table cell, you have to press Ctrl+Tab.


Resizing rows and columns

Row heights can be an absolute number of pixels; column widths can be an absolute number, or a percentage of the document width. Different browsers may handle table dimensions in different ways and may redraw tables differently when a reader changes the dimensions of the browser window.

You can resize rows and columns from the Table Properties dialog or by dragging the row and column boundaries in the document window.

To change the height of a row, do one of:

•	Move the mouse cursor over the bottom horizontal boundary of the row until the cursor turns into a double-headed arrow.

•	Drag the boundary up or down to resize the row height.

Or:

•	Right-click anywhere in the row you would like to resize and choose Table Properties... from the pop-up menu.

•	Click on the Row tab.

•	Type the height, in pixels, in the Height text box.

•	Click on OK.

To change the width of a column, do one of:

•	Move the mouse cursor over either of the vertical boundaries of the column until the cursor turns into a double-headed arrow.

•	Drag the boundary left or right to resize the column width.

Or:

•	Right-click anywhere in the column you would like to resize and choose Table Properties... from the pop-up menu.

•	Click on the Column tab.

•	Turn on Pixels or Percent depending on which way you want to specify the width. A percent value means a percent of the total width of the table.

•	Type the width (pixels or percent) in the Width text box.

•	Click on OK.


Pasting tables from other applications

You can copy and paste tabular material from other applications, such as spreadsheets and text editors, into the HoTMetaL PRO Editor. This material will be converted to a table. Non-tabular material will be converted into a list  or a paragraph.

Converting to a table

The HoTMetaL PRO Editor will convert a pasted selection into a table if:

•	There are at least two lines.

•	Each line consists of items separated by tabs.

•	Each line has at least two items.

•	Each line has the same number of items. This does not mean that every cell in every line has to have content; to represent an empty cell, enter a tab to indicate that the cell is there, even though it is empty.

Selections from spreadsheets such as Excel are normally represented in this format, so there is no problem with pasting them. Tabular material from text editors such as Notepad can also be pasted, and will be automatically converted into a table as long as it conforms to the above guidelines.


Using tables for page layout

Tables have two common uses in HTML documents:

•	To present information that is naturally tabular, such as a table of products and prices, or a table of cities and their populations.

•	To perform page layout.

The page layout role is not always an easy fit for tables, which, as a category of HTML elements, are fairly complex. In addition to the basic complexity of the problem, there are important variations in the way different browsers handle tables. If you are relying on tables to produce a particular `look' for a page, be sure to view it in each major browser.

The basic idea behind using tables for layout purposes is that you can use a table row, column, or cell to define a region of the screen, and then insert some content in that region. One common use for tables is displaying information in multiple columns—each table column represents a column on the page.

Some techniques that are useful to know about when using tables to achieve various visual effects are:

•	You can set the background color of cells, rows, columns, or the whole table.

•	You can hide the table border, or make it wider or narrower.

•	You can move cells closer together or farther apart by setting the cell spacing value.

•	You can move the text closer to or farther from the cell boundary by setting the cell padding value.

•	Most browsers will not display the border or background of a cell that has no content. A useful way of giving an empty cell `invisible' content is inserting a `non-breaking space' into the cell, by pressing Ctrl+Shift+Space.

•	Some similar effects can be achieved using frames.

Example

 Here is a simple example: suppose you want to display several paragraphs, with a thick vertical yellow line to the left of the paragraphs. This can be laid out using a table, as follows:

•	Create a table with one row and two columns.

•	Make the table border invisible.

•	Set the background color of the column (cell) on the left to yellow.

•	Set the width of the cell on the left to the desired number of pixels.

•	Insert a `non-breaking space' into the cell on the left by pressing Ctrl+Shift+Space.

•	Insert the paragraphs in the column (cell) on the right.

The cell on the left width the yellow background is displayed in the browser as a yellow line that extends from the top to the bottom of the text on the right.


Converting word processor files

What's covered in this chapter

You can convert word processor and spreadsheet files to HTML using HoTMetaL PRO. This chapter describes preparing and converting documents that have been prepared in a word processing application. Topics include:

•	Converting a single file by opening it in HoTMetaL PRO Editor.

•	Converting multiple files at once in HoTMetaL PRO Information Manager.

•	Preparing files for conversion.

•	Setting conversion options.

Reference

Existing files prepared in common word processing, spreadsheet, or text editing applications are easily converted to HTML, using the HoTMetaL PRO Editor or Information Manager.

If you selected Compact Install when you installed HoTMetaL PRO, the conversion filters were not installed.

In this case, the Information Manager commands Convert Documents... and Document Conversion Options... will not be available, and the Editor Open dialog will not contain a list of word processor file extensions.

 To add the filters, run the HoTMetaL PRO installation again:

•	Run setup.exe from the hmpro4 folder on the CD.

•	Choose Custom Install

•	Add filters for the formats you wish to convert.

  More on this topic


Converting existing files

The Information Manager `Convert Documents...' functionality is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

You can use Open... in the File menu in HoTMetaL PRO Editor to open a word processor, spreadsheet, or text file in HoTMetaL PRO. You can also convert multiple files using Convert Documents... in the Tools menu in HoTMetaL PRO Information Manager. HoTMetaL PRO uses built-in filters to automatically convert each file to HTML as it opens them. Each block of text is converted to the appropriate element: paragraphs are converted to P elements, headings to H1-H6, numbered lists to OL, unnumbered lists to UL, tables and spreadsheet information to HTML tables, etc.

To convert a file:

•	Choose Open... from the File menu, press Ctrl+O, or click on the [image] toolbar button. The Open dialog box appears.

•	Choose the appropriate format from the File Type drop-down list.

•	Select the document to be converted and click on Open. The document is automatically converted as it opens.

  More on this topic


Supported formats

All of the formats listed in this section are supported in HoTMetaL PRO 4.0; the Evaluation Version that you are now using supports only plain text and RTF conversion. Choose `How To Purchase' in the Help menu for ordering information.

By default, HoTMetaL PRO will convert documents from the following formats:

•	plain text (text that is not marked up in HTML)

•	AMI Pro (1.1, 2.0, 3.0)

•	MS Word for PC (2.0, 3.0, 4.0, 5.0, 5.5)

•	MS Word for Windows (2.0, 6.0, 7.0., Word 97)

•	RTF

•	WordPerfect for DOS/Windows (4.2, 5.0, 5.1, 5.2, 6.0, 6.1, 7.0)

•	MS Works for Windows (3.0, 4.0)

If you chose Custom Install when you installed HoTMetaL PRO, any additional conversion formats you selected at that time will also be supported. If you did not install these additional filters and wish to do so, do the following:

•	Start the installation program again and choose Custom Install on the Setup Type installation panel.

•	On the Select Components panel, choose Other Formats from the components list.

If you do not want to completely reinstall HoTMetaL PRO; deselect all of the other product components.

The following additional formats are available from the custom installation:

Cliq-Word	NBI Net Archive
DECdx (WPS-PLUS)	ODA FOD26
HP Word PC	Office Writer
IBM DCA-RFT	Quadratron Q-ONE
IBM DCF Script	Uniplex II Plus
IBM DCA-FFT	Wang OIS/VS Com
IBM Displaywrite	WordMARC
MASS-11	WordPerfect for Mac
MS Word for Macintosh	WordPerfect 4.2
MultiMate	WordStar
Navy DIF	Wang WITA

If you try to open a file that is not in one of the supported formats, an error message will appear and the file will not open. However, you may be able to open the file in another application and save it in a format that is supported.


Converting documents with graphics

If a document contains a graphic in one of the supported graphics formats, it will be converted to GIF format and saved in a separate file. An IMG element whose URL contains the full path to the GIF will be placed in the converted document. HoTMetaL PRO will convert graphics from the following formats:

•	BMP

•	GIF

•	JPEG (JFIF)

•	MacPaint

•	PCX

•	TIFF

In addition, HoTMetaL PRO can convert the raster, or bitmap-oriented, portions of the following complex graphic types: EPS, PICT, RTF, SDW (AMI Draw), WMF, and WPG (WordPerfect Graphics). HoTMetaL PRO will not convert vector, or outline-oriented, graphics such as embedded pie-charts or equations from these formats.

Graphics that are linked to word processor files (rather than inserted directly into the file) will not be converted.


Converting a single document

You can convert a single file simply by opening it in HoTMetaL PRO Editor. The file converts as it opens and then you can make any necessary changes.


Converting multiple documents

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

If you have many files to be converted, you can convert them all at once in the Information Manager. You should open a single file first and make any necessary changes to optimize the conversion.

To convert multiple files:

•	Choose Convert Documents... on the Tools menu.

•	Select the documents to be converted and click on Open. The Choose Target Folder dialog box appears.

•	Select the folder you wish the converted documents to be placed in, and click on OK.


Preparing files for conversion

Because word processor files tend to be less structured than HTML, you should expect to do some refinement of the markup in the Editor. Also, the conversion doesn't use the full HTML element set and you may wish to use richer markup.

If you have a lot of material to convert, it would be worthwhile to test the conversion process. Convert one or two files and have a look at the results. You may find that manipulating the styles in your word processor first gives better results. For example, if your headings are the same point size as your paragraphs, but bold, the conversion process may have trouble recognizing them. If you set the font sizes for each heading to be much larger that lower level headings, the conversion program will provide better results.

The conversion program uses various guidelines to decide how to handle text. You can configure how HoTMetaL PRO converts paragraphs, blockquotes, and headings.


Setting conversion options

You can configure the file conversion settings used when you open a word processor file in HoTMetaL PRO. In general, HoTMetaL PRO uses length (in characters), font size, and font style to distinguish paragraphs from headings.

By default, HoTMetaL PRO regards paragraphs in an emphasized (bold, italic, or bold-italic) font style as possible headings. Unless you specify otherwise, the first emphasized paragraph in the document with a length less than, or equal to, the maximum heading length will be surrounded with the H1 element. Any subsequent paragraphs with the same font and font style as the first H1 will also be converted to H1. This pattern is then followed for the other heading levels.

To set document conversion options:

•	Open the HoTMetaL PRO Information Manager.

•	Choose Document Conversion Options... from the Tools menu.

The following settings are available:

•	Use lists – If you want HoTMetaL PRO to look for list items, turn on this check box.

•	Minimum number of list items – Specify the number (between 1 and 4) of one-line paragraphs required to be considered a list.

•	Use blockquotes – If you want HoTMetaL PRO to look for blockquotes, turn on this check box. HoTMetaL PRO will surround a paragraph with a BLOCKQUOTE element if its length is greater than or equal to the minimum blockquote length, it is not in an emphasized font style, it ends with a `return' character but does not contain any other return characters, and it contains start and end quotation marks. The acceptable quotation characters are straight double quotes, opening and closing double quotes, European quotes (double-angled brackets), and smart quotes.

•	Minimum blockquote length – HoTMetaL PRO considers only paragraphs that have the specified number of characters (or less) to be blockquotes. This helps avoid ordinary lines of text being interpreted as quotes. The possible values for this setting are 5 to 32767 characters, inclusive.

•	Allow headings in tables – If you want HoTMetaL PRO to look for headings in tables, turn on this check box.

•	Maximum heading length – HoTMetaL PRO considers only paragraphs that have the specified number of characters (or less) to be headings. This helps avoid ordinary lines of text being interpreted as headings. The possible values for this setting are 5 to 32767 characters, inclusive.

•	Heading 1 to Heading 6 font size – Specify the font size that you want HoTMetaL PRO to recognize as each level of heading.

•	Bullet characters – The default characters that HoTMetaL PRO recognizes as the start of a bullet item are `-', `*', and `.'. Add any additional characters that have been used as bullets in your document.


Editing HTML markup

What's covered in this chapter

This chapter introduces the rules of HTML and describes how HoTMetaL PRO deals with them. Topics include:

•	The basic structure of an HTML document.

•	Inserting HTML elements.

•	Changing, splitting, joining, and removing elements.

•	Using attributes.

•	Repairing invalid HTML.

•	Fixing markup problems with the HTML wizard.

•	Making your pages accessible to everyone.

•	Inserting special characters.

•	Editing HTML in source view.

Reference

If you use HoTMetaL PRO in WYSIWYG view, most of the time you don't need to concern yourself with completely understanding HTML. But the more you work with your web pages, the more likely you are to want to add something that requires some knowledge of HTML. Or maybe you just want to know what all the fuss is about. Once you understand the basics, you'll see that it really is elementary!

  More on this topic


Selecting text and elements

In HoTMetaL PRO, it is easy to select and move around parts of the document structure in the Editor without having to worry about making the markup invalid. Each time you select a start- or end-tag when you drag-select text, the corresponding tag (and all the content in between) is automatically selected, too. This ensures that you never cut or move just part of the markup. There are also a number of ways to quickly select a whole element (and any sub-element).

To select an element, do one of the following:

•	Choose Select Element from the Edit menu, or type Ctrl+Shift+T.

•	Right-click anywhere in the element and choose Select Element from the pop-up menu.

•	In Tags On view, you can also click once on either the start- or end-tag.

The element is selected.

To select several consecutive elements:

•	Place the insertion point anywhere in the first or last element that you want to select, and drag in the appropriate direction until all of the elements are selected.

The Cut, Copy, and Paste commands are similar to those in other Windows applications. The only difference is that in HoTMetaL PRO, a selection can contain elements. Removing or pasting certain elements can cause invalid markup in some circumstances.

The Editor will not paste a selection that would cause the markup to become invalid. Cut and Delete will become disabled if you select required elements, such as HTML, HEAD, and BODY.

To select all the content in a document, do one of the following:

•	In Tags On view, place the insertion point just inside the BODY tag, and choose Select Element from the Edit menu.

•	With the insertion point anywhere in the document, type Ctrl+A.


Creating HTML: it's elementary

To see the HTML markup in a document:

•	Open a document, or click on the [image] button to create a new document.

•	Choose Tags On from the View menu.

The document is surrounded by an element called HTML. This element contains two sub-elements, HEAD and BODY. These are required elements. The HEAD element contains information about the document; the BODY element contains all the other elements that make up the document itself.


Inserting HTML elements

You can think of the elements in an HTML file in (at least) two different ways: you can think of them as formatting styles, or as structural elements. Since a document published on the Web will be formatted differently by each browser or other application that reads it, you may prefer to think of the elements as standing for parts of the document's structure—heading, paragraph, list item—without thinking explicitly about how they are formatted. On the other hand, if you are accustomed to working with desktop publishing or word processing applications, you may want to think of the elements as styles.

HoTMetaL PRO Editor supports both approaches to HTML markup. Working in the WYSIWYG view is similar to applying word processing styles; the Tags On view is oriented toward thinking of elements as structural objects.

In earlier topics, you learned how to use the toolbar and the Enter key to insert elements. When you did this, you were creating HTML elements that serve various functions in the document.

In this chapter, you'll learn how to use the Insert Element dialog box to insert specific elements. Once you are comfortable enough with HoTMetaL PRO to attempt some of the more complex HTML features, you'll discover that there are some HTML elements that are available only using this method. The more common elements are available from the Style Element drop-down list, or directly from the toolbar. Think of those methods as shortcuts, or time-savers. If you prefer to always have the full list of available elements in front of you, use the Insert Element dialog box.

To insert an element:

•	Choose the Element... command from the Insert menu, or click on the [image]  toolbar button. The Insert Element dialog box appears.

•	Double-click on the element that you want to insert.

If the document contains a selection, the new element will surround it.

If you try this with the insertion point in various places in your document, you will notice that the list of elements changes. HoTMetaL PRO automatically provides you with a list of elements appropriate to your location in the document. For example, if you have text selected, only character format elements appear. If the insertion point is inside a block element, elements that cannot be nested inside that element do not appear, helping you to avoid invalid markup.

If you want to insert a number of elements in one work session, you can pin the Insert Element dialog box to the screen. Move the dialog box to a convenient location on the screen, right-click on the title bar, and choose Pin from the pop-up menu.

In some circumstances, HoTMetaL PRO will automatically insert an element to conform with the HTML rules. If you type inside an element that cannot contain text directly, but normally contains an sub-element that can contain text, the text you type will automatically be surrounded by that sub-element. For example, if you insert a UL, as soon as you start typing an LI element is automatically created, and contains your text.


Types of elements

There are a large number of available HTML elements (some of which are rarely used). It may help you to remember the more commonly used elements if you think of them as being grouped into different types, as they are in this section. Some of the elements described in this section are available from the toolbar and Element Style drop-down list and have been described earlier.

•	Head elements

•	Character formatting elements

•	List elements

•	Block elements

•	  `Code' elements, sometimes used to format text in technical manuals or papers

•	 HTML comments

•	Other character formatting elements

 Other elements—those that represent tables, forms, frames, links, and images—have specialized editing interfaces in HoTMetaL PRO and should not be inserted directly in a document.

  More on this topic


Using your HEAD

The HEAD element has sub-elements that define header material:

•	TITLE – contains the document title, which appears in the title bar of a web browser when the file is displayed. This is a required element.

•	BASE – can be used to record the document's location in the form of an absolute URL, which can be used to resolve a relative URL if the document is not accessed in its original location.

•	ISINDEX – indicates to the browser that the document is an index document. This is used only if the document is on a server that does indexing.

•	LINK – indicates a relationship between the document and another object on the Web, such as a cascading style sheet.

•	META – gives information that appears in HTTP headers. This can also be used to store document information such as the author and creation date.


Using block elements

Each piece of a document's body structure is actually a block element. None of these elements are mandatory, but should follow a logical structure (for example, H1 followed by H2, followed by H3). Any of the following block elements can be inserted in the body of a document:

•	Heading elements (H1 through H6) – Break the document into sections.

•	P (paragraph) – Paragraphs are the most common elements.

•	ADDRESS – Used to include an address, such as the address of the author of the document.

•	BLOCKQUOTE – Used for quotes from another source, requiring special block-style formatting.

•	PRE (pre-formatted text) – Used to tell a browser to maintain the line breaks and spacing that you have used. The text will be formatted by the browser using a fixed-width, typewriter-style font.

You can insert a block element using Element... from the Insert menu, or turn on the Quick Tools toolbar (from the View menu) to be able to add headings and paragraphs quickly.


Using character elements

Character elements are used to specify special formatting for text, usually to add emphasis. It is considered good practice to use the STRONG and EM elements, rather than B and I. This leaves browsers with the flexibility to display the text in the way that works best with the other display capabilities and settings of the browser. You can add the following elements to inline text:

•	STRONG – Usually displayed by browsers as bold.

•	B – Bold.

•	EM – Emphasis, usually displayed by browsers as italic.

•	I – Italic.

•	U – Underline. Since linked text is usually underlined, this element should only be used where it will not cause confusion.

•	CITE – Document citation.

•	TT – Teletype, displayed in a fixed-width typewriter font, such as Courier.

To insert a character format element:

•	With the appropriate text selected, choose Element... from the Insert menu. The Insert Element dialog box appears.

•	Select the element you wish to insert from the list, and click on the OK button. The selected text is now enclosed by that element.

You can use the [image], [image], and [image] toolbar buttons to make text bold, underlined, or italic quickly.


Inserting a line break

If you want to force a browser to break the current line in the text, insert a BR element. This element cannot contain text: it merely represents a line break.

To insert a line break:

•	Put the insertion point at the point at which you want to break the line, and do one of the following:

•	Press Shift+Enter.

•	Choose Element... from the Insert menu. The Insert Element dialog box appears. Select BR from the list, and click on OK.

The text is now split at the insertion point.


Using list elements

There are five HTML elements for different types of lists. With the exception of DL, list elements contain one or more LI (list item) elements. You can nest lists (that is, create sub-lists), by inserting a list element (such as UL or OL) inside a list item (LI).

To insert a list element using the Insert Element dialog box:

•	With the insertion point in the body of the document (but not inside any other block element), choose Element... from the Insert menu. The Insert Element dialog box appears. Select one of the following list elements:

•	OL – ordered list. Browsers will automatically number the items in this list element, reflecting nested levels.

•	UL – unordered list. Items in this list start with a list mark (bullet). Browsers usually use a different list mark for nested lists. You can set an attribute to specify a graphic to be used as the list mark.

•	DL – list of definitions. This type of unordered list is different from the others. Each item in a DL consists of one or more terms (DT elements), followed by definitions (DD elements).

•	DIR – folder list. This is an unordered list. Each LI element in a DIR should be no longer than 24 characters.

•	MENU – menu list. Also an unordered list. Each LI element should be no longer than one line.

You can change text to list items quickly using the Style Element drop-down menu, or use the [image] and [image] toolbar buttons for numbered or bulleted lists.


Inserting comments

You can add comments about the document or notes to yourself using the Comment command in the Insert menu. This inserts an HTML comment, which can contain only text (not other elements). Comments are not displayed by browsers, but can be viewed in HoTMetaL PRO if the Show comments option is turned on.

To insert a comment:

•	Choose Comment from the Insert menu, or type F8.

•	Type your text inside the tag.

To show comments:

•	Choose Options... from the Tools menu. The Options dialog box appears.

•	Click on the View tab.

•	Turn on the Show comments option.

•	Click on OK. Your comments will now display in the document window (but not in browsers).

Note: Because of the way comments are represented in HTML, you should not put two hyphens in a row (--) inside a comment. This could cause invalid markup.


Using code elements

Code elements represent a specific type of text and would normally be used in technical manuals or academic papers. You can insert any of these elements using the Insert Element dialog box:

•	CODE – Samples of code, usually displayed in a typewriter-style font.

•	KBD – Used to display text that a user would enter at the keyboard (not to confused with INPUT, used in forms), usually displayed in a typewriter-style font.

•	SAMP – Literal characters, usually displayed in a typewriter-style font.

•	VAR – Represents a variable name (for example, filename).


Using advanced text formatting elements

There are a number of other text formatting elements available from the Insert Element dialog box. Make sure that your pages look acceptable without these elements, because they are not supported by all browsers. Use them with caution to create:

•	Blinking text – Surround text with the BLINK element to cause it to blink on and off in the browser. Remember that such text is inaccessible for some users.

•	Non-breaking text – Surrounding text with the NOBR element prevents the browser from inserting line breaks. This element should be used only with short pieces of text that you wish to keep together (for example, a proper name).

•	Word breaks – If there is a position inside a NOBR element where a line break is acceptable to you, put a WBR element at that position to tell the browser that it can break the line there, if necessary.

•	Large and small text – Surrounding text with the BIG or SMALL element causes the text to be displayed in large or small type, respectively, compared to the surrounding text.

•	Strike-through text – Surrounding text with the S element causes it to be printed with a line through the text.

•	Subscripts and superscripts – Surrounding text with the SUB or SUP element causes the text to be displayed as a subscript or superscript, respectively.

•	Base font – The BASEFONT element is used to increase or decrease the default font size for the whole document. This element must be placed inside the BODY element before any block elements. The possible values of the SIZE attribute are not specific font sizes: they are proportional sizes that range from 1 to 7, with 3 corresponding to the usual font size. The font size will not change in the Editor window but it will change when the document is displayed by browsers that support BASEFONT.


Changing the markup

Every Web page is a work in progress: modifications are always being made. Whether you are editing text on your page or changing layout, you will likely have reason to change the markup.

HoTMetaL PRO supports the following functions for modifying the markup:

•	Changing the element type.

•	Splitting elements.

•	Joining elements.

•	Removing elements.

  More on this topic


Changing elements

Changing an element can be as simple as selecting a new element from the Style Element pull-down menu. For example, you change a level 1 heading to a level 2 heading just by placing the insertion point in the heading and choosing Heading 2 from the pull-down menu of styles in the Formatting toolbar.

For ease-of-use, only the most commonly used elements appear on the pull-down menu. To change an existing P element to a more specialized HTML element such as SPAN, use the Change Element command.

To change an element:

•	Place the insertion point inside the element.

•	Choose Change Element... from the Edit menu. The Change Element dialog box appears.

•	Select the desired element.

•	Click on OK.


Splitting elements

Splitting an element creates two elements of the same type as the current element. If there is content in the element, the first element will contain all the content before the insertion point and the second element will contain the remaining content. If the insertion point is just after the start tag, or just before the end tag, a new, empty element is created. The most common use for splitting elements is to place the insertion point just before the end tag and create a new, empty element after the current element.

To split an element:

•	Place the insertion point where you want to split the element and do one of the following.

•	Press Enter (in a block element).

•	Type Ctrl+Shift+P.

•	Choose Split Element from the Edit menu.


Joining elements

To join two elements, do one of the following:

•	Place the insertion point just after the start tag for the second element and type Backspace.

•	Choose Join to Preceding from the Edit menu.

If the elements have attributes, then the attributes of the first element will be adopted for the new, combined element.


Removing elements

The easiest way to remove an element is to use the Backspace key in Tags On view, especially if you want to remove one of several nested elements (elements within elements). Some character formatting elements can also be removed by selecting the formatted text and clicking the appropriate button. For example, to remove the italics from a word, select the whole word and click on [image].

To remove an element, do one of the following:

•	Place the insertion point just after the start tag for the element, and press Backspace.

•	Type Ctrl+Shift+D.

•	Choose Remove Tags from the Edit menu.


Using attributes

Elements can have content (the text and sub-elements you have placed inside the element) and attributes. An attribute is a value, or piece of information about the element that does not show in the content. Any element can have an attribute, but they are most important for the more visual elements: forms, frames, tables, and anchors. For example, the URL part of an image anchor is an attribute, and you can use another attribute to specify the alignment of the image.

You can use the Attribute Inspector to change the attributes of any element (discussed in the next section), but some elements also have special dialog boxes that appear automatically when the element is created. To open one of these dialog boxes to edit the common attributes of the element, place the insertion point inside the element and choose the same command from the Insert menu that you used to create the element (for example Link... to edit the attributes for a link).

Some elements with special dialog boxes for editing common attributes are:

•	An image (IMG element) has an Image Attributes dialog box. To open this dialog box, double-click on the image or right-click inside the IMG element and choose Image Attributes from the pop-up menu.

•	The HREF attribute, which represents URLs in A elements, can be edited by choosing Link... from the Insert menu.

•	Graphical FORM objects have customized attribute editing dialog boxes. Double-click on those objects to access the dialog boxes.

•	Many attributes in tables, and table rows, columns, and cells, can be edited by right-clicking in the table and choosing Table Properties from the pop-up menu.

•	You can change the attributes of the BODY element that set color and background images by choosing Properties from the File menu.

  More on this topic


Editing attributes with the Attribute Inspector

If you use HTML Source view, attributes are displayed as part of the start-tag for each element. You can look at one of your documents in HTML Source view to see how many attributes you've already used: many of them will be the default values inserted by HoTMetaL PRO when you created the elements. If you know HTML well, you can edit attributes directly in the source view .

In the WYSIWYG and Tags On views, you can edit attributes using the Attribute Inspector. You may find it easiest to make sure you are in the element whose attributes you want to edit by working in Tags On view and placing the insertion point directly to the right of the element's start-tag. If you prefer to work in WYSIWYG view, you can use the context display at the bottom of the window to confirm which element you are in.

To edit the attributes of an element:

•	Place the insertion point inside the element.

•	Choose Attribute Inspector from the View menu or type F6. The Attribute Inspector dialog box appears.

•	The Element list contains the current element and all of the elements that enclose it. If the element listed is not the element you wanted to edit (for example, an inline element is listed, but you wanted to edit the block element that contains it), choose the element from the Element list and its attributes will appear in the Attribute Inspector.

•	Click on the first attribute you wish to edit. The editing field associated with an attribute can be one of three types. If a drop-down arrow appears at the right edge of the field, you can choose a value from the drop-down list; if there is a ... button, you can click on it to browse for a file; otherwise, type an appropriate value in the field.

•	You can use the arrow keys to scroll up and down through the dialog box and edit other attributes. If you click on a ... button, your selection is applied when you click OK; each value you enter is applied when you press Enter, move to another field, or close the dialog box.

•	Click on the Close button or type Alt+F4 to dismiss the dialog box and accept your changes.

Note: In the Attribute Inspector, attributes are applied as you type `Enter' or leave each field, allowing you to see the effect of your change in the document window before closing the dialog box.


Creating valid HTML

One of the most important features of HoTMetaL PRO is automatic rules checking, which ensures that you do not break the required structure as you work with your document. As well, when you open or save a document, HoTMetaL PRO validates, or checks, that the markup is correct and complete.

Many HTML browsers permit a very loose, unstructured document format. However, this provides no guarantee that documents will be formatted the way you want when they are displayed on the Web. You will get much better results with valid documents.

The document-structuring rules built into HoTMetaL PRO are designed to be flexible while at the same time maintaining a useful document structure. If you open an existing document that does not conform to these rules, HoTMetaL PRO will try to open it anyway, adjusting the markup so that it conforms as closely as possible to the rules of HTML. If there are serious errors, the HTML wizard will be launched.

HoTMetaL PRO prevents markup errors in a number of ways:

•	Commands are grayed out (disabled) under circumstances that could cause errors. For example, commands on the Insert menu are gray whenever it would be invalid to insert the related object.

•	A restricted list of elements is presented. For example, the Insert Element dialog box will list only those elements that can correctly be inserted in the current location.

•	In some cases, HoTMetaL PRO will not complete the command. For example, if you choose an element style from the Style Element drop-down list that cannot be correctly inserted at the current location, the element style will not be inserted.

•	In other cases, you are given an opportunity to cancel a command that would create invalid markup. For example, if a Paste operation would leave the document incorrectly tagged, a warning pops up asking if you want to cancel the operation.

  More on this topic


Checking the HTML

Use the Check HTML command to verify that the markup in a document is correct and complete. If the validation process finds an error in the document, a message appears and the insertion point will move to the error so that you can make the necessary change.

Validation will find and report any markup errors not caught by rules checking. It will check that:

•	All required elements are present. For example, if the document contains an OL (ordered list) element that does not contain at least one LI (list item) element, validation will detect this problem.

•	All required attributes are present. For example, an IMG element must have a value for the attribute SRC (this represents the URL for the image, and is filled in automatically if you choose an image when you create the IMG element). If an IMG element exists without one, validation will detect its absence.

To validate a document:

•	Choose Check HTML from the Tools menu, or click on the [image] toolbar button.

One of the following appears:

•	A message confirming that your document is valid.

•	An error message describing the first instance of invalid markup. Click on OK and fix the problem. Repeat this step until the document is valid.

•	If your document contains elements or attributes that are not defined in HTML 2.0 (a very basic HTML standard), you will get a warning informing you of this. Click on More... if you wish to see the details, in the HTML Extensions Used dialog box.

To determine which elements in your document will be understood in various browsers, choose a browser from the drop-down list. In the top panel, the elements specific to that browser will be listed. The bottom panel lists all the elements that are not understood by other browsers or found in commonly-used rules files. You can also select a browser or rules file from the drop-down list.


Learning when to turn off the rules

The current rules checking state is indicated in the lower right corner of the status bar. In WYSIWYG and Tags On views, rules checking is automatically on as much as possible. In HTML Source view, rules checking does not apply (HTML is invalid most of the time when you are entering it by hand). When rules checking is on, HoTMetaL PRO ensures that the document being edited will be correctly marked up—changes that would cause invalid markup are not allowed.

There are occasions when the changes you are making involves two or more steps, and one of the steps will leave the document temporarily invalid. In these situations rules checking can get in the way and can be turned off temporarily. It is possible to turn rules checking off in the Options dialog box, but this is not recommended. You can also toggle rules checking on and off by typing Ctrl+Shift+K; HoTMetaL PRO will automatically turn it back on at the earliest opportunity. If you have reason to create invalid HTML or need to work with chunks of text that will temporarily result in invalid markup, work in HTML Source view.

  More on this topic


Moving text around

You may have noticed that you cannot select text across element tags (that is, you cannot place your insertion point in the middle of a paragraph and select the second half of the paragraph and down into the next—the full paragraph is automatically selected). That is because a single start or end tag would be a markup error. Each time you select a tag, its partner (and all the content in between) is automatically selected, too.

If you are completely rearranging the content of your document, you may prefer to work with rules checking off (that is, either turn the option off or work in HTML Source view) while you cut and paste portions of the content, fix any broken markup, and then turn rules checking back on.


Fixing markup problems with the HTML wizard

HoTMetaL PRO has a built-in set of rules that determine which HTML elements and attributes are valid, and how they can be arranged with respect to one another. If you open an invalid document—one that violates the built-in rules—HoTMetaL PRO will try to silently auto-correct the problem in order to produce a valid document. Generally speaking, if your document contains valid HTML elements and attributes, but has them arranged incorrectly (for example, if an LI is not enclosed in a `list' element such as OL or UL) HoTMetaL PRO will correct the problem for you.

HoTMetaL PRO checks for certain problems when you try to open a file, or when you switch between HTML Source and Tags On views. If some invalid markup is found, the HTML wizard starts.

The HTML wizard asks you how you would like to solve the problems found. The more knowledgeable about HTML you are, the easier it will be to make these choices, but the HTML wizard itself provides enough guidance for you to use it no matter what your level of expertise is.

This wizard is launched if HoTMetaL PRO finds:

•	An element that it does not recognize.

•	An attribute it does not recognize.

  More on this topic


Fixing unknown elements

A document might contain an unknown element, for example, PARA instead of P. In this situation, HoTMetaL PRO will offer you the choice of letting the program attempt to auto-correct the problem, or launching the HTML wizard.

If you launch the HTML wizard, a dialog box appears with the following choices:

•	HTML Element wizard – This is a wizard that guides you through correcting the invalid element.

•	Edit HTML Source – Opens the document in HTML Source view, where you can correct the problem manually.

•	Discard this tag – The tag (for example `<para>'), but not its contents, will be discarded.

•	Discard all unrecognized elements – All unrecognized tags in the document will be discarded; you will not be asked individually about each tag.


The HTML Element wizard

If you choose to correct an invalid element with the HTML Element wizard, it appears and offers you several choices.

The simplest choices are:

•	Misspelled Element – If the error is simply a typing error (for example, APPLE instead of APPLET) or a case of not knowing the correct HTML element name (for example, EMPH instead of EM) you can choose this option and enter the correction in the text box (some element names are available from the pull-down menu).

•	Text Only – If the error occurred because the `<' character, which normally starts an HTML tag, was used in some other context (for example, the phrase `Press <Return>') you should choose this option. The `<' will be replaced by the characters `&lt;', which will be displayed as `<' in a browser, but will not start a tag.

If you choose either of these options and click on Finish, the wizard makes the desired change and terminates.

If you want HoTMetaL PRO to treat this element as a valid HTML element from now on, you have two choices:

•	Custom Element (Container) – Choose this option if the new element consists of a start- and end-tag with some content (text and/or other elements) between them (for example, <para>...</para>).

•	Custom Element (Non-container) – Choose this option if the new element consists only of a start-tag, and doesn't contain any text or elements (it can have attributes, however). For example, instead of an IMG element you could have:

<image src="logo.gif"

>

Note: You should define the unknown element as a new element only if there is a browser or other HTML client application that supports that element. Otherwise, the element may be formatted as you wish only in HoTMetaL PRO.

If you choose one of these options and click on Next>>, you'll get another screen in which you can further customize the new element.

Configuring custom elements

If you add a new element to the list of valid elements, you will get a screen that lets you specify some properties of the element.

•	Name – You can modify the element name (but if you do so, and you chose Custom Element (Container) in the previous screen, only the start-tag will be modified).

•	Description – This description will appear in the Description field in the Insert Element dialog.

You can choose the following style properties:

•	Turn on Paragraph if you want the new element to be displayed as a block-style element (the element will have line breaks before and after it), or Character if you want the element to appear inline.

•	Turn on Preserve white space if you want the line-breaks, tabs, and spaces inside this element to be displayed in HoTMetaL PRO exactly as they appear in the HTML file.

•	Turn on Hide in WYSIWYG mode if you want the contents of this element to be hidden in WYSIWYG view.


Fixing unknown attributes

A document might contain an unknown attribute, for example, the IMG start-tag might have an HREF attribute instead of SRC. In this situation, HoTMetaL PRO will give you the choice of letting the program attempt to auto-correct the problem, or launching the HTML wizard dialog box. This will also occur if a new element that you defined using the HTML Element wizard has one or more attributes; each of these attributes has to be defined individually for the new element. If you choose Auto-correct in this situation, the attributes will be deleted.

If you choose HTML wizard, you will see a dialog box with the following choices:

•	HTML Attribute wizard – This is a wizard that guides you through correcting the invalid attribute.

•	Edit HTML Source – Opens the document in HTML Source view, in which you can correct the problem manually.

•	Discard this attribute – The attribute and its value (the text between double quotes, if any) will be discarded.

•	Discard all unrecognized attributes – All unrecognized attributes in the document will be discarded; you will not be asked individually about each attribute.


The HTML Attribute wizard

The HTML Attribute wizard lets you correct an unknown attribute or add it to the list of valid attributes.

To correct an attribute name:

•	Choose the correct name from the Attribute Name drop-down list.

•	Click on Finish.

To add the unknown attribute to the list of valid attributes:

•	Leave the Attribute Name unchanged.

•	Optionally, enter some descriptive text in the Help string for Attribute Inspector text box.

•	Optionally, enter a space-separated list of values; this will restrict the allowed values for the new attribute.

•	Click on Finish.

Note: You should define the unknown attribute as a new attribute only if there is a browser or other HTML client application that supports that attribute. Otherwise, the attribute will be supported only in HoTMetaL PRO.


Authoring for accessibility

The HoTMetaL PRO Editor includes the following features to make accessible authoring easier and faster.

•	Accessibility prompting dialog boxes

•	Descriptive text editor

•	Accessibility validation

•	Pop-up warnings

The HoTMetaL PRO Editor helps you evaluate the accessibility of your markup by letting you check the markup according to the guidelines that follow. Please see the section on validating for accessibility  for more information.

  More on this topic


Guidelines for creating accessible pages

People access the Internet and intranets under a variety of circumstances. Some users cannot see graphics because they have visual impairments, use text-based browsers, or have slow modem connections; others cannot hear sound because they have auditory impairments, or use computers without sound capabilities; and some cannot operate a mouse or keyboard because they have mobility impairments. Accessible HTML authoring means writing pages and sites that take these different groups into consideration. Accessible pages do not have to be plain and text-based, but take special care to avoid presenting material in a manner that excludes potential users.

The following guidelines will help make your HTML pages more accessible to users with disabilities, particularly those who are `reading' your pages with the aid of a screen reader and voice synthesizer. These guidelines also help keep your pages usable with all browsers, especially non-graphical browsers such as Lynx.

•	Provide meaningful text for all links (A elements).

•	Include alternate text (using the ALT attribute) for all images.

•	Use client-side image maps instead of server-side image maps (to make them accessible to the visually impaired using the tab function in Internet Explorer 3.0).

•	Include alternate (ALT) text for each image map AREA.

•	Place a textual list of all image map links elsewhere on the page.

•	Choose readable combinations of text and background colors.

•	All tables should be accompanied by a link to a text-only presentation of their content.

•	All forms should be accompanied by a link to a text-only presentation of their content.

•	Text boxes in forms should have default content that suggests the kind of information the user should enter.

•	Always include a NOFRAMES version of a page that uses frames.

•	Avoid hyperlinks longer than ten words. Longer links may be cut off by screen readers.

•	Ensure that there are separating spaces or characters between each hyperlink.

•	Avoid using the MARQUEE and BLINK elements.

•	Keep the color and font constant within each word.

•	Include descriptive text for BGSOUND (background sound) files.

•	Include descriptive text for audio files.

•	Include descriptive text for video files.

•	Include alternate and descriptive text for applets.

•	Include alternate and descriptive text for ActiveX objects.

•	Warn the user if Client-Server Push-Pulls are being used.

Note: These accessibility guidelines were provided by the Adaptive Technology Research Centre at the University of Toronto. More information about the ATRC is available at: http://www.utoronto.ca/atrc


Inaccessible Element: Missing link text

Link anchors (text in A elements) should provide a description of the content being linked. Avoid phrases such as `Click here.'


Inaccessible Element: APPLET

Applets can take many forms, but they are often very visual and therefore inaccessible to users with visual disabilities. This inaccessibility can be compensated for with the addition of a short alternate text label and a longer descriptive text. HoTMetaL PRO prompts you to use both of these methods during the insertion process. For users whose browsers do not support Java, alternative content should be entered that is identical to the alternate text. It is important that all functions available within the applet also be listed in text format elsewhere in the document or site.


Inaccessible Element: BGSOUND

The BGSOUND element is used to define a background sound for a document. If the background sound includes instructions, announcements, or other important content, that content should also appear textually on the page. For added accessibility descriptive text can be used. The length, style, and content of background audio clips vary widely from one situation to the next and depend on the creative discretion of the author. Descriptions of these clips might include a detailed script of all dialogue, a written description of any music that can be heard, and a text-based representation of any sound effects that occur in the recording.


Inaccessible Element: BLINK or MARQUEE

Text is generally considered to be inaccessible if it cannot be interpreted by a screen reader program. Flashing or moving text is not only inaccessible to screen reading programs, but it is also difficult to read for users of screen magnifiers. Text that does not stay still is difficult to track, focus on, and read. Try drawing attention to text using emphasis, italics, or bold instead.


Inaccessible Style: Background Images or Colors

The wrong choice of background image or color can affect the readability of a page for everyone, but users with a variety of visual disorders are most affected. Graphical content, such as company logos, will be completely missed by users who use screen reading programs, and the reading process for users who must magnify the screen one small portion at a time is disrupted by the absence of a solid background. The enhanced background might also reduce, or eliminate, the readability of a document for users who are color blind, have problems focusing, or whose eyes tire and strain easily. These problems can be compounded by poor choices in foreground text colors. If background images and colors are used, special care must be taken to ensure that pages are readable and that all content appears elsewhere on the page in textual form.


Inaccessible Style: Text Color

The wrong combination of background and text colors can affect the readability of a page for everyone, but users with a variety of visual disorders, such as color blindness, focusing problems, or eyes that tire and strain easily, are most affected. Another problem is the practice of adding large blocks of white on white text to increase search engine scores. This is invisible to the average viewer, but the text will be picked up by a screen reader, much to the confusion of the user. When defining colors for text, ensure that the text is readable against the background and that links are easily recognized. The use of color is not always a problem: it can be used to make reading easier and aid comprehension.


Inaccessible Attribute: FONT Size

Font size is often used as an alternative to headings. One practice, called Drop Caps, is to use a larger font size for the first letter of a word than for the rest of the word.

Although this is a common practice in print, an HTML aware screen reader will read the first letter followed by the rest of the word. For example, the word "the" becomes "tee he". For better accessibility, headings should be used whenever possible. Headings also maintain and enhance the document structure.


Inaccessible Style: Forms

Forms are generally a very useful and user-friendly way of soliciting input from readers. However, despite technological improvements, browsers and assistive technologies may have trouble conveying the format and content of forms to their users. Therefore, it is suggested that a text-only version of the form, including both email and postal addresses, be available on a separate linked page. This will allow users with visual disabilities to save the file locally and reply by email, or to print out the form and reply by mail. This solution will also provide a way of accommodating users who are wary of sending personal information over the Internet.


Inaccessible Style: Text Boxes and Text Areas

Text boxes and text areas can be a problem for screen reader users because their labels may be on another line or cut off. It is helpful to include the field name as the default field text for edit boxes. For example: [quot  ]your name[quot  ] or [quot  ]institution.[quot  ] This serves to clarify the function of edit boxes with text labels that may have been cut off by the screen.


Inaccessible Style: Frames

Frames offer a way to split up the screen into functional window-like panes. Some of these panes may remain displayed during an entire site visit, allowing site guides or other useful information to be permanently displayed. Although this can be very helpful to some users, screen reading programs typically read from left to right, ignoring pane boundaries and mixing content from both sections. This can be incredibly confusing and may render the entire site inaccessible. Also, not all browsers support the FRAMESET element. To ensure accessibility to all users, sites using frames should offer the option of turning off frames and displaying content in the normal fashion using the NOFRAMES tag.


Inaccessible Element: IMG

The most common way of dealing with the inaccessibility of images is by making use of ALT (alternate text) attribute of the IMG element. Alternate text provides a textual description which is displayed in place of the image by text-based browsers and graphical browsers whose image loading has been disabled. ALT text is particularly important to users with visual impairments, who use screen reading programs that are unable to interpret images of any kind, including pictures of words. Since the ALT text is displayed independently from the image, the description must be adequate enough to keep the user informed. For example: if the image depicts a company logo, the corresponding ALT text might consist of the company name, along with a short description of the logo, itself. If the image is anchored, it is important to emphasize the button's functionality rather than its overall appearance. For example: using a label such as `home' or `help' would be more informative than a description of the button's visual appearance.

Note: ALT text descriptions should be kept brief because many browsers display the text within a limited area. This means that a description that is too long will not appear in its entirety. In situations where a longer description is required, a short ALT text description should still be included with the image along with a descriptive text link. The Image Attributes, which appears during image insertion, includes a Description button for adding descriptive text.


Inaccessible Attribute: IMG-ISMAP (Server-Side Image Maps)

Image maps are a very popular and effective way of conveying information. However, they require that the user have a graphical browser with a fast connection, and the physical ability to see the image on the screen. Microsoft Internet Explorer 3.0 introduced a keyboard function that allows users to TAB through the AREA's of Client-Side image maps. If alternate text labels are provided for each AREA then these image maps become accessible to the visually impaired. Therefore, it is suggested that Server-Side image maps be avoided in favor of Client-Side image maps. However, it is still necessary to provide a text menu for users with other browsers or slow connections. This text menu should be located just below the image map and contain all the same options as the image map. The menu should also include a text-based title, such as "Image Map Options".


Inaccessible Attribute: IMG-USEMAP (Client-Side Image Maps)

A Client-Side Image Map is composed of hotspots called AREAs. Microsoft Internet Explorer 3.0 introduced a keyboard function that allows Client-Side Image Maps to be accessed as long as alternate text (ALT) labels are provided for each AREA. These text labels should provide the user with adequate information as to what will occur if a particular AREA is selected. For example: if the image is a button, it is important to emphasize the button's functionality. If the image is a hyperlink, it is important to emphasize the type of content of the linked site. An ALT text for the full image is also necessary to indicate that this image is an image map. It is still necessary to provide a text menu for users with other browsers or slow connections. This text menu should be located just below the image map and contain all the same options as the image map. The menu should also include a text-based title, such as "Image Map Options".


Inaccessible Element: OBJECT

Objects can take many forms, but they are often very visual and therefore inaccessible to users with visual disabilities. This inaccessibility can be compensated for with the addition of a short alternate text label and a longer descriptive text. Both of these methods are available on the Object Attributes dialog box, which appears during the insertion process. For users whose browsers do not support OBJECT, alternate content should be entered that is identical to the alternate text. It is important that all functions available within the object also be listed in text format elsewhere in the document or site.


Inaccessible Style: Client-Server Push-Pulls

In a Client-Side Push-Pull, images are pushed on top of each other in succession to form pages with dynamic content. Often this is used to construct changing billboards or animation. Unfortunately, this practice makes the page inaccessible to users who rely on ALT text because many assistive technologies assume a static page format. If a Client-Side Push-Pull is unavoidable, users should be warned of its existence by a short note at the top of the page. This warning may explain why their access device reacts strangely. In addition, all content contained within the Push-Pull should be presented elsewhere in textual format.


Inaccessible Element: TABLE

Tables are usually an excellent way of displaying large amounts of data in a way that is easy to understand. However, screen reading programs read lines of text that appear on the screen from left to right. This means that column breaks (blank spaces between columns) are ignored, and the text is read in one continuous, non-contextual stream from left to right. This problem becomes especially difficult to handle when table cells contain entries that are more than one line high. Since screen readers typically read line by line they may read the two lines of the cell at different times, making the table difficult to understand. It is suggested that all the information contained in the table be provided elsewhere in a purely linear, text-based format. This text can be placed in a separate file that can be accessed through a hyperlink if necessary. Recently, tables with invisible cell boundaries have begun to be used to organize the layout of pages, including integrating columns of text and images. This practice is also very inaccessible for the reasons stated above; most screen readers read left to right and ignore the column boundaries, merging the columns into an unreadable jumble.


Inaccessible Style: Wordy Links

Some visually impaired users use screen reading programs which allow them to cycle forwards and backwards through the hyperlinks on a page. This movement is achieved via the use of keyboard commands, and allows users of this technology to quickly obtain a link list without having to read the document line-by-line. It is important to avoid link names that are more than ten words long, or those links that take up more than one line. This not only makes the process of obtaining a link list more time effective for screen readers, but avoids problems with screen reading programs that are not capable of interpreting multi-line links correctly.


Inaccessible Style: Non-Separated Links

Some visually impaired users use screen reading programs which allow them to cycle forward and backward through the hyperlinks on a page. This movement is achieved via the use of keyboard commands, and allows blind readers to quickly obtain a link list without having to read the document line by line. Non-separated link names should be avoided because screen reading programs tend to read multiple links as a single link, making link selection ambiguous. This problem can be avoided by placing unlinked characters such as numbers or commas as well as line breaks between links.


Inaccessible Style: Missing Descriptive Text for Audio Files

Descriptive text is a very important way of making audio clips accessible to users in a variety of circumstances. Groups of individuals who can benefit from such descriptions include those with hearing impairments, slow modems or network connections, or computers that lack multimedia capabilities.


Inaccessible Style: Missing Descriptive Text for Video Files

Descriptive text is a very important way of making video clips accessible to users in a variety of circumstances. Groups of individuals who can benefit from such descriptions include those with visual impairments and slow modems or network connections.


Writing alternate (ALT) text

Alternate text can be associated with an image (IMG), image map area (AREA), Java applet (APPLET) and ActiveX object (OBJECT). This text (the contents of the ALT attribute) is displayed instead of the image or object when image loading is turned off and by text-only browsers such as Lynx. Some browsers also display alternate text while images are loading. The way alternate text is displayed also differs between browsers. Some browsers display the alternate text as a single line that may be cut off by the screen while others force the text into the dimensions of the image which is a problem when the image is very small. Consider the following guidelines to writing ALT text:

•	Keep it short (less than ten words). If a longer description is necessary, use descriptive text .

•	If the image is within an anchor emphasize the destination in the alternate text.

•	If the image is an image map, make a note of this in the alternate text.

•	Graphics that are being used as list bullets should have the letter `o' for the alternate text.

Browsers that do not support Java or ActiveX cannot display ALT text for these objects, either. Alternative content that is identical to the alternate text should be provided for users of these browsers. If accessibility prompting is turned on, the Applet Properties and Object Properties dialog boxes provide space to write alternative content.


Writing descriptive text

Descriptive text is a longer, more detailed description of an inaccessible element than would be appropriate for alternate text. The descriptive text is contained in a separate file, accessed by a link containing the single letter `D' (or `d') immediately following the element in the document. HoTMetaL PRO simplifies the process of authoring this text by handling the creation of the file, insertion of the D-link, and insertion of the descriptive text into the file. All you have to do is enter the descriptive text itself and change the default descriptive text file name if desired. The descriptive text editor makes the editing process more efficient by retrieving any descriptive text already authored for the description file. If changes are made, the old text is automatically replaced with the new text.


Using the descriptive text editor

Descriptive text is a relatively new practice that is meant to complement the short description provided by the alternate text and increase the accessibility of a site. Basically, a D-link (for description) is placed just after a potentially inaccessible element in the HTML file. This link connects to a text-only description of the element. Descriptive text is usually provided for applets, images, objects, audio files, and video files in order to make them accessible to users who are blind, visually or hearing impaired, using text-only browsers, or using slow connections.

The HoTMetaL PRO Editor includes a built-in utility for writing descriptive text. This utility is available whenever one of these objects is inserted, as long as Automatic accessibility prompting is set to On or Strict in the HoTMetaL PRO Options dialog box.

To enter descriptive text:

•	Click on Description.... The Accessibility Description dialog appears.

•	Type a description in the text box.

•	Enter a path and file name for the text in the Descriptive file text box, or click on Choose... to select an existing file.

•	Click on OK.

Consider the following guidelines to writing descriptive text:

•	Describe any text that appears in the object.

•	Describe the size, look, and organization of the object.

•	Describe the main function of the object.

•	Transcribe any voices, sounds, or action.

•	Do not include hyperlinks or other HTML markup.


Setting the accessibility prompting level

You can choose one of the following accessibility prompting levels in the Options dialog box:

•	Off – Deactivates accessibility prompting. The dialog boxes and pop-ups that appear as you insert elements will not prompt you to create accessible alternatives.

•	On – The attributes dialogs for elements that require alternative or descriptive text for complete accessibility will include prompts for such text.

•	Strict – Activates the pop-up warning system, in addition to the prompts for alternative and descriptive text. This system will display warnings about the inaccessibility of the TABLE, BGSOUND, FRAMESET, MARQUEE, and BLINK elements as soon as they are inserted using the Insert Element dialog box.

To change the accessibility prompting level:

•	Choose Options... from the Tools menu. The Options dialog box appears.

•	On the General tab of the Options dialog box, set the desired accessibility prompting level.


Validating for accessibility

People with disabilities often use special technology to give them access to HTML documents. As a result, HTML documents should conform to rules for accessibility. For example, many people assume that with the increasing number of users with graphical browsers, the alternative text (ALT) attribute for images is no longer necessary. Some accessibility technologies, however, make use of the ALT attribute for users with impaired vision.

You can ensure that your document is accessible to users with special assistive technology by choosing Check Accessibility from the Tools menu. HoTMetaL PRO checks your document against a set of guidelines. If your document is not marked-up to be accessible to everyone, a message appears with a summary list of the accessibility problems:

Click on OK to open a succession of warning dialog boxes, which explain each problem. Click on Cancel to stop validating the document for accessibility. Dialog boxes appear for some problems that can be solved immediately; in these dialogs you can do the following:

•	Correct the problem and click on Apply.

•	Click on Skip to proceed to the next accessibility problem without making any changes.

•	Click on Stop to quit the correction process.

If your document does not pass the accessibility check, it does not mean that the HTML markup is incorrect. However, it is advising you that your document could be marked up to be more accessible to people with disabilities.


Typing special characters

HoTMetaL PRO supports the ISO 8859/1 character set (also called ISO Latin-1) and a number of other `special' characters that do not have a corresponding key on the keyboard.

To enter a special character, do one of the following:

•	With NumLock on, hold down the Alt key and type a zero (0) followed by the ANSI numeric code for the character. For example, Alt+0233 will enter the character `é'.

•	Choose Special Characters from the Insert menu, or type Ctrl+Shift+E. The Special Character palette appears. Click on the character you want to insert.

Note: When you save a file, non-ASCII characters are converted to entities. For example,`é' is converted to the entity definition that Web browsers will recognize: `&eacute;'.

Non-breaking spaces

A non-breaking space looks like an ordinary space, but if you put this kind of space between two words, browsers will not break the line of text at that location. Another common use for non-breaking spaces is to force the browser to display the border or background color of empty table cells. A non-breaking space is displayed as an ordinary space in the HoTMetaL PRO WYSIWYG view, and as an nbsp icon in the Tags On view.

To insert a non-breaking space, type Ctrl+Shift+Space.


Editing HTML source

HoTMetaL PRO includes a view for HTML source editing: you can use this to edit invalid HTML, or to create and edit raw HTML. HTML Source view displays all of the elements, attributes, and content that make up the document, using different colors to distinguish them. You can change the display font and font colors for this view; you can also modify the layout of the source displayed.

To view HTML source, do one of the following:

•	Choose HTML Source from the View menu.

•	Click on the HTML Source view button (the left-most button in the [image] group) at the bottom left of the document window.

You may notice that some of the toolbar buttons and menu commands are now grayed out: HTML Source view does not have all of the editing tools found in the Tags On and WYSIWYG views. You can still insert elements and objects in HTML Source view, but the related dialogs will not appear and you will have to set any attributes by hand (that is, type in the values using the appropriate syntax) or change views to use the Attribute Inspector. HTML Source view is useful for viewing the raw HTML that you have created but you won't want to work in it all the time unless you know HTML very well.

The DOCTYPE declaration, visible at the top of the file in HTML Source view, specifies the DTD, the file that describes the how elements and attributes can validly be arranged. For most HTML documents, the DTD is hmpro4.dtd. You can select a different DTD for the current document. To do this, edit the DOCTYPE line, changing hmpro4.dtd to the filename of the DTD that you want to use. HoTMetaL PRO currently supports one other DTD, webtv.dtd, used for WebTV documents. You can also create a WebTV document by choosing New... from the File menu and opening the template in the `WebTV' Template Group. For more information on WebTV, see http://www.webtv.com/

  More on this topic


Changing the display fonts in source view

You can change the font, font size, and colors used to display the following document components in HTML Source view:

•	Ordinary text (non-markup)

•	Start-tags (includes attribute names)

•	End-tags

•	Attributes (that is, attribute values)

•	Scripts (the contents of SCRIPT elements)

•	Comments

•	The DOCTYPE Declaration (located at the top of the document in HTML Source view).

These settings do not affect the way your document is displayed in a browser.

To change the fonts used in HTML Source view:

•	Choose Options... from the Tools menu.

•	Click on the Fonts tab in the Options dialog box..

•	In the HTML Source View section of the dialog box, do any of the following:

•	Select a different display font from the Font drop-down list.

•	Change the display font size, using the Size drop-down list.

•	Choose a Foreground color (default text color) and Background color by clicking on the appropriate button.

•	Change the display color for any of the available markup components.


Changing the source view layout

The HoTMetaL PRO Editor uses indents and vertical spacing to display HTML source in a way that helps users distinguish content and markup. While the default settings should make it easier for you to work with source code (in comparison to a text editor), you may want to adjust the settings to make certain elements stand out. These settings also determine how the file is saved.

To change the HTML Source view layout:

•	Choose Options... from the Tools menu. The Options dialog box appears.

•	Click on the Source Layout tab.

•	Do any of the following:

•	Increase or decrease the Indent size (number of spaces inserted before all `block' elements, such as paragraphs and list items).

•	Increase or decrease the Maximum line length.

•	Select any element from the Elements list (`!--' stands for HTML comments) and change its display settings: you can indent the contents of the element, and add a blank line or line break around the start-tags or end-tags.


Using WebBot components

WebBot™ components (also called FrontPage components) are a feature of Microsoft FrontPage™ and web servers that support the FrontPage Server Extensions. WebBot components consist of some special markup, and sometimes other content. A WebBot component acts as an instruction to the client or server to process the content in a special way or take some other action. If you intend to use any of the server-side WebBot components, you should ask your ISP if their server supports the FrontPage Server Extensions.

HoTMetaL PRO enables you to open pages containing WebBot components and enter your own WebBot component markup. HoTMetaL PRO does not interpret and run WebBot components.

HoTMetaL PRO supports the standard FrontPage WebBot components. If new WebBot components are added to the product, or you create your own, you can extend HoTMetaL PRO's capabilities in order to support them.

WebBot components are invisible in WYSIWYG view; in Tags On view they are displayed as a pair of tags containing the WebBot name, with the WebBot markup between the tags. You can view and edit the WebBot markup directly in HTML Source view.

To enter a WebBot component, switch to HTML Source view, and enter the WebBot component markup directly. WebBot components are implemented using HTML comments. Usually there is a `start comment' and an `end comment'; between the comments there can be special content, such as an HTML form that interacts with the WebBot, or some non-standard HTML markup that is hidden and will be processed only by an application that understands the WebBot component. For example:

<!--webbot bot="HTMLMarkup" startspan -->

<newtag>Interpret me, if you dare!

</newtag>

<!--webbot bot="HTMLMarkup" endspan -->

This example shows the `HTMLMarkup' WebBot component, which enables you to hide non-standard markup.

WebFiler and ColdFusion markup are examples of markup that must be protected in HoTMetaL PRO with a WebBot component; see SoftQuad's Support Center (http://www.softquad.com/supportcenter) for tips.

Active Server Page (ASP) markup does not require a WebBot component in order to be opened in HoTMetaL PRO. You can open pages containing ASP markup in the normal way.


Adding support for new WebBot components

HoTMetaL PRO supports the standard FrontPage WebBot components. If new WebBot components are added to the product, or you create your own, you can extend HoTMetaL PRO's capabilities in order to support them. You do this by editing the hmpro4.ini file, in the HoTMetaL PRO folder.

For each new WebBot component, there are three settings:

•	non_SGML_start_comment_N

•	non_SGML_end_comment_N

•	non_SGML_tag_N (optional)

In each case, N is a number. For each group of settings, use the next available unused number: if there are already 10 groups, you would use non_SGML_start_comment_11, and so forth.

These settings are used as follows:

•	non_SGML_start_comment_N should be set to some text or a pattern that defines the markup inside the `start comment'. You can use the same special characters in patterns as are used in search patterns in HoTMetaL PRO.

•	non_SGML_end_comment_N should be set to some text or a pattern that defines the markup inside the `end comment'. You can use the same special characters in patterns as are used in search patterns in HoTMetaL PRO.

•	non_SGML_tag_N should be set to the name of the tag that is will represent the WebBot component in the HoTMetaL PRO Tags On view. If you don't make this setting, the name WEBBOT will be used.

You may find it helpful to use the existing settings in the hmpro4.ini file as models when creating new settings. In many cases, you may be able to implement the new settings by copying existing ones and simply changing the WebBot component name.

This extension mechanism does not have to be used only to define new WebBot components; it can also be used to define your own special markup.


Sources of information

You can also refer to the following sources of information regarding HTML standards and browser extensions:

•	The HTML 2.0 standard: http://www.w3.org/hypertext/WWW/MarkUp/html-spec/index.html

•	The HTML 3.2 recommendation: http://www.w3.org/pub/WWW/MarkUp/Wilbur

•	Netscape Navigator extensions to HTML 2.0 http://home.netscape.com/assist/net_sites/html_extensions.html

•	Netscape Navigator extensions to HTML 3.0 http://home.netscape.com/assist/net_sites/html_extensions_3.html

•	Microsoft Internet Explorer 3.0 extensions to HTML http://www.microsoft.com/ie/ie3/htmlext.htm

•	Microsoft Internet Explorer 4.0 extensions to HTML http://www.microsoft.com/ie/ie40/browser/

•	NCSA Mosaic (2.0 and 3.0) extensions to HTML http://www.ncsa.uiuc.edu/SDG/Software/mosaic-w/html/index.html


Developing your Web site

What you'll learn in this chapter

In this chapter, you will learn how to:

•	Create a new project using the Site Maker.

•	Change decors for pages created with the Site Maker.

•	Create a new project using the Template wizard.

Reference

The Site Maker provides a way of building your own Web site. You can quickly create a customized and complex site, containing all sorts of different pages for various purposes.

The Site Maker takes your input—personal information, company information, the URL of the completed site, etc.—and creates a personalized site from it.

As well, you make choices about the type of site that you want to have—you select from a list of content types for the site, and choose specific pages within those content types.

You can also select the layout and style of the site: you can pick from many different layouts and decors—integrated images, rules, titles, and buttons that give your site a consistent look and feel.

Once you have created the pages, you will need to edit them with the HoTMetaL PRO Editor to add your own content.

  More on this topic


Starting and using the Site Maker

To start the Site Maker:

•	Start the HoTMetaL PRO Information Manager.

•	Choose New Project from the File menu.

•	Choose From Site Maker... from the fly-out menu.

The Site Maker is easy to use—most of the information that you need to create your site is on the Site Maker screens; this documentation adds some details about the functions of the Site Maker and provides some technical information.

  More on this topic


Site Maker screen 1: Introduction

This screen is an introduction to the Site Maker wizard, telling you how to navigate through the screens. This screen is purely informational: you don't have to make any choices in it. You can choose not to show this screen again (by clicking on the Skip this screen in the future check box).

You navigate through the Site Maker by making choices in each screen and clicking on Next >. The choices that you make don't get finalized until the very end, when your new site will actually be created, so you can always click on < Back and change your choices.

Clicking on Help brings up a help topic that gives more information on the current Site Maker screen.


Site Maker screen 2: Personal Information

The information that you enter in the Name, Address, Phone, Fax and Email address text boxes will be used to personalize the site you are creating: it will be inserted into all pages where it's appropriate to have contact information (the main page, for example).

All of these fields are optional; you can leave them blank if you wish. However, if you're creating your site for the WWW, it's definitely a good idea to have your email address listed on your pages. A company's Web pages should also have their postal mail contact information and phone number (though this information may not be appropriate for a personal site).


Site Maker screen 3: Site Information

Site Name: Your site should have a name that identifies it to anyone who views it. The name should describe your site; for example, `Company Name's Web site' will be clear to anyone viewing your site (replace `Company Name' with your own company name, of course!).

Site URL: If you know the URL that your site will have, enter it in this field. For example:

http://www.my_isp.com/~my_site/

 or

http://www.my_site.com/

 If you don't know the final URL for the site, you don't have to enter it, but you may have to add the information when you edit the pages using the HoTMetaL PRO Editor.

Company name and Company logo: this information will be used to personalize the site. Type the path to the company logo, or click on Browse... to choose the file—the Browse Company Logo dialog appears. The image file must be in GIF, JPEG, BMP, or PNG format. If you want to preview the logo in this screen, click on the Preview check box.


Site Maker screen 4: Content

The content choices available in the Evaluation Version that you are now using are a subset of those provided with HoTMetaL PRO 4.0. Choose `How To Purchase' in the Help menu for ordering information.

This screen lets you specify what your site will be used for. If you highlight a content type, a brief description appears at the bottom of the screen. You can select as many types of content as you like from this list. You make the choices as to exactly what pages your site will contain on the next screen.


Site Maker screen 5: Web page choices

The web page choices available in the Evaluation Version that you are now using are a subset of those provided with HoTMetaL PRO 4.0. Choose `How To Purchase' in the Help menu for ordering information.

Once you have selected content types from the previous Site Maker screen (Content), this screen lets you choose what particular pages from those content types you would like to have in your site. By default, all the pages are selected; click on the check boxes for a page to deselect it, and click again to reselect it.

If you highlight a page, a brief description of what it will be used for will appear at the bottom of the screen. This information helps you determine whether you would like that page in your site.

The screen shows the hierarchical link structure of the pages you can select. If you select a `lower-level' page, the `higher-level' page that links to it will be automatically selected. Conversely, if you deselect a `higher-level' page, all the choices under it will be deselected too.


Site Maker screen 6: Layout and Decor

The decors and layouts available in the Evaluation Version that you are now using are a subset of those provided with HoTMetaL PRO 4.0. Choose `How To Purchase' in the Help menu for ordering information.

This page allows you to choose a layout and decor and apply them throughout the entire site. Layout is the way text and images are arranged on your page: you can select from several different layout options in this screen. Decor is a set of specially-designed images—buttons, titles, rulers, and bullets—that give your pages a consistent look and feel. A description of the different layout and decor  options is given directly below them in the selection list. Choose a decor and a layout.

If you want to see a preview of how your site will look in the left side of this dialog box, click on the Show Sample check box.


Site Maker screen 7: Preview and save your Web site

The previewing functionality described in this topic requires that you have Microsoft Internet Explorer, version 3.0.2 or higher. This browser is shipped with HoTMetaL PRO 4.0, but not with the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

Click on Preview... if you want to preview the site in your Web browser without saving it. (The Site Maker will extract the appropriate pages and decor from its database and save them in a temporary location in order for you to preview the site.)

In order to save the site you've designed, choose a location on a local drive. Type the path to the location where you want to save your site, or click on Browse.... The site is saved from the next (and final) Site Maker screen; click on Next.


Site Maker screen 8: Finish

This screen gives you a summary of the site that you have just created, listing the name of the site, the choices that you made for layout and decor, the content type and pages that you have chosen, and the final location for the saved site. Clicking on Finish on this screen will extract the decors and pages from the Site Maker database and build the site in the specified location. As the Site Maker is creating the site, you can click on Cancel in the Create Project Pages status dialog to stop the site creation (and then go back and make changes, if you like).

 The images for the site are saved in a folder called SMDecor under the root level of the site. Once the site has been created, it will be opened as a new project in the Information Manager, where you can manage your project; see Publishing your Web site  and Maintaining your Web site  for details on using the HoTMetaL PRO Information Manager.


Changing decors

Once you have created a site with the Site Maker, you can change the decor for the site you have created by choosing Change Decor from the Tools menu in the HoTMetaL PRO Information Manager, or from the Format menu in the HoTMetaL PRO Editor. This command is only active if you have selected a page in a site that was created by the Site Maker (that is, it must be a page that has a decor). The Change Decor dialog box appears.

You can select a different decor for the pages that you select. The decor images will be extracted from the database and applied to the selected pages. (Make sure you select all the .htm and .html pages in the Project panel if you want to change decors for the entire site.)


Creating a new project from a template

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

When you click on the [image] toolbar button, type Ctrl+N, or choose New Project... from the HoTMetaL PRO Information Manager File menu, the HoTMetaL PRO template wizard is launched. This wizard guides you through the process of creating a new project. Descriptions of what you are creating appear below the choices you make in each screen.

First, you are asked whether you want to create a new, blank project or create a project from the templates. If you choose New Project by clicking on the radio button, and then click on Next >>, a new project with a blank document called index.htm is created, and the template wizard jumps directly to the screen that asks where you want to save the file.

If you choose Templates by clicking on the radio button and click on Next >>, the Templates screen appears, and you are prompted to choose from the following Categories:

•	Company Web Site -- Style 1

•	Company Web Site -- Style 2

•	Personal Web Site -- Style 1

•	Personal Web Site -- Style 2 (Animated)

•	Company Intranet

A description of the new project templates appears in the Description section, and a graphic of the template's file structure appears on the right hand side of the dialog box. Select whichever option you want by clicking on the radio button, then click on Next>>.

These categories can be customized by editing the New Project Template configuration file (see  Configuring the New Project wizard).

Once you have chosen which template you want to base your project on and clicked on Next>>, a dialog box appears, asking you where you would like your project to be created. Select the appropriate folder, click on Finished, and your project templates will be copied to that location.

The site will be opened as a new project in the Information Manager. You can now begin to edit the documents that were created from the template using the HoTMetaL PRO Editor in order to insert your own content.

See also Configuring the New Project wizard   for information on how to set up and use your own template sets.


Working with forms

What you'll learn in this chapter

You can create HTML forms, like paper forms, for users to fill out information according your specifications. You can guide the user through:

•	Single-line  or multi-line  text input.

•	Yes or no choices made with a check box.

•	`One of the following'-style choices made with option (radio) buttons.

•	Selections from drop-down lists or selection lists.

•	Entering a password.

•	Attaching (uploading) a  file.

•	Calling a script  embedded in your document.

Usually forms contain a button that the user clicks on to submit  the form data, and another button that the user can click on to reset  the form fields to their default values.

When the user submits the form,  it goes to either an email address or to a program on a Web server.

Reference

To create a form field, click on the appropriate button in the Forms toolbar, or choose the appropriate command in the Form menu. If the Forms toolbar is not visible, choose Toolbars... from the View menu, and turn on the Forms check box.

In HTML, all form fields must be enclosed in a FORM element. You can start creating your form by inserting a FORM element explicitly, or you can just insert any form field, and HoTMetaL PRO Editor will create the FORM element automatically. In WYSIWYG view, the FORM element is not displayed. In Tags On view, the FORM start- and end-tag icons give you a useful visual cue to the form's boundaries.

To create a FORM element explicitly:

•	Click on the [image]   toolbar button or choose Insert Form from the Form menu.

  More on this topic


Form field properties

Fields in a form have a number of properties that you can (or, in some cases, must) edit. Some common properties are:

•	Name – Most form objects must have a name. Except with radio buttons, a name cannot be used twice in the form. When the form is submitted, the name is sent along with the input data for that object, so that the receiving program will know which graphical object the data came from.

•	Value – The value associated with a form object is normally the data that the user enters. Some objects—text boxes, password fields, drop-down lists, selection lists, multi-line text areas—let you specify a default value. Check boxes have a default value of `off' or `on', depending on whether the user checks them; this can also be overridden. Option (radio) buttons must be given a value when the form is created.

•	Size – You can specify the default size of some objects. Widths are specified in characters; heights are specified in lines.

•	Checked – You can specify that a check box or option (radio) button is checked (turned on) by default.

Once you have inserted a form object, you can edit its properties in two ways:

1	Double-click on the object.

2	Right-click on the object and then choose Form Field  Properties... from the pop-up menu. (The menu item changes depending on what kind of object you click on: Text Box Properties..., Option Button Properties..., and so forth.)

3	Click once on the object and then choose Form Field  Properties... from the Forms menu. (The menu item for this command also changes, depending on what kind of object you click on).

Each of these actions brings up a dialog box, specific to each type of object, in which you can edit the object's properties. Click on the Help button in each dialog box for more information on the properties for that kind of form object.

These properties correspond to attributes of the object: if you wish to edit the attributes directly, right-click on the object and then choose Attribute Inspector from the pop-up menu.


Creating a text box

A text box lets the user enter a single line of text in a form.

To insert a text box:

•	Click on the   [image] button on the Forms toolbar or choose Text Box from the Form menu.

A text box appears in the form. You can get a good idea of what this form element will look like in your Web browser from how it looks in the HoTMetaL PRO document window.

To set the properties of the text box:

•	Double-click on the text box, or right-click on the text box and then choose Text Box Properties... from the pop-up menu.

The Text Box Properties dialog box lets you set the most important properties of a text box.

•	Name – This value is used when the browser sends the input data to the server, in order to identify which text box,   drop-down list,  etc. on the form, a particular piece of data came from. You should always set a value for Name; this value should be unique—it should not be used for any other object in the form. HoTMetaL PRO will automatically generate a name of the form `Text1', `Text2', and so forth—you can keep this name or enter something more descriptive.

•	Value – If you specify text here it will be displayed in the text box by default.

•	 Size – Specifies the text box size in characters. Entering a number here will change the size of the text box. If no number is entered, the text box will be 20 characters long.

•	 Max. Length – The maximum number of characters that can be entered in the text box in a browser.


Entering several lines of text (scrolling text area)

A text box  in a form accepts just one line of text. If you need to let your users enter several lines of text at once (to enter an address, for example), you should use a scrolling text area. This is a rectangular area that has vertical and horizontal scrollbars so that the user can enter as many lines of text as are needed.

•	Click on the   [image] button, or choose Text Area from the Form menu.

HoTMetaL PRO will insert a graphical representation of a scrolling text area, which looks similar to the way this object is displayed in most browsers.

To set the properties of the text area:

•	Double-click on the text area, or right-click on the text area and then choose Text Area Properties... from the pop-up menu. This brings up a dialog box that lets you set the most important properties of a text area.

•	Name – This value is used when the browser sends the form's data to the server, in order to identify which object in the form a particular piece of data came from. You should always set a value for Name; this value should be unique—it should not be used for any other object in the form. HoTMetaL PRO will automatically generate a name of the form `MultiText1', `MultiText2', and so forth—you can keep this name or enter a more meaningful choice.

•	Default Content – The text you enter here will be the default text displayed in the text area by the browser.

•	Width – Enter the number of characters wide that you want the text area to be.

•	Rows – Enter the number of rows that you want.

•	Text Wrapping – You can choose virtual, physical, or no text wrapping.


Creating drop-down lists and list boxes

Drop-down lists and list boxes are two ways of letting a user make a choice from a list of choices. A drop-down list is a menu from which the user can make one choice; a list box is a scrollable list from which the user can make one (or sometimes more than one) choice. Which one you use depends on which graphical object you think works best in your form, and whether you want to offer more than one choice—if you do, you have to use a list box.

To create a drop-down list:

•	Click on the [image] toolbar   button or choose Dropdown List from the Form menu.

To create a list box:

•	Click on the [image] toolbar   button or choose List Box from the Form menu.

 HoTMetaL PRO will display a graphical representation of the drop-down list or list box.

A drop-down box or list box contains one or more items (also called options).

To add items and edit the object's properties:

•	Double-click on the object, or right-click on the object and then choose List Properties... from the pop-up menu.

 The List Properties dialog box appears, letting you create and edit a list of choices.

You can set the following properties:

•	Name – This value is used when the browser sends the form's data to the server, in order to identify which object in the form a particular piece of data came from. You should always set a value for Name; this value should be unique—it should not be used for any other object in the form. HoTMetaL PRO will automatically generate a name of the form `Select1', `Select2', and so forth—you can keep this name or enter a name of your own choice.

•	Size – This is the number of list items that are displayed in the browser. If this value is greater than 1, the list automatically becomes a list box, even if it was created as a drop-down list.

•	Allow Multiple Selections – If you want the user to be able to choose more than one item from the list, turn on the check box. If you choose this option, the list automatically becomes a list box, even if it was created as a drop-down list.

Note: If `Size' is set to `1' and `Allow Multiple Selections' is turned off, the list automatically becomes a drop-down list.

Each list item consists of a label and a default value. The label is the text for that item that is displayed in the browser. The value is the text that the browser sends, if this item is selected when the form is submitted.

Adding items to the list

To add an item:

•	Enter the label in the List Item text box.

•	Enter a value in the Value text box. You should use a different value for each item.

•	If you want this item to be selected automatically when the list is displayed, turn on the Default Item check box. There can be only one default item in the list.

•	Click on Add>>.

 To edit an existing item:

•	Click on the item that you want to edit.

•	Click on Remove/Edit. The item will `jump out' of the list and become editable.

•	Make the desired changes to List Item, Value, and Default Item.

•	Click on Add >>. The item you just edited will move back into the list, at the end.

 To delete an existing item:

•	Click on the option that you want to delete.

•	Click on Remove/Edit. The item will `jump out' of the list.

To change the order of items in the list:

•	Click on the item that you want to move.

•	Click on the [image] button to move the item up or the [image] button to move the item down.


Creating check boxes

Check boxes are used to let the user make a `yes/no' choice. These are different from option buttons  which let the user make one choice from a group of choices.

To insert a check box:

•	Click on the [image]   toolbar button or choose Check Box from the Form menu.

HoTMetaL PRO inserts a check box icon.

To edit the properties of a check box:

•	Double-click on the check box, or right-click on the check box and then choose Check Box Properties... from the pop-up menu.

You can set the following properties:

•	Name –This value is used when the browser sends the form's data to the server, in order to identify which object in the form a particular piece of data came from. You should always set a value for Name; this value should be unique—it should not be used for any other object in the form. HoTMetaL PRO will automatically generate a name of the form `CheckBox1', `CheckBox2', and so forth—you can keep this name or enter a name of your own choice.

•	 Value – When the form is submitted, the default value associated with checked boxes is the word `on' (unchecked boxes are not submitted with the form's data). If you want to override this default, enter the text to be associated with the check box in the Value text box.

•	If you want this check box to be turned on (checked) by default, turn on the Checked? check box.


Creating option buttons (radio buttons)

A group of option buttons (also called radio buttons) lets the user make one (and only one) choice from a group of choices.

To insert an option button:

•	Click on the [image]   toolbar button or choose Option Button from the Form menu.

HoTMetaL PRO inserts an option button.

To edit the properties of an option button:

•	Double-click on the option button, or right-click on the option button and then choose Option Button Properties... from the pop-up menu.

You can set the following properties:

•	Name – This value is used when the browser sends the form's data to the server, in order to identify which object in the form a particular piece of data came from.  Each item in a group of related option buttons must have the same name, so that the browser will know that only one button in the group can be turned on at the same time. HoTMetaL PRO will automatically generate a name of the form `Radio1'—you can keep this name or enter a name of your own choice. If you create another group of radio buttons in the same form, you must use a different name for that group.

•	Value – All option buttons must have a value; this value is submitted by the browser if the option button is turned on when the form is submitted. These values should be unique within each group of buttons with the same name. HoTMetaL PRO will generate unique values of the form `Value1', `Value2', and so forth; if you want to override this default, enter a value of your choice in the Value text box.

•	If you want this option button to be turned on (checked) by default, turn on the Checked? check box. Only one option button in a group can be turned on by default.


Creating a reset button

Forms usually contain a reset button that restores all the form's controls (text boxes,  radio buttons, etc.) to their default values.

To create a reset button:

•	Click on the [image]   toolbar button, or choose Reset Button from the Form menu.

To set the properties of a reset button:

•	Double-click on the reset button, or right-click on the reset button and then choose Reset Button Properties... from the pop-up menu.

You can set the following properties:

•	Name – Even though you can set this value, reset buttons don't generally need a name since they aren't submitted to the server.

•	Value – If you enter text in this box it will become the label for the reset button, instead of the default, `Reset'.


Creating a submit button

When the user clicks on the submit button the form's data is sent to the server or email address. There are two kinds of submit buttons:

•	The most common kind of submit button looks like a button and has a text label.

•	An image submit button consists of a graphical image.

To create a submit button:

•	Click on the [image] toolbar button to insert an ordinary button or the [image]  button to insert an image submit button, or choose Submit Button or Image Button from the Form menu.

To set the properties of a submit button:

•	Double-click on the submit button, or right-click on the submit button and then choose Submit Button Properties... or Image Button Properties... from the pop-up menu.

You can set the following properties:

•	Name – If you have several forms (in this document or in different documents) whose data will be sent to the same recipient (this could be a program or an email address) you should use different values for the name of the submit button so that the recipient will have a way of easily knowing which form the data came from.

•	Value – If you enter text in this box it will become the label for the submit button, instead of the default (usually `Submit Query').

•	Image File – If you've inserted an image submit button, use this text box or the Edit... button to enter the URL of the image.


Creating a file upload field

A file upload field allows the user to attach a file to the data submitted with the form. A file upload field consists of a text box and, depending on the browser, a button that brings up a file chooser dialog box: the user can specify a file with either of these controls.

To insert a file upload field:

•	 Click on the [image]   toolbar button or choose File Upload from the Form menu.

To set the properties of the file upload field:

•	Double-click on the file upload field, or right-click on the field and then choose File Upload Properties... from the pop-up menu.

You can set the following properties:

•	Name – This value is used when the browser sends the form's data to the server, in order to identify which object in the form a particular piece of data came from. You should always set a value for Name; this value should be unique—it should not be used for any other object in the form. HoTMetaL PRO will automatically generate a name of the form `File1', `File2', and so forth—you can keep this name or enter a unique name of your own choice.

•	Size – Specifies the  size in characters of the text box part of the file upload field.

•	Max. Length – Sets the maximum length of a filename (including the folder path) that be entered in the file upload field.

•	Acceptable File Types – Enter the list of file (MIME) types that the field can be used to upload.

In order to allow a form to upload files, you must also change the form's `MIME type':

•	Place your insertion point just to the right of the FORM start-tag.

•	Choose Attribute Inspector from the View menu, or press F6.

•	Enter the value multipart/form-data for the FORM element's ENCTYPE attribute.


Creating push buttons to activate scripts

A form can contain push buttons that activate script commands.

To create a push button:

•	 Click on the [image] toolbar button or choose Push Button from the Form menu.

To edit the properties of a push button:

•	Double-click on the push button, or right-click on the button and then choose Push Button Properties... from the pop-up menu.

You can set the following properties:

•	Name – This value is used when the browser sends the form's data to the server, in order to identify which object in the form a particular piece of data came from. You should always set a value for Name; this value should be unique—it should not be used for any other object in the form. HoTMetaL PRO will automatically generate a name of the form `Button1', `Button2', and so forth—you can keep this name or enter a unique name of your own choice.

•	Value – If you enter text in this box it will become the label for the push button, instead of the default (usually `Button').

To set up a push button to run a script, you also have to:

•	Select the push button.

•	Press F6 or choose Attribute Inspector in the View menu.

•	Specify a script call as the value of onBlur, onClick, onChange, onLoad, or onSelect, as appropriate.

For more information, see the section Scripts  and any available external documentation on the scripting languages (for example, JavaScript).


Creating a hidden input field

A hidden input field is not displayed in the browser or accessible to the user: it is used to send pre-set information that is use only by the recipient of the form's data. For example, it could identify to the recipient which form the data came from.

To create a hidden input field:

•	 Click on the [image] toolbar button or choose Hidden Input from the Form menu.

To edit the properties of a hidden input field:

•	Double-click on the hidden field, or right-click on the button and then choose Hidden Input Properties... from the pop-up menu.

You can set the following properties of a hidden input field:

•	Name – This value is used when the browser sends the form's data to the server, in order to identify which object in the form a particular piece of data came from. You should always set a value for Name; this value should be unique—it should not be used for any other object in the form. HoTMetaL PRO will automatically generate a name of the form `Hidden1', `Hidden2', and so forth—you can keep this name or enter a unique name of your own choice.

•	Value – This is the value that will be submitted for the hidden input field when the form is submitted.


Creating a password entry

A password entry is similar to a text box. It is intended for users to submit a password, so the text that the user enters will be blanked (replaced by asterisks) when the user types it; it will, however, be sent along with the other form data when the form is submitted.

To create a password entry:

•	 Click on the [image] toolbar button or choose Password Entry from the Form menu.

To edit the properties of a password entry:

•	Double-click on the password field, or right-click on the button and then choose Password Entry Properties... from the pop-up menu.

You can set the following properties:

•	Name – This value is used when the browser sends the form's data to the server, in order to identify which object in the form a particular piece of data came from. You should always set a value for Name; this value should be unique—it should not be used for any other object in the form. HoTMetaL PRO will automatically generate a name of the form `Password1', `Password2', and so forth—you can keep this name or enter a unique name of your own choice.

•	Size – Specifies the  size in characters of the password field.

•	Max. Length – Sets the maximum length of the password that be entered in the field.


What happens when a form is submitted

After collecting information from the user, you will want to do something with it—even if you plan only to store it in a database for future use. More often, however, you will be interested in responding to your user. In fact, you should consider responding to your user within a few minutes, confirming that the input has been received and will be acted on. All of this implies some form of processing—probably, but not necessarily, automatic processing.

Typically this kind of processing is handled by programs running on the server. Though these may be written in any computer language and may communicate with the HTML serving processes in a couple of ways, two standards have become predominant: Perl is probably the most common computer language used to write user input processing programs, and Common Gateway Interface (CGI) is the way most server-side processes communicate with the HTML serving processes. If this is strange and new, you're not alone—and it doesn't mean that you have to stop right here in the face of a steep learning curve before you can use a form on your document. Most HTML document editors don't write Perl, or any other kinds of programs, and don't know much about CGI. Instead, they rely on their systems administrators and other programmers to provide the back-end processing that will handle the data flowing in from their HTML pages.

However, it is also possible to receive information from your form documents without preparing any server-side processing. If you want to use forms, but don't have a program set up on your server to process the data, you can send the raw content of the form to an email address, which is a quick and easy way to get form functionality. However, the content of that email may require editing. This may be useful in the short term, or for a small volume of responses that you are willing to deal with manually.

  More on this topic


Specifying where the form is submitted

The form's action determines what happens to the data entered by the user when the submit button is pressed. The action can be either a program on a Web server that processes the data, or an email address that receives it. You specify an action by setting a value for the FORM element's ACTION and METHOD attributes.

In WYSIWYG view:

•	Right-click on any form field and choose Attribute Inspector from the pop-up menu.

•	Choose FORM from the Element drop-down list at the top of the Attribute Inspector dialog box.

In Tags On view:

•	Put the insertion point immediately to the right of the FORM start-tag.

•	 Press F6, or right-click and choose Attribute Inspector from the pop-up menu.

At this point you should be editing the attributes of the FORM element. Check that FORM is the selected element—it will appear at the top of the dialog.

•	In the ACTION field, enter the URL for the program or email address that you wish to submit the form data to, and then press Enter. (A URL for an email address must start with `mailto'; for example: mailto:charles@windsor.org.)

•	If the data is being submitted to a program, set the value for METHOD to either GET (the default) or POST, depending on the requirements of the program. Then press Enter.

•	If the data is being submitted to an email address, set the value for METHOD to POST. Then press Enter.


How the data looks to the recipient

When a browser submits a form's data, it formats it in a standard way that all programs receiving the data should expect. The information is presented in pairs containing a `name' (corresponding to the name of the   text box,  check box, etc.) and a `value' (for text boxes  or `text areas', this will be the data entered; for check boxes the value `on' is submitted—check boxes that aren't turned on are ignored; for radio buttons the Value is sent).

Each name and its corresponding value are separated by an equal, `=', sign. Each name/value pair is separated by an ampersand, `&'. Spaces are replaced by a `+' sign, and some special characters (notably newline, `=', and `&') are replaced by `%nn', where the n's are digits from  0-9 and/or letters between `A' and `F'.

For example, if you have a text box named `speak' that contains the text `duck soup', a check box named `english' that is turned on, and a submit button named `Submit1' with the label `Submit Query', the form's data will look like this when submitted by the browser:

speak=duck+soup

&english=on

&Submit1=Submit+Query


The HTML behind the form

This section briefly discusses the HTML markup that represents form objects. You can create and edit forms using the Element... and Attribute Inspector commands, but in most cases the frame editing commands will be faster and more convenient.

All form objects are surrounded by a FORM element.

Most form objects (text boxes, check boxes, radio buttons, submit buttons) are represented by INPUT elements. The value of the INPUT's TYPE attribute determines what type of object it represents; for example, if TYPE has the value TEXT (this is the default), a text box will be generated.

List boxes and drop-down lists are represented by the SELECT element; each item in the list is represented by an OPTION element. A SELECT element represents a drop-down list if its SIZE attribute is set to `1' (one) and its MULTIPLE attribute has no value. Otherwise it represents a list box.

A scrolling text area is represented by a TEXTAREA element.


Creating frames

What's covered in this chapter

This chapter describes how to use HoTMetaL PRO to create pages that divide the browser window into multiple regions using frames. Topics include:

•	Creating frames to define areas of the window.

•	Providing alternative pages.

•	Using the frame editor.

•	Targeting specific frames.

Reference

You can use frames to tell browsers to divide the window into multiple rectangular regions and display a different document or location in each region. You can also target frames (that is, use attributes to control which frame will display a document). HoTMetaL PRO provides a graphical frame editor for creating and formatting frames.

Note: Frames, while commonly used, are not part of the HTML 2.0 specification, and are not supported by all Web browsers. Use this feature with caution, and ensure that you have alternative pages for users of non-frame browsers and screen readers.

  More on this topic


Common uses for frames documents

By default, any anchor (A) in a frame will load a document into that same frame. This is the simplest application of a frame set document. More commonly, frame set documents are used to create interactive web sites, where clicking on menu items in one frame window causes documents to appear in another. For example, many sites on the Web use frames to create:

•	Navigation bars – One frame displays a toolbar containing an image map or group of image anchors. Clicking on an image area causes content to display in another window (or windows).

•	Footnotes – Used for technical or scholarly documents containing definitions or quotes. At least one document window with content contains an anchor element that jumps to specific points in a second footnote document. Clicking on an anchor causes the linked reference to display.

•	Static title bar – A frame across the top of the browser window that keeps the title of the current document displayed can be combined with a navigation bar along the side that displays various portions of the document. This helps to orient the viewer, because the browser will show only the name of the frameset document in the title bar. An additional window below the main content frame could be used to display footnote information.

•	Progressive detail – In this frame structure, the frame set is divided into any number of frames, with anchor elements providing `choices' in each frame window. Each choice made would load a document in the next frame in the hierarchy containing more choices, with progressive levels of detail added with each choice.


Creating documents with frames

A frame-based document has two components:

•	A frameset document that defines the frames.

•	The individual documents (or document locations) that are displayed in the frames. These documents are associated with frames using URLs.

If you are setting up a frames-based document you can also optionally do the following:

•	Supply some alternative content, in the frameset document, which will be displayed if the browser does not support frames.

•	Assign names to frames so that you can specify that a document accessed by a link will be displayed in a specific frame.

To create a frameset document:

•	Create a new document or open an existing one.

•	Choose Convert to Frames in the Tools menu.

If your document already contains frames, you don't have to carry out this step.

Convert to Frames creates an initial frameset containing a single frame. If the original document had any content, this will be moved to an element called NOFRAMES: the content of this element is the alternative content that will be displayed if a browser cannot display frames.

At this stage the frameset contains a single frame that has no content. If you want the original content of your document to be displayed in a frame, you have to save that content in a separate file and assign that file to a frame.

Now you should carry out the following steps:

1	Define the frames using the HoTMetaL PRO frame editor . The frame editor enables you to specify the number and size of the frames, make frames resizable by the browser, display scrollbars in frames, and set the frame margin size.

2	Assign to each frame a document that will be loaded in that frame initially when the frameset document is displayed .

3	If desired, assign names to the frames  so that you can cause linked documents to be displayed in specific frames. If you do this, you also have to modify your links to refer to the desired frames.

4	If desired, insert some alternative content for non-frames browsers .

5	If you want to define frame borders and frame spacing you have to do so using attribute values .

You may find it easier to work with frameset documents in HoTMetaL PRO if you have loaded a style file—such as showall.asf—that makes some of the attributes of frames visible.


Defining frames with the frame editor

Once your document contains a frameset, you can start editing the frame document. Use the HoTMetaL PRO frame editor to create and size frames, and to set options for each frame.

To open the frame editor:

•	Choose Frame Editor from the Tools menu. The Frame Editor displays a single frame to start (unless your document already contains multiple frames).

The Frame Editor command is grayed out if the current document does not have a frameset, that is, if the document has not been converted to a frame document.

The frame editor has two parts: a controls area and a graphical area. The controls area, in the top part of the editor, contains buttons and fields for creating frames and setting options for the currently selected frame. The graphical area represents the placement and relative sizes of the frames in your frame document; you can also create additional frames in this area. If you click on a frame in the graphical area, the properties of that frame are displayed in the controls area, and any changes you make are applied to that frame.

  More on this topic


Creating frames

Using the frame editor, you can create more frame areas in several different ways. Click on the [image] button to split the currently selected frame horizontally, and click on the [image] button to split the selected frame vertically. If you right-click on the graphical window area of the frame editor, you can choose Split Horizontal or Split Vertical from the pop-up menu. Each frame, when split, takes up half of the original frame's area. You can also drag the edges of existing frames to create the frame size you want.

To create custom-width frame areas:

•	Move your cursor to any edge of the graphical window area in the frame editor. The cursor changes to a double-headed arrow.

•	Hold down the left mouse button and drag away from the edge. This will pull the edge of the frame with the mouse, creating two frame areas.

•	When you have dragged the edge of the frame to the size you want, release the mouse button.

The size of the selected frame, expressed as a percentage of the document width or height, is shown in the Size text box in the controls area.

Note: Take care which frame edge you are dragging; there can be several frame edges at the edge of a frame area.


Sizing frames

When you create a frame or manipulate its size in the frame editor, these values are generated automatically (as a percentage of the document window). You can also specify the size of a frame as an absolute (specific) number of screen pixels or as a proportional size.

To size a frame using the controls:

•	Enter a value in the Size text box in the controls area.

•	Press Enter or click on the [image] button to set the value.

Absolute pixel sizes are not usually a good idea, since the browser window size can vary on different platforms and monitor sizes. A proportional size is specified with an asterisk (for example, 1* or *, 2*, or 3*). This is interpreted as follows: after all widths, or heights, specified as percentages or absolute amounts have been allocated to the corresponding frames, the remaining space will be allocated to frames, proportionally. For example, if your document was viewed in a browser window 800 pixels high and you had four horizontal frames within one frameset with the following values for size:

50%, 100, *, 2*

The first frame would be 50% of the total height (400 pixels); the second frame would be the specified 100 pixels. The remaining 300 pixels would be divided between the other two frames. The fourth frame's height is set at twice that of the third frame, so the third frame would be 100 pixels high and the fourth would be 200 pixels high.

To size a frame in the graphical area:

•	Move your cursor to the appropriate edge of the graphical window area in the frame editor and hold down the left mouse button and drag away from the edge. The change is reflected in the Size text box in the controls area.

Resizable frames

Turn on the Resizable check box if you want the browser to automatically resize the frame as necessary.

Frame margins

To set the margin:

•	Enter a value in the Width and/or Height fields in the controls area.


Adding scrollbars to frames

Frames can have scrollbars, no scrollbars, or you can tell the browser to add scrollbars automatically if the document is larger than the display size of the frame. Use the Scrolling buttons in the controls area to add or remove scrollbars (the default setting is AUTO).

To set the scrollbar options:

•	Click on the appropriate frame in the graphical window area in the frame editor.

•	To always have scrollbars, click on the [image] button.

•	To never have scrollbars, click on the [image] button.

•	To have the browser add scrollbars as needed, click on the [image] button.


Deleting frames

There are several ways that you can delete a frame from the frame editor.

To delete a frame:

•	Click the frame in the graphical window area and do one of the following:

•	Click on the [image] button in the controls area.

•	Press Delete.

•	Right-click inside the frame and choose Delete from the pop-up menu.


Assigning a document to a frame

A frame will generally have a default document that is displayed in the frame when the frame document is loaded in the browser. The contents of a frame may change during a browsing session if the viewer clicks on a link that is targeted at that frame. If you do not specify a default document for a frame, it may be displayed as a blank area in the browser.

To specify the default document for a frame in the frame editor:

•	Click on the frame to select it.

•	Enter the URL for the document in the Source text box, either by typing it directly or by clicking on the Browse... button and selecting the file.

You can also drag and drop a file onto a frame. If the frameset document has been saved at least once, the URL of the dropped file will be relative to the location of the frameset document; if the frameset document has never been saved, the URL will be a full path.

You can also use the SRC attribute of a FRAME element to specify the default document displayed in the frame:

•	Place the insertion point inside the FRAME element in the document window.

•	Choose Attribute Inspector from the View menu, or press F6.

•	Enter the URL for the default document in the SRC text box, either by typing it directly or by clicking on the ... button and choosing the file.

•	Press Alt+F4 to close the Attribute Inspector.


Loading linked documents in specific frames

By default, if you click on a link in a document displayed in a frame, the linked document will be displayed in that same frame. To have a document referred to by a link display in a specific frame (called the target frame), do the following:

1	Give the frame a name.

2	Modify the link to refer to that frame name.

Assign a frame name

To give a frame a name:

•	Launch the HoTMetaL PRO frame editor.

•	Click on the frame to make it active.

•	Enter the name in the Name text box.

Or:

•	Switch to Tags On view.

•	Put the insertion point inside the FRAME element corresponding to the frame.

•	Choose Attribute Inspector from the View menu, or press F6.

•	Enter the name in the NAME field.

Referring to a frame name

To specify which frame a linked document will be displayed in:

•	Put the insertion point inside the link.

•	Choose Link... from the Insert menu.

•	Enter the frame name in the Target frame text box.

•	Click on OK.

Or:

•	Put the insertion point inside the link.

•	Choose Attribute Inspector from the View menu, or press F6.

•	Enter the frame name in the TARGET field.

When you click on the link, the document will be opened in the specified frame if that frame exists, otherwise, a new window will be created.

Note: At the time of writing, Netscape browsers do not target a specific frame unless that frame is already displaying a document. This means that any frame that you want to target should also have a default document.

Special link targets

The following names have special meanings when used as link targets (notice that each of them starts with an underscore):

•	_self: the document will be opened in the frame containing the link.

•	_top: the document will be opened in the full browser window (if the window has been divided into frames, it will become a single pane again).

•	_blank: the document will be opened in a new window.

•	_parent: the parent frame set of the current frame will become a single frame, and the document will be displayed there.

  More on this topic


Example of loading documents in specific frames

Here is an example of targeting specific frames using an anchor element.

<FRAMESET ROWS="33%,33%,33%"

>

<FRAME NAME="upper" SRC="blue.htm"

>

<FRAME NAME="middle" SRC="sources.htm"

>

<FRAME NAME="lower" SRC="blue.htm"

>

</FRAMESET

>

To create this document:

•	Create a new document and choose Convert to Frames from the Tools menu.

•	In the frame editor, create the three frames.

•	Click in each frame and enter the appropriate name: upper, middle, or lower in the Name field.

•	For the middle frame, enter sources.htm in the Source field; for the top and middle frames, enter blue.htm in the Source field.

Here is a fragment from the document sources.htm.

<P

>

<A TARGET="upper" HREF=http://www.sq.com/"

>

SoftQuad Home Page

</A

>

<A TARGET="lower" HREF=http://www.w3.org/"

>

W3 Consortium Home Page

</A

>

</P

>

To create this document:

•	Create a new document.

•	Choose Link... from the Insert menu. The Insert Link dialog appears.

•	Type http://www.sq.com/ in the File or URL text box and upper (the name of the first frame) in the Target frame text box.

•	Insert a second anchor and give it the URL http://www.w3.org/ and the target frame lower.

•	Type the link text inside each anchor.

Since each frame should have a default document, create a file called blue.htm that has no content, but has the document background color set to blue.

When you load the frame document in a browser, three frames are displayed. The middle frame contains the document sources.htm, and the other two frames are blue blanks. Clicking on the first anchor will cause the document http://www.sq.com/ to be displayed in the upper frame; clicking on the second anchor will cause the document http://www.w3.org/ to be displayed in the lower frame.


Frame borders and frame spacing

When you have created your frames in the frame editor and returned to your document, there will be one or more FRAME elements, and possibly more FRAMESET elements contained in the top-level FRAMESET. The properties that you set for each frame in the frame editor correspond to attribute values for these elements. If you would like to know more about frame markup, see The HTML behind the frames.

Frame border and frame spacing properties can't be set from the frame editor; to set these, use the Attribute Inspector:

•	Choose Tags On from the View menu, or press Ctrl+Alt+T.

•	Put the insertion point inside the appropriate FRAMESET or FRAME element.

•	Choose Attribute Inspector from the View menu, or press F6.

Borders

•	To have Netscape Navigator display a border around all the frames in a frameset, change the FRAMEBORDER value of the corresponding FRAMESET element to YES; for Internet Explorer, set the value to 1.

•	To display a border around an individual frame, set the FRAMEBORDER attribute of the corresponding FRAME element.

Border properties (Netscape only)

These attributes are currently used only by Netscape Navigator.

•	The BORDER attribute of a FRAMESET sets the thickness (in pixels) of the borders of all the frames in the frameset.

•	 The BORDERCOLOR attribute of a FRAMESET sets the color for the frame borders for all frames in the frameset.

•	The BORDER attribute of a FRAME sets the thickness (in pixels) of the borders of that frame.

•	 The BORDERCOLOR attribute of a FRAME sets the color for the borders of that frame.

Space between frames

The value of the FRAMESPACING attribute of a FRAMESET inserts additional space (in pixels) between all the frames in that frameset.


Using both rows and columns

If your document contains a FRAMESET that has values for both the ROWS and COLS attributes, you cannot edit it with the HoTMetaL PRO frame editor. In this case, you can manually convert it to an equivalent form using nested FRAMESETs with either ROWS or COLS, but not both, using the following procedure:

•	Switch to Tags On view.

•	Using the Attribute Inspector, make note of and then delete the COLS attribute value of the FRAMESET.

•	Use the Element... command in the Insert menu to surround the FRAME elements corresponding to each row with a FRAMESET element. For example, if the original FRAMESET contains 6 FRAMEs, and you want them to display in 3 rows, surround the first two FRAMEs with a FRAMESET, then the next two, and the last two.

•	Using the Attribute Inspector, give each of the new FRAMESETs the same COLS attribute value that the original FRAMESET had. (In our example, there would be attribute values for 2 columns.)

If you need more information about the HTML markup in a frameset document, see  The HTML behind the frames.


Adding alternative content

Since some browsers do not support frames, it is generally a good idea to provide alternative content that can be displayed in a non-frames browser.

Alternative content is contained in the NOFRAMES element; if present, this element is the last element in the outermost FRAMESET element in the document. NOFRAMES contains a BODY element, and therefore can contain any markup or content that you like.

If you use Convert to Frames to create the initial frameset, a NOFRAMES element will be inserted automatically. If the document contains any content when you perform the conversion, it will be placed inside the NOFRAMES element.

If a frame document is viewed by a browser that does not support frames, the browser will display only the content inside the NOFRAMES element. A browser that recognizes the FRAMESET element will ignore all content contained in the NOFRAMES element.

Note: the HoTMetaL PRO rules also allow the element `NOFRAME' (with no `s'), because some sources appear to use this spelling of the element name. `NOFRAMES' is more common.


The HTML behind the frames

Usually, HTML documents contain a BODY element as the top-level document content element. A document that contains frames begins with a FRAMESET element instead of a BODY element. A frameset divides the browser window into rectangular regions. Each of the regions can be:

•	A frame, which displays one document. A frame is represented by a FRAME element. The SRC attribute for the frame specifies the default content of the frame.

•	Another frame set, which is divided into frames.

For example, a frame set can contain a frame, plus another frame set containing two frames, resulting in three frames in all.

A frame document should also contain a NOFRAMES area, which itself contains a BODY element. The NOFRAMES element follows the FRAMESET element.

Browsers automatically ignore unrecognized markup and display only what they recognize, so if a frame document is viewed by a browser that does not support frames, the browser will display only what is recognized: the content inside the BODY element. Conversely, a browser that recognizes the FRAMESET element will ignore all content contained in the NOFRAMES element.

Note: the HoTMetaL PRO rules also allow the element `NOFRAME' (with no `s'), because some sources appear to use this spelling of the element name. `NOFRAMES' is more common.

The attributes of a frame determine its contents and appearance.

  More on this topic


Frame attributes

The frame properties that you can set with the HoTMetaL PRO frame editor correspond to attributes of the FRAME and FRAMESET elements. To edit these attributes, put the insertion point inside the appropriate element and choose Attribute Inspector in the View menu, or press F6.

FRAMESET attributes

 A FRAMESET has COLS (columns) and ROWS attributes. These attribute names emphasize that a frame set can be thought of as a table or grid. These attributes may be blank, or consist of a list of one or more values separated by commas. Each such value determines the width (for columns) and height (for rows) of the regions; the number of width and height values supplied determines how many rows and columns, respectively, are created. The default for each is one. For example, if you set COLS to:

20%,30%,50%

and don't supply a value for ROWS, the frame set will be divided vertically into three regions: the first region's width will be 20% of the current frame set (or browser window if this frame set is at the top level), the second region's width will be 30%, and the third region's width will be 50%. If there is only one frame set in the document, these widths will apply to the entire browser window. Similarly, if you supply a value only for ROWS, the frame set will be divided horizontally into regions. If you supply values for both attributes, the frame set will be divided into a grid of rows and columns. However, the HoTMetaL PRO frame editor supports FRAMESETs with either COLS or ROWS, but not both in the same FRAMESET. If your document has a FRAMESET with both attributes, you can convert it into an equivalent form that uses only one of these.

FRAME attributes

The HoTMetaL PRO frame editor sets the following attributes of FRAME elements:

•	The SRC attribute specifies the default document to be displayed in the frame.

•	The NAME attribute is used for targeting specific frames.

•	The MARGINWIDTH attribute sets the width of the frame margin in pixels.

•	The MARGINHEIGHT attribute sets the height of the frame margin in pixels.

•	SCROLLING can have any of following values: YES, NO, and AUTO. The default is AUTO.

•	The default value for NORESIZE is NORESIZE. Remove the NORESIZE value to make the frame resizable.

Both FRAME and FRAMESET have other attributes that specify properties that can't be set from the frame editor.


Using floating frames

HoTMetaL PRO also supports the IFRAME element, used by Microsoft Internet Explorer. This element is used to create `floating' or `in-line' frames that display in the browser window much as an image would.

To insert this element, choose Element... from the Insert menu, and select IFRAME.

This type of frame cannot be edited using the frame editor; use the Attribute Inspector to set any of the following attributes:

•	ALIGN – Sets the alignment of the frame or the surrounding text. The default value is LEFT.

•	FRAMEBORDER – Determines whether the floating or in-line frame will have a border. Values are 1 to give the frame a border and 0 for no border.

•	HEIGHT – The height of the frame in pixels.

•	MARGINWIDTH – The width of the left and right margins (in pixels).

•	MARGINHEIGHT – The height of the top and bottom margins (in pixels).

•	NAME – The target name for the frame. The default is none. Reserved names begin with an underscore (_).

•	NORESIZE – If the default value, NORESIZE, is included, the frame can't be resized by dragging the frame border in the browser window. Remove the NORESIZE value to make the frame resizable.

•	SCROLLING – Specifies whether the frame will always have scrollbars (YES), never have scrollbars (NO), or have scrollbars added by the browser if necessary (AUTO). The default is AUTO.


Maintaining your Web site

What you will learn in this chapter

This chapter discusses:

•	Finding and replacing:

•	Finding text.

•	Finding tags.

•	Finding meta-data.

•	Using pockets to manage files.

•	Using the Site Doctor

•	Finding broken links.

•	Fixing broken links.

•	Checking external links.

•	Finding orphan files.

•	Using the Site Summary .

Reference

The HoTMetaL PRO Information Manager has powerful tools for finding and replacing text across an entire site, finding orphan files, finding broken links, and finding external broken links. You can repair broken links with the Site Doctor. You can also group user-selected files into Pockets and perform further operations on them.

  More on this topic


Finding and replacing

The HoTMetaL PRO Information Manager has a powerful search engine that lets you search an entire project for files containing particular text, and replace that text, if you wish. You can also find or replace HTML elements or attributes, or special header elements (META elements), which describe your document. The Find and Replace dialog box has three different tabbed sections—Text, Tag, and Meta. The three sections all work slightly differently, and are discussed in the following sections.

  More on this topic


Finding text

To find text in your project files, click on the [image] toolbar button, press Ctrl+F, or choose Find... from the Edit menu. The Find dialog box appears.

To perform a simple search, select the Text tab and enter the text that you want to find in the Find what text box. The last five searches that you have made are available from the drop-down list.

Find and Replace options

There are several different ways to choose which files you would like to search in a project; from the list labeled Search, you can choose:

•	Project (all files) – search in the entire project.

•	 Site (linked files) – search those files that are linked from the home page (that is, orphan files will not be searched).

•	Selected File(s) – search only the files that are selected in the project. You can select files in the Information Manager in the same way that you would in Windows: clicking on a file selects it, holding down the Ctrl key and clicking on a file adds it to the selection, and holding down the Shift key and clicking on a file in a list adds all the files from that point to the next or previous selected file in the list.

In addition to these options, you can Find whole words only, Match case, and Use pattern matching. You can use the same search patterns as you would in the HoTMetaL PRO Editor: see Using search patterns  for more information.


Finding tags

The Tag tab of the Find dialog box lets you search for particular HTML tags (elements) across a project or in selected files.

You can search for an HTML element (no matter what attribute it has), or an element, attribute, and attribute value combination.

To find an element:

•	Choose an HTML element from the Element list or type the element name in the text box.

 Once you have selected an element, the list of possible attributes for that element appears in the Attribute pull-down list.

To search for an attribute:

•	Choose an HTML attribute from the Attribute list or type the attribute name in the text box.

If you haven't selected an element, no list of attributes will appear; you must select a particular element to perform a search.

To search for a particular attribute value, enter it in the Attribute Value text box.

For example, suppose you wanted to search for all instances of H1 that are center-aligned. Center-aligned headers (and all other block elements) have the attribute ALIGN with the value CENTER.

•	In the Tag tab of the Find  dialog box, choose h1 from the Elements drop-down list.

Once you have made the element selection, a list of possible attributes for the H1 element will appear in the Attribute drop-down list.

•	Choose align from the Attribute drop-down list.

•	Type center in the Attribute Value text box.

•	Click on Find to start the search.


Finding meta-data (META elements)

The Meta tab of the Find dialog box lets you search for particular meta-data tags across a project or in selected files.

Meta-data is used to embed document meta-information; that is, information about the document. Meta-data is contained in the HEAD element as attributes and values of META elements. This kind of information is used by servers or browsers and is application and user specific; that is, meta-data is not found in all documents and there's no general agreement on the types of meta-data in common use. Some browsers use meta-data (for example, Netscape has an extension that allows a client-pull, where you set a page to load for a specified amount of time, then load another page). It's also used to index pages for many search engines.

Often, meta-data is specified by means of a META element's NAME and CONTENT attributes. The NAME defines what type of information is being specified, and the actual content is described in the CONTENT attribute. For example, a META element that describes the version number of a document might have its NAME attribute specified as VERSION and the CONTENT specified as 1.55.

For example, suppose your project contains META specifications for document authors, and you wanted to search for all files written by a specific author.

•	In the Meta tab of the Find  dialog box, type Author in the Name  text box.

•	Type the desired author name in the Content text box.

•	Click on Find to search.

You can specify the search options for finding META in the same way that you can for finding text. See  Find and replace options for details.


Find results

Once you have completed a search, of any type, the Find Results dialog box will appear with your search results. If your search did not return any files, a dialog box will appear informing you of that.

The Find Results dialog box shows a list of Filenames  and the Number of occurrences of what you are searching for in each file. You can resize the columns by dragging the divider between the column titles. You can group all the files that you have found into a Pocket and perform further operations on them by clicking on Save in Pocket. See Pocket panel for details about the Pocket panel, and Using Pockets to manage files for Pocket operations.


Replacing text, tags, and meta-data

The Replace... functionality is very similar to the Find... functionality, except that you must fill in the replacement text, tag values, or meta values in the Text, Tag, or Meta sections of the Find and Replace dialog box.

  More on this topic


Replacing text

To replace text:

•	Choose Replace... from the Edit menu.

•	Click on the Text tab of the Replace dialog, if it isn't selected.

•	Enter the text you wish to find in the Find what text box.

•	Now, enter the replacement text in the Replace with text box.

•	Make any selection of options from the Search section of the dialog (see  Find and replace options  for details).

•	Click on Find to perform the search.

The Replace Results dialog box appears, showing the files that have the text you searched for.

•	Click on Replace All... to replace the found text with the replacement text.


Replacing tags

To replace tags:

•	Choose Replace... from the Edit menu.

•	Click on the Tag tab of the Replace dialog if it isn't selected.

•	Choose a tag, and if desired, an attribute name and value that you wish to find from the Element and Attribute drop-down lists, and the Attribute value text box.

•	Now, choose the replacement element, attribute, and attribute values in the Replace with section.

Note: If you want to replace an attribute, you must find it explicitly. You cannot add an attribute to an element that does not have one (that is, you cannot replace a plain `H1' with `H1 ALIGN=CENTER'; if you need to do that kind of replacement, you must use the HoTMetaL PRO Editor).

•	Make any selection of options from the Search section of the dialog (see  Find and replace options for details).

•	Click on Find to perform the search.

The Replace Results dialog box appears, showing the files that have the tags you searched for.

•	Click on Replace All to replace the tags you searched for by the tags you chose to replace them with.

Note: Tag replacing should be used with caution: you could create invalid HTML if you replace a HTML element with an element that isn't allowed in that context. Using tag replacing to replace elements of the same type—for example, replacing `H1' with `H3' or replacing `P' with `DIV'—is safest.


Replacing meta-data

You can find and replace meta-data from the Meta tab of the Find and replace dialog box.

To replace meta-data:

•	Choose Replace... from the Edit menu.

•	Click on the Meta tab of the Replace dialog if it is not selected.

•	Enter the meta-data Name and Content in the Find what section.

•	Now, enter the replacement Name and Content in the Replace with section.

•	Make any selection of options from the Search section of the dialog (see  Find and replace options  for details).

•	Click on Find to perform the search.

The Replace Results dialog box appears, showing the files that have the META elements you searched for.

•	Click on Replace All to replace the meta-data Name and Content with the values you have chosen.


Other replace result operations

From the Find and Replace Results dialog, you can choose to edit any of the files you have found or Pocket the find results without doing the replace.

To group all the files that you have found into a Pocket (and perform further operations on them), click on Save in Pocket. See Pocket panel for details about the Pocket panel, and Using Pockets to manage files for Pocket operations.

To edit any of the files that you have selected during the `Find' part of the Replace... operation, click on the file in the Replace Results dialog to select it, and then click on Edit File.... The HoTMetaL PRO Editor is launched with the file that you chose. (This may be useful if you want to do a more specific step-by-step find and replace within the document using the HoTMetaL PRO Editor. See Searching and replacing .)


Using Pockets to manage files

Pockets—user-defined sets of files—are useful for managing projects. Pockets can help you delete, copy, or rename selected files as a group, rather than trying to find each file one-by-one in the Project or Link panels. You can create Pockets based on a variety of criteria, such as search results, files with broken links, orphan files (files without any links to them), etc. See Finding and Replacing  and Repairing links with the Site Doctor for details. You can also create pockets by selecting one or more files in the Project panel or Link panel and dragging them into the Pocket panel. The default Pocket name for pockets you create by dragging is New Pocket, but you can edit the name of the Pocket.

Once you have created a Pocket, you can then select one or more files in the Pocket and:

•	Delete the files.

•	Copy the files.

•	Launch the Editor (all selected files will be loaded).

•	Do  find and replace operations on the selected files (turn on Selected File(s) in the Find and Replace dialog).

Pockets are associated with specific projects, so they will disappear from the Pocket panel if you display a different project. Pockets are saved between Information Manager sessions. Once you have created a Pocket, it will remain in the Pocket panel until deleted, even if you close and reopen the Information Manager. You can show or hide the files in a Pocket by clicking on the [image] icon to the left of the Pocket.

If you right-click on the Pocket panel, you get a list of commands such as Edit, Browse, Font etc., which are common to all panels. See Panel commands for details.

To add files to a Pocket:

•	Drag selected files from the Project or Link panel and drop them on an existing Pocket.

Note: If you drag a folder into a Pocket, the Pocket will contain only the files that are in the folder, and not the folder itself, any subfolders, or files within subfolders.

To rename Pockets:

•	Click on a Pocket once to select it and then click a second time, or right-click on the Pocket name and choose Rename Pocket from the pop-up menu. The name of the Pocket will become editable.

•	Enter a new name. When you click outside the Pocket, or press Enter, the name change takes effect.

To remove files from a Pocket:

•	Select the files, right-click on the selection and choose Remove From Pocket from the pop-up menu.

 This does not delete the file; it just removes the file from the Pocket. To actually delete the file (that is, send it to the Recycle Bin), choose Delete from the Edit menu or right-click on the Project panel and choose Delete from the pop-up menu.

To delete a Pocket:

•	Right-click on the Pocket and choose Delete Pocket from the pop-up menu.

Deleting a pocket does not delete the files it contains from your hard disk.


Repairing links with the Site Doctor

The Site Doctor helps you find problems in your site and repair them quickly and easily. The Site Doctor appears when you move files around in a project, and asks if you want to repair links to that file. There are three more commands that launch the Site Doctor. These commands let you find:

•	Files with broken links .

•	Files with broken links to external files.

•	Orphan files (that is, files that can't be reached by following links outward from the home page of the project—files that are not part of the link structure of the project).

  More on this topic


Finding broken links

A broken link is a link that points to file that does not exist in the specified location. Users will not be able to navigate broken links; their Web browsers will return error messages when the page cannot be found. The Information Manager enables you to fix the broken links and make sure that they point to pages that actually exist. To find broken links, choose Broken Links... from the Site menu. The Site Doctor displays a list of broken links (if there are any) in your project.

From this dialog box, you can:

•	Go to the Site Doctor's Fix broken links dialog by double-clicking on the broken link. This lets you change the link so that it points to an existing file.

•	Put the broken links into a Pocket, by clicking on Put in Pocket. You can perform further operations on the broken links once they are pocketed.


Fixing broken links

Broken links are links that point to files that don't exist. This can happen if files are moved around without fixing links, for example. Broken links are displayed in the Web View as file names shown in red, in the File View as small icons with a `broken link', and in the Tree View as icons with a red `x'.

You can launch the Fix Broken Links Site Doctor dialog by right-clicking on a broken link in the Pocket panel or Link panel (Web View, File View, or Tree View) and choosing Fix Broken Link from the pop-up menu. The Site Doctor - Fix Broken Links dialog appears.

The upper part of the Fix Broken Links dialog shows a list of files that refer to the broken link. You can correct the broken link by typing in the correct path in the text box provided (you can type in either a relative or an absolute URL), or you can select the file by clicking on Browse....

Clicking on Fix changes the broken links to the link that you have specified. If the replacement link does not point to an existing file, a warning dialog appears and you will be asked to specify an existing file in the Site Doctor - Fix Broken Link dialog. Clicking on Cancel closes the dialog without fixing any links.


External links

An external link is a link outside of your project; for example, a link to a page on the World Wide Web. These kinds of links are usually specified by a URL of the form http://... or ftp://.... The Information Manager can check external links to find whether they are valid; that is, whether the links refer to `live' locations on the Internet.

The Information Manager also treats links to files that are on your local drive but outside your project as external links (that is, URLs that start with file:/// or relative URLs that point to a file outside the current project; for example, ../../../scratch.htm). The Information Manager does not validate these types of links when you choose External links from the Site menu.

Note: You may have to configure your proxy server before you can perform the operation described below.  You also will need to connect to the Internet (that is, to your Internet Service Provider).

To check external links on your site, choose External Links... from the Site menu. The Site Doctor starts searching the World Wide Web to resolve the external links in your project. When the checking is finished, the Site Doctor - External Links dialog box appears.

From this dialog box, you can choose to Pocket all the files containing external links, or Pocket only the files containing broken external links. You can edit those files to remove the broken links, delete them, etc. Clicking on Stop stops the search that is in progress and returns the current results.


Finding orphan files

Orphan files are files that are in the project folder, but not part of the link structure of the project. Sometimes that's because all the links leading to them are broken, in which case it's a good idea to keep those orphan files around, and sometimes the links to them have been removed, in which case the files can be safely deleted, since they aren't part of the project anymore.

To find orphan files in a project (that is, files that are in the project folder but aren't pat of the link structure of the project), automatically creating a new Pocket:

•	Choose Orphan Files... from the Site menu.

The Site Doctor - Find Orphan Files dialog appears.

Clicking on Put in Pocket creates a Pocket called Orphan Files containing the results of the search.


Project summary

You can get a summary of your site by choosing Summary... from the Site menu. The Site Summary dialog box appears.

You can see the file names and their titles in the Path and Title columns. The registered Windows type is displayed in the Type column, and the size of the file is shown in the Size column.

The Links From and Links To columns show the number of links into and out of the file, respectively. Images shows the number of images linked to the file. Download Time shows the number of seconds it would take to download this file at 28.8K bps rates (a standard high-speed modem).

You can sort the summary by any of these characteristics: click on a column title to sort and reverse the sort by clicking again. For example, if you click on the Size column title, the files will be sorted from smallest to largest. Clicking on the column title again sorts the files from largest to smallest.

You can change the size of any of the columns by dragging the borders between the column titles. You can resize the dialog box by dragging the resize corner in the lower right corner of the dialog box. Click on OK to dismiss the dialog box.


Objects, applets, and scripts

What you'll learn in this chapter

This topic  deals with some of the more advanced objects that you can insert in Web pages.

•	Applets

•	ActiveX™ Controls

•	Scripts

•	Dynamic  HTML

•	Design-Time Controls

•	The Database Import wizard

Reference

HoTMetaL PRO provides many applets, scripts, ActiveX controls and pieces of Dynamic HTML code that can be inserted into your Web pages quickly and easily. This chapter gives you an overview of how to insert and use them.

•	Applets – Programs written using the Java language. They are linked to a document, much like images.

•	ActiveX™ Controls – Programs conforming to the Microsoft ActiveX standard that are registered on your PC and are only downloaded over the Internet when needed. (Unlike applets, if you already have the ActiveX program on your computer that is being requested in a Web page, there's no need to download a new copy, since the current copy will run on your PC.)

•	Scripts – Programs that run in your browser when your Web page is loaded. These are generally written in JavaScript or VBScript. Scripts are usually embedded directly in a page; they are also interpreted, and do not need to be compiled (unlike ActiveX Controls and Java applets).

•	Dynamic  HTML – Can refer to many different things, but in this chapter, it refers to the combination of scripts and the ability of Microsoft Internet Explorer 4.0 to render HTML elements. These scripts change the way that HTML elements in a Web page are displayed; that is, you can directly affect the display of HTML elements with a script. While most Web browsers do render HTML dynamically to some extent, the current Microsoft browser has more dynamic rendering capabilities. You can insert dynamic HTML in HoTMetaL PRO using Design-Time Controls.

•	The Database Import wizard – a Design-Time Control that creates a table in your Web page based on the contents of a database or spreadsheet file.

Creating applets, scripts, ActiveX, Dynamic HTML and Design-Time Controls is beyond the scope of this manual. There are references throughout this chapter to where you can go for further information. As well, HoTMetaL PRO comes with Power Tools to help create interactive programs: Acadia Infuse ScriptBuilder, which helps you create scripts, and Jamba, which helps you create applets

Acadia Infuse ScriptBuilder and Jamba are shipped with HoTMetaL PRO 4.0, but not with Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

  More on this topic


Using

 FX

The effects available from the HoTMetaL FX Chooser in the Evaluation Version that you are now using are a subset of those shipped with HoTMetaL PRO 4.0. Choose `How To Purchase' in the Help menu for ordering information.

The HoTMetaL FX Chooser is a quick way to insert scripts, applets, and Dynamic HTML into your document. When you insert one of these from the HoTMetaL FX chooser, a Design-Time Control will be launched, enabling you to configure the script, applet, or Dynamic HTML script. For more information on Design-Time Controls, see Inserting DTCs.

To drag and drop applets, scripts, or dynamic HTML from the HoTMetaL FX Chooser:

•	Choose HoTMetaL FX Chooser from the Tools menu.

•	Choose one of the following categories:

•	Dynamic HTML

•	Java Applets

•	Java Scripts

•	Choose a subcategory by clicking on the name in the subcategory window.

•	Drag the `mouse' icon from a particular applet, script, or Dynamic HTML script in the HoTMetaL FX Chooser to the HoTMetaL PRO Editor window.

The object that you selected will be inserted, and a DTC will be launched, so that you can configure the object.


Inserting Design-Time Controls

A Design-Time Control is an ActiveX control that lets you configure the content of your page or an object of some type that is embedded in the page.

Note: While the DTCs that are discussed in this chapter are used for configuring HTML, applets, and scripts in Web pages, DTCs can also be created for more general purposes. There may be other DTCs registered on your system which come from other companies and are used for purposes besides editing Web pages.

When you insert a DTC with the HoTMetaL PRO Editor, two things are inserted in your page:

1	The object or markup that the DTC configures.

2	The some code referring DTC itself, so that you can open it at a later time to reconfigure the object that was inserted. (This code is only displayed in HTML source view.)

To insert a Design-Time Control in your document:

•	Choose Design Time Control... from the Insert menu.

A dialog box that lists the Design-Time Controls registered on your system appears.

•	Double-click on a control in the list, or select a control and click on Insert.

A dialog box in which you can configure the applet, script, or Dynamic HTML script using the DTC will appear. The Properties dialog for the DTCs that ship with HoTMetaL PRO will automatically be launched when you insert them. For other DTCs, you may need to click on Properties when you insert the DTC to access the DTC's Properties dialog.

If a DTC has been inserted into your document, you can re-open the Properties dialog for the DTC at any time.

To re-open the DTC Properties dialog:

•	 Select the object or code inserted by the DTC and choose Design Time Control... from the Insert menu, or right-click inside the DTC and choose DTC Properties from the pop-up menu.

To delete the DTC and the code that it inserted:

•	Right-click inside the object or code inserted by the DTC and choose Delete DTC from the pop-up menu.

You can also insert DTCs using the HoTMetaL FX chooser  .


HoTMetaL PRO DTCs

The Design-Time Controls described in this topic are available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The DTCs described in this section were created by SoftQuad for use with the HoTMetaL PRO Editor. There are other DTCs that come with HoTMetaL PRO; please refer to the brief descriptions of the DTCs in the HoTMetaL FX Chooser for details on what they are used for.

  More on this topic


New Window Button

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The NewWndButton (new window button) DTC creates a JavaScript that is called by clicking a button. When the button is clicked in the browser a new browser window, displaying a specified page, will appear.

To configure the new window:

•	Turn on the desired New Window Features.

•	Specify the width and height of the new window, in pixels.

Button Label specifies the text that will be displayed on the button. To specify the page that will be opened when the button is pressed:

•	Drag and drop a link to the Page to Open box or browse for a file by clicking on Browse....


Shopping Cart

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

Two DTCs configure the Shopping Cart. This is a quick and easy method of setting up a way for users to `shop' on your system: they can select from products or services that you specify, and fill their own `shopping cart'. Users have control over their own shopping cart: they can delete items, add items, etc. When a user is finished loading up their cart, they can click on a button that activates a CGI script, which could, for example, send an acknowledgment to the user, and send the order to your order-processing department.

There are four steps involved in setting up a Shopping Cart:

•	Use the  Shopping Cart DTC  to create the Shopping Cart kiosk.

•	Use the  Shopping Cart Form DTC one or more times to create a form for each product that you want to offer.

•	Create a  CGI program to handle the data submitted by the Shopping cart form.

•	Finally, you can run the shopping cart  to check whether you got the results you wanted.

Creating the Shopping cart kiosk

 Choose the Shopping Cart DTC to create the kiosk. The kiosk is a frameset document consisting of two frames.

 The upper frame will contain the Shopping Cart console document, which is also created by the Shopping Cart DTC. The lower frame will contain one or more forms for individual products, which you create using the Shopping Cart Form DTC.

The console document consists of a JavaScript; when this page is displayed in the browser, it shows a list of all items selected. When a user selects an item from one of the product forms in the lower frame, this choice is added to a list in the console, and a running total of purchases is updated. The console also has buttons for clearing the list, deleting specific items, and for indicating that the user has finished selecting items.

The JavaScript in the console document also generates an HTML form that is displayed in the lower frame of the kiosk when the user clicks on the button indicating that they have finished selecting items. This form lists all of the user's selections, and the total cost. When the user submits this form, the form's data will be submitted to the CGI script that you specified.

•	Enter the filename of the frameset page for the kiosk in the first text box. The DTC will create this page automatically. If you enter an existing filename, that file will be overwritten; for this reason, if you wish to create a customized kiosk page, you should do so after running this DTC.

•	Enter the filename for the console page in the second text box. The DTC will create this page automatically.

•	Enter the filename of a page containing (or containing links to) forms for the individual products that you wish to offer in the third text box. These forms are generated using the Shopping Cart Form DTC.

•	Enter the URL of the CGI script that will be called when the user submits the Shopping Cart form.

When you click on OK, the DTC inserts a link in the current document, pointing to the kiosk (frameset) document. You can choose to keep this link to refer to the kiosk, or set up another link in another document. If you wish to run the DTC again to edit the values you entered above, you have to do so by clicking inside this link, and then choosing DTC Properties... from the pop-up menu, or Design Time Control... from the Insert menu.

Creating the Shopping Cart forms

Use the Shopping Cart Form DTC to create forms for individual products that will be offered in the Shopping Cart kiosk. You have to run the DTC once for each form you wish to create; the form will be inserted into the current document, but you can copy it to a different document later. The forms must be in, or be in documents linked to, the `Shopping Cart Form' document that you specified in the Shopping Cart DTC. How you arrange the pages and forms is up to you; the important thing is that on each page, each form must have a unique name, as explained below.

•	 Each product's form must be given a unique name (one that is not used for another form in the same page). Enter the name for the current form in the Form Name text box. (This value becomes the value of the NAME attribute of the corresponding FORM element).

•	Enter the name of the product in the Product Name text box.

•	Enter price of the product in the Unit Price text box. This value must be a number without a currency symbol (such as `$').

•	The text in the Order button label will appear on the button for this product in the order form.

•	You can optionally enter some extra information about the product. Do not surround this text with quotes. This text not be displayed in the form but will be sent to the CGI script.

Setting up the CGI script

The back-end CGI script to do the shopping cart processing is not supplied with HoTMetaL PRO—there are many different types of Web servers, each of which need slightly different scripts configured in different ways.

This script must process the data from the final order form. This data is in the standard format for form data—that is, as a sequence of name/value pairs, where the name and value are separated by an `=', and the pairs are separated by `&'. For example:

name1=value1

&name2=value2

&name3=value3

The data is organized as follows:

•	For each product in the final order, two name/value pairs are submitted:

1	The name in the first pair is the `product name' for that product, as entered in the Shopping Cart Form DTC.

2	The value in the first pair is the quantity of that product that was ordered.

3	The name in the second pair is the same as the name in the first pair, but with `.hidden' appended. For example, `redshoes.hidden'.

4	The value in the second pair is the `extra information' for that product, as entered in the Shopping Cart Form DTC.

•	The order in which the product data is submitted cannot be predicted, since it depends on which products were chosen, and in which order.

•	After the product data, a pair with name `total', and value equal to the total value of the order, is submitted.

Please see the links on CGI scripts on the `Technical Reference' page, accessible from the `Help' menu, for some places to go for more information on using and configuring CGI scripts.

Note: Creating pages that can do online transactions with credit cards and security is beyond the scope of this manual. Please contact your Internet Service Provider for more information.

Running the Shopping Cart

A user accesses the Shopping Cart by opening the kiosk document in a browser. Initially, the kiosk contains the console form in the top frame, and the order form in the lower frame.

•	To select a product, enter the quantity in the order form and click on the corresponding button. The selection is added to the list in the console.

•	To delete a selection, select it in the console and click on Delete Item.

•	To delete all selections, click on Clear All Items in the console.

•	If you wish to change the quantity of a product in your order, enter the new quantity in the order form and click on the button again. The new quantity replaces the previous selection. For example, if you initially selected two of something, and want to increase this to five, enter `5' and click on the button again.

•	When you have finished selecting items, click on End Shopping Trip. This displays the final order form in the bottom frame.

•	If you are happy with your order, click on Accept in the final order form. This send the form's data to the CGI script.


Site Outliner

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

Site Outliner is a dynamic HTML DTC, which is only supported by Microsoft Internet Explorer 4.0. This DTC will create an HTML file containing an outline of a Web site in a format similar to the way that Windows Explorer displays the contents of a folder. It uses SoftQuad's Web scanning technology to determine the format of the site and then produces dynamic HTML to create an outline.

To configure the Site Outliner DTC:

•	Enter the base URL from which the scan starts in the Site URL text box.

•	Specify the icon image used for each page in the outline in the Page Icon Image text box.

•	Specify the icon image used for each folder in the outline in the Folder Icon Image text box.

•	Specify the file name of the page created to hold the generated HTML of the outline in the Page for Outline text box.

Once the text boxes are filled in:

•	Select Start Scanning to do the scan.

When the Scanning Status box displays Done scanning, click on OK.


Toggle button

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The Toggle button DTC creates a JavaScript that toggles between two images when you click on it. You can also link another JavaScript into this button so that it will be triggered on the mouse click.

To configure the Toggle Button DTC:

•	Enter the path to the `on' and `off' images in the text boxes provided.

•	Give this control a Button ID so that it can be invoked by JavaScript.

•	In the Java Script function name text box, you can enter the name of another JavaScript that is called when you click on the toggle button.

The check box at the bottom of the dialog tells the DTC not to insert another copy of the the Toggle Button script if you already have a toggle button script in your page.


Web Tour

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The Web Tour DTC lets you create an automated tour—a kind of Web page slide show—for any collection of files that can be displayed in a Web browser (HTML, GIF, JPEG, etc.).

A web tour consists of two windows, which can be separate browser windows, or in different frames in the same window. One window displays the pages in the web tour; the other window contains a set of buttons—Back, Pause, Resume, and Forward—that let you control the tour

To set up a Web tour:

•	Enter the location of the Kiosk Page: this is the page that a user will open to display the web tour. You should choose a new filename for this page: HoTMetaL PRO will generate the contents automatically.

•	Enter the location of the Tour Control Page: this is the page that will display the control buttons. You should choose a new filename for this page (make sure it's not the same filename as for the kiosk page): HoTMetaL PRO will generate the contents automatically. If you wish, you can edit this page later with HoTMetaL PRO to customize its appearance.

•	Choose the format for the tour: Use Separate Window or Use Frame Set. If you use separate windows, the tour pages will be displayed in the kiosk page, and the controls will be displayed in a smaller floating window. If you use a frame set, the tour pages will be displayed in the upper frame, and the controls will be displayed in a smaller lower frame.

•	Click on Add to choose files to be displayed in the tour. Files will be displayed in the order that you add them to the Pages for the tour list. You can also drag and drop links into the list from a browser. You can remove a selected file by clicking on Remove.

•	You can configure a couple of things about how each file is displayed: click on a file in the list and then click on Edit to choose:

•	A caption for the file (this will be displayed in the control window).

•	The delay time—number of seconds between this file and the next one. You should leave enough time for the file to be fully downloaded, especially if it is an image to be downloaded over the Web. the default is 10 seconds.

•	Click on OK when you have completed the set up.

HoTMetaL PRO inserts a link in the current document, pointing to the kiosk document. You can choose to keep this link to refer to the web tour, or set up another link in another document. If you wish to run the DTC again to edit the information you entered above, you have to do so by clicking inside this link, and then choosing DTC Properties... from the pop-up menu, or Design Time Control... from the Insert menu.

You can run the web tour by opening the kiosk page: the browser displays the control window and begins to download the first page in the tour.


Inserting applets

Java is a programming environment that operates in conjunction with certain browsers to allow you to insert programs, called applets, in an HTML document. Coding applets is beyond the scope of this manual; please see the references at the end of this section for more information.

Wherever an applet occurs in a document, it reserves an area on the browser screen in which it does some special processing, such as drawing a picture or interacting with the user.

HoTMetaL PRO supports the APPLET element for inserting applets. The APPLET element can appear inside certain `block' elements—paragraphs, headings, list items, tables, and CENTER—or it can appear on its own, directly inside the BODY tag.

You can insert applets into the HoTMetaL PRO Editor in several different ways:

•	Choose HoTMetaL FX Chooser from the Tools menu. From the FX Chooser window, choose the Applets category. This is the recommended way to insert the applets that are provided with HoTMetaL PRO.

•	Click on the [image] toolbar button or choose Java Applet... from the Insert menu. This will bring up a file chooser dialog box that prompts you to choose the applet .class file that you want to insert. After you choose the file, a dialog box in which you can set various attributes of the applet will appear (see Specifying the applet ).

•	Drag and drop an applet .class file into the HoTMetaL PRO Editor document window. An APPLET element with certain attributes set will be inserted into the document, and a dialog box in which you can set various attributes of the applet will appear (see below).

•	Insert an APPLET element using Element... from the Insert menu, and edit its attributes manually by placing your insertion point inside the element and choosing Attribute Inspector from the View menu, or right-click and choose Attribute Inspector from the pop-up menu.

Certain applets can be inserted by using Design-Time Controls. See Inserting Design-Time Controls for details.

  More on this topic


Specifying the applet

The attributes of the APPLET element specify the applet file and the area on the screen in which it operates. The following attributes are set automatically if you drag and drop an applet into the HoTMetaL PRO Editor or use the applet toolbar button to choose an applet file. They can be set manually by editing the attributes of the APPLET.

•	ID – The identifier for the applet.

•	CODEBASE – Specifies the folder in which the applet file is located. If this attribute is blank, the applet is assumed to be in the same folder as the current document. This is generally a relative URL pointing to a local folder.

•	CODE – The name of the file containing the applet. This attribute must specify a filename only (no directories). This information is required.

When you drag and drop an applet into the HoTMetaL PRO Editor or use the applet toolbar button, the Applet Properties dialog box appears.

You can bring up this dialog box at any time by placing your cursor inside the APPLET, right-clicking, and choosing Applet Properties from the pop-up menu, or choosing Java Applet... from the Insert menu when you have an applet selected.  The following attributes can be set:

•	Alternate Text – Text that will be displayed if the document is displayed in a non-Java environment.

•	Name – A name that other applets in the same document can use to refer to this applet.

•	Width – The amount of horizontal space (in pixels) reserved for the applet. This information is required.

•	Height – The amount of vertical space (in pixels) reserved for the applet. This information is required.

•	Align – This lets you align the portion of the screen that has been reserved for the applet. You can align applets using the alignment toolbar buttons.

•	Vspace – Some extra space above and below the area reserved for the applet.

•	Hspace – Some extra space to the left and right side of the area reserved for the applet.

The following other attributes of applets can be modified with the Attribute Inspector:

•	ARCHIVE – Specifies a zip archive in which the browser will search for .class files. (Supported only by Netscape Navigator.)

•	MAYSCRIPT – Enables LiveConnect, in order to interact with JavaScript. (Supported only by Netscape Navigator; see Netscape's documentation on their Web site for details.)


Applet subelements

If the applet code requires some input data, this can be provided in the document itself, by way of PARAM elements. A PARAM element doesn't have any content; the information it supplies is contained in its attributes:

•	NAME – The name of an `applet-specific attribute'. This must be a name that is known to the applet code.

•	VALUE – The value associated with NAME.

There are two other attributes of PARAM: VALUETYPE and TYPE, which are used for PARAM within OBJECT. They are not used for PARAM within APPLET.


Applets in a non-Java environment

An APPLET can contain `block' elements such as paragraphs, lists, and blockquotes. The content of these elements will be displayed only in a non-Java environment (either because the browser isn't Java-aware, or because Java display has been turned off).


For more information on Java

 See http://java.sun.com/ for Sun's documentation, and Netscape's page http://developer.netscape.com/one/java/index.html which contains some Java demos and links to other resources. EarthWeb's Gamelan page http://www.gamelan.com/ has a large Java repository.


Inserting scripts

SCRIPT elements contain code, written in one of several programming languages, that is executed by a script-aware browser. JavaScript and Visual Basic Script (VBScript) are two such programming languages. The SCRIPT element allows users to put code directly in an HTML document. JavaScript is supported by version 2.0 and higher of Netscape Navigator, and by Microsoft Internet Explorer. VBScript is supported by version 3.0 and higher of Microsoft Internet Explorer. Coding in JavaScript or VBScript is beyond the scope of this manual; please see the references at the end of this section for more information.

Note: SCRIPT is not supported by all Web browsers. Use this feature with caution, and make sure that your script documents are readable by all browsers.

ScriptBuilder—a HoTMetaL PRO Power Tool—helps you create and edit scripts. You can launch ScriptBuilder by choosing Acadia Infuse ScriptBuilder from the Tools menu. The ScriptBuilder has its own online help, accessible from its Help menu.

Acadia Infuse ScriptBuilder is shipped with HoTMetaL PRO 4.0, but not with the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The actual code is contained inside a SCRIPT element. You can insert a SCRIPT element by using the Element... command in the Insert menu. The SCRIPT element has the following optional attributes:

•	LANGUAGE – The language that the script is written in.

•	SRC – The URL of a separate file that contains the script code. You can specify a script this way instead of putting the code directly into the SCRIPT element. If both an URL to a separate file and an internal script are defined, the script specified in the URL takes precedence.

The following attributes of SCRIPT are less common and are subject to change.

•	TYPE – The script language's MIME type.

•	EVENT – Used by some languages for passing parameters to the script.

•	FOR – a URL that specifies a particular element by means of an ID value. For example:

http://www.sq.com/orwell.htm#ID:catalunya

 The script is placed between the start- and end-tags of the SCRIPT element. Often, the script element is surrounded by a comment or contains a comment so that the script contents can be hidden from browsers that do not understand the SCRIPT element. If you type the following sequence at the beginning of a script element before the code, the script will be ignored by most non-script capable browsers. Type:

<!--

just after the SCRIPT start-tag, and:

-->

just before the closing SCRIPT end-tag.

In addition to the actual script code, scripts can make use of attributes of other elements: onBlur, onClick, onChange, onFocus, onLoad, onMouseOver, onSelect, onSubmit, and onUnload. These attributes make a call to a script function, and may also specify user input to a script. Please see documentation on scripting languages for the uses of these attributes. The attributes will not be described here, but the following list notes them: The `push button' object in a form was created especially for scripts: this object lets users send data to a script.

In pages with scripts, you can also insert a NOSCRIPT element, which will be seen by browsers that do not support the scripting. This is very similar to using NOFRAMES elements in a frames page. NOSCRIPT is a block element, similar to DIV. It could contain content describing the script that the user is not seeing, for example.

  More on this topic


For more information on scripting languages

See http://developer.netscape.com/one/javascript/index.html for more information on JavaScript. For more information on Visual Basic Script, see http://www.microsoft.com/intdev/vbs/vbscript.htm


Inserting ActiveX and other objects

TheOBJECT element lets you insert a program—called an `ActiveX Control' (formerly called `OLE Control' or `Internet Control')—into an HTML document.

In the future, some browsers may also use OBJECT as a replacement for all elements that create `inlines' in Web browsers: IMG,EMBED, APPLET, etc.

Note: ActiveX and the OBJECT element are not supported by all Web browsers. Use this feature with caution, and make sure that your documents also contain markup readable by all browsers.

HoTMetaL PRO supports the use of objects and provides an easy way to insert ActiveX Controls. ActiveX Controls can be sent over the Internet, or, if a copy exists on your PC already, run directly from a Web browser. You can insert an ActiveX Control object in several different ways:

•	Click on the [image] toolbar button or choose ActiveX Control... from the Insert menu. This will bring up a dialog box that gives you a list of the ActiveX Controls installed on your system and prompts you to choose the one that you want to insert. If there is nothing in this dialog box, then there are no ActiveX Controls registered on your system. See the references at the end of this section. After you choose the control, the Object Properties dialog box in which you can set other attributes of the control will appear.

•	Drag and drop an ActiveX Control (.ocx) file into the HoTMetaL PRO Editor document window. (These files generally reside in the Windows\System folder.) An OBJECT element will be inserted into the document, and the Object Properties dialog box in which you can set other attributes of the object will appear.

•	Insert an OBJECT element using Element... from the Insert menu.

You can show or hide the code in an ActiveX Control; that is, display the Object tags or show the ActiveX Control as a graphical object.

•	Right-click on the ActiveX Control and choose Show Object Markup or Show ActiveX Control.

  More on this topic


Object properties

The dialog box for setting the properties of the ActiveX Control is very similar to the one used to set the properties of the APPLET element: it contains settings for such display parameters as Width, Height, Alignment, Vspace and Hspace. There is also a Properties... button which will take you to an ActiveX Control-specific dialog box to set parameters for that particular ActiveX Control. You can bring up this dialog again at any time by placing your cursor inside the OBJECT element, right-clicking, and choosing Object Properties... from the pop-up menu. You can also open the Object Properties dialog by choosing ActiveX Control... from the Insert menu when you have an ActiveX Control already selected.

The following attributes of OBJECT are used for ActiveX (and other objects):

•	ID – The identifier of the control.

•	CLASSID – The unique ID of the code. For an ActiveX Control, it's a string in base 64.

•	DATA – The URL pointing to the code.

•	CODETYPE – The MIME (Internet Media) type of the code (here, application/x-oleobject).

There are several other attributes that are used with different types of OBJECT. Here is a brief description:

•	BORDER – The border of the object in pixels. It functions the same as IMG's BORDER attribute.

•	ISMAP – Tells the Web browser that the object is an image map. It functions the same as IMG's ISMAP attribute.

•	USEMAP – Sets the location of a MAP definition. It functions the same as IMG's USEMAP attribute.

•	NAME – An identifier used with form submissions.

•	DECLARE – Declare but don't instantiate the object code.

•	CODEBASE – Specifies the folder where the code is located.

•	TYPE – Another way of specifying the MIME (Internet Media) type if the type of the DATA is distinct from the CLASSID type.

•	STANDBY – A string that can be displayed in the Web browser while the OBJECT is loading.

•	SHAPES – The object has shaped hypertext links.


Using the Database Import wizard

The Database Import wizard described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The Database Import wizard is a Design-Time Control that creates a table in your Web page based on the contents of a database or spreadsheet file. You can query the database file and display the results of that query in your Web page. You can make various choices for the format of the table that is created. The Database Import wizard does not dynamically create this database; it just edits and creates the table each time it is launched.

A database may consist of one or more tables, each containing one or more records which contain fields:

•	Table – All of the databases and spreadsheets that you can work with using the Database Import wizard are structured as tables. A table is a set of records (and fields) that are linked together in an array.

•	Record – A row in the database table, consisting of one or more fields.

•	Field – A named column in the database or an individual data item in a record.

To insert a imported database in your Web page, do one of the following:

•	Choose Database Import wizard from the Insert menu.

•	Click on the [image] toolbar button.

The Database Import Design-Time Control appears.

There are several steps to importing a database:

1	Choose the database to import.

2	Choose which fields and records will be inserted into the table and in what order.

3	Edit the field: determine how you want to sort, label, and filter each field.

4	Join data from two or more tables, if desired.

5	Preview the query that you have created, if you wish, by clicking on the Preview tab.

6	Determine how you want the table be formatted in your Web page.

Submitting your query

Once you have finished choosing all the options in the Database Import wizard, click on OK to insert the table in your Web page.

Re-submitting your query

Once the table has been created, it cannot be modified using HoTMetaL PRO directly, but you can modify your query and regenerate the table based on the same database or spreadsheet.

  More on this topic


Choosing the database to import

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

In the top section of the Database Import Design-Time Control, select the database file to import.

•	Click on Select Database.

The Database Type dialog box appears.

•	Choose a database type from this dialog box: Microsoft Access, Microsoft Excel, Text (that is, an exported database file), or ODBC (that is, a remote database server accessed using the Microsoft Database Connectivity standard), and click on OK.

A dialog box in which you can select the database file appears, or, for ODBC, a log in screen appears. Once you have selected the file, a list of all the fields in the database appears in the Available Fields list in the Query Builder tabbed section. You now need to choose which fields and records will be inserted into the table, and in what order.


Choosing fields, records, and their order

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The fields in the database appear in the Available Fields list in the Query Builder tabbed section.

Highlight a field by clicking on it, and click on Add to move it to the Selected Fields list. Click on Add All if you want to move all of the fields to the Selected Fields list.

 The fields in the Selected Fields and their associated records form the columns or rows in the table that you are creating.

To change the order of the fields:

•	Click on a field to select it.

•	Click on the Up or Down button until the field is positioned where you want it to be in this list.

You can remove a field from this list by clicking on it and then clicking on Remove. Clicking on Remove All clears the list.

Now you can edit the field: show or hide the field, change the label, and sort and filter the records in the field.


Editing a field

 You can show or hide a field, change the label of a field, and sort and filter the records in the field:

•	Double-click on a field name in the Selected Fields list, or click once on a field to select it and click on Edit.

The Field Properties dialog appears.

To change the name of a field's header:

•	Enter or modify the text in the Display Name text box.

To show or hide a field (that is, put it in the table or not):

•	Select No from the Show pull-down list.

To sort the data in a field:

•	Select Asc (ascending sort), Desc (descending sort) from the Sort Order drop-down list.

To define a filter for a field:

•	Select an option from the Filter Condition list:

•	= (equals) – Only records in which the value of this field matches the specified string or number will be found and inserted in the Web page. Text strings must be specified in quotes.

•	> (greater than) – Only records in which the value of this field is greater than a number or in a higher alphabetical order than a specified text string will be found and inserted in the Web page. Text strings must be specified in quotes. Lowercase letters are considered to be lower in order than uppercase letters.

•	< (less than) – Only records in which the value of this field is less than a number or in a lower alphabetical order than the specified text string will be found and inserted in the Web page. Text strings must be specified in quotes. Lowercase letters are considered to be lower in order than uppercase letters.

•	Like – Only records in which the value of this field matches the specified text using the pattern matching of Microsoft Access (`*' is the wildcard character) will be found and inserted in the Web page. Text strings must be specified in quotes.

•	Between – Only records in which the value of this field is between the specified numbers or text strings in alphabetical order will be found and inserted in the Web page. Lowercase letters are considered to be lower in order than uppercase letters.

You can create multiple filters for fields and they will be applied simultaneously to all the records in the database.

You can preview the query that you have created by clicking on the Preview tab. The records that you have selected will be shown in this table.


Choosing table formatting

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

Once you have defined your database query, which fields you're going to show and hide, and how you want the records sorted, you determine the format of the table that's going to be created in the HoTMetaL PRO Editor.

•	Click on the Table Formatting tab.

In this section of the Database Import wizard, you can change the format of the table and the text in the table. The top section defines the table properties, which are formatting choices that apply to the entire table:

•	Orientation – Choose how the table should be oriented:

•	Vertical – Labels for the fields at the top of the table and the records for that field sorted in columns.

•	Horizontal – Labels for the fields at the left side of the table and the records for that field sorted in rows.

•	Alignment – Align the table Left, Center, or Right on the Web page.

•	Show Header – Show or hide the table header cells that contain the labels for the fields in your database.

•	Cell Padding – Set the space (in pixels) between the text in a table cell and the borders of the cell.

•	Cell Spacing – Set the space (in pixels) between table cells.

•	Border Width – Set the width of the table border, in pixels.

You can choose formatting for the table header and table body:

•	Font Face – Choose the font to display the header text and body text. <Default> will let the Web browser decide based on the format of enclosing elements or the Web browser's default.

•	Font Style – Choose from Default, Bold, Italic, and Bold Italic.

•	Font Size – Choose the relative size of the font used for the header or body. You can make the font bigger (+1, +2, etc.) or smaller (-1, -2, and so on).

•	Background and Foreground – Choose the color for the background of the header cells and the table body cells and the foreground (that is, text) color for the header cells and table body cells.

The table created by the Database Import wizard cannot be modified directly by using the table editing features of the HoTMetaL PRO Editor. To change any of the table formatting (or change the database query):

•	Right-click on the table created by the Database Import wizard and choose DTC Properties from the menu.

Modify the table formatting by clicking on the Table Formatting tab.


Complex table queries: table joins

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

A join in SQL is a query in which data is retrieved from two or more tables. This is generally of the most use when two tables have some of the same field names and records; for example, two different tables of employee information—a payroll table and an employee information table—both having the same `Employee ID' field. You can put these tables together, joining them at the identical field, and display them in your Web page with the Database Import wizard.

To created a joined table that you can query:

•	Select a table from the Table drop down list in the Query Builder section of the Database Import wizard. All the tables in the current database will be listed. This will be the table that you join onto.

•	Click on Table Joins. The Table Joins dialog box appears.

The fields in the table that you selected in the Query Builder section are displayed in the Join Onto list. You can select any of the tables in current database from the Select table to join list. When you have made that table selection, the fields in the table are listed in the Select Join Field list.

To create a joined table query:

•	Choose a field from the Select Join Field list.

•	Choose a field from the Join Onto list.

•	Click on Add.

The Database Import wizard will join the two tables using an SQL `select' statement and show the joined fields in the Current Joins list.

You can create multiple joins in the Table Joins dialog box by adding additional pairs of fields. To remove joins that you have created from the Current Joins list:

•	Select the join you wish to remove.

•	Click on Remove.

When you click on OK in the Table Joins dialog box, the joined table's fields will be listed in the Available Fields list in the Query Builder section. You can then create a query, just as you would a non-joined table.

Note: Joining tables will create a duplicate field which must be removed or hidden before you can finish the Database Import wizard conversion into your Web page.


Editing images

Using PhotoImpact SE

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

While some people are content to use clip-art and other free images available all over the Internet, others want to add a personal touch, or even design all of the images for their Web site themselves. HoTMetaL PRO comes with Ulead's PhotoImpact SE image editing tools, which make it possible to do the following (and much more) quickly and easily:

•	Adding text to images.

•	Creating buttons.

•	Creating shadows and frames.

•	Adding transparency to images.

•	Optimizing image colors for the Web.

If you didn't install PhotoImpact SE when you installed HoTMetaL PRO, you can do so now from the HoTMetaL PRO CD. See the Getting Started booklet for instructions on installing PhotoImpact SE.

Reference

HoTMetaL PRO comes with a rich collection of image editing tools in Ulead's PhotoImpact SE. This powerful graphics program makes it easy for you to customize and create professional looking graphics for your Web pages. This manual does not cover all of the functionality of PhotoImpact SE; full documentation is available from PhotoImpact SE's online help.

You can change the default editor and viewer for a particular image type from the Options dialog. These `helper' applications will be launched instead of PhotoImpact SE when you right click on a file of that type and choose Edit Image File or View Image File from the pop-up menu.

  More on this topic


Introducing PhotoImpact SE

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

PhotoImpact SE consists of five main components:

1	PhotoImpact SE Editor, for editing and creating images (this is the default image editor for HoTMetaL PRO).

2	PhotoImpact SE Explorer, for browsing image thumbnails (this is launched when you choose Image Explorer from the HoTMetaL PRO Tools menu).

3	PhotoImpact Album SE, for organizing and grouping images.

4	PhotoImpact Viewer SE, an image viewer (this is the default image viewer for HoTMetaL PRO).

5	PhotoImpact GIF Animator, the default editor and viewer for animated GIFs.

The HoTMetaL PRO online help  covers only certain aspects of the PhotoImpact SE Editor. You can learn about the other PhotoImpact applications from the PhotoImpact online help.

  More on this topic


The PhotoImpact SE editor

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The following is a basic introduction to the PhotoImpact SE editor interface.

To open an image file with PhotoImpact SE Editor from HoTMetaL PRO:

•	Right-click on the image in the HoTMetaL PRO Editor window and choose Edit Image File from the pop-up menu; this will start PhotoImpact SE and load the image file for editing.

You can also start PhotoImpact SE from the Windows Start menu, or by choosing Image Editor from the HoTMetaL PRO Tools menu, and then open the image file using the Open... command in the PhotoImpact SE File menu.

The main tools for using PhotoImpact SE are the menus, the Standard toolbar, the Tool Panel, and each tool's Attributes toolbar. All of the toolbars and panels can be moved around the screen as floating toolbars, or anchored to any part of the PhotoImpact SE window.

To configure PhotoImpact SE to display these toolbars:

•	Choose Toolbars & Panels from the View menu.

•	Select the toolbars you want to display; we recommend that you show the Standard Toolbar, the Attribute Toolbars, and the Tool Panel.

From this dialog, you can also set the size of the buttons and determine whether or not to show tool tips.

The Switch menu command

The Switch menu at the right-hand end of the menu bar of each PhotoImpact SE component gives you to access the PhotoImpact SE Editor, Viewer, Explorer, and Album. If you choose a PhotoImpact SE component from the Switch menu, that component will start, or, if it is already open, will come to the foreground.

Standard Toolbar

The Standard toolbar gives quick access to frequently needed tools and menu items.

Tool Panel

The Tool Panel provides all the editing tools you need to work on images. By selecting the appropriate tool, you can select, draw, transform, and touch up images. Each tool has its own Attribute toolbar. Some of the tools, such as the Paint tool, have different modes that you can select by clicking on the small triangle in the bottom right corner of the tool button.

Attribute Toolbars

When you select a tool in the Tool Panel, all of the attributes that you can configure for that tool appear in the Attribute toolbar. Note: some options may be grayed-out; typically, these options are not available in PhotoImpact SE, but are available in the full version of PhotoImpact.


Working with files

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

To open an image file with PhotoImpact SE Editor from HoTMetaL PRO, right-click on the image in the HoTMetaL PRO window and choose Edit Image File from the pop-up menu. This will start PhotoImpact SE Editor or PhotoImpact GIF Animator, as appropriate, and load the image file for editing.

Since PhotoImpact SE is not shipped with the HoTMetaL PRO Evaluation Version, when you choose Edit Image File, HoTMetaL PRO will try to carry out one of the following actions, in the order given:

•	If you have associated a helper application with the file extension of the current image, that application will be launched.

•	If you have selected a default image editor by choosing Image Editor from the Tools menu, that application will be launched.

•	Otherwise, you will be prompted to choose an application.

There are two other ways to launch PhotoImpact SE:

•	Choose Image Editor from the Tools menu.

•	Start PhotoImpact SE from the Windows Start menu

You can then open the image file using the Open... command in the PhotoImpact SE File menu.

Since PhotoImpact SE is not shipped with the HoTMetaL PRO Evaluation Version, the first time you you choose Image Editor, you will be prompted to choose an application.

  More on this topic


Using PhotoImpact SE tools on GIF image files

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

Most of the image filters and advanced image editing features work only in true color 24-bit images (millions of colors). If you are editing GIF files for your Web pages, they will be 256 or fewer color images. To maximize the number of features you can use when editing the image, you should increase the number of colors while you work on the image in PhotoImpact SE, then reduce the colors to save it as a GIF file again.

Note: The PhotoImpact SE online help has a detailed section on color, color palettes, and color depth.

To work on a GIF file in true color 24-bit mode:

•	Open the GIF file in PhotoImpact SE.

•	Choose Data Type in the Format menu or click on the image type button in the bottom right corner of the PhotoImpact SE window.

•	If Create a New Image is checked in the fly-out menu, deselect it by clicking on it with the mouse.

•	Choose true color (24-bit) from the Data Type menu; the image is converted to true color and all the image processing tools will be available.

To resave the image as a GIF file:

•	Choose Data Type in the Format menu or click on the image type button in the bottom right corner of the PhotoImpact SE window.

•	Choose a color depth of 256 colors or fewer.

•	Click on the [image] or choose Save from the File menu to save your changes to the GIF file at the proper color depth.

PhotoImpact SE gives you several options for color palettes, including optimizing for the WWW

You can also use this process to reduce the colors of high color images such as BMP and JPEG files before saving them as GIF files.

Note: If the file originally had only a 16 color palette, save it as a 16 color file so that you don't unnecessarily increase the file size.


Using Smart Savers to set image options

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

Because both GIF and JPEG files can be saved with several customizable settings, PhotoImpact SE includes Smart Savers for GIF and JPEG files. These make it easy to optimize your images for the Web. You can access the Smart Savers by choosing Export... from the File menu, or by choosing either the GIF or JPEG Smart Saver from the Web menu.

The GIF Smart Savers make it easy to set:

•	Transparency

•	Color reduction

•	Color palette

•	Interlacing on or off

The JPEG Smart Savers let you balance file size with image quality by setting:

•	File compression

•	Smoothing

•	Mode

•	Subsampling

You can also run batch image processes from the Smart Savers. See PhotoImpact SE's online help for more information.


Adding text to an image

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

With Ulead PhotoImpact SE you can easily add text to images to personalize buttons, logos, and other customized Web graphics.

To add text to an image:

•	Click on the text tool icon; the mouse pointer becomes an I-bar and the text tool settings toolbar appears below the main toolbar.

•	Click in the image window; this brings up the Text Entry Box dialog.

•	Type the text you want to place on your graphic. To put in a line break, press Ctrl+Enter.

•	Click on OK; this inserts the text into the graphic.

Click and drag the text to the desired location in the image.

  More on this topic


Modifying image text

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

You can change the properties of the text using the PhotoImpact SE Text toolbar:

•	Click on the [image] (text) toolbar button in the Tool Panel.

•	Put the pointer over the text you want to change; the pointer arrow will have a small `T' inside it: .

•	Click on the text; it will have a dotted line around it, which means it can be moved or changed.

You can now use the text Attributes toolbar to change the font, color, style, size, and other options as described in the Ulead PhotoImpact SE online help.

To edit the text:

•	Click on the [image] (text) toolbar button in the Tool Panel.

•	Put the pointer over the text you want to change; the pointer arrow will have a small `T' inside it: .

•	Double-click on the text; this brings up the Text Entry Box with the current text in the editing box.

•	Edit the text.

•	Click on Update; the text will be updated in the image.


Adding text shadows

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

A popular effect to use for creating text images is a drop-shadow beneath the text. Ulead PhotoImpact SE makes creating shadowed text easy:

•	Using the text tool, move the pointer over the text until the pointer arrow has a small a small `T' inside it: ; the text will be surrounded by a moving dotted-line marquee.

•	Click on the text you want to shadow; it should have dotted lines around it.

•	Click on the [image] (Style) button in the Attributes Toolbar; this brings up a menu of styles.

•	Choose Shadow from the style menu.

This creates a drop shadow of the text. You can change the appearance of the shadow (position, distance from the original, color, etc.) by clicking the styles button, and choosing Options from the menu.


Saving an image with text

When you add text to an image, PhotoImpact SE regards the text as a separate object that can be manipulated (for example, moved around or deleted) independently of the image. Most image formats—for example, GIF and JPG—do not support objects, so if you save the image in one of these formats, you will get a warning message informing you of this. In this situation the text will be `merged' into the image, which simply means that it will become part of the image rather than residing on top of the image. You can turn this warning message off for future saves.


Web image tricks

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

PhotoImpact SE provides tools for easily creating images suitable for Web pages. All of these tools are available from the Web menu. We have provided information on only a few of the available tools in PhotoImpact SE; you can learn about the others from the PhotoImpact SE online help.

  More on this topic


Creating buttons

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

Adding graphical buttons to act as hypertext links is an easy way to give your page a sense of style. PhotoImpact SE can take a regular image and add a variety of beveled-edge button styles. While buttons tend to look better in GIF format, the greatest range of button types is available if you are working in 24-bit color; see the section on working with GIF files for more about changing the Data Type.

To create a button effect for the image:

•	Open the image in PhotoImpact SE.

•	If the image has less than 24-bit color, increase the color depth using the Data Type command in the Format menu.

•	Choose Button Designer... from the Web menu.

The easiest way to work with the Button Designer is to experiment until you get the effect that you want. The following options are available:

•	Style – Click the style of button you want to create. The preview window will immediately display a preview of your image with that style applied.

•	Direction – If you choose Outward, the button border will be added to the outside of the current image, changing its size. If you choose Inward, the button border will remain within the original borders of the image, covering part of it.

•	Options – Specify the size, color, and other attributes for the button border.

•	Mirror – Turn on Mirror to keep the top and left edge and the right and bottom edge sizes synchronized with each other. Turn off Mirror to set the size of each edge independently.

•	Width – Set the width of the selected edge.

•	Transparency – Set how much of the original image should show through the button border.

•	Colors – Depending on the type of button, choose the colors to use for button borders or adjust other color attributes.

•	Quick samples – The buttons in the lower panel on the right-hand side of the Button Designer are preset button settings. You can use them to create a button with a single click; then fine tune the settings if you wish.


Adding image frames and shadows

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

You can quickly create frames (borders) and shadows for entire images by choosing Frame Designer... from the PhotoImpact SE Web menu.

This dialog gives a number of options:

•	Frame – Choose the width and color or pattern for the border; the result is displayed in the preview image. You may choose any of these types of borders for the image:

•	 Color – A single color border matching that of the color square. To choose a different color, right-click on the color square and choose the desired command for selecting a new color.

•	Magic texture – Create a multi-color border matching that of the texture square. To change textures, click on Library... and choose from the samples in the Magic Texture dialog box.

•	Natural texture – Create a natural looking multi-color border matching that of the texture square. To change textures, click on Library... and choose from the samples in the Texture Library dialog box.

•	Shadow – Choose the size and color of a shadow to go around the border.

•	Color and Direction – The shadow color will match that of the color square. To choose a different color, right-click on the color square and choose the desired command for selecting a new color. Then select the option that shows a shadow in the direction you want.

•	X offset, Y offset – Set the size, in pixels, of the shadow. (X is the distance of the shadow from either side, Y is the distance of the shadow from the top or bottom.)

•	Transparency – Set a higher value to allow more of the underlying image to appear through the shadow.

•	Edge blending – Set a higher value to have the shadow blend into the background more smoothly.

•	Canvas – Set the size and color for the background.

•	Color – Choose a color for the background. To choose a different color, right-click on the color square and choose the desired command for selecting a new color.

•	Direction – Set the size for the background. Click on the Lock button to set the sizes individually.


Creating seamless backgrounds

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

Using the Shift Image... command in the PhotoImpact SE Web menu, you can adjust images so that they will tile seamlessly as a background image in your page. The Shift Image dialog displays the image as your browser would. Simply use the mouse to shift the preview image until the tiling looks right. If you need to adjust the offset more precisely than you can with the mouse, you can use the Horizontal Offset and Vertical Offset spin boxes to choose precise values.


Creating transparent GIFs

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

A transparent GIF is a GIF image in which one color is designated as transparent, that is, it allows background images or colors to show through. You can create transparent GIF images using the PhotoImpact SE GIF SmartSaver....

To create a transparent area in a GIF image:

•	Choose GIF SmartSaver... from the Web menu, or choose Export... from the File menu and choose GIF SmartSaver... from the pop-up menu.

•	In the GIF SmartSaver dialog, choose Pick Color from the Transparency pull-down menu.

•	Click on the Transparent Area Preview Color square to choose a color that will represent the transparent color.

•	Move the mouse pointer over the image on the left (the original image) and hold down the Ctrl key; the pointer will turn into an eyedropper tool. (If the image already contains a transparent color you can make it solid by holding down the Alt key and clicking the mouse button.)

•	Click on the color you want to make transparent; any part of the image that contains that color will now take on the preview color you chose, and this will be displayed in both the uncompressed and compressed preview images.

•	Click on the Save As... button to save the image with the transparency information.


Using Web-safe colors

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

PhotoImpact SE gives you the option of saving GIF images with a color palette optimized for Web browsers. If you save your images using this palette, you will ensure that browsers on all platforms will be able to display your images with the best quality available to the user's computer. To save your images using the color palette optimized for the Web:

•	Choose Data Type from the Format menu; (if you turn on Create a New Image, a new copy of your image will be created, leaving your original image intact).

•	Choose WWW Browser Optimized from the palette choices.

The image now has a color palette that is most suited to Web browsers.


PhotoImpact SE tricks

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

•	Animating images – Animated GIF files have become a popular feature of the Web. HoTMetaL PRO includes the PhotoImpact GIF Animator for creating animated GIF images. Please note: if you open an animated GIF in the PhotoImpact SE editor and save it again, the image file will no longer be an animated GIF; the first image of the animation will be saved and the others will be lost. Neither the PhotoImpact SE Editor, Viewer, or Explorer display GIF animations. If you're unsure whether a file is an animation, view it in an animations-capable viewer (such as a Web browser or the PhotoImpact GIF Animator) to verify its format. To learn how to create animated GIFs, consult the PhotoImpact GIF Animator online help.

•	Making basic shapes – Rectangles, squares, ellipses, circles, and polygons are easy to make with PhotoImpact SE once you know the tricks. PhotoImpact SE does not have a specific tool for creating these shapes, so it requires an extra step.

To create an outlined rectangle, square, ellipse, or circle:

•	Click on the [image] (Standard Selection) toolbar button in the Tool Panel.

•	Choose the shape you want to create from the Attributes toolbar.

•	Drag the mouse in the editing window to produce a selection area, defined by a dotted line. To make the selection a specific size, check the Fixed size checkbox in the Attributes toolbar, and set the size of the area.

•	Right-click on the area and choose Border from the pop-up menu; this brings up a dialog box.

•	Choose the thickness of the border.

•	Click on OK. The selection will now be surrounded by a double dotted line.

•	Click on the Fill tool icon.

•	Choose a fill color for the box outline from the Attributes toolbar.

•	Apply the fill between the selection outlines (use the Zoom tool to do this if you have made a narrow border).
To create an irregular polygon:

•	Click on the [image] (Lasso) toolbar button in the Tool Panel.

•	Click in the editing window to start drawing the figure.

•	Move the mouse to the second point in your drawing; a line will follow the pointer from the location where you clicked the mouse. Click the mouse again, the pointer will now be connected to both points where you clicked before, creating a three-pointed shape.

•	If you click and drag the mouse, you will draw a freehand line rather than a series of connected points.

•	Continue clicking and moving the pointer until you have the shape you like.

•	Double-click the mouse to stop drawing; this creates a selection area surrounded by dashed lines.

•	Right-click on the area and choose Border from the pop-up menu; this brings up a dialog box.

•	Choose the thickness of the border.

•	Click on OK. The selection will now be surrounded by a double dotted line.

•	Click on the Fill tool icon.

•	Choose a fill color for the box outline from the Attributes toolbar.

•	Apply the fill between the selection outlines (use the Zoom tool to do this if you have made a narrow border).

•	Right-click color choosing – When you right-click on a color box in dialog boxes or the Attributes toolbar, a pop-up menu appears giving you a choice of color choosers. The eyedropper tool allows you to choose a color from the current image so that you can be sure of a match.


Using cascading style sheets

Cascading style sheets are style sheets that can be attached to individual HTML documents. Rather than having the appearance of your documents determined by the Web browser defaults, you can customize the way that users view your document. Cascading style sheets provide the most versatile control over document styles, but are not widely supported by Web browsers. At the time of this writing, Microsoft Internet Explorer (3.0 and above) and Netscape Communicator 4.0 provide the most extensive support for cascading style sheets.

You can use the HoTMetaL PRO cascading styles editor  to define your own cascading styles for displaying documents.

Style sheets must be linked to HTML documents  in order to be applied to the document by the browser.

A cascading style sheet consists of one or more rules. There are two different types of rules:

1	Rules associating an element, a group of elements, a element in a particular context, or some combination of these with a set of style properties and values. This is the usual type of rule in a style sheet.

2	Rules used to set information about the style sheet such as its title, author, etc., as well as specifying imported style sheets and additions to the CSS standard.

The cascading part of the CSS standard refers to the fact that multiple style sheets can be applied to one document and influence how the document is displayed. A document's style sheets can have several rules that refer to the same element. There is a general scheme of how rules are to be interpreted that allows more specific rules to override more general ones, and rules that are built in to a document to override rules that are linked to a document.

The cascading style sheet standard

 The cascading style sheet standard is very flexible and quite complicated: HoTMetaL PRO supports a subset of this standard. The specifications for the evolving cascading style sheet standard can be found at the W3C Consortium's Web page at http://www.w3.org/. See the Microsoft (http://www.microsoft.com/) and Netscape (http://www.netscape.com/) home pages for information on their support for the CSS standard.

  More on this topic


Using the cascading style sheet editor

To use the HoTMetaL PRO cascading style sheet editor:

•	Choose Cascading Style Sheets... from the Tools menu of the HoTMetaL PRO Editor or HoTMetaL PRO Information Manager.

If you launch the cascading style sheet editor from the HoTMetaL PRO Editor, and the current document is linked to a cascading style sheet file, the style sheet editor will load that file. Otherwise, a dialog box will appear, prompting you to choose a file.

•	If a dialog box appears, choose an existing style sheet (.css) file, or enter a new filename to create a new file.

The style sheet editor has two modes, simple and advanced. Each mode lets you set the same style properties, but the advanced editor lets you specify more complex situations in which these style properties can be applied.

•	The simple editor is the default mode when the style sheet editor is launched. If the upper right corner of the dialog box contains the More... button, the editor is in simple mode. In simple mode you can assign style properties to elements, classes of elements, and specific element instances.

•	To put the editor in advanced mode, click on the More... button in the upper right corner of the dialog box; if the button reads Less..., the editor is currently in advanced mode. In advanced mode  you can create context-sensitive style properties and apply styles to groups of elements.

You should enter a title for the style sheet in the Title text box.

Once you have finished creating your style sheet, click on Save to save the styles you have created or modified, or Save As... to save the style sheet under a different name. Clicking on Reset discards all the changes you have made; that is, the style editor will have the content it had when the file was loaded. Click on Exit to dismiss the CSS editor without saving any changes.


Attaching cascading styles to a document

There are three ways to attach cascading styles to a document:

•	Attach an external style sheet file using a LINK element.

•	Embed a style sheet in the document using the STYLE element.

•	Assign an inline style rule for a specific occurrence of an element, using the STYLE attribute.

  More on this topic


Attaching an external style sheet to a document

If you want a cascading style sheet file to be applied to a document, it must be linked to the document using the HoTMetaL PRO Editor. This type of link is contained in a LINK element.

•	Display the Tags On view.

•	If the HEAD element (at the top of the file) isn't displayed:

•	Choose Options... from the Tools menu.

•	Click on the View tab.

•	Turn on Show head element.

•	Click on OK.

•	Put the insertion point directly after the HEAD start-tag (that is, don't put it inside a `head' element such as TITLE).

•	Choose Element... from the Insert menu, or click on the [image] toolbar button.

•	Insert a LINK element. The Insert Link dialog box will come up automatically.

•	Enter the URL for the cascading style sheet (.css) file that you want to link to.

•	Click on OK.

•	With the insertion point still inside the LINK element, choose Attribute Inspector from the View menu, or type F6.

•	Type `STYLESHEET' (all CAPS) in the REL field, and type Enter.

•	Optionally, enter a title for the stylesheet in the TITLE field, and type Enter.


Embedding a style sheet in a document

You can embed a cascading style sheet directly inside an HTML document using the STYLE element. The HoTMetaL PRO cascading style sheet editor does not support this method directly: you can create the style sheet as a separate file and then manually paste it into your HTML document.

•	Display the Tags On view.

•	If the HEAD element (at the top of the file) isn't displayed:

•	Choose Options... from the Tools menu.

•	Click on the View tab.

•	Turn on Show head element.

•	Click on OK.

•	Put the insertion point directly after the HEAD start-tag (that is, don't put it inside a `head' element such as TITLE).

•	Choose Element... from the Insert menu, or click on the [image] toolbar button.

•	Insert a STYLE element.

•	Type or paste the cascading style sheet inside the STYLE start- and end-tags.

•	With the insertion point still inside the STYLE element, choose Attribute Inspector from the View menu, or type F6.

•	Type `text/css' in the TYPE field, and type Enter.

Because some browsers that are not CSS-compliant will display the contents of the STYLE element in the document window, it is a good idea to surround an embedded style sheet with an HTML comment. This will cause the content to be ignored by non-CSS browsers, but still interpreted by CSS compliant browsers.

•	Type `<!--' just after the STYLE start-tag, but before the style sheet information.

•	Type `-->' just before the STYLE end-tag, but after the style sheet information.


Creating an inline style rule for an element

You can specify an inline cascading style rule for an individual instance of an element, using its STYLE element. The HoTMetaL PRO cascading style sheet editor does not support this method directly: you can create the style rule using the editor and then manually paste it into your HTML document.

•	Put the insertion point inside the element to which you want to assign a style.

•	Choose Attribute Inspector from the View menu, or type F6.

•	Type or paste the style rule in the STYLE field. You should enter only the `properties' part of the rule (that is, the part that appears inside the `' and ''). For example:

<P STYLE="font-size:12pt; color:red">Text

</P>


Setting a cascading style for an element

To assign cascading style properties to an element (that is, all elements of a particular type, for example, `all H1 elements'):

•	Launch the cascading style sheet editor.

•	The cascading style sheet editor should be in simple mode: it is in simple mode if the button in the upper right corner reads More...; if it reads Less..., click on the button to return to simple mode.

•	Select an element from the Element pull-down element list.

•	Now you can use the tabbed `style properties' section of the cascading style sheet editor to set the styles for the selected element.


Classes and IDs

Classes provide a way of assigning a style to many element instances, possibly of different types. IDs provide a way of assigning a style to one specific occurrence of an element.

Classes

A class is simply a group of elements, possibly scattered throughout a document, all of which have the same value for their CLASS attribute. For example, if you want a document on some topic to contain both `basic' and `advanced' sections, you could give all the elements that contained advanced material the CLASS attribute value `advanced'. The advanced sections could include paragraphs, headings, images, links, and so forth. You could then use a cascading style sheet to format the `advanced' class differently: display it in a different color, or even make it invisible.

IDs

While many elements can have the same CLASS attribute value, only one element in any document can have a particular ID attribute value. IDs are intended to be unique identifiers for elements in a document: the HoTMetaL PRO Editor will not validate a file in which the same ID value is used for more than one element. Cascading style sheets let you associate an ID attribute with a set of style properties and values, so that you can format a particular element instance in a certain way.

  More on this topic


Creating classes and IDs

You create classes and IDs in a document in the HoTMetaL PRO Editor.

To create a class, you set the CLASS attribute of as many elements you wish to the same value.

•	Put the insertion point inside an element that you want to add to a class.

•	Choose Attribute Inspector from the View menu, or type F6.

•	Insert a value in the CLASS field and type Enter.

•	Repeat this for each element that you want to add to the class, using the same value for CLASS each time.

To create an ID, you set the ID attribute of one element to a unique value.

•	Put the insertion point inside the element that you want to assign an ID to.

•	Choose Attribute Inspector from the Markup menu, or type F6.

•	Insert a value in the ID field and type Enter.

Note: Class and ID attribute values must start with a letter and can contain only letters, numbers, and `-' (hyphen).


Assigning styles to classes and IDs

To create a simple style rule associating a class or ID with a set of styles:

•	Click on the Add Class/ID... button in the cascading style sheet editor.

 The Edit Simple Selector dialog box appears.

To specify a class:

•	 Enter the CLASS attribute value in the Class text box.

 The CLASS attribute will be displayed in the Element list with an initial period (`.') to indicate that it is a CLASS attribute rule and not an element rule.

To specify an ID:

•	Enter an ID attribute value in the ID text box.

 The ID will be displayed in the Element list with an initial number sign (`#') to indicate that it is an ID attribute rule.

•	Now you can use the tabbed style properties section of the CSS Editor to set style properties  for the selected class or ID.

Note: Class names and IDs that are to be used in style sheets must start with a letter and can contain only letters, numbers, and `-' (hyphen). Class names and IDs are not case-sensitive in a cascading style sheet: for example, classes called `H1b' and `h1B' are the same. A CLASS or ID rule that has no style properties associated with it will not be saved in the style sheet file.


Setting style properties

The properties section of the CSS editor dialog box (on the right, just below the Elements list) is tabbed: set style properties by clicking on the tab and moving to the appropriate section.

Click on the Font tab to edit font properties, the Text tab to edit text properties,  the Background tab to edit background properties, or the Other tab for miscellaneous properties. You can also hide parts of a document.

Many style properties have the default value inherit: this means that the value for that property will be inherited from the corresponding value (if any) for its surrounding (enclosing) element, or from the default value for that property in the browser. For example, if the font-size property of the P element were set to inherit, it would have the same font-size property as a DIV or BODY, depending on which element contained that P element.

Note: In properties where you must select a value and a unit measurement, you cannot enter any numeric values if the property is set to `inherit'. You have to choose the unit of measurement first.

Style specifications are applied immediately, when you change a property value. The changes can be seen in the sample text area next to the properties section. If you want to `reset' a style, do so manually; clicking on the Reset button reloads the entire style sheet.

  More on this topic


Font properties

Click on the Font tab of the cascading style sheet editor to edit font properties in the cascading style sheet.

In this section, you can set the following properties:

•	font-family – The fonts available on your system will be listed in the primary pull-down list. You can either choose a font from this list or type a font name (for example, Times New Roman). You can also specify a font class (such as serif). The default is inherit.

In addition to the primary font family specification, you can specify secondary font or font class specifications, which will be used if the browser viewing the file is unable to find the specified primary font family. For example, if you use the font Gill Sans as your primary font family specification, but a user is viewing your document on a PC that does not have the Gill Sans font, you may want to use a secondary specification such as sans-serif, so that even if the user is not viewing the document with the exact font that you specified, he or she is at least viewing it with a font of the same type, that is, a sans-serif font.

Make your secondary font-family choices from the New secondary pull-down list or enter them into the text box. Then click on Add... to add the secondary font families to the Secondary list. These choices are ranked by order: that is, an item higher up in the Secondary list will be used first, if it is available. You can delete an entry from this list by clicking on an entry and then clicking on the Delete button.

•	font-size – Choose a unit of measurement from the pull-down menu and enter a value for the font size. The CSS standard allows inches, centimeters, pixels, or points as units of measurement; points are usually the most appropriate unit.

•	line-height – Choose a unit of measurement from the pull-down menu and enter a value for the space between the baselines of lines of text. You can choose inches, centimeters, pixels, or points, or specify a percentage of the font size. For example, if the font size were 10 points, and the line-height value were set to 120%, the space between lines would be 12 points (120% of 10 points).

•	font-style – Choose inherit, normal, or italic from the pull-down list.

•	font-weight – The style sheet lets you set levels of font weight, so you can, in effect, make text `more bold' and `less bold'. Selecting normal uses the default weight; selecting inherit uses the same font-weight value as the containing element. Selecting lighter or bolder decreases or increases the font weight, respectively. You can also specify font weight on a numerical scale where 100 is the lightest weight and 900 is the heaviest.


Text properties

Click on the Text tab of the cascading style sheet editor to edit text properties in the cascading style sheet.

In this section, you can set the following properties:

•	margin-top, margin-right, margin-left – Set the value for the margin at the top, right, or left side of this element. (This is really only useful for `block' elements such as P.) You must first define the units for the value you enter: choose one of centimeters, inches, points or pixels from the pull-down list. If you enter a negative value, this will move the margins outward from their current setting.

•	color – Specifies the color of the text. There are three ways to specify font color:

•	Choose a pre-defined color from the pull-down list containing the standard 16 Windows colors.

•	Choose RGB from the pull-down list and enter a color in #RRGGBB format.

•	Choose a custom color by clicking on the Custom button: the Windows Color dialog appears.

•	text-indent – Sets the indent for the first line of the element. Enter a numeric value and choose the units for the value you enter. (To indent the whole element, set a value for the margin-left property.)

•	text-align (justification) – You can choose from inherit, left, center, and right.

•	text-decoration – If no box is chosen, the specification is `inherit'. You can choose underline, strikethrough, or both. If none is chosen, any previous value for underline or strikethrough is overridden.


Background properties

Click on the Background tab of the cascading style sheet editor to edit background properties in the cascading style sheet.

In this section, you can set the following properties:

•	background-color – Sets the background color for the specified selector group. There are three ways to specify background color:

•	Choose a predefined color from the pull-down list containing the standard 16 Windows colors.

•	Choose RGB from the pull-down list and enter a color in #RRGGBB format.

•	Choose a custom color by clicking on the Custom button: the Windows Color dialog appears.You can also use background-color to set a transparent background: just choose transparent from the pull-down list of colors.

•	background-image – Enter the URL for an image file that you wish to use as a background (generally, this URL is given in relative format and specifies a file in the current directory). You can also choose an image by clicking on the Browse... button.

•	background-repeat – Sets how the background image will repeat or `tile'.

•	repeat (the default): the background image will repeat indefinitely in both directions

•	repeat-x: the background will repeat horizontally only

•	repeat-y: the background image will repeat vertically only

•	no-repeat: the background image will not repeat; it will only be seen once (useful for large images)

•	background-attachment – Specifies whether the background image will scroll along with the browser window when the user scrolls, or whether it will remain fixed.

•	background-horizontal, background-vertical – You can specify the position of the background image by choosing a value for either or both of these specifications. background-horizontal can have the following values:

•	left: positions the left edge of the background image to the left side of the browser window

•	center: positions the background image in the center

•	right: positions the right edge of the background image to the right side of the browser window

•	percentage: you can specify the exact positioning of a background image by entering a percentage. 0% is the left edge of the browser window (and is equivalent to left); similarly, 100% specifies the right edge. 43%, for example, would position a background image just left of center.

•	centimeters, inches, points, or pixels: specify an exact positioning using any of these units. The background image will be positioned the specified distance from the left edge. background-vertical can have the following values:

•	top: positions the top edge of the background image at the top of the browser window

•	center: positions the background image in the center

•	bottom: positions the bottom edge of the background image at the bottom of the browser window

•	percentage: you can specify the exact positioning of a background image by entering a percentage. 0% is the top edge of the browser window (and is equivalent to top); similarly, 100% specifies the bottom edge. 75%, for example, would position a background image near the bottom.

•	centimeters, inches, points, or pixels: specify an exact positioning using any of these units. The background image will be positioned the specified distance from the top edge.


Miscellaneous properties

Click on the Other tab in the cascading style sheet editor to edit some miscellaneous properties.

This section of the cascading style sheet editor is used to:

•	Enter values for property types that are new extensions to the CSS standard.

•	Assign priorities to rules.

Extensions

The cascading style sheet standard  is continually being upgraded. Values for new property types can often be entered using the Other section of the cascading style sheet editor. In general, you can use Other to edit a property if it can be expressed in the form:

property : value

For example:

font-foundry : Gill's Font Farm

•	Click on the Other tab.

•	Enter the property (for example, `font-foundry') in the Other properties text box.

•	Enter the value in the Value text box (for example, `Gill's Font Farm').

•	Click on the Save... button in this section of the dialog box. You can delete these custom properties by clicking on the Delete button.

If an extension can't be expressed in this form (that is, it requires a different syntax), you may be able to enter it using an `@? rule'.

Priorities

If certain elements are assigned styles in more than one way (for example, in the document itself and by means of an external style sheet), you can help to resolve style conflicts by choosing priorities for important styles.

•	Click on the Other tab.

•	Select a style property from the Property pull-down list.

•	Enter a specification in the Priority text box. Entering important in this text box will make the style property you have specified more rigid and less able to be influenced by competing style specifications.

•	Optionally, enter a comment in the Comments text box.

Note: `Priority' is currently not supported by any browser.


Showing and hiding parts of a document

A style sheet can hide all instances of an HTML element, a single element instance, or all of the elements in a class. In advanced mode,  you can also create a more complex rule and hide it in a style sheet. This allows you to have subsections of documents visible or hidden in different style sheets, managing your information more effectively. If the same document will be read by different audiences with somewhat different needs, then instead of having to edit the content of your document to create different versions, you can supply the different audiences the same document, but with different style sheets linked to it.

To set a `hidden' style:

•	Choose an element, class, or ID from the Element list in simple mode, or choose a rule from the Edit Style Rules list in advanced mode.

•	Click on the Hide Contents of Element check box.

The sample text will disappear from this dialog box, indicating that the text is hidden.

Note: At the time of this writing, no browsers support this feature.


Examples of simple styles

The following sample style sheet contains three style rules that were created with the cascading style sheet editor in simple mode:

1	The first rule states that all H1 elements will have a font size of 20 points, line height of 22 points, and be displayed in green.

2	The second rule states that all elements in the class `student' (that is, all elements, of any type, whose CLASS attribute has the value `student') will be hidden.

3	The third rule states that the element with ID value `para1' will be displayed in a bold, italic font.

H1  font-size: 20pt; line-height: 22pt; color: green

.student  display: none

#para1  font-style: italic; font-weight: bold


Cascading styles: Advanced mode

Use the advanced mode of the cascading style sheet editor to:

•	Create rules that group together several element types, elements in a particular context, classes, and  IDs.

•	Assign style properties to these rules.

•	Create rules that import other style sheets, rules that specify meta-information about the style sheet, and rules that extend the capabilities of the CSS standard.

•	Re-order rules with respect to one another.

To use advanced mode, click on the More... button in the upper right corner of the cascading style sheet editor dialog box. The dialog box expands into the advanced cascading style sheet editor.

Once you have defined a selector group (the first part of a style rule), you must set a style property before creating or editing another rule, or your selector group and rule will not be saved to the style sheet file.

  More on this topic


Creating and editing advanced rules

In simple mode you can create rules that assign style properties to a single element, a class, or an ID.

In advanced mode you can create rules that assign style properties to a group of several selectors. `Selector' is a general term that refers both to simple items such as elements, and complex items such as an element in a specific context.

All of the defined rules are displayed in the Edit Style Rules list: that is, all of the selectors in that rule are displayed. This list also includes any rules that you created in simple mode.

To create a new rule (that is, assign selectors to the rule):

•	Click on the New... button.

To modify an existing rule (that is, add or delete selectors):

•	Select a rule in the the Edit Style Rules list.

•	Click on Edit....

 When you click on New... or Edit... the Edit Selectors in Rule dialog box appears.

From this dialog box you can add the following selectors to the rule:

•	An element.

•	A class or ID.

•	An element in a specific context.

•	An element in a specific class.

After you create a rule, you must specify style properties for it, or else it won't be saved when you save the style sheet.

To make a copy of an existing rule:

•	Click on a rule in the the Edit Style Rules list.

•	Click on Copy....

A copy of the rule is added to the Edit Style Rules list. The copy will, by default, have all of the style properties of the original.

To delete a rule:

•	Click on the rule in the the Edit Style Rules list.

•	Click on Delete.


Adding an element to a rule

To add an element to a rule:

•	Make sure the cascading style sheet editor is in advanced mode (click on the More... button if it's showing).

•	Click on New... to create a new rule, or select an existing rule from the Edit Style Rules list and click on Edit....

•	In the Edit Selectors in Rule dialog box that appears, select an element from the Elements list.

•	Move it into the Selectors in Rule list by clicking on Add >>.


Adding a class or ID to a rule

To add a class or ID to a rule:

•	Make sure the cascading style sheet editor is in advanced mode (click on the More... button if it's showing).

•	Click on New... to create a new rule, or select an existing rule from the Edit Style Rules list and click on Edit....

•	In the Edit Selectors in Rule dialog box that appears, click on --Class/ID-- in the Elements list.

•	Move it into the Selectors in Rule list by clicking on Add >>.

•	Click on Edit....

•	In the Edit Simple Selector dialog box that appears, enter the Class or ID that you want to add.

•	Click on OK.


Adding an element in a class to a rule

You can add an element that's in a particular class to a rule—the style properties specified for this rule will apply to the element only when it has a particular CLASS attribute value.

•	Make sure the cascading style sheet editor is in advanced mode (click on the More... button if it's showing).

•	Click on New... to create a new rule, or select an existing rule from the Edit Style Rules list and click on Edit....

•	In the Edit Selectors in Rule dialog box that appears, select an element from the Elements list.

•	Move it into the Selectors in Rule list by clicking on Add >>.

•	Click on Edit....

•	In the Edit Simple Selector dialog box that appears, enter the desired Class.

•	Click on OK.

Pseudo-classes

Another way to refine the element that you are building a style rule for is to enter a pseudo-class or pseudo-element. Pseudo-classes are not attributes, but they are characteristics of certain elements that are recognized by programs that understand the CSS standard. Currently, there are three defined pseudo-classes that work with A elements, and can be selected from the pull-down list beside the Pseudo-class text box. They are active, link, and visited, and could be used to define different styles for the A element in its unvisited, visited, and active state; for example, different colors are generally used to differentiate these different link states. Defined pseudo-classes show up in the Style rules list or Edit Selectors in Group dialog box with a colon separating the element and the pseudo-class; for example, A:active.

Pseudo-elements are used to address sub-parts of elements. For example, a pseudo-element that defines just the first letter of a paragraph has been proposed (to be used for formatting drop capitals, for example), as P:first-letter. Pseudo-elements are not currently implemented by Microsoft Internet Explorer or Netscape Navigator, but as the CSS standard evolves, more pseudo-elements will be understood by CSS-compliant programs; as this occurs, you can enter the names of newly defined pseudo-elements in the text box provided.


Adding an `element in context' to a rule

Sometimes you will want a style rule to apply to an element only when it has a particular ancestor (or ancestors). For example, you might want P within DIV to have a different style than just plain P. This kind of selector is called a contextual selector.

•	Make sure the cascading style sheet editor is in advanced mode (click on the More... button if it's showing).

•	Click on New... to create a new rule, or select an existing rule from the Edit Style Rules list and click on Edit....

•	In the Edit Selectors in Rule dialog box that appears, select the element whose context you wish to specify in the Elements list.

•	Move it into the Selectors in Rule list by clicking on the Add >>.

•	Click on Edit Context....

The Edit Contextual Selector dialog box appears.

 To specify that an element should be the ancestor of the current element (in order for the styles to apply):

•	Select the desired `ancestor' element from the Elements list on the left.

•	Click on Add Before>>.

 On the other hand, you can specify that an element should be the descendant of the current element:

•	Select the desired `descendant' element from the Elements list on the left.

•	Click on Add After>>.

You can add as many elements as are needed to this sequence of ancestors and descendants:

•	Select an element in each of the two lists.

Now:

•	Click on Add Before>> to make the element in the Elements list the ancestor of the element in the Contextual Selector list.

Or:

•	Click on Add After>> to make the element in the Elements list the descendant of the element in the Contextual Selector list.

If desired, you can further refine any element in the Contextual Selector list by clicking on Edit... and specifying a class.


Examples of advanced styles

The following sample style sheet contains three style rules that were created with the cascading style sheet editor in advanced mode.

1	The first rule states that both H5 and H6 elements will have a font size of 14 and a line height of 16.

2	The second rule states that a P element that is contained in a DIV element will be indented by 0.5 inches.

3	The third rule states that a DD element in the class `student' (that is, its CLASS attribute has the value `student') will be hidden.

H5, H6  font-size: 14pt; line-height: 16pt

DIV P  text-indent: 0.5in

DD.student  display: none


Rule ordering

You can change the order of the rules in the advanced mode by selecting a rule and then clicking on the [image] `up' or [image] `down' arrow to move it higher or lower in the list. This ordering may affect how elements are displayed in the browser. See the cascading style sheet standard for detailed discussions of rule ordering and its impact on CSS-compliant viewer software.


Importing another style sheet

You can import another style sheet and all its rules and elements into the current style sheet. This can be quite useful in many ways; for example, if you have made a `reference' style sheet for the basic styles of your project, and would like to modify only a few selected styles.

•	Make sure the cascading style sheet editor is in advanced mode (click on the Less... button if it's showing).

•	Create a new style rule by clicking on New....

•	Click on the @import radio button in the Edit Selectors in Rule dialog box. The Edit @import dialog appears.

•	Enter the URL for the imported style sheet in the URL text box, or click on Browse... to select it.

•	Optionally, enter comments about this imported style sheet in the Comments text box provided.


Adding meta-information

A SoftQuad extension to cascading style sheets lets you enter information for keeping track of style sheets, versions of style sheets, etc. These `rules' are informational only and don't affect how the browser displays documents.

 To enter meta-information:

•	Make sure the cascading style sheet editor is in advanced mode (click on the Less... button if it's showing).

•	Create a new style rule by clicking on New....

•	Click on the @meta radio button in the Edit Selectors in Rule dialog box. The Edit @meta dialog appears.

•	Enter the name of a particular kind of information you want to enter in the Name text box, or select one from the pull-down list.

•	Enter the value for that piece of information in the Value text box.

•	Optionally, enter a comment in the Comments text box.

•	Optionally, enter comments on the entire `@meta rule' in the General comments text box.


Extensions to the cascading style sheet standard

The cascading style sheet standard  is continually being upgraded. Values for new property types can often be entered using the Other section  of the cascading style sheet editor. In general, you can use Other to edit a property if it can be expressed in the form:

property : value

For example:

font-foundry : Gill's Font Farm

If an extension can't be expressed in this form (that is, it requires a different syntax), you may be able to enter it using an `@? rule':

•	Make sure the cascading style sheet editor is in advanced mode (click on the More... button if it's showing).

•	Create a new style rule by clicking on New....

•	Click on the @rule radio button in the Edit Selectors in Rule dialog box. The Edit @? dialog appears.

•	This dialog box contains a plain text box where text of any kind can be added. Enter the new rule in this text box. The text you enter will be written into the style sheet exactly as you typed it.


Visual Dynamic Keyboard

What's covered in this chapter

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The Visual Dynamic Keyboard (VDK) is an on-screen keyboard that lets users enter text, select commands, activate dialog box controls, etc., without using the regular keyboard and mouse. It appears on-screen in a resizable window, as a keyboard with rectangular keys. The VDK provides greater accessibility to Windows applications to users with physical impairments. The VDK also has additional support for the HoTMetaL PRO Editor. Using the VDK, users can work with applications using alternative access methods: automatic scanning, inverse scanning, direct-dwell selection, direct-click selection, and five-switch directed input.

This chapter includes the following topics:

•	Descriptions of the keyboard structure and the various keyboards included with the VDK.

•	Methods of navigating and selecting with the VDK.

•	Hardware settings and other options.

Please see the following topics for more information:

•	Overview of the VDK

•	Supported applications

•	Overview of the VDK

•	Types of keyboards

•	Operating the VDK

•	Turning the VDK on and off

•	Mouse pointer

•	Moving around in a dialog box

•	User setup files

•	Limitations of the VDK

•	Keyboards

•	Keyboards

•	Color scheme

•	Main keyboard

•	Alphanumeric keyboard

•	Toolbar keyboards

•	Menu keyboards

•	The Desktop Manager

•	Special Keyboards

•	Special keyboards

•	Frame Editor Keyboard

•	Special Characters keyboard

•	Text Color keyboard

•	VDK Selection Methods

•	VDK Selection Methods

•	Direct-Click selection

•	Direct-Dwell selection

•	Automatic scanning

•	Inverse scanning

•	Five-Switch directed scanning

•	VDK Settings

•	VDK Settings

•	Key Size

•	Key Spacing

•	Title Bar

•	Sound

  More on this topic


Overview

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The VDK appears in its own window at the bottom of the application window. It will automatically center itself at the bottom of the window, though you can  customize its position.  The VDK window always remains on top of the other application windows.

  More on this topic


Supported applications

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The VDK is most closely coupled with the HoTMetaL PRO Editor. In addition to supporting the HoTMetaL PRO menu commands, it provides explicit support for the HoTMetaL PRO toolbars, the frame editor, table editor, and other special HTML editing functionality.

The VDK also provides support for other Windows applications, including the other components of HoTMetaL PRO. It can generally provide the following support for Windows applications:

•	Access to menu commands.

•	Dialog box navigation.

•	Text entry, navigation, and editing.

•	Window and dialog resizing.

•	Windows task management.

The VDK will support toolbars in applications that provide toolbar information using Microsoft Active Accessibility, such as MS Office 97. Special editing capabilities of applications other than the HoTMetaL PRO Editor are not supported by the VDK.


Turning the VDK on and off

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

To turn the VDK on or off:

•	 Choose Visual Dynamic Keyboard... from the HoTMetaL PRO Editor Tools  menu, or press Ctrl+T.

 The VDK Settings dialog box appears. The VDK Settings dialog box is divided into sections, in a tabbed `cardfile' style. To choose a section, click on the desired tab.

•	 Choose the VDK tab, if it is not already displayed.

•	 Turn on the VDK On check box to enable the VDK. The VDK will not appear until you click on the Apply or OK button at the bottom of the dialog box. Deselect the VDK On check box to turn off the VDK.

•	 Click on OK to accept the setting.


Types of keyboards

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The VDK actually consists of several different on-screen keyboards; only one keyboard can be visible at a time, but each keyboard has keys that let you navigate to the other keyboards. The types of keyboards are:

•	Main keyboard – Provides basic page and dialog box navigation

•	Menu keyboards – Correspond to the application menus

•	Toolbar keyboards – Correspond to the application toolbars

•	Alphanumeric keyboards – Keyboards for text entry

•	Desktop Manager Keyboard – A keyboard for changing the position and size of the VDK or application window, and switching between tasks

•	Special editing keyboards– Special keyboards for carrying out editing tasks in the HoTMetaL PRO Editor: editing tables, editing frames, setting document colors, etc.


Operating the VDK

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The VDK can be operated with:

•	A regular mouse.

•	Another pointing device, such as a HeadMouse™, Trakker™, HeadMaster™ or a trackball.

•	One, two or five switches attached through a switch interface.

•	A standard joystick.

Depending on the requirements of the user, keys on the VDK keyboards can be selected in five ways:

•	Direct-click selection – A key is selected by clicking on it with a mouse, or pointing to it with an alternative pointing device and hitting a switch

•	Direct-dwell selection – A key is selected by holding the mouse pointer over it for a certain length of time using a mouse or alternative pointing device

•	Automatic scanning – The VDK highlights rows and columns in the keyboard; the user signals with a switch when the row and column containing the desired key is selected

•	Inverse scanning – A variation on automatic scanning. The user starts and stops scanning by pressing and releasing a switch

•	Five-switch directed scanning – The user navigates through a keyboard using a joystick


Hardware settings

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The Hardware Settings tab of the VDK Settings dialog box contains three choices of input methods.

•	Mouse – A standard mouse or a mouse-like input device such as a HeadMouse™. This selection is for devices that connect through the the mouse port or mouse serial port.

•	Serial Switches – This supports the use of the HandiWARE™ 3-switch serial input device `HW-003 COM (9-pin) Port Connector with RJ-11'. This device can be used with the automatic and inverse VDK scanning methods.

•	Game Port Joystick – Allows the use of a standard joystick or game pad for controlling the five-switch directed method.

If you wish to design a custom joystick selection device, you will need to use the following joystick specifications:

x-axis<21845 LEFT
x-axis>43960 RIGHT
y-axis>21845 UP
y-axis<43960 DOWN
Button 1 = SWITCH1
Button 2 = SWITCH2

Note: Parallel port hardware devices are not supported at this time.


Terminology

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

Because many different devices can be used to operate the VDK, we have used common terms such as `select', `type', and `click on' when referring to actions performed with the VDK. All of the actions referred to in this documentation can be performed from the VDK using any of the devices listed above.


Mouse pointer

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

As the `mouse' pointer moves over the VDK, it will change shape to indicate that keys may be selected. If you are using one of the `scanning' selection methods, the VDK cannot be activated unless the mouse pointer is within the VDK window.

Mouse pointer


Moving around in a dialog box

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

Dialog boxes generally contain several controls—buttons, groups of related buttons, text boxes, lists, sliders and so forth.

At any time, one control in a dialog box has focus: this means that an action you perform at the keyboard will affect that control. For example, if a text box has focus, any text that you type appears in that box; if a check box has focus, pressing Space will turn that check box on or off; if a slider has focus, the arrow keys change the values. Which control has focus is indicated in a number of ways:

•	If a list of files, list box, drop-down list has focus, the current item in the list is highlighted.

•	If a button or check box has focus, its label will be surrounded by a dotted rectangle.

•	If a group of radio buttons has focus, the label of the one that's turned on will be surrounded by a dotted rectangle.

•	If a text box has focus, it will contain the insertion point (a vertical bar that pulses on and off).

•	If a slider has focus, a dotted rectangle surrounds the slide control.

In addition, each dialog box usually has a highlighted button, that is, a button with a solid, dark border. Typing Enter is equivalent to clicking on that button. A button can both be highlighted and have focus. The rule is: if a button has focus, then it will be highlighted also; if some other control has focus, then the default button will be highlighted. (Each dialog box has a particular button designated as the default: for example, in the VDK Settings dialog box, the VDK On check box is the default.)

You can use the regular keyboard or the Visual Dynamic Keyboard, rather than the mouse, to move between the controls in a dialog box. When you move to a particular control, it gets focus.

•	Type Tab repeatedly to move forward (left to right, top to bottom) through the buttons.

•	Type Shift+Tab repeatedly to move backward (right to left, bottom to top) through the buttons.

•	Type Ctrl+Tab repeatedly to move through the tabs in a tabbed dialog box.

When a particular control has focus or is highlighted, you can use the keyboard or VDK to toggle between the choices of that control.

•	Type Enter to choose a highlighted button.

•	If a check box has focus, type Space to turn it on or off.

•	If a group of radio buttons has focus, use the arrow keys to change which button in the group is turned on.

•	If a scrollable list has focus, use the arrow keys to move up and down in the list.

•	If a drop-down list has focus, use the arrow keys to scroll through the values in the list.

•	If a list of file names has focus, use the arrow keys to move from file to file.


User setup files

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

You can configure the appearance and selection method of the VDK to suit your requirements. This configuration (setup) can be saved to a file and reloaded later. This is useful if different users, with different VDK requirements, will be using the same PC. You are prompted to save your setup after you have made any changes.

To save your VDK setup:

•	Choose Visual Dynamic Keyboard... from the Tools menu. The VDK Settings dialog box appears.

•	Click on the VDK tab, if it is not already selected.

•	Click on Save Current Setup. The Save Current Setup dialog appears.

•	 Enter the file folder and name in which to save the setup.

•	Click on Save.

When you load the VDK, the previous user setup is automatically used. To load a different user setup:

•	Choose Visual Dynamic Keyboard... from the Tools menu. The VDK Settings dialog box appears.

•	Click on the VDK tab if it is not already selected.

•	Click on Open Existing Setup. The Open Existing Setup dialog appears.

•	 Enter the name of the file and folder containing the saved setup.

•	Click on Open.

•	Click on OK in the VDK Settings dialog box. (The loaded setup will not take effect until you do so.)


Using macros and the VDK

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

Some of the VDK's operations rely on the HoTMetaL PRO Editor's built-in keyboard shortcuts (hot keys). Therefore, if you record custom macros you must not assign any of the built-in shortcuts to a new macro; if you do so, the VDK may perform unexpectedly. Note that the HoTMetaL PRO Editor will not warn you if you do this. The following keyboard shortcuts should not be reassigned:

F1	Ctrl+F	Ctrl+P	Ctrl+Y	Ctrl+Shift+Tab
F7	Ctrl+G	Ctrl+R	Ctrl+Z	Ctrl+Shift+A
Alt+F4	Ctrl+I	Ctrl+S	Ctrl+Tab	Ctrl+Shift+B
Alt+F6	Ctrl+K	Ctrl+T	Ctrl+F4	Ctrl+Shift+T
Ctrl+B	Ctrl+L	Ctrl+U	Ctrl+F6	Ctrl+Shift+.
Ctrl+C	Ctrl+M	Ctrl+V	Ctrl+F11	Ctrl+Shift+,
Ctrl+D	Ctrl+N	Ctrl+W	Ctrl+F12
Ctrl+E	Ctrl+O	Ctrl+X	Ctrl+Shift+F6


The keyboard structure

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

There are many different VDK keyboards, including some that are specifically for use within the HoTMetaL PRO Editor. There are five principal keyboards:

•	Main – The Main keyboard .

•	ABC – Alphanumeric keyboards for text entry .

•	Toolbars – a keyboard for accessing the keyboards that correspond to the HoTMetaL PRO Editor toolbars .

•	Menus – a keyboard for accessing the application menus .

•	Desktop Manager – a keyboard that branches to other keyboards that let you resize and reposition the VDK and application windows, and switch between running tasks

The Main keyboard is the central keyboard of the VDK; the other keyboards `branch out' from this keyboard. There can be several levels of branching: for example, starting at the Main keyboard, you can display the Toolbars keyboard, from there the Quick Tools keyboard, and from there the Special Characters keyboard. The hierarchy and layout of the VDK keyboards reflect the organization of the toolbars and menus within the HoTMetaL PRO Editor. To move from one keyboard to another, select the key with the name of the keyboard. You can also select the Back key to move back to the previous keyboard.

  More on this topic


Color scheme

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

A color code is used to group together keys having similar function.

•	Yellow letters on blue – Usually used for keys comprising the main functionality of the keyboards. (for example, letters/numbers, menu items, toolbar button equivalents)

•	White letters on black – Usually indicates that the key branches to one of four main Keyboards; Main, Toolbars, Menus, and ABC.

•	White letters on teal – Special keys that have an impact on the next key selection. For example, the Caps key in the alphanumeric keyboard toggles between uppercase and lowercase letters in that keyboard.


Common VDK keys

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

Keys common to many keyboards include:

•	Back – Displays the previous keyboard.

•	Main – Displays the Main keyboard.

•	ABC – Displays an alphanumeric keyboard for text entry.

•	Toolbars – Lets you choose one of the four keyboards that correspond to a HoTMetaL PRO Editor toolbar.

•	Menus – Lets you choose one of the keyboards that correspond to an application menu.

•	BackSpc or BSpc – Backspace.

•	Space or Spc – Space key.

•	Repeat or Rept – Repeat key. Pressing this key will cause the action of the last key used to be repeated over and over again until a switch is pressed. The repeat rate is equal to the user-defined scanning speed.


Main keyboard

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The Main keyboard is the first keyboard to appear after the VDK is activated. It provides basic page and dialog box navigation. The arrow keys move the cursor around the work area. The right column consists of keys that display the ABC (alphanumeric) keyboards, the Menu keyboard, and the Toolbars keyboard. Clicking on the Navigate/Edit key displays the Navigate/Edit keyboard, which contains basic editing functions.

Click on Focus to switch between all of the active and inactive areas within the application (for example, dialog boxes, VDK, windows).

Main keyboard


Navigate/Edit keyboard

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

From the Main keyboard, you can switch to the Navigate/Edit keyboard, which contains all the features of the main keyboard as well as access to common editing commands (Cut, Undo, etc.), and the following navigation and highlighting keys:

•	Select Element – Highlights the element containing the current selection or insertion point.

•	Hilite Word L – Highlights to the beginning of the first word to the left of the insertion point.

•	Hilite Word R – Highlights to the end of the first word to the right of the insertion point.

•	Hilite Char L – Highlights the character to the left to the insertion point.

•	Hilite Char R – Highlights one character to the right to the current cursor position.

•	Hilite Line Up – Highlights from the beginning of a selection or insertion point up one line.

•	Hilite Line Dn – Highlights from the end of a selection or insertion point down one line.

Note: Because selections across HTML tags are automatically `balanced' to include the start- and end-tag in the HoTMetaL PRO Editor, these selection keys can result in whole elements being selected when used in the Tags On and WYSIWYG views.


Alphanumeric keyboards

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

There are four alphanumeric keyboards that are determined by your personal preference and the selection method you're using.

To choose an Alphanumeric keyboard:

•	Choose Visual Dynamic Keyboard... from the Tools menu. The VDK Settings dialog box appears.

•	Choose the Selection Method tab.

•	Make a selection from the Alphanumeric Keyboard Layout list box.

•	Click on OK for your selection to take effect.

 The following alphanumeric keyboards are available:

•	 QWERTY – An on-screen version of a standard US-English 101-key computer keyboard.

•	ABC123 – A keyboard with letters arranged alphabetically in two rows.

•	Frequency of use: the keyboard that appears when you make this choice depends on the current selection method. If you are using Direct-click, Direct-dwell, or Five-switch directed scanning, the Center-weighted keyboard appears when you choose a frequency of use keyboard. This keyboard is organized by frequency of use, with the most common keys located in the center of the keyboard.

Center-Weighted keyboard

If you are using Automatic Scanning or Inverse Scanning, the Upper-left-weighted keyboard appears when you choose a frequency of use keyboard. This keyboard is also organized by frequency of use, with the most common keys located in the upper left corner of the keyboard.

Upper-Left-Weighted keyboard

  More on this topic


Modifier keys

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

Modifier keys do not send keystrokes on their own. Instead, they affect the key(s) that are pressed next in sequence. When a modifier key is first selected (for example, Ctrl), two white horizontal bars appear around the key. The next character key selected (for example, A) will send the key sequence (Ctrl + A), rather than a series of key entries. The modifier is then automatically reset or deselected. Modifiers can be locked by selecting them twice. A locked modifier is indicated by a red rectangle. You can unlock a modifier by selecting the key again.

The following keys are modifier keys:

•	Shift

•	Ctrl

•	Alt

•	Caps

•	Num

•	Scrl

The appearance of the VDK keyboards is affected by the Shift and Caps modifiers. For example, if an alphabetic layout is displayed when the Shift modifier key is selected, the keys appears shifted. An `a' appears as an `A'.

This is how the keyboard appears when the Shift key is off:

`Shift' modifier key off

Now the Shift key is turned on:

`Shift' modifier key on


Function keys

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The QWERTY keyboard contains rows of function keys (F1 through F12), similar to those found on a physical keyboard. To use function keys from the ABC123 (alphabetical order) and frequency of use keyboards, click on the Fn key. This brings up a separate keyboard that contains the function keys.


Toolbar keyboards

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

When the HoTMetaL PRO Editor is active, the VDK provides toolbar keyboards based on the Editor keyboards. The keys on these keyboards correspond to the toolbar buttons, although in some cases the order has been changed for ease-of-use. Just as in the application, some functionality is available from both the toolbars and the menus.

The Tables Toolbar and Image Mapping Toolbar keyboards contain additional navigational keys, as well as keys that correspond to the toolbar buttons. This additional keys are necessary to duplicate the functionality of these toolbars from the VDK.

Clicking on some toolbar keys displays a special editing keyboard that helps to carry out the task associated with that key.  for more information. If a toolbar button brings up a dialog box, the VDK will either display one of these special editing keyboards, or it will revert to the Main keyboard to facilitate dialog box navigation. This functionality is not available when you choose commands from the menu keyboards.

The following toolbar keyboards are available:

•	Standard Toolbar – This keyboard contains general file, search, and viewing options.

•	Quick Tools – This keyboard contains keys for inserting common HTML markup such as headers, text formatting, and text alignment.

•	Formatting Toolbar – This toolbar contains keys for applying text format options, and keys for inserting numbered and bulleted lists. The Style Element key brings up the Quick Tools keyboard.

•	Browser Toolbar – If you have set up one or more browsers to preview Web pages, the keys on this keyboard can be used to open the current document in a browser.

•	 Advanced Toolbar – This toolbar contains keys to insert an ActiveX™ control, Java applet, or Design Time Control.

•	Tables Toolbar – Some keys on this keyboard correspond to the HTML table editing toolbar buttons; others aid in navigation.

•	Forms Toolbar – The keys on this keyboard correspond to the HTML forms editing toolbar buttons.

•	Macros Toolbar – The keys on this keyboard start and stop macro recording, and run macros.

•	Image Mapping Toolbar – Some keys on this keyboard correspond to the Editor Image Mapping toolbar buttons; others are used to size and place these graphical objects. To map an image using the VDK, first change to Tags On view, select the image, and then select the Select Mode key from the Image Mapping Toolbar.

  More on this topic


Inserting elements from the toolbars

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The toolbar menus contain many keys that insert a specific element; for example, the Paragraph Text key in the Quick Tools keyboard will insert a P (paragraph) element. If the document contains some highlighted text when you insert an element, the element will surround that text if the HTML rules allow it. In some cases, the element that you choose will be substituted for the current element.

 Unlike the buttons in the HoTMetaL PRO Editor toolbars, the keys in the VDK toolbar keyboards will not be disabled (grayed-out) if they would perform an invalid action. If you click on one of these keys, you will get a warning message from the HoTMetaL PRO Editor, informing you that if you proceed, the markup will be invalid. (A quick way to tell if a key will perform a legal action is to check whether or not the corresponding toolbar button is grayed-out.)

The toolbar keyboards also contain keys that give you quick access to common HoTMetaL PRO Editor commands for inserting markup:

•	The Insert Element key on the Standard Toolbar brings up a dialog box containing a list of all elements that can validly be inserted at the current insertion point or selection.

•	The Element Style key on the Formatting Toolbar brings up the Quick Tools keyboard, which contains the most common elements.


Menu keyboards

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The VDK contains keyboards for all menus so that you do not have to use the application menus directly. The menu keyboards reflect the structure of the current application. For example, using the VDK with the HoTMetaL PRO Editor creates keyboards that reflect the menu bar: File, Edit, View, Insert, Format, Tools, Table, Form, Window, and Help. These keyboards are created dynamically so that only menu functions available at the time appear as keys in the keyboard. Menu items that are grayed out in the regular menus will be completely absent from the VDK menu keyboards.

Choosing a command from one of the menu keyboards is equivalent to choosing it from one of the application menus: no special keyboards will be displayed, and the VDK will not revert to the Main keyboard if a dialog box is displayed. That functionality is available only if you choose a command from one of the toolbar keyboards.


The Desktop Manager keyboard

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The Desktop Manager is displayed by clicking on Desktop Manager in the Main keyboard. This keyboard branches to three other keyboards that let you resize and reposition the VDK and application windows, control the mouse from a keyboard, and switch between running tasks:

•	VDK Window keyboard – Lets you resize and reposition the VDK window.

•	Other Window keyboard – Lets you resize and reposition the window or dialog box that has focus in the current application. Note in particular the following keys:

•	Restore – Restores the current window or dialog box to its previous dimensions.

•	Focus – Changes the VDK focus within an application (for example, you can move the focus from a dialog box to a document window).

•	Close Window – Closes the current window or dialog box.

•	Autoposition – Positions the currently active window or dialog box above the VDK.

•	Mouse Control keyboard – Lets you turn on and use mouse control to position the cursor anywhere on the desktop. You may find this useful for some applications that do not include all tasks on the command menus.

•	Task Manager keyboard – Displays the Task Manager keyboard, from which you can choose any running task.


Mouse Control keyboard

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The Mouse Control keyboard can be used to emulate a mouse and control cursor movement. It can be used with all of the selection methods except the Direct-click method (the Direct-click method should be used with a mouse or fully functional mouse emulator).

You can control mouse movement from the Mouse Control keyboard in the following ways:

•	Direct-dwell selection – Select a mouse action (for example, left-click) from the Mouse Control keyboard and then move to the location where you want to perform the action. To perform the action, dwell on that location. The action can be repeated by dwelling again and is only reset by returning to the keyboard.

•	Automatic scanning or Inverse scanning – Scan to select mouse actions from the keyboard. Repeating actions, such as mouse-up, are cancelled by clicking the switch.

•	Five-switch directed scanning – This method works best with the mouse control keyboard: any five-switch input device can be used to fully emulate a mouse. Four switches direct the cursor up, down, left, and right; the fifth switch acts like a left mouse button. If this method is used with a joystick, the joystick moves the cursor in any direction, the fist joystick button returns joystick control to the keyboard, and the second joystick button acts like a left mouse button.


Special editing keyboards

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The VDK has several keyboards that are used for special editing functions in HoTMetaL PRO:

•	Frame Editor keyboard

•	Special Characters keyboard

•	Text Color keyboard

These keyboards are displayed from the Toolbar keyboards only; if you choose any of these commands from the Menus keyboard, only the corresponding dialog box is displayed. For example, to display the Frame Editor keyboard, click on Frame Editor in the Standard Toolbar keyboard. This displays the frame editor dialog and the Frame Editor keyboard (if you choose Frame Editor from the Tools Menu keyboard, only the frame editor dialog will be displayed).

The Image Mapping Toolbar and Tables Toolbar keyboards also include special navigational functions.

  More on this topic


Frame Editor keyboard

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The Frame Editor keyboard is used to operate the frames editor in HoTMetaL PRO Editor. Before the frames editor can be launched, the document must contain a FRAMESET; click on Convert to Frames in the Tools Menu keyboard if the document does not already have a FRAMESET.

Frame Editor keyboard

The frame editor dialog box has two sections: a controls section in the top half of the dialog, and a graphical frames section in the bottom half. The graphical frames section contains a graphical representation of one or more frames. One frame will be active at all times; the controls in the controls section will apply to the active frame.

You can navigate through the control section using the usual keys such as Space, Tab, and the arrow keys. To move around in the graphical frames section you have to use two special keys in the Frame Editor keyboard: Next Frame and Prev Frame.

To make a frame active:

•	Give focus to the graphical frames section by moving to it with the Tab or Shift+Tab key.

•	Move to the desired frame by clicking repeatedly on the Next Frame key (to move to the right and down), or Prev Frame key (to move to the left and up).

To perform an action on the active frame:

•	Use Tab or Shift+Tab to navigate to the desired control (for example, the [image] button). The active frame stays active, even when you move to a different control.

•	Apply the selected control.

It is not possible to select and drag a frame border from the VDK, but you can resize a frame using the following steps:

•	Make the frame active.

•	Move to the Size text field.

•	Enter the desired size.

•	Type Enter.


Special Characters keyboard

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The Special Characters keyboard is equivalent to the HoTMetaL PRO Editor Special Characters... command. To display this keyboard, click on the Special Char key in the Quick Tools toolbar keyboard. Choosing Special Characters from the Insert menu displays the regular Special Characters palette, which is not accessible from the VDK.


Text Color keyboard

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

To display this keyboard, click on the Text Color key in the Formatting Toolbar keyboard. The Text Color keyboard has a limited palette of eight colors for quick ease of use.

Clicking on the Other... key in this keyboard brings up the standard Windows Color dialog box (you can also display this color chooser by clicking on Text Color in the Format Menu keyboard). The Windows color chooser can be operated from the VDK.

To choose a color:

•	Move to the color palette using Tab or Shift+Tab.

•	Move to the desired color using the direction (arrow) keys.

•	Type Space to select the color.

•	Type Enter to apply your choice.

You can also click on Define Custom Colors and define a color in the custom color chooser.

Text Color keyboard


VDK selection methods

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The Selection Method tab of the VDK Settings dialog is used to choose one of the methods available for making selections using the VDK. You may wish to try several of the methods to determine which is best suited to your specific needs and hardware. The following section describes the advantages of each of the following:

•	Direct-click selection

•	Direct-dwell selection

•	Automatic scanning

•	Inverse scanning

•	Five-switch directed scanning

To change the method of selecting keys on the VDK keyboard:

•	Choose Visual Dynamic Keyboard... from the Tools menu. The VDK Settings dialog box appears.

•	Click on the Selection Method tab, if it is not already selected.

•	Make a choice from the Selection Method drop-down list.

•	The middle part of the dialog box changes depending on which selection method you choose. Use this section to set various parameters, as described in the sections below on the different selection methods.

•	Click on the OK button when done.

This dialog also lets you choose the Alphanumeric keyboard layout.

  More on this topic


Direct-click selection

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

Direct-click selection is an access method useful for users who can move the mouse pointer more effectively than they can input text from a keyboard. This access method is often used with a headpointer or trackball.

With this selection method a keyboard is displayed on-screen and you can select any key by pointing to the key with the mouse cursor and then selecting it with a mouse button or a switch input.

Switch delay

This controls the length of time that you have to click on a key in order for the click to be regarded as `intentional'. This is useful for users who tend to accidentally activate a switch or button, or activate it more than the intended number of times. The switch must be held down past the switch delay threshold in order for the key to be activated. There is no switch delay after a repeating key is selected. Switch delay values can be between 0 (none) and 25, inclusive. These values are relative, and do not correspond to a specific unit of time.


Direct-dwell selection

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

Direct-dwell selection is useful for users who can move the mouse pointer but have difficulty performing a mouse click. Using this selection method, you can select any key on the current VDK keyboard by moving the mouse pointer over the desired key and keeping it there for a certain length of time (called the dwell time).

Dwell time

After selecting the slider the left arrow key decreases the dwell time and the right arrow key increases the dwell time. This adjusts the length of time the mouse cursor must stay on the key before a selection occurs. The dwell time can be between 1 and 99, inclusive.

The square labeled Test Area lets you test the dwell time. Simply move the pointer over the square and the color will change to indicate when the dwell time has been used up. Moving the pointer off the Test Area will reset the timer.

To quickly increase (or decrease) the dwell time, hold down Alt+D, or click on the slide control, and hold down the right (or left) right arrow key.

Note: The underlined `D' in Dwell Time indicates that it can be used in this way.


Automatic scanning

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

Automatic scanning involves selecting a key by first selecting the row that contains that key on the keyboard, and then selecting the key (column) within the selected row.

The VDK will highlight each row in succession, starting at the top row. When the highlight is on the desired row, press switch 1 or the left mouse button. Once this button is pressed, the leftmost key square of this row will be highlighted. This highlight will move along the row from left to right; when the desired key is highlighted, press switch 1 or the left mouse button to select the key.

This selection method is useful for users who can accurately time the activation of a single switch.

Row scanning

If you select a row unintentionally, or for some other reason decide that you want to select a different row, there are two things you can do:

•	You can press switch 2 or the right mouse button to `reset' the scanning. The highlighting will begin again on the top row.

•	If you don't select a key, the highlighting will stop automatically after a certain number of cycles from left to right along the row. When this happens, press either of switch 1 or switch 2 to restart the highlighting at the top row. (The number of cycles that occur before the scanning process stops can be adjusted in the VDK Settings dialog box).

Column scanning

Scanning speed

This adjusts the rate at which the highlighting advances over rows and columns. The higher the value, the faster the scanning. The scan speed can be between 1 and 99, inclusive.

Initial scanning delay

The `initial scanning delay' occurs both when the top row is highlighted and when the first key in a row is highlighted. This delay makes it easier to select the first row or the first item in a row. The initial scanning speed can be between 1 and 25, inclusive.

Cycles to repeat

This sets a maximum number of cycles to be repeated. A cycle is the advancement of the highlight bar from the first to the last row or from the first to the last column. When a row is selected, the cycle counter is reset to allow the same number of possible cycles for column selection.

The number of cycles to be repeated can be between 1 and 7, inclusive. Two or three repeat cycles are enough for most users. It is strongly recommended that this setting stay below five cycles.

This limit on the number of cycles is especially useful when a row has been selected unintentionally. Waiting for the repeat cycles to finish notifies the VDK that this row is not wanted. When the cycles are complete, the VDK will `rest' until a switch is clicked again to restart row scanning.

Switch delay

This controls the length of time that you have to click on a key in order for the click to be regarded as `intentional'. This is useful for users who tend to accidentally activate a switch or button, or activate it more than the intended number of times. There is no switch delay after a repeating key is selected. The switch delay can be between 0 (none) and 25, inclusive. These values are relative, and do not correspond to a specific unit of time.


Inverse scanning

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

This selection method is useful for users who have difficulty pressing a switch at an exact moment in time.

Inverse scanning is similar to automatic scanning, because it uses row-column scanning to specify a key selection. The main difference is that scanning (moving the highlight down rows or across columns) proceeds only when you keep switch 1 pressed down. To stop the highlight movement when the desired row or column is reached, release the switch. To make a selection, press and release switch 2. If you want to continue scanning without making a selection, press and hold switch 1 again.

Scanning speed

This adjusts the rate at which the highlighting advances over rows and columns. The higher the value, the faster the scanning. The scanning speed can be between 1 and 99, inclusive.

Switch delay

This parameter is for the right mouse button or switch 2 only. It controls the point at which a switch activation is regarded as `intentional.' It is useful for users who tend to accidentally activate a switch or button, or activate it more than the intended number of times. There is no switch delay after a repeating key is selected. The switch delay can be between 1 and 25, inclusive. These values do not correspond to a specific unit of time.


Five-switch directed scanning

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

With this selection method, you move a highlight around the VDK keys (square by square) and then select the highlighted key. This method can be used with a joystick that has four direction switches and a selection switch. Pressing one of the direction switches moves the highlight up, down, left, or right; the fifth switch makes the selection. Holding down one of the direction switches results in continuous movement in that direction.

This selection method works only with a joystick; choosing this method automatically selects the Game Port Joystick hardware setting.

Scanning speed

This adjusts the rate at which the highlighting advances over rows and columns. The higher the value, the faster the scanning. The scanning speed can be between 1 and 99, inclusive.

Switch delay

This parameter is for the selection switch and not for the directional switches. This controls the point at which a switch activation is regarded as `intentional.' It is useful for users who tend to accidentally activate a switch or button, or activate it more than the intended number of times. There is no switch delay after a repeating key is selected. The switch delay can be between 1 and 25, inclusive.


VDK settings

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The Settings tab of the VDK Settings dialog box is used to make changes to how the VDK looks and responds, including the size and spacing of keys on the VDK keyboards.

VDK settings

Using this dialog box, you can change the following VDK settings:

•	Key size

•	Key spacing

•	Sound

•	Title bar

  More on this topic


Key size

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

All keyboards in the VDK use the same key-unit size. Changing the key size will therefore change the size of all keyboards.

There are two ways to change the key size:

1	You can use the key size control in the VDK Settings dialog box.

•	Choose Visual Dynamic Keyboard... from the Tools menu. The VDK Settings dialog box appears.

•	Click on the Settings tab.

•	Use the two sliders to change the dimensions of the keys. Sliders can be changed by tabbing to them and using the up and down arrows to change height; and the right and left arrows to change width. A preview of the key size appears in the dialog box, and it will change size as you move the sliders.

•	Click on OK to make the new key size take effect.

2	You can also resize the keyboard manually: this changes the key size and will affect all other keyboards.

•	Move the mouse cursor over an edge or corner of the VDK until the cursor changes into a two-headed arrow.

•	Click and drag to resize the keyboard.

•	Release the mouse when you have the desired size.

Control for changing the key size


Key spacing

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The keys on the VDK can be spaced apart. You may find that spacing between keys can make the keys easier to identify and select. Changing the key spacing affects all keyboards in the VDK.

To adjust the key spacing:

•	Choose Visual Dynamic Keyboard... from the Tools menu. The VDK Settings dialog box appears.

•	Click on the Settings tab if it is not already selected.

•	Use the key spacing slider to increase or decrease the key spacing. The slider can be tabbed to and changed using the right and left arrow keys. A preview of the key spacing appears in the dialog box.

•	Click on OK to make the key spacing take effect.

Control for changing the key spacing


Sound

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The VDK  can make a sound as each key is selected.

To turn the sound on or off:

•	Choose Visual Dynamic Keyboard... from the Tools menu. The VDK Settings dialog box appears.

•	Select the Settings tab if it is not already selected.

•	Click on the Sound check box to toggle the VDK sound on or off. A check mark in the Sound check box indicates the sound is turned on.

•	Click on OK to make the change take effect.


Keyboard title

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

Each keyboard in the VDK has a title that can be displayed along the bottom of the VDK window.

To turn the keyboard title on or off:

•	Choose Visual Dynamic Keyboard... from the Tools menu. The VDK Settings dialog box appears.

•	Click on the Settings tab if it is not already selected.

•	Select the Title check box to turn the VDK title on or off. A check mark in the title check box indicates that the title is turned on.

•	Click on OK to make the change take effect.

Keyboard titles are turned on by default. As you become more familiar with the keyboard layouts, you may wish to turn the title off and save some screen space.


Using macros

A macro is a set of actions associated with a keyboard accelerator (also called a keyboard shortcut or hot key). The macro facility in the HoTMetaL PRO Editor can be used to define your own macros. This is particularly useful when you have to carry out some repetitive task that doesn't have a built-in accelerator or command.

You can save your macros in one or more files and load them as needed.

 Macros are not associated with a specific document, so any macros you load will be available for use with all documents that you edit.

Macros can be associated with text and/or elements to be inserted in a document, a single command, or a complex series of commands. Some actions that you can perform with macros are:

•	Insert an element that doesn't have a toolbar button associated with it.

•	Set an attribute or property in several elements. For example, if you wanted to set the background color to `green' for several table cells that weren't in the same row or column, you could create a macro that set a cell's background to green, then navigate to each cell, re-running the macro each time. This would be faster than setting the background `manually' each time.

•	Insert a piece of text that is used repeatedly.

•	Create a keyboard shortcut for a command that doesn't have a built-in shortcut, subject to certain restrictions.

  More on this topic


Creating macros

 To record a macro:

•	Choose Record New Macro from the Tools menu or click on the [image]  toolbar button. This starts macro recording. The command will then toggle to Stop Recording... and the status bar will read Recording macro.

•	Enter the sequence of actions that you want the macro to carry out. These actions will not only be recorded, they will also be applied to the current document as you perform them. There are some restrictions on what can go into a macro.

•	When you're finished, choose Stop Recording... in the Tools menu or click on the [image] toolbar button. This command ends the macro.

Now you will get a dialog box that lets you select a descriptive name and an accelerator for the macro. The accelerator is the sequence of keystrokes that will run the macro.

An accelerator can consist of any choice from the Key list (a letter, number, function key, or arrow key), alone or preceded by Ctrl, Alt, or  Shift in any combination.

•	Enter a descriptive name for the macro.

•	Choose the keys for the accelerator.

•	Click on New Macro.

If you re-use one of HoTMetaL PRO's built-in keyboard accelerators as a macro accelerator, its original functionality will be unavailable as long as that macro is loaded.

Restrictions on macros

A macro should be self-contained, that is, its completion must not depend on any user input at the time the macro is run, such as typing in a dialog box or making a selection from a list. Therefore, there are some sequences of actions that cannot successfully be included in a macro. As a general guideline, if a macro involves any of the commands whose name ends in `...', that command should be completed somewhere in the macro. So, for example, you can define a macro that inserts a particular element, but you cannot define a macro that simply brings up the Insert Element dialog box.

Mouse clicks in the document window are ignored during macro recording. The first time you attempt to use the mouse to change the selection, HoTMetaL PRO will beep. The second time, you will get a message saying that you should use the cursor (arrow) keys to change the selection.

 In general, a macro that was recorded in one of HoTMetaL PRO Editor's three views (WYSIWYG view, Tags On view, HTML Source view) should not be played back in the other two views.

The following other actions cannot be recorded in macro:

•	Setting table properties.

•	 The Check HTML and Check Accessibility commands.

•	 Insertion of ActiveX controls and Design-Time Controls (DTCs).

•	Spell checking operations.

If you use a toolbar button when recording a macro, note that even though a toolbar button can perform one of several actions (insert, change, split) only the action that was actually performed when you recorded the macro will be performed the next time you run the macro. For example, if the insertion point is inside a P element and you click on the [image] button, HoTMetaL PRO will split the P element. This action is recorded in a macro as `split the current element', so when the macro is run, it will attempt to split the current element, even if it's not a P. (By contrast, if you create markup with the Element... or  Change Element... command, it will be played back in the macro exactly as you entered it.)


Running a macro

The usual way to run a macro is to type its keyboard accelerator. You can also run macros by choosing Macros... from the Tools menu. This gives you a dialog box that lists all the macros that are currently available.

To run a macro:

•	Choose Macros... from the Tools menu, or click on the [image] toolbar button. The Macros dialog appears.

•	Select the appropriate macro from the list.

•	Click on Run .

 You can run only one macro at a time.


Changing a macro accelerator

To change the accelerator associated with a macro:

•	Choose Macros... from the Tools menu. The Macros dialog appears and displays a list of currently loaded macros.

•	Select the macro that you want to change.

•	Choose a new accelerator using the Ctrl, Alt, and Shift check boxes and the  Key  list.

•	Click on Change.


Deleting a macro

To delete a macro from the list of loaded macros:

•	Choose Macros... in the Tools menu. This displays a dialog box with a list of currently loaded macros.

•	Select the macro that you want to delete. (You can delete only one macro at a time.)

•	Click on Delete.

If you delete a macro that has been loaded from a file, the macro is removed only from the list of available macros—it is not deleted from the file from which it was loaded, and can subsequently be re-loaded.

To delete a macro from a macro file:

•	Delete the macro from the list of loaded macros, as described above.

•	Click on Save. This saves the currently loaded macros to the file.


Saving and loading macro files

To save the currently loaded macros to a file:

•	Choose Macros... from the Tools menu. This displays a dialog box with a list of currently loaded macros. The name of the current macro file (if there is one) is displayed at the bottom of the dialog box.

•	Click on Save to save the macros to the current macro file.

•	Click on Save As... to save the macros to another macro file.

 A macro file saved in this way can later be loaded by clicking on Load....

If any macros are still unsaved when you attempt to exit HoTMetaL PRO, you will get a warning message informing you of this and giving you the opportunity to save the macros before exiting.

To load a macro file:

•	Choose Macros... from the Tools menu.

•	Click on Load....

•	Choose a macro (.mcr) file.

After a macro file is loaded, the previously loaded macros are unavailable. If any macros have been defined but not yet saved, these will be lost. Before the new macro file is loaded, you will receive a warning dialog giving you the opportunity to save any unsaved macros.

When you load a macro file, it becomes the default macro file and will be loaded the next time you launch HoTMetaL PRO. The default macro file for HoTMetaL PRO is hmpro4.mcr, located in the macros folder under the HoTMetaL PRO folder. See the file readme.htm in this folder for more information.


Shortcut keys

Shortcut keys for HoTMetaL PRO menu items are indicated on their respective menus. All menus, menu items, and dialog box controls are accessible by pressing the Alt key and the underlined letter (also called an `access key' or `mnemonic') associated with that control. HoTMetaL PRO Editor and Information Manager also support shortcut keys for window and dialog box navigation.

HoTMetaL PRO 3.0 users please note: most HoTMetaL PRO Editor keyboard shortcuts of the form Ctrl+letter, for HoTMetaL PRO-specific functions, have been replaced by Ctrl+Shift+sameletter; for example, Ctrl+I (Insert Element) is now Ctrl+Shift+I. Keyboard shortcuts for standard functions such as Cut and Paste have not changed.

  More on this topic


File commands (Editor)

These shortcut keys give you access to file manipulation commands in the HoTMetaL PRO Editor.

Create a new document from a template	Ctrl+N
Open a document	Ctrl+O
Open a recently-opened document	Alt+F+number
Close a document	Ctrl+W, Ctrl+F4
Save a document	Ctrl+S
Quit the HoTMetaL PRO Editor	Ctrl+Q, Alt+F4
Preview in a browser	Ctrl+M
Access online help	F1


Editing commands (Editor)

These shortcut keys give you access to common editing operations in the HoTMetaL PRO Editor.

Find and Replace	Ctrl+F
Find Next	F3
Undo an action	Ctrl+Z, Alt+Backspace
Redo an action	Ctrl+Y
Cancel an action	Esc
Spell checking	F7
Thesaurus	Shift+F7
Turn Rules Checking On/Off	Ctrl+Shift+K
Check HTML	F9


Switching between views and display modes (Editor)

These shortcut keys switch between HoTMetaL PRO Editor's three editing views, and display invisible characters, the editor styles dialog, and the Visual Dynamic Keyboard.

Toggle between WYSIWYG view and Tags On view	Ctrl+Space
Switch to HTML Source view	Ctrl+Alt+H
Switch to Tags On view	Ctrl+Alt+T
Switch to WYSIWYG view	Ctrl+Alt+W
Display invisible characters	Ctrl+Alt+I
Change editor display styles	Ctrl+Shift+B
Turn On/Off Visual Dynamic Keyboard	Ctrl+T


Inserting, deleting, and moving text and markup (Editor)

These shortcut keys enable you to perform common editing operations on text and markup in the HoTMetaL PRO Editor.

Delete one character to the left	Backspace
Delete one character to the right	Delete
Cut selection (copy to clipboard)	Ctrl+X, Shift+Delete
Delete selection (don't copy to clipboard)	Delete
Copy selection	Ctrl+C, Ctrl+Insert
Paste from clipboard	Ctrl+V, Shift+Insert
Insert a link	Ctrl+K
Insert a bookmark	Ctrl+G
Insert a break (BR element)	Shift+Enter
Insert non-breaking space (&nbsp;)	Ctrl+Shift+Space
Insert special character	Ctrl+Shift+E
Insert Tab character in a table cell	Ctrl+Tab
Display the Attribute Inspector	F6
Split element	Enter, Ctrl+Shift+P
Join to preceding	Backspace, Ctrl+Shift+J
Remove markup	Ctrl+Shift+D
Change element	Ctrl+Shift+L
Insert element	Ctrl+Shift+I
Insert a comment	F8


Formatting characters (Editor)

These shortcut keys perform character formatting in the HoTMetaL PRO Editor.

Increase the font size	Ctrl+Shift+>
Decrease the font size	Ctrl+Shift+<
Apply bold formatting	Ctrl+B
Apply an underline	Ctrl+U
Apply italic formatting	Ctrl+I


Formatting paragraphs (Editor)

These shortcut keys perform paragraph (block) formatting in the HoTMetaL PRO Editor.

Center a paragraph	Ctrl+E
Left align a paragraph	Ctrl+L
Right align a paragraph	Ctrl+R
Demote selected list items to sub-list	Tab
Promote selected list items out of list	Shift+Tab


Moving around in a document (Editor)

These shortcuts move the insertion point in the HoTMetaL PRO Editor document window. See the next section for shortcuts for moving around in tables.

Scroll to insertion point or selection	F4
One character to the left	Left Arrow
One character to the right	Right Arrow
One word to the left	Ctrl+Left Arrow
One word to the right	Ctrl+Right Arrow
One paragraph up	Ctrl+Up Arrow
One paragraph down	Ctrl+Down Arrow
Up one line	Up Arrow
Down one line	Down Arrow
To the end of a line	End
To the beginning of a line	Home
Up one screen (scrolling)	Page Up
Down one screen (scrolling)	Page Down
To the end of a document	Ctrl+End
To the beginning of a document	Ctrl+Home


Moving around in tables (Editor)

These shortcuts move the insertion point in tables in the HoTMetaL PRO Editor. See the previous section for shortcuts for moving around in the rest of the document window.

Next cell in a row	Tab, Right Arrow
Previous cell in a row	Shift+Tab, Left Arrow
First cell in a row	Alt+Home
Last cell in a row	Alt+End
First cell in a column	Alt+Page Up
Last cell in a column	Alt+Page Down
Previous row	Up Arrow
Next row	Down Arrow


Making and extending selections (Editor)

These shortcut keys enable you to make or extend selections (highlighted text or markup) in the HoTMetaL PRO Editor.

One character to the right	Shift+Right Arrow
One character to the left	Shift+Left Arrow
To the end of a word	Ctrl+Shift+Right Arrow
To the beginning of a word	Ctrl+Shift+Left Arrow
To the end of a line	Shift+End
To the beginning of a line	Shift+Home
One line down	Shift+Down Arrow
One line up	Shift+Up Arrow
One paragraph down	Shift+Page Down
One paragraph up	Shift+Page Up
To the beginning of a document	Ctrl+Shift+Home
Select the current element	Ctrl+Shift+T
Select the entire document	Ctrl+A
Select the next table cell's contents	Tab
Select the preceding table cell's contents	Shift+Tab


Choosing menu items (Editor and Information Manager)

These shortcuts enable you to choose commands from the HoTMetaL PRO Editor and Information Manager menus.

Show the shortcut (right mouse) menu	Shift+F10
Make the menu bar active	F10
Show the program icon menu (on the program title bar)	Alt+Space
Select the next or previous command on the displayed menu or sub-menu	Down Arrow, Up Arrow
Select the menu to the left or right; or, with a sub-menu visible, switch between the main menu and the sub-menu	Left Arrow or Right Arrow
Close the visible menu and sub-menu at the same time	Alt
Close the visible menu; or, with a sub-menu visible, close the sub-menu only	Esc


Moving between windows and dialog boxes (Editor and Information Manager)

These shortcuts enable you to move between windows, dialog boxes, and documents (Editor only).

Switch to the next active program	Alt+Tab
Switch to the previous active program	Alt+Shift+Tab
Display the next document	Alt+Right arrow
Display the previous document	Alt+Left arrow
Show the Windows Start menu	Ctrl+Esc
Close the active document window	Ctrl+W
Return to document window	Shift+F6
Switch to the next document window	Ctrl+F6, Alt+Left Arrow
Switch to the previous document window	Ctrl+Shift+F6, Alt+Right Arrow
Toggles between the two most recent windows	Alt+F6
Cycles through document and modeless window	Alt+Shift+F6


Navigating in a dialog box (Editor and Information Manager)

These shortcut keys enable you to select and use dialog box controls (controls are groups of one or more related objects, such as a push button, or a group of radio buttons).

Switch to the next tab in a tabbed dialog box	Ctrl+Tab, Ctrl+Page Down
Switch to the previous tab in a tabbed dialog box	Ctrl+Shift+Tab, Ctrl+Page Up
Move to the next control	Tab
Move to the previous control	Shift+Tab
Move to control	Alt+underlined letter
Move between options in the selected drop-down list box	Arrow keys
Move between radio buttons in selected group	Arrow keys
Perform the action assigned to the selected button	Space, Enter
Turn selected check box on or off	Space
Turn any check box on or off	Alt+underlined letter
Move to an option a selected drop-down list box	First letter in option name
Open selected drop-down list box	Alt+Down Arrow
Close selected drop-down list box	Esc
Perform the action assigned to the default button in the dialog box (if no other push button is selected)	Enter
Select a folder in a folder list	Arrow keys
Update the files visible in the Open or Save As dialog box	F5
Cancel the command and close the dialog box	Esc


Working with projects (Information Manager)

These shortcut keys give you access to project-level operations in the Information Manager, and launch the Visual Dynamic Keyboard.

Create a new project from template	Ctrl+N
Open a project	Ctrl+O
Quit the Information Manager	Alt+F4
Find text, tags, and meta-data in project files	Ctrl+F
Replace text, tags, and meta-data in project files	Ctrl+H
Publish a project	Ctrl+Shift+P
Remap links	F5
Launch the Visual Dynamic Keyboard	Ctrl+T


Working with files (Information Manager)

These shortcut keys give you access to file-level operations in the Information Manager.

Cut a file	Ctrl+X
Copy a file	Ctrl+C
Paste a file	Ctrl+V
Delete a file	Delete
File properties (for selected file)	Alt+Enter


Changing views in the Link panel (Information Manager)

These shortcut keys enable you to switch between views in the Information Manager Link panel.

Switch to Web View	Ctrl+Alt+W
Switch to Single File View	Ctrl+Alt+F
Switch to Tree View	Ctrl+Atl+T
Switching between views	Ctrl+Tab


Navigating in the Project panel (Information Manager)

These shortcut keys enable you to move around in the Information Manager Project panel.

Expand a folder	Right Arrow
Contract a folder	Left Arrow
Move down through the file list	Down Arrow
Move up through the file list	Up Arrow
Move to top of project	Home
Move to bottom of project	End


Running a local Web server

The ZBSoft ZBServer Pro personal web server described in this topic is shipped with HoTMetaL PRO 4.0, but not with the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

What is a Web server?

A Web server is a program that runs on a computer and waits for requests (usually from other computers over a network) for Web pages and related files located on the server computer. When you use a Web client, such as a Web browser, to click on a link or fill out a form, the client sends a request for the specific document or program to the server. The Web server then returns the page or result.

Web servers and clients communicate using HTTP (HyperText Transfer Protocol).

  More on this topic


Introducing ZBServer Pro

The ZBSoft ZBServer Pro personal web server described in this topic is shipped with HoTMetaL PRO 4.0, but not with the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

ZBServer PRO is an Internet server program that runs on your local PC. While you can use ZBServer PRO to host your own Web, Gopher, Talk, or FTP site through a dedicated Internet connection (for example, an ISDN or T1 connection), you can also use it on a stand-alone PC to test server-side operations on your Web pages, such as CGI scripts, image maps, and FTP downloads.

ZBServer PRO Limited Edition is a subset of the full ZBServer PRO Edition from ZBSoft Corp. See their Web site, http://www.zbserver.com/, for a special upgrade offer for SoftQuad HoTMetaL PRO 4.0 users.

  More on this topic


Running ZBServer Pro

The ZBSoft ZBServer Pro personal web server described in this topic is shipped with HoTMetaL PRO 4.0, but not with the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

To run ZBServer PRO:

•	Start ZBServer PRO from the Start menu.

•	In the status area of the taskbar, click on the ZBServer PRO icon.

•	Choose Show ZBServer from the pop-up menu; this brings up the ZBServer PRO window.

The ZBServer Pro interface

The ZBServer PRO window has menus, a status bar at the bottom, and a toolbar and hit counter bar at the top. You can remove the toolbars, status bar, and hit count bar by deselecting them in the View menu.

The main window area displays information about the server status. From the View menu, you can select which events (for example, HTTP request headers) you want to display in the main window.


Configuring ZBServer Pro

The ZBSoft ZBServer Pro personal web server described in this topic is shipped with HoTMetaL PRO 4.0, but not with the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

While you can use ZBServer PRO to host your own Internet site on machines with dedicated Internet connections, the following will explain how to configure ZBServer PRO on a stand-alone PC as a server for testing your Web pages. For information about configuring ZBServer PRO as an Internet-connected server, consult the ZBServer PRO online help.

  More on this topic


ZBServer Pro settings

The ZBSoft ZBServer Pro personal web server described in this topic is shipped with HoTMetaL PRO 4.0, but not with the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

The following instructions will configure ZBServer PRO to run on a stand-alone PC. These instructions do not cover all of the configurable options. See the ZBServer PRO online help for more information about settings not explained here.

To configure ZBServer PRO:

•	Choose Settings... from the Edit menu, or click on the [image] (settings) toolbar button; this brings up a tabbed dialog box.

General settings

These settings define the host machine.

•	Fill in your name and company (if applicable).

•	Fill in your email address.

For a stand-alone PC, you do not need to specify a DNS Host Name or Host IP.

You can use the local machine name of your PC for the DNS Host Name. If you have a dial-up network connection for Windows 95, you may have set up your PC with a host name. To find out what the machine name is:

•	Go to the Windows 95 Control Panel.

•	Double-click on the Network icon.

•	Click on the Identification tab.

The machine name will be displayed.

Servers settings

This tab configures the Web (HTTP) and FTP servers. The upper portion of the dialog box specifies the default folders that each server will access on your PC. You can use the default folders for each server or specify your own folders; for example, you may just want to use the folder where your local Web page files are located.

Note: ZBServer Pro will place a dummy root file called index.htm in the Web server folder. If you use the folder where your Web pages are already located, it will not overwrite an existing index.htm file. However, the Web server looks for index.htm or index.html as the default root page in that order; if the root page of your existing Web site is index.html, you must delete the dummy index.htm file that ZBServer placed in the directory or the server will serve that file by default.

You do not need to change the port settings.

The lower portion of the tab contains a list of active servers. If you have changed the default folder for the Web server, you should change the settings for httpd server to match. To do this:

•	Click on the [image] icon next to the httpd server listing; this highlights the server.

•	Click on the Edit button; this brings up a dialog box where you can specify the new directory name.

•	Click on OK.

•	Click on Apply to complete the Servers tab.

You will be prompted to restart ZBServer PRO to effect the changes. You can wait until you have finished configuring the server.

CGI settings

Use the CGI settings to specify the path of a Perl Interpreter and the folder containing your Perl library files. Windows versions of Perl are available for download from the Internet.

•	In the Perl Compiler text box, type the path to your Perl Interpreter; for example, c:\perl\perl.exe.

•	In the Perl library text box, type the folder that contains your Perl library files; for example, c:\perl.

•	Check CGI Debug Mode if you want to debug your CGI scripts; if this is checked, ZBServer PRO will keep old copies of the CGI and Perl input, content and output files. It will also send the CGI Debug message to CGI programs. This is useful when you are programming your own scripts or trying to get new CGI scripts to run.

•	You can specify the GMT (Greenwich Mean Time) information to CGI programs that request it. This should be a value in seconds to be added to GMT to reach local time.

Shared folders settings

The Shared Folders tab sets access restrictions to any folder on any drive (local or remote) mounted on your computer. You can also use this dialog to set more detailed levels of permissions for your users and groups.

The Paths list shows all folders that ZBServer PRO is configured to share. Click on a path to edit its settings. Each line shows the URL Path, DOS Path, Owner field, Access field and the Allows fields. The Allows fields are abbreviated as C (for Allow CGI), M (for Allow Messages) and D (for Allow DIR). These settings are important if you are using ZBServer PRO as server on a network. For more information, see the ZBServer PRO online help for this tab.

Miscellaneous settings

The Misc tab sets the following options that are applicable to stand-alone PCs:

•	Temp Directory – The location of the temporary file folder. Cache and other system information will be temporarily stored in this folder when necessary.

•	Cache DNS Hits – Speeds up DNS lookups by caching the last few looked up hostnames.

•	 Start as 95 Service – Adds an entry to the Windows 95 registry so that ZBServer PRO will startup automatically before the normal login screens.

•	Minimize after start – ZBServer PRO will minimize after starting up.

•	Hide after start – ZBServer PRO will hide after starting up. If ZBServer PRO is hidden, you can access it from the Status Area of the taskbar.

•	Ask before quitting – ZBServer PRO will prompt you before exiting the program.

•	Beep on POSTs – ZBServer PRO will beep whenever it gets a POST command; for example, when a message is posted to the message board or when a CGI program is run.

•	Send Buffer Size – How much data ZBServer PRO sends at one time.

•	 Read Timeouts – How long (in seconds) before ZBServer PRO closes a connection.

To complete the configuration of ZBServer PRO, you will have to close it down and restart it.


Serving a page

The ZBSoft ZBServer Pro personal web server described in this topic is shipped with HoTMetaL PRO 4.0, but not with the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

Once you have configured ZBServer PRO, you can access your local Web pages just as if you were surfing the Web. Your Web pages should be located in the folder that you specified as the default in the Servers tab of the Settings dialog box. In order to surf to your home page, you simply use `localhost' as the domain name; ZBServer PRO will automatically serve any file named index.htm or index.html.

For example, if the default folder for the server is homepage, and the folder contains a file called index.html, you would type the following in your Web browser:

http://localhost

ZBServer PRO would then serve the index.html page. This is typically the filename that Internet service providers specify for the root page of your Web site.


Setting Editor display options

The display styles in the HoTMetaL PRO Editor document window were chosen to correspond to typical browser display. You can modify these display styles to suit your own preferences for working in the Editor:  this will not affect how browsers format the document. Only the HTML markup or a cascading style sheet affects how a document looks in a browser.

Because HTML files are structured documents, setting a style for an element means setting it for all elements of that type.

To modify display options:

•	Put the insertion point inside any instance of the element whose display styles you want to modify.

•	Do one of:

•	Choose Display Options... in the Tools menu, and then choose the Modify... sub-item.

•	Press Ctrl+Shift+B.

  More on this topic


Modifying element display options

You can set the following styles from the Display Options dialog box:

•	Elements can be of two format types: block or inline. Block elements start and end on a separate line from adjacent content. Inline (or character) elements are not set off from adjacent text. All of the styles listed here can be applied to block elements; only font properties and color can be applied to character elements.

•	Font properties – Font name, font size, font style.

If you select the Toggle font style, the other style settings are turned off in the current element if they are turned on in the containing element. For example, an element whose font style is set to Bold and Toggle will appear as bold text within plain surrounding text and as plain within bold surrounding text.

•	Paragraph styles – Alignment, line height, and fill mode. (Fill mode determines how line end characters are treated—in fill mode, they are displayed as a space, but in no fill mode they cause a line break.)

•	Space before and after – You can add space to the top and bottom of elements in order to set them off from surrounding elements.

•	Indentation – You can choose right, left, and first indents for elements. By choosing the right and left indent, you can set the line length for the element.

•	Color – You can choose the foreground (text) and background colors for an element.

Values and units

Numerical values used in the Display Options dialog box can be absolute, relative (+/-), or expressed as a percentage of a base value. The following units can be used: points (1/72 inch), centimeters, inches, machine units (1/16 point), millimeters, picas (1/6 inch), and pixels (same as points).

You can use any unit wherever you are allowed to enter values. For example, font size may be expressed in points, inches, picas, etc.

 Units can be specified by giving the full unit name, or the first few letters of the unit name, as long as that is unambiguous (for example, don't use `p' since that could mean `points' or `picas'). In addition, `cm' and `mm' specify centimeters and millimeters, respectively. If you don't specify a unit, HoTMetaL PRO will interpret the value as points by default.

The value Adopt Current means `inherit this style from the element that contains the current element'.


Saving and loading element display options

HoTMetaL PRO saves the formatting set with the Display Options command in a binary styles file called hmpro4.stl in the Display folder. HoTMetaL PRO gets default display options from this file. Whenever a document is saved, this file is updated with whatever display options are in effect for the document. You can also save and load display options in a text file.

 To save display options in a text file:

•	Set the desired display options in the current document.

•	Choose Display Options... in the Tools menu, and then choose the Save... sub-item.

Note:  The formatting information from a text-format options file will not be saved in the default (binary) styles file until the current document is saved.

 To load a text-format display options file:

•	Choose Display Options... from the Tools menu, and then choose the Load... sub-item. You can switch display options in the middle of a HoTMetaL PRO session by loading a new text-format options file with this command.

Alternative display options

HoTMetaL PRO has several preformatted display options files (in text format) to choose from. Included are the following options files, which you can load from the Display folder:

•	hmpro4.asf – The default options.

•	lynx.asf – Mimics the default style of the text-based Web browser, Lynx.

•	mosaic.asf – Mimics the default style of the NCSA and Spry Mosaic Web browsers.

•	showall.asf – Shows almost all attributes. This is a useful options file for advanced users who want to see all attributes on screen.

•	colorize.asf – A colorful options file, in which almost every element has a different color.


Open Market Digital Offers

HoTMetaL PRO simplifies the creation of Web pages for commercial transaction systems that run OM-Transact software. OM-Transact is a suite of server utilities offered by Open Market Inc. Web authors who have access to Open Market software and Web services can easily present Digital Offers (DOs) to their Web page readers.

Digital Offers turn your HTML file into a sales tool by providing secure product offering and billing data. Digital Offers contain the familiar information that you might see on a sales offering or invoice: a name and description of the product; a product ID code; tax, shipping and refund terms—to name only a few. From the reader's (or customer's) point of view, Digital Offers are the first step in a series of actions that offer, collect and record a commercial transactions.

Digital Offers are created (by OM-Transact utilities) as the Web page is served. The `raw material' for the creation of a Digital Offer is a Pre-Digital Offer (a PDO), which you can create with the HoTMetaL PRO Editor by choosing PDO... from the Insert menu.

  More on this topic


Bringing commerce to your Web page

The Open Market model structures the sales process in two parts. This discussion regarding Digital Offers, and PDO that they are created from, is limited to the first part of the sales process—providing secure information about the product and its terms of sale. It does not deal with the second part of the process—order forms, credit card number input, etc., all of which takes place under the control of other software on the Web server. The assumption, in other words, is that you, the Web page author, are in the up-front, representation part of the sale, that is, the marketing: what's for sale? for how much? what terms? what taxes apply? Someone else, in your organization, or even in another company, will be providing transaction services—the cashier and back-office processing.

 A Digital Offer, embedded in an HTML page, will:

•	Name and describe the product, including a unique ID, price, and tax information.

•	Specify shipping details, costs, and taxes.

•	Specify URLs (for an online product), subscription terms (where appropriate), and payment terms.

The following information deals with the insertion and specification of Pre-Digital Offers into HTML for later automatic conversion into Digital Offers by Open Market Inc. utilities on the server.

Note: You can provide Digital Offers on your Web pages only if your Web server is running software utilities manufactured by Open Market Inc., and if your organization has established processing support for commercial Web transactions. See Open Market's Web site (www.openmarket.com) for details.


Inserting a PDO

To enable PDO insertion:

•	Choose Options... from the Tools menu.

•	Click on the General tab.

•	Turn on the Add PDO to Insert menu check box.

•	Click on OK.

This adds the PDO... command to the Insert menu.

Typically, you would insert a PDO after the text that describes the product. The text inside the PDO will appear as highlighted, linked text when your page is displayed in a browser.

To insert a PDO:

•	Select the text that you wish to have highlighted.

•	Choose PDO... from the Insert menu. The PDO Properties dialog appears.

In Tags On view, HoTMetaL PRO represents the PDO as an OM-PDO start-tag and end-tag pair that can enclose text. Typically, the text might say something like `Purchase Now', or `only $49.95'. It will appear on the purchaser's browser screen as highlighted, linked text. The OM-PDO element can contain only text—you cannot insert elements or formatting.

The PDO Properties dialog consists of four tabs or sub-dialogs—Product, Tangible, Online, and Online Payment. These correspond to the steps you would follow to write out a sales receipt if you were working behind the counter in a retail store. Note that `tangible' and `online' are mutually exclusive: choosing one disables choices for the other.

A field-by-field description of the input decisions you will want to make in order to create a PDO follows.

When all of the fields have been filled, click on OK.

Two tags will appear on your screen—an OM-PDO start-tag and an OM-PDO end-tag. If you have just created a new PDO, there will be no text between the tags. Place your insertion point inside the tags and type the text that you want the purchaser to see as highlighted, linked text.

If your insertion point is inside an OM-PDO element, you cannot insert a second, nested OM-PDO tag. To edit the properties of an existing PDO:

•	Put the insertion point inside the OM-PDO element.

•	Choose PDO... from the Insert menu, or right-click and choose PDO Properties ... from the pop-up menu.

  More on this topic


Entering product information

To enter product information:

•	Click on the Product tab in the PDO Properties dialog.

The Product Name or description will appear in the client's browser window on both order forms, statements, and receipt forms. This information is required. It can be any alphanumeric text.

A Unique ID is any product ID; model number, part number, or any other 40-character alphanumeric text identifier. It is required for any `tangible' or `subscription' sale.

When the client is browsing (or filling out) an online order form, or reading an online receipt, the Web server can link back to the Web site from which the sale was initiated to validate and coordinate transaction detail. That location is entered here, in the Offer URL field. This can be an absolute or partial URL, and is required.

The Details information can appear a statement that the merchant sends to the purchaser.

Price (Prior to Tax and Shipping) allows you to specify the price, in any currency. The Price, a required field, is expressed without a currency symbol and without commas. For example, `US$1,037.40' would be entered as 1037.40

The Currency Code can be any three-digit code (you can type it in or select it from the list box), or a code from the ISO4217:1995 currency code specification. Currency codes cannot be automatically validated. The Tax Class is a five-digit number that is used by OM-Transact to calculate tax. The number should be available from your transaction Web server administrator.

Products can be Online or Tangible. (The choice of None is special: it allows the offering to be viewed but disables transactions.) Choosing a Product Category allows HoTMetaL PRO to permit or restrict choices in subsequent dialogs.


Tangible products

If you selected the Tangible option button on the Product tab, you will probably want to fill in the fields on the Tangible tab. These are available, but not required.

•	Click on the Tangible tab.

In the case of a tangible product, a buyer will want to know whether or not shipping has been completed. The seller, or a company appointed by the seller, may be expected to provide a Web page to keep buyers up to date. The Shipment Status URL is the location of this page. In the absence of such a specific status page, Open Market Inc. provides a page known as the `OM-Transact status page'.

Tangible items may involve shipping charges and shipping charge taxes. These are specified in the Shipping Cost area of the Tangible tab. Option button selections indicate whether shipping costs will be included in the gross invoice or separately calculated and itemized (either as a fixed charge, or adjusted by the shipping weight). Note that the unit of weight is not specified here.


Online

If you selected the Online option button under Product Category on the Product tab, you will be presented with some additional choices on the Online tab. If not, these choices will be disabled.

•	Click on the Online tab.

An online product can be delivered immediately. The Fulfillment URL is the location of the file or files that will be delivered once the transaction is complete.

An online buyer may choose to download the product (or read the file) immediately, or may choose to wait. The Digital Receipt Expires After field will determine how long (how many days) the buyer can wait before the online transaction is cancelled.

Within the Online tab, there is a check box for Subscriptions and, beside it, an area for Subscription Options. Clicking in the check box will enable the fields in Subscription Options.

Online subscriptions are a special case of an online purchase. Subscriptions have a duration, entered here in months. You can make the decision here whether or not to consult the buyer again, as the expiration date approaches, to secure a subscription renewal agreement. If an Automatic Renewal is appropriate, click in the check box.

Subscriptions transactions are often paid in advance—you should specify a refunds policy in case the subscription is cancelled by the buyer in mid-term. The Refunds area allows three choices: None, Prorated, and Full. (A prorated refund would return the value of the issues remaining at the time of the cancellation.)


Online Payment

Whether the purchase is of a tangible or online product, you can arrange payment data in the Online Payment tab. When the item is tangible, a single, one-time payment is assumed, whereas the purchase of online products can be made by installment. Which fields are enabled will depend on the choice that you made in the Product Category area on the Product tab. If the product is online, all of the fields in the Online Payment tab will be enabled. Otherwise, if the product is tangible, only the option button for Single, One-Time Payment will be enabled.

Sellers of online products may want to give buyers the option to download the product and assess it before the charge is made. This trial period can be specified as a number of days, using an integer of any number of digits.

A permissible Grace Period, during which a client has committed to the transaction but has not yet paid, is similarly specified in days.

Within the Payment Scheme area of the Online Payment tab, the choice depends on whether the product is online or tangible.

If you select Single, One-Time Payment, the rest of the fields are disabled. The price is displayed, though it can't be changed on this tab. (If necessary, you would change the price on the the Product tab.)

If the product is online, and you select Installments, three choices become available: Total Number of Installments, Months Between Installments, and Payment per Installment. The first two are integers, and the third (the payment) is a number with decimals, but no commas or currency signs. A payment of $1,345.58 would be entered as 1345.58. You may want to specify a currency in the Price area of the Product tab.


The HTML behind the screen

If you were to examine the HTML in the HoTMetaL PRO Editor HTML Source view, you would find a set of two HTML comments, each containing instructions called Server Side Includes (SSIs). When the final page is served, the SSI in the first comment will begin the PDO-to-Digital Offer conversion process, on the server, and the one in the second comment one will end the conversion. Between these two tags is the text that will appear on your purchaser's browser screen.

The PDO begins like this:

<!--#exec cmd="mdohref

This tells the server to execute the command mdohref which converts the PDO to a Digital Offer. That comment would be followed by, for example:

Purchase Now

The second HTML comment contains the SSI which `turns off' the server side process. It begins like this:

<!--#exec cmd="mdohrefend

This tells the server to end execution of mdohref.

Of course, there's a lot more in that PDO besides the two SSIs—all of the sales offering data regarding price, terms, tax, currency, etc.

The Web server utility mdohref, as its name suggests, converts the two HTML comments and their intervening `Purchase Now' text into an HTML anchor (A) element. Here's the beginning of a typical example as it would appear if the browsing purchaser were to examine the raw HTML file:

<a href=

"http://payment.openmarket.com:80/tms-ts/bin/payment.cgi?

96830b13cd490426d493cbba0e2b2a66:kid=300064.205007

&valid=844438671

&domain=hardgoods

&expire=2592000

&ss=env

&cc=US

&goodstyle=h

&amt=5.00

&fmt=get

&desc=Open%20Market%20Coffee%20Mug">

[Purchase Now]

</a>

 To make this conversion, the mdohref utility needs the name of of the Web site that will act as a transaction service to carry out the sale. In this example, the sales transaction service is provided at payment.openmarket.com. You can see the URL in the example. This information is not entered by the Web page author; rather, the mdohref utility on the OM-Transact-equipped Web server gathers this information from its configuration files, set up by a Web administrator.

Once the anchored text is inserted into the purchaser's HTML file and delivered, along with some encrypted information, the second part of the sale, the transaction processing itself, can begin.


Learning more about Web commerce

Open Market Inc. maintains a Web site offering many documents, both technical and high-level, covering various aspects of net commerce. You will also find there, detailed technical information about OM-Transact software and other related software and utilities. Browse http://www.openmarket.com.


Accessing ODMA-compliant DMSs

ODMA (Open Document Management API) is a standardized, high-level interface between desktop applications and document management systems (DMS). HoTMetaL PRO can access an ODMA-compliant DMS.

  More on this topic


System requirements

If the ODMA functionality is to be used, you must supply a suitable library, and identify it via the Windows registry in an ODMA32 entry.

 The DLL must provide the OLE interface CODMDocMan to the standard ODMA functions such as OpenDoc() and CloseDoc(), as documented (rather briefly in the case of the OLE interface) at http://www.aiim.org/odma/odma.htm.


Configuring HoTMetaL PRO to work with ODMA

To enable ODMA:

•	Choose Options... from the Tools menu.

•	Click on the General tab.

•	Turn on Enable ODMA.

•	Click on OK.

•	Restart HoTMetaL PRO.

 Some other ODMA settings are made by editing the HoTMetaL PRO configuration file, hmpro4.ini in the HoTMetaL PRO folder with a text editor. Many of these options are commented out in the configuration file: you must remove the initial `#' to make them active. After you edit and save the file, you must quit and relaunch HoTMetaL PRO in order for the changes to take effect. (Note that you can use either a colon `:' or an equals sign `=' to set configuration options.)

Note:  Enabling ODMA puts the `access_dms_files = true' setting in the configuration file.


Menu items for DMS access

 If DMS access is turned on, new menu items are added to the File menu.

  More on this topic


Activate

 A new menu item called Activate [server] will be added to the File menu. Choose this command to launch your DMS. The [server] part of the menu item name is configurable and gets its value from the server_name_for_activate_menu_item option in the configuration file.

 For example:

server_name_for_activate_menu_item = Neural Lace

 would cause the menu item to appear as Activate Neural Lace.


Open, Save, etc.

 If you have enabled access to a DMS, you can configure HoTMetaL PRO's File menu in either of two ways.

•	DMS-specific menu items: the File menu will contain two pairs of Save As and Open menu items: one pair for accessing the DMS and the second pair accessing the local file system

 Or:

•	 Combined menu items: the File menu will contain only one Save As/Open menu item pair that can be used to access both the DMS and the local file system.

This is purely a convenience option; the functionality available to you is the same in either case.

DMS-specific menu items

 To obtain the first configuration above, make the following settings:

own_menu_items_for_dms = true

dms_name_for_menu_items = DMS Name

 In this case:

1	 A second Open menu item whose menu label has the form Open from [DMS]... will be added to the File menu underneath the existing Open... item. This will allow you to open documents from the DMS server.

2	A new toolbar button whose tooltip is Open from document server appears beside the default Open toolbar button. Clicking on this toolbar button has the same effect as choosing the Open from [DMS]... menu item.

3	A second Save As menu item whose menu label has the form Save to [DMS] As... will be added to the File menu underneath the existing Save As... item. This will allow you to save documents to the DMS server.

4	 If the document was last saved to, or read from, the DMS, then a plain Save will save the file to the DMS, and the command name will change temporarily to Save to [DMS] to remind you of this.

5	 The [DMS] part of these command names is configurable and gets its value from the dms_name_for_menu_items option in the configuration file. For example:

dms_name_for_menu_items = Sesame

 would cause the menu items to appear as Open from Sesame... and Save to Sesame As....

Combined menu items

 To obtain the second configuration, set:

own_menu_items_for_dms = false

 In this case, the standard menu items will invoke DMS operations. Save As now means Save to DMS As and Open means Open from DMS (and so does the Open toolbar icon). When you save a document that hasn't been saved before, the dialog box that appears will be labeled Save to [DMS].

The dialog box produced by each of these menu items will have a button to enable access to the local filesystem. This button will produce the standard (non-DMS) HoTMetaL PRO version of the dialog box.

 The Activate [server] menu item will still be found in the File menu.


Autosaving

 If you set:

local_only_autosave_of_dms_file = true

 then only an explicit save command (or Ctrl+S or other equivalent) from you will cause the file to be saved to the DMS. The autosaves that are performed at certain times or after every so many changes will save to the local temporary file only.

 If you set:

local_only_autosave_of_dms_file = false

 then any autosave will go to the same destination as a manual save would.


Site template configuration

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

After using the HoTMetaL PRO Information Manager for some time, you may want to configure the template wizard so that it generates the kind of sites that you use often. This section gives you instruction on how to do that.

  More on this topic


The configuration file

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

This wizard is configured by the file sitetmpl.hpt, which is located in the HoTMetaL PRO folder. You can modify this file if you want to use your own configuration for the new project wizard.

The sitetmpl.hpt file is an SGML file conforming to the following DTD:

<!ELEMENT BODY - - (CAT_INFO)+>

<!ELEMENT CAT_INFO - - (CAT_INFO)*>

<!ATTLIST CAT_INFO

SHORT CDATA #REQUIRED

LONG CDATA #REQUIRED

DIR CDATA #IMPLIED

HOMEPAGE CDATA #REQUIRED

IMG CDATA #REQUIRED >

There is a sample at the end of this section. You can create this file with an SGML editor such as SoftQuad Author/Editor, or with a text editor. If you use a text editor, be careful to use the correct file syntax.


Using the configuration file

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

An element called BODY (that is, the tags <BODY> and </BODY>) surrounds the contents of the file.

Each template category in the Categories section of the template wizard's initial dialog box corresponds to a CAT_INFO element that is directly nested inside BODY.

You can specify information about a template category using the attributes of the corresponding CAT_INFO element.

 If you are editing the sitetmpl.hpt with a text editor: the attributes are contained in the <CAT_INFO> start-tag, between the element name and the closing `>', as in the example below). Each attribute specification consists of an attribute name, assigned to a value enclosed in double quotes, using an equals sign. For example:

SHORT="Sample Projects and Templates"

The attributes of CAT_INFO are used as follows:

•	SHORT – The label that appears in the Categories list in the template wizard dialog.

•	LONG – The long description of the template category in the template wizard dialog. The description can contain line breaks and blank lines.

•	DIR – The folder where the files that constitute this template are kept. When the template is opened, all of the files in this folder (and its subfolders) will be copied to the destination folder.

•	HOMEPAGE – The `index page' or starting point for the template files. This page is used as the index page when the Information Manager builds a project based on the chosen template.

•	IMG – An image representing the template, displayed on the right side of the template wizard dialog box.

The DIR, HOMEPAGE, and IMG can be specified with absolute or relative paths, but not with URLs. A relative path for DIR or IMG is relative to the HoTMetaL PRO folder; a relative path for HOMEPAGE is relative to the DIR location.

Each template category can have an arbitrary number of levels of sub-categories. Sub-categories are displayed in the template wizard by choosing a category and then clicking on the Next>> button in the initial dialog box. If a template category has no sub-categories (that is, the corresponding CAT_INFO has no nested CAT_INFOs), clicking on Next>> displays a dialog for choosing the destination folder, into which the chosen template and its auxiliary files will be copied.

To give a category one or more sub-categories:

•	Nest one or more CAT_INFO elements inside the CAT_INFO element corresponding to the current category.

•	Delete the DIR attribute value in the current category's CAT_INFO element.

•	Configure the sub-category by setting its attribute values as described above.


Sample configuration file

The functionality described in this topic is available in HoTMetaL PRO 4.0, but not in the Evaluation Version that you are now using. Choose `How To Purchase' in the Help menu for ordering information.

Here is a sample sitetmpl.hpt file that defines one category with three sub-categories.

<BODY>

<CAT_INFO SHORT="Sample Projects and Templates"

LONG="Collections of HTML documents designed to be used as

templates in creating a corporate intranet."

IMG="template\core\filelist.bmp">

<CAT_INFO SHORT="Corporate Pages"

LONG="Corporate homepage and other company-wide documents."

DIR="template\core\"

HOMEPAGE="index.htm"

IMG="template\core\corp.bmp">

</CAT_INFO>

<CAT_INFO SHORT="Sample HR Department"

LONG="HR Homepage and associated projects. Includes

workgroup pages plus HR department documents."

DIR="template\humanres\"

HOMEPAGE="index.htm"

IMG="template\core\hr.bmp" homePage="index.htm">

</CAT_INFO>

<CAT_INFO SHORT="Sample Finance Department"

LONG="Finance Homepage and associated projects. Includes

workgroup pages plus Finance department documents."

DIR="template\account\"

HOMEPAGE="index.htm"

IMG="template\core\account.bmp">

</CAT_INFO>

</CAT_INFO>

</BODY>


Glossary

This chapter defines many of the terms commonly heard when talking about the Web.

absolute URL

A URL that contains a scheme (for example, http) and a server address (for example, www.softquad.com.)

accessibility

HTML documents are said to be accessible if they have been optimized for use by:

1	People with physical disabilities.

2	Users with a variety of hardware and software configurations.

 For example, in an accessible document all images should be accompanied by alternate text; this text can be interpreted by a document reader with a voice synthesizer, and displayed instead of the images by a text-only browser.

Accessible applications are those that provide alternate modes of operation for users with disabilities. HoTMetaL PRO provides the Visual Dynamic Keyboard for this purpose.

ActiveX

ActiveX™ controls are programs that can be referred to in various types of documents and applications under Microsoft Windows, including HTML documents. These programs perform some action in the browser window. OLE is the mechanism under Windows by which ActiveX controls can communicate with a browser. Not all browsers support this feature. See also Java.

adaptive (assistive) technology

 The use of hardware and software to assist people who have difficulty accessing information systems using conventional methods. Examples of adaptive technology are screen readers and magnifiers for users with visual disabilities, and alternative keyboards (such as HoTMetaL PRO's Visual Dynamic Keyboard) and switches for people with little or no hand movement.

anchor

 An element in an HTML document that points to another file, or to a specific location in the current file or another file. When the document is displayed in a browser, clicking on a link causes the browser to display the document and/or location that it points to.

applet

A program, written in the Java language, that is referred to in an HTML document. Applets perform some special processing in the browser window, such as drawing a picture or interacting with the user. See also ActiveX.

attribute

A value that is associated with an element but is not part of the content of the element. Many formatting properties are represented by attributes: for example, background color, table width, and alignment; the URL part of an link is an attribute. HoTMetaL PRO has many specialized dialogs for editing these properties; you can also view and edit any attribute directly using the Attribute Inspector.

broken link

A link to a file that does not exist or is not at the location indicated by the URL.

browser

A program that communicates with Web servers, used for retrieving and displaying documents from the World Wide Web. Most browsers use a graphical interface to provide access to text, images, audio, and video. Compare this with editor. Some well-known browsers are  Lynx, Microsoft Internet Explorer, Mosaic, and Netscape Navigator.

cascading style sheet (CSS)

A style sheet that can be attached to an HTML document. A cascading style sheet consists of one or more rules. Rules can associate an element, an element in a particular context, certain attributes, or a group of elements with settings for font size, indentation, margins, and many other formatting properties. A rule can also specify that part of the document is to be hidden by the browser.

A style sheet can `import' another style sheet. These style sheets are said to be `cascading' because multiple style sheets can be applied to the same document, but there are cascading rules that specify which style sheet's rules apply to a particular element. See the CSS standard at http://www.w3.org/ and the chapter Styles for more information.

CERN

 The European Laboratory for Particle Physics near Geneva, Switzerland, where the World Wide Web was `invented'. For more information, see http://www.cern.ch/

CGI

An acronym for Common Gateway Interface. This is a feature of Web servers that allows HTML clients such as browsers to communicate over the web with scripts installed on the server. HTML forms are often processed by such scripts. `CGI scripts' can be written in any programming language that will run on the server; Perl is a common choice.

class; CLASS attribute

 HTML 4.0 supports the CLASS attribute for many HTML elements. In general, a set of elements can be given the same CLASS attribute value to mark them for special processing. A set of elements (possibly including different types of elements) that have the same CLASS value is referred to as a `class'. Style properties can be applied to members of a class using cascading style sheets.

clickable image map

A clickable image map (or just image map) is an image that is divided into regions, each of them associated with a URL. Clicking in a region causes the file referred to by the associated URL to be accessed. There are two kinds of image maps: server-side (ISMAP) image maps require an external image map file that defines the regions in an image map and assigns them to URLs. Client-side (USEMAP) image maps accomplish the same thing using special elements in the document itself. Client-side image maps are easier to implement but are not supported by all browsers.

client

 In networking, any program that communicates with a server. An example of a client is a browser, which communicates with a Web server.

client-side image map

A type of image map for which the mapped regions and their associated URLs are defined in the document itself. Client-side image maps are not supported by all browsers. Also called a USEMAP.

decor

In HoTMetaL PRO's Site Maker wizard, a set of graphical objects—buttons, lines, bullets—that have a similar visual theme, and which you can choose to give your site a consistent visual appearance.

design time control

An ActiveX control that assists a document creator in designing various objects that can be inserted in an HTML document.

Digital Offers

 A Digital Offer (DO), embedded in an HTML page, will:

•	name and describe the product, including a unique ID, price and tax information

•	specify shipping details, costs and taxes

•	specify URLs (for an online product), subscription terms (where appropriate), and payment terms.

Digital Offers are created (by OM-Transact utilities) as the Web page is served. The input for the creation of a DO is a pre-Digital Offer (a PDO).

DNS

 Domain Name System. This is the way in which the network turns a host or Internet domain (for example, softquad.com) into an Internet IP address for use with TCP/IP. Internet applications use both domain names and IP addresses to connect to other computers on the Internet.

editor

A program, such as HoTMetaL PRO, used to create, or change the content of, HTML documents. Compare this with browser.

element

Elements are the structural building blocks of HTML documents. Blocks of text in HTML documents are contained in elements according to their function in the document: for example, headings, lists, paragraphs, and links are all surrounded by specific elements.

extranet

1	An intranet that is linked to the intranet(s) of one or more other organizations.

2	An intranet that provides limited access from the outside world.

firewall

  In networking, a firewall is a computer that prevents intruders from accessing all the computers on a network if they manage to break into one computer someplace. The firewall usually sits between your inside network and the outside Internet.

form

A group of graphical controls in an HTML document:  text boxes,  radio buttons, drop-down lists, check boxes, etc. A user browsing the document can enter information in a form and use the browser to submit it to an e-mail address or a program on a  Web server. See also CGI.

frame

A sub-window of a browser window; each frame can display a different document.

FTP

The File Transfer Protocol; one of the schemes that can be specified in a  URL. This has traditionally been one of the most important of the network services. You can use this standard communications protocol to pick up a copy of a file from a remote computer, provided that you can connect to that computer (with TCP/IP, for example).

GIF

A common graphics format used in HTML documents. This format is owned by CompuServe. See also JPEG and PNG.

gopher

 A line-mode Internet protocol that predates the Web. Web browsers can normally communicate with gopher servers.

home page

The top-level document of a site associated with a person, company, organization, or subject, usually containing introductory information and links to other relevant pages.

hot image; hot spot; hot text

Hot text is text in a hypertext document (such as an HTML document) that is a link to some other file; a hot image is an image that is a link to some other file; a hot spot is hot text, or a region in an image map.

HTML

The HyperText Markup Language. This is the usual format for documents that are `published' on the Web. HTML is an application of SGML.

HTML Source editing

HoTMetaL PRO provides an editing window in which you can edit the HTML source (`code') of the document directly, as a text file. This window provides visual cues to identify the various components of the HTML source. HoTMetaL PRO also provides WYSIWYG and Tags On (structural) editing windows.

HTTP, http

The HyperText Transfer Protocol. This protocol is used to transfer HTML documents over the network, between a  Web server and an HTML browser, while you wait. The HTTP protocol is implemented by Web servers.

hypertext

Text that contains links to other documents or specific locations in documents. HTML documents are examples of hypertext.

ICADD

 The International Committee for Accessible Document Design. Techniques created by ICADD and documented in ISO 12083 specify how to automatically transform  SGML files (including HTML files) into input to a Braille, large print, or synthesized voice system. All HTML documents created by HoTMetaL PRO are ICADD-ready and can readily be converted to these formats using ICADD techniques. See also accessibility.

ID (identifier)

 The ID attribute was added to most HTML elements in HTML 3.0. It is used for constructing cascading style sheets: an ID attribute uniquely identifies a single instance of an element so that a style rule can be constructed for that element in a cascading style sheet. An ID must start with a letter, followed by letters and digits; it is not case-sensitive.

IETF

 The Internet Engineering Task Force, responsible for the technical management of the Internet. The IETF coordinates the development of the HTTP standard.

image map; image map file

An image map is an image that is divided into regions, each of them associated with a URL. Clicking in a region causes the file referred to by the associated URL to be accessed.  There are two kinds of image maps: server-side (ISMAP) image maps require an external image map file that defines the regions in an image map and assigns them to URLs. Client-side (USEMAP) image maps accomplish the same thing using special elements in the document itself. Client-side image maps are easier for document authors to implement, but are not supported by all browsers.

Information Manager

The control center of HoTMetaL PRO. It allows you to manage HoTMetaL PRO projects, including creating new projects, editing projects, and moving projects to a Web server (publishing).

interlaced image

An image that is first displayed in the browser at a low resolution, and then in successively higher resolutions, until the whole image has been downloaded. This is sometimes referred to as progressive display. GIF, JPEG, and PNG images can be interlaced. Not all browsers support this feature.

Internet Explorer

A popular browser developed by Microsoft Corporation.

intranet

An `internal net', whose pages are available only on a local server. An organization can use Web technology, such as browsers, servers, and editors to share information among its members or employees, but not make this information accessible to the public over the WWW. See also extranet.

IP address

 An IP address is the specific address, in numerical form, of a computer on the Internet. Each IP address is unique to that computer, and consists of four numbers separated by periods.

ISP

An Internet Service Provider (ISP) provides access to the Internet for a fee, usually through a dialup connection.

ISMAP

Another name for image map.

ISO

 The International Organization for Standardization (`ISO' is not an exact acronym).

ISO 8859-1 character set

  This is the character set for `special' or `accented' characters that is generally in use for HTML documents. This character set is also called `ISO Latin 1'. It includes characters required for most western European languages. This character set is one of several in the ISO 8859 standard: others support, for example, Eastern European languages and Cyrillic-based languages such as Russian. HTML now specifies the much broader Unicode standard.

Java

Java is a programming environment that operates in conjunction with certain browsers. It lets you refer to and run programs, called applets, from an HTML document. Applets perform some special processing in the browser window, such as drawing a picture or interacting with the user. The Java programming language is a platform-independent object-oriented language, with some similarities to C and C++. See also ActiveX.

JavaScript

JavaScript is a programming language that is loosely based on Java. Instead of being referred to in an HTML document, as Java applets are, JavaScript code is usually embedded in the document itself, using the SCRIPT element.

JPEG

An image format that is commonly supported by Web browsers. JPEG is an acronym for Joint Photographic Expert Group. See also GIF, PNG.

layout

1	The visual arrangement of components—text, images, tables, etc.—on a printed or virtual page.

2	In HoTMetaL PRO's Site Maker wizard, a choice of structure for the pages in the site that you're creating.

line-mode browser

 An HTML browser that can be used on a `dumb terminal' such as a VT100 or a PC with communications software. The most common is  Lynx.

link

An element in an HTML document that points to a document, or to a specific location in a document, using a URL. When the document is displayed in a browser, clicking on a link causes the browser to display the document and/or location that it points to.

Lynx

 A common line-mode HTML browser. Lynx can be used over a slow dial-up line or if you don't have a windowing system.

mailto

A scheme that causes a browser to send a form to a particular e-mail address, or generate a mail-editing window.

markup

Special codes in a document that specify how parts of it are to be processed by an application. In a word-processor file, markup specifies how the text is to be formatted; in an HTML document, the markup specifies the text's structural function (heading, title, paragraph, etc.).

marquee

 A piece of text that scrolls across a browser document window. Not all browsers support marquees.

meta-information

 Information about a document that is read by a Web or intranet server. It could be indexing information for search purposes, document creation and expiry information, etc. Meta data is contained in META tags in the HEAD element.

MIME

 The Multipurpose Internet Mail Extensions (RFC 1510): extensions that allow e-mail messages to contain audio, video, and multiple files. It is also the format that Web servers and browsers use to transfer files. The MIME content type of a file tells a browser how to process it. The content type for HTML files is `text/html'.

Mosaic

 The first widely-used HTML browser, developed at the NCSA.

NCSA

 The National Center for Supercomputing Applications, located at the University of Illinois at Urbana-Champaign, Illinois. The NCSA is an (indirectly) U.S. government-funded body that exists to try and make powerful computers more accessible to researchers. Mosaic was originally written at the NCSA.

Netscape Navigator

A popular web browser developed by Netscape Communications Corporation.

ODMA

 Open Document Management API. A standardized, high-level interface between desktop applications and document management systems (DMS).

OLE

  The mechanism under Windows by which ActiveX controls can communicate with a browser.

orphan files

Files in a HoTMetaL PRO project that cannot be reached by following links that start in the project's home page. The HoTMetaL PRO Information Manager locates orphan files for you.

page

A single HTML document (which can be longer than one screen).

PNG

Portable Network Graphics; a graphics format supported by some browsers. PNG is a `lossless' format; some of its advantages are better (24-bit) color support, compression, and anti-aliasing and transparency capabilities.

Pockets

User-defined sets of files that are useful for managing projects. You can create Pockets based on a variety of criteria, such as search results, files with broken links, orphaned files (files without any links to them), etc. Once you have created a Pocket with a certain type of file in it, you can then delete, copy, or rename listed files all together, rather than trying to find each and every file in the project display.

Pre-Digital Offers (PDOs)

The input for the creation of a Digital Offer (DO). A DO, embedded in an HTML page, will:

•	name and describe the product, including a unique ID, price and tax information

•	specify shipping details, costs and taxes

•	specify URLs (for an online product), subscription terms (where appropriate), and payment terms.

Digital Offers are created (by OM-Transact utilities) as the Web page is served.

pretty printing

Saving an HTML file in such a way that it is easily readable by a human; for example, indenting nested lists to reflect their nesting structure.

progressive display

How an interlaced image is displayed by a browser: first at a low resolution, and then in successively higher resolutions, until the whole image has been downloaded.

project

A defined group of files, consisting of linked HTML files, auxiliary HoTMetaL PRO files, and linked files in other formats. Projects are displayed and managed in the Information Manager.

proxy server

A proxy server is a computer that is directly connected to the Internet, allowing multiple users on a network to access the Internet. It may also be part of a firewall, protecting the network from unauthorized access. The proxy server then acts as an agent (or proxy), to make the connection. To you, inside the firewall, it pretends to be the server that you're attempting to connect to; on the outside, it pretends to be the client, and talks to the real server, thus letting you talk to a server outside the firewall (or vice versa). See also socks.

publishing

Publishing a HoTMetaL PRO project means moving your documents to an intranet server so that other users can have access to your project. The publishing component of the HoTMetaL PRO Information Manager lets you publish some or all of your files to a local or remote server. Once you have specified the destination server for your documents, the publishing component will automatically log in to the server and deliver the files to the location you specify.

relative URL

A URL that is missing some information (such as the scheme or network location), which a browser is expected to inherit from the URL of the document that contains the relative URL.

scheme

The part of a URL that tells an HTML  client, such as a browser, which access method to use to retrieve the file specified in the  URL.

screen magnifier

 Screen magnification software helps people with visual impairments to use computers by enlarging the image on the screen. The magnification program runs simultaneously with the computer's operating system and applications. An area of the screen, selected using the mouse or cursor keys, is enlarged to fill the whole screen or displayed in a magnifying window.

screen reader

 A software package that enables people to use computers without having to see the monitor. The screen reader uses a sound card or speech synthesizer to speak the text on the screen and the users' keystrokes. Because screen readers produce a stream of spoken text, the user usually receives a top to bottom, line by line account of a page. This means that graphics, even those including words, are missed and columns are often misread.

server

A networked program that responds to requests from local or remote computers for HTML files. You give the Web server a file name (in the form of a  URL) and it gives you back the file (which can be in any format, text or binary) over the same network connection.

SGML

 An international standard for describing the markup of structured documents. The basic idea behind SGML is that information can be made independent of particular hardware and software. This is done by storing all documents as text-only files (with references to documents in other formats, such as graphics, when required), and using markup that describes the structure of documents, rather than their physical appearance. SGML is described by the ISO 8879 standard (1986). HTML is an application (a particular instance) of SGML.

Site Maker

A component of HoTMetaL PRO; a wizard that lets you design a site by supplying some information about you and/or your company, specifying the purpose(s) of the site, and choosing a decor and layout.

socks

 A protocol used to connect to servers outside a firewall. Not all firewalls support socks, in which case a proxy server is used instead.

style sheet

A cascading style sheet, which can be attached to an HTML document. A cascading style sheet consists of one or more rules. Rules can associate an element, an element in a particular context, certain attributes, or a group of elements with settings for font size, indentation, margins, and many other formatting properties. A rule can also specify that part of the document is to be hidden by the browser.

A style sheet can `import' another style sheet. These style sheets are said to be `cascading' because multiple style sheets can be applied to the same document, but there are cascading rules that specify which style sheet's rules apply to a particular element. See the CSS standard at http://www.w3.org/ and the chapter Styles  for more information.

tags

An element in an HTML file begins with a start-tag (e.g., `<PRE>') and (usually) ends with an end-tag (e.g., </PRE>). In HoTMetaL PRO's Tags On view, tags are represented by tag icons at the beginning and end of an element; you can see the tags directly in the HTML Source view. See also markup.

Tags On editing

HoTMetaL PRO provides an editing window for structural editing. In this window tags are represented by tag icons at the beginning and end of an element. HoTMetaL PRO also has WYSIWYG and   HTML Sourceediting windows.

TCP/IP

 Transmission Control Protocol/Internet Protocol. This is the low-level protocol used by much of the Internet. It's really two protocols; IP packets are sent over a network that itself uses TCP. Other common variations include SLIP (pronounced `slip'; Serial Line/Internet Protocol), and PPP (Point to Point Protocol).

transparent image

An image that has had one color (usually the dominant background color) designated as `transparent', so that when the image is displayed in a browser, the image's background is colored with the browser's background color. The desired effect is an image that does not have a rectangular boundary.

URI

 Uniform Resource Identifier. This is a generic name for any of a class of ways of identifying resources on the Internet. Three types of  URIs are URCs (Uniform Resource Classification), URLs, and URNs (Uniform Resource Name). Implementations of URCs and  URNs are still in an experimental stage. The basic idea is that a resource (e.g., a document) is identified by a URN, a kind of `public identifier' in the SGML sense. The URN is resolved into a URC, which is a collection of information about the resource (it could include, for example, the price of obtaining the resource, and one or more  URLs).

URL

Uniform Resource Locator. A URL is the address of a file, written in a format that can be interpreted by a Web server, which then retrieves the file. A URL can contain a filename, a bookmark to a specific location in the file, a server on which the file resides, and a scheme that tells how the file is to be retrieved. For most files on Web servers, the scheme  http is used.

USEMAP

Another name for a client-side image map.

Visual Dynamic Keyboard (VDK)

An on-screen keyboard provided with HoTMetaL PRO that enables users with physical disabilities to use HoTMetaL PRO and other Windows applications. A variety of hardware can be used with the VDK, instead of a conventional keyboard and mouse. See also accessibility.

W3C

The World Wide Web Consortium, an industry association for the development of World Wide Web technologies. This organization is sponsored by Massachusetts Institute of Technology (USA), Institut National de Recherche en Informatique et en Automatique (INRIA) (France), and Keio University (Japan). For more information, see http://www.w3.org/.

Web, the

An informal name for the World Wide Web.

Web server

A networked program that responds to requests from local or remote computers for HTML files. You give the Web server a file name (in the form of a URL) and it gives you back the file (which can be in any format, text or binary) over the same network connection.

Web View

The Web View (seen on the right side of the HoTMetaL PRO Information Manager window) shows the link structure of your HoTMetaL PRO project as if it were sliding on the surface of a sphere. The Web View starts from a root page: all links go `outwards' from the home page. The various colors used to display the links give information about the type of link.

World Wide Web

This is a generic term for the collection of Web servers and browsers that literally spans the world. Usually abbreviated WWW.

WWW

The World Wide Web.

WYSIWYG editing

What You See Is What You Get. HoTMetaL PRO's WYSIWYG view displays HTML documents as they might appear in a browser. HoTMetaL PRO also provides a Tags On (structural) view and an HTML Source  view.

XML

The eXtensible Markup Language. It is designed to be an easy-to-implement subset of SGML, for use over the Internet. XML is an initiative of the W3C; for more information, see http://www.w3c.org/.

Yuri Rubinsky Insight Foundation (YRIF)

A non-profit organization dedicated to making information more accessible to people with disabilities. YRIF was founded in memory of Yuri Rubinsky (1952-1996), co-founder and former president of SoftQuad Inc. For more information, see http://www.yuri.org/.


Glossary

This chapter defines many of the terms commonly heard when talking about the Web.


absolute URL

A URL that contains a scheme (for example, http) and a server address (for example, www.softquad.com.)


accessibility

HTML documents are said to be accessible if they have been optimized for use by:

1	People with physical disabilities.

2	Users with a variety of hardware and software configurations.

 For example, in an accessible document all images should be accompanied by alternate text; this text can be interpreted by a document reader with a voice synthesizer, and displayed instead of the images by a text-only browser.

Accessible applications are those that provide alternate modes of operation for users with disabilities. HoTMetaL PRO provides the Visual Dynamic Keyboard for this purpose.


ActiveX

ActiveX™ controls are programs that can be referred to in various types of documents and applications under Microsoft Windows, including HTML documents. These programs perform some action in the browser window. OLE is the mechanism under Windows by which ActiveX controls can communicate with a browser. Not all browsers support this feature. See also Java.


adaptive (assistive) technology

The use of hardware and software to assist people who have difficulty accessing information systems using conventional methods. Examples of adaptive technology are screen readers and magnifiers for users with visual disabilities, and alternative keyboards (such as HoTMetaL PRO's Visual Dynamic Keyboard) and switches for people with little or no hand movement.


anchor

 An element in an HTML document that points to another file, or to a specific location in the current file or another file. When the document is displayed in a browser, clicking on a link causes the browser to display the document and/or location that it points to.


applet

 A program, written in the Java language, that is referred to in an HTML document. Applets perform some special processing in the browser window, such as drawing a picture or interacting with the user. See also ActiveX.


attribute

A value that is associated with an element but is not part of the content of the element. Many formatting properties are represented by attributes: for example, background color, table width, and alignment; the URL part of an link is an attribute. HoTMetaL PRO has many specialized dialogs for editing these properties; you can also view and edit any attribute directly using the Attribute Inspector.


broken link

A link to a file that does not exist or is not at the location indicated by the URL.


browser

A program that communicates with Web servers, used for retrieving and displaying documents from the World Wide Web. Most browsers use a graphical interface to provide access to text, images, audio, and video. Compare this with editor. Some well-known browsers are  Lynx, Microsoft Internet Explorer, Mosaic, and Netscape Navigator.


cascading style sheet (CSS)

A style sheet that can be attached to an HTML document. A cascading style sheet consists of one or more rules. Rules can associate an element, an element in a particular context, certain attributes, or a group of elements with settings for font size, indentation, margins, and many other formatting properties. A rule can also specify that part of the document is to be hidden by the browser.

A style sheet can `import' another style sheet. These style sheets are said to be `cascading' because multiple style sheets can be applied to the same document, but there are cascading rules that specify which style sheet's rules apply to a particular element. See the CSS standard at http://www.w3.org/ and the chapter Styles for more information.


CERN

The European Laboratory for Particle Physics near Geneva, Switzerland, where the World Wide Web was `invented'. For more information, see http://www.cern.ch/


CGI

An acronym for Common Gateway Interface. This is a feature of Web servers that allows HTML clients such as browsers to communicate over the web with scripts installed on the server. HTML forms are often processed by such scripts. `CGI scripts' can be written in any programming language that will run on the server; Perl is a common choice.


class; CLASS attribute

HTML 4.0 supports the CLASS attribute for many HTML elements. In general, a set of elements can be given the same CLASS attribute value to mark them for special processing. A set of elements (possibly including different types of elements) that have the same CLASS value is referred to as a `class'. Style properties can be applied to members of a class using cascading style sheets.


clickable image map

A clickable image map (or just image map) is an image that is divided into regions, each of them associated with a URL. Clicking in a region causes the file referred to by the associated URL to be accessed. There are two kinds of image maps: server-side (ISMAP) image maps require an external image map file that defines the regions in an image map and assigns them to URLs. Client-side (USEMAP) image maps accomplish the same thing using special elements in the document itself. Client-side image maps are easier to implement but are not supported by all browsers.


client

In networking, any program that communicates with a server. An example of a client is a browser, which communicates with a Web server.


client-side image map

A type of image map for which the mapped regions and their associated URLs are defined in the document itself. Client-side image maps are not supported by all browsers. Also called a USEMAP.


decor

In HoTMetaL PRO's Site Maker wizard, a set of graphical objects—buttons, lines, bullets—that have a similar visual theme, and which you can choose to give your site a consistent visual appearance.


design time control

An ActiveX control that assists a document creator in designing various objects that can be inserted in an HTML document.


Digital Offers

 A Digital Offer (DO), embedded in an HTML page, will:

•	name and describe the product, including a unique ID, price and tax information

•	specify shipping details, costs and taxes

•	specify URLs (for an online product), subscription terms (where appropriate), and payment terms.

Digital Offers are created (by OM-Transact utilities) as the Web page is served. The input for the creation of a DO is a pre-Digital Offer (a PDO).


DNS

Domain Name System. This is the way in which the network turns a host or Internet domain (for example, softquad.com) into an Internet IP address for use with TCP/IP. Internet applications use both domain names and IP addresses to connect to other computers on the Internet.


editor

A program, such as HoTMetaL PRO, used to create, or change the content of, HTML documents. Compare this with browser.


element

Elements are the structural building blocks of HTML documents. Blocks of text in HTML documents are contained in elements according to their function in the document: for example, headings, lists, paragraphs, and links are all surrounded by specific elements.


extranet

1	An intranet that is linked to the intranet(s) of one or more other organizations.

2	An intranet that provides limited access from the outside world.


 firewall

 In networking, a firewall is a computer that prevents intruders from accessing all the computers on a network if they manage to break into one computer someplace. The firewall usually sits between your inside network and the outside Internet.


form

A group of graphical controls in an HTML document:  text boxes,  radio buttons, drop-down lists, check boxes, etc. A user browsing the document can enter information in a form and use the browser to submit it to an e-mail address or a program on a  Web server. See also CGI.


frame

A sub-window of a browser window; each frame can display a different document.


FTP

 The File Transfer Protocol; one of the schemes that can be specified in a  URL. This has traditionally been one of the most important of the network services. You can use this standard communications protocol to pick up a copy of a file from a remote computer, provided that you can connect to that computer (with TCP/IP, for example).


GIF

A common graphics format used in HTML documents. This format is owned by CompuServe. See also JPEG and PNG.


gopher

A line-mode Internet protocol that predates the Web. Web browsers can normally communicate with gopher servers.


home page

The top-level document of a site associated with a person, company, organization, or subject, usually containing introductory information and links to other relevant pages.


hot image; hot spot; hot text

Hot text is text in a hypertext document (such as an HTML document) that is a link to some other file; a hot image is an image that is a link to some other file; a hot spot is hot text, or a region in an image map.


HTML

The HyperText Markup Language. This is the usual format for documents that are `published' on the Web. HTML is an application of SGML.


HTML Source editing

HoTMetaL PRO provides an editing window in which you can edit the HTML source (`code') of the document directly, as a text file. This window provides visual cues to identify the various components of the HTML source. HoTMetaL PRO also provides WYSIWYG and Tags On (structural) editing windows.


HTTP, http

The HyperText Transfer Protocol. This protocol is used to transfer HTML documents over the network, between a  Web server and an HTML browser, while you wait. The HTTP protocol is implemented by Web servers.


hypertext

Text that contains links to other documents or specific locations in documents. HTML documents are examples of hypertext.


ICADD

The International Committee for Accessible Document Design. Techniques created by ICADD and documented in ISO 12083 specify how to automatically transform  SGML files (including HTML files) into input to a Braille, large print, or synthesized voice system. All HTML documents created by HoTMetaL PRO are ICADD-ready and can readily be converted to these formats using ICADD techniques. See also accessibility.


ID (identifier)

The ID attribute was added to most HTML elements in HTML 3.0. It is used for constructing cascading style sheets: an ID attribute uniquely identifies a single instance of an element so that a style rule can be constructed for that element in a cascading style sheet. An ID must start with a letter, followed by letters and digits; it is not case-sensitive.


IETF

The Internet Engineering Task Force, responsible for the technical management of the Internet. The IETF coordinates the development of the HTTP standard.


image map; image map file

An image map is an image that is divided into regions, each of them associated with a URL. Clicking in a region causes the file referred to by the associated URL to be accessed.  There are two kinds of image maps: server-side (ISMAP) image maps require an external image map file that defines the regions in an image map and assigns them to URLs. Client-side (USEMAP) image maps accomplish the same thing using special elements in the document itself. Client-side image maps are easier for document authors to implement, but are not supported by all browsers.


Information Manager

The control center of HoTMetaL PRO. It allows you to manage HoTMetaL PRO projects, including creating new projects, editing projects, and moving projects to a Web server (publishing).


interlaced image

An image that is first displayed in the browser at a low resolution, and then in successively higher resolutions, until the whole image has been downloaded. This is sometimes referred to as progressive display. GIF, JPEG, and PNG images can be interlaced. Not all browsers support this feature.


Internet Explorer

A popular browser developed by Microsoft Corporation.


intranet

An `internal net', whose pages are available only on a local server. An organization can use Web technology, such as browsers, servers, and editors to share information among its members or employees, but not make this information accessible to the public over the WWW. See also extranet.


IP address

An IP address is the specific address, in numerical form, of a computer on the Internet. Each IP address is unique to that computer, and consists of four numbers separated by periods.


ISP

An Internet Service Provider (ISP) provides access to the Internet for a fee, usually through a dialup connection.


ISMAP

Another name for image map.


ISO

The International Organization for Standardization (`ISO' is not an exact acronym).


ISO 8859-1 character set

 This is the character set for `special' or `accented' characters that is generally in use for HTML documents. This character set is also called `ISO Latin 1'. It includes characters required for most western European languages. This character set is one of several in the ISO 8859 standard: others support, for example, Eastern European languages and Cyrillic-based languages such as Russian. HTML now specifies the much broader Unicode standard.


Java

Java is a programming environment that operates in conjunction with certain browsers. It lets you refer to and run programs, called applets, from an HTML document. Applets perform some special processing in the browser window, such as drawing a picture or interacting with the user. The Java programming language is a platform-independent object-oriented language, with some similarities to C and C++. See also ActiveX.


JavaScript

JavaScript is a programming language that is loosely based on Java. Instead of being referred to in an HTML document, as Java applets are, JavaScript code is usually embedded in the document itself, using the SCRIPT element.


JPEG

An image format that is commonly supported by Web browsers. JPEG is an acronym for Joint Photographic Expert Group. See also GIF, PNG.


layout

1	The visual arrangement of components—text, images, tables, etc.—on a printed or virtual page.

2	In HoTMetaL PRO's Site Maker wizard, a choice of structure for the pages in the site that you're creating.


line-mode browser

An HTML browser that can be used on a `dumb terminal' such as a VT100 or a PC with communications software. The most common is  Lynx.


link

 An element in an HTML document that points to a document, or to a specific location in a document, using a URL. When the document is displayed in a browser, clicking on a link causes the browser to display the document and/or location that it points to.


Lynx

A common line-mode HTML browser. Lynx can be used over a slow dial-up line or if you don't have a windowing system.


mailto

A scheme that causes a browser to send a form to a particular e-mail address, or generate a mail-editing window.


markup

Special codes in a document that specify how parts of it are to be processed by an application. In a word-processor file, markup specifies how the text is to be formatted; in an HTML document, the markup specifies the text's structural function (heading, title, paragraph, etc.).


marquee

A piece of text that scrolls across a browser document window. Not all browsers support marquees.


meta-information

Information about a document that is read by a Web or intranet server. It could be indexing information for search purposes, document creation and expiry information, etc. Meta data is contained in META tags in the HEAD element.


MIME

The Multipurpose Internet Mail Extensions (RFC 1510): extensions that allow e-mail messages to contain audio, video, and multiple files. It is also the format that Web servers and browsers use to transfer files. The MIME content type of a file tells a browser how to process it. The content type for HTML files is `text/html'.


Mosaic

The first widely-used HTML browser, developed at the NCSA.


NCSA

The National Center for Supercomputing Applications, located at the University of Illinois at Urbana-Champaign, Illinois. The NCSA is an (indirectly) U.S. government-funded body that exists to try and make powerful computers more accessible to researchers. Mosaic was originally written at the NCSA.


Netscape Navigator

A popular web browser developed by Netscape Communications Corporation.


ODMA

Open Document Management API. A standardized, high-level interface between desktop applications and document management systems (DMS).


OLE

The mechanism under Windows by which ActiveX controls can communicate with a browser.


orphan files

Files in a HoTMetaL PRO project that cannot be reached by following links that start in the project's home page. The HoTMetaL PRO Information Manager locates orphan files for you.


page

A single HTML document (which can be longer than one screen).


PNG

Portable Network Graphics; a graphics format supported by some browsers. PNG is a `lossless' format; some of its advantages are better (24-bit) color support, compression, and anti-aliasing and transparency capabilities.


Pockets

User-defined sets of files that are useful for managing projects. You can create Pockets based on a variety of criteria, such as search results, files with broken links, orphaned files (files without any links to them), etc. Once you have created a Pocket with a certain type of file in it, you can then delete, copy, or rename listed files all together, rather than trying to find each and every file in the project display.


Pre-Digital Offers (PDOs)

The input for the creation of a Digital Offer (DO). A DO, embedded in an HTML page, will:

•	name and describe the product, including a unique ID, price and tax information

•	specify shipping details, costs and taxes

•	specify URLs (for an online product), subscription terms (where appropriate), and payment terms.

Digital Offers are created (by OM-Transact utilities) as the Web page is served.


pretty printing

Saving an HTML file in such a way that it is easily readable by a human; for example, indenting nested lists to reflect their nesting structure.


progressive display

How an interlaced image is displayed by a browser: first at a low resolution, and then in successively higher resolutions, until the whole image has been downloaded.


project

A defined group of files, consisting of linked HTML files, auxiliary HoTMetaL PRO files, and linked files in other formats. Projects are displayed and managed in the Information Manager.


proxy server

A proxy server is a computer that is directly connected to the Internet, allowing multiple users on a network to access the Internet. It may also be part of a firewall, protecting the network from unauthorized access. The proxy server then acts as an agent (or proxy), to make the connection. To you, inside the firewall, it pretends to be the server that you're attempting to connect to; on the outside, it pretends to be the client, and talks to the real server, thus letting you talk to a server outside the firewall (or vice versa). See also socks.


publishing

Publishing a HoTMetaL PRO project means moving your documents to an intranet server so that other users can have access to your project. The publishing component of the HoTMetaL PRO Information Manager lets you publish some or all of your files to a local or remote server. Once you have specified the destination server for your documents, the publishing component will automatically log in to the server and deliver the files to the location you specify.


relative URL

A URL that is missing some information (such as the scheme or network location), which a browser is expected to inherit from the URL of the document that contains the relative URL.


scheme

The part of a URL that tells an HTML  client, such as a browser, which access method to use to retrieve the file specified in the  URL.


screen magnifier

Screen magnification software helps people with visual impairments to use computers by enlarging the image on the screen. The magnification program runs simultaneously with the computer's operating system and applications. An area of the screen, selected using the mouse or cursor keys, is enlarged to fill the whole screen or displayed in a magnifying window.


screen reader

A software package that enables people to use computers without having to see the monitor. The screen reader uses a sound card or speech synthesizer to speak the text on the screen and the users' keystrokes. Because screen readers produce a stream of spoken text, the user usually receives a top to bottom, line by line account of a page. This means that graphics, even those including words, are missed and columns are often misread.


server

A networked program that responds to requests from local or remote computers for HTML files. You give the Web server a file name (in the form of a  URL) and it gives you back the file (which can be in any format, text or binary) over the same network connection.


SGML

An international standard for describing the markup of structured documents. The basic idea behind SGML is that information can be made independent of particular hardware and software. This is done by storing all documents as text-only files (with references to documents in other formats, such as graphics, when required), and using markup that describes the structure of documents, rather than their physical appearance. SGML is described by the ISO 8879 standard (1986). HTML is an application (a particular instance) of SGML.


Site Maker

A component of HoTMetaL PRO; a wizard that lets you design a site by supplying some information about you and/or your company, specifying the purpose(s) of the site, and choosing a decor and layout.


socks

A protocol used to connect to servers outside a firewall. Not all firewalls support socks, in which case a proxy server is used instead.


style sheet

A cascading style sheet, which can be attached to an HTML document. A cascading style sheet consists of one or more rules. Rules can associate an element, an element in a particular context, certain attributes, or a group of elements with settings for font size, indentation, margins, and many other formatting properties. A rule can also specify that part of the document is to be hidden by the browser.

A style sheet can `import' another style sheet. These style sheets are said to be `cascading' because multiple style sheets can be applied to the same document, but there are cascading rules that specify which style sheet's rules apply to a particular element. See the CSS standard at http://www.w3.org/ and the chapter Styles  for more information.


tags

An element in an HTML file begins with a start-tag (e.g., `<PRE>') and (usually) ends with an end-tag (e.g., </PRE>). In HoTMetaL PRO's Tags On view, tags are represented by tag icons at the beginning and end of an element; you can see the tags directly in the HTML Source view. See also markup.


Tags On editing

HoTMetaL PRO provides an editing window for structural editing. In this window tags are represented by tag icons at the beginning and end of an element. HoTMetaL PRO also has WYSIWYG and   HTML Sourceediting windows.


TCP/IP

Transmission Control Protocol/Internet Protocol. This is the low-level protocol used by much of the Internet. It's really two protocols; IP packets are sent over a network that itself uses TCP. Other common variations include SLIP (pronounced `slip'; Serial Line/Internet Protocol), and PPP (Point to Point Protocol).


transparent image

An image that has had one color (usually the dominant background color) designated as `transparent', so that when the image is displayed in a browser, the image's background is colored with the browser's background color. The desired effect is an image that does not have a rectangular boundary.


URI

Uniform Resource Identifier. This is a generic name for any of a class of ways of identifying resources on the Internet. Three types of  URIs are URCs (Uniform Resource Classification), URLs, and URNs (Uniform Resource Name). Implementations of URCs and  URNs are still in an experimental stage. The basic idea is that a resource (e.g., a document) is identified by a URN, a kind of `public identifier' in the SGML sense. The URN is resolved into a URC, which is a collection of information about the resource (it could include, for example, the price of obtaining the resource, and one or more  URLs).


URL

Uniform Resource Locator. A URL is the address of a file, written in a format that can be interpreted by a Web server, which then retrieves the file. A URL can contain a filename, a bookmark to a specific location in the file, a server on which the file resides, and a scheme that tells how the file is to be retrieved. For most files on Web servers, the scheme  http is used.


USEMAP

Another name for a client-side image map.


Visual Dynamic Keyboard (VDK)

An on-screen keyboard provided with HoTMetaL PRO that enables users with physical disabilities to use HoTMetaL PRO and other Windows applications. A variety of hardware can be used with the VDK, instead of a conventional keyboard and mouse. See also accessibility.


W3C

The World Wide Web Consortium, an industry association for the development of World Wide Web technologies. This organization is sponsored by Massachusetts Institute of Technology (USA), Institut National de Recherche en Informatique et en Automatique (INRIA) (France), and Keio University (Japan). For more information, see http://www.w3.org/.


Web, the

An informal name for the World Wide Web.


Web server

A networked program that responds to requests from local or remote computers for HTML files. You give the Web server a file name (in the form of a URL) and it gives you back the file (which can be in any format, text or binary) over the same network connection.


Web View

The Web View (seen on the right side of the HoTMetaL PRO Information Manager window) shows the link structure of your HoTMetaL PRO project as if it were sliding on the surface of a sphere. The Web View starts from a root page: all links go `outwards' from the home page. The various colors used to display the links give information about the type of link.


World Wide Web

This is a generic term for the collection of Web servers and browsers that literally spans the world. Usually abbreviated WWW.


WWW

The World Wide Web.


WYSIWYG editing

What You See Is What You Get. HoTMetaL PRO's WYSIWYG view displays HTML documents as they might appear in a browser. HoTMetaL PRO also provides a Tags On (structural) view and an HTML Source  view.


XML

The eXtensible Markup Language. It is designed to be an easy-to-implement subset of SGML, for use over the Internet. XML is an initiative of the W3C; for more information, see http://www.w3c.org/.


Yuri Rubinsky Insight Foundation (YRIF)

A non-profit organization dedicated to making information more accessible to people with disabilities. YRIF was founded in memory of Yuri Rubinsky (1952-1996), co-founder and former president of SoftQuad Inc. For more information, see http://www.yuri.org/.