IE 3.0 supports a number of HTML enhancements, which include frames, style sheets, tables with background colors or image settings for table cells, the OBJECT tag to insert ActiveX controls, and animated .GIF and .BMP images. In particular, frame support includes bordered frames, borderless frames, and targeted window and floating frames. All these enhancements will be examined in detail in this appendix, along with examples.
Independent frames (windows) can be defined in a Web page by using frame tags. The frame tags include FRAME, FRAMESET, NOFRAMES. FRAME specifies a single frame within a FRAMESET. There is no matching tag for FRAME. FRAMESET describes how frames are laid out on a page. NOFRAMES indicates that the content enclosed between a NOFRAMES tag can be viewed by browsers that do not support frames.
By default, FRAMESET hosts each frame with borders. The page shown in Figure F.1 consists of two frames.
Left frame provides a table, with two items in the table cell, Step 1 of 2 and Step 2 of 2. The cells are hyperlinked. When Step 1 of 2 is clicked, the content of the right frame will be changed to the OLE COM AppWizard. Step 1 of 2 is shown in Figure F.2.
Figure F.2. Link: Step 1 of 2 is clicked.
When Step 2 of 2 is clicked, the content of the right frame will be changed to the OLE COM AppWizard. Step 2 of 2 is shown in Figure F.3.
Figure F.3. Link: Step 2 of 2 is clicked.
Listing F.1 highlights the implementation of the page displayed in Figure F.1.
Listing F.1. Complete code listing for page in Figure F.1.
f1.htm
<HTML> <HEAD> <TITLE>Bordered Frames with scrolling bar</TITLE> </HEAD> <FRAMESET COLS = "250, *" FRAMEBORDER=1 FRAMESPACING=3> <FRAME NAME = "index" MARGINWIDTH=5 MARGINHEIGHT=5 SCROLLING="yes" SRC="f2.htm"> <FRAME NAME = "main" MARGINWIDTH=10 MARGINHEIGHT =10 SCROLLING ="yes" SRC="f3.htm"> </FRAMESET> <NOFRAMES> Your browser doesn't support frames. Click <A HREF="noframes.htm"> here </A> to go to the non-frames page. </NOFRAMES> </HTML> <HTML> <STYLE> BODY {font: 11pt/12pt Arial; color: brown} P {font: 11pt/14pt Times; color: blue; text-indent: 0.25in; margin-right: 0.25in} H2 {font: 12pt Arial; color: Yellow} </STYLE> <BODY> <H2> OLE COM AppWizard Screen Menu</H2> <TABLE ALIGN=left CELLSPACING=5> <TR> <TD ALIGN=CENTER VALIGN=MIDDLE BGCOLOR=#ddddff WIDTH=130 HEIGHT=30> <A HREF="index1.htm" TARGET="main">Step 1 of 2</A> </TD> </TR> <TR> <TD ALIGN=CENTER VALIGN=MIDDLE BGCOLOR=#ddddff WIDTH=130 HEIGHT=30> <A HREF="index2.htm" TARGET="main">Step 2 of 2</SPAN></A> </TD> </TR> </TABLE> </BODY> </HTML>f3.htm
<HTML> <HEAD> <TITLE>OLE COM AppWizard</TITLE> <STYLE> BODY {font: 9pt/10pt Arial; color: white} P {font: 13pt/14pt Times; color: green; text-indent: 0.25in; margin-right: 0.25in} H1 {font: 30pt Times; color: brown} H2 {font: 18pt Arial; color: Green; font-style: italic} </STYLE> </HEAD> <BODY> <H2> Active Template Library</H2> <P>The Active Template Library<SPAN STYLE="background: white"> (ATL)</SPAN>was created to simplify the programming of <SPAN STYLE="background: white"> COM objects</SPAN>. It includes a Custom AppWizard you can use to build a basic skeleton of COM server.When the OLE COM AppWizard option is selected in the Project Workspace, the dialog will be displayed</P>. </BODY> </HTML>INDEX1.HTM
<HTML> <IMG SRC="http://www.sample.com/f1.bmp"> </HMTL>INDEX2.HTM
<HTML> <IMG SRC="http://www.sample.com/f2.bmp"> </HTML>
Note that Listing F.1 is included on the CD.
In Listing F.1, the HTML tag indicates that this file is an HTML document.
The HEAD tag specifies the HTML document heading.
The TITLE tag specifies the HTML document title displayed in the browser's title bar.
FRAMESET defines the frame's layout in a page. The COLS attribute indicates that the page is divided into columns. In this example, the page is divided into two columns, showing two files f2.htm and f3.htm. ROWS can be used instead of COLS if the page is divided into rows. The 250 in "250, *" indicates that the first column is 250 pixels wide, * indicates "whatever is left over."
Besides using pixels to indicate the column width, the percentage of screen width can be used; for instance, instead of using "250, *", "25%, *" can be used. 25% means 25% of the screen width for the first column.
The FRAMEBORDER attribute provides an option to display or not to display the frame border. 1 means border, 0 means borderless. The default value for the FRAMEBORDER attribute is 1, which means the framesets have borders between the frames. If the FRAMEBORDER is set to 0, the framesets will have borderless frames with the frames right against each other. Borderless frames provide a seamless look for the page. The Borderless feature is only supported by IE 3.0.
The FRAMESPACING attribute indicates that there is an additional space between frames in pixels.
The FRAME tag defines a single frame in a frameset. The attribute NAME specifies a name for the frame. MARGINWIDTH specifies in pixels a margin width for the frame. MARGINHEIGHT specifies in pixels a margin height for the frame. The SCROLLING attribute indicates a scrolling frame. The SRC attribute specifies a source file for the frame. FRAME does not have a matching tag.
From Listing F.1, observant readers notice the following code:
<A HREF="index1.htm" TARGET="main">Step 1 of 2</A>
Tag A refers to Anchor. Attribute HREF refers to creating a hyperlink. TARGET specifies loading the link specified by HREF into the target window. In this case, the value of the target window is a frame named main. The value of the target window can also be _blank, _parent, _self, or _top. _blank refers to loading the link into a new blank window. _parent means loading the link into the parent of the document where the link is. self means loading the link into the window where the link is clicked. _top refers to loading the link into the full body of the window.
NOFRAMES tag indicates that the content between the beginning and its matching tag can be viewed by the browsers that do not support frames, whereas the content will be ignored by the browsers that do support frames. This tag can be used so that a page can be created for both types of browsers.
IE 3.0 also supports .BMP and animated .GIF images. The following code from Listing F.1 demonstrates how to use the IMG tag.
<IMG SRC="http://www.sample.com/f1.bmp">
Tag IMG indicates the insertion of a graphics file, which includes .BMP or .GIF. Attribute SRC indicates the URL where the graphic file locates.
Besides the border and borderless frames, floating frames are a new feature supported by IE 3.0.
Floating frames enables you to place any HTML page where an image can be placed in other browsers. Floating frames are a separate browser. Listing F.2 demonstrates how to create a floating frame.
Listing F.2. Floating frame (f4.htm)
<HTML> <BODY> <IFRAME WIDTH=300 HEIGHT=300 ALIGN=RIGHT HSPACE=20 VSPACE=20 SCROLLING=YES FRAMEBORDER=1 SRC="http://www.microsoft.com/vbscript"> <FRAME WIDTH=300 HEIGHT=300 ALIGN=RIGHT HSPACE=20 VSPACE=20 SCROLLING=YES FRAMEBORDER=1 SRC="http://www.microsoft.com/vbscript"> </BODY> </IFRAME>
This page will display a 300 by 300 pixel window on your page. You can see this on http://www.microsoft.com/vbscript page.
In Listing F.2, IFRAME tag specifies the floating frame. Attribute WIDTH indicates the window width in pixels. HEIGHT indicates the window height in pixels. ALIGN the window to left or right. SCROLLING specifies whether the window has scroll bars. FRAMEBORDER indicates whether the window has a border.
Style Sheet is another new feature supported by IE 3.0. By using this feature, layout and formatting information can be added to the Web page, such as specifying page margins, font size, and indent and line spacing. Figure F.1 shows the effect of Style Sheet.
From Listing F.1, notice the following code:
<STYLE> BODY {font: 11pt/12pt Arial; color: brown} P {font: 11pt/14pt Times; color: blue; text-indent: 0.25in; margin-right: 0.25in} H2 {font: 12pt Arial; color: Yellow} </STYLE>
Tag STYLE provides the custom rendering information, which overrides the client default style sheets.
P {font: 11pt/14pt Times; color: blue; text-indent: 0.25in; margin-right: 0.25in}
Attribute font groups the font-family, font-size, line-height, font-weight, and font-style together, as listed in Table F.1. The font-weight and font-style must be specified before other font attributes.
{font: 11pt/14pt Times; color: blue;
can be expanded into
P {font-family: Times; font-size: 11pt; line-height: 14pt};
The color attribute sets the named color, such as blue, red, or an RGB value. The text-indent attribute specifies text indentation in points, inches, pixels, or centimeters. 0.25in means the paragraph will be indented 0.25 of an inch from the left margin. The margin-right attribute sets the distance from the right edge of the page. Besides margin-right, there are other margin attributes such as margin-left and margin-top. margin-left sets the left edge of the page, whereas margin-top sets the top edge of the page. These three attributes can be combined into the margin attribute.
The following line is from f3.htm:
<SPAN STYLE="background: white">(ATL)</SPAN>
Tag SPAN indicates that the localized style information will be applied to the enclosed text. The STYLE attribute indicates the local style. The background attribute specifies a background color (white) to highlight the enclosed text (ATL). Besides specifying a background color, a background image can be specified with the following syntax:
{background: URL(http://www.sample.com/some.gif)}.
Note, the URL is placed between ().
For more information on Style Sheets, please refer to the Style Sheet Guide at http://www.microsoft.com/workshop/author/htmlhelp/.
IE 3.0 supports several new table features, such as background images placed in individual table cells, borders (rules) between rows or columns, or aligning text by a baseline.
The left frame in Figure F.1 gives an example of setting in individual table cells a blue background color.
Observant readers notice the following lines from Listing F.1:
<TABLE ALIGN=left CELLSPACING=5> <TR> <TD ALIGN=CENTER VALIGN=MIDDLE BGCOLOR=#ddddff WIDTH=130 HEIGHT=30> <A HREF="index1.htm" TARGET="main">Step 1 of 2</A> </TD> </TR>
In this code, tag TABLE indicates creation of a table. The ALIGN attribute specifies the table alignment; it could be left or right. The CELLSPACING attribute specifies in pixels the amount of space between the exterior of the table and the cells in the table.
Tag TR indicates creation of a row in a table.
Tag TD creates a cell in a table. The ALIGN attribute specifies the horizontal alignment of text in a cell. The default value is center. Its value can also be left or right. The VALIGN attribute specifies the vertical alignment of text in a cell. The default value is middle. Its value can also be top, bottom, and baseline. top means text is aligned with the top of each cell. button means text is aligned with the button of each cell. baseline means text in the same row in other cells is aligned along a common baseline. This is a new table feature supported by IE 3.0. The BGCOLOR attribute specifies a background color.
Besides setting the background color, the border between rows or columns can be specified by using
<TABLE RULES=ROWS>
or
<TABLE RULES=COLS>
One of the major features provided by IE 3.0 is to support the use of ActiveX controls. The OBJECT tag is defined to indicate the insertion of the control in a page. Listing F.3 demonstrates how to use the OBJECT tag.
Listing F.3. Stock ticker control (f5.htm).
<HTML> <OBJECT ID="stocktick" CLASSID="clsid:CB005660-D0C7-11cf-B7F6-00AA00A3F278" CODEBASE="http://207.68.151.220/investor.cab#ver%3d4,70,0,1115" ALIGN="baseline" BORDER="1" WIDTH="400" HEIGHT="34" TYPE="application/x-oleobject"> <PARAM NAME="NumLines" VALUE="2"> <PARAM NAME="InvestorURL" VALUE="http://investor.msn.com/"> <PARAM NAME="DataObjectActive" VALUE="1"> <PARAM NAME="ServerRoot" VALUE="http://investor.msn.com"> <PARAM NAME="Keywords" VALUE="http://www.msnbc.com/news/ticker.txt"> </OBJECT> </HTML>
In Listing F.3, OBJECT tag inserts an object into the HTML document. The object can be OLE controls, a Java Applet, or images and documents.
The ID attribute designates a name for this object.
CLASSID specifies the object implementation. For an OLE control, the CLSID of the control has to be provided. CB005660-D0C7-11cf-B7F6-00AA00A3F278 is the string representation of the CLSID associated with the control.
The CODEBASE attribute identifies the code base for this object. It includes an http address and the version number.
The ALIGN attribute sets the alignment of the object. The value can be baseline, center, left, middle, right, textbottom, textmiddle, and texttop.
The BORDER attribute specifies the width of the border. The WIDTH attribute specifies the width for the object. The HEIGHT attribute specifies the height of the object.
The TYPE attribute specifies the internet media type (MIME) for the data.
Tag PARAM sets the object's value. The NAME attribute specifies the property name exposed by the object. The VALUE attribute specifies the property value.
When f5.htm is viewed in the IE 3.0, the content in Figure F.4 will be displayed.