The CML sets up and delivers user interface elements as early as possible. The main tool it uses to do this is the HTML <DIV> tag.
Note <SPAN> tags are virtually identical to <DIV> tags, except that they do not cause a line break in the presentation of the HTML. Both tags are used interchangeably in CML.
Blocks of HTML enclosed in <DIV>…</DIV> tags divide an HTML page into separate divisions or sections. You can use several such divisions on a single HTML page, and for each one you can set a number of style properties that apply to the contents enclosed between the tags. You can also specify an ID for a DIV section and refer to that ID in code that runs later, allowing you to alter the formatting of all the elements in that section all at once. The properties of a DIV section set both the section's appearance and its absolute position on the page. Absolute positioning also lets you overlap divisions onto the same piece of window real estate.
The CML uses the <DIV> tag in many files, in particular those whose names begin with an extra "D", such as "DFilter.asp," "DSearch.asp," and "DDetails.asp." For example, this code (abridged) is from the file DFilter.asp:
<!-- SEARCH MENU DIV -->
<div STYLE="BACKGROUND-COLOR: white; HEIGHT: 95%; LEFT:5px; POSITION: absolute; TOP: 30px; WIDTH: 170px">
<span STYLE="HEIGHT: 24px; LEFT: 2px; POSITION: absolute; TOP: 120px; WIDTH: 120px">
<input name="txtWord" style="HEIGHT: 20px; WIDTH: 109px"></span>
<span class="UpButton" title="Start Search" onClick="DoSearch()"
OnMouseDown="javascript:push()" OnMouseOut="javascript:unPush()">Search</span>
<span style="FONT-FAMILY: Verdana, Arial; FONT-SIZE: 8 pt; HEIGHT: 42px; LEFT: 4px; POSITION: absolute; TOP: 148px; WIDTH: 193px">
<input onClick="takeFocus()" TYPE="Radio" NAME="Type" ID="cbTitle" VALUE="Title" CHECKED><label FOR="cbTitle" TITLE="Search By Title">Title</label>
. . .
Enter keywords using <strong>AND</strong>, <strong>OR</strong> or <strong>NEAR</strong>.
</span>
<span CLASS="Item" STYLE="LEFT: 5px; TOP: 210px">Include...</span>
. . .
<div CLASS="BUTTON" ID="selectAll" onClick="selection()" STYLE="DISPLAY: none; TOP: 335px" TITLE="Select All" >Select All</div>
<div CLASS="deselButton" ID="selectNone" onClick="selection()" STYLE="TOP: 335px" TITLE="Deselect All">Deselect All</div>
</div>
The preceding code displays the menu that lets users search for library items. The entire menu is enclosed within a pair of DIV tags.
Note: Using Collections It is generally better to avoid the All collection when referring to any HTML element with an ID. Because the ID causes the object to be part of the global environment in which the script is operating, it is just as correct (and probably faster) to refer to the object by name. For example, the following line refers directly to an object with the ID "myp" and changes its color attribute to red.
myp.style.color = "red"