Copyright: This help file copyright ® 1996 SoftQuad Inc.
Citation: This information copyright ® 1996 SoftQuad Inc.


Welcome to HoTMetaL Light

Getting started

HoTMetaL Light tutorials

Core HTML

Extensions to HTML

Working with files

Marking up documents

URLs

Word-processing features

Working with images

Tables

Local styles

Searching and replacing

User-defined macros

Glossary

Appendix 1: SGML conformance


Welcome to HoTMetaL Light

Welcome to SoftQuad HoTMetaL Light, a professional HTML editor.

About this manual


About this manual

This manual consists of the following chapters:

– Welcome to HoTMetaL Light.

– Getting started, an introduction to HoTMetaL Light.

– A tutorial on HoTMetaL Light and HTML.

– A quick reference to the core elements of HTML.

– A guide to common extensions to HTML.

– Chapters on each of the main areas of functionality:

– Working with files

– Markup

– Word-processing features

– URLs

– Images and image maps

– Tables

– Local styles

– Searching and replacing

– Macros

– A glossary.

– An appendix on SGML conformance.

Windows 95, Windows 3.1, and Windows NT

Using the manual


Windows 95, Windows 3.1, and Windows NT

HoTMetaL Light runs almost identically under Windows 95, Windows 3.1, and Windows NT. The illustrations of dialog boxes and document windows in this manual show HoTMetaL Light running under Windows 95. The layout and controls are the same in the corresponding dialog boxes under Windows 3.1 and Windows NT. In this manual, the term folder is used for what Windows 3.1 and Windows NT call a directory. Any other platform-specific information is noted in the appropriate sections in the manual.


Using the manual

The `core' chapters of the manual are Getting started, the tutorial, Working with files, Marking up documents, and URLs.

If you've never used HoTMetaL Light before, we strongly suggest that you work through the tutorial. We estimate that it will take about two and a half hours to complete the entire tutorial; if you do not need to do the Forms section, it should take about an hour and a half. If you want a quick introduction to the product, you can do just the first section of the tutorial, called Getting started: a basic document.

Even if you are familiar with HoTMetaL Light 2.0, you should read the Getting started and Core HTML chapters to become familiar with changes to the HoTMetaL Light user interface.


Getting started

This chapter tells you how to start up HoTMetaL Light, and gives the basic information you need to start creating and editing files.

If you are new to HoTMetaL Light, you should certainly read this chapter, as it will help you get acquainted with the product and learn about the components and procedures you'll need to get your work done.

Purpose: editors and browsers

The HoTMetaL Light interface

An overview of the menus

Creating and editing files and opening templates

The current element

Moving between documents

Toolbars

Pop-up menus

Options

`Special' characters

Pinning dialog boxes

Showing and hiding tags

Showing and hiding comments

Setting the HoTMetaL Light directory

Publish

Macros

Some common error messages

If you see something you like...

For further information...


Purpose: editors and browsers

HoTMetaL Light is an editor for creating files that can be read by browsers (such as Mosaic, Netscape, and Internet Explorer) that are connected to the World Wide Web (WWW). The file format for such files is called HTML (Hypertext Markup Language). The main difference between an editor like HoTMetaL Light and browsers such as Mosaic is that HoTMetaL Light is for creating and editing files, and browsers are for retrieving, displaying, and reading files. Any text editor can create an HTML file (but we believe that HoTMetaL Light is a much more convenient and pleasant way of doing it). Browsers open files saved by HoTMetaL Light that consist of text and markup, and do things like screen formatting, generating graphical forms, issuing mail messages, and so forth. It's important to understand that the different kinds of programs do different things. There are many browsers available, and they can process the same HTML file in different ways--and these are outside the control of HoTMetaL Light. What is in HoTMetaL Light's control is creating correctly marked-up documents. You will find this important because documents are more easily interchanged (displayed by different people using different browsers, for example) when they conform to an agreed standard.

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). The original ISPs were government and university sites; nowadays, most ISPs are commercial sites, where users pay for access or companies put their information on the Web. Most ISPs provide you with browser software to access the World Wide Web, and space on their server to put your HTML documents. Some ISPs are local--specific to a particular city or area--while others are very large and can be accessed from many different locales. The geographical location of your ISP does not matter; once your documents are on a machine that is connected to the World Wide Web, they can be accessed from anywhere.

The HTML format is based on the Standard Generalized Markup Language (SGML). All HTML files are SGML files (the converse is not true, however--there are many other file formats described by SGML, so most SGML files are not in HTML format.)

Some browsers have a command (usually called View Source... or a similar name) that lets you see what the HTML format looks like. HoTMetaL Light provides an easy-to-use, graphical, structured editor for creating files in this format.


The HoTMetaL Light interface

There are many ways to insert and edit markup and text in HoTMetaL Light. Commands can be accessed in four ways:

– Toolbars: clicking on a toolbar button manipulates files or inserts and edits markup. See Tool palettes.

– Menus: pull-down menus give access to all commands.

– Keyboard shortcuts: many common HoTMetaL Light commands are linked to a keyboard shortcut, shown in the menus.

– Mouse shortcuts: a right-button mouse click will bring up a context-sensitive menu that allows you to cut, copy, paste, select elements, insert elements, edit element attributes, and view or edit documents and images. (See Pop-up menus  for more details.)

Throughout this manual, the terms `left' and `right' mouse buttons refer to the default mappings of the mouse (`main' and `secondary'). If you have a left-handed or non-standard mouse, please translate these terms into whatever vocabulary is appropriate for you.

Dragging and dropping text and objects


Dragging and dropping text and objects

HoTMetaL Light supports drag and drop. This feature makes it easy to create links to images, other Web pages, and non-hypertext files with a simple mouse movement. As well, you can move and copy text within HoTMetaL Light by dragging and dropping. If you have applications that support OLE--Microsoft's standard for linking across applications--you can drag and drop text between those applications and HoTMetaL Light.

To move text, elements, or images within HoTMetaL Light:

• Highlight the text or object that you want to move.

• Position the mouse cursor over the selection, then press and hold the left mouse button. The cursor will change to the special drag and drop move cursor.

• Move your mouse cursor to wherever you want this selection to be moved and release the left mouse button (an I-bar insertion cursor will follow the mouse movement).

If you release the left mouse key at a point where text would be invalid, HoTMetaL Light will attempt to insert markup to make the drag and drop action work; for example, HoTMetaL Light will insert a P element if you are dragging and dropping text to a location inside the BODY but not inside any other element. If HoTMetaL Light can't create valid markup, nothing will happen. You'll have to drag and drop the text again to a valid location.

To copy, instead of moving, follow the same sequence of mouse movements, but hold down the Ctrl key at the same time.

To move text between other applications and HoTMetaL Light:

• Position your application windows so that you can see both the HoTMetaL Light window and the other application window.

• Select the text that you want to move.

• Position your mouse cursor over the selection and drag the text to the HoTMetaL Light window by pressing and holding the left mouse button (holding down the Ctrl key if you want to copy and not move the text).

• Drop the text by releasing the left mouse button wherever you want it to go. If you release the left mouse key at a point where text would be invalid, HoTMetaL Light will attempt to insert markup to make the drag and drop action work. If HoTMetaL Light can't create valid markup, nothing will happen. You'll have to drag and drop the text again to a valid location.


An overview of the menus

This section provides a summary of the main features.

– File menu: file manipulation; e.g., opening and saving files.

– Edit menu: cutting and pasting, find and replace, spell checking.

– View menu: local screen formatting.

– Markup menu: inserting and changing markup, creating and editing anchors.

– Format menu: text style, alignment, and color; backgrounds.

– Tools menu: image, table, and frame editing; publishing.

– Forms menu: inserting and editing forms.

– Special menu: checking document conformance; creating and running macros.

– Window menu: appearance and control of document windows.

– Help menu: on-line help, other help documents.


Creating and editing files and opening templates

This section gives the basic information needed to start editing files with HoTMetaL Light.

• Launch HoTMetaL Light.

Creating a new file

Templates

Editing an existing file

Now what?


Creating a new file

 When you launch HoTMetaL Light, there is no open file. There are two ways to create a new file in HoTMetaL Light. To create a new, empty file:

• Click on the [image]   button.

HoTMetaL Light opens the default template file. This contains the minimum markup needed for a HTML document. You can choose a different default template in the Defaults for New/Open section of the Options dialog box.

To create a new file based on a template file:

• Choose the New... command from the File menu.

The template dialog box appears. See the following section.


Templates

A number of document templates are supplied with HoTMetaL Light, in the template folder  inside the HoTMetaL Light folder. These include templates for personal home pages, corporate home pages, internal (intranet) pages, etc. You can open these with the New... command in the File menu. This brings up a dialog box that allows you to choose which template you want to open.

When you open templates with the New... command, HoTMetaL Light opens a copy of the document, not the document itself. Therefore, when you save that document, you will not be saving over the existing template.

You can use any document that you have created as a template. You can save it to one of the currently existing folders inside the template folder (Company, Personal, Intranet, or Tutorial) or you can create your own folder. If you create a new folder within the template folder, it will show up as a template group in the New dialog box.

Opening template files by choosing the Open... command in the File menu will directly edit the template file. Changes that you save to the file will permanently alter the template and will be present whenever you open that template using New... command.

If you chose a Compact or Custom install when you first installed HoTMetaL Light, you may have a smaller selection of templates. If you want to use any of these files, but didn't install them, you should reload your HoTMetaL Light CD and do so. You can also access the template files directly from the CD.


Editing an existing file

If you already have an HTML file that you want to edit:

• Choose the Open... command in the File menu or click on the  [image]   toolbar  button.

• In the dialog box that appears, choose the file that you want to edit.

Once you've done this, HoTMetaL Light opens the file and you can begin editing.

HoTMetaL Light will try to open HTML files even if they contain bad markup, but occasionally it will not be able to open a file. A dialog box may come up with an error message; see Common `Open' error messages for details.

See the section   Opening a file for more information.


Now what?

Now that you have an open file, you can start entering text and markup. The markup consists of:

– Elements, which surround parts of the document according to their function or appearance. Elements begin with `start-tags' P and end with `end-tags' P. You can enter elements by using the toolbars  or the Markup menu

– Attributes, which are values associated with elements, but are not part of the content. You can enter or change attributes by right-clicking inside an element and choosing Element Attributes... from the pop-up menu that appears, choosing the Element Attributes... command in the Markup menu, or typing F6

If you're unsure of what to do at this point, we suggest that you try the HoTMetaL Light tutorial  which has exercises demonstrating the main features of HoTMetaL Light and HTML.


The current element

The name of the current element (the one containing the insertion point or selection) is displayed in the `mini-context area', which is immediately to the left of the horizontal scrollbar at the bottom of the document window.

You can change the width of the mini-context area in the Defaults for New/Open section of the Options dialog: enter the desired width in pixels. Certain settings for the current element--such as URLs and Name attributes--appear in the lower left-hand corner of the display window, under the mini-context area.


Moving between documents

If you have more than one document open in HoTMetaL Light, 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, and you can choose whichever one you want to edit from this menu. You can move through the document list in in the order that you last viewed them using the Nextand Previous commands in the Window menu. You may also use the [image] (Back) and [image] (Forward) toolbar buttons. These commands are also linked to the standard Windows keyboard commands:

– Ctrl-Tab or Ctrl-F6 (Next)

– Shift-Ctrl-Tab or Shift-Ctrl-F6 (Previous)

HoTMetaL Light allows you to move between documents by following local links. If you have an anchor that points to a file on your PC, clicking on this anchor with the right mouse button will display a pop-up menu that contains the choices Edit... and View.... Choosing Edit... will open the document in HoTMetaL Light for editing (if it's not already open). Choosing View... will preview this document using the default Web browser.


Toolbars

HoTMetaL Light has four toolbars, which are located just below the menu bar by default. The top toolbar (referred to as the `Standard' toolbar) provides quick access to a number of frequently-used menu commands. The second (`Common HTML') toolbar is for creating the more common HTML elements and editing common attributes; the third (`Other HTML') toolbar is for creating the less common HTML elements; and the fourth (`Forms') toolbar is for inserting form elements and other HTML markup. A `tooltip', a short description of what a button does, will appear if you position the mouse pointer above it. Tooltips can be shown or hidden; turn the Show Tooltips command on or off in the General section of the Options dialog box.

All four toolbars can be `torn off': just click anywhere on the toolbar's background and drag it to wherever you want. When a toolbar is torn off, it becomes a two-column `palette'. To change the palette back to a toolbar, click on its title bar and drag it back to its default location. The Toolbars... command in the View menu lets you choose which toolbars should be visible. You can dismiss a palette by double-clicking on the control button in its upper left corner.

 `Standard' toolbar icons

`HTML' toolbar icons


`Standard' toolbar icons

– [image]  New...

– [image]  Open...

– [image]  Save

– [image]  Print...

– [image]  Back...

– [image]  Forward...

– [image]  Cut

– [image]  Copy

– [image]  Paste

– [image]  Undo

– [image]  Redo

– [image] Find and Replace...

– [image] Find Next

– [image] Check Spelling...

– [image]  Thesaurus...

– [image] Hide Tags

– [image] Insert Element...

– [image] Remove Tags

– [image] Validate Document


`HTML' toolbar icons

When you click on a button in one of the HTML toolbars,  HoTMetaL Light will insert an element or change the current element type, as appropriate. See the section Using the toolbars to create markup  for more information.


Pop-up menus

Part of HoTMetaL Light's interface is a context-sensitive menu that appears when you click and release the right mouse button in the HoTMetaL Light document window. This menu changes depending on where the mouse cursor is at the time that the right button is pressed. There are three different menus that can appear: the Default pop-up menu, the Anchor pop-up menu, and theImage pop-up menu.

The Default pop-up menu gives you easy access to some commonly used HoTMetaL Light commands:

– The standard text and object manipulation commands: Cut, Copy, and Paste.

– Insert Element...: Allows you to insert HTML elements (see Inserting an element).

– Select Element: Selects the current element (see Select Element).

– Element Attributes...: allows you to edit the current element's attributes (see Attributes).

The Anchor pop-up menu appears when you right-click inside an anchor element. It has all of the default commands, plus two that are specific to anchors:

– Edit...: Opens the document specified in the anchor in HoTMetaL Light. If the document cannot be found, an error dialog will be displayed. If the document is not on a local filesystem, this command is disabled.

– View...: Launches the document specified in the anchor for viewing in the default Web browser.

The Image pop-up menu appears when you right-click inside an image element. Clicking inside an INPUT element of type `image' also brings up this pop-up menu. In this menu, several commands are disabled: you can't cut, copy or insert an element within an image. The View... command displays the image in the default image viewer  and the Edit... command brings up the image in the default image editor. Image Attributes...: brings up the Image Attributes dialog box (see Inserting images).


Options

You can configure many aspects of HoTMetaL Light's behavior using the Options... command in the Special menu. This command lets you configure:

– Paths (folders) and file extensions

– Save options (line breaks, backups, and auto-saving)

– Spell checking dictionaries

– Defaults for new files (default template, screen display)

– Helper applications for viewing and editing non-HTML files

– General options: tag icon font and color, size text to window, markup options

The Options dialog box is divided into sections, in `card file' style. To choose a section, click on its `tab' with the mouse.

The options are documented in the sections on the features they affect. If you want to find information on a specific option, look under `options' in the index.


`Special' characters

HTML supports the ISO 8859/1 character set (also called ISO  Latin-1) and a number of other `special' characters. To enter a `special' character (one that doesn't have a key on your keyboard) you can:

–  Hold down the Alt key while typing (from the numeric keypad) a zero followed by the ANSI numeric code for the character you want. For example, Alt + `0233' will enter the `é' character.

–  Choose Special Characters... from the Markup menu, or click on the [image] toolbar button. This gives you a  palette  for special characters:

Just click on a character with the mouse to insert it.

To dismiss the Special Characters palette, double-click on the control button in the upper left corner of the palette.

When you save a file, non-ASCII characters will be converted to entities. For example, `é' will be converted to the entity definition that Web browsers can read: `&eacute;'.


Pinning dialog boxes

Most of the HoTMetaL Light dialog boxes will be dismissed once you perform an action in them (clicking on Apply, Ok, Insert Element, etc.). You may find some dialog boxes more convenient to use if you pin them to the screen, as follows:

• Click and release the right mouse button on the title bar of the dialog (if you're using Windows 3.1 or Windows NT, click on the button in the upper left corner of the dialog).

• Choose Pin from the menu that appears.

 A pinned dialog box will stay up on the screen after you perform an action. You can move the dialog to a convenient location on the screen so that it doesn't cover part of the document window.


Showing and hiding tags

By default, the HTML tags in your document will appear on the screen as small tag icons. The tags that point to the right are start-tags, indicating the beginning of an element, while those that point to the left are end-tags, indicating the end of an element. If you choose Hide Tags in the View menu, the tags will be hidden. The command will then toggle to Show Tags: choosing this command will display the tags again. The    [image] toolbar  button is equivalent to this command. You can configure HoTMetaL Light to show or hide tags by default in the Defaults for New/Open section of the Options dialog box.

You can set the colors of the tag icon (foreground and background) and the size and font of the tag text in the General section of the Options dialog box.


Showing and hiding comments

Comments are a special type of HTML markup, and do not appear when a document is viewed in a Web browser. They are often used to make remarks on the document that can be useful for Web developers and content creators. You can show or hide comments within HoTMetaL Light. If you choose Hide Comments in the View menu, comments will be hidden. The command will then toggle to Show Comments; choosing this command will display the comments again. You can configure HoTMetaL Light to show or hide comments by default in the Defaults for New/Open section of the Options dialog box.

Comment tags are displayed and hidden by the Show/Hide Tags command in the same way that element tags are.


Setting the HoTMetaL Light directory

You should follow the steps in this section only if you are running a copy of the HoTMetaL Light executable file (hmpro3.exe) that is not in the folder where you installed HoTMetaL Light. In this situation, HoTMetaL Light will not be able to find the various auxiliary files and folders that it needs to run (rules folder, styles folder etc.). You must explicitly inform HoTMetaL Light of the location of the HoTMetaL Light folder.

If you are running Windows 95:

– Using Windows Explorer, create a shortcut for HoTMetaL Light.

– Click on the shortcut with the right mouse button.

– Choose Properties from the menu that appears.

– In the Properties dialog box, click on the Shortcut tab.

– In the Target text box in this dialog, add the -sqdir option followed by the name of the HoTMetaL Light folder. For example:

"C:\SoftQuad\HoTMetaL LIGHT\hmlight3.exe" -sqdir c:\hmlight3

The path must be in quotes if it contains spaces.

– Click on the OK button.

Double-clicking on the shortcut will launch HoTMetaL Light with the -sqdir option set to a different folder.

If you are running under Windows 3.1 or Windows NT:

– Click once on the HoTMetaL Light icon.

– Choose the Properties... command in the Windows File menu.

– A dialog box will appear. In the Command line text box in this dialog, add the -sqdir option followed by the name of the HoTMetaL Light folder. For example:

c:\special\hmlight3.exe -sqdir c:\hmlight3


Publish

When you create your web sites in HoTMetaL Light, you will generally be saving your documents to a local PC that is not on the World Wide Web. In order for your documents to be accessible over the Web, you must:

– Change the URLs in your document so that they point to documents on the Web, not on your PC;

– Upload your documents to a computer that is connected to the Web.

While HoTMetaL Light is not a telecommunications program and therefore cannot upload your files, HoTMetaL Light does provide a quick and easy way of changing your URLs so that they will work on the Web. The command is called Publish...: see Publish and Changing your URLs for the Web for details.


Macros

If there are sequences of commands that you frequently type in while editing in HoTMetaL Light, you may find it convenient to create a keyboard shortcut--called a keyboard macro or simply a macro--to make your work easier. There are some useful macros that come with HoTMetaL Light, and you can make your own personal ones. See User-defined macros for details.


Some common error messages
Some common error messages (Windows 3.1 only)

Four common error messages that are caused by running out of memory are:

Not running on a DPMI implementation

cons: out of memory

Not enough memory to run application

Insufficient memory to run this application.

Quit one or more Windows applications and then try again.

The first message is the most serious one: it means that you do not have enough free memory for Microsoft Windows to run in enhanced mode, which is required for HoTMetaL Light. You will have to install more `real' memory in your PC. We recommend that you have at least 8 Mb (preferably 12 Mb) of real memory.

The other messages mean that there is not enough free memory to start up HoTMetaL Light. If you have several applications open, try closing down some and restarting HoTMetaL Light. This may clear up your memory difficulties.

If this doesn't help, try the following:

• Choose About Program Manager... from the Program Manager's Help menu. The amount of free memory is displayed at the bottom of the dialog box that appears.

• Now double-click on the Control Panel icon (usually found in the `Main' program group) and then double-click on the Enhanced icon in the window that appears.

• In the dialog box that now appears, click on the Virtual Memory button. This brings up a dialog box that displays the swapfile size. You can calculate the actual amount of memory available in the system by subtracting the swapfile size from the free memory displayed by the Program Manager.

HoTMetaL Light requires some `real' (core) memory to start up, so you will have problems if the amount you calculated above is very small or negative.

These are some of the strategies for freeing up memory:

1. Close some applications.

2. From the DOS prompt, type:

smartdrv

This tells you how much memory has been allocated for smartdrv. Typically this will be 2 Megabytes. You can lower this amount by opening the autoexec.bat file and and adding parameters that set the memory allocation at the end of the SMARTDRV entry. For example:

LH C:\WINDOWS\SMARTDRV.EXE 512 512

You must then reboot your PC.

3. As a last resort, you can restart Windows, or reboot your PC. If memory has been temporarily corrupted, the memory error may be bogus.


If you see something you like...

If you see a Web page that contains a typographical effect, form, etc., that you like, then the easiest way of achieving the same thing yourself is to save the file with the browser (make sure you save it in HTML format) and then open it with HoTMetaL Light. Remember, though, that some files that you download from the Web may have incorrect markup, and that graphic images are not saved with the file when you download a Web page: they are separate files. Also note that while document markup is not copyrighted, content and graphic images can be.


For further information...

The relevant Usenet newsgroups (those in the comp.infosystems.www hierarchy) are a source of information, including an FAQ (Frequently Asked Questions) list.

Our technical support Web pages (accessible from the SoftQuad home page at http://www.sq.com/) contain answers to frequently asked questions, particularly those that concern auxiliary technologies such as browsers.

As well, any bookstore with a computer section is likely to have many books on the World Wide Web, HTML, Web browsers, and the Internet in general.


HoTMetaL Light tutorials

If you're new to creating Web (HTML) documents, you may want to use these short tutorials.

The tutorials don't cover each topic exhaustively, but give enough information for you to master a topic with additional details from the next chapter, Quick Reference.

The first tutorial may be used as a `quick start' that shows you how to create a file with HoTMetaL Light. When you've finished that section, you can continue with the other sections or, if you feel comfortable using or experimenting with HTML, you can skip over the rest of the tutorials and refer to the Core HTML chapter when you need to find out something about HTML.

Getting started: a basic document

Character formatting

Formatting blocks of text

Lists

Links and URLs

Backgrounds and fonts

Alignment

Publish

Forms


Getting started: a basic document

• Start up HoTMetaL Light.

Four  toolbars should be visible. If they aren't:

• Choose Toolbars... in the View menu.

• Turn on all four check boxes.

• Click on Ok.

Now:

• Choose New... from the File menu.

• Select the file tutor.htm   in the file chooser in the Tutorial folder.

• Click on the Ok  button.

HoTMetaL Light opens this template, which you can now edit. Notice that the file name in the document window is Document1: when you open a template, HoTMetaL Light changes the name so that when you save the document, the original template doesn't get overwritten.

This template contains all the required parts for a valid HTML document (head, title, body) but it doesn't have any content yet.

• Move the insertion point inside the TITLE element (that is, just to the right of the TITLE start-tag).

The label inside TITLE is not part of the content of the element: it's a prefix that prompts you to enter some text.

• Inside the TITLE element, type a title for your sample document.

When you display this document in a browser, the contents of this element will generally be displayed in the title bar.

The main part of your document is the body, contained in the BODY element.

• Move the insertion point   to the right of the BODY start-tag.

You have many choices of elements to insert. However, it's normal to start your document with a heading. Web documents have six levels of headings, represented by the elements H1 through H6.

An H1 heading should be used for major divisions in your document.

• Click on the [image]   toolbar button.

• Type the following (or some other text of your choice) inside the H1 element:

George Orwell

Now you're ready to insert some text.

• Move the insertion point   to the right of the H1 end-tag.

• Click on the   [image] (paragraph) toolbar button.

• Type some text such as the following:

You can begin smaller subdivisions of the document with lower-level (H2 through H6) headings. You can skip levels if you want, but your documents will usually look better if you don't.

• Move the insertion point to the right of the P end-tag.

• Click on the [image]   toolbar button.

• Type the text:

Early life and education

• Move the insertion point to the right of the H2 end-tag.

• Click on the   [image] toolbar button.

• Type the text:

The document should now look something like this:

Now perhaps you'd like to see what this document will look like when it's published on the Web. But first, save the file:

• Click on the [image]   toolbar  button, choose Save from the File menu, or type Ctrl-S   at the keyboard and save the file using the file chooser dialog box that appears.

• Now, choose one of the four preview toolbar buttons, found on the right-hand side of the third toolbar (`Other HTML').

The toolbar button will be blank if you have never chosen a browser for that button. If you click on a blank button, you'll get a file chooser dialog box that lets you locate and choose a Web browser. When you have selected a browser, the blank toolbar button will contain an icon for the particular browser. The tooltip that comes up when you hold the mouse cursor over the button will also tell you which browser is associated with that button. All future previewing can be done with one click on that toolbar button.

To change the browser associated with a toolbar button, you must choose the `Preview...' command from the File menu and delete the browser from the browser list. A toolbar button will become blank and a new browser can be selected either from the `Preview...' dialog box, or by clicking on the blank toolbar button.

You may also preview documents without using the toolbar.

• Choose Preview... from the File menu, or type Ctrl-M  at the keyboard.

• Select a browser from the list and click on the Preview button.

The browser is launched, displaying your document.

See Previewing your file in a browser   if you want more information on the Preview... command.

As we suggested at the start of the chapter, you may now wish to skip directly to the Core HTML chapter, or continue with the tutorial.


Character formatting
Character formatting: adding emphasis to inline text

This section is about formatting inline text--text that's embedded in a paragraph or some other block of text. Formatting blocks is covered in the next section. In an HTML document, you add emphasis to a piece of text by surrounding it with an element. This is similar to the approach of many desktop publishing programs, in which you would, for example, highlight a piece of text and choose a type style (such as bold or italic) from a menu.

• In the document you just created, highlight the words `Eric Arthur Blair'.

• Click on the   [image] toolbar button.

This time, clicking on the toolbar button has surrounded the selection (with EM and EM tag icons). The text should be formatted in italic (unless someone has changed the styles). In any case, a browser will generally format it in italic--you can use Preview... to try this out. Of course, you don't always have to surround the text after you've typed it--you can insert an EM element by clicking on the [image]   toolbar button when there's no highlighted text, and then just type the text between the tags.

You can also insert or surround text with EM tags by choosing Emphasis from the Format menu.

For more information on character formatting, see the section Character formatting  in the HTML Quick Reference.


Formatting blocks of text

There are several elements that you can use to surround parts of your document that require special formatting. For example, suppose you wish to add a block quote to the sample document you created above:

• Move the insertion point   to the right of the last P end-tag.

• Click on the   [image] toolbar button.

This inserts a BLOCKQUOTE element.

• Type the letter `O'.

As soon as you do this, HoTMetaL Light inserts a P element inside the BLOCKQUOTE. This is because the HTML rules do not allow text directly inside BLOCKQUOTE, but BLOCKQUOTE can contain P elements, which can contain text.

• Continue typing the text:

Orwell portrayed his prep school days in

harsh terms in the essay "Such, Such Were the

Joys...". This may have been the result of

interpreting his early experiences in the light

of his later political consciousness.

(B. R. Jones)

Notice that the text is indented slightly to set off the quotation. A browser will display a block quote with similar special formatting.

For more information on block formatting, see the section Block formatting  in the HTML  Quick Reference.


Lists

You can insert five different types of lists in your document.

Ordered (numbered) lists

Unordered lists

The other unordered list elements are MENU and DIR: see the section List elements  in the HTML  Quick reference for more information.

Definition lists


Ordered (numbered) lists

Ordered lists are lists with numbered items. You don't have to add the numbers yourself--a browser will add these for you (and HoTMetaL Light will show them to you as well).

• Move the insertion point   to the right of the BLOCKQUOTE end-tag in the sample document.

• Insert an H2 element from the  toolbar.

• Type:

Orwell's Four Great Motives for Writing

• Move the insertion point   to the right of the H2 end-tag.

• Click on the [image]   (ordered list) toolbar button.

When you do this, HoTMetaL Light automatically inserts an LI (list item) element inside the OL. With one exception, all lists consist of one or more LIs.

• Inside the LI element, type:

Sheer egoism

Notice that the number `1' is shown before this list item. HoTMetaL Light will display the numbers of items in an OL.

This is a convenient place to introduce a useful technique for adding elements: splitting the current element.

• Make sure the insertion point   is just to the left of the LI end-tag.

• Type Return or Enter.

HoTMetaL Light splits the LI element, in effect creating a new, empty LI element after the current one. Splitting an element just before the end-tag is a convenient way of inserting a new element that has the same type as the current element. If you split an element in the middle of the text, everything before the insertion point   goes in one element, and everything after goes in the other one. Another way to split an element is to choose Split Element from the Markup menu, or type Ctrl-P  at the keyboard.

• Inside the new LI, type:

Aesthetic enthusiasm

• Split the current LI element.

• Type:

Historical impulse

• Move the insertion point to the right of the last LI end-tag.

• Type:

Political purpose

As soon as you start typing, HoTMetaL Light inserts an LI element, because you can't type directly inside an OL. In general, if you type somewhere that text is not allowed, HoTMetaL Light will attempt to insert a valid element so that you can continue entering text.

• Continue typing.

To see how ordered lists look, you should preview the document:

• Save the file.

• Click on one of the preview toolbar buttons, or choose Preview... from the File menu, or type Ctrl-M   at the keyboard.

As you can see, the browser has inserted the list numbers automatically.


Unordered lists

An unordered list is one whose items aren't numbered, but instead start with `bullets' of some kind. Actually there are several kinds of unordered lists available to you: here we'll use the most common and general-purpose list element, UL (unordered list). In this section you'll also learn a new markup feature, changing the element type.

• Move the insertion point   to a position between the OL start-tag and the first LI start-tag.

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

The OL start- and end-tags have changed to UL tags. If you click on a toolbar button, and HoTMetaL Light can't validly insert an element, it'll try to change the current element to the one you've chosen. (You can also change the element by choosing Change Element... from the Markup menu, or typing Ctrl-L  at the keyboard.)

Notice that a bullet is shown before every list item. HoTMetaL Light will display the bullets before each list item in a UL.

• Save the file.

• Click on one of the preview toolbar buttons, or choose Preview... from the File menu, or type Ctrl-M   at the keyboard.

The browser now displays the list items with bullets rather than numbers.

You can nest lists by inserting a UL, OL, etc., inside a list item (LI). Some browsers--and HoTMetaL Light--will change the list bullets for a nested list.


Definition lists

A third type of list is the `definition list', or `glossary list' (DL). This list is different from the others because it doesn't consist of list item (LI) elements. Rather, it consists of a series of terms (DT) and definitions (DD). As the name implies, this list is intended to display definitions, though you can use it for any list that requires two-part entries. When a definition list is displayed in a browser, a definition is typically displayed on a separate line from the corresponding term, and indented slightly.

• Insert a new P element after the last list.

• Type:

Orwell's novel "1984" described a lexicon

called "Newspeak" that was designed to give

the appearance of real content while actually

allowing the authorities to successfully lie and

obfuscate. Some examples:

• Click on the [image]   (definition list) toolbar button.

Notice that HoTMetaL Light inserts the DL element just after the paragraph, because lists can't be inserted inside paragraphs.

The valid elements inside a DL are DT (definition term) and DD (definition). Although you're allowed to arrange them however you like, the normal ordering would be to have one DT (or more, if, for example, you are defining several words with the same meaning), followed by one or more DDs.

• Click on the  [image] (definition term) toolbar button. (If you were to just start typing here, instead of inserting a DT from the toolbar, HoTMetaL Light would insert the DT for you, because you can't type directly inside a DL. As you become more familiar with the HTML rules, you can take advantage of shortcuts such as this.)

• Type:

Prolefeed

• Move the insertion point to the right of the DT end-tag.

• Click on the [image]   (definition) toolbar button.

• Type:

Mass entertainment

Now create two more definitions:

• Insert a DT element after the DD.

• Type:

Goodthink

• After the DT, insert a DD.

• Type:

Orthodoxy

• Insert a DT element after the last DD.

• Type:

Joycamp

• After the DT, insert a DD.

• Type:

Forced-labor camp

To see how this list is displayed in the browser:

• Save the file.

• Click on one of the preview toolbar buttons, choose Preview... from the File menu, or type Ctrl-M   at the keyboard.

Notice that the definitions are set off from the terms.

See the section List elements in the Core HTML chapter for more information on lists.


Links and URLs

It is normal for HTML documents to contain links to other documents, which can be located anywhere on the WWW. These links are provided by URLs (Uniform Resource Locators), which name the location and filename of a document, and the method (scheme)used to access it.

Anchors

Links to a specific location

Images

For more information on images, see the chapter Working with images.


Anchors

When you want to create `hot text' that someone can click on in a browser and cause a document to be accessed, you should use an `anchor' (A) element.

• Move the insertion point   just to the left of the  BODY end-tag.

• Type the text:

See also the

(HoTMetaL Light will surround the text with a paragraph.)

You can insert an anchor in HoTMetaL Light by using keyboard, menu, and toolbar commands, or by dragging and dropping. We will first walk through the process of creating an anchor within HoTMetaL Light, and then go through using Windows drag and drop to create an anchor.

• Click on the   [image] toolbar button. (This is equivalent to choosing the Insert Anchor...command in the Markup menu.)

This creates an A element, and brings up the Edit URL dialog box.

Next to the Scheme label in this dialog box there are a  text box and a drop-down list  that let you choose a scheme, which describes how the file referred to in the URL will be accessed by a Web browser. For example, if the document were on a Web server, you would choose the scheme http. In this exercise, you will use the file scheme. This scheme is used if the file being referred to is on your local file system. You need not insert the file scheme here; HoTMetaL Light will do it for you.

• Click on the Choose File... button.

This causes a file selection dialog box to appear.

The file you should choose is located in the  folder doc in the HoTMetaL Light installation folder.

• Navigate to that   folder and open the file  works.htm.

Notice that the file name and folder path has been inserted in the  text box next to the Choose File... button, and file has been inserted in the scheme dialog box. You could have typed the file name there directly, and chosen the file scheme for a local file, but it's probably more convenient for you to use the file selection dialog box.

Most of the time URLs will also have a host component, specifying the network location of the file that's being pointed to, but in this case you don't need one because the file is on your local system.

• Click on the Ok button.

If the mouse pointer is positioned between the start- and end-tags of the A element, the URL that you entered will be displayed in the message area in the lower left corner of the HoTMetaL Light window.   If you've chosen Show URLs in the View menu, the URL will also be displayed to the right of the A start-tag in the document window.

Anchor elements can also be inserted by dragging and dropping external files into the document. This will create an anchor element with a link to the file.

You can also insert an anchor into HoTMetaL Light with drag and drop. The anchor that you will now create with drag and drop is identical to the anchor that you just created by inserting the A , so you may want to delete that anchor before creating this one.

• Switch to the Windows desktop or Windows Explorer (File Manager under Windows 3.1) and find the file works.htm in the doc folder under the HoTMetaL Light folder.

• Move and resize the document and application windows so that you can see both the HoTMetaL Light window and and the works.htm file.

• Select the file works.htm by clicking and holding the left mouse button down on the file's icon.

• Continuing to hold down the left mouse button, move your mouse cursor to the HoTMetaL Light window. An image of the file you are dragging will appear under the mouse cursor. As the cursor is moved to the HoTMetaL Light window, it becomes a special drag and drop copy cursor. If you drag within a block of text, an insertion bar will appear behind the cursor.

• Release the left mouse button wherever you want the anchor element to appear.

When you release the mouse button, an A element will be created; its HREF attribute will point to the file that you just dragged. If you release the left mouse key at a point where an anchor would be invalid, nothing will happen. You'll have to drag and drop the file again to a valid location.

If you drag and drop to a saved document, the URL of the anchor that has been created will be in `relative' format. If you drag and drop to an unsaved file, or create an anchor using `Insert Element' or the anchor toolbar button, the anchor will have a `complete' URL. See Relative URLs for more details on relative and complete URLs.

The next step is to enter the `hot text', a phrase that the user will click on in their browser to access the file pointed to by the URL.

• Inside the A, type the text:

bibliography

The word `bibliography' is the hot text. In a browser it will be generally be displayed in a different color from surrounding text, and perhaps underlined, to alert the user that it points to another document or location.

To see how this works, you should view the document in a browser:

• Save the file.

• Click on one of the preview toolbar buttons, choose Preview... from the File menu, or type Ctrl-M   at the keyboard.

• In the browser, click on the word `bibliography'.

The browser will now display the file  works.htm.


Links to a specific location

It's possible to make a link to a specific location in the same document or in another document. Then, when you click on an anchor (call it the `source') the browser window will display another anchor (the `target') at the location you've linked to, opening another document if necessary.

• Highlight the words `Four Great Motives' in the second H2 element.

This piece of text will be the target anchor.

• Click on the [image]   toolbar button, or choose Name Target...from the Markup menu.

The dialog box that appears lets you assign a name to the target anchor. The browser will use this name to locate the anchor. The first word in the document's selection becomes the default name, but you can enter other text if you wish.

• In the Name text box, type:

Why

• Click on the Ok button.

Notice that the highlighted text is now surrounded by an A element.

You have created the `target' anchor. Now you have to set up the `source' anchor:

• Move the insertion point   to the left of the first P end-tag.

• Split the P element.

• In the new P element, type:

One of his well-known essays is Why I Write

• Highlight the words `Why I Write'.

• Click on the   [image] (connect link) toolbar button, or choose Connect Link from the Markup menu.

The highlighted text is now surrounded by an A element. If the mouse cursor is positioned between the start- and end-tags of the A element, the message area in the  lower left corner of the HoTMetaL Light window reads `#Why'. What HoTMetaL Light has done is create a source anchor whose URL refers to the name `Why' that you just gave the target anchor.

Now you're ready to see the effect of what you've just done.

• Save the file.

• Click on one of the preview toolbar buttons, or choose Preview... from the File menu, or type Ctrl-M   at the keyboard.

• If both of the anchors you just created are visible, resize the browser window so that you can see only the first one.

• In the browser, click on the words `Why I Write'.

The browser window will now scroll so that the location of the target anchor is visible.

You can also use these commands to create a link from one document to a specific location in another document. Once you create the target anchor, HoTMetaL Light remembers the name you gave it and the document it is in. The next time you perform a `connect link' operation, it creates a source anchor that refers to that target anchor.

See the chapter URLs  for more information.


Images

Web documents often include graphical images. Images are inserted in a document using an IMG element, which, like A elements, can be inserted through keyboard, menu or toolbar, or through drag and drop.

• Click on the View menu.

• If the menu contains the command Show Inline Images, choose this command. If it contains the command Hide Inline Images, do nothing.

• Move the insertion point   to a position just to the right of the  H1 end-tag.

We will first walk through the process of creating an IMG within HoTMetaL Light, and then use Windows drag and drop to create an IMG.

• Click on the [image]   toolbar button.

This inserts an IMG element, and brings up the Image Attributes dialog box.

• Click on the Edit URL... button.

This brings up the Edit IMG Source dialog box, which is similar (but not identical) to the Edit URL dialog box. In this dialog, you will construct a URL for the image.

• Click on the Choose File... button.

• Navigate to the folder doc in the HoTMetaL Light installation folder.

•  Choose the file author.gif.

 HoTMetaL Light has created the URL for this image from the file that you selected. Note that the scheme and the path have been inserted.

• Click on the Ok in the Edit IMG Source dialog box.

• In the Alternate Text text box   in the Image Attributes dialog, type:

Anonymous

This provides text that a browser will display if it doesn't have the ability to display images, or if image-loading is turned off in a graphical Web browser. HoTMetaL Light sets the HEIGHT and WIDTH attributes of the image automatically for you when you insert an image; this speeds image loading and page layout. In general, you do not need to change these numbers.

• Click on the Ok button in the Image Attributes dialog box.

When you do this, a graphical image will be displayed inline, in the HoTMetaL Light document window. (This is not really George Orwell, but another well-known writer.)

You can also insert an image into HoTMetaL Light with drag and drop. The image that you will create with drag and drop is identical to the image that you just created by inserting the IMG, so you may want to delete that image before creating this one.

• Switch to the Windows desktop or Windows Explorer (File Manager under Windows 3.1) and find the file author.gif in the doc folder under the HoTMetaL Light folder.

• Move and resize the document and application windows so that you can see the HoTMetaL Light window and and the author.gif file.

• Select the file author.gif by clicking and holding the left mouse button down on the file's icon.

• Continuing to hold down the left mouse button, move your mouse cursor to the HoTMetaL Light window. An image of the file you are dragging will appear under the mouse cursor. As the cursor is moved to the HoTMetaL Light window, it becomes a special drag and drop copy cursor. If you drag within a block of text, an insertion bar will appear behind the cursor.

• Release the left mouse button wherever you want the IMG element to appear. An IMG element will be inserted, and the image will be displayed in the HoTMetaL Light document window if you have Show Inline Images turned on. If you release the left mouse key at a point where an image would be invalid, nothing will happen. You'll have to drag and drop the file again to a valid location.

If you drag and drop to a saved document, the URL of the image will be in relative format. If you drag and drop to an unsaved file, or insert an image using `Insert Element' or the image toolbar button, it will be a complete URL. See Relative URLs for more details on relative and complete URLs.

HoTMetaL Light sets the HEIGHT and WIDTH attributes of the image automatically for you when you insert an image.

The inline image will be displayed in a graphical Web browser (if you have image loading turned on).

• Save the file.

• Click on one of the preview toolbar buttons, choose Preview... from the File menu, or type Ctrl-M   at the keyboard.


Backgrounds and fonts

Many Web browsers let you set the color of certain elements in a Web document. You can change the color of the background, the text, and the `hot text', as well as the size of the fonts in your document. HoTMetaL Light allows you to choose and change colors and sizes quickly and easily.

Background images, background colors, and font colors and sizes, while commonly used, are not part of the HTML 2.0 specification, and are therefore not supported by all Web browsers. Use these features with caution, and make sure that your page looks acceptable without them.

You can create emphasis on Web pages by changing the font size and color. Type the following in your document after the previously inserted IMG element:

One of the most famous satirical lines in Animal

Farm is: All animals are equal, but some animals are

more equal than others.

(HoTMetaL Light will insert a paragraph for you when you start typing.)

• Highlight the text after the colon (:).

• Click on the [image] toolbar icon.

The standard Windows color chooser will appear.

You can either select one of the 48 colors that are defined already, or make a custom color of your own by clicking on the Define Custom Colors >> button and manipulating the color square that appears. To make the text red:

• Click on the red square in the color chooser.

• Click on the OK in the color chooser.

 Notice that the text you highlighted is now surrounded by a FONT element, and the text color within that element has changed to reflect your color choice.

You can change the font size as well.

• Highlight the words `Animal Farm'.

• Click and hold on the [image] toolbar icon, and select `+1' from the pop-up menu that appears.

The text that you highlighted is now surrounded by FONT element, and the text in this selection will get bigger. All text starts with a default arbitrary size of `3'. This pop-up menu allows you to add or subtract from the base size of the font in the range 0-7. By choosing `+1' from the pop-up menu, we have changed the text size to `4'; that is, we have made the font size larger. These font size values do not correspond to any specific font point size, but are instead proportional to the default font size.

The background color of this Web page can be changed for emphasis and artistic effect. Let's set the background color to a light blue.

• Choose Document Colors... from the Format menu. This brings up the Document Colors dialog box which lets you set the background color.

• In the dialog box, click on the Choose... button next to the Background text box. This brings up the standard Windows color chooser.

• Click on the light blue square in the top row of the color chooser.

• Click on the OK button in the color chooser.

• Click on the Apply button in the Document Colors dialog box.

The background color of the HoTMetaL Light document window will change to light blue.

You can change the color of the text and the links in your Web document using the Document Colors dialog box. Text and link colors are set in the same way as the background color: by bringing up the standard Windows color chooser. Setting the text color changes the color of all the text in the document. Let's change the text color of the document to a dark blue.

• Choose Document Colors... from the Format menu. This brings up the Document Colors dialog box which lets you set the text color.

• In the dialog box, click on the Choose... button next to the Text text box. This brings up the standard Windows color chooser.

• Click on the dark blue square in the fourth row of the color chooser.

• Click on the OK button in the color chooser.

• Click on the Apply button in the Document Colors dialog box.

The text color will change to blue. Notice that the text inside the FONT element that you inserted previously stays red.

The Document Colors dialog box lets you set three different link colors. Links sets the color of a link that has not been visited. The default color on most Web browsers (and HoTMetaL Light) is a bright blue. Visited links sets the color of a link that has already been visited. The default on most Web browsers is purple.Active links sets the color that links change to when they are clicked on. The default color on most Web browsers is red. You can set those colors in the same way that you just set the text colors.

Now you can see how this colorful document would look in a Web browser:

• Save the file.

• Click on one of the preview toolbar buttons, choose Preview... from the File menu, or type Ctrl-M   at the keyboard.

 If your Web browser supports both background and text colors, this document will be displayed with a light blue background, dark blue text, and one sentence in red .


Alignment

You can change the alignment of paragraphs and headers in several different ways, and HoTMetaL Light gives you toolbar button access to the three most useful alignment features.

Alignment of paragraphs and headers, while commonly used, is not part of the HTML 2.0 specification, and is therefore not supported by all Web browsers. Use this feature with caution, and make sure that your page looks acceptable without it.

In your document, create a new paragraph and type the following:

Another famous quote from Animal Farm: "Four legs

good, two legs bad."

Put your insertion point inside the paragraph that you just created. Click on the [image] toolbar button. This paragraph is now center-aligned. Clicking on the [image] or [image] buttons will change the alignment of the paragraph to `left' or `right', and the paragraph's position will change to reflect that.

Any HTML element that has an ALIGN attribute can be aligned in this way with the toolbar buttons. This would include all headers, paragraphs, and images (though images don't accept center alignment). To see how this document would look in a Web browser:

• Save the file.

• Click on one of the preview toolbar buttons, choose Preview... from the File menu, or type Ctrl-M   at the keyboard.

 If your Web browser supports these alignment features, the paragraph that you typed in will be centered.

At this point, you're finished with the Orwell document.


Publish

This section of the tutorial provides a short introduction to the Publish... command. This command lets you convert a group of URLs that use a particular scheme, server, or location to URLs that use a different scheme, server or location. The most common use of this command is to convert URLs that refer to local files to URLs that refer to files on a Web server.

• Choose New... in the File menu.

• Choose Tutorial from the Template Group list.

• Open the template called `Publish... command tutorial'

• If the command Show URLs is present in the View menu, choose this command. If Hide URLs is present, do nothing. This ensures that the URLs are displayed in the document window.

This document contains six URLs, each pointing to a local file. Each URL starts with `file:///c|/rodney'. In this exercise, you will change all of these URLs to refer to (fictitious) files on a Web server.

• Put the insertion point somewhere near the top of the file.

• Choose Publish... in the Tools menu.

The Publish dialog box appears.

• Pin this dialog box by clicking on the title bar with the right mouse button and then choosing Pin from the pop-up menu that appears.

• Enter the following in the Change URLs From text box (overwrite the default contents):

file:///c|/rodney

• Enter the following in the To text box (overwrite the default contents):

http://www.sq.com/~rodney

• Click on the Find Next button.

HoTMetaL Light puts the insertion point inside the first element whose URL starts with `file:///c|/rodney'.

• Click on the Replace button.

The text `file:///c|/rodney' in the first URL changes to `http://www.sq.com/~rodney'.

You can use Publish... to modify several URLs at once.

• Click on the Replace All button.

The same replacement is performed in the remaining URLs.

Publish... is a form of Find and Replace command, but:

– It applies only to URLs.

– It can match text only starting at the beginning of the URL.

If you want to change something in the middle of a URL, you will have to enter everything that precedes it in the Publish dialog. For example:

• Enter the following in the Change URLs From text box:

http://www.sq.com/~rodney

• Enter the following in the To text box (overwrite the default contents):

http://www.sq.com/~zvi

• Click on the Find Next button.

• Click on the Replace button.

HoTMetaL Light changes the text `rodney' to `zvi' in the current URL. For more details on the Publish... command, see Changing your URLs for the Web.


Forms

There are certain HTML elements that can accept input from a user. A browser will display these elements as graphical objects, such as  text boxes or drop-down lists . A `form' in an HTML document is a set of such elements that lets the user enter some information and then call a program, located on a Web server, that processes the information. For example, you could create a form that lets a user order a product that you're selling: you can set up the form so that when the user clicks on a `submit' button, the order is sent to your order-processing program.

To implement this, you have to:

– Create the form(s).

– Install on your server the program that will process the form's data.

The second of these two steps is beyond the scope of HoTMetaL Light. You will have to obtain supplementary documentation that explains this mechanism, which is known as CGI (Common Gateway Interface). If you open the Technical Reference page by choosing Technical Reference from the Help menu, you will find several references to documents on this topic.

This tutorial explains how properly to set up a sample form. We suggest that for this exercise you create a new HTML document from a tutorial template.

• Choose New... from the File menu.

• In the template dialog box that appears, open the file tutor.htm in the tutorial folder.

• Now insert an H1 element inside the BODY and type:

Buy my book!

• Insert a P element after the H1, and type:

Just click on the "Submit" button in the form below

to order any or all of these best-sellers at a

fraction of the regular cost!

Form element

Creating a text box

Entering several lines of text

Presenting a list of choices

Check boxes

Radio buttons

Reset

Submit

Setting the action of the form

Submitting the form

Mailing the contents of a form

For more information


Form element

Now you're ready to start constructing a form.

• Click on the [image]  button to insert a FORM element after the P element.

This element encloses everything else in the form. For the remainder of this exercise, make sure that you're working inside the FORM element. The form element has attributes which set where the form's data is to be submitted. We will set these submission options at the end of the form tutorial.

The `Form' toolbar--which contains the [image]   button--has many buttons. All of the form-related elements that you'll use in this tutorial can be entered using this toolbar.


Creating a text box

Now you'll enter the first element:

• Make sure the insertion point is inside the FORM element.

• Enter a P element and type:

Name:

•  Click on the [image] button on the `Form' toolbar.

This inserts a text box into the form. HoTMetaL Light's WYSIWYG form display gives you a good idea of what this form element will look like in your Web browser.

Now we must set the attributes of this INPUT element.

• Double-click on the text box.

This brings up a dialog box that lets you edit some of the attributes of the current element:

This dialog box allows you to set the most important attributes of this INPUT  element: Name, Value, Size and Maximum Length.

• In the Name text box, type:

cust-name

This value is used when the browser sends the form's data to the server, in order to identify which text box,   drop-down list,  etc., a particular piece of data came from. Notice that when you move your cursor over this text box, HoTMetaL Light displays the Name: of the text box in the lower left hand corner of the window.

– The Size feature specifies the text box's 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.

– If you enter some text in the Value text box, this text will be displayed in the text box by default.

The Maximum Length text box sets the maximum length of this text input in characters.


Entering several lines of text

A text box  in a form lets you enter 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 the TEXTAREA element.

• Insert a new P element and type:

Address:

• Click on the [image] button to insert the TEXTAREA element. This is a graphical representation of a multi-line text area, which looks similar to the way this element is displayed in most browsers.

• Double-click on the text area.

This brings up a dialog box that contains the most important features of the TEXTAREA element: Name, Default Content, Width (in characters), Rows and Text Wrapping.

• Enter the following values in the TEXTAREA dialog box:

– Name: cust_addr

– Width: 40

– Rows: 5

Rows and Width specify the dimensions of the input field: 5 lines deep and 40 characters wide.

• Click on the Apply button.

If you want a TEXTAREA to contain some default text, enter it in the `Default Content' text box.

Now you may want to see how the browser displays this element:

• Save the file.

• Click on one of the preview toolbar buttons, choose Preview... from the File menu, or type Ctrl-M   at the keyboard.

The browser generates a multi-line field, which may also have scroll bars.


Presenting a list of choices

Sometimes you will want the user to make one choice from a list of choices. In this example you'll see how to represent this with a drop-down list or scrollable list.

• Insert a new P element, and type:

Credit Card:

• Click on the [image]  button to insert a SELECT element.

A graphical representation of the SELECT element will appear. To edit the options of the SELECT element, double-click on the select list. A dialog box appears, allowing you to create and edit a list of choices.

This dialog box has two purposes: it lets you set the features of the drop-down list, and create and edit items within it. First, let's edit the features of the drop-down list:

• In the Name text box, enter `card-name'. This is the identifier for the SELECT element.

•  In the box labeled Size, enter `1'. This means that only one option will be shown at a time in the select list.

HoTMetaL Light puts one item in the drop-down list by default. You can edit the default list item and create new ones. To edit the default list option:

• Highlight the words `Item 1' in the list of items, and click on the Remove/Edit. The list option will `jump out' of the list and become editable.

• Highlight the words `Item 1' in the List Item text box, and enter:

Visa

• Click on the Add >> button. The item you just edited will move back into the list.

 This list item (technically referred to as an OPTION element) represents one choice in the  drop-down list.  The text that you typed will appear as the name of an option in the drop-down list.

• To add a new list option, move your cursor to the List Item text box and type:

MasterCard

• Click on the Add >> button.

• Move your cursor to the List Item text box and type:

Amex

• Click on the Add >> button.

To see what this looks like in the browser:

• Save the file.

• Click on one of the preview toolbar buttons, choose Preview... from the File menu, or type Ctrl-M   at the keyboard.

• In the browser, click on the drop-down list.

Notice that each list item that you entered as a list option in the select element dialog box is a choice in the  drop-down list.

You can add a Value for each list option, which would be sent with the form data instead of the List Item (i.e., name) of the list option. This is not necessary, though; if there is nothing entered in the Value field, the name of the list item will be sent when selected.

– If you wanted, you could have represented this list of choices as a scrollable list rather than a drop-down list. To do this, you would set the SIZE attribute of SELECT to 2 or greater by typing the value into the Size text box; this value specifies how many list items are shown at a time.

– If you want to be able to choose more than one item from this kind of list, turn on the Allow Multiple Selections check box.

– To set one list option as the default (which is displayed highlighted in most Web browsers), edit that list option and turn on the Default Item check box.

– To change the order of list options in a drop-down list, select a list option, and use the [image] and [image] buttons to change that item's position in the list.

Just to complete this section of the form:

• Insert a new P element after the last one, and type:

Card number

• Insert a text box by clicking on the [image] toolbar button..

•  Double-click on the text box.

• Set the NAME attribute to `card-num'.

• Click on the Apply button.


Check boxes

There are several other different kinds of input elements that can appear within forms. One of these is check boxes:  you would create this kind of box if you wanted the user to make a `yes/no' choice. These are different from radio buttons  which you would use if you want the user to make one choice from a group of choices.

• Insert a new P element after the last one, and type:

Check one or more titles:

• Insert a new P element after the last one, and type:

The Dentistry of Frederic Chopin

• Insert a check box by clicking on the [image] toolbar button.

• Double-click on the check box.

• In the dialog box that appears, type `chopin' in the Name text box. You need not enter anything in the Value text box.

• Click on the Apply button.

Now add two more titles in the same way:

• Insert a new P element after the last one, and type:

Motors and Such by Eddy Schneider

• Insert a check box.

• Double-click on the check box.

• Type `motors' in the Name text box.

• Click on the Apply button.

• Insert a new P element after the last one, and type:

HTML for Travellers

• Insert a check box.

• Double-click on the check box.

• Type `html' in the Name text box.

You can turn a check box `on' by default, so that it will appear checked when viewed in a browser or in HoTMetaL Light:

• Click on the Checked? box.

• Click on the Apply button. Notice that the check box changes in HoTMetaL Light to reflect its checked status. You can have more than one box turned on by default.

To see what this looks like in the browser:

• Save the file.

• Click on one of the preview toolbar buttons, choose Preview... from the File menu, or type Ctrl-M   at the keyboard.

Try clicking on the buttons with the mouse. You can turn on all, any, or none of the buttons.

– When the form is submitted, the default value associated with turned-on  check boxes   is the word `on' (turned-off  check boxes   are not submitted to the server). If you want to override this default, enter the text to be associated with the check box in the Value text box of the check box dialog.


Radio buttons

As we said above, you can also use the radio buttons within a form. A group of radio buttons lets the user make one (and only one) choice from a group of choices.

• Insert a new paragraph after the last one and type:

Preferred language:

• Insert a new paragraph after the last one.

• Insert a radio button by clicking on the [image] toolbar button..

• Double-click on the graphical radio button element.

• In the dialog box that appears, enter the following text into the text boxes indicated:

– Enter `language' in the Name text box.

– Enter `english' in the Value text box.

– Click on the Checked? box to set this radio button as the active one. Notice that the radio button changes in HoTMetaL Light to reflect its active status. Only one radio button in a group can have the Checked? box activated.

• Click on the Apply button.

• Move the insertion point to the right of the radio button and type:

English

Now add two more choices in the same way (keep all three choices in the same paragraph):

• Insert a radio button.

• Double-click on the radio button. In the dialog box that appears:

– Enter `language' in the Name text box.

– Enter `french' in the Value text box.

Click on the Apply button.

• Move the insertion point to the right of the radio button and type:

French

• Insert a radio button.

• Double-click on the radio button. In the dialog box that appears:

– Enter `language' in the Name text box.

– Enter `spanish' in the Value text box.

Click on the Apply button.

• Move the insertion point to the right of the radio button and type:

Spanish

Notice the following about the attribute values you've just entered:

– All three radio buttons have the same Name. This puts them in the same group, which means that the browser will allow only one of these three to be checked at once. If the form contains another group of radio buttons, the text in the Name text box for all of its members must also be identical, but they can't be the same as the name you used for the radio buttons you just created.

– The content of the Value text box is sent to the server if the corresponding button is turned on when you submit the form, thus telling the server which button in this group was turned on.

To see what this looks like in the browser:

• Save the file.

• Choose one of the Preview toolbar buttons, select Preview... from the File menu, or type Ctrl-M   at the keyboard.

Try clicking on the buttons with the mouse. You can turn on only one of the radio buttons at a time. The button labeled `English' is initially turned on by default.


Reset

You can create a button that restores all the form's controls (text boxes,  radio buttons, etc.) to their default values:

• Insert a new P element after the last one.

• Insert a reset button by choosing the [image] toolbar button.

• Double-click on the reset button.

• In the dialog box that appears, enter `Reset to defaults' in the Value.

• Click on the Apply button.

Notice that this changes the text on the reset button in HoTMetaL Light. To see how the reset button works in a Web browser:

• Save the file.

• Choose one of the preview toolbar buttons, select Preview... from the File menu, or type Ctrl-M   at the keyboard.

• Enter some data in the form.

• Click on the Reset to defaults button in the form.

The form's controls revert to their default values. The text boxes   are all blank and the check boxes are turned off. The radio button labeled `English' is turned on.


Submit

Your form is almost complete. All you need to do is create a button that causes the browser to submit the form.

• Next to the reset button, insert a submit button by choosing the [image] toolbar button.

• Double-click on the submit button.

• In the dialog box that appears, enter `Submit order' in the Value text box.

• Click on the Apply button.

Notice that this changes the text on the submit button in HoTMetaL Light. To see how this looks in a Web browser:

• Save the file.

• Choose one of the preview toolbar buttons, select Preview... from the File menu, or type Ctrl-M   at the keyboard.


Setting the action of the form

You have now finished setting up the form's elements. All that remains is to set the `action' of the form; that is, what happens to the data entered by the user when the submit button is pressed.

• Place your cursor immediately to the right of the opening FORM tag. Choose Edit URL... from the Markup menu.

The URL you'll create is referred to as the form's `action'.

• From the Scheme drop-down list, choose `http'.

• In the Host text box,  type:

www.sq.com

• In the Path text box,  type:

cgi-bin/quagmire

• Click on the Ok button.

The `action' you've just specified refers to a program, located on SoftQuad's Web server, that can process the data entered in the form. In the next section of the tutorial, you can submit the form to this program. Normally you would specify a program on your own server, though in fact you can specify programs located anywhere on the Web.

• Choose the Element Attributes... command from the Markup menu, right-click and choose Element Attributes... from the pop-up menu that appears, or type F6   at the keyboard.

This brings up a dialog box that lets you edit the attributes of the current element.

• Set the attribute called METHOD to the value `GET' (it may have that value already).

• Click on the Apply button.


Submitting the form

Preview the document in your Web browser.

• Enter some data in the form. (Don't enter a real credit card number.)

• Click on the Submit order button in the form.

If you have an active connection to the Internet when you are previewing your HoTMetaL Light document, the form will now be submitted to a program on SoftQuad's Web server. This program doesn't actually process an order, it just echoes back the information that the browser sent it. This information will appear in the browser window: you can return to the form by clicking on the button that takes you to the previous document.

The information is presented in pairs containing a `name' (corresponding to the NAME attribute of the   text box,  check box, etc.) and a `value' (for text boxes  or `text areas', this will be the data you typed in; for check boxes the value `on' is submitted--check boxes that aren't turned on are ignored; for radio buttons the value of the VALUE attribute is sent). You may notice a couple of unusual things about the format of the text: 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'. This is the standard format that browsers use for submitting data to the server.


Mailing the contents of a form

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. The Action field of the form must point to an email address, so that the content of the form will be emailed to that address when the submit button is pressed. To create a form that is mailed to a particular address:

• Place your cursor immediately to the right of the opening FORM tag. Choose Edit URL... from the Markup menu.

• From the Scheme  drop-down list, choose `mailto'.

• In the Path text box,  type your email address.

• Choose the Element Attributes... command from the Markup menu. right-click and choose Element Attributes... from the pop-up menu that appears, or type F6   at the keyboard.

• Set the attribute called METHOD to the value `POST' (it may have that value already).

• Click on the Apply button.

If you have an active Internet connection at the time when you view this document in a Web browser, filling out this form and clicking the submit button will mail the contents of the form to the email address specified.


For more information

There is a summary of what you have learned about forms and some more information about advanced form editing on Forms.


Core HTML

The authoritative source of information on the structure of HTML documents is the IETF HTML 2.0 specification. This document should be available at the following URL:

http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html

The HTML rules used by HoTMetaL Light also contain some elements and attributes from the HTML 3.0 specification, as well as some elements and attributes that are supported by the Microsoft Internet Explorer, Netscape Navigator, and Mosaic browsers.

This section provides a short summary of the HTML 2.0 elements and some of the supported extensions. The rules governing the HTML format are quite flexible, and furthermore HoTMetaL Light will guide you through the document structure: therefore, the approach followed here will not be to enumerate all the possible combinations of elements. Rather, an overview of the structure will be presented, together with a discussion of the different groups of elements (emphasis, links, lists, etc.).

Overview

Block formatting

Character formatting

List elements

Link elements

Forms

`Code' elements

Backgrounds and fonts

Alignment


Overview

– An element called HTML surrounds the whole document.

– This element contains two sub-elements, HEAD and BODY. These elements are required.

– HEAD has sub-elements that define header material:

– TITLE: document title. This element is required.

– BASE: can be used to record the document's location in the form of a URL. The URL recorded here may be used to resolve a `relative URL' (necessary 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 this document and some other object on the Web.

– META: gives information that appears in HTTP headers.

– Inside the BODY element, heading elements (H1 through H6) are generally used for major divisions of the document (headings are not mandatory, however). Headings are permitted to appear in any order, but you will obtain the best results when your documents are displayed in a browser if you follow these guidelines:

– H1 should be used as the highest level of heading, H2 as the next highest, and so forth.

– You should not skip heading levels: e.g., an H3 should not appear after an H1, unless there is an H2 between them.


Block formatting

The major divisions of a document body's structure comprise the following elements, in alphabetical order:

– ADDRESS: if you want to include the address of the author of the document, enter it inside this element.

–  BLOCKQUOTE: used for quotes from another source, requiring special block-style formatting.

– DL, DIR, MENU, OL, UL: list elements

–  P: paragraphs.

– PRE: pre-formatted text. Use this element when you want the browser to use the same line breaks and spacing that you entered. The text will be formatted by a browser using a fixed-width `typewriter' font.


Character formatting

The following elements are used primarily to add emphasis to inline text:

– B: bold.

– CITE: represents a document citation.

– EM: browsers usually represent this element in italic.

– I: italic.

– STRONG: browsers usually represent this element in bold.

– TT: characters inside this element are formatted with a `teletype' font (a fixed-width typewriter font, such as Courier).

Line breaks

Horizontal lines


Line breaks

If you want to force a browser to break the current line in the text, insert a BR element (you can do this by clicking on the   [image] toolbar  button). You can't type inside this element: it just causes a line break.


Horizontal lines

To cause the browser to display a horizontal line (rule) in your document, insert an HR element (you can do this by clicking on the [image]     toolbar button). This inserts a line in the HoTMetaL Light document window. Double-clicking on the line will allow you to set certain attributes (all of which are extensions to the HTML 2.0 standard, so use them with caution):

– SIZE: height of the rule in pixels.

– WIDTH: width of the rule in pixels or percentage of screen width.

– NOSHADE: whether the rule should have a 3D or flat look.

– SRC: a URL to an image that will be displayed in place of the rule in capable browsers (uncommon).

– ALIGN: see Alignment.


List elements

HTML supplies five list elements. With the exception of DL, list elements are composed of one or more LI (list item) elements.

You can nest lists by inserting a UL, OL, etc., inside a list item (LI).

– OL: ordered list. Items in this list are numbered automatically by the browser. The numbering will reflect nesting levels.

– UL: unordered list. Items in this list start with a list mark such as a bullet. Browsers will usually change the list mark in nested lists.

– DIR: folder list. This is an unordered list. Each LI element in this kind of list should be no longer than 24 characters.

– MENU: menu list. This is an unordered list. Each LI element in this kind of list should be no longer than one line.

– DL: list of definitions. This is an unordered list. This kind of list is different from the others. Each `item' in a DL consists of one or more terms (DT elements), followed by definitions (DD elements).

Each list type also has a `compact' version, which will be displayed with less whitespace in a browser.

You can choose a menu lists, folder lists, and all compact lists from the  [image]    (`Other lists') toolbar button.


Link elements

It is normal for HTML documents to contain links to other documents, which can be located anywhere on the Web. These links are provided by URLs (Uniform Resource Locators), which give the location and filename of a document, and the method used to access it.

The following elements represent links to other documents:

– A: anchor. The HREF attribute of this element represents a URL. If this attribute has a value, the content of the A element will be highlighted when the document is displayed in a browser window, and clicking on this content will cause the browser to attempt to open the file specified by the URL.

– IMG: image. This element represents a graphic image. It is typically used for inline images--you should be aware that some browsers may not be able to display such images. (In that case, the text, if there is any, given in the ALT attribute may be shown.) The SRC attribute represents a URL.

Links to a specific location

`Hot images'

Images with hot spots


Links to a specific location

This topic is covered in an example in the tutorial section (Links and URLs).

In general, you can set up a `source' and `target' anchor pair by setting the NAME attribute of the target anchor to `string' and setting the  URL of the source anchor to `#string'. This sets up a one-way link. You can set up a two-way link by editing the two anchors so that each one's NAME attribute corresponds to the other's URL. See the section Links to a specific location  in the URLs chapter for more information.


`Hot images'

A `hot image' is used like an anchor--when you click on the image, the browser performs an action.

This is very easy to accomplish: you just need to insert an IMG element inside an A element. Both elements will have a URL: the IMG's URL locates the image, and the A's URL locates the file that is retrieved when you click on the image.


Images with hot spots

Sometimes you will see images that have several `hot spots' that you can click on and cause URLs to be accessed. There are two ways to accomplish this: client-side or server-side image maps. Because server-side image maps use the server to accomplish the imagemap setup, they are used by more browsers; however, client-side image maps are faster and less complicated to set up and are gaining in popularity. HoTMetaL Light supports both.

Server-side image maps use an image map file, which tells the browser where the hot spots are. Client-side image maps use the MAP element within an HTML document to define an imagemap. To prepare these image maps, see the sections Image maps and Usemaps  in the Working with images chapter for more information. There are several references to clickable image maps (ISMAPs) in the Technical Reference page, accessible by choosing Technical Reference from the Help menu.


Forms

The following elements are used to construct forms that the user can fill in and submit over the Web. When your document is browsed, the browser will generate the appropriate graphical objects. HoTMetaL Light shows some of these form elements to you in WYSIWYG format.

– FORM: the top-level element for a form. It surrounds all of the other form elements.

– INPUT: there are several different types of input fields, differentiated by the value of the TYPE attribute of the INPUT element. The possible values are:

– TEXT: a text box.

– PASSWORD: a text box in which the text entered is hidden.

– CHECKBOX: used to offer a yes/no choice.

– RADIO: used to offer only one choice from a group.

– SUBMIT: a button to submit the form's data to a program.

– RESET: a button to reset the form.

– IMAGE: an image that functions as a submit button.

– HIDDEN: an input field that is not displayed in the browser, but that can be used to set some hidden options by the Web page creator.

The following two input types are not part of the HTML 2.0 specification. Use them with caution.

– FILE: allows the user to attach a local file to the form. HoTMetaL Light displays a graphical element. The attributes for this element allow you to change the file types that can be uploaded.

– BUTTON. Used to create buttons that activate script commands.

 All of these input types can be inserted with the appropriate toolbar buttons, or you can insert a generic input element (which defaults to a text box) with the Insert Element command. An input element can be changed into a different kind of input element by editing its attributes and selecting a different value for the TYPE attribute.

– SELECT: represents a group of choices that a user can make. Generates a drop-down list  or scrollable list.

– OPTION: one choice in a SELECT group.

– TEXTAREA: generates a field that allows the user to enter several lines of text.

For more information on forms, see the tutorial on forms.  You can also retrieve the document describing the Common Gateway Interface for forms from the Technical Reference page, accessible by choosing Technical Reference from the Help menu.

File upload

For more information


File upload

This extension to HTML allows a user to choose files that will be uploaded (i.e., submitted) when the browser submits an HTML form. It is currently supported by Netscape Navigator 2.0. When the browser encounters an INPUT element that is used for file uploading, it will display a mechanism for choosing a file (for example, a button that can be clicked on to bring up a file chooser dialog box).

You can insert a file upload input element by clicking on the [image] toolbar button. HoTMetaL Light inserts a graphical file-upload box for you. Double-click on this element to bring up a dialog box where you can specify certain attributes, such as Name, Size, and Maximum Length.

You can specify a list of file types that are acceptable for uploading.

• Enter the list of file types in the Acceptable File Types  text box of the Input File Chooser Field dialog box.

You must also change the `MIME type' of a form that will have one or more files uploaded with it:

• Enter the value multipart/form-data for the FORM element's ENCTYPE attribute.


For more information

See http://www.ics.uci.edu/pub/ietf/html/rfc1867.txt for the RFC for this feature.


`Code' elements

The elements in this section would normally be used in technical manuals or papers.

– CODE: code samples.

– KBD: used to display text that a user would enter at the keyboard. (Do not confuse this with INPUT, used in forms.)

–  SAMP: literal characters.

– VAR: represents a variable name.


Backgrounds and fonts

Many browsers let you choose the color for the document background and various kinds of text in the entire document, or choose an image to be displayed as the document background. As well, you can change the color and size of text in part of the document.

Background images, background colors, font colors, and font sizes, while commonly used, are not part of the HTML 2.0 specification, and are therefore not supported by all Web browsers. Use these features with caution, and make sure that your page looks acceptable without them.

Document colors: background, links, and text

Background images

Font color and size


Document colors: background, links, and text

To change the background color of your Web page, choose Document Colors... from the Format menu. This brings up a dialog box which allows you to set the background color either directly, by typing in a color in hexadecimal red-green-blue format, e.g., `#ad65b7', or by bringing up the standard Windows color chooser, where you can choose a standard color or create one of your own. The background color of the document in HoTMetaL Light will change to reflect your choice.

In the hexadecimal red-green-blue format, a color is represented as six numbers in base sixteen (that is, the digits from 0 to 9 plus the letters `a' to `f'). The first two digits are interpreted as the amount of red, the second two as the amount of green, and the last two as the amount of blue.

You can also edit the attributes of the BODY element directly by right-clicking inside the BODY element and choosing Element Attributes...  from the pop-up menu. Background color is controlled by the BGCOLOR attribute of the BODY element.

You can change the text and link colors in the same Document Colors dialog box. Text and link colors are set in the same way that the BGCOLOR is: either directly, by typing in a color in hexadecimal red-green-blue format, or by bringing up the standard Windows color chooser. The color of the text in HoTMetaL Light will change to reflect this. You can also edit the attributes of the BODY element directly by right-clicking inside the BODY element and choosing Element Attributes...  from the pop-up menu. The TEXT, LINK, ALINK, and VLINK attributes of BODY control the colorsof text, links, active links (links currently being clicked on), and visited links (links that have already been clicked on), respectively.

Some browsers (e.g., Microsoft Internet Explorer) let you use the standard set of Windows color names instead of the hexadecimal codes. These are: black, maroon, green, olive, navy, purple, teal, gray, silver, red, lime, yellow, blue, fuchsia, aqua, and white. The hexadecimal color codes are more common and are accepted by more browsers.


Background images

To change the background image of your Web page, choose Document Colors... from the Format menu. This brings up a dialog box that allows you to set the background image either directly, by typing in a filename or URL in the Background Image text box, or by bringing up the standard Windows file chooser dialog box. You may also edit the attributes of the BODY element directly by right-clicking inside the BODY element and choosing Element Attributes...  from the pop-up menu. Background color is controlled by the BACKGROUND attribute of the BODY element. HoTMetaL Light does not display the image in its background.


Font color and size

You can change the font size for a piece of text by using toolbar buttons. If you click and hold on the [image] toolbar button, you will get a pop-up menu in which you can set the relative (+/-) value of the SIZE attribute. This causes the browser to add or subtract the specified value from the current font size.

From the font color toolbar button [image], you can set the COLOR attribute by using the Windows color chooser. You can also choose Font Color... from the Format menu.

Setting the size or color in this way inserts or surrounds the selected text with FONT tags. You can set the color and size manually for a piece of text by surrounding the text whose font size or color you want to change with a FONT element, and then manually editing the SIZE and COLOR attributes by right-clicking inside the element and choosing Element Attributes...  from the pop-up menu.


Alignment

To left-align, center, or right-align headers, paragraphs, horizontal rules and images, place your cursor inside the element whose alignment you want to change.

Alignment of paragraphs, headers, and horizontal rules, while commonly used, is not part of the HTML 2.0 specification, and is therefore not supported by all Web browsers. Use this feature with caution, and make sure that your page looks acceptable without it.

Choose one of the alignment toolbar buttons: left [image], center [image], or right [image] or choose Align Left, Align Centered, or Align Right from the Format menu. ALIGN is an attribute of all these elements, and you can edit that attribute directly by right-clicking inside the element and choosing Element Attributes...  from the pop-up menu.


Extensions to HTML

This chapter outlines some of the most important extensions to HTML that are supported in HoTMetaL Light.

A list of references for further information on extensions is given at the end of this document.

You should bear in mind that not all of the extensions described here will be supported, or supported in the same way, by all Web browsers. Some are currently supported by only a single browser. We strongly recommend that you consult the documentation provided by the specific vendors.

HTML usage is constantly changing: new features are invented, and new versions of browsers extend their support for existing features. In this document we have tried to represent current and proposed usage as of the time of this writing. Any identification of features of a specific product is included for the information of the user community, and should not be interpreted as an endorsement by SoftQuad Inc.

Frames

Java support

Script

ActiveX and other objects

Scrolling `marquees'

Text formatting

Block formatting

Attribute extensions

Miscellaneous

Sources of information


Frames

Frames allow you to divide the browser window into multiple regions, each displaying a different document.

Frames, while commonly used, are not part of the HTML 2.0 specification, and are therefore not supported by all Web browsers. Use this feature with caution, and make sure that you have alternative pages for non-frame browsers and that all frame documents contain markup readable by non-frame browsers (i.e., use the NOFRAME(S) element).

Frame sets

Dividing the frame set into regions

Targeting specific frames

Alternate document for non-frame browsers

 Frame attributes

For further information


Frame sets

A document that contains frames has a FRAMESET element as the top-level document content element instead of the BODY element. A frameset divides the browser window into rectangular regions. Each such region can be:

– A frame, which displays one document. A frame is represented by a FRAME element.

– A frame set, which will itself be 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.

Normally HTML documents contain a BODY element. If you want to use frames, you must substitute a FRAMESET element for BODY. A frame document may also contain a NOFRAMES area, which itself contains a BODY element. If a frame document is viewed by a browser that does not support frames, what is inside the BODY tags will be displayed in that browser.

To create a FRAMESET element:

1. If the BODY element is doesn't have any contents:

• Put the insertion point inside BODY.

• Choose the Change... command in the Markup menu.

• Change the BODY to FRAMESET.

2. If the BODY element is not empty, and you want to keep its contents in the document (to be viewed by browsers that don't support frames) you must surround it with a NOFRAMES element as follows:

• Choose Turn Rules Checking Off

• Highlight the BODY element.

• Choose Insert Element....

• Insert a NOFRAMES element.

• Highlight the NOFRAMES element (more on this later).

• Insert a FRAMESET element.

• Choose Turn Rules Checking On

We have also included the element `NOFRAME' (note the different spelling) because some sources appear to use this spelling of the element name. `NOFRAMES' seems to be the preferred form.


Dividing the frame set into regions

The attributes of the FRAMESET element determine how many regions the frame set is divided into. To edit the attributes:

• Put the insertion point immediately to the right of the FRAMESET start-tag.

• Choose Edit SGML Attributes... in the View menu.

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.

Example

This small document will cause three frames to be displayed. The first (outer) FRAMESET element divides the browser window into two horizontal regions. the upper region contains a single frame displaying the document http://www.sq.com/, and the lower region displays the frames defined in the second (inner) FRAMESET element. This FRAMESET divides the lower part of the window into two vertical frames, displaying the documents http://www.sgmlopen.org/ and http://www.w3.org/.

<HTML>

<HEAD>

<TITLE>Three frames

</TITLE>

<HEAD>

<FRAMESET ROWS="40%,60%">

<FRAME SRC="http://www.sq.com/">

<FRAMESET COLS="50%,50%">

<FRAME SRC="http://www.sgmlopen.org/">

<FRAME SRC="http://www.w3.org/">

</FRAMESET>

</FRAMESET>

</HTML>

Frame width and height

You saw above that you can specify the width or height of a frame as a percentage of the area allotted to the frame set that it's a member of. There are actually three ways to specify these:

– As a percentage

– As an absolute (specific) number of screen pixels (e.g., 250)

– As a `relative size'

Absolute sizes are not always a good idea, since the actual browser window size will vary.

A `relative size' is specified with an asterisk, e.g., `1*', `2*', `3*' (`1*' can also be written simply as `*'). 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 whose widths (or heights) have been specified as a relative size. The amount of space allocated to a frame is proportional to the number in front of the asterisk. For example:

<FRAMESET ROWS="30%,400,*,2*">

...

</FRAMESET>

Suppose the browser window is currently 1000 pixels high. The first frame will get 30% of the total height, that is, 300 pixels; the second frame will get 400 pixels, since an absolute amount was specified. This leaves 300 pixels to be divided between the other two frames. The fourth frame's height is specified as `2*', so it will be twice as high as the third frame, whose height is only `*' (1*). Therefore the third frame will be 100 pixels high and the fourth will be 200 pixels high.


Targeting specific frames

You can specify that a document referred to by an anchor should be displayed in a specific frame. To make this possible, the frame itself must be given a name. The name of the frame is the value of the NAME attribute of the corresponding FRAME element.

There are two ways to specify which frame a document will be displayed in:

– The anchor (A, etc.) that points to the document can specify the frame: you must give the anchor's TARGET attribute the name of the desired frame.

– You can specify the frame in the document itself, using the TARGET attribute of the BASE element.

If both methods are used, the frame name specified in the anchor takes precedence.

When you open the document, it will be opened in the specified frame if that frame exists; otherwise, a new window will be created.

Here is an example of targeting specific frames using an anchor element.

<FRAMESET ROWS="33%,33%,33%">

<FRAME NAME="upper">

<FRAME NAME="middle" SRC="sources.htm">

<FRAME NAME="lower">

</FRAMESET>

<!-- In the document "sources.htm" -->

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

Clicking on the first anchor will cause the document http://www.sq.com/ to be displayed in the frame named `upper'; clicking on the second anchor will cause the document http://www.w3.org/ to be displayed in the frame named `lower'.

At the time of this writing, Netscape Navigator 2.0 is unable to 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 an SRC attribute that specifies the URL of a `default' document.

Special target names

The following strings have special meanings when used as target values in anchors (note that all of these start with an underscore character):

– _self: the document will be opened in the same frame that you clicked in.

– _top: the document will be opened in the full browser window (if the window has been divided up 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.


Alternate document for non-frame browsers

Since some browsers do not support frames, a document that uses frames should always supply an alternate document that these browsers can read. You do this using the NOFRAMES element.

• Insert a NOFRAMES element just before the outermost FRAMESET end-tag. HoTMetaL Light will automatically insert a BODY element inside the NOFRAMES element.

• Create the alternate document inside this BODY element.


Frame attributes

In addition to SRC and NAME, FRAME elements have the following attributes:

– MARGINWIDTH - the left and right margin width of the frame (in pixels)

– MARGINHEIGHT - the top and bottom margin height of the frame (in pixels)

– SCROLLING - the value of this attribute specifies whether the frame will always have scrollbars (YES), never have scrollbars (NO), or have scrollbars only if the document is larger than the current size of the frame (AUTO). The default is AUTO.

– NORESIZE - if this attribute has the value NORESIZE, the frame can't be resized by dragging the frame borders in the browser window.


For further information

See Netscape's documentation on frames, http://home.netscape.com/comprod/products/navigator/version_2.0/frames/index.html


Java support

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.

Applets are not part of the HTML 2.0 specification, and are therefore not supported by all Web browsers. Use this feature with caution, and make sure that you have alternative text and applet-internal block elements defined for non-applet browsers.

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 Light supports the APPLET element for inserting applets. This element is used by the current release version of Java. The APP element, used by the `alpha' version of Java, is not supported by HoTMetaL Light. The APPLET element can appear only inside certain `block' elements--paragraphs, headings, list items, tables, and CENTER--or their nested sub-elements.

Applet insertion

Specifying the applet

Applet subelements: PARAM

Applets in a non-Java environment

For more information


Applet insertion

You can insert applets into HoTMetaL Light in two  ways:

• Drag and drop an applet .class file into the HoTMetaL Light 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 Insert Element..., and edit its attributes manually by placing your insertion point inside the element, right-clicking, and choosing Element Attributes... from the pop-up menu.


Specifying the applet

The attributes of the APPLET element specify the applet file and the area on the screen in which it operates.  When you drag and drop an applet into HoTMetaL Light  the Applet Attributes dialog box appears.  The following attributes can be set:

– 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. Applets must be specified as [name].class, which means that local applets cannot be called on Windows 3.1 systems.

– ALT - some text that will be displayed if the document is displayed in a non-Java environment. HoTMetaL Light inserts a default message for you, which you can modify.

– 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 (see Alignment).

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


Applet subelements: PARAM

If the applet code requires some input data, this can be provided in the document itself, by way of PARAM elements. If these exist, they must be the first subelements of the APPLET element. 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. If present, these must appear after any PARAM elements. 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

See http://java.sun.com/ for Sun's documentation, and Netscape's page http://home.netscape.com/comprod/products/navigator/version_2.0/java_applets/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.


Script

SCRIPT elements contain code, written in one of several programming languages, that is executed by a script-aware browser. JavaScript and Visual Basic Script 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 of Netscape Navigator, and perhaps by other browsers. Visual Basic Script is supported by Microsoft Internet Explorer version 3.0 or greater. Coding in JavaScript or Visual Basic Script is beyond the scope of this manual; please see the references at the end of this section for more information.

SCRIPT is not part of the HTML 2.0 specification, and therefore is not supported by all Web browsers. Use this feature with caution, and make sure that your script documents contain markup readable by all browsers.

The actual code is contained inside a SCRIPT element. You can insert a SCRIPT element by using the Insert Element... command in the Markup 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.

– SCRIPTENGINE: URL of a particular script engine; for example, a Perl interpreter.

– EVENT: used by some languages for passing parameters to the script.

– FOR: 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 in 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 tag.

In addition to the actual script code, scripts can make use of attributes of other elements. These attributes define user input to a script. There is one type of INPUT item that has been created especially for scripts: an INPUT of type `button' allows users to send data to a script as distinct from a `submit' or `reset' button). The attributes will not be described here, but the following list notes them:

–  onBlur: attribute of INPUT, SELECT, TEXTAREA.

– onClick: attribute of INPUT, A.

– onChange: attribute of INPUT , SELECT, TEXTAREA.

– onFocus: attribute of INPUT, SELECT, TEXTAREA.

– onLoad: attribute of BODY or FRAMESET.

– onMouseOver: attribute of A.

– onSelect: attribute of INPUT, TEXTAREA.

– onSubmit: attribute of FORM.

– onUnload: attribute of BODY or FRAMESET.

For more information


For more information

See http://home.netscape.com/comprod/products/navigator/version_2.0/script/index.html for more information on JavaScript. For more information on Visual Basic Script, see http://www.microsoft.com/intdev/vbs/vbscript.htm


ActiveX and other objects

TheOBJECT element lets you insert a program--called an `Internet Control' (formerly called `OLE Control')--into an HTML document.

ActiveX is a Microsoft standard and is subject to change. The ActiveX package needs to be obtained from Microsoft and installed on your PC before any Internet Controls will be available. For more information, see http://www.microsoft.com/icp/ --Microsoft's Internet Controls page.

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.

ActiveX and the OBJECT element are not part of the HTML 2.0 specification, and are therefore not supported by all Web browsers. Use this feature with caution, and make sure that your documents contain markup readable by all browsers.

HoTMetaL Light supports the use of objects and provides an easy way to insert Internet Controls. Internet Controls can be sent over the net, or, if a copy exists on your PC already, run directly from a Web browser. You can insert an ActiveX Internet Control object in two  ways:

• Drag and drop an Internet Control (.ocx) file into the HoTMetaL Light document window. (These files generally reside in the windows\systems folder.) An OBJECT element with certain attributes set will be inserted into the document, and the ActiveX Control Attributes dialog box in which you can set other attributes of the object will appear.

• Insert an OBJECT element using Insert Element..., and edit its attributes manually by placing your insertion point inside the element, right-clicking, and choosing Element Attributes... from the pop-up menu.

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 Internet 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. (See Extensions to images.)

– ISMAP: tells the Web browser that the object is a imagemap. It functions the same as IMG's BORDER attribute.

– USEMAP: sets the location of a MAP definition. It functions the same as IMG's USEMAP attribute. (See How client-side image maps work.)

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

For more information


For more information

The draft object specification is found at http://www.w3.org/pub/WWW/TR/WD-object.html. Microsoft's ActiveX specification can be found at http://www.microsoft.com/icp/.


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. This feature was introduced by Microsoft for Internet Explorer 2.0.

Marquees are not part of the HTML 2.0 specification, and are therefore 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, first insert a MARQUEEelement (using Insert Element...). The content of this element is the text that will be scrolled. The attributes of MARQUEE tell the browser exactly how the text will be displayed and scrolled:

– 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%).

For more information


For more information

See http://www.microsoft.com/windows/ie/ie20html.htm  (Microsoft Internet Explorer 2.0 HTML Support).


Text formatting

The following text formatting elements are available from the markup commands (Insert Element... and Change Element...).

These elements are not supported by all browsers. Use them with caution, and make sure that your pages look acceptable without these elements.

– Blinking text: surround text with the BLINK element to cause it to blink on and off in the browser.

–  Preventing line breaks: surrounding text with the NOBR element prevents the browser from inserting line breaks. This element should be used only with short pieces of text (i.e., a few words).

– Word breaks: if there is a position inside a NOBR element where a line break is acceptable, you can put a WBRelement at that position to tell the browser that it can break the line there, if necessary.

– Large and small print: surrounding text with the BIG or SMALL element causes the text to be displayed in large or small print, respectively, compared with the surrounding text.

– Strike-through text: surrounding text with the S element causes it to be printed with a line struck 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.

– Underlined text: surrounding text with the U element causes it to be underlined.

– Base font: the BASEFONT element lets you increase or decrease the default font size. The possible values of the SIZE attribute range between 1 and 7. These values are not specific font sizes, but rather are (somewhat) proportional to the actual font sizes. The default value, 3, corresponds to the `normal' font size. If used, this element must appear inside the BODY element before any `block' elements.

– The FONT element can also be used to change font size or color. See Font color and size.


Block formatting

– Divisions: you can create `divisions' by surrounding sections of your document with a DIV element. This element can surround `block' elements. A DIV can be aligned left, right, or center using its ALIGN attribute.

– Centered text: surround text with the CENTER element to cause it to be centered in the browser. Some elements also have an ALIGN attribute that can be set to the value `CENTER'. This will work in some browsers that don't support the CENTER element.

– List marks: the TYPE attribute lets you choose the list mark for an entire unordered list (UL) or a specific list item (LI). The possible values are DISC, CIRCLE, and SQUARE.

– Numbered lists: the TYPE attribute lets you choose the numbering style for an entire ordered list (OL) or a specific list item (LI). The possible values are `1', `I', `i', `A', and `a', representing arabic, upper- and lower-case Roman, and upper- and lower-case alphabetic numbering, respectively. The START attribute of OL lets you start the numbering for that list at a value other than `1'; similarly, the VALUE attribute of LI lets you restart the numbering for the current and subsequent list items at a value other than `1'.

– Body margins: Internet Explorer supports the LEFTMARGIN and TOPMARGIN attributes of the BODY element. These let you specify the size of the left and top margins, respectively, in pixels.


Attribute extensions

If you use Element Attributes... to set attributes of elements, you may notice that there are several general attributes that are present in elements that can occur under the BODY, such as ID, LANG, STYLE, DIR and CLASS. These attributes are extensions to the HTML 2.0 specification that are to be used with such forthcoming features of HTML as cascading style sheets, and are not currently used by most Web browsers. You may safely ignore them, for the most part. The following is a brief definition of these attributes (for a fuller explanation, see the HTML 3.0 specification at http://www.w3.org/hypertext/WWW/MarkUp/html3/CoverPage.html):

– ID: a unique identifier for a particular element.

– CLASS: a name used to define the type of a particular element.

– LANG: used to determine the language of the element; e.g., `en.uk' is used for British English.

– DIR: defines the direction of text; right-to-left or left-to-right. Used with the LANG attribute.

– STYLE: used for style sheets.


Miscellaneous

– The META element: if you wish to specify a URL for this element, you can do so by editing the URL attribute with Element Attributes....

– Bulletins: this is a technique for making a document particularly visible to certain monitoring software (e.g., SmartMarks, Smart Hotlist, Smart Bookmarks). Bulletin information can be added to a link: HoTMetaL Light supports the BULLETIN-TEXT, BULLETIN-DATE and BULLETIN-IMAGE attributes of the A element for this purpose. This information can also be added at the page level using the META element. See http://www.firstfloor.com (FirstFloor Software home page) for more information.

– DFN: surrounding a term with this element indicates that this is the defining instance of the term.

– Embedded elements: Netscape Navigator 2.0 lets you use the EMBED element to insert a graphical `object' in an arbitrary format into the document. These objects will be processed by `plug-in' applications. You can think of EMBED as a generalization of the IMG element. The 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.

Netscape Navigator also allows you to insert variable or application-specific attributes. These cannot be represented in SGML and therefore are not supported by HoTMetaL Light. If you want to insert such attributes, you should open the HTML file with a text editor and insert the attributes manually, inside the EMBED start-tag. A file that contains these attributes cannot be opened with HoTMetaL Light.

– Sound: Internet Explorer supports the BGSOUND element, which specifies the sound that is played when the document is accessed. The SRC attribute specifies the URL of the sound file, the LOOP attribute specifies how many times it plays (`-1' or INFINITE causes it to play `infinitely'), and the DELAY attribute lets you specify the number of seconds between repetitions of the sound file. This element has no content. It must appear before any `block' elements in the BODY element.


Sources of information

We encourage you to consult the following sources of information on HTML usage and browser support:

– The HTML 2.0 standard:

http://www.w3.org/hypertext/WWW/MarkUp/html-spec/index.html

– The (now-expired) HTML 3.0 proposal:

http://www.w3.org/hypertext/WWW/MarkUp/html3/CoverPage.html

– Netscape Navigator's extensions to HTML 2.0:

http://home.netscape.com/assist/net_sites/html_extensions.html

– Netscape Naviagtor's extensions to HTML 3.0:

http://home.netscape.com/assist/net_sites/html_extensions_3.html

– Microsoft Internet Explorer 2.0 HTML  Support:

http://www.microsoft.com/ie/author/htmlspec/ie20html.htm

– NCSA Mosaic 2.0 Release Notes:

http://www.ncsa.uiuc.edu/SDG/Software/WinMosaic/Docs/rnotesFinal.htm

– Spyglass Mosaic information:

http://www.spyglass.com/products/browser.html


Working with files

This chapter discusses the HoTMetaL Light commands for creating, opening, closing, and saving files, previewing the current document with a browser, and checking document correctness.

Creating a new file

Opening a file

Saving files

Printing

Previewing your file in a browser

Closing a file

Exiting


Creating a new file

There are two ways to create a new file:

– Click on the   [image] toolbar  button to create a new file. HoTMetaL Light will open the `default template' file chosen with the Options... command.

– Choose New... from the File menu to bring up a dialog box with a list of templates.

Using templates


Using templates

Templates are pre-defined structures for documents. They are used as forms or document outlines that you can enter text into without necessarily having to insert any of the markup yourself.

Opening a template

To open a template, choose the New... command from the File menu. This brings up a   dialog box which displays the files and folders  in the template folder, referred to in this dialog box as template groups.   Each file corresponds to a template: to open a template, just select it from this dialog box as you would any other file. The document name in the document window's title bar will be in the form Document1,   Document2,  and so forth.

When the template file is opened you can enter text or elements into it, and later save the file.

Creating your own templates

A number of templates are shipped with HoTMetaL Light, but you can work with templates you create.

To create a template file with HoTMetaL Light, you should just create a file as you normally would and save it in one of the sub-folders in the template folder.

You can choose the default folder for opening templates in the Extensions/Paths section of the Options dialog box.


Opening a file

Choose Open... from the File menu (or click on the [image] toolbar  button) to open an existing file. By default, the Open dialog box displays files with the .htm and .html file extensions.

You can choose the default folder and file extension for the Open dialog box using the Extensions/Paths section of the Options dialog. Choose an extension and path in the Document line.

When you open a file, HoTMetaL Light converts the `raw HTML' into a graphical format in which the tags are replaced by tag icons, and HoTMetaL Light's graphical editing features are available. You cannot open a file that's already open.

The names of the last four files that you opened with HoTMetaL Light are added to the File menu. You can open a file (or make it the current file, if it's already open) by choosing it from this menu.

Error checking

Common `Open' error messages


Error checking

If an HTML file contains markup errors, HoTMetaL Light will try to rearrange the markup so that the file can be opened and displayed in graphical format. In those situations, HoTMetaL Light will usually succeed in creating a valid file, although you may have to adjust some of the markup manually. If HoTMetaL Light cannot turn on rules checking  it will give a warning message informing you of the problem, and the insertion point will move to the location of the error.

In some cases rules checking can be turned on but the file will not validate. This normally means that some element is missing a required sub-element or a required attribute: for example, an OL might not have any LI elements in it, or an INPUT element may be missing a value for a NAME attribute. HoTMetaL Light does not inform you automatically if the file will not validate: you can check if the file validates by choosing Validate Document from the Special menu.

If there is an HTML error that is so serious that the file cannot be opened in graphical format (for example, if the file contains a non-HTML element), HoTMetaL Light will open it as a text file. This gives you the opportunity to correct the error manually. After you've done so, choose Interpret Document from the Special menu.This performs the equivalent of Open... on the text document.


Common `Open' error messages

If HoTMetaL Light encounters an element at a location that the HTML rules don't allow, it will try to move the element to the next valid location. If it is unable to do so, the file will be opened, but rules checking will not be turned on. The insertion point will be placed at the location of the invalid element, and you will get an error message such as the following:

Rules checking cannot be turned on:

an invalid element "INPUT" was found.

This error message indicates that the element called INPUT was found at an invalid location. The solution is to move the element to a location where it is allowed (in this case, inside a FORM), and then turn rules checking back on by choosing Turn Rules Checking On from the Special menu.

There are a number of errors that will prevent HoTMetaL Light from being able to open the file in graphical format. In this case, you will get an error message, the file will be opened in text format, and the insertion point will move to the location of the error. After you correct the error, you should choose Interpret Document from the Special menu to do the equivalent of Open... on the text document.

All of these error messages will give the location in the document where the error occurred. For example:

Error at offset 211 of the input stream, on

line 6 of the document instance:

 This means that HoTMetaL Light detected the error on line 6 of the document, after reading 211 characters. You don't actually have to count the lines and characters to find the error, because HoTMetaL Light will position the insertion point at the location of the error.

The remainder of the error message describes the specific error that occurred. Here are some common errors:

–

Unknown Element. The element "ENTER" is

not defined in the rules file.

This means that HoTMetaL Light discovered an element that is not a valid HTML element. This can occur if the document contains a new proprietary extension element that is not currently supported by HoTMetaL Light, or if a sequence of characters starts with the `<' character. In this example, HoTMetaL Light detected an element called ENTER because the document contained the phrase `<Enter>'. The solution is to substitute the character entity `&gt;' for the `<' character. That is, type the characters `&gt;' instead of `<'; this expression will be displayed as `<' in HoTMetaL Light and in the browser. If the problem is that a proprietary extension was used, you may wish to remove just the start- and end-tags of the non-HTML element, or remove the contents too.

–

Bad or missing attribute name.

Attribute "TYP" is not defined in the

attribute list.

This error will occur if an element has an invalid attribute name. This may be because the document is using a new proprietary extension attribute that is not supported by HoTMetaL Light, or it may simply be the result of a typing error. For example:

<INPUT TYP="TEXT">

Here the attribute name should be TYPE, not TYP. Correct the attribute name and choose Interpret Document. If the document contains an unsupported extension, you will have to remove the attribute name and its assigned value.

–

End of file in literal string.

This error will occur if an attribute value in the document starts with a double quote, but doesn't end with one. For example:

<INPUT TYPE="TEXT>

The value TEXT should have a double quote at the end. Insert the missing double quote and choose Interpret Document.

–

Bad start tag.

This error can occur if you have some unusual invalid markup that causes HoTMetaL Light to infer that one element has been closed, and another one should start. For example:

<INPUT TYPE="TEXT"

&eacute;

 The solution in this case is to properly terminate the INPUT element, i.e.:

<INPUT TYPE="TEXT">

&eacute;

–

Bad or missing attribute value.

Attribute name "HELLO" is not in any name

group in the attribute list for this element.

This error can occur if a start tag is not terminated properly, so that some following text appears to be an attribute of the element. For example:

<P Hello

The solution is to properly terminate the INPUT element, i.e.:

<P> Hello


Saving files

The Save command (or the   [image] toolbar  button) saves the current file (that is, the file that is open in the  active document window) to the disk. Files are always saved in HTML format.

A `document type declaration' (DOCTYPE) will be saved at the top of the file.

If you have rules checking turned on, the file will be validated when you save it, and you will be warned if there are errors and asked if you still want to save. If you do, the saved file will be invalid and HoTMetaL Light may have trouble opening it in the future.

To save the file under a new name, choose Save As... from the File menu.

You can choose the default folder for the Save and Save As dialog boxes in the Extensions/Paths section of the Options dialog box.

There are several options for saving files that you can set in the Save section of the Options dialog box.

– Click on the check box labeled Add Line Breaks if you want HoTMetaL Light to insert line breaks after a specified number of characters in a line. To set the maximum line-length, enter the length in the Maximum Line Length text box. (The default is 80 characters.) This may improve readability of the HTML code when viewing it with a text editor. HoTMetaL Light will not insert a line break where it would create invalid code.

– Make a choice from the End of line options to chose the line-end characters for the exported file. Depending on the kind of Web server your HTML file will reside on, you may want to choose UNIX, Macintosh, or Windows-style line breaks.

Backups

Auto-saving


Backups

If you want HoTMetaL Light to make a backup file each time it saves a file, turn on the check box labeled Make backup file when saving changes in the Save section of the Options dialog box. The backup file will be a copy of the previously saved version of the file. The name of the backup file will be the current filename, with the file extension changed to the backup file extension (by default this is .bak, but you can choose a different extension from the same section of the Options dialog).


Auto-saving

HoTMetaL Light will save the current file automatically after a specified number of minutes or after a specified number of changes have been made to it. Enter the values you want to use in the appropriate text boxes   in the Save section of the Options dialog box. The default values are 64000 changes and 20 minutes. If you want HoTMetaL Light to warn you each time it does an auto-save, turn on the Inform when automatically saving check box.


Printing

Choose the Print... command in the File menu to print one or more pages of the current document.

The following dialog box appears:

The six text boxes in the lower part of the dialog box allow you to describe the page header and footer by specifying the text of their left, middle, and right components.

There are a number of special strings you can put in headers and footers:

– %D - prints the system date

– %T - prints the system time

– %F - prints the file name

– %f - prints the full path and file name

– %M - prints the modification date of the file

– %P - prints the page number

The screen formatting options currently in use for the different elements (font, font size, line height, etc.) will appear in the printed output. If tag icons are currently displayed on the screen, they will be printed.

Choose the Print Setup... command to set options such as:

– Which printer to use.

– Whether to send the print job to a printer or to a file.

– Page orientation (portrait or landscape).

– Paper size.


Previewing your file in a browser

If you want to see what your document will look like in a Web browser, click on one of the preview toolbar buttons in the third toolbar; these four buttons are in a group at the right end of the toolbar. The toolbar button will be blank if you have never chosen a browser for that button. If you click on a blank button, you'll get a file chooser dialog box that lets you locate and choose a Web browser. When you have selected a browser in the file chooser dialog box, the blank toolbar button gets filled with a small icon of the particular browser. The tooltip that comes up when you hold the mouse cursor over the button will also tell you which browser is associated with that button. All future previewing can be done with one click on that toolbar button. If the browser that you chose is currently open, the document will be opened in that application's window; i.e., a new copy of that browser will not be launched.

To change the browser associated with a toolbar button, you must choose the `Preview...' command from the File menu and delete the browser from the browser list. The toolbar button will become blank and a new browser can be selected either from the `Preview...' dialog box, or by clicking on the blank toolbar button.

You can also preview documents without using the toolbar.

• Select Preview... from the File menu, or type Ctrl-M  at the keyboard.

• Select a browser from the list and click on the Preview button.

The browser is launched, displaying your document. If your document hasn't been saved, you will be given the choice of saving it and previewing, saving it as a temporary file and previewing, or cancelling the operation.

If you want to add a browser to the list:

• Click on the Add... button.

• Use the file chooser dialog box to navigate to the location of a browser and select it.

To delete a browser from the list:

• Select it in the list.

• Click on the Delete button.

Previewing a document with this command is the same as saving the file with HoTMetaL Light, launching the browser independently of HoTMetaL Light, and then opening the file with the browser.


Closing a file

The Close command in the File menu closes the current file. If the file has had changes made to it since it was last saved, you will be prompted to save the changes before closing it.


Exiting

The Exit command in the File quits HoTMetaL Light. If any open files have been changed since the last time they were saved, you will be prompted to save them before exiting.


Marking up documents

HoTMetaL Light essentially lets you do two things: edit the content and edit the markup. The content is just the text of the document. In an electronic document, markup consists of special codes inside the document that indicate how parts of the file should be processed. For example, a file created with a word-processor or desktop publisher contains markup indicating typographical features such as the font and font size. In an HTML file, which is what HoTMetaL Light creates, the markup consists of elements. Elements usually consist of a start-tag at the beginning of a section of the text, and an end-tag at the end of that section of text. Marking up a file in HTML mostly means surrounding the text with the appropriate elements. (In addition, there are a few elements that have special functions, such as specifying the location of an image.)

Styles or structure?

HTML rules

Checking the markup

Using the toolbars to create markup

Inserting an element

Changing the element type

Splitting an element

Joining elements

Removing tags

Attributes

HTML comments


Styles or structure?

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're formatted. On the other hand, if you are experienced in word-processing or desktop publishing, you may find it more useful to think of the elements as styles.

HoTMetaL Light supports both approaches to HTML markup. The commands in the Markup menu are oriented toward thinking of elements as structural objects; the buttons in the toolbars treat the elements like styles. This doesn't mean that you should stick to one or the other set of tools: it's better to understand both and use the one best suited to the task at hand. We'll explain more about this below.


HTML rules

The elements in HTML documents must be arranged according to certain rules: otherwise, the document is considered invalid. When you are using HoTMetaL Light, you don't have to keep track of these rules yourself--HoTMetaL Light does it for you. One of HoTMetaL Light's most important features is automatic rules checking, which ensures that you do not violate the required structure as you are creating a document. As well, when you open or save a document, HoTMetaL Light checks that the markup is correct and complete.

Many HTML browsers have permitted 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. We believe that you will find it to your advantage to create all your new HTML documents with HoTMetaL Light's default rules in force. It will also be worthwhile to modify existing documents to conform to these rules.

The document-structuring rules built in to HoTMetaL Light are designed to be flexible while at the same time maintaining a useful document structure. If an existing `legacy' document does not conform to these rules, HoTMetaL Light's Open... command will attempt to open it anyway, adjusting the markup so that it conforms as closely as possible to the HTML rules. If there are serious errors, the document is opened as a text document and can be edited `by hand'. Once the errors are fixed, you can use the Interpret Documentcommand to do the equivalent of Open... on the text file.


Checking the markup

One of HoTMetaL Light's most important features is that it can prevent you from creating invalid HTML markup: rules checking prevents markup errors as you're editing, and validation ensures that the markup is correct and complete.

Rules checking

Validation

Validation and extensions to HTML 2.0


Rules checking

The Turn Rules Checking On/Off command in the Special menu toggles the state of rules checking in HoTMetaL Light. The current rules checking state is displayed in the lower right corner of the status bar.

Normally you should work with rules checking turned on. When rules checking is on, HoTMetaL Light ensures that the document being edited will be correctly marked up--only elements that are allowed at a particular point can be inserted. While this checking is not complete, it will nevertheless catch and prevent most markup errors.

There are occasions when rules checking can get in the way of the job at hand. Most commonly this happens when the operation that you are performing involves two or more steps, and one of those intermediate steps will leave the document temporarily incorrectly marked up.

You should not turn rules checking off whenever HoTMetaL Light prevents you from inserting something. The HTML rules are flexible enough that you can generally achieve the effect you want without violating the rules. For example, a list cannot be inserted inside a paragraph, but you can split the paragraph into two paragraphs and insert the list between them. If you create a document with rules checking turned off, you may have a problem opening it again with HoTMetaL Light, and furthermore a browser may not display the file as you had intended.

HoTMetaL Light prevents markup errors in a number of ways.

– The commands that could cause errors are disabled. For example, the Insert Element... command in the Markup menu will be grayed-out if there is no element that could be validly inserted at the insertion point.

– A restricted list of elements is presented. For example, the Insert Element... command will display a list containing only those elements that will leave the document correctly tagged after the insertion.

– You are given an opportunity to cancel a command before any damage is done. For example, if a Paste operation would leave the document incorrectly tagged, HoTMetaL Light will display a warning dialog giving you the choice of canceling the paste or completing the command after first turning rules checking off.

When the rules are not being checked, the commands that were previously disabled will usually become enabled; for the exceptions, see the documentation on the individual commands. This means that you will be able to create an incorrectly tagged document, and therefore you should leave the rules off only as long as you need to.

When you choose Turn Rules Checking On from the menu, the menu item changes to Turn Rules Checking Off to indicate that this state can be toggled. When you turn rules checking back on, HoTMetaL Light will quickly scan your document to make sure it is correctly tagged. If it isn't, HoTMetaL Light will present a warning describing the problem, and the insertion point   will move to the location of the error. Rules checking will remain off. Select Turn Rules Checking On again after the problem has been corrected.


Validation

Choose Validate Document in the Special menu or click on the [image] to verify that the markup in a document is correct and complete.

If the validation process finds an error in the document, you will be notified of the error and the insertion point   will move to the place where the error occurred.

The purpose of the Validate Document command is to catch and report any markup errors not found by the rules checking. It will check that:

– All required elements are present. For example, if the document contains an OL (ordered list) element that doesn't contain at least one LI (list item) element, validation will detect this.

– 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 your document contains a selection, the menu item will read Validate Selection. In this case, only the selection will be validated.


Validation and extensions to HTML 2.0

If your document contains elements or attributes that are extensions to the HTML 2.0 specification, this will not prevent the document from validating, but HoTMetaL Light will inform you that the document contains non-HTML 2.0 features. Click on More... if you want more information; the following dialog box appears:

The HTML Extensions Used dialog box gives you a detailed explanation of the HTML extensions in your document. To determine which elements in your document will be understood in various browsers, select a browser from the drop-down list. In the top window, the elements specific to that browser will be listed. The bottom window lists all the elements that are not understood by other browsers or found in commonly-used rules files. You can select a browser or rules file from the drop-down list there are well.


Using the toolbars to create markup

HoTMetaL Light has three toolbars for creating elements. The `Common HTML' toolbar  contains buttons for creating the most common HTML elements.  This toolbar is the middle one in the default screen configuration. The `Other HTML' toolbar (the bottom one in the default configuration) has buttons for the less commonly used HTML elements, and the `Forms' toolbar has buttons for the creation of forms, tables, and other block elements that are extensions to HTML 2.0.

Most of the buttons in these toolbars represent a single element: to create an element, just click on the button. There are also four buttons that represent a group of related elements. These  are wider than the others and consist of an icon with a downward-pointing arrow at the right. Clicking on one of these buttons while keeping the mouse button down will bring up a menu of elements that you can choose from. A single, quick click on one of these buttons will cause its default element to be created. The default is the element that was most recently chosen from the menu, or the first element in the menu if this button hasn't been used yet in this HoTMetaL Light session.

Depending on the context, HoTMetaL Light will do one of the following when you try to create an element from the toolbar:

– Insert the chosen element at the insertion point.

– Insert the chosen element after the current element.

– Surround the selection with the chosen element.

– Change the current element to the chosen element.

– Split the current element.

– Nothing, if any action the button could perform would leave the document incorrectly marked up.

If there is no valid action that a button can perform at the current location in the document, HoTMetaL Light will beep if you click on the button.

HoTMetaL Light uses the following guidelines when determining which action to take; the first valid action from this list is the one that's carried out.

1. If the document contains a selection (highlighted text and/or elements), and the HTML rules will allow the chosen element to surround the selection, then the selection can be surrounded. For example, if there is a selection inside a P element, and you try to create an EM element, the EM will surround the selection.

2. If there is no selection, and the HTML rules will allow the chosen element to be inserted, then the element can be inserted at the current insertion point. For example, if the current element is P and you try to create an EM element, the EM will be inserted.

3. If the current element and the chosen element are of the same type, and it is not valid to nest one inside the other, the current element can be split into two elements at the start of the selection or insertion point; everything before the start of the selection (or insertion point) will be in the first element, and everything after it will be in the second element. For example, suppose you have a P element containing the text `hello world', with the insertion point between the two words: if you try to create another P, you will get two paragraphs, the first containing `hello', and the second containing `world'. However, if the current element is A or IMG, clicking on the [image] or [image]   button, respectively, is the equivalent of choosing the Edit URL... command.

4. If it is valid to replace the current element with the chosen element, the replacement can be carried out. For example, if the current element is H2 and you click on the [image] button, the current element will change to H1.

5. If the insertion point is directly before the end-tag of the current element, and it is valid to insert the chosen element after the current element, but not inside it, the insertion can be performed. For example, if you have a P element with some text in it, with the insertion point just before the P tag, and you click on the   [image] button, HoTMetaL Light will insert a BLOCKQUOTE element after the P.

The differences between using the toolbar buttons to create markup and using the commands from the Markup menu are that these commands:

– Perform more restricted functions (insert/surround with Insert Element..., change with Change Element...).

– Provide a list only of the elements that can be validly inserted, or replace the current element.


Inserting an element

You can insert an element from the toolbar or by using the Insert Element... command in the Markup menu.

Each of these methods has a dual function: if the document contains a selection (highlighted text or elements) the element you choose will surround the selection; if there is no selection, an empty element will be inserted.

There are also some situations in which HoTMetaL Light will insert an element automatically (see Automatic insertion).

From the toolbar

From the menu

Automatic insertion


From the toolbar

To insert an element using the toolbar, just place the insertion point or selection in the desired location in the document and click on that element's toolbar button. The element will be inserted (surrounding the selection if there is one) unless this would cause the document to be incorrectly marked up. In that situation, HoTMetaL Light will change or split the current element, as appropriate, or beep to indicate that no valid action can be carried out. If rules checking is turned off, the insertion will succeed except when you try to surround something with an element (such as IMG) that can never have content.


From the menu

When you choose the Insert Element... command, click on the [image]    toolbar button, or type  Ctrl-I,    you get the Insert Element dialog box, which contains a list of the elements permitted by the HTML rules at the location of the insertion point (or selection) in the document. The name of the first element (if there is one) required by the HTML rules at this point in the document will be followed in the list by the `<' character.

You will probably find this dialog box more convenient to use if you pin it to the screen--see Pinning dialog boxes.  A pinned dialog box will stay up on the screen after you perform an action. You can move the dialog to a convenient location on the screen so that it doesn't cover part of the document window.

To select an element, click once on the line containing the element name, or type the first characters of the element name until the correct element is selected. Then click once on the Insert Element button to insert it. Alternatively, you can double-click on the line that contains the element name. Since this dialog box displays only the elements that can validly be inserted, the insertion will always take place.

Insert Element... will be disabled and the menu item grayed-out if there are no elements that can be inserted at the insertion point or current selection without creating an incorrectly marked up document. Often the command will become enabled if rules checking is turned off, but there are some elements in which you will never be allowed to insert an element.


Automatic insertion

There are some circumstances where HoTMetaL Light will insert an element for you because the HTML rules require it.

– If you insert an element, such as UL, that has a required sub-element (in this case, LI), HoTMetaL Light will insert the required sub-element inside the element you chose. You can turn off this behavior by turning off the Include required elements option in the General section of the Options dialog box.

– If you type inside an element that cannot contain text directly, but has a possible sub-element that can contain text, HoTMetaL Light will, in some circumstances, surround what you've typed with that element. For example, if you type directly inside a BODY element, HoTMetaL Light will surround the text with a P. If you type directly inside a UL or OL, HoTMetaL Light will surround the text with an LI element.

– Similarly, if you try to insert an element where it's not permitted, HoTMetaL Light will, if possible, surround it with an element that can validly appear at the current location. For example, if you try to insert an EM directly inside BODY, HoTMetaL Light will surround it with a P.

– If you try to type in an element that cannot have any content, HoTMetaL Light will, in some circumstances, try to surround what you've typed with an element located after the element you typed in. For example, if you type in an IMG that is located directly inside a BODY, HoTMetaL Light will insert a P after the IMG, containing the text you typed. (If the IMG is already inside an element that can contain text, HoTMetaL Light will just move the insertion point after the IMG end-tag, and insert the text there.)


Changing the element type

You can change the element type from the toolbar or by using the Change Element... command in the Markup menu.

From the toolbar

From the menu


From the toolbar

To change an element using the toolbar, place the insertion point or selection in the element you want to change (the element must be the current element,the innermost element containing the insertion point or selection; the name of the current element is displayed in the mini-context area at the bottom left of the document window).   Then click on the toolbar button for the element you want to change it to. Remember that when you use the toolbar, HoTMetaL Light will first try to insert the element you click on, and it will change the current element type only if the insertion would be invalid. For example, if the current element is P and you click on the toolbar  button for EM, HoTMetaL Light will insert an EM, but if you click on the   [image] (address) button, the P will change to ADDRESS.

If rules checking is turned off, clicking on a toolbar  button will almost always cause HoTMetaL Light to perform an insertion, rather than a change. The exception is when the current element is one that cannot have any content (for example, IMG).


From the menu

When you choose the Change Element... command   (or type Ctrl-L), HoTMetaL Light gives you a dialog box containing a list of elements that can replace the current element and still leave the document correctly marked up.

You will probably find this dialog box more convenient to use if you pin it to the screen--see Pinning dialog boxes.  A pinned dialog box will stay up on the screen after you perform an action. You can move the dialog to a convenient location on the screen so that it doesn't cover part of the document window.

To select an element, click once on the line containing the element name, or type the first characters of the element name until the correct element is selected. Then click once on the Change button to insert it. Alternatively, you can double-click on the line that contains the element name. Since this dialog box displays only the elements that can validly substitute for the current element, the change operation will always take place.

The command will be disabled and the menu item grayed-out if there are no elements that can replace the current element without creating an incorrectly marked up document. Often the command will become enabled if rules checking is turned off, but if the current element has any content you cannot change it to an element that can never have content.


Splitting an element

Splitting an element literally means breaking it into two elements at the current insertion point   or selection. This creates two elements of the same type as the current element, one containing all of the content before the beginning of the insertion point or selection and the other containing the remaining content.

If the insertion point is directly before an end-tag (for example, when you are typing at the end of a paragraph) then splitting creates a new, empty element with the same type as the current element. In fact, the most common use for splitting is to start a new paragraph.

Typing Return or Enter inside most elements will cause them to be split. The exceptions are elements for which you've set the fill mode  to `no fill' with the Styles...command--line endings are significant for these elements (e.g., PRE).

You can also split an element by choosing the Split Element command in the Markup menu, or by typing Ctrl-P.   This will split the element regardless of its fill mode.

If rules checking is turned on, you can't split an element if this would cause the document to be invalid (for example, you cannot split the HEAD element). You can split any element if rules checking is turned off.

When you split an element that has attributes, both of the resulting elements will adopt the attributes of the original element.


Joining elements

HoTMetaL Light lets you join the current element and the preceding element, provided they are of the same type--two paragraphs, for example, or two list items.

– Backspacing over the start-tag of the second element will join the two elements.

– If you choose Join to Preceding from the Markup menu (or type  Ctrl-J   at the keyboard) HoTMetaL Light will join the two elements.

You cannot join two elements if there is any text other than `white space' (spaces, tabs or carriage returns) between the two them. (Any white space between the elements will be condensed to a single blank space if the join operation succeeds.)

If the elements have attributes, then the attributes of the first element will be adopted for the new, combined element.


Removing tags

Choosing Remove Tags from the Markup menu, clicking on the [image]    toolbar button, or typing Ctrl-D    at the keyboard deletes the start- and end-tags of the current element without affecting its contents.

The command will be disabled if deleting the tags will leave the document incorrectly marked up. However, it will always be enabled if rules checking is turned off.

If an element has no content, backspacing over its start- or end-tag will delete the element.


Attributes

Elements can have content (text and sub-elements contained in the element) and attributes. An attribute is a piece of information about the element that does not appear in the content of the element. The most common uses for attributes are:

– HTML forms

– Setting the browser background

– Setting the browser text colors

– Setting the alignment of various elements

Editing attributes


Editing attributes

To access the attribute dialog boxes:

• Put the insertion point inside the element whose attributes you want to edit (you must make this element the current element, the one whose name is displayed in the mini-context area at the bottom left of the document window; you can ensure this by putting the insertion point directly to the right of the element's start-tag).

• Choose Element Attributes...

Or:

• Right-click inside the element and choose Element Attributes... from the pop-up menu.

Or:

• TypeF6 from the keyboard.

The Attributes dialog box lets you see what the attribute values are and also edit them. If the current element has one or more attributes, then the Element Attributes... command in the Markup menu will be enabled (whether or not the attributes have been given values).

Some elements have smaller attribute boxes that are invoked for editing the common attributes of particular elements. In particular:

– The IMG element has an Image Attributes dialog box. To open this dialog box, double-click on the image, place your insertion point inside the image and choose Image Attributes... from the Tools menu, or right-click inside the IMG element and choose Image Attributes... from the pop-up menu.

– Attributes that represent URLs (e.g., in IMG and A elements) can be edited by choosing Edit URL... from the Markup menu.

– Graphical FORM elements have customized attribute editing dialog boxes, accessible by double-clicking on those elements.

– Attributes in table cells should not be edited with Element Attributes.... When you set table properties with the tables commands (i.e., Cell Properties... or Row Properties... from the Tools menu), the attributes will be set automatically.

– APPLET and OBJECT (ActiveX) element attributes can be more easily edited from their customized attribute editing dialog boxes, accessible from Applet Parameters... and Object Parameters... commands under the Markup menu.

– You can change certain attributes of the BODY that have to do with color and tiling background images by choosing Document Colors... from the Format menu.

If you pin the Element Attributes... dialog box (see Pinning dialog boxes) you can move the insertion point into another element of the same type and the dialog will stay up on the screen, but if you move it to an element of a different type, the dialog box will be dismissed.

The dialog box contains an entry for each attribute of the current element. Each line starts with the attribute name, followed by either a text box or a pop-up menu,   depending on what kind of value the HTML rules say the attribute must have. The attribute value may be text or a choice from a list of values. This means that the dialog box will be different for each kind of element.

The list of attributes for the INPUT element shows both possibilities:

TYPE, CHECKED, ALIGN and DIR are chosen from a list, while the values for the other attributes are typed directly in the corresponding text boxes.

• When you have entered the desired attribute values, click on the Apply button.

If you insert an element that has a required attribute, HoTMetaL Light will display the Edit Attributes dialog box automatically.


HTML comments

You can insert HTML comments in your document by choosing the Insert Comment command in the Markup  menu, typing  F8 , or clicking on the   [image] toolbar button. Comments, which can contain only text, are notes that can be toggled visible in HoTMetaL Light using the Show Comments command, but are not displayed by browsers.

Because of the way comments are represented in HTML, you should not put two hyphens in a row, `--', inside a comment. This could cause the markup to be invalid.


URLs

URLs are one of the most important features of HTML, because they allow HTML documents to function as hypertext documents. A URL is the address of a file (and possibly a specific location in that file), written in a format that a Web server understands, and which a browser can use to access the file over the Web. An example of a URL is:

http://www.sq.com/doc/tutorial.htm

Most of HoTMetaL Light's commands for working with URLs are in the Markup menu.

Where URLs appear

Two kinds of URLs

Creating URLs with HoTMetaL Light

Using the URL hotlist

Pointing to a specific location

Syntax of URLs

Relative URLs

The `mailto' scheme

Displaying URLs

Changing your URLs for the Web

For more information


Where URLs appear

URLs are contained in certain designated `link' elements. They are attributes of the element, which means that they are values that are associated with the element, but which are not part of the content of the element (that is, text or sub-elements). Each attribute has a name and a value. (These are actually stored inside the start-tag of an element in an HTML file--you can see this if you use a text editor to open the file).

The elements that contain URLs are:

– A: this element is used whenever you want to make a hypertext link to another document, or to a specific location in another document or the current document. Since this element occurs so often there is a special command, Insert Anchor... in the Markup menu, for inserting it.

– IMG: this element is used to include a graphic file in an HTML document.

– FORM: this element's URL specifies a program on a Web server that the form should be sent to for processing. See the tutorial on forms  for more information.

– BASE: you use this element if you need to record the current document's URL within the document itself. See the section Relative URLs  for more information.

– INPUT: this element is used to represent various types of graphical controls in a form. One of your options is to use this element to display an image, which can be clicked on to submit the form.

– LINK: this element can contain URLs that indicate a relationship between the current document and other documents.

– HR: this element's URL can specify an image file to be used in place of the horizontal rule in capable browsers.

– UL: this element's URL specifies an image to be used as a list bullet in capable browsers.

– LI: this element's URL specifies an image to be used as a list bullet in capable browsers.

– FRAME: the URL specifies the document to be displayed initially in the frame window.

If the mouse pointer is over one of these elements, its URL is displayed in the message area in the lower left corner of the HoTMetaL Light window.


Two kinds of URLs

URLs can be divided into two groups: completeURLs and relative URLs. A complete URL contains the following parts:

– A scheme (e.g., http, ftp, gopher) that specifies how the browser should retrieve the file.

– A server address (e.g., www.sq.com) that specifies which server the file is located on.

–  Optionally, the server address can have a port number attached to it:

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.

– A path, a sequence of directories (folders), terminating with a filename. This specifies the file to be retrieved.

Consider the example at the beginning of this section:

http://www.sq.com/doc/tutorial.htm

Here the scheme is `http', the server address is `www.sq.com', and the path part of the URL is  `doc/tutorial.htm'.

The path/filename is often omitted in the URL of a site's home page. The server will generally return a file--usually `index.html'--by default. For example, `http://www.sq.com/' is the URL for SoftQuad's home page.

A relative URL  will be missing some of this information, and a browser will have to obtain the missing information from the URL of the document that contains the relative URL.


Creating URLs with HoTMetaL Light

HoTMetaL Light makes it easy to create and edit URLs, by way of the Edit URL... command in the Markup menu.

To use this command you should:

• Put the insertion point inside the element whose URL you wish to edit.

• Choose Edit URL....

If the current element is A, clicking on the [image]   toolbar  button is equivalent to choosing the Edit URL... command; similarly, clicking on the   [image]  toolbar button when the current element is IMG invokes this command.

Edit URL... is disabled if the current element is not one of the ones that can contain a URL. The Edit URL dialog box comes up by default when you insert an A element (except when you insert it with the Name Target... command.

URLs for images

The `Edit URL' dialog box

Filename format

Dragging and dropping files and URLs

How HoTMetaL Light constructs the URL

Pasting in URLs


URLs for images

Choosing Image Attributes... from the Tools menu when the current element is IMG results in slightly different behavior than with other link elements. The first dialog box you see lets you enter information used only for images. If you click on the Edit... button in this dialog box, you will get a dialog that is identical to the Edit URL dialog, with one exception, noted below. See the chapter Working with images  for more information.


The `Edit URL' dialog box

 The Edit URL dialog box contains the following controls for creating a URL:

–  A drop-down list labeled Scheme, containing a list of schemes for URLs. The scheme describes how the information contained in the URL is to be used by a browser. Some common schemes are:

– file: indicates a file on a local filesystem.

– ftp: indicates an address on an ftp server.

– gopher: indicates an address on a gopher server.

– http: indicates an address on a WWW server.

– mailto: indicates that the URL specifies a mail address

You can also enter a scheme in the  text box   to the left of the   drop-down list.

– The Host  text box is for entering a server address, such as a WWW or ftp server, or the `domain name' in a mail address.

– The Port  text box is for entering a port number.

– The Path text box  is for entering the filename (and often a path), or a user name in a mail address.

– The Choose File... button to the right of the Path text box   will bring up a  file selection dialog box. This dialog box can be used instead of the Path  text box when the path component of the URL is a file on your system.

– There is a drop-down list   that lets you choose between Name and Query. If you want the URL to be a link to a specific location, choose Name and enter the name of the location in this text box.   Do not enter the `#' character that separates the location name from the rest of the URL: HoTMetaL Light will insert it for you when it creates the URL. (You can also use the Name Target.../Connect Link command pair to set up a link to a specific location. See the section Pointing to a specific location  for more information.) Query is used if you want to specify a query for a searching program.

The dialog box used to edit the URL of of an image (IMG) element does not have the `Name/Query' control group.


Filename format

The URL syntax requires that folder names in the filename part of the URL be separated by slashes, `/'. This is different from the Windows and DOS convention, which uses backslashes, `\'. If you use HoTMetaL Light's Edit URL... command to create the URL, you can enter the filename using either of the two conventions, and HoTMetaL Light will, if necessary, convert it to the standard URL format.

Similarly a drive name such as `c:' in the filename should contain a vertical bar, `|', instead of a colon, e.g., `c|'. This is because the colon is a special character in a URL and can appear only once, after the scheme. You can enter either a colon or a vertical bar, and HoTMetaL Light will convert if necessary.

Here is an example of both of these points. If you enter the filename:

c:\luise\madness\gravity.htm

HoTMetaL Light will convert this to:

c|/luise/madness/gravity.htm


Dragging and dropping files and URLs

HoTMetaL Light can create relative URLs for you if you drag and drop images or other files into the HoTMetaL Light window. Dragging and dropping will create a relative  URL when the document that you are working on has been saved, and will create a complete URL if the file you are working on has not been saved.

If you create URLs by using the file browsers (i.e., when you insert an image or an anchor with the toolbar or menu items), you will always be creating complete URLs.


How HoTMetaL Light constructs the URL

HoTMetaL Light creates a URL with the correct syntax from the information you've entered. Suppose you have entered the following:

– Scheme: http

– Host: www.sq.com

– Path: orwell\homage.htm

– Name: catalunya

From this information, HoTMetaL Light constructs this URL:

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

Notice that HoTMetaL Light inserts the `/' between the host and the path. Since this scheme specifies that the path starts with a slash, you don't have to type it yourself. In fact, in this case, if you do start the name with a slash, HoTMetaL Light will ignore it. The `\' in the path has been changed to a `/', as the URL syntax requires. HoTMetaL Light also inserted the `#' before `catalunya'.

Certain characters will be converted into an `escape sequence' if they are entered into the `Edit URL' dialog box. In particular, a number sign (#) will be changed to `%23', and a space to `%20'. These forms are equivalent to the characters they replace and are interpreted correctly by all browsers.


Pasting in URLs

Sometimes you may wish to paste a URL--from another application or document, for example--rather than constructing it piece by piece. This can be done by pasting the URL into the Path text box of the Edit URL dialog. The next time that you open the Edit URL dialog box for the element in question, correct information for each part of that URL--Scheme, Host, etc.--will be displayed in each text box in that dialog.


Using the URL hotlist

HoTMetaL Light 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 URL you're currently editing to the hotlist:

• Enter the scheme, host, path, and name or query as needed.

• Click on the Add to Hotlist... button in the Edit URL dialog box.

You'll then see 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 the Ok button.

To pick a URL from the hotlist:

• Click on the Hotlist... button in the Edit URL 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 the Ok button.

To delete a URL from the hotlist:

• Click on the Hotlist... button in the Edit URL dialog box.

• Select the URL that you want to remove.

• Click on the Delete from Hotlist button.

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

• Click on the Hotlist... button in the Edit URL dialog box.

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

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

• Click on the Ok button.


Pointing to a specific location

Creating a URL that points to a specific location in a document is very easy. Here is an example:

http://www.sq.com/authors/orwell/homage.html#madrid

The characters `#madrid' at the end of this URL point to a specific location in the document that the URL refers to. For this link to work:

– The document homage.html must contain an anchor (`A' element) at the location you want to point to.

– The anchor must have the name `madrid'. The next section explains how to assign an anchor name.

– If possible, this element should contain some text, as otherwise some browsers will not be able to locate it.

Creating `source' and `target' links in HoTMetaL Light


Creating `source' and `target' links in HoTMetaL Light

The quickest way to create the links is to use the Name Target...and Connect Link commands in the Markup menu (or the equivalent toolbar buttons).

• Put the insertion point or selection at the desired location of the target link.

• Click on the [image]   (Name Target) toolbar button.

HoTMetaL Light gives you a dialog box in which to enter a name for the target link (`madrid' in the example above). If there is a selection when you click on the toolbar button, the first word in the selection will appear in the dialog box by default, but you can enter something else if you want. Link names typically consist of one word, but you can enter more.

• Enter a name of your choice and click on the Ok button.

HoTMetaL Light inserts an A element, surrounding the selection if there is one. (This element's NAME attribute will be set to the value you entered.)

• Put the insertion point or selection at the desired location of the `source' link. This can be in the same document, or another document.

• Click on the   [image] (Connect Link) toolbar button.

HoTMetaL Light inserts an A element, surrounding the selection if there is one. This element's URL will point to the target link. Since the `path' part of this URL will refer to the local folder  containing the document with the target link, you'll have to modify the URL before putting the document on the Web. See the section Changing your URLs for the Web for more information.

You can perform other actions in between creating the two links, but HoTMetaL Light will remember only the most recent target link that you created with Name Target... (or the equivalent  toolbar button).

If it's not convenient to use Connect Link (perhaps you want to enter all the target or source links first) you can use Insert Anchor... or the equivalent toolbar button to create the source links. In this way you can create the links in any order. To create a source link:

• Put the insertion point or selection at the desired location of the source link.

• Click on the [image]   toolbar button.

HoTMetaL Light inserts an A element and brings up the Edit URL dialog box.

• Enter the scheme, host, and path in the usual way.

• Choose Name from the drop-down list  underneath the Path label (this should be the default).

• Enter the name of the target link in the text box   to the right of Name.

• Click on Ok.

Use Name Target... in the usual way to create the target links.


Syntax of URLs

The information in URLs has to be arranged in a way that the browsers and servers can understand it--in other words, it has to conform to the correct URL syntax.

Since the Edit URL... command helps you create URLs, you don't usually have to remember the details of the syntax: we've included this information here anyway because we believe that it will help you create URLs if you know what's really going on when you make a URL.

There are actually several URL formats, but fortunately most of the ones you'll have to use fall into two groups.

Files on a Web server

Files on your hard disk


Files on a Web server

When you create a link to another HTML document or to an image, you'll usually be specifying a file on a Web server. In this case, the parts must be arranged in the following order:

1. The scheme, which will be http.

2. The characters `://'.

3. The server address, e.g., www.sq.com.

4. The `/' character.

5. The path/filename.

The URL syntax requires that folder names in the path part of the URL be separated by slashes. This is different from the Windows and DOS convention, which uses backslashes, `\'. If you use HoTMetaL Light's Edit URL... command to create the URL, you can enter the path using either of the two conventions, and HoTMetaL Light will, if necessary, convert it to the standard URL format.

If you're creating this kind of URL with the Edit URL... command, choose the `http' scheme. Then you just need to enter the server address and path/filename: HoTMetaL Light will construct the URL for you.


Files on your hard disk

If a URL specifies a file on your local  hard disk,  rather than a file on a Web server, you would write the URL a little differently. You can refer to a file on your local disk only while you're developing and testing your document. When the document is published on the Web, it should refer only to other files available over the Web.

1. The scheme for this kind of URL is file. This scheme is optional, however.

2. If you do use the file scheme, follow it with the characters `:///'.

3. Now you need to specify the drive name: instead of using the normal Windows format; e.g., `c:', replace the `:' with a vertical bar; e.g., `c|'.

4. Lastly, specify the path/filename. As described above, the standard URL format requires that you use the `/' in the path, but you can use `\' if you're entering the URL with HoTMetaL Light's Edit URL... command.

An example of this kind of URL is:

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

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

If you're creating this kind of URL with the Edit URL... command, choose the `file' scheme. Then you just need to enter the path/filename. Notice that you don't need a server address, since your local disk is assumed to be the `server'.


Relative URLs

Relative URLs (also called partial URLs) do not contain the complete information required for a browser to locate the file they refer to. For example, the scheme or network address could be missing.

Reasons to use a relative URL

Base URLs

Interpreting relative URLs

Creating relative URLs with HoTMetaL Light


Reasons to use a relative URL

Some of the advantages of using relative URLs over complete URLs are:

– Less typing is required to enter them.

– If you move all the files to a different location but keep the same  folder structure you don't have to revise the URLs.

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


Base URLs

The browser has to figure out the missing information, based on the URL of the document that contains the relative URL (this is called the `base URL'). The browser has to construct a complete URL by combining the the relative URL with the relevant information from the base URL.

The base URL can come from one of two sources.

1. If the current document contains a BASE element, then the URL specified in this element is used as the base URL for all relative URLs in the document. You should put a BASE element in your document if it contains relative URLs and you expect users to download the document to their local systems and browse it later.

2. If there is no BASE element, the URL that the browser used to retrieve the current document will be the base URL.


Interpreting relative URLs

The following guidelines are slightly simplified and don't represent everything that can be said about interpreting relative URLs, but they cover the most frequently encountered cases. Remember that the process being described here is being done `internally' by the browser when it's interpreting the relative URL: the browser doesn't actually modify the URLs in your document.

1. Relative URLs can start with one of the following:

– A double-slash: `//'.

– A single slash: `/'.

– A file or folder name.

– A dot `.'.

– A double dot `..'.

2. If the relative URL starts with `//', then the only thing missing is the scheme (http, etc.). In this case the scheme is inherited from the base URL to make a complete URL.

3. If the relative URL starts with a single slash, then the scheme and the server address are missing. Both of these will be inherited from the base URL to make a complete URL. For example:

/orwell/face.gif

A file with this URL will be retrieved with the same scheme and from the same server as the document that contains the URL.

4. If the relative URL starts with a folder  or filename, then the procedure that a browser will use to make a complete URL is to remove the filename from the base URL and then append the relative URL to it. For example, suppose the relative URL is:

orwell/homage.htm

and the base URL is:

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

The browser removes the filename from the base URL to get:

http://www.sq.com/authors/

Now the browser appends the relative URL to this to get the complete URL:

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

5. A couple of special characters can occur in relative URLs:

– A relative URL can start with the characters `..'. This means `go up one folder level'.

– The character `.' at the start of a relative URL means `the current folder'.

If the complete URL that you get by combining the base and relative URL contains the characters `/../', e.g.,

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

then the browser interprets this by removing the folder that precedes those characters from the URL. The resulting URL from the last example would be:

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

The folder `authors' has been removed.

If the URL contains the characters `/./' then the browser will simply remove `./' from the resulting URL.

These characters aren't interpreted as special characters unless they occur as the only thing between two slashes (`/../' or `/./'). For example, the sequence `/tom../' just refers to a folder called `tom..'.


Creating relative URLs with HoTMetaL Light

If you're creating a relative URL with HoTMetaL Light's Edit URL... command, leave the Scheme  text box   blank, and enter the required information in the Path  text box.   For information on converting complete to relative URLs using the Publish... command, see Changing to relative URLs.


The `mailto' scheme

The mailto scheme is used:

– As the `action' for a form that is to be e-mailed.

– In an anchor, which can be clicked on in a browser to generate a mail-editing dialog box.

Inside an A or FORM element, as appropriate:

• Choose the Edit URL... command.

• In the Edit URL dialog box, choose the `mailto' scheme.

• Enter the user name in the Path text box.

• Enter the domain name in the Host text box.

The resulting URL contains the `mailto' scheme, followed a mail address, such as `charles@windsor.org'.

In a form, there is one more thing you have to do in order to use mailto:

• Choose Element Attributes... from the Markup menu.

• Set the METHOD attribute to the value `POST'.

Some browsers do not support mailto. 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.


Displaying URLs

By default, HoTMetaL Light displays the URLs associated with relevant elements in the prefix of the element's start-tag. If you want to hide the URLs, choose Hide URLs from the View menu: the URLs will disappear from the display, and the menu item will toggle to Show URLs. Clicking on Show URLs will cause the URLs to be displayed again. You can configure HoTMetaL Light to show or hide URLs by default in the Defaults for New/Open section of the Options dialog box.

When the mouse cursor is over an element containing a URL, the URL is displayed in the message area in the lower left corner of the HoTMetaL Light 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 example, when you are creating a document the URLs may consist of local filenames such as:

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

The Publish... command gives you the opportunity to edit all the URLs, modifying them if necessary. This command is a form of `find and replace' for URLs.

When you choose Publish... you will get a dialog box 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.

Finding and replacing URLs

Changing to relative URLs


Finding and replacing URLs

When you click on the Find Next button, HoTMetaL Light 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 the Replace button will change the text you're searching for to the text in the To box.

Clicking on the Replace All button will make this change for all URLs in the document that contain the Change URLs From text. This also causes the dialog box to be dismissed.

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 complete 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 net effect of that publish 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 complete URLs, see .

Publish operations could also add `./' and `../' to the beginnings of your URLs, change all URLs to a different sub-directory on the same site, etc.


For more information

The standards documents that define URLs are RFC1738 (complete URLs) and RFC1808 (relative URLs). They are archived at http://www.w3.org/pub/WWW/Addressing/rfc1738.txt and http://www.w3.org/pub/WWW/Addressing/rfc1808.txt.


Word-processing features

This chapter covers the word-processing features of HoTMetaL Light: undoing and redoing actions, cutting, copying, pasting, and deleting a selection, spell checking, and using the thesaurus.

Undoing and redoing actions

Selecting, copying, cutting, and pasting

Spell checking

Using the thesaurus


Undoing and redoing actions

The Undo command in the Edit menu allows the effect of the last operation to be undone.

Typing text, and any command that changes the content of the document, can be undone.Note the following actions that cannot be undone:

– Scrolling and windowing commands

– Text selection

– Undo itself (it can be undone with Redo)

– Edit Dictionary... and other operations that affect the user dictionary

– Any actions performed prior to the last time the document was saved cannot be undone.

If you execute several Undo commands in a row you will undo the most recent action, and then undo the second most recent action, and so forth. By default, you can undo the last 30 actions. You can change the default undo limit in the Defaults for New/Open section of the Options dialog box.

To reverse an Undo, you must use Redo. If you have performed several Undos, you can reverse each of them by performing an equal number of Redos. If you perform one or more Undos, and then perform an undoable action, you will no longer be able to redo any of the Undos.

If you undo a Copy or Cut command, the previous contents of the clipboard will be restored.


Selecting, copying, cutting, and pasting

One of the advantages of HoTMetaL Light over text-based HTML editors is that you can easily select and move around parts of the document structure without having to worry about making the markup invalid. It is easy to select a whole element (and its sub-elements, if any): you just have to drag the mouse over the start-tag (from the left), the end-tag (from the right), or click once in the start- or end-tag, and the element is selected. Choosing Select Element from the Edit menu, or right-clicking inside an element and choosing Select Element from the pop-up menu will also select the current element (keyboard shortcut, Ctrl-T).

The Cut, Copy, Paste, and Delete commands work as they normally do in word-processing applications. The only exception to this is that in HoTMetaL Light, a selection can contain elements. For this reason there will be circumstances where removing or pasting a selection would cause the document to be incorrectly marked up.

If you try to do a paste that would cause the markup to become invalid, you will get a warning dialog box that gives you the opportunity to turn rules checking off if you want to continue with the paste. There are some circumstances in which you will never be able to do a paste, such as when the insertion point is inside an IMG element, which cannot contain text or markup.

Cut and Delete will be disabled if you select one of the elements HTML, HEAD, or BODY.

If you choose Select Element,the current element, including its start- and end-tags, will become highlighted.

To perform the equivalent of `Select All' on a document, place your cursor inside the HTML element (but not inside any other element) and choose Select Element from the Edit menu (keyboard shortcut, Ctrl-T).


Spell checking

The Check Spelling... command in the Edit menu allows you to spell-check all or part of the text of your document, using one or more dictionaries.

Using the spell checker

Restricting spell checking

Choosing the spell checking `language'

User dictionaries

Supplementary dictionaries


Using the spell checker

When you choose Check Spelling... or click on the    [image]  toolbar icon, HoTMetaL Light spell-checks your document, starting at the insertion point and continuing through the document, wrapping around to the top when the end of the document has been reached. 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 window.

The list in the dialog box will present a number of possible substitutions: this list includes words whose spelling or pronunciation is close to the unrecognized word. The words are listed in decreasing order of probability that they are the correct substitution.

Correcting a misspelled word

If one of the words in the list is the correct substitute for the misspelled word, you can click on that word. The word you chose is then put in the  text box   labeled Replace with. You can also type replacement text of your choice in the text box   directly. This  text box   initially contains the unrecognized word. When the text box   contains the desired substitution, click on the Replace button to make the correction to the document and continue spell-checking.

Leaving a word as-is

If the unrecognized word is a word that you consider spelled correctly (perhaps it is a jargon word, a proprietary name, etc.) then you have several options.

– If you expect this word to appear again in this document or in other documents, you can add it to the user dictionary by clicking on the Add to Dictionary button. If there is no current user dictionary you will get a Load Dictionary dialog. Use this dialog as described in the section on editing dictionaries. After you load the dictionary, you will have to click on Add to Dictionary again to add the word to the user dictionary. The next time you spell-check with the same user dictionary, the spell checker will not stop at this word.

– If you want the unrecognized word to be ignored by Check Spelling... only for the duration of this HoTMetaL Light session, click on the Ignore button. This causes the word to be put into a temporary list of correctly spelled words, and subsequent occurrences will be ignored. The next time HoTMetaL Light is invoked with the same dictionaries, the spell checker will again stop at this word.

– If you do not want to take any special action, click on the Next button. This causes the search to resume; if the word occurs again in the document, the spell checker will stop at it.

HoTMetaL Light informs you when no more misspelled words are found.


Restricting spell checking

You can restrict spell checking to a selection in your document. This must be done in two parts. First, define the restricted search area:

• Highlight the portion of the document that you wish to restrict spell checking to. (This can be done from the structure window if you wish to select a large part of the document.)

• Click on the Set Restriction button in the Check Spelling dialog box.

This causes the restricted search area to be defined. Even if you later highlight some other part of the document, HoTMetaL Light will still know where the restricted area is. This process does not actually enable restricted spell checking. To do this, you must then:

• Click in the check box labeled Restrict.

 If it is  checked,  restricted spell checking is enabled.


Choosing the spell checking `language'

HoTMetaL Light can check for American English or British English spelling. The lexicon for each `language' is contained in a system dictionarythat is shipped with HoTMetaL Light. System dictionaries cannot be edited.

The default is American English. To switch to British English, you must open the file  hmlight2.iniin the HoTMetaL Light directory with a text editor (e.g., Notepad).   Find the line:

spell_checking_language=AMERICAN

 Change it to:

spell_checking_language=BRITISH

 Save the file.

You must also go to the Spell Checking section of the Options dialog and change the supplementary dictionary and user dictionary to their British counterparts:

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

• Delete the supplementary dictionary listing for hmpro3.dct by clicking on the Delete button.

• Add the supplementary dictionary listing for hmpro3b.dct by clicking on the Add button and selecting it from the lib\spell folder under the HoTMetaL Light folder.

• Restart HoTMetaL Light.

Normally there should be no reason to move the system dictionaries, but if you have to, you must indicate the new System Dictionary Pathin the Spell Checking section of the Options dialog.


User dictionaries

You can create a personal user dictionary to which you can add your own list of words that do not appear in the system dictionary. This way you avoid having the spell checker stop at the same words over and over.

You can select a default user dictionary in the Spell Checking section of the Options dialog box. You can also choose the default dictionary file extension in this dialog box. You can load a different dictionary during a HoTMetaL Light 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 Light folder.

Creating or loading a dictionary

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

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

• If no dictionary is currently loaded, you will get the Load Dictionary file chooser dialog box. If there is a dictionary already loaded, you'll get the Edit Dictionary dialog box. Click on the Load Dictionary... button to get the Load Dictionary dialog.

• In the Load Dictionary dialog box, choose the name of the dictionary you want to load. If you enter the name of a file that does not exist, HoTMetaL Light will ask if you want to create a new dictionary.

Editing a user dictionary

User dictionaries are binary files and cannot be modified with a text editor. To edit a user dictionary:

• Create or load the user dictionary.

• Choose Edit Dictionary....

HoTMetaL Light brings up the Edit Dictionary dialog box. This dialog contains a list of words in the current user dictionary.

To add a word to the dictionary:

•  Enter the word in the text box   labeled Word and click on the Add Word button.

To delete a word from the dictionary:

•  Click on that word in the list and then click on the Delete Word button.

You may prefer to add words to the user dictionary during a spell checking session.

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


Supplementary dictionaries

You can specify as many as 24 supplementary dictionaries,which are generally lexicons of specialized terminology for a specific field such as medicine or law. The difference between supplementary dictionaries and the user dictionary is that supplementary dictionaries cannot be modified during a spell checking session unless you load one explicitly using Edit Dictionary.... Supplementary dictionaries are created and developed using Edit Dictionary..., just like user dictionaries.

You can enter the names of supplementary dictionaries that you want to use in the Spell Checking section of the Options dialog box.

HoTMetaL Light is shipped with a default supplementary dictionary,  hmlt2a.dct, which contains a list of Internet-related terms.


Using the thesaurus

HoTMetaL Light lets you look up words in an on-line thesaurus.

• In the document, highlight the word that you want to look up.

• Choose the Thesaurus... command in the Edit menu, or click on the [image]   toolbar  button.

The document must contain a selected word when you choose the command. The selection will be displayed at the top of the Thesaurus dialog box; if the selection is a word in the thesaurus, then the number of meanings for that word that the thesaurus contains will be indicated, and the first meaning displayed. The buttons Next Meaning and Previous Meaning can be used to display the different meanings. If the thesaurus does not contain the selected word, the dialog box will give a message indicating this.

The dialog box contains a menu that is used to display lists of words that are somehow related to the selected word (with the meaning you have chosen). The choices are:

– Synonym - gives words that have the same or almost the same meaning as the current selection

– Antonym - gives words that have the opposite or almost the opposite meaning to the current selection

– Related - gives words whose meanings are similar to the current selection, but not as close as synonyms

– Contrasted - gives words that oppose the current selection, though not as directly as antonyms

– See Also - gives words that describe ideas related to the current selection

If you want to replace the current selection with a word from one of these lists, click on the word from the list and then click on the Replace button. Alternately, you can type a word directly into the text box  labeled Replace with and then click on the Replace button. Any word that you select from one of the lists is immediately inserted in this text box.

If you wish to invoke the thesaurus with a new word from the document, highlight the desired word and click on the Get Word button.

The thesaurus is not editable.


Working with images

Images are represented in HTML documents by IMG elements. These elements have no content, but require a URL pointing to the image file. The most common image format on the Web is the GIFformat; all Web browsers, with the exception of line-mode browsers, can display images in this format inline, in the document window. JPG format is also very popular and is accepted by more and more browsers. While HoTMetaL Light can display graphics of many different formats, including BMP, PNG, JPEG, GIF, and others; however, not all browsers can. Your graphics should be in GIF or JPEG format if you want to display them on the Web.

Other formats are normally displayed by launching external applications. HoTMetaL Light follows the same approach.

This chapter also gives information on creating clickable image maps.

Inserting images

Width and height

Displaying inline images

Choosing the editor and viewer

Image maps

Extensions to images


Inserting images

You can insert an image in two different ways:

• Drag and drop an image file into the HoTMetaL Light document window

 You can configure HoTMetaL Light to insert a dragged and dropped image file as an IMG (image) or A (anchor) element. HoTMetaL Light will recognize the extensions of certain specified image files. These two options can be set in the General section of the Options dialog. If you choose Drop image as IMG element, dragging and dropping an image with the extensions listed in the Image Extensions list will insert an IMG element with a relative path. You can add or delete image extensions from this dialog box.

When you drag and drop, an I-bar insertion element will follow your mouse cursor. If you attempt to create an image element where the rules will not let you, nothing will happen when you release the mouse button. Double-clicking on an inserted image brings up the Image Attributes dialog box. Notice that the Image File, Height, and Width are already specified.

To insert an image with the toolbar:

• Click on the    [image]  toolbar button.

(Since the IMG element can't have any content, you won't be able to insert it if the document contains a selection.)

HoTMetaL Light displays the Image Attributes dialog box when you insert the image.

The Image File  text box  in this dialog box is for entering the URL for the image. This information is required. You can type the URL directly into the text box   if you want, or click on the Edit... button. This will give you a dialog box called Edit IMG Source that is almost identical to the Edit URL dialog box. The only difference is that it doesn't have the `Name/Query' control group, as this information does not apply to images.

• Enter the URL in the usual way. If you're not familiar with URLs, you should read the URLs chapter.

The Alternate Text text 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. Even though this information is not required, it is good HTML style to include it for the benefit of users without graphical browsers.

The default ALIGN for images is BOTTOM, meaning that the bottom of the image will be on the baseline of the adjacent text. You can also 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: align 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. LEFT and RIGHT alignment for images can also be set from the toolbar. See Alignment. If you want to center an image, surround it with a block element tag (such as P) which you can then center-align.

If you intend for this image to be used as a clickable image map, you can set its mapping characteristics by choosing Image Mapping... from the Tools menu, or by right-clicking inside the IMG and choosing Image Mapping... from the pop-up menu. This launches the mapping program


Width and height

When you insert an image--whether by drag and drop or by any other means--HoTMetaL Light will automatically set the HEIGHT and WIDTH attributes of that IMG element for you. These attributes are measured in pixels; they tell the browser how large an image is, speeding 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 attributes, you can edit them by bringing up the Image Attributes dialog box: double-click on the image, right-click inside the image element and choose Image Attributes from the pop-up menu, or choose Image Attributes from the Tools menu.


Displaying inline images

If the URL of an IMG element refers to a GIF, JPEG, BMP, PNG, or TIFF file on your local system, HoTMetaL Light will normally display it in place in your document.

Not all Web browsers can display this range of image file formats. If you would like for your Web pages to be viewed by the broadest possible audience, make sure that your images are in GIF or JPEG format.

In the Defaults for New/Open section of the Options dialog box, you can choose whether such images should be displayed in place or not. This choice will then apply by default to all new documents. You can override the Options setting for individual documents using Show/Hide Inline Images 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 Light will resume displaying inline images.


Choosing the editor and viewer

To select image viewers and editors:

• Choose Options... from the Special menu and open the Helper Apps section.

This dialog box lets you choose a default viewer and editor, and also choose viewers and editors for specific image types.

To choose the defaults, enter the full path of the applications in the Default image viewer and Default image editor  text boxes. If you wish, you can use the Choose... buttons to navigate to and choose the applications.

To choose the viewer and editor for a specific image type:

• Enter the file extension for a particular image format in the text box to the right of the << Add << button. For example, if all of your JPEG images have the .jpg file extension, enter `jpg' in the text box

• Choose a viewer by entering the full path of the viewer program into the Viewer text box. Click on the Choose... button if you want to locate the viewer with a file chooser.

• Similarly, enter an editor program in the Editor text box.

• Click on the << Add << button.

This adds the file extension to the URL Extension list and confirms your viewer and editor choices.

To delete an extension from the list, just select that extension and click on the Delete button.

If you want to change the editor or viewer associated with an extension, you have to delete the extension and then enter both choices again.

When you've made all the additions or changes, click on the Options dialog's OK button.


Image maps

Image maps (or clickable image maps) are images, usually in GIF format, that have been divided into regions; clicking in a region in a browser causes an action to occur. There are two types of image maps: client-side and server-side. Both types of image maps involve a listing of the co-ordinates that define the mapping regions and which URLs they are associated with (the map file). Server-side image maps involve a separate map file which is linked to the image by a program running on a Web server, whereas client-side image maps use a map file that is part of the HTML document (in an element called MAP), and is linked to the image by the Web browser.

Most Web browsers support the use of server-side image maps, but client-side image maps are becoming increasingly common. Use both features with caution, and note that good HTML style involves giving clients who do not have access to map features an alternate way of accessing different Web pages, such as a text-only list.

Creating image map files

Informing the server

`Anchoring' the image map file to your image

Testing your image map

Client-side image maps


Creating image map files

An image map file is a file that tells the server what to do when someone clicks in an image map. In this file you put the coordinates of the regions in the image that you want to map, and the URLs that you want the server to access for each region.

Format

Here is a sample of an image map file (the URLs in this example don't refer to real files, so please don't try to use them!):

default http://www.sq.com/heads/missed.html

circle http://www.sq.com/heads/righteye.html 10,25 10,30

rect http://www.sq.com/heads/mouth.html 10,15 20,10

poly http://www.sq.com/heads/nose.html 15,20 20,25 25,20

Notice the following about the sample file:

1. The first line, starting with the word `default', specifies the action that should take place if someone clicks in a part of the image map that isn't mapped to anything. This URL should refer to a file that tells the user to try again.

2. The other lines each specify the type of region that's being mapped, then the URL that's accessed when you click on the region, and lastly the coordinates of the region.

3. You can define three kinds of regions in an image map:

– a circle: the coordinates of a circle consist of the coordinates of the center point of the circle (in this example `10,25') and the coordinates of any one point on the boundary of the circle (here it's `10,30').

– a rectangle (rect): the coordinates of a rectangle consist of the coordinates of upper left corner of the rectangle (in this example `10,15') and the coordinates of lower right corner of the rectangle (here it's `20,10').

– a polygon (poly): a polygon is any enclosed figure consisting of straight lines (you can't specify an oval shape, for example, unless you approximate it with straight lines). A polygon may have a regular shape (such as a hexagon) or be completely irregular (for example, the outline of a face). The coordinates of a polygon consist of the coordinates of each vertex (corner) of the polygon.

All coordinates are measured in pixels. The origin--the point (0,0)--is at the upper left corner of the image. x values (the first number in the coordinate pair) increase as you go to the right, and y values (the second number) increase as you go down.

Creating the file

The most time-consuming part of preparing an image map is figuring out the coordinates of the different regions. There are two kinds of programs you can use to do this:

– The most convenient tool is one that knows about the image map file format. Such a program will let you indicate graphically the regions you want to map, and will generate an image map file for you (probably without the URLs--you'll have to add these yourself). (SoftQuad MetalWorks can be used for this purpose.)

– A graphics viewer that displays the coordinates (in pixels) when you click on a point in the image. In this case you'll have to record each coordinate pair individually.

If two or more entries in the image map file happen to include the same part of the image, then the first such entry in the image map file is the one that the server uses to determine what action to take.


Informing the server

There are several types of Web server available, and they don't all 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; with the exception of the instructions in the following two paragraphs, the instructions here should apply to all servers. You should consult your server's documentation or a knowledgeable person if you're unsure whether something applies to your situation.

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 brundlefly, and the image map file is in /home/rodney/public_html/heads.map. You should put the following line in the imagemap.conf file:

brundlefly:	/home/rodney/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.


`Anchoring' the image map file to your image

The final thing you have to do is use HoTMetaL Light to add the markup (an A element) that associates the image map file with the GIF image that you want to display.

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 coordinates 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 program imagemap.

– 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.sq.com/cgi-bin/imagemap/brundlefly

(Here `brundlefly' may look like a filename, but it's actually the symbolic name of the image map file).

• Insert an A element

• Set the URL of the A element to a value such as the one in the example.

• Insert an IMG element inside the A.

• Set the URL of the IMG to point to the location of the GIF image.

• Turn ISMAP on. This tells the server that the image that this element points to is an image map.


Testing your image map

To see if what you did worked:

• Choose Preview... from the File menu.

• In the browser, click in each of the regions you defined to make sure that the `right thing' happens.

All the files must be on the server and you must have an Internet connection active in order for this to be successful.


Client-side image maps

This feature allows you to create an image map without having to put the coordinates of the various regions, and the associated URLs, into an image map file. Instead, you can put this information in an element called MAP. You also do not have to surround the IMG element with an A element.

Associating an IMG with a MAP

In order for the browser to know which MAP to use for a particular image, you must assign a value to the USEMAP attribute of the IMG element for the image map. The value of this attribute must be a URL that refers to the MAP element for this image map. If the MAP element is in the current document, then the URL must start with a `#' character, followed immediately (no spaces) by the name of the MAP element (that is, the value of the MAP's NAME attribute--see the next section). If the MAP is in another document, the `#' must be immediately preceded by the other document's URL.

You can use both the standard (`server-side' or ISMAP) image map processing and a `client-side' MAP for the same image. If the browser viewing the file supports client-side image maps, then this method of processing the image will be used. If the browser does not support client-side image maps, then it will refer to an image map file on the server.

Creating the MAP

The MAP element that describes the coordinates and URLs of the regions in the image map can be located anywhere in the current document, or even in another HTML document. For convenience, the MAP element is often placed directly after the IMG element for the image map. The MAP is not displayed in the browser window.

The map name

MAP has one attribute, called NAME. The value of this attribute is the map name, a string of characters that is used to identify the MAP, so that an IMG element can refer to it. You must enter a value for this attribute.

Defining regions

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.

– SHAPE - the value of this attribute can be RECT (rectangle), CIRCLE, or POLYGON, indicating the shape of the region. The default is RECT.

– COORDS - a list of coordinates, in the same format as they would appear in an image map file, with the following exception: coordinate pairs should be separated by a comma rather than a space.

– HREF - the URL that should be accessed when the region is clicked on.

– NOHREF - if this attribute is set to NOHREF, then no action will be taken when the region is clicked on.

– ALT - this text will be displayed if the browser cannot display images.

Example

Here is a small example of a client-side image map. The IMG element refers to a MAP element that has the name `map1'. This MAP defines two regions that can be clicked on.

<P>

<IMG ALIGN="BOTTOM" SRC="orwell.gif" USEMAP="#map1">

</P>

<MAP NAME="map1">

<AREA COORDS="0,0,100,100" HREF="http://www.sq.com/">

<AREA COORDS="0,100,100,200" HREF="http://www.w3.org/">

<//MAP>

For more information

See ftp://ds.internic.net/internet-drafts/draft-seidman-clientsideimagemap-02.txt for a draft proposal for this feature.


Extensions to images

The IMG element has been extended to use certain other attributes.

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', which creates a borderless image, often useful when making `hot images'.

– VSPACE and HSPACE: set blank space to the top and bottom and on the sides of an image. The value is in pixels.

Internet Explorer supports the following attributes of IMG for playing video files:

– DYNSRC - lets you specify the URL of a video clip or VRMLfile. If the file is displayed in a browser that does not support this feature, the image referred to by the SRC attribute will be displayed.

– 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 `infinitely'.

– LOOPDELAY - the wait time between plays (in thousandths of a second).

 To edit any of these attributes, right-click inside the IMG element and choose Element Attributes... from the pop-menu that appears, choose Element Attributes... from the Markup menu, or type F6 at the keyboard.


Tables

HoTMetaL Light provides a convenient table editor to graphically edit tables. Tables can be used to create small tables of course, but they are often used for formatting effects. For example, a table with one row and two cells filled with text side by side could be used to create the effect of two columns on a Web page. Similarly, names of items and text describing an item can be put side by side. Please use table effects with caution, as not all Web browsers support all features of the current table model. There should always be text-based alternatives to complex table formatting, and uncommon table attributes (such as background color) should be used with caution.

Inserting a table

Properties

Adding and deleting rows and columns

Spanning table cells

Other table features

Reformatting tables


Inserting a table

You can insert a table by clicking on the  [image]  toolbar button or by choosing the Insert Table... command in the Tools menu. The Insert button in this dialog box will be grayed-out if it is invalid to insert a table at the current insertion point.

Inserting a table gives you a dialog box that lets you specify many different table options:

– Rows and Columns: the number of row and columns in the table.

– Border: the lines that form the boundary of each table cell when the file is displayed in a browser. You can choose a numerical value, which specifies the border in pixels, or `BORDER' (causing the browser to draw the default border). You can choose your selection from a drop down list or enter it manually in the text box provided. The table border corresponds to the BORDER attribute of the TABLE element. Note that some browsers do not draw borders around empty table cells.

– Align: tables can have left, right, or center alignment. You can make your choice from the drop-down list. Table alignment corresponds to the ALIGN attribute of the TABLE element. Not all Web browsers support this feature, so use it with caution.

– BGColor: Some browsers let you set the background color of a table. Click on Choose... to bring up the standard Windows color chooser. The color you select will be expressed as a hexadecimal red-green-blue value. You can also enter this value directly in the text box, or you can enter one of the standard Windows color names (but note that these are currently supported only by Microsoft Internet Explorer). The color of the background of the table will change in the HoTMetaL Light window to reflect your background choice. The background color corresponds to the BGCOLOR attribute of the TABLE element.

– Width: you can specify the table width as an absolute number of pixels or a percentage of the document width. The width corresponds to the WIDTH attribute of the TABLE element. You can set the width for table cells as well--see Column/cell width.

– You can specify the Cell padding (space between the cell border and the text) and Cell spacing (space between cells) in pixels. These correspond to the TABLE element's CELLPADDING and CELLSPACING attributes, respectively.

All of the properties described above can be set for an existing table by putting the insertion point inside the table and choosing Table Properties... from the Tools menu.

There are several other less common table properties that can be set by editing the attributes of the table. Place your insertion point to the right TABLE start-tag and choose Element Attributes... from the Markup menu. The attributes you can change are:

– 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-style borders, set two different colors for the `light' and `dark' areas of the border. Not all browsers support these attributes.

– VALIGN: sets the vertical alignment of all cells in the table to top, middle, or bottom.

– HEIGHT: sets the height of the table in pixels or in percentage of the document height.

All tables in HoTMetaL Light will be the same width as the document window.


Properties

The properties described in this section will affect how the table is displayed in a browser, depending on the browser's capabilities.

The Cell Properties... command lets you set properties for an individual cell.

The Row Properties...command lets you set properties for an entire row.

Vertical alignment

Horizontal alignment

Column/cell width

Wrapping

Background color


Vertical alignment

The vertical alignment specifies whether a cell's content is aligned with the top, middle, or bottom of the cell. Vertical alignment can be set for a particular cell or row: a setting for a cell takes precedence over a row setting. To set the vertical alignment:

• Put the insertion point inside the cell or row whose vertical alignment you want to set.

• Choose Cell Properties... or Row Properties... as appropriate.

• Make a choice from the Vertical Alignment  drop-down list.

• Click on the Apply button.


Horizontal alignment

Horizontal alignment (justification) specifies how the text in a table cell is aligned with the sides of the cell. Your choices are left, right, centered, and justify (that is, aligned on both sides). Horizontal alignment can be set for a particular cell or row: a setting for a cell takes precedence over a row setting. To set the vertical alignment:

• Put the insertion point inside the cell or row whose horizontal alignment you want to set.

• Choose Cell Properties... or Row Properties... as appropriate.

• Make a choice from the Horizontal Alignment  drop-down list box.

• Click on the Apply button.


Column/cell width

By default, when a column is displayed in a browser its width will be adjusted to the longest piece of text in any cell in the column. To set the width of a cell explicitly (this sets it for the whole column containing the cell):

• Put the insertion point inside the cell whose width you want to set.

• Choose Cell Properties....

• Enter a value in the Width text box.

• Click on the Apply button.

The value you should enter for the width depends on what the browser expects. Netscape Navigator currently interprets a value that you enter as a number of (screen) pixels. Other browsers may interpret the width value differently, or even ignore it. An alternative is to use cell spanning  instead: for example, a cell that spans over two cells will be displayed twice as wide as a normal cell.

If more than one cell in a column has a width setting, the longest one is used.

The width setting does not affect how the table is displayed by HoTMetaL Light.


Wrapping

By default, the content of a cell will wrap when it is displayed in the browser, that is, it will be displayed over several lines rather than one long line. If you want wrapping turned off for the current cell:

• Put the insertion point inside the cell you want to modify.

• Choose Cell Properties....

• Turn on the NoWrap check box.

• Click on the Apply button.

To turn wrapping off for the current row:

• Put the insertion point inside the row you want to modify.

• Choose Row Properties....

• Turn on the NoWrap check box.

• Click on the Apply button.

Some browsers may ignore these settings.


Background color

You can set the background color of a table row or cell. This feature is not supported by all browsers. To change the background color of a table cell:

• Put the insertion point inside the cell you want to modify.

• Choose Cell Properties....

• Click on the Choose... button next to the BGColor text box.

• Choose a color from the standard Windows color chooser that appears.

• Click on the Apply button.

To change the background color of a row:

• Put the insertion point inside the cell you want to modify.

• Choose Cell Properties....

• Click on the Choose... button next to the BGColor text box.

• Choose a color from the standard Windows color chooser that appears.

• Click on the Apply button.

You may also enter the color manually in the text box provided, as a hexadecimal red-green-blue value, or as one of the standard Windows color names. The color of the background in the table cell or row will change in HoTMetaL Light to reflect your choice of color.


Adding and deleting rows and columns

You can add or delete a single row or column using the Edit Table... command.

When you select Edit Table... you will get a palette containing several buttons.

The six buttons along the bottom of the palette carry out the following operations:

– [image]   : create a new row above the current row.

– [image]   : create a new row below the current row.

– [image]   : delete the current row.

– [image]   : create a new column to the right of the current column.

– [image]   : create a new column to the left of the current column.

– [image]  : delete the current column.

If you insert a row or column, it adopts the defaults of the current row or column. You cannot delete a column if it has one or more cells that span an adjoining column; similarly, you cannot delete a row if has one or more cells that span an adjoining row. If you still want to perform the deletion, you will have to contract the spanning cells (see the next section, Spanning table cells).


Spanning table cells

The Edit Table... command allows you to change the spanning of the cell containing the insertion point.

Eight icons at the top of the palette extend and contract cells.

Extending cells

Contracting cells


Extending cells

Extending a cell is like `knocking out the wall' between cells. The cell-extending icons, in clockwise order from the top, are:

– [image]   : extends the top boundary of the cell one cell up.

– [image]   : extends the right boundary of the cell one cell to the right.

– [image]   : extends the bottom boundary of the cell one cell down.

– [image]   : extends the left boundary of the cell one cell to the left.

There are some rules about extending cells:

– The cell being extended into must be empty.

– The boundary that is being removed must be the same length or height as the cell being extended into. For example, a cell that spans one row cannot extend into an adjacent cell that spans three rows.

– You cannot extend vertically into a cell that has already been extended vertically, or extend horizontally into a cell that has already been extended horizontally.

– You should avoid extending every cell in a row up or down. This will collapse the row into the adjacent row so that only one row is visible, even though two rows are actually present in the table markup.


Contracting cells

The cell-contracting icons, in clockwise order from the top, are:

– [image]   : pulls the top boundary of the cell one cell down.

– [image]   : pulls the right boundary of the cell one cell to the left.

– [image]   : pulls the bottom boundary of the cell one cell up.

– [image]   : pulls the left boundary of the cell one cell to the right.


Other table features

Not all of the following table features are supported in all browsers, so use them with caution.

Table caption

Table header


Table caption

To give a table a caption:

• Put the insertion point just to the right of the TABLE start-tag.

• Choose Insert Element..., or type Ctrl-I.

• Insert a CAPTION element.


Table header

Table cells are represented by the TD element. Cells can be changed to TH (table header) elements by putting the insertion point in the appropriate cells and choosing the Change Element... command. If you simply wish to bold the text, we suggest that you insert a B or STRONG element inside the table cell(s) instead of changing the table cell element.


Reformatting tables

Sometimes tables that were not created with HoTMetaL Light's graphical table editor will not display nicely in HoTMetaL Light. Here are some things you can try to improve the appearance:

– If the content of a cell is particularly long it may appear cramped because the cell width does not expand. One solution is to extend cells to the left or right to make a wider cell. If this is not convenient (perhaps the adjacent cells already have data in them) you can create a new column adjoining the current column, and then extend the current cell into the new column. This will create a wider cell. You may want to extend all the cells in the current column in this way.

– If you insert an element inside a table cell and all or part of the tag icon is invisible, it may be that you need to use the Styles... command to set the `space above' to 0 for this element.

– Note that tables must be rectangular. Opening a file with a non-rectangular table with HoTMetaL Light could cause problems. You should try filling in the missing cells and then opening the file again.

– If you can't find any other way of improving the table format, you should consider re-creating the table, this time using HoTMetaL Light's table-editing commands.


Local styles

HoTMetaL Light provides screen-formatting capabilities that help you edit documents by allowing you to assign distinctive styles to the elements in your document. The purpose of these formatting features is to mimic the way a browser will format your document, and improve the appearance of your document during the editing process. The styles that you set with the Element Styles... command do not affect how browsers format the document. Several styles files corresponding to browser styles are provided. Only the markup affects how a document looks in a browser.

Styles files

Overview

Numerical values

Font properties

Paragraph styles

Space above and below

Indention

Color

Invisible characters

General display options


Styles files

HoTMetaL Light stores the formatting information set with the Element Styles... command in a binary styles file called   Whenever the a document is saved, this styles file is updated with whatever styles are in effect for the document by default. You may also select or create a different styles file in a non-binary format.

Styles files in text form

Options for styles


Styles files in text form

HoTMetaL Light can also load styles files in text form. To create a text-format styles file containing the styles in effect for the current document, choose Save Styles... in the View menu.To load a text-format styles file, choose Load Styles...in the View menu. You can switch styles in the middle of a HoTMetaL Light session by loading a new text-format styles file with this command.

The formatting information from a text-format styles file will not be saved in the default (binary) styles file unless the current document is saved.


Options for styles

HoTMetaL Light searches for the styles file in a set of folders called the styles path. By default this path consists of the styles folder located in the HoTMetaL Light folder.You can modify the styles path in the Extensions/Paths section of the Options dialog box. Choose a folder in the Formats line. If you want just one folder in the styles path, you can click on the Choose button and choose it. If you want more than one, type them into the text box, separated by semi-colons (;). HoTMetaL Light searches through the folders in the order in which they are entered, and uses the first styles file called hmpro3.stl that it finds.

The styles path also becomes the the default folder for the Save Styles... and Load Styles... dialog boxes. If you choose a file extension, it becomes the default extension for these dialogs.


Overview

All screen-formatting is set using the Element Styles... command in the View menu.

Because HTML files are structured documents, setting a style for an element means setting it for all elements of that type.

The following styles can be set:

– Font properties: font, font size, font style.

– Paragraph styles: alignment, line height, and fill mode.  (Fill mode determines how Return and Enter are treated--in fill mode, they cause the element to be split, 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.

– Indention: 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.

In addition, every element has aformat type: block or inline. Block elements start and end on a separate line from adjacent content. Inline elements are not set off from adjacent text. All of the styles listed above can be applied to block elements; only font properties and color can be applied to inline elements.

You can change the format assigned to an element in the document at any time. When you choose the Styles... command, HoTMetaL Light gives you a dialog box allowing you to set formatting parameters for the current element (the one the insertion point   or selection is in). If the insertion point is outside the HTML element that surrounds the entire document, the dialog box lets you set the default format. If you move the insertion point to a different element while the Styles dialog box is on the screen, the dialog box changes to reflect the formatting of the new element.

The Styles dialog box will look like the following illustration:

The element name  (LI in this example)  is displayed in the dialog's title bar.


Numerical values

The Styles dialog box allows you to enter numerical values for font size, line height, space above and below, and indention. These may be set from a menu or entered directly in a text box.  As appropriate, these values may be absolute, relative (+/-), or expressed as a percentage of a base value. The following units may be used:

– centimeters

–  inches

– machine units (1/16 point)

– millimeters

– picas (1/6 inch)

– pixels (same as points)

– points (1/72 inch)

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 may be specified by giving the full unit name, or the first few letters of the unit name, as long as that is unambiguous (e.g., don't use `p' since that could mean `points' or `picas'). In addition, `cm' and `mm' specify centimeters and millimeters, respectively.

Examples

Relative and percentage settings


Examples

The following are examples of valid settings:

– 1 inches

– 1.45 i

– 2 mm

– 2 milli

– 3pix

– 6 points

– 2 po

– 2 pica

– 2pica

Notice that you don't have to have any space between the number and the unit.


Relative and percentage settings

Relative settings specify an amount to be added to or subtracted from a base setting: they have the same format as absolute settings, but start with a `+' or `-' sign. As well, you may set a value to be Adopt Current, which means that the value is to be inherited from the surrounding element. Some valid settings are:

– -2.67 inches

– +3 picas

– Adopt Current

– ac (same as Adopt Current)

– +0 (same as Adopt Current)

Percentage values are specified with a percent (%) sign, the word `percent', or a suitable abbreviation, e.g.:

– 100%

– 150 percent

– 243 per


Font properties

The font for the current element type is chosen from the  drop-down list labeled Name. If you want the current element to inherit the font of the element that surrounds it, choose Adopt Current.

Style variations (bold, italic, etc.) can be specified using the Style  list.

Font size

Font style


Font size

To select the font size, click on the Size  drop-down list  and choose any size (including Adopt Current) shown. You can also enter a size in the   text box to the left of the arrow. This size can be an absolute or relative value. If the size you chose is unavailable, HoTMetaL Light will choose the next smallest font size. Relative values (+2 points, -3 points, etc.) are added to the font size of the surrounding element.


Font style

The choices in the Style list allow you to add style variations to the font. These can be set individually or in any combination. To choose an option, just click on it. If an option is already chosen, you can choose additional options by pressing the Ctrl key while clicking on the options you want. To select a contiguous range of options, select the first option in the range, and then press the Shift key while clicking on the last option in the range.

Adopt Current means that the font style options of the containing element are adopted in addition to those explicitly set for this element type. If Adopt Current is the only option selected, then the font style for an element of this type will be identical to the font style of its containing element.

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 (Roman) surrounding text and as plain within bold surrounding text.

Remember that HoTMetaL Light and Web browsers may not support the same font styles.


Paragraph styles

These styles determine how lines are formatted and are available only for block elements.

Alignment

Fill

Line height


Alignment

HoTMetaL Light offers four styles of text alignment (also called justification)--left, right, centered, and `both' (that is, both left and right alignment). If you choose Adopt Current, the alignment style is inherited from the surrounding element. Choose the style you want from the drop-down list   labeled Alignment in the Styles dialog box.


Fill

This group of choices allows you to specify how HoTMetaL Light should treat `return' characters for the current element type. If you type Return or Enter in an element formatted in Fill mode, the element will be split. When No Fill is selected, the element will not be split when you type Return or Enter.

Browsers typically display elements (with the exception of PRE) in fill mode.

The Show Invisiblescommand in the View menu  will show you the location of `new line' characters.


Line height

You can select single, double, or triple spacing from the  drop-down list labeled Line Height. A value may also be entered directly in the   text box to the left of the arrow.

A percentage line height is interpreted as a percentage of single spacing. For example, 100 percent is the same as single spacing, 150 percent is 1.5 times as high as single spacing, and so on.

If you give a relative (+/-) value the line height will be equal to the single-spaced line height, plus or minus the amount specified.

An absolute line height should be at least as large as the point size: otherwise, the lines will overlap. A value of about 1.2 times the point size would be normal.

If you select Adopt Current for the line height, then the element you are formatting will assume the absolute line height of its surrounding element. This could give undesirable results if the line height of the surrounding element is smaller than the font size of the current element.


Space above and below

Space above and below control the vertical separation between elements. They are available only for block elements.

Space Abovedetermines the minimum amount of vertical white space that must precede the current element. If the element before this one has a Space Below value, the actual separation will be the greater of the space above the current element and the space below the preceding element.

Space Belowdetermines the minimum amount of vertical white space that must follow the element. The actual separation is the greater of the current element's bottom space and the next element's top space.

A space above or below can be specified as a percentage of one line height for the current element. For example, if you want 1 1/2 lines of white space between paragraphs, set the space above to 150%.

If you specify an absolute amount, it will be added to the normal line spacing.


Indention

The left indent is measured from the left margin of the document window; the right indent is measured from the right margin of the document window. The two indents effectively specify the line length for the element.

If you specify a relative (+/-) left or right indent it is added to or subtracted from the corresponding indent of the element that contains the current element. For example, a value of `+1 inches' for the left indent causes the indent to be one inch to the right of the left indent for the containing element. An indent of Adopt Current is equal to the corresponding indent of the containing element.

The first indent (indent for the first line) can be different from the indent for subsequent lines: this is often done for paragraphs. An absolute first indent will be measured from the left margin. A relative first indent will be added to or subtracted from the left indent for the current element. A first indent of Adopt Current is identical to the left indent.


Color

For each element type, you can choose a foreground color and a background color. The foreground color is the color of the text.

To choose the colors for an element, click on the Colors... button in the Styles dialog box.

HoTMetaL Light displays a dialog box containing two scrollable lists from which colors can be chosen, one for the background, one for the foreground.

These lists contain the colors that are currently loaded into HoTMetaL Light. In addition, the lists contain entries Adopt Current, Default Background, and Default Foreground. To choose a color, click on the color in the list or type it in the text box directly. Then click on the Apply button.

If you choose Adopt Current, the color of the surrounding element will be adopted for the current element. Note that if you choose Adopt Current for either the foreground or background color, then the other one will revert to Adopt Current also. You can, however, use Default Background or Default Foreground in conjunction with another color choice.

Adding colors


Adding colors

All of the available colors have an entry in the color map file, which is the file rgb.txt in the HoTMetaL Light folder. This file associates each color name with three numbers that specify the mixture of primary colors that makes up the color. The entries in the color map file are in the form:

213 144 5 shoreslop

 The three values range between 0 and 256 and indicate the red, green, and blue values, respectively. The values are dependent on the video card installed for your display. The sample entry above will cause the name `shoreslop' to appear in the foreground and background lists in the Colors dialog box.

To make more colors available to HoTMetaL Light, edit the color map file with a text editor and add entries like the one in the example above. Two applications you can use to determine the red-green-blue values for a color are:

– PC Paintbrush (choose its Edit Colors... command).

– The Custom Color Selector, available through the Color control panel.


Invisible characters

Choose Show Invisibles in the View 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 to turn off the display of invisible characters.


General display options

The Options... command in the Special menu lets you set several default display options.

– Icon appearance: you can select the font, font size, and text and background color of tags in the General section of the Options dialog box.

– Default font: you can select the default font and font size for text using the Defaults for New/Open section of the Options dialog box. This setting takes effect on start-up only.

– Size text to window: if you turn on this option, which is found in the General section of the Options dialog box, 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.


Searching and replacing

The Find and Replace... command in the Edit menu allows text, elements, and patterns to be found and replaced.

When you choose this command you will see a dialog box, like the one illustrated below, that allows you to enter various values and options.

The search and replace operations represented by the buttons at the bottom of the dialog box generally work the way they do in other word-processing applications. Note the following, however:

– Text searches will not match if a part of the search text is found in a separate element. If you are searching for `Fred and Barney', but the word `and' is in a separate element (EM, for example), the search text will not be matched.

– A replacement will not be carried out if it will cause the document to be incorrectly marked up (and rules checking is on). If such a replacement is encountered in a `replace all' operation, it will be skipped over.

– Choosing the Undo command after a `replace all' will undo all of the replacements.

Choose Find Next to repeat a search using the most recent search text.

Specifying the search and replace text

Search options

Searching for elements

Find In

Error messages

Using search patterns


Specifying the search and replace text

The Find text box   allows you to specify search text consistingof text characters, elements, or patterns. If the document contains a selection when you choose Find and Replace... the selected text will automatically become the search text. If the selected text is longer than 255 characters, it will be truncated. If the selection contains an element it will be truncated at the last character before the start-tag icon.

The Replace text  box  allows you to specify replace textconsisting of text characters, elements, or patterns with which you want to replace the search text.

The Find In text  box  allows you to restrict your search to a particular element.

The Find, Replace, and Find In text is described in more detail below.


Search options

There are five search options that you can set. You may want to search forward or backward through the file, match only whole words, match upper- and lower-case exactly, employ wrapping, or perform pattern searching. These options can be used in combination. You can turn Backwards Search on or off by clicking in the check box in the Find & Replace dialog box. The other options can be set by clicking on the Options... button and then clicking in the appropriate check boxes in the dialog box that appears.

–  Whole word search: turning on Whole Words means that the search will match a sequence of one or more whole words only. For example, if you search for `red' with Whole Words turned on, HoTMetaL Light will not find it in `Fred'.

–  Case sensitive search: when case sensitivity is turned on, HoTMetaL Light will look for the search text exactly as you've typed it--matching upper case to upper case and lower to lower. With case sensitivity off, the search will find any variation: the search text `alice' would match `ALICE', `alice' and `AliCE'. This option applies to patterns as well as text.

–  Backwards search: indicates that you want the search to move from the insertion point   (or the start of the selection) back to the top of the file.

–  Wrapping: when Wrap is turned on, HoTMetaL Light will wrap around the top or bottom of the file, depending on whether you are doing a forward or backward search.

–  Find patterns: this option allows you to turn on or off HoTMetaL Light's ability to find patterns. If Find Patterns is turned off, any special search characters that you type in the search or replace text will be treated as ordinary characters. See Using search patterns  for more information on patterns.


Searching for elements

The search and replace text can both consist of an element. An open angle bracket, `<', followed by a valid element name matches an element. The angle bracket must be the first thing on the line. If the search succeeds, the insertion point is positioned to the right of the start tag. The name in the search text can optionally be followed by a closing angle bracket (>).

For example,

<P

 matches the element P. Element names are not case sensitive in HoTMetaL Light, so `<p' and `<P' will match the same elements.

In a replacement, if the search text and the 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.

If the search text matches text (as opposed to an element) and the replace text is an element, the element will be inserted after the found text if the replacement operation is carried out.

Searching for text within an element

Attributes


Searching for text within an element

The search text can contain both an element name and, following it, some text (or a pattern) that must be matched within the element. In this case the element name must end with a closing angle bracket. For example:

<P>the

 would match the word `the' anywhere within the element P. This is similar to the kind of restrictive searching that can be done using the Find In text but it can be used in conjunction with that feature to further restrict the search. In the last example, if the Find In text  is set to:

<OL

 the word `the' would be matched if it appeared in a paragraph in an OL list but not if it appeared in a paragraph in another context.

An element name in the replace text cannot be followed by text: if it is, an error message will be displayed and the replace operation will not be performed.


Attributes

You can restrict the search to an element with specific attribute values. This is done in the search text by following the element name with a space-separated list consisting of attribute names followed by an equal sign, `=', followed by a value contained 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. For example, you could use the following replace text in conjunction with the find text in the previous example:

<a name="burro"

Any attribute values that aren't specified in the replace text will remain unchanged.

Search patterns  can be used to specify attribute values. You can specify as many attributes as you wish, and in any order.


Find In

One of HoTMetaL Light's more powerful search features is its ability to restrict a search to the contents of a particular element type. For example, you could search for a word only when it appears in an EM element.

Use the Find In  text box   to specify the element that you want to restrict searching to. Specify the element in the same way you would in the search text, except that the element name can't be followed by text. Attribute values may also be specified in the Find In text--you can use Find In text such as:

<a name="donkeys"


Error messages

If you have badly-formed search or replace text, HoTMetaL Light will display an error dialog box giving a description of the error. Errors that will be reported include: invalid attribute or element names; unmatched parentheses and brackets in search patterns; `?', `*', or `+' not preceded by any character; invalid character ranges.

For example, if you use the search pattern:

<QUAGMIRE

 you will get the error message:

Find: Invalid element name

 because the HTML rules do not allow an element called QUAGMIRE.


Using search patterns

If the Find Patterns option is turned on  the characters you type in the Find text box   are interpreted as patterns by HoTMetaL Light: that is, the search text can contain certain special search characters that allow the search text to match a class of text strings, or markup constructs. (If your search text does not contain any special search characters, HoTMetaL Light will search for exactly the text you have typed.) For example, the search character `.' (period) is used in the following pattern:

m...y

 This matches a sequence of five characters beginning with `m' and ending with `y', e.g., the words `money', `marry', `murky', etc.

The following characters are special search characters in a search pattern:

. * ? + ^ $ [ ]

In addition, the character `<' (used to specify an element search) is special when it appears as the first character of the pattern.

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

\.

 is used to match a period.

Search patterns may be enclosed within parentheses for grouping.

Matching a single character

Matching zero or more of something

Matching one or more of something

Matching zero or one of something

Either/or searches

Matching just after a tag

Matching just before a tag

Character ranges

Re-using the search text

Summary


Matching a single character

Any single character (other than a special character) matches itself in a search pattern. To match a single, arbitrary character, use a period or dot, `.'. This will also match a single blank space. Therefore:

fo.d

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

s.o.

 matches `stop', `shot', `snow', etc.


Matching zero or more of something

A single character, or text enclosed in parentheses, followed by an asterisk, `*', matches zero or more occurrences of that character or text. For example:

l*ama

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

b(an)*a

 would match `ba', `bana', `banana', and so on.

You can combine the `*' with `.' to match arbitrary text. So:

s.*ch

 matches `search', `such', `stretch', `stopwatch', as well as `sch' and `skip lunch'. This search pattern represents text that starts with `s' followed by zero or more occurrences of an arbitrary single character (it doesn't have to be the same character over and over) followed by the characters `ch'. Since the period can match a blank space, this pattern can match a multi-word piece of text.


Matching one or more of something

A single character, or text enclosed in parentheses, followed by a plus sign, `+', matches one or more occurrences of that character or text. For example, the following expression matches `ben', `been', `beeen', and so forth, but not `bn'.

be+n


Matching zero or one of something

A single character, or text enclosed in parentheses, followed by a question mark, `?', matches zero or one occurrences of that character or text. For example, to search for instances of both `color' and `colour', you would use:

colou?r


Either/or searches

If you want to search for either of two search patterns, separate them with a vertical bar, `|'. This will match any text that matches either of the patterns. For example, if you wanted to search for either `love' or `money', you would use the expression:

love|money

You can combine two search patterns:

s.*ch|fo.d


Matching just after a tag

A caret, `^', at the very beginning of a search pattern means that text will match the pattern only if it immediately follows a start- or end-tag. Such text must not be separated from the tag by white space. Anywhere else, the caret is not treated as a special search character (except in character ranges, see below). For example, if you wanted to search for the word `Note' immediately following a tag, you would use:

^Note


Matching just before a tag

A dollar sign, `$', at the very end of a search pattern means that text will match the pattern only if it is immediately followed by a tag. The text must not be separated from the tag by white space. Anywhere else, the dollar sign is not treated as a special search character. For example, if you wanted to search for the word `sub' immediately preceding a tag, you would use:

sub$


Character ranges

A pair of square brackets, `[' and `]', around any group of characters defines a range that matches any one of the characters between the brackets. The simplest case is of this type:

an[dy]

This matches `and' and `any'.

A range of characters of the form

[char1-char2]

 matches any character beginning at char1 and ending at char2. For example:

[e-p]

 matches any lowercase letter between `e' and `p', inclusive. The pattern:

[A-Za-z]

matches any upper or lower case letter.

[A-Za-z0-9]

 matches any alphanumeric character.

A range of characters can be embedded in a longer range. For example, the pattern:

[ac-fh]

 matches any of `a', `c' through `f', and `h'.

If searching is not in case-sensitive mode, no distinction between lower case and upper case letters is made in character ranges. In this situation, for example, the character range:

[a-z]

 would match any upper- or lower-case letter.

You can reverse the meaning of a character range by preceding it with a caret, `^': this causes it to match any character not in the range. For example:

th[^ei]n

 matches `than' but not `then' or `thin'. An expression of the form:

[^char1-char2]

 matches any character not in the range of characters beginning at char1 and ending at char2.


Re-using the search text

If you surround a sub-expression in the search text by parentheses, `(' and `)', you can refer in the replace text to whatever this sub-expression matches. In general, an expression in the replace text of the form `\n', where n is a number from 1 to 9, means `replace this expression 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 search text matches `bread', the found text will be replaced by `box'. This is because the sub-expression `(.)' matched the letter `b'; the expression `\1' in the replace text means `replace this expression with whatever is matched by the first expression in parentheses in the search text'. Therefore `b' is substituted for `\1' and the replace text becomes `box'.

Here is a more complicated example: suppose the search text is:

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

 and the replace text is:

\2 \1

Now the search text may match the words `vice versa'. The first sub-expression, `(v.*e)', matches `vice' and the second sub-expression, `(v.*a)', matches `versa'. In the replace text, HoTMetaL Light replaces `\2' by what the second sub-expression in the search text matched, and replaces `\1' by what the first sub-expression matched. Therefore the replace text becomes `versa vice'. The net effect of the operation is to replace an occurrence of `vice versa' with `versa vice'.

It is possible to nest sub-expressions. In this situation, the sub-expressions are numbered according to the order of occurrence of their left parentheses. For example, if the search text were:

(a(bc)d)

 and the replace text:

\2 \1

 the effect would be to find `abcd' and replace it by `bc abcd'.

The expression `\0' in the replace text refers to the entire text that was matched by the search text. For example, if the search text were:

fish

and the replace text were:

gone \0ing

 then an occurrence of `fish' would be replaced by `gone fishing'.

You can use `\n' expressions in attribute replacement values: one application of this technique is changing the value of a group of URLs in some regular way. (The Publish... command  lets you change the scheme for a set of URLs: the `\n' is actually a more general form of this kind of substitution). For example, if you want to change all of the filenames in your A elements to have the `.htm' file extension instead of `.html', you could use the following pattern for the 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 characters `html'; in the replacement, everything this pattern matched is substituted for `\1', and the characters `htm' are appended, thus creating the modified filename.

There's an even simpler way to do this, if you're sure that all the filenames end in `.html'. Use the following find text:

<a href="(.*)l"

And the replace text:

<a href="\1"

In this case, the replacement text will consist of everything the search text matched, except the final letter `l'.


Summary

The following list summarizes the search patterns and special characters available in HoTMetaL Light's search facility.

ordinary character

 itself

<name, <name>

 the element name

. (dot)

 any single character

x*

 0 or more occurrences of the character x

(pattern)*

 0 or more occurrences of pattern

x+

 1 or more occurrences of the character x

(pattern)+

 1 or more occurrences of pattern

x?

 0 or 1 occurrences of the character x

(pattern)?

 0 or 1 occurrences of pattern

pattern1|pattern2

 pattern1 or pattern2

^pattern

 pattern immediately following markup

pattern$

 pattern immediately preceding markup

[string]

 any single character in string

[^string]

 any single character not in string

[char1-char2]

 any character in the range char1-char2

[^char1-char2]

 any character not in the range char1-char2

\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


User-defined macros

HoTMetaL Light's macro facility lets you create macro `hot keys' (accelerators) that carry out a series of actions.

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. If you prefer to use the keyboard instead of the toolbar to insert elements, you can create macros that insert specific elements.

– 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 the Restrictions section.

Creating macros

Running a macro

Macro options

Saving macros to a file

Loading a macro file


Creating macros

The actions associated with creating (recording) a macro are as follows:

• Click on Record Macro in the Special menu. This starts macro recording. The command will then toggle to Stop Recording....

The progress message area of the main window displays the phrase Recording macro while a macro is being recorded. The usual messages like Opening... will show up when appropriate, but any time the message area would normally be empty, it will instead say 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're performing them.

• When you're finished, click on the Stop Recording... command. This command ends the macro.

Now you will get a dialog box that lets you select a name and an accelerator for the macro. The macro name is to help you identify the macro in the list in the dialog box that appears when you choose the Run Macro... command. The accelerator is the sequence of keystrokes that will run the macro.

An accelerator can consist of any choice from the drop-down list labelled Key (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.

• Enter the accelerator. To include Ctrl, Alt, or Shift in the accelerator, click on the appropriate check box.

If you re-use one of HoTMetaL Light's built-in keyboard accelerators as a macro accelerator, its original functionality will be unavailable as long as that macro is loaded. You will get an error message if you attempt to use an accelerator that has already been used for another macro.

• When you have chosen the name and accelerator, click on the New Macro button.

Macros involving toolbar buttons

Restrictions

Changing the accelerator

Deleting a macro


Macros involving toolbar buttons

If you use a button from one of the `HTML'  toolbars 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 Light 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 Insert Element... or Change Element... command, it will be played back in the macro exactly as you entered it.)


Restrictions

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  text box  in a dialog box or making a selection from a list. Consequently, there are some sequences of actions that cannot successfully be included in a macro. As a general guideline, if a macro involves invoking 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 Light will beep. The second time, you will get a message saying that you should use the cursor (arrow) keys to change the selection.

Spell checking operations should also not be put in a macro.


Changing the accelerator

To change a macro accelerator, choose Edit Macros... in the Special menu. This command gives you a dialog box with a list of currently loaded macros.

Click on the name of the macro that you want to change. This causes the name and accelerator of the macro to appear in the controls at the top of the box.

Once you've done this you can change the accelerator for the macro by means of the   Ctrl, Shift, and Alt check boxes and the Key  drop-down list.

When you have made the desired changes, click on the Apply button.


Deleting a macro

Edit Macros... also lets you delete a macro from the list of available macros. Highlight the macro in the list and click on the Delete button. If you delete a macro that has been loaded from a file, the macro is removed only from HoTMetaL Light's list of available macros--it is not deleted from the file from which it was loaded, and can subsequently be re-loaded. You can delete only one macro at a time.


Running a macro

The usual way to run a macro is to type its keyboard accelerator. You can also run macros using the Run Macro... command in the Special menu. This command gives you a dialog box that lists all the macros that are currently available. This list includes macros that have been loaded from a file and those that have been defined in the current session but not saved to a file. If a macro file is loaded, the dialog box displays the filename.

To run a macro:

• Highlight the macro.

• Click on the Run button.

 HoTMetaL Light will carry out the series of operations associated with the macro. You can run only one macro at a time.


Macro options

You can set where a macro file is to be saved and what extension the macro dialog box will look for in the Extensions/Paths section of the Options dialog box. The default folder is the macros folder under the HoTMetaL Light folder, which you can change by typing in the path to the file, or by clicking on the Choose File dialog box. The default extension for macro files is .mcr, but you can change it if you like.


Saving macros to a file

Choose Save Macros... in the Special menu to save the currently loaded macros to a file. A macro file saved in this way can later be loaded using the Load Macros... command. The file saving dialog box will come up with the folder that is specified in the Options dialog box.

If any macros are still unsaved when you attempt to exit HoTMetaL Light, you will get a warning message informing you of this and giving you the opportunity to save the macros before exiting.


Loading a macro file

Choose Load Macros... in the Special menu to load a macro file. The file saving dialog box will come up with the folder that is specified in the Options dialog box.

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 Light . The default macro file for HoTMetaL Light is hmpro3.mcr, located in the macros folder under the HoTMetaL Light folder.

Macros are not associated with a specific document, so any macros you load will be available for use with all files that you are editing in the current HoTMetaL Light session.


Glossary

This chapter defines many of the terms commonly heard when talking about the Web.

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.

anchor

1.  An element  in an HTML  document that points to one of:

– another document

– a specific location in another document

– a specific location in the current document

2. An element that denotes a specific location in a document, pointed to by another anchor.

 When the document is displayed in a browser, clicking on an anchor (of the first type) causes the browser to display the document and/or the location that it points to.

applet

See Java.

attribute

A value that is associated with an element  but is not part of the content of the element (that is, text or sub-elements). For example, the URL  part of an anchor  is an attribute; you would use an attribute to specify the alignment of an image. In an HTML  file, the attributes are actually located inside the element's start-tag, but when you're editing in HoTMetaL Light, you view and edit attributes using the Element Attributes... command.

browser

A networked program that communicates with Web servers , used for retrieving and displaying documents from the World Wide Web . Compare this with editor. Some well-known browsers are Mosaic , Netscape Navigator, Internet Explorer, Lynx , and Cello.

CERN

The European Laboratory for Particle Physics in Geneva, 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.

clickable image map

See image map.

client

A program, such as a browser , that uses HTML  and communicates with a Web server .

client-side image map

See image map.

DNS

Domain Name System. This is the way in which the network turns a host or Internet domain (e.g., sq.com) into an Internet IP address for use with TCP/IP .

editor

A program, such as HoTMetaL Light, 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 surrounded by elements according to their function in the document: for example, headings, lists, paragraphs, and anchors are all surrounded by specific elements.

firewall

In networking, a firewall is a computer that prevents an intruder from accessing all the computers on a network if he or she manages to break into one computer someplace. The firewall usually sits between your inside network and the outside Internet. For more information, see Cheswick & Bellovin's approachable book Internet Firewalls: Repelling the Wily Hacker.

form

A group of elements (enclosed by a FORM element) in an HTML  document, which generate graphical controls such as  text boxes,  radio buttons, and check boxes when the document is displayed in a browser. The user can enter information in a form and use the browser to submit it to a program on a Web server .

frames

Some browsers  support special elements that let you divide the browser window into several sub-windows, called frames, each of them displaying 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. It lets you 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

The unofficial standard graphics format used in HTML  documents. This format is owned by CompuServe. See also 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 on an organization's Web server , 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 browser

See browser.

HTTP

The HyperText Transfer Protocol. This 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 a number of Web servers.

HTTP server

See Web server.

hypertext

Text that contains links to other 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 Light are ICADD-ready and can readily be converted to these formats using ICADD techniques.

IETF

The Internet Engineering Task Force, responsible for the technical management of the Internet. The IETF coordinates the development of the HTML  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. An image map is also called a clickable image map. 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.

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 , 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 over the WWW.

ISMAP

See 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 supported by HTML. This character set is also called `ISO Latin 1'. It includes characters required for most western European languages: Dutch, English, French, German, Italian, Irish, the `Iberian' languages, and the `Nordic' languages. This character set is one of several in the ISO 8859 standard: others support, for example, eastern European languages and Cyrillic-based languages. Only ISO 8859/1 is currently supported by HTML, however.

Java

Java is a programming environment that operates in conjunction with certain browsers . It lets you refer to an 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 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 Export group.

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 are Lynx  and a program called www from CERN .

link

See anchor.

Lynx

A common line-mode  HTML  browser . Lynx can be used over a 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. This feature is implemented using the MARQUEE element. Not all browsers support marquees.

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

One of the most widespread HTML browsers .

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

Netscape Navigator

A popular Web browser developed by Netscape Communications Corporation.

OLE

See ActiveX.

page

A single HTML document (which can be longer than one screen).

PNG

Portable Network Graphics; pronounced `ping'. A graphics format intended as a replacement for GIF , on account of patent infringements involving the compression algorithm used with GIF. PNG is a `lossless' format; some of its advantages over GIF are better (24-bit) color support, compression, and anti-aliasing and transparency capabilities.

progressive display

See interlaced image .

proxy server

If you have a firewall  at your site, you can't normally connect directly to a server  on the Internet. You need an agent, a proxy server running on the firewall, to make the connection for you. 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).

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  how to retrieve the file specified in the URL. Also called `protocols'.

server

See Web server.

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.

tag

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 the HoTMetaL Light display tags are represented by tag icons at the beginning and end of an element. Sometimes tags are called `commands', but this isn't correct.

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 GIF

A GIF  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 (see the next entry), 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 consists of a filename and, usually, a scheme that tells how the file is to be retrieved. For most files on Web servers, the scheme http  is used.

USEMAP

See image maps.

W3C

The WWW Consortium. This has been set up at MIT, modelled after the X Consortium that promotes X Windows. W3C is a not-for-profit organization that provides sample code and co-ordinates standardization. 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.

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.


Appendix 1: SGML conformance

HoTMetaL Light is an SGML Application Conforming to International Standard ISO 8879 -- Standard Generalized Markup Language.

HoTMetaL Light conforms to the following system declaration (see clause 15.6 of ISO 8879):

<!SYSTEM "ISO 8879:1986"

CHARSET

BASESET "ISO 646-1983//CHARSET International

Reference Version (IRV)

//ESC 2/5 4/0"

DESCSET

0	9	UNUSED

9	2	9

11	2	UNUSED

13	1	13

14	18	UNUSED

32	95	32

127	1	UNUSED

BASESET "ISO Registration Number 109//CHARSET 	ECMA-94 Right Part of Latin Alphabet Nr. 3//ESC 2/13 4/3"

DESCSET

128	32	UNUSED

160	5	32

165	89	32

254	1	127

255	1	UNUSED

CAPACITY PUBLIC

"ISO 8879:1986//CAPACITY Reference//EN"

FEATURES

MINIMIZE

DATATAG 	NO

OMITTAG	YES

RANK	NO

SHORTTAG	YES

LINK

SIMPLE 	NO

IMPLICIT	NO

EXPLICIT	NO

OTHER

CONCUR	NO

SUBDOC	NO

FORMAL	YES

SCOPE DOCUMENT

SYNTAX PUBLIC

"ISO 8879:1986//SYNTAX Core//EN"

VALIDATE

GENERAL	YES

MODEL	YES

EXCLUDE	NO

CAPACITY	NO

NONSGML	NO

SGML	YES

FORMAL	YES

SDIF	NO

PACK	NO

>