by Rick Tracewell
Less than a year ago, if anyone asked who the king of the Web browser universe was, there was no hesitation in the response: Netscape Communications's Navigator. You can imagine that the engineering team at Microsoft Corporation, the company that dominates almost every portion of the software industry worldwide, probably viewed this as a little bit of a challenge. Or, perhaps, they realized that they almost missed the Internet boat altogether by taking a laissez faire attitude toward this "new" medium. (Actually, they didn't have to realize it. Industry pundits and analyzers were printing it in periodicals all over the place.)
Fortunately for Microsoft, the company has deep pockets and good programmers who work very quickly. Consider this: There wasn't a devoted Internet division at Microsoft in December 1995, whereas in July 1996, the new Internet Platform & Tools Division boasted 2,500 employees (which is more than Netscape and six more new Internet companies combined).
Suddenly, Microsoft's Internet Explorer Web browser application has become a strong rival to Netscape's Navigator Web browser. Taking the path of vying for ease-of-use multimedia dominance over Navigator, Explorer implemented several HTML extensions that Netscape Navigator and other browsers do not support. Among them, the <BGSOUND> tag allows background sound to play behind the scenes on a Web page. The nice thing about this feature is that the user is not required to have any special sound playing applications, Internet Explorer plays the sound files right inside the browser.
Another Explorer-unique tag is <MARQUEE> (see "Multimedia: Audio, Video, Applications"). This upscale take on the old (and, to most people, extremely annoying) <BLINK> tag enables authors to create customized scrolling text anywhere on a Web page. Attributes give the options to change the marquee and text colors as well as change the direction and speed of the scrolling text. As with most moving objects on a Web page, using this tag sparingly is good advice in order to not scare visitors away.
For those gazillions of Windows users out there, Internet Explorer now recognizes bitmap graphic files (.bmp), the Windows graphic format of choice, as opposed to all other browsers that only support .gif and .jpg files. Also added to Internet Explorer 3.0 is the recognition of animated .gif files, which are built-in layers using an animated .gif utility. (Check the Web for the several very good freeware apps for both Windows and Macintosh.) The animated .gif files are displayed as the browser recognizes the layers and loads them in succession, which creates the animated effect.
Internet Explorer has also enhanced a few of Netscape's own inventions along the way, namely the <TABLE> and <FRAME> tags. With tables, Internet Explorer added some of its own attributes that allow designers to add color to individual table cells (see the "Tables" section), as well as allowing them to control the look and color of the borders in and around a table. Now, with Internet Explorer version 3.0, Microsoft is reaching even further to widen the gap between Internet Explorer and Navigator, starting with frames. Explorer didn't just stop at the standard frame tags and attributes that were already in place. Instead, Microsoft created "floating" frames (see the "Frames and Floating Frames" section of this chapter).
Internet Explorer's new style sheets (an HTML 3.2 proposal) are a powerful way of adding text and paragraph formatting to HTML pages. Using style sheets, authors can specify font sizes in points, set margins and indents, and change link colors, which are then propagated throughout one Web page, sections of a Web page, or an entire Web site (see Figure 28.1).
Figure 28.1 : A display of different fonts and indentations of text.
The good news resulting from Microsoft and Netscape battling each other is that those of us who design and author Web pages end up winning in the end. I, for one, am very happy that there are two quality Web browsers on the market. The only tough part is keeping up on which browser supports which extension and creating work-arounds for the browser that doesn't support the other's tag. That is why this chapter helps you-maybe for the first time-to have a good list of Microsoft's Internet Explorer-only HTML extensions and proposed HTML extensions for the latest version 3.0.
This chapter describes Microsoft Internet Explorer-only tags and
attributes-not all of the tags it supports. Therefore,
in order to fully design sites using these tags and the rest of
the common HTML tags, you should also see Chapter 25, "HyperText
Markup Language (HTML)."
| NOTE |
HTML tags are not case-sensitive. I prefer to use uppercase in my programming, so that is what I used in this chapter. |
<BODY> : </BODY>
The <BODY> tag surrounds all HTML tags within the body of the document. You place the <BODY> tag just beneath the <HTML> tag, and you place the </BODY> tag just above </HTML> at the end of a document. Any changes to the background, text colors, and the margins of the document (for Internet Explorer attributes) are specified within the <BODY> tag.
The BGPROPERTIES attribute can only be used in conjunction with the BACKGROUND tag, and it has only one value: FIXED. Basically, this attribute holds the background graphic so that it does not scroll down with the rest of the content.
The BGSOUND tag enables a Web designer to play a sound file (music, voice, sound effect, and so on) without the visitor having to actually click on anything. The sound file loads last (after graphics and text) and immediately starts playing. The available attributes are as follows:
<BODY BGSOUND= LOOP=>
The LOOP attribute defines the number of times the sound file is to play, as in the following example:
LOOP="2"
To make the sound file play continuously, use this command:
LOOP="infinite"
One of the drawbacks to early HTML is the limitation on font usage and control of text (that is, margin settings and so on). Although there have been many advances in this area in recent times, Internet Explorer 3.0 has taken the first major step to provide solutions for Web designers. The <STYLE> tag and its attributes enable the author to specify fonts (more than one so that the browser scans the user's system and finds one that is loaded), margin sizes, indents, and more.
The Style Sheets tag is a proposed HTML 3.2 tag that enables the
author to change font sizes in points, set margins, change link
colors, and more-all within a section of a document, on the whole
Web page, or throughout an entire document by linking to an external
style sheet (see the section, "Using an External <STYLE>
Sheet").
| NOTE |
Unlike most HTML tags, the <STYLE> tag places its attributes within the beginning and ending tags rather than <STYLE=attribute>, like this: <STYLE> The preceding code specifies that the <H1> : </H1> tag should be displayed in Arial bold 14 point, and the <P> tag should display paragraph text as Arial 10 point |
Here is the attribute format to be used within the <STYLE> tags:
P {font: 14pt Helvetica; text-indent: 1in}
First is the tag. (Notice that there are no brackets < around the tag.) The tag is followed by the attributes in brackets ({). To apply more than one attribute, you simply use a semicolon.
The available attributes for the STYLE tag are as follows:
font:
This attribute specifies font attributes such as bold, italic, font size/font leading, and list of font names.
This attribute sets many font properties within the same attribute tag. You can specify more than one font, separated by commas. If the first font is not available, the next one will be tried, and so on until a font is found on the visitor's machine. Here are examples:
font: 12pt Arial font: italic 12pt "Arial,Helvetica"
font-family:
This attribute chooses which font family should be used to display paragraph text. As for the previous attribute, you can specify a list of font names separated by commas. Here is an example:
font-family: Times New Roman
font-size:
This attribute enables you to select font sizes in four different integers: inches (in), centimeters (cm), pixels (px), or the most popular, points (pt). Here are examples:
font-size: 14pt
or
font-size: 5px
font-weight:
This attribute is not for weight in pounds. The only two values at this time are bold and normal.
font-style:
For this attribute, italic is the only value currently supported.
text-decoration:
This attribute sets text decoration. Values include none, underline, italic, or line-through. Here is an example:
text-decoration: underline
| TIP |
This attribute can be useful if you want to turn off link underlining: Simply set text-decoration to none. |
background:
This attribute sets a color or image behind text to highlight it. Values are RGB codes (#FFFFFF), color names (WHITE), or a URL (/images/background.gif). Here are examples:
background: GRAY
or
background: "/images/background.gif"
margin-left: and margin-right:
These attributes set the left and right margins. As with the previous attributes, values can be in inches (in), centimeters (cm), or pixels (px). Here are examples:
margin-left: 1in margin-right: 25px
text-align:
This attribute is pretty straightforward. It uses the values left, right, and center.
text-indent:
This attribute enables the author to indent a block of text using the common integers used by previous attributes (inches, centimeters, and pixels). Here is an example:
text-indent: .025in
<SPAN> : </SPAN>
Another way to change text within an area of a document is to use this attribute. Span doesn't really do anything itself; it simply specifies a select area of text, like this:
<SPAN STYLE="text-indent: .5in">
| NOTE |
The STYLE tag can also be used within paragraph tags, like this: <P STYLE="font-size:32pt> The paragraph within these beginning and ending tags will be displayed in 32 point type.</P> |
To use attributes within the <STYLE> tags for an entire HTML page, the <STYLE> tags and attributes must be placed after the <HTML> tag but before the <BODY> tag, like this:
<HTML>
<HEAD><TITLE>My web page!</TITLE></HEAD>
<STYLE>
BODY {background: white; color: blue}
H1 {font: 16pt Futura bold}
A {text-decoration: none; color: red}
</STYLE>
<BODY>
If you want to have a specific <STYLE> sheet for an entire Web site and you don't want to have to place the attributes on every page, here's the answer.
You need to create a text file with the extension .css and have it include only the attributes that normally go between the <STYLE> tags, such as these:
BODY {background: white; color: blue}
H1 {font: 16pt Futura bold}
A {text-decoration: none; color: red}
Then, within the <HEAD> tags of all of the documents that you want to have the style sheet attributes, place the link to your new style sheet, like this:
<HTML> <HEAD> <TITLE>My web page!</TITLE> <LINK REL=STYLE TYPE="text/css" SRC="/styles/style1.css"> </HEAD> <BODY>
The FACE attribute enables you to actually specify a font from the machine on which the browser is installed. The author can actually select several fonts separated by commas. This is an Internet Explorer-only tag. Here is an example:
<FONT FACE="Times, Futura, Friz Quadrata>TNT Media</FONT>
If the user's machine does not have any of the fonts installed,
the browser simply displays TNT Media in the default
font as set in the user's browser preferences.
| NOTE |
One of the good things about using the <FONT> tag or the font-family: and font: attributes is that they are safe to use. This is true because they enable you to choose several fonts. Therefore, if the first font isn't available on the visitor's machine, the machine chooses the next one, and so on. If none of the fonts are available, the machine ignores the tag or attribute altogether and uses the visitor's browser's default font. So, you can only win by utilizing these features. Your design will succeed either way without showing an error or broken page |
The simple example in the following HTML code shows the different font (Arial) and the indentation of text (.05 inches) for the display shown in Figure 28.1:
<HTML>
<HEAD><TITLE>Figure 28.1</TITLE></HEAD>
<STYLE>
BODY {background: white; color: black}
H1 {font: 24pt Arial bold}
P {font: 14pt Arial; text-indent: .05in}
A {text-decoration: none; color: red}
</STYLE>
<BODY>
<P>The body text is indented .05 inch and is displayed in 14pt Arial.
<CENTER>
<H1>Here's a headline in 18-point Arial bold!</H1>
<P><A HREF="http://www.tntmedia.com">Check out our web site!</A>
</CENTER>
<P>Notice that the above link is not underlined because text-decoration was set
to "none" (unless you have your browser's preference set to
"no underlined links").</P>
</BODY>
</HTML>
Previously, to specify a color value, you either had to have a
chart of HTML-supported color tags (Pantone's RGB values) or you
had to keep running to an HTML resource Web site to find the correct
values. All of that has now changed because Explorer uses color
names instead of the code values. Although Netscape Navigator
currently supports the color names in Table 28.1 (and close to
three dozen more), the list reflects Internet Explorer-only supported
names as specified at the time of this writing so that if you
are authoring Web sites specifically for Internet Explorer users,
your colors will be correctly displayed.
| Microsoft Internet Explorer supported color values | |
| aqua | black |
| blue | fuchsia |
| gray | green |
| lime | maroon |
| navy | olive |
| purple | red |
| silver | teal |
| yellow | white |
When tables were introduced to HTML in 1995, it revolutionized the way text and graphics are displayed on Web pages. Before tables, there was very little anyone could do to constrain blocks of text in a readable format. Microsoft Internet Explorer 3.0 has taken over the table feature where Netscape Navigator left off. Changing the look of a table by manipulating the borders and colorizing individual cells or rows of cells has really enhanced this HTML tag.
These Internet Explorer-only attributes give the Web author more control over how a user views the information within a table. With these attributes, an author can decide to highlight a certain cell to make a point by adding a color background behind that individual cell. Or an author can decide to make the tables on a page stand out from the rest by adding a background graphic behind the entire table. With these new attributes, you'll certainly find some new ideas to enhance your Web site.
<TABLE BGCOLOR=>
This attribute enables you to make the table background color different from the background of the rest of the HTML document. As with other color attributes, the value is either RGB codes or color names (refer to Table 28.1). Individual table cells can be changed even from the table background color by adding the BGCOLOR attribute to the individual cell.
<TABLE BACKGROUND=>
With Internet Explorer 3.0, authors can now place a graphic behind an entire table for a very unique effect. Just as with the BACKGROUND attribute in the <BODY> tag, you simply point to the URL of the graphic, like this:
<TABLE BACKGROUND="images/bg-graphic.jpg">
<TABLE RULES=ROWS>
Use this attribute if you want borders only between the table rows. For borders only between the columns, use RULES=COLS. To create a table with no borders inside the rows and columns (the BORDER= attribute still defines the outside border), use RULES=NONE.
<TABLE BORDERCOLOR= BORDERCOLORLIGHT= BORDERDARK=>
These attributes enable you to change the color of the border surrounding the table. Again, the values are in RGB code or color names (refer to Table 28.1). BORDERCOLOR shades the middle part of the border, and BORDERCOLORLIGHT and BORDERCOLORDARK give the border a 3-D effect.
<TABLE VALIGN=>
This attribute sets the vertical alignment of text within its
cell for the whole table. Values are TOP, BOTTOM,
and MIDDLE.
| NOTE |
Because the <TR> and <TD> tags use the same attributes, I decided to avoid confusion by showing examples using only the <TD> tags. Again, all of these attributes can be used with the <TR> tag as well. |
Table Data (<TD>) and Table Rows (<TR>) are simple tags, yet they can be used to really enhance information that is displayed in tables. The following attributes for Internet Explorer show that Microsoft has taken tables to another level so that you, the author, can design a table much as you would design a Web site (you can decide how you want it to look). Until these attributes were introduced in 1996, authors were stuck with simple, boring tables. Now, you can add color and boldness to your information.
<TD BGCOLOR=>
As described previously, this attribute sets the color of the cells within the current row. Values are RGB code and color names.
<TD VALIGN=BASELINE>
This attribute is used to align the baselines of different font sizes of text in a table.
<TD BACKGROUND=>
As with the <TABLE> attribute, you can use this attribute to place a graphic behind an individual cell.
<TD BORDERCOLOR= BORDERCOLORLIGHT= BORDERCOLORDARK=>
These attributes enable you to change the color of the border of the cells in the current row. Again, the values are in RGB code or color names (refer to Table 28.1). BORDERCOLOR shades the middle part of the border, and BORDERCOLORLIGHT and BORDERCOLORDARK give the border a 3-D effect.
Microsoft's Internet Explorer used to play catch-up to Netscape's Navigator. With the release of Internet Explorer 3.0, however, it has taken a leap ahead of Navigator in the area of multimedia. Some of the features that these tags represent can be used when you are authoring for Navigator, but the tags for them are cryptic and often require plug-ins and knowledge of Java or other programming languages. Internet Explorer has given authors easy-to-use tags that simply make adding multimedia to their Web pages much easier.
The <BGSOUND> tag allows browsers using Internet
Explorer to hear audio clips in the background while viewing a
Web document. Because no file needs to be downloaded and separately
played (all of this is done behind the scenes within Internet
Explorer), this command makes it quick and easy to add a voice
greeting or a pleasant musical intro to your site. All other browsers
simply ignore this tag, so it will not cause any problems when
someone using another browser visits it.
| TIP |
It is easy to go overboard with this tag. Many times, depending on the speed of the visitor's modem, the Web page will not fully load until the audio file is completely downloaded. So, naturally, if someone is using a slow Internet connection, the wait can be extremely frustrating. Find a good audio editing application and edit the sound file (both in length and in frequency) until it is a more reasonable file size. |
The <BGSOUND> tag has the following attributes:
<BGSOUND SRC=>
This is a required attribute for the <BGSOUND> tag. As with other SRC attributes, this specifies the URL of the sound file. Only three different types of sound files are supported: .wav, .au, and MIDI files.
<BGSOUND LOOP=>
This attribute specifies the amount of times that the sound file is played. The two optional values are a numerical value
<BGSOUND SRC="/audio/soundfile.wav" LOOP="8">
or
<BGSOUND SRC="/audio/soundfile.wav" LOOP="INFINITE">
The "INFINITE" value makes the sound file loop continuously as long as the page is loaded on the screen.
This tag creates text that scrolls across the screen. <MARQUEE> is very similar to the JavaScript effect in which the text scrolls at the bottom of the browser frame, but with <MARQUEE> you have much more control over where on the page the action takes place, as well as other advantages discussed under the following attributes. The available attributes are as follows:
<MARQUEE ALIGN=>
The <MARQUEE> tag is treated as an image, so this attribute allows text to flow around it. It accepts the values TOP, MIDDLE, and BOTTOM.
<MARQUEE BEHAVIOR=>
In order to control the direction, style, and duration of the text, you need the BEHAVIOR attribute. It accepts the following values: SCROLL, which makes the text come in from one side or the other and is specified with the DIRECTION attribute; SLIDE, which causes the marquee to start with an empty box in which the text stops so that it is visible; and ALTERNATE, which causes the text to start fully visible in the box and reverse when it reaches the end of the box.
<MARQUEE DIRECTION=>
This sets the direction in which the text flows onto the screen. The values are LEFT (default) and RIGHT.
<MARQUEE LOOP=>
As with the LOOP attribute in <BGSOUND>, this attribute defines how many times the marquee is shown. Again, the values are either numerical (1, 2, 3, and so on) or INFINITE for never-ending repetition.
<MARQUEE BGCOLOR=>
As with all other BGCOLOR attributes, this allows the specification of the background color in the marquee box. Accepted values are RGB code (#FFFFFF) or color names.
<MARQUEE HEIGHT= WIDTH=>
These attributes determine the size of the marquee box. If these attributes are not used, the marquee box will extend the entire width of the browser display window and be just tall enough to enclose the height of the text. Values are either in pixels (200) or percentage of the browser display window (50%).
<MARQUEE HSPACE= VSPACE=>
These attributes allow space between the marquee and the surrounding text. Values are given in pixels, like this:
<MARQUEE HSPACE="5" VSPACE="5">
This would create a 5-pixel space around the marquee.
<MARQUEE SCROLLAMOUNT= SROLLDELAY=>
Use these attributes for controlling the smoothness or quickness of the marquee text. SCROLLAMOUNT values are given in pixels, with lower numbers creating slow but smooth movement and larger numbers creating fast and jerky motion.
SCROLLDELAY specifies the number of milliseconds in which the text waits between successive scrolling. Larger numbers create slower delays, and lower numbers make quicker movements.
Because it's difficult to show scrolling text in a figure, I opted to at least show you what a colored (BGCOLOR=) marquee box would look like with this sample code:
<HTML> <HEAD><TITLE>Figure 28.2</TITLE></HEAD> <BODY BGCOLOR="BLUE"> <CENTER> <PRE> </PRE> <MARQUEE BEHAVIOR=SLIDE LOOP=1 WIDTH=60% BGCOLOR=WHITE>This is a MARQUEE with the background color white.</MARQUEE> </CENTER> </BODY> </HTML>
Notice in the preceding HTML code that I specified the width as 60 percent of the browser window, but I did not specify the height. This caused the marquee box to simply be as tall as the text. (See Figure 28.2.)
Figure 28.2 : A sample marquee box.
Again, as with the Table feature, Internet Explorer has enhanced this Netscape invention to give the author more control over the way his Web design is viewed. Frames enable the visitor to link to other sites and or other pages while the "framework" of the current site (usually in the form of navigation buttons or logos) remains around the viewing area. This is a very powerful tool for authors who want to give the visitor freedom to link elsewhere, yet don't want to lose the visitor to "Web surfing."
This tag specifies the area of an individual frame (which displays an individual HTML page inside it). Creative authoring can provide a site with some interesting combinations of frames that give the visitor freedom to navigate throughout the site while keeping the navigating tools at hand at all times.
<FRAMESET FRAMESPACING=>
This attribute enables you to create spacing borders (in pixels)
between frames.
| TIP |
Use the value 0 to delete the 3-D looking borders between frames, creating a seamless look to your frame document, like this: <FRAMESET FRAMEBORDER="0" FRAMESPACING="0" |
<IFRAME>
This new Explorer 3.0 tag creates a "floating" window (frame) into which you place a URL (Web page address). Although this looks like a separate Web browser-like window, the tag actually launches a separate small (depending on the size attributes) browser window that allows the visitor to link to other sites within this window just like the full-size browser window that is open beneath it.
Don't let the name fool you, though. The name, floating frames, makes it sound like you can move the box around-but you can't. Rather, the floating pertains to the fact that you can place this mini-browser window anywhere in your document (similar to placing a graphic) in order to show an example, link to another site, and so on.
This tag must be placed within the <BODY> and </BODY> tags. Most of the common frame attributes apply to this tag as well (such as VALIGN, VSPACE, SCROLLING, and so on), although many features and rules will be in place when the final version of Internet Explorer 3.0 is released. (At the time of this writing, it is still in beta testing.)
For example, the following tag and attributes create a 250´250 pixel floating frame:
<IFRAME WIDTH=250 HEIGHT=250 SRC="float.html">
You can also use percentage values to create a floating frame that is in relation to the current Explorer window, as follows:
<IFRAME WIDTH=60% HEIGHT=60% SRC="float.html">
| TIP |
If you want the Web page that appears in the floating frame to be aligned with the top and left side of the floating frame, use this attribute in the <BODY> tag of the Web page inside the floating frame: <BODY TOPMARGIN=0 LEFTMARGIN=0> If you want a 5-pixel space between the top and left sides of the floating frame, do this: <BODY TOPMARGIN=5 LEFTMARGIN=5 |
The following HTML code places a simple 500´300 pixel floating frame on a page. You'll notice that there is an extra frame tag within the <IFRAME> and </IFRAME> tags. Microsoft recommends this when used within a <FRAME> document so that Internet Explorer 2.0 users will be able to view the frame.
<HTML> <HEAD><TITLE>Figure 28.3</TITLE></HEAD> <BODY BGCOLOR="WHITE"> <CENTER> <P><FONT SIZE=5>Here's a floating frame! <IFRAME WIDTH=500 HEIGHT=300 SRC="http://www.tntmedia.com/"> <FRAME WIDTH=500 HEIGHT=300 SRC="http://www.tntmedia.com/"> </IFRAME> </CENTER> </BODY> </HTML>
In this example, you can see that there is actually another little browser window embedded into the Web page (see Figure 28.3). Notice the scrollbar on the left side. When writing the HTML code, keep in mind the pixel width and height. If the page you are pointing to is larger than the area you have specified, you will have scrollbars on the right and bottom of the floating frame, showing only the upper-left portion of the page within the frame.
Figure 28.3 : An example of a floating frame.
Overall, these new Internet Explorer features and enhancements are very encouraging. Instead of trying to outdo Netscape's Navigator, Microsoft obviously listened to Web authors and added to what was already there rather than reinventing the wheel.
The easy-to-use multimedia tags are sure to catch on with Web authors of all skill levels because they are easier to implement than programming Java or other cryptic languages.
As the browser wars continue, it seems that Web authors will certainly have to keep on their toes and watch for the latest features. From the information you learned in this chapter, you can probably see that multimedia, whether it be audio, video, or floating frames, is dominating the Web at a fast clip. Make sure that you aren't left behind by learning which browser recognizes the new tags and more important, what happens when someone visits using another browser that doesn't support the new tags. The one thing you don't want to do is alienate someone from your site just because he isn't using your favorite browser.
Keep that in mind, make sure you accommodate everyone you can, and you should have no trouble designing world-class Web sites.