HTML Quick Reference

© Copyright SoftQuad Inc., 1995. This document may be reproduced in whole or in part provided that this copyright notice is reproduced on each copy made.

The authoritative source of information on the structure of HTML documents is the document HyperText Markup Language (HTML) Version 2.0. This section provides a short summary of this material. 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.).

Overview

• An element called HTML surrounds the whole document.
• This element contains two sub-elements, HEAD and BODY. These elements are required.
• HEADhas sub-elements that define header material:
  • TITLE: document title. This element is required.
  • BASE: can be used to record the document's URL. The URL recorded here may be used to resolved a "partial URL", or used if the document is accessed "out of context".
  • 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.
  • META: gives information that appears in HTTP headers.
  • NEXTID: used to generate a unique identifier.
• Inside the BODY element, heading elements (H1 through H6) can be used to delimit 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:
  • H1should 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:
  • 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.
  • CODE: code samples.
  • P: paragraphs.
  • PRE: pre-formatted text. You would use this text when you want the browser to use the same line breaks and spacing that you entered in the document. The text will be formatted by a browser using a fixed-width typewriter font.
  • DL, DIR, MENU, OL, UL: list elements (see Lists, below).

Character formatting

The following elements are used primarily for formatting inline text:

• B: bold.
• I: italic.
• EM: browsers usually represent this element in italic.
• STRONG: browsers usually represent this element in bold.
• TT: characters inside this element are formatted with a fixed-width typewriter font such as Courier.
• SAMP: literal characters.

Line breaks

If you want to force a browser to break the current line in the text, insert a BR element. You can't type inside this element: it just causes a line break.

Horizontal lines

To cause the browser to print a horizontal line (rule) in your document, insert an HR element. HoTMetaL PRO will display a line in your document, but individual browsers may print lines of different widths and lengths.

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 are prefaced by a list mark such as a bullet. Browsers will usually vary the list mark to take account of nesting.
• DIR: directory list. This is an unordered list. Each LI element in this kind of list should 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 this kind of list consists of one or more terms (DT elements), followed by a definition (DD element).

Link elements

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 Universal Resource Locators (URLs), which are identifiers that name the location and filename of a document, and the protocol 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 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 this case, the text, if there is any, given in the ALT attribute may be shown.) The SRC attribute represents a URL.

HoTMetaL PRO has three commands for working with URLs:

• Edit URLs...in the Markup menu provides a convenient editing mechanism for editing the URL (if there is one) in the current element. See the tutorial section for an example of using this command.
• Publish...in the File menu is used if you want to change the URLs in the document from identifiers that refer to files on your local system to identifiers that refer to publicly-available files on one or more WWW servers.
• Show Link and Context Viewin the View menu is used to display the URL (if there is one) in the current element.

Links within the same document

This topic is covered in an extended example in the tutorial section.

In general, you can set up a "source" and "destination" anchor pair by setting the NAME attribute of the destination 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.

`Hot images'

A `hot image' is used like an anchor --when you click on the image, the browser retrieves a document.

This is very easy to accomplish: you just need to insert an IMG element inside an A element. Each element 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 different documents to be retrieved. This is accomplished by means of a clickable image map, a file that tells the browser where the hot spots are. To prepare such a file, you'll need other tools besides HoTMetaL PRO, and so we won't discuss the procedure here. Rather, you should retrieve the document "Overview on using Clickable Image Maps " by opening the file faq.htm, located in the directory doc underneath the HoTMetaL PRO installation directory, with a browser and clicking on the appropriate anchor.

Forms

The following elements are used to construct forms that the user can fill in and submit (e.g., via e-mail). When your document is browsed, the browser will generate the appropriate graphical widgets.

• FORM: the top-level element for a form.
• INPUT: generates a text field, button, radio button, or check box.
• SELECT: represents a group of choices that a user can make. Generates a pop-up menu 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 SoftQuad's tutorial on forms. You can also retrieve the document "Information on setting up form functionality" by opening the file faq.htm, located in the directory doc undernetah the HoTMetaL PRO installation directory, with a browser and clicking on the appropriate anchor. To see an example of a form, use Open Template... to open the template custreg.htm.

Other elements

The elements in this section do not fit into the categories described above.

• CITE: represents a document citation.
• KBD: used to display text that a user would enter at the keyboard. (This would be used in technical manuals, for example: it is not similar to an element such as INPUT, used in forms.)
• VAR: represents a variable name.

Obsolete elements

The elements PLAINTEXT, XMP, and LISTING are obsolete and are supported in this release of HoTMetaL PRO only for compatibility with older documents. Using these elements in new content is not recommended. XMP and LISTING should be replaced by PRE.

The obsolete elements COMMENT and HP are not supported.

Proposed elements

The proposed elements DFN, STRIKE, and U are not supported by HoTMetaL PRO.

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

For further information...

The file faq.htm in the directory doc underneath the HoTMetaL PRO installation directory contains titles and URLs for documents that contain information on HTML usage. Open this file with a browser and retrieve the documents that you're interested in.

A number of HTML tutorials, of varying quality, are usually available on the web. The relevant Usenet newsgroups (those in the comp.infosystems.www hierarchy) are also a source of information.