Core HTML

The authoritative source of information on the structure of HTML documents is the IETF HTML 2.0 specification. See the HoTMetaL PRO `Technical Reference' page for the URL for this document.

The HTML rules used by HoTMetaL PRO 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 PRO 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.).

Head and Body

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.

To insert one of the `head' elements:

• Put the insertion point inside HEAD.
• Click on the (head elements) toolbar button without releasing the mouse button.
• From the pop-up menu that appears, select the element you want to insert and release the mouse button.

The BODY element contains most of the information in the document. An exception to this is a document that uses frames.

Headings (six different kinds)

Inside the BODY element, heading elements (H1 through H6) are generally used to start 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.

To insert an H1 or H2 heading:

• Click on the or toolbar button.

To insert an H3 to H6 heading:

• Click on the toolbar button without releasing the mouse button.
• From the pop-up menu that appears, select the heading you want to insert.
• Release the mouse button.

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. Insert this element by clicking on the toolbar button.
• BLOCKQUOTE: used for quotes from another source, requiring special block-style formatting. ( button.)
• DL, DIR, MENU, OL, UL: list elements
• P: paragraphs. ( button.)
• 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. ( button.)

Character formatting

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

• B: bold. Insert this element by clicking on the toolbar button.
• CITE: represents a document citation. ( button.)
• EM: browsers usually represent this element in italic. ( button.)
• I: italic. ( button.)
• STRONG: browsers usually represent this element in bold. ( button.)
• TT: characters inside this element are formatted with a `teletype' font (a fixed-width typewriter font, such as Courier). ( button.)

You can also insert any of these elements by choosing the corresponding command from the Format menu.

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 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 toolbar button). This inserts a line in the HoTMetaL PRO 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.

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. Insert an OL by clicking on the toolbar button.
• 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 unordered lists. (Click on the button.)
• 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). To insert a DL, click on the toolbar button; click on to insert a DT, to insert a DD.
• DIR: directory 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.

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

To insert a menu list, directory list, and all compact lists:

• Click on the (`Other lists') toolbar button without releasing the mouse button.
• From the pop-up menu that appears, choose the list you want to insert.
• Release the mouse button.

Anchors

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 A (anchor) element is the one most commonly used to represent links to other documents. 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.

To insert an A element:

• Click on the toolbar button, or choose Insert Anchor... from the Markup menu.

This inserts the A element and gives you a dialog box in which to create the URL.

To edit the URL of an existing A element:

• Put the insertion point inside the A element.
• Click on the toolbar button, or choose Edit URL... from the Markup menu.

Links to a specific location

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 Links chapter for more information. This topic is also covered in a tutorial.

For more information

See the Links chapter.

Images

Graphic images are normally represented by an IMG element. The SRC attribute of the IMG represents a URL. Some browsers may not be able to display images: in that case, the text, if there is any, specified by the ALT attribute may be shown.

To insert an IMG element:

• Click on the toolbar button

This inserts the IMG element and gives you a dialog box in which to create the URL.

To edit the URL of an existing IMG element:

• Put the insertion point inside the IMG element.
• Click on the toolbar button, or choose Image Attributes... from the Tools menu.

`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 must 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 image map 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 PRO 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 image map. 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) , accessible by choosing Technical Reference from the Help menu.

For more information

See the Working with images chapter.

Forms

A number of `form' 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 PRO also displays the form elements in graphical format (as a text field, check box, etc.).

There are three ways to insert form elements:

1. Click on the corresponding button in the `Forms' toolbar.
2. Choose the corresponding command in the Forms menu.
3. Insert the element using the Insert Element... command in the Markup menu.

You will probably find it more convenient to use either the toolbar or the Forms menu.

FORM element

The FORM element is the top-level element for a form. It surrounds all of the other form elements. To insert this element, click on the toolbar button or choose the Form command in the Forms menu.

The FORM element's ACTION attribute (which you can edit with Edit URL... in the Markup menu) specifies the form's action, that is, the program or e-mail address that the form is submitted to.

`Input' objects

There are several types of objects that are represented by the INPUT element. These are differentiated in an HTML document by the value of the TYPE attribute. When you create one of these objects using the toolbar or the Forms menu, HoTMetaL PRO sets the TYPE attribute to the appropriate value.

• A text field is a field in which the user can enter a line of text. To generate a text field, click on the toolbar button or choose Text Field from the Forms menu. The value of the TYPE attribute for a text field is TEXT.
• A password field is similar to a text field. The only difference is that the text that the user types in the field is not displayed in the browser window. Click on the button or choose Password Field from the Forms menu. The value of the TYPE attribute is PASSWORD.
• A checkbox can be turned on or off and is used to offer a yes/no choice. Click on the button or choose Checkbox from the Forms menu. The value of the TYPE attribute is CHECKBOX.
• A group of radio buttons is used to offer only one choice from a group. Click on the button or choose Radio Button from the Forms menu. The value of the TYPE attribute is RADIO.
• Forms normally contain a submit button that the user clicks on to submit the form's data over the Web. Click on the button or choose Submit Button from the Forms menu. The value of the TYPE attribute is SUBMIT.
• If a form contains a reset button, the user can click on it to reset the data in the form to their default values (usually blank). Click on the button or choose Reset Button from the Forms menu. The value of the TYPE attribute is RESET.
• An image button is an image that functions as a submit button. Click on the button or choose Image Button from the Forms menu. The value of the TYPE attribute is IMAGE.
• A hidden field is not displayed in the browser; it is used to send information that is used only by the recipient of the form's data. Click on the button or choose Hidden Field from the Forms menu. The value of the TYPE attribute is HIDDEN. HoTMetaL PRO displays this object as a pair of tag icons.

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

• A file field allows the user to attach a file to the data submitted with the form (also referred to as file uploading).

  You can insert a file upload input element by clicking on the toolbar button or choosing File Field from the Forms menu.

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

  • Double-click on the file upload object.
  • Enter the list of file types in the Acceptable File Types text entry 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:

  • Using Element Attributes..., enter the value multipart/form-data for the FORM element's ENCTYPE attribute.

• A form can contain extra buttons that activate script commands. To create this kind of object:
  • Insert any of the objects described above.
  • Click on the object.
  • Choose Element Attributes... from the Markup menu, or typeCtrl-] at the keyboard.
  • Set the TYPE attribute to BUTTON.
  HoTMetaL PRO displays this element as a pair of tag icons. A script can use the information contained in any of several attributes of an INPUT element: onBlur, onClick, onChange, onLoad, and onSelect. For more information, see the section Scripts and any available external documentation on the scripting languages (e.g., JavaScript).

Selection list

A selection list represents a group of choices that a user can make. Browsers implement this kind of list as an option menu or a scrollable list. A selection list corresponds to a SELECT element that contains one or more OPTION elements; each OPTION corresponds to a choice in the list.

To create a selection list:

• Click on the button or choose Selection list from the Forms menu.
• To add the individual options, double-click on the selection list object and enter the options in the dialog box that appears.

For more information, see the tutorial on selection lists.

Multiline text areas

A text field lets the user enter a single line of text; if you want users to be able to enter several lines of text, you should create a multi-line text area in the form.

• Click on the button or choose Multiline text from the Forms menu.

A multi-line text area corresponds to a TEXTAREA element.

Form object properties

Objects in a form have a number of properties that you can (or, in some cases, must) edit. Some common properties are:

• Name: most form objects must have a name. Except with radio buttons, a name cannot be used twice in the form. When the form is submitted, the name is sent along with the input data for that object, so that the receiving program will know which graphical object the data came from.

  The objects that require a name are: text field, password field, check box, radio button, hidden field, selection list, and multi-line text area.

  Each member of a group of related radio buttons must have the same name, so that the browser will know that only one of them can be turned on at a time.

• Value: the value associated with a form object is normally the data that the user enters. Some objects-text fields, password fields, options (from a selection list), multi-line text areas-let you specify a default value. Check boxes have a default value of `off' or `on', depending on whether the user checks them; this can also be overridden. Radio buttons must be given a value when the form is created.
• Dimensions: you can specify the default dimensions of some objects. Widths are specified in characters; heights are specified in lines. Note that the size of a selection list determines whether it is displayed as an option menu or a scrollable list. If the size is 2 or greater, the browser displays a scrollable list.
• Checked: you can specify that a check box or radio button is checked (turned on) by default.

Once you have inserted a form element, you can edit its properties in two ways:

1. Double-click on the element (that is, on the graphical object).
2. Click once on the object and then choose Input Attributes... from the Forms menu.

Either of these actions brings up a dialog box, specific to each type of object, that lets you edit the object's properties. Most of these properties correspond to the attributes of the element: if you wish to edit the attributes directly, click on the object and then choose Element Attributes... in the Markup menu.

Layout

You can use other elements such as paragraphs, tables, and horizontal lines to organize the layout of the graphical objects in a form.

For more information

For more information on form objects and their properties, see the tutorial on forms. You can also retrieve the document describing the Common Gateway Interface (CGI) by choosing Technical Reference from the Help menu.

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

You can insert any of these elements using Insert Element... in the Markup menu.

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.

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

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 color menu. The background color of the document in HoTMetaL PRO will change to reflect your choice.

Note: 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' are used). 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 color menu. The color of the text in HoTMetaL PRO will change to reflect this. The TEXT, LINK, ALINK, and VLINK attributes of BODY control the colors of text, links, active links (links currently being clicked on), and visited links (links that have already been clicked on), respectively.

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 lets you set the background image either directly, by typing in a filename or URL in the Background Image text entry box, or by bringing up the file chooser dialog box. HoTMetaL PRO does not display the image in its background.

Font color and size

You can change the font size and color for a piece of text by using toolbar buttons.

• Highlight the text that you wish to modify.
• If you click and hold on the toolbar button, you will get a pop-up menu in which you can set the relative (+/-) font size. Most browsers support font sizes between 1 and 7: 3 is the default size. When you choose a value from this pop-up, it is added or subtracted to the default. This causes the browser to increase or decrease the font size.

Note: The font sizes that you set with the FONT element are not equivalent to `point sizes' used in typography, where, for example, a size of 10 to 12 would be to a normal text font size.

• From the font color toolbar button , you can set the COLOR attribute by using the color menu. You can also choose Font Color... from the Format menu. (See click here for an explanation of available colors.)

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.

Setting the font for the whole document

Some browsers support the BASEFONT element, which lets you change the font for the entire document. If you use this element, you must insert it (using Insert Element...) directly to the right of the <BODY> start-tag.

To set a font size:

• Put the insertion point inside BASEFONT and choose Element Attributes... from the Markup menu (or type Ctrl-]).
• Set the SIZE attribute to the desired size (between 1 and 7). The sizes are interpreted in the same way as for the FONT element.

If you set the font size with BASEFONT, the font size will not change in the HoTMetaL PRO window, but it will change when the document is displayed in a browser.

If you specify the default font size with BASEFONT, but surround a piece of text with a FONT element that specifies a different size, the size specified in the FONT element will override the default (for the surrounded text only).

Alignment

To left-align, center, or right-align headers, paragraphs, horizontal rules and images:

• Place the insertion point inside the element whose alignment you want to change.
• Choose one of the alignment toolbar buttons: left , center , or right or choose Align Left, Align Centered, or Align Right from the Format menu.

To set the alignment `manually', edit the ALIGN attribute of each of these element by choosing Element Attributes... from the Markup menu.

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