Skip to main content.

Web Based Programming Tutorials

Homepage | Forum - Join the forum to discuss anything related to programming! | Programming Resources

How to use HTML 3.2

Chapter 15 -- Using the Internet Explorer Extensions

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.

How to Use Internet Explorer's Formatting Extensions

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.

Tip Sheet

  1. Open a new document in Notepad and type in the lines as shown above.

    Figure 15.2 :

  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 :

  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 :

  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 :

  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 :

  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 :

  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.
  8. 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 :



  9. Save your file in Notepad as explore.html, and leave it open for the exercise in the next section.

    Figure 15.9 :

How to Play Sound and Video Clips with Internet Explorer

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.

Tip Sheet

  1. 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 :

  2. 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 :

  3. 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 :

  4. 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 :

  5. 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 :

  6. 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.
  7. 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 :

  8. 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 :

How to Use Scrolling Text Marquees

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.

Tip Sheet

  1. 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 :

  2. 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 :

  3. 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 :

  4. 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 :

  5. 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 :

  6. 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 :

  7. 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 :

  8. 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 :

Extending Tables with Internet Explorer

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.

Tip Sheet

  1. 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 :

  2. 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 :

  3. 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 :

  4. 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 :

  5. 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 :

  6. 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 :

  7. Save your modified HTML document, and then view the new table with Internet Explorer.

    Figure 15.34 :