by Eric Ladd
Not to be outdone by Netscape, Microsoft has introduced its own browser-specific extensions to HTML. Like Netscape, Microsoft has submitted most of these extensions to the World Wide Web Consortium for consideration in future versions of the HTML standard. Don't be too surprised if you see some of the tags and attributes in this chapter showing up as standard HTML in later versions of this book.
In the meantime, if you're designing pages for visitors that are
primarily using Internet Explorer 3, you can make use of the HTML
extensions discussed in this chapter to enrich your pages and
your audience's experience.
| NOTE |
While it has generated a number of extensions to HTML, Microsoft professes to recognize the importance of an open and uniform HTML standard. As part of its commitment to this, Microsoft has agreed to: To read the full text of Microsoft's statement, direct your browser to http://www.microsoft.com/internet/html.htm |
You can have a background sound play while your Web pages are open by using the <BGSOUND> tag in your document. <BGSOUND> takes the SRC attribute, which is set equal to the URL of a file containing the sound. The file can be in .Wav, .Au, or .Mid (MIDI) format.
<BGSOUND> also takes the LOOP attribute, which lets you specify how many times to play the sound. LOOP can be set to a specific number of times to repeat the sound or to INFINITE to play the sound as long as the page is open. For example:
<BGSOUND SRC="greeting.wav" LOOP=3>
prompts Internet Explorer to deliver your greeting three times when the page is opened. The following HTML:
<BGSOUND SRC="greeting.wav" LOOP=INFINITE>
causes Internet Explorer to deliver your greeting as long as the
page is open.
| TIP |
Keep your sound files small. Large sound files can take a long time to download-users may be off your page before the sound has finished downloading. |
| CAUTION |
Watch out for the "It's A Small World After All" effect. By looping a sound infinitely, it will play as long as the page is open. Users who find this annoying-just like some do with the famous ride at Disney World-are less likely to visit your pages again in the future. |
You can use an image as the background of your documents by using the BACKGROUND attribute of the <BODY> tag. BACKGROUND is set equal to the URL of the image to be used. If the image is not big enough to fit the entire screen, it will be tiled (both horizontally and vertically) to fill the available space.
If you use the BACKGROUND attribute of the <BODY> tag to tile a graphic as your document background, the background scrolls as you scroll through the document. Internet Explorer gives you greater control over scrolling by supporting a BGPROPERTIES attribute. If you set BGPROPERTIES to FIXED, the background image will not scroll as you move through the document, creating a "watermark" effect. Figures 16.1 and 16.2 show a page with a watermarked background image.
Figure 16.1 : A tiled background image can give a page a rich, textured look.
Internet Explorer supports the LEFTMARGIN and TOPMARGIN attributes of the <BODY> tag. You can set either one to the number of pixels of white space you want Internet Explorer to leave along the left and top edges of the browser window. Adding some space at the margins often enhances the readability of your documents (see Figure 16.3).
| NOTE |
You can set both LEFTMARGIN and TOPMARGIN to 0 to bring both margins right to the edge of the Internet Explorer window. |
Internet Explorer 3 supports all of the usual attributes having to do with color (BGCOLOR, LINK, VLINK, and ALINK), plus a few others that are often useful. Specifically, with Internet Explorer 3, you can paint table borders, table cells, and horizontal rule with the color of your choice.
In the <TABLE> tag, you can specify the BORDERCOLOR attribute to control which color Internet Explorer uses when rendering table borders. BORDERCOLOR should be set equal to the hexadecimal RGB triplet or an English language color name that describes the desired color.
BORDERCOLOR is useful when rendering a table on a light background. Often, there is not a sharp contrast between the background and the table border when the background is white or a light shade of gray. By darkening the border, you create greater contrast and make the table easier to read (see Figure 16.4).
If you want to use the shaded rule to achieve a three-dimensional
effect, then you can control the two colors used to create the
shading with BORDERCOLORDARK and BORDERCOLORLIGHT.
Each can be set to an RGB hexadecimal triplet or to an English
language color name.
| NOTE |
You can use the BORDERCOLOR, BORDERCOLORDARK, and BORDERCOLORLIGHT attributes in <TD>, <TH>, and <TR> tags as well as in the <TABLE> tag. |
You can also use the BGCOLOR attribute in a <TABLE>, <TD>, <TH>, or <TR> tag to change the background color of a table, table cell, or table row, respectively. BGCOLOR is also set equal to a hexadecimal RGB triplet or an English language color name.
Microsoft makes good use of colored table cells on its site. By turning off the borders in the table, the cell looks like a colored, rectangular block floating on the page (see Figure 16.5), and content in the floating block stands out nicely.
| CAUTION |
Be careful about coloring each of your table cells with different colors. Depending on the combination of colors you use, this can be very harsh on a reader's eyes. |
Microsoft added the COLOR attribute to the <HR> tag to give HTML authors control over the color in which horizontal rule is rendered. You can set color equal to any RGB hexadecimal triplet or one of the English language color names approved in HTML 3.2.
Being able to color rule helps with contrast in much the same way that BORDERCOLOR does. The default rule has shading behind it, making it difficult to see on light backgrounds. The NOSHADE attribute helps with this somewhat, but the color of the rule may still not mesh well with the color scheme of the page. By using NOSHADE and COLOR together, you can get a solid line in whatever color you choose. Figure 16.6 illustrates the differences between a rule that is shaded, nonshaded, and nonshaded color and with a color change, against a white background.
Figure 16.6 : Removing the shading and changing its color makes horizontal rule stand out better.
Microsoft has added several tags to the set of table tags that allow you to split tables into logical sections control alignment properties of columns of data, and control data row alignment properties.
The <THEAD>, <TBODY>, and <TFOOT> container tags denote the start of a table header, body, and footer, respectively. By explicitly distinguishing the different parts of your table, you're better able to control how column attributes are applied.
<THEAD> contains the rows that comprise the table
header and <TFOOT> contains the rows that comprise
the footer. In the absence of <THEAD> and <TFOOT>
tags, the <TBODY> tag becomes optional. You can
use multiple <TBODY> tags in long tables to make
smaller, more manageable chunks.
| NOTE |
All three tags are only valid between the <TABLE> and </TABLE> tags. |
A typical table done with these tags might look like:
<TABLE>
<THEAD>
<TR>
...
</TR>
</THEAD>
<TBODY>
<TR>
...
</TR>
<TR>
...
</TR>
...
<TR>
...
</TR>
</TBODY>
<TFOOT>
<TR>
...
</TR>
</TFOOT>
</TABLE>
| NOTE |
According to Microsoft, use of the </THEAD>, </TBODY>, and </TFOOT> tags is optional. |
Used in conjunction with the column grouping tags discussed in the next section, the table section tags are an ideal way to control how different properties are applied to different parts of a table.
The <TR> tag supports attributes that allow you to specify all sorts of properties for an entire row of a table. In particular, you get very good control over both horizontal and vertical alignment with the ALIGN and VALIGN attributes. Microsoft has taken this a step further by making it possible to apply horizontal alignment properties to columns of data as well as rows.
You have two options when applying alignment properties to columns. The <COLGROUP> tag is appropriate when applying properties over several columns. It takes the attributes ALIGN, which can be set to LEFT, CENTER, or RIGHT, and SPAN, which is set to the number of consecutive columns that the properties apply to. In the following example:
<TABLE>
<COLGROUP ALIGN=RIGHT SPAN=2>
<COLGROUP ALIGN=CENTER>
<COLGROUP ALIGN=LEFT SPAN=3>
<TBODY>
<TR>
<TD>First column group, right aligned</TD>
<TD>First column group, right aligned</TD>
<TD>Second column group, center aligned</TD>
<TD>Third column group, left aligned</TD>
<TD>Third column group, left aligned</TD>
<TD>Third column group, left aligned</TD>
</TR>
</TBODY>
</TABLE>
the six columns are split into three groups. The first two columns have table entries right aligned, the third column's entries are centered, and the last three columns have entries left aligned.
If columns in a group are to have differing properties, you can use <COLGROUP> to set up the group and then specify the individual properties with the <COL> tag. <COL> takes the same attributes as <COLGROUP>, but these attributes only apply to a subset of the columns in a group. For example, the HTML:
<TABLE>
<COLGROUP>
<COL ALIGN=CENTER>
<COL ALIGN=RIGHT>
<COLGROUP>
<COL ALIGN=CENTER SPAN=2>
<TBODY>
<TR>
<TD>First column in first group, center aligned</TD>
<TD>Second column in first group, right aligned</TD>
<TD>First column in second group, center aligned</TD>
<TD>Second column in second group, center aligned</TD>
</TR>
</TBODY>
</TABLE>
splits the four columns of the table into two groups of two columns
each. The first group's columns use center and right alignments,
while both columns in the second group use center alignment.
| NOTE |
Microsoft says that </COLGROUP> and </COL> closing tags are not required. However, you may want to use them for their organizational value. |
Microsoft adds two other new attributes to the <TABLE>
tag that let you control inner and outer borders of a table. Inner
borders are controlled by the RULES attribute. You can
think of inner borders as the dividing lines between certain components
of the table. RULES can take on the values shown in Table
16.1.
| Value | Purpose |
| ALL | Display a border between all rows and columns |
| COLS | Display a border between all columns |
| GROUPS | Display a border between all logical groups (as defined by the <THEAD>, <TBODY>, <TFOOT>, and <COLGROUP> tags) |
| NONE | Suppress all inner borders |
| ROWS | Display a border between all table rows |
The FRAMES attribute controls which sides of the outer
borders are displayed. In the context of tables, FRAME
refers to the outer perimeter of the entire table and not frames
like those discussed in Chapter 13, "Frames." FRAME
can take on the values summarized in Table 16.2.
| Value | Purpose |
| ABOVE | Displays a border on the top of a table frame |
| BELOW | Displays a border at the bottom of a table frame |
| BORDER | Displays a border on all four sides of a table frame |
| BOX | Same as BORDER |
| HSIDES | Displays a border on the left and right sides of a table frame |
| LHS | Displays a border on the left-hand side of a table frame |
| RHS | Displays a border on the right-hand side of a table frame |
| VSIDES | Displays a border at the top and bottom of a table frame |
| VOID | Suppresses the display of all table frame borders |
AVI, short for Audio Video Interleave, is the video format Microsoft has designed for use on Windows platforms. For this reason, it is also referred to as Video for Windows. AVI ranks right up there with QuickTime and MPEG as a popular video format for World Wide Web sites.
Microsoft has greatly extended the <IMG> tag to
provide exceptional support of inline video clips and VRML worlds
stored in the AVI format. The extended attributes are shown in
Table 16.3.
| Attribute | Purpose |
| DYNSRC="url" | Specifies the URL of the AVI file containing the video clip |
| CONTROLS | Places a control panel in the browser window so the user can control the playing of the clip |
| START=FILEOPEN | MOUSEOVER | Specifies when to start the video clip |
| LOOP=n | INFINITE | Controls how many times the clip is repeated |
| LOOPDELAY=n | Specifies how many milliseconds to wait before repeating the clip |
For example, the following HTML tag:
<IMG DYNSRC="leno.avi" CONTROLS START=FILEOPEN LOOP=2>
instructs Internet Explorer to play the clip stored in leno.avi two times when the file is opened. A control panel will be present while the clip is playing, so that the user may stop, rewind, or fast-forward (see Figure 16.7).
| TIP |
You can set START both FILEOPEN and MOUSEOVER together (START=FILEOPEN,MOUSEOVER). This configuration will play the clip once when the file is opened, and once each time the mouse is moved over the clip window. |
| Displaying All Video Formats Inline with ActiveMovie |
Microsoft unveiled its ActiveMovie technology along with the second beta release of Internet Explorer 3. Once installed, ActiveMovie enables Internet Explorer to display all three major Web video formats-QuickTime, MPEG, and AVI-inline. This spares the user from having to install helper applications for each format and makes viewing Web video much more convenient (except for the long download times). In addition to the major video formats, ActiveMovie also supports the major Web audio formats, including .Au, .Wav, MIDI (.Mid), and .Aiff. Microsoft expects ActiveMovie to become the video standard for both video and desktop applications. To learn more about ActiveMovie Technology, direct your browser to http://www.microsoft.com/imedia/. |
The <MARQUEE> and </MARQUEE> tag pair places a scrolling text marquee on your Web page. The text that scrolls is the text found between the two tags.
The <MARQUEE> tag can take a number of attributes
that give you very fine control over the appearance and behavior
of the marquee. These attributes are summarized in Table 16.4.
| Attribute | Purpose |
| BGCOLOR="RGB triplet" | Specifies the background color of the marquee window |
| BEHAVIOR=SCROLL |
SLIDE | ALTERNATE | Specifies how the text should move in the marquee window |
| DIRECTION=LEFT | RIGHT | Controls the direction in which the marquee text moves |
| SCROLLAMOUNT=n | Sets the number of pixels of space between successive presentations of marquee text |
| SCROLLDELAY=n | Sets the number of milliseconds to wait before repeating the marquee text |
| HEIGHT=pixels | percent | Specifies the height of the marquee window in either pixels or a percentage of the browser window height |
| WIDTH=pixels | percent | Specifies the width of the marquee window in either pixels or a percentage of the browser window width |
| HSPACE=n | Specifies how many pixels to make the left and right margins of the marquee window |
| VSPACE=n | Specifies how many pixels to make the top and bottom margins of the marquee window |
| LOOP=n | INFINITE | Controls how many times the marquee text should scroll |
| ALIGN=TOP | MIDDLE |BOTTOM | Specifies how text outside the marquee window should be aligned with the window |
Notice in Table 16.4 that many of the attributes are the same as for the <IMG> tag and that those attributes work in a similar way. HEIGHT and WIDTH define the dimensions of the marquee, HSPACE and VSPACE govern the space around the marquee, and ALIGN controls where subsequent text appears relative to the marquee window.
Of the remaining attributes, BEHAVIOR requires some explanation. Setting BEHAVIOR to SCROLL makes the marquee text scroll on, and then off, the marquee window in the direction specified by the DIRECTION attribute. If BEHAVIOR is set to SLIDE, the text will slide into the window and stay there. If BEHAVIOR is set to ALTERNATE, the text will bounce back and forth in the window.
Marquee text is a nice Web page effect that you can accomplish on other browsers only by using something more advanced, such as Java or Shockwave. Figure 16.8 shows some marquee text sliding onto a page.
Figure 16.8 : Marquees bring your pages to life by presenting text in motion.
Microsoft introduced the concept of a floating frame with Internet Explorer 3. You can think of a floating frame as a smaller browser window that you can open in your main browser window-much like the "picture-in-a-picture" feature that comes with many television sets. Just as with regular frames, you can load any HTML document you want into a floating frame. The primary difference is that floating frames can be placed anywhere on a page that you can place an image. In fact, you'll find the HTML syntax for placing floating frames to be very similar to that for placing an image.
You place a floating frame on a page by using the <IFRAME> and </IFRAME> tags. Internet Explorer will ignore anything between these two tags, allowing you to place an alternative to the floating frame (most likely text or an image) on the page as well. This way, browsers that don't know how to render floating frames can ignore the <IFRAME> and </IFRAME> tags and act on what is found between them. The <IFRAME> tag can take the attributes summarized in Table 16.5.
The <IFRAME> tag has three required attributes: WIDTH, HEIGHT, and SRC. WIDTH and HEIGHT specify the width and height of the floating frame in pixels or as a percentage of the browser screen's width and height. SRC tells the browser the URL of the document to load into the floating frame. Thus, your basic floating frame HTML looks like:
<IFRAME WIDTH=250 HEIGHT=112 SRC="http://www.your_firm.com/floating.html"> Text or image based alternative to the floating frame </IFRAME>
| Attribute | Purpose |
| ALIGN=LEFT | RIGHT | Floats the floating frame in the left or right margin |
| FRAMEBORDER=0 | 1 | Controls the presence of the beveled border around the floating frame |
| HEIGHT=pixels | percent | Specifies the height of the floating frame |
| HSPACE=n | Specifies how many pixels of white space to leave to the left and right of the floating frame |
| NAME="frame_name" | Gives the floating frame a unique name so it can be targeted by hyperlinks |
| SCROLLING=YES | NO | Controls the presence of scrollbars on the floating frame |
| SRC="url" | Specifies the URL of the document to load into the floating frame |
| VSPACE=n | Specifies how many pixels of white space to leave above and below the floating frame |
| WIDTH=pixels | percent | Specifies the width of the floating frame |
Figure 16.9 shows an example of a floating frame.
In addition to the three required attributes, the <IFRAME> tag takes several other attributes that give you good control over the floating frame's appearance. These include:
While not technically part of HTML, Microsoft has introduced HTML Layout Control as one of its ActiveX controls. The HTML Layout Control provides you with fully two-dimensional layout capabilities on a Web page, including the ability to
Previously, this type of functionality was only available by using programming language like Java or a Macromedia Director movie viewed with the Shockwave plug-in. HTML Layout Control makes all of this possible with little-to-no knowledge of programming required on your part.
The key to using HTML Layout Control is the ActiveX Control Pad, which provides a WYSIWYG environment for creating two-dimensional regions with these special effects (see Figure 16.10). Inside the Control Pad window, you can type ordinary HTML code, design a fixed layout region (see Figure 16.11), or embed either VBScript or JavaScript code with the Script Wizard (see Figure 16.12). All of these elements combine to produce Web pages with rich multimedia content that is highly interactive and positioned precisely where the author wants it
| NOTE |
To download the ActiveX Control Pad, direct your browser (presumably Internet Explorer) to http://www.microsoft.com/workshop/author/cpad/download.htm. |