HoTMetaL PRO tutorial

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

The tutorials cover the following topics:

The basic document: titles, headers, and paragraphs
Character formatting: inline text
Block formatting
Lists: ordered lists, unordered lists, and definition lists
Links and images
Backgrounds, colors, and fonts
Alignment
Publishing
Forms

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, Core HTML and the chapter Extensions to HTML .

The first tutorial can be used as a `quick start' that shows you how to create a file with HoTMetaL PRO. 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

Start up HoTMetaL PRO.

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.
Choose the Tutorial template group in the dialog box that appears.
Select the template called Tutorial Sample File.
Click on the [OK] button.

HoTMetaL PRO 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 PRO changes the name so that when you save the document, the original template doesn't get overwritten.

You should see small tag icons in the document, for example, <HTML>. If you don't:

Click on the (show tags) toolbar button to make the tags visible. (If you click on this button again, the tags will become hidden. This button corresponds to the command Show (Hide) Tags in the View menu.)

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

TITLE

The label `Document Title' inside TITLE is not part of the content of the element: it's a prefix that prompts you to enter some text. This prefix cannot be highlighted or deleted in HoTMetaL PRO, but it won't be saved in the document.

Highlight the words `Tutorial Sample File'.
Type a title for your sample document.

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

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

Put the insertion point inside the BODY element (just 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. HTML 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 toolbar button.

HoTMetaL PRO inserts an H1 element.

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 (paragraph) toolbar button.
Type some text such as the following:

PARA1

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 toolbar button.
Type the text:
```
Early life and education
```
Move the insertion point to the right of the </H2> end-tag.
Click on the toolbar button.
Type the text:

PARA2

The document should now look something like this:

ORWELL

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 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 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 dialog box asking you to enter the path of your browser, or press the [Choose] button for a file chooser. When you have chosen a browser, the blank toolbar button will contain an icon: BRWSICON . The tooltip that is displayed in the message area at the bottom of the screen when you hold the mouse cursor over the button will tell you which browser is associated with that button. All future previewing can be done with one click on that toolbar button.

Note: 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; 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.

Choose Preview... from the File menu, or type Ctrl+M at the keyboard.
If the list of browsers is blank, click on the [Add...] button. This will give you a dialog box in which you can enter the path of your browser, or click on the [choose] button to select it from a file chooser.
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: 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 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 EMICON toolbar button when there's no highlighted text, and then just type the text between the tags.

You can also insert an EM element by choosing Emphasis from the Format menu.

For more information on character formatting, see the section Character formatting in the Core HTML chapter.

Formatting blocks of text

The most common way to mark up a block of text is with a P (paragraph) element, which you've already seen. There are several other 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 toolbar button.

This inserts a BLOCKQUOTE element.

Type the letter `O'.

As soon as you do this, HoTMetaL PRO 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 Core HTML chapter.

Lists

You can insert five different types of lists in your document. The three most common types of lists will be demonstrated in this section.

See the section List elements in the Core HTML chapter for more information on 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 PRO 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 (ordered list) toolbar button.

When you do this, HoTMetaL PRO 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 PRO 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 PRO 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 PRO 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 PRO 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, 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 (unordered list) button in the toolbar.

The OL start- and end-tags have changed to UL tags. If you click on a toolbar button, and HoTMetaL PRO can't validly insert an element, it'll try to change the current element to the one you've chosen. In this case, the only thing an OL can change to is a UL. (You can also change the current 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 PRO will display the bullets before each list item in a UL.

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 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 PRO-will change the list bullets for a nested list.

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

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. Instead, 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" describes 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 (definition list) toolbar button.

Notice that HoTMetaL PRO 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 (definition term) toolbar button. (If you were to just start typing here, instead of inserting a DT from the toolbar, HoTMetaL PRO 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 (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.

Anchors and images

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

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 PRO will surround the text with a paragraph.)

You can insert an anchor in HoTMetaL PRO by using keyboard, menu, and toolbar commands.

Click on the 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 entry box and a pop-up menu 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 PRO will do it for you.

Click on the [Choose File...] button.

This causes a file chooser dialog box to appear.

The file you should choose is located in the directory doc in the HoTMetaL PRO installation directory

Navigate to that directory and open the file works.html.

Notice that the file name and directory path have been inserted in the text entry 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 manually, but it's probably more convenient for you to use the file chooser dialog box.

Most of the time URLs will also have a host component, specifying the Web server 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 at the bottom of the HoTMetaL PRO 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.

Note:

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

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 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 entry 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 (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 at the bottom of the HoTMetaL PRO window reads Name: Why. HoTMetaL PRO has created 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, 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 PRO 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 Links for more information.

Images

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

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 just to the right of the </ H1> end-tag.

The following process is used to create an IMG within HoTMetaL PRO:

Click on the 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 directory doc in the HoTMetaL PRO installation directory.
Choose the file author.gif.

HoTMetaL PRO has created the URL for this image from the file that you selected. Notice 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 entry 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 PRO 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 PRO document window. (This is not really George Orwell, but another well-known writer.)

Note: If you insert an image using `Insert Element' or the image toolbar button, it will be a complete URL.

The image can 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.

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

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 PRO allows you to choose and change colors and sizes quickly and easily.

Note: 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 PRO will insert a paragraph for you when you start typing.)

The text that you highlighted is now surrounded by the 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 refer to a specific font size, but are instead proportional to the default font size.

If you want to set the font size for the whole document, you should use the BASEFONT element.

Available colors

All of the available font and background colors have an entry in one of the color map files:

The local color map file is the file rgb.txt in the HoTMetaL PRO directory. This file is read only by HoTMetaL PRO.
The system color map file is read by other X applications. This file is also called rgb.txt, but its location is system-dependent. A common location is the directory /usr/lib/X11.

These files associate each color name with three numbers that specify the mixture of primary colors that makes up the color. The entries in the color map files are in the form:

213 144 5 shoreslop

The three values range between 0 and 255 and indicate the red, green, and blue values, respectively. The numbers depend on the video card for your display. The sample entry above will cause the name `shoreslop' to appear in the Color dialog box.

To make more colors available to HoTMetaL PRO, edit the color map file with a text editor and add entries like the one in the example above.

You can also add a color by typing its hexadecimal representation in one of the text boxes. This consists of six hexadecimal (`0' through `9' and `a' through `f') digits preceded by a number (hash) sign, `#'. For example: #ef6a02. The first two digits indicate the red values, the next two the green values, and the last two the blue values. Again, the numbers depend on the video card for your display. This number will be added to the color lists.

The colors in the Colors dialog come from the local color map file only, but you can use a color from the system file by typing its name into the dialog box. By default, if the system and local color map files have an entry for the same color name but with different numbers, the entry in the local file takes precedence. You can reverse this behavior via the HoTMetaL PRO configuration file. The following setting will make HoTMetaL PRO give precedence to the system file:

use_local_color_defs=NO

After you make this setting you will have to restart HoTMetaL PRO.

HoTMetaL PRO will allow you to pick any color from the Colors dialog box using the name defined in the rgb.txt file. It will not, however, save the color name in the HTML file. Instead it will save the hexadecimal red-green-blue value associated with that color name.

Importing document colors

When HoTMetaL PRO opens an existing HTML file, it will ignore any color values that are not in hexadecimal red-green-blue format. For example, if the HTML file contains a background color defined as `orchid', the document will display with only the default background color in HoTMetaL PRO. If you then pick `orchid' as the background color and resave the document in HoTMetaL PRO, it will save the hexadecimal value for `orchid' into the file.

Text color

You can change the text color for a part of the document.

Highlight the text after the colon (:).
Click on the toolbar icon.

A window containing a list of available colors will appear.

COLORPAL

To make the text red:

Click on red in the color menu.
Click on [OK] in the color menu.

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.

Background color

The background color of this Web page can be changed for emphasis and artistic effect.

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 entry box. This brings up a window containing a list of available colors.
Select a color from the list.
Click on the [OK] button.
Click on the [OK] button in the Document Colors dialog box.

The background color of the HoTMetaL PRO document window will change to the color you chose.

Default text color

You can change the default 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 opening the window containing a list of available colors. Setting the text color changes the color of all the text in the document.

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 entry box. This brings up a window containing a list of available colors.
Select a color from the list of available colors.
Click on the [OK] button.
Click on the [OK] button in the Document Colors dialog box.

The text color will change to the color you chose. Notice that the text inside the FONT element that you inserted previously doesn't change color.

Link colors

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 PRO) 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 the background and text in the colors you chose.

Alignment

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

Note: 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 CENTICON toolbar button. This paragraph is now center-aligned. Clicking on the LEFTICON or RGHTICON button 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 includes 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.

You're now 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:///home/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.

PUBLISH

Enter the following in the Change URLs From text entry box (overwrite the default contents):
```
file:///home/rodney
```
Enter the following in the To text entry box (overwrite the default contents):
```
http://www.sq.com/~rodney
```
Click on the [Find Next] button.

HoTMetaL PRO puts the insertion point inside the first element whose URL starts with `file:///home/rodney'.

Click on the [Replace] button.

The text `file:///home/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 entry box (overwrite the default contents):
```
http://www.sq.com/~zvi
```
Click on the [Find Next] button.
Click on the [Replace] button.

HoTMetaL PRO changes the text `rodney' to `zvi' in the current URL.

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 entry boxes or option menus. 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 PRO. 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 the Technical Reference command in the Help menu, you will find several references to documents on this topic.

This tutorial explains how to properly 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.
Choose the Tutorial template group in the dialog box that appears.
Choose the Tutorial Sample File template.
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

Now you're ready to start constructing a form.

Click on the 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 that specify its `action'-how and where the form's data is to be submitted. We will specify the action at the end of the form tutorial.

The `Form' toolbar-which contains the FORMICON 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 entry 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 button on the `Form' toolbar.

This inserts a text entry box into the form. HoTMetaL PRO'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 properties of this text field.

Double-click on the text field, or click once on the text field to select it, and then choose Input Attributes... from the Forms menu.

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

INPTEXT

This dialog box allows you to set the most important properties of this INPUT element: the name, value, size, and maximum length.

In the Name text entry 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 entry box, option menu, etc., a particular piece of data came from.

Note the following other properties, which can enter values for if you like:

The Size specifies the text entry box's size in characters. Entering a number here will change the size of the text entry box. If no number is entered, the text entry box will be 20 characters long.
If you enter some text in the Value text entry box this text will be displayed in the text entry box by default.
The maximum length refers to the maximum number of characters that can be entered in the text field in a browser.

Entering several lines of text

A text entry 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 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.

TEXTAREA

Double-click on the text area, or click once on the text area to select it, and then choose Input Attributes... from the Forms menu.
This brings up a dialog box that contains the most important features of the TEXTAREA element: Name, Default Content, Width, Rows and Text Wrapping.

TAREADLG

Enter the following values in the Multiline Text dialog box:
- Name: cust_addr
- Width: 40
- Rows: 5
Rows and Width specify the dimensions of this input field: 5 lines deep and 40 characters wide.
Click on the [OK] button.

If you want a multi-line text area 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 selection list

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 an option menu.

Insert a new P element, and type:
```
Credit Card:
```
Click on the toolbar button to insert a SELECT element.

A graphical representation of the SELECT element will appear.

SELECT

To edit the properties of the SELECT element:

Double-click on the selection list, or click once on the list to select it, and then choose Input Attributes... from the Forms menu.

The Selection list dialog box appears, allowing you to create and edit a list of choices.

SELELIST

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

In the Name text entry box, enter `card-name'. This is the identifier for the SELECT element.
In the text entry box labeled Size, enter `1'. This means that only one option will be shown at a time in the selection list.

HoTMetaL PRO puts one item in the selection 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] button. The list option will `jump out' of the list and become editable.
Highlight the words `Item 1' in the List Item text entry box and enter:
```
Visa
```
Click on the [Add >>] button. The item you just edited will move back into the list.

This list item (represented in HTML as an OPTION element) represents one choice in the selection list. The text that you typed will appear as the name of an option in the selection list.

To add a new list option, move the insertion point to the List Item text entry box and type:
```
MasterCard
```
Click on the [Add >>] button.
Move the insertion point to the List Item text entry 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 selection list.

Notice that each list item that you entered as a list option in the Selection List dialog box is a choice in the list.

Selection list properties

You can add a Value for each list option, which would be sent with the form data instead of the List Item text 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 selection list as a scrollable list rather than an option menu.To do this, you would set the SIZE attribute of SELECT to 2 or greater by typing the value into the Size text entry 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 option menu, select a list option, and use the and 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 entry box by clicking on the toolbar button..
Double-click on the text field, or click once on the text field to select it, and then choose Input Attributes... from the Forms menu.
Set the NAME attribute to `card-num'.
Click on the [OK] button.

Check boxes

There are several other different kinds of input elements that can appear in 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 toolbar button.

HoTMetaL PRO inserts a check box icon.

Double-click on the check box, or click once on the check box to select it, and then choose Input Attributes... from the Forms menu.
In the dialog box that appears, type `chopin' in the Name text entry box. You don't need to enter anything in the Value text entry box.
Click on the [OK] 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, or click once on the check box and then choose Input Attributes....
Type `motors' in the Name text entry box.
Click on the [OK] 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, or click once on the check box and then choose Input Attributes....
Type `html' in the Name text entry box.

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

Click on the Checked? box.
Click on the [OK] button. Notice that the check box changes in HoTMetaL PRO 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 buttons 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 entry box of the check box dialog.

Radio buttons

As we said above, you can also use 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 toolbar button.
Double-click on the graphical radio button element, or click once on the radio button and then choose Input Attributes... from the Forms menu.
In the dialog box that appears, enter the following text into the text boxes indicated:
- Enter `language' in the Name text entry box.
- Enter `english' in the Value text entry box.
- Click on the Checked? box to set this radio button as the active one. Notice that the radio button changes in HoTMetaL PRO to reflect its active status. Only one radio button in a group can have the Checked? box activated.
Click on the [OK] 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, or click once on the radio button and then choose Input Attributes... from the Forms menu.
In the dialog box that appears:
- Enter `language' in the Name text entry box.
- Enter `french' in the Value text entry box.
Click on the [OK] 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, or click once on the radio button and then choose Input Attributes....
In the dialog box that appears:
- Enter `language' in the Name text entry box.
- Enter `spanish' in the Value text entry box.
Click on the [OK] 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 Name for all of its members can't be the same as the name you used for the radio buttons you just created.
The content of the Value text entry 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 entry boxes, radio buttons, etc.) to their default values:

Insert a new P element after the last one.
Insert a reset button by choosing the toolbar button.
Double-click on the reset button, or click once on the reset button and then choose Input Attributes... from the Forms menu.
In the dialog box that appears, enter `Reset to defaults' in the Value field.
Click on the[OK] button.

Notice that this changes the text on the reset button in HoTMetaL PRO. 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 entry 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 toolbar button.
Double-click on the submit button, or click once on the submit button and then choose Input Attributes... from the Forms menu.
In the dialog box that appears, enter `Submit order' in the Value text entry box.
Click on the [OK] button.

Notice that this changes the text on the submit button in HoTMetaL PRO. 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 the insertion point 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 option menu. choose `http'.
In the Host text entry box, type:
```
www.sq.com
```
In the Path text entry 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 Ctrl+] 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 PRO 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 entry box, check box, etc.) and a `value' (for text entry 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 form's action 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 option menu. choose `mailto'.
In the Path text entry 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 Ctrl+] 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, in the Core HTML chapter.

Ordered (numbered) lists

Unordered lists

Definition lists

Anchors

Links to a specific location

Images

Font size

Importing document colors

Text color

Background color

Default text color

Link colors

Form element

Creating a text entry box

Entering several lines of text

Selection list properties

Check boxes

Reset

Submit

Setting the action of the form

Submitting the form

Mailing the contents of a form

For more information