Extensions to HTML

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

Note: You should bear in mind that not all of the extensions described here are 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 users, and should not be interpreted as an endorsement by SoftQuad Inc.

Frames

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

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

A document that contains frames has a FRAMESET (frame set) element as the top-level document content element instead of the BODY element. A frame set 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.

A frame document can also contain a NOFRAMES element, which contains a BODY element. If a frame document is viewed by a browser that does not support frames, the contents of the NOFRAMES element will be displayed by that browser.

To create a FRAMESET element select Convert to Frames from the Tools menu. This will insert a FRAMESET element and surround the BODY element with a NOFRAMES element.

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

You can create and edit a frame document in HoTMetaL PRO by inserting frame markup and editing frame set and frame attributes.

It may be easier to work with frameset documents in HoTMetaL PRO if you have loaded a styles file-such as showall.asf-that makes some of the attributes of frames visible.

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 left of the </FRAMESET> start-tag.
• Choose Element Attributes... in the View menu.

A FRAMESET has ROWS and COLS (columns) 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.

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 click on a link to 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 (in HTML format) of targeting specific frames using an anchor element. First, the document containing the frames:

<FRAMESET ROWS="33%,33%,33%">
	<FRAME NAME="upper" SRC="blueback.htm">
	<FRAME NAME="middle" SRC="sources.htm">
	<FRAME NAME="lower" SRC="blueback.htm">
</FRAMESET>

To create this document:

• Create a new document and select Convert to Frames from the Tools menu.
• Insert two additional FRAME elements following the one that HoTMetaL PRO has inserted for you. Edit the attributes of the FRAMESET element and enter the above percentages in the Rows field, separated by commas.
• ChooseEdit Attributes... for the first FRAME element and set the Name field to upper and the SRC field to blueback.html.
• ChooseEdit Attributes... for the second FRAME element and set the name field to middle and the SRC field to sources.html.
• Choose Edit Attributes... for the third FRAME and set the name field tolower and the SRC field to blueback.html.

Here is a fragment from the document sources.htm, referred to in the middle frame above.

<P><A TARGET="upper" HREF="http://www.sq.com/">
SoftQuad Home Page
</A>
<BR>
<A TARGET="lower" HREF="http://www.w3.org/">
W3 Consortium Home Page
</A>
</P>

To create this document:

• Create a new document.
• Insert an anchor (A element) using the toolbar button.
• Give this anchor the URL http://www.sq.com/
• Insert the second anchor and give it the URL http://www.w3.org/
• Enter the appropriate text inside each A element.
• Put the insertion point inside the first A element and choose Element Attributes... (or type Ctrl-] at the keyboard).
• Give the TARGET attribute the value upper (i.e., the name of the first frame).
• Similarly, give the TARGET attribute of the other A element the value lower (i.e., the name of the third frame).

Since each frame should have a default document, we suggest that you create a file called blueback.htm that has no content, but has the document background color set to blue.

When you load the frame document in a browser, three frames will be displayed. The middle frame will contain the document sources.htm, and the other two frames will be blank. If you click on the first anchor in sources.htm, the the document http://www.sq.com/ will be displayed in the upper frame; clicking on the second anchor will cause the document http://www.w3.org/ to be displayed in the lower frame.

Note: At the time of this writing, browsers are unable to target a specific frame unless that frame has 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.

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 our frame tutorial, available from the How-To Index. See also the Technical Reference page in the Help menu.

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.

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

Applet insertion

You can insert applets into HoTMetaL PRO in two ways:

• Click on the toolbar button. This will bring up a file chooser dialog box that prompts you to choose the applet .class file that you want to insert. After you choose the file, a dialog box in which you can set various attributes of the applet will appear (see 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. The following attributes are set automatically if you use the toolbar button to choose an applet file. They can be set manually by editing the attributes of the APPLET.

• ID - the identifier for the applet.
• CODEBASE - specifies the directory in which the applet file is located. If this attribute is blank, the applet is assumed to be in the same directory as the current document. The value of this attribute is generally a relative URL pointing to a local directory.
• CODE - the name of the file containing the applet. This attribute must specify a filename only (no folders). This information is required.

When you use the toolbar button to insert an applet, the Applet Attributes dialog box appears. You can bring up this dialog box at any time by placing your cursor inside the APPLET element and choosing Applet Parameters... from the Markup menu. You can set the following attributes:

• ALT - some text that will be displayed if the document is displayed in a non-Java environment. HoTMetaL PRO 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 toolbarbuttons.
• 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

Coding applets is beyond the scope of this manual; choose Technical Reference from the Help menu for references to Java.

Scripts

SCRIPT elements contain code, written in one of several programming languages, that is executed by a script-aware browser. JavaScript and Visual Basic Script are two such programming languages. The SCRIPT element allows you 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.

Note: 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-enhanced documents contain markup readable by all browsers.

The actual code is usually placed between the start- and end-tags of a SCRIPT element. You can insert a SCRIPT element by using the Insert Element... command in the Markup menu. You can edit the SCRIPT element's attributes using the Element Attributes... 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

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 </SCRIPT> end-tag.

In addition to the script code, scripts can make use of attributes of other elements. These attributes define user input to a script. There is one form element that has been created especially for scripts: an INPUT element 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

The details of how to code in JavaScript or Visual Basic Script are beyond the scope of this manual; choose Technical Reference from the Help menu for more information.

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.

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

• Insert a MARQUEE element (using Insert Element...).
• Between the tag icons, enter the text that you want scrolled.

The attributes of MARQUEE tell the browser exactly how the text will be displayed and scrolled. You can edit these attributes with the Element Attributes... command in the Markup menu.

• ALIGNMENT - how the surrounding text is aligned with the marquee text (TOP, MIDDLE, or BOTTOM).
• BEHAVIOR - specifies the type of movement of the text. The choices are:
  • SCROLL - continuous scrolling on and off the screen (the default)
  • SLIDE - the text scrolls until one end reaches the margin
  • ALTERNATE - the text `bounces' back and forth between the margins
• BGCOLOR - background color of the marquee area.
• DIRECTION - direction (LEFT or RIGHT) that the text scrolls. LEFT is the default.
• HEIGHT - height of the marquee area, in pixels ( n), or as a percentage of the window height (n%).
• HSPACE - width of the left and right margins, in pixels.
• LOOP - the number of times the text will scroll. If this attribute has the value `-1' or INFINITE, the text will scroll `infinitely'.
• SCROLLAMOUNT - the number of pixels between successive scrolls of the text.
• SCROLLDELAY - the time in thousandths of a second between successive scrolls of the text.
• VSPACE - the height of the top and bottom margins, in pixels.
• WIDTH - width of the marquee area, in pixels (n), or as a percentage of the window width (n%).

For more information

Choose Technical Reference from the Help menu for references to marquees.

Text formatting

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

Note: 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 WBR element 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.
• You can use the FONT element's FACE attribute to choose the font for a piece of text:
  • Highlight the text you want to modify.
  • Using Insert Element..., surround the text with a FONT element.
  • Using Element Attributes..., set the FONT element's FACE attribute to the name of a font, e.g., `Arial', `Courier'.

  This feature is not supported by all browsers. Note also that many font names are platform-specific-a font that is understood by a Macintosh browser may not be understood by a Windows browser, and vice versa.

• The FONT element can also be used to change font size or color.

Block formatting

The elements in this section can be created using Insert Element... or Change Element...; the attributes can be edited using Element Attributes.... All of these commands are in the Markup menu.

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

• 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

Many elements have the attributes listed below. These attributes are extensions to the HTML 2.0 specification that are to be used with such forthcoming HTML features as cascading style sheets. They are not currently used by most Web browsers, and, for the most part, you can safely ignore them. The following is a brief definition of these attributes: for a full explanation, read the HTML 3.0 specification. See the HoTMetaL PRO `Technical Reference' page for the URL for this document.

• 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 its 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 PRO 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 the Technical Reference 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 PRO. 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 PRO.

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