Chapter 15
Using the Internet Explorer Extensions
CONTENTS
Netscape is the most popular of all Web browsers, but it's not
the only one out there. One browser that HTML authors need to
be particularly aware of is Microsoft's Internet Explorer.
Internet Explorer was introduced with Windows 95, and it comes
packaged with the Windows 95 Plus! pack. It is also available
for free from Microsoft's Web site at http://www.microsoft.com.
Internet Explorer is tightly integrated with Windows 95, and it
is the Web browser of choice for many Windows 95 users. For that
reason alone, HTML authors need to be familiar with Internet Explorer's
capabilities and limitations.
In this chapter, you'll learn about Internet Explorer's extensions
to HTML. In addition to its support for many of the Netscape extensions,
Internet Explorer adds many new tricks for HTML authors to use
in their documents. Among these are support for audio and video,
colors for tables, and typeface and color control for fonts.
One of the most versatile extensions to HTML is Internet Explorer's
ability to display exact typefaces. Whereas most browsers are
limited to the default typeface (usually Times New Roman), Internet
Explorer can display HTML text in any typeface you specify. The
only requirement is that the typeface must be installed on the
reader's system.
Internet Explorer also adds a number of additional formatting
extensions, including the ability to specify font colors and to
include watermarked, or nonscrolling, background images.
- When you specify a particular font name, it will only display
correctly if the end user has the exact same font installed. For
that reason, try to stick with the basic fonts that are included
with Windows.
- For more information on background images, refer back to Chapter
9, "Advanced Graphics Techniques."
Figure 15.1 :
- Open a new document in Notepad and type in the lines as shown
above.
Figure 15.2 :
- Internet Explorer allows you to specify an exact typeface
for text using the <FONT> tag and the FACE attribute. Type
<FONT FACE=""> wherever you'd like the
new formatting to begin in your document.
Figure 15.3 :
- Now you need to specify a list of font names, in order of
preference, inside the quotation marks. Internet Explorer will
use the first font in your list that is also installed on the
user's system. For example, to set the typeface to Arial with
a second choice of Lucida Sans, type Arial,Lucida Sans.
If none of the fonts in your list is installed on the user's system,
Internet Explorer will display the text in the user's default font.
Figure 15.4 :
- Internet Explorer can also display any selection of text in
a different color using the COLOR attribute inside the <FONT>
tag. The COLOR attribute is specified with an RGB hexadecimal
code, preceded by a pound sign. For example, to display text
in green, type COLOR=#008000 inside the <FONT> tag.
Then type This text is green after the <FONT> tag.
Finally, type </FONT> to mark the end of the font
effects.
Figure 15.5 :
- You can create a watermark image in your HTML document using
the <BODY> tag. A watermark is just like a background image,
except that it does not scroll with the rest of the document.
To create a watermark, type BACKGROUND= inside the <BODY>
tag, followed by the URL of the image in quotation marks. For
example, to include the image backlogo.gif as your background
image, type BACKGROUND="backlogo.gif".
Figure 15.6 :
- Next, add the attribute BGPROPERTIES=FIXED inside the
<BODY> tag. Now, when the user reads your document, the
background image is fixed in place and will not scroll.
Figure 15.7 :
- Internet Explorer allows you to set a left and top margin
for the document. Any HTML elements, except background images,
will be displayed within the confines of the margins you specify.
The margins are measured in pixels, and the default for both is
0.
- To change the left margin, place the cursor inside the <BODY>
tag and type LEFTMARGIN=, followed by a number. This represents
the number of pixels in the margin. To specify a top margin, type
TOPMARGIN=, followed by a pixel value. For example, to
set the top margin to 50 pixels and the left margin to 100 pixels,
type TOPMARGIN=50 LEFTMARGIN=100.
Figure 15.8 :
- Save your file in Notepad as explore.html, and leave it open
for the exercise in the next section.
Figure 15.9 :
Internet Explorer provides numerous extensions to the <IMG>
tag in HTML. Most notably, it supports the playing of AVI format
videos inside your HTML document. AVI is short for audio
video interleave, a common format for video on the
Microsoft Windows operating system.
Internet Explorer accomplishes this with the dynamic source attribute
(DYNSRC), which is placed inside the <IMG> tag. The video
playback is handled directly inside the Internet Explorer browser
window, so the video appears to be part of your document.
- Internet Explorer only supports AVI format videos. If you
have a video in another format, such as QuickTime, Internet Explorer
will not display it.
- You can use both FILEOPEN and MOUSEOVER together with the
START attribute. Typing START=MOUSEOVER,FILEOPEN will cause
the video to be played once when the HTML document is loaded,
and once every time the mouse cursor passes over the video clip.
- Keep your sound and video files as compact as possible. Internet
Explorer will need to load the entire sound or video file in order
to display it. This could take a very long time, especially with
a slow Internet connection.
Figure 15.10 :
- To insert an AVI video into your HTML document, use the <IMG>
tag with the DYNSRC attribute. For example, to insert an AVI video
named movie.avi, type <IMG DYNSRC="movie.avi">
anywhere inside the body section of your HTML document.
Figure 15.11 :
- You should also specify a still image, preferably a frame
from the video, using the SRC attribute. This still image will
be displayed in other browsers instead of the video. Add SRC=
to the image tag, followed by the URL of the still image in quotes.
Figure 15.12 :
- Placing the LOOP attribute inside the IMG tag allows you to
specify how many times the video clip should play. You can instruct
the browser to play the video a specific number of times, or to
loop infinitely. For example, to play the video for five complete
cycles, type LOOP=5 inside the <IMG> tag. To play
the video infinitely, type LOOP=INFINITE.
Figure 15.13 :
- You can also specify when the video should start playing by
using the START attribute inside the <IMG> tag. The video
can start either once the HTML document is loaded, or when the
user places the mouse cursor over the video. To start the video
as soon as the HTML document is open, type START=FILEOPEN.
To wait until the user places the cursor over the video image,
type START=MOUSEOVER.
Figure 15.14 :
- You can place a set of video playback controls underneath
your video clip by typing CONTROLS inside the <IMG>
tag. The controls allow the user to pause, fast forward, rewind,
and play the video clip.
Figure 15.15 :
- You can add sound to your document with the <BGSOUND>
tag, which can be placed anywhere inside the body section. You
can use digitized sound samples in .WAV or .AU format as well
as MIDI music files.
- The <BGSOUND> tag loads the file specified with the
SRC attribute. This sound is played as soon as the document is
loaded. For example, to play the sound file boom.wav, type <BGSOUND
SRC="boom.wav">.
Figure 15.16 :
- You can repeat the sound with the LOOP attribute, which works
the same way with sounds as it does with video clips. For example,
to play the boom.wav sound three times when the document is loaded,
type LOOP=3 inside the <BGSOUND> tag.
Figure 15.17 :
Sometimes you want to get a simple message across to your readers
and you want it to stand out from the rest of the document. Internet
Explorer lets you create flashy text messages with scrolling marquees.
Marquees work as electronic billboards. The text is animated and
it scrolls across the marquee, where it easily catches the eye.
You can control the speed, style, and direction of the text.
- Text marquees can be used for visual effect in your HTML document,
but the only browser that supports marquees is Internet Explorer.
Most other browsers will display the text, but it will not scroll,
so be careful with the length of your scrolling image.
- You can surround the <MARQUEE> tag pair with the <CENTER>
tag pair to center the marquee on the screen.
Figure 15.18 :
- To place a scrolling text marquee in your HTML document, type
<MARQUEE>, followed by the text and a closing </MARQUEE>
tag. This will cause the text inside the tag to scroll across
the screen. For example, to scroll the words Sale! 50% Off!,
type <MARQUEE>Sale! 50% Off</MARQUEE>.
Figure 15.19 :
- There are several attributes that you can add to the <MARQUEE>
tag that will allow you to control its appearance. First, you
can control the style of the marquee using the BEHAVIOR tag. You
can make the text scroll, slide, or alternate (bounce back and
forth) inside the marquee. The default style is scrolling text.
To change this to sliding text, type BEHAVIOR=SLIDE inside
the <MARQUEE> tag.
Figure 15.20 :
- By default, text in a <MARQUEE> tag moves from the right
side of the marquee to the left. You can reverse the direction
by typing DIRECTION=RIGHT inside the <MARQUEE> tag.
Figure 15.21 :
- You can specify the height and width of the marquee by placing
HEIGHT and WIDTH attributes inside the <MARQUEE> tag. The
height and width can be expressed as either specific pixel values
or a percentage of the screen. For example, to set the marquee
to be exactly 40 pixels high with a width of 50 percent of the
visible screen, you would type HEIGHT=40 WIDTH=50% inside
the <MARQUEE> tag.
Figure 15.22 :
- You can specify how many times the marquee text will loop
by using the LOOP attribute inside the <MARQUEE> tag. For
example, to set the marquee text to loop five times, type LOOP=5.
If you do not use the LOOP attribute, the marquee text will cycle
infinitely.
Figure 15.23 :
- The SCROLLAMOUNT attribute allows you to specify how many
pixels the marquee moves each time it is redrawn. This directly
affects the smoothness of the scrolling text as well as the speed
with which it moves across the screen. For example, to get the
text to scroll slowly and smoothly across the screen one pixel
at a time, type SCROLLAMOUNT=1 inside the <MARQUEE>
tag.
Figure 15.24 :
- You can also control the speed of the marquee text display
using the SCROLLDELAY attribute. This attribute specifies the
number of milliseconds that will elapse between each redraw of
the marquee text. For example, to set the delay to 100 milliseconds,
type SCROLLDELAY=100 inside the <MARQUEE> tag.
Figure 15.25 :
- If you want to change the background color of the marquee,
use the BGCOLOR attribute inside the <MARQUEE> tag. The
color must be specified using an RGB hexadecimal code and preceded
with a pound sign. For example, to set the background color of
the marquee to light green, type BGCOLOR=#008800.
Figure 15.26 :
Internet Explorer supports a handful of extensions to change colors
of HTML tables. Normally, HTML tables appear in the same color
as the background and use white and dark gray borders for a 3-D
effect. With Internet Explorer, you can assign a different background
color as well as different border colors for your tables. You
can even assign a different background color for each individual
cell.
- You can use background colors in tables to highlight entire
rows or columns of cells. To highlight a row, use the BGCOLOR
attribute inside a <TR> tag. To highlight a column, use
the same BGCOLOR attribute inside the <TD> tag for each
cell in the column.
- Remember that you can override the background color for the
entire table by changing the color for a specific row or cell.
- You can view a list of colors, along with their associated
RGB hexadecimal codes, by pointing your web browser to http://www.infi.net/wwwimages/colorindex2.html.
Figure 15.27 :
- Open the HTML document that contains your table and place
the cursor inside the opening <TABLE> tag of the table you
want to modify.
Figure 15.28 :
- You can change the background color for the entire table by
using the BGCOLOR attribute inside the <TABLE> tag. The
BGCOLOR attribute uses an RGB hexadecimal code, preceded by a
pound sign. For example, to set the background color of the table
to green, type BGCOLOR=#00ff00.
Figure 15.29 :
- You can also place a BGCOLOR attribute inside a <TR>,
<TH>, or <TD> tag, even if you have already specified
a background color for the entire table. Background color settings
for individual elements, such as cells or rows, take precedence
over settings for the entire table. To change the background color
for a single cell to blue, type BGCOLOR=#0000ff inside
that cell's <TD> tag.
Figure 15.30 :
- You can also change the color of the table border by placing
the BORDERCOLOR attribute inside the <TABLE> tag. The BORDERCOLOR
attribute also uses an RGB hexadecimal code. To set the color
of the border to a light shade of blue, type BORDERCOLOR=#8080ff
inside the <TABLE> tag.
Figure 15.31 :
- You can also change the color of the table's outer borders,
which give a table its 3-D effect. To change the color of the
upper and left borders (the light colored ones), use an RGB code
with the BORDERCOLORLIGHT attribute. For example, to set these
two borders to a very faint shade of blue, type BORDERCOLORLIGHT=#e0e0ff
inside the <TABLE> tag.
Figure 15.32 :
- To set the color for the other two borders, use the BORDERCOLORDARK
attribute. For example, to set the color for these two borders
to a deep shade of blue, type BORDERCOLORDARK=#000080 inside
the <TABLE> tag.
Figure 15.33 :
- Save your modified HTML document, and then view the new table
with Internet Explorer.
Figure 15.34 :
