TRY IT!

LawnBirds, Inc. wants to update their online catalog to take advantage of the Internet Explorer extensions. However, they want you to design the HTML document in such a way that any user will be able to view it, even if they're not using Internet Explorer as their browser.

This is an opportunity to practice the techniques you learned in the previous chapter, as well as to build an understanding of how the Internet Explorer extensions can be incorporated into documents without making them incompatible with other Web browsers.

Figure 1 :

  1. Start Notepad and open catalog.html, which you created in the third Try It!

    Figure 2 :

  2. Turn Word Wrap on.

    Figure 3 :

  3. Locate the <BODY> tag. This document already has a background image of the LawnBirds, Inc. logo. Place the cursor after the URL of the logo.

    Figure 4 :

  4. Currently, the background logo scrolls with the text of the page. To freeze the background in place as though it were a watermark, type BGPROPERTIES=FIXED. When viewed with Internet Explorer, the logo will not scroll. It will still scroll as usual when viewed with other Web browsers.

    Figure 5 :

  5. Now, add a left margin of 100 pixels to the <BODY> tag by typing LEFTMARGIN=100. Adding margins to HTML documents is purely stylistic, but it can make some types of documents easier to read.

    Figure 6 :

  6. LawnBirds, Inc. wants you to incorporate their company theme song, 'It's a LawnBirds World,' into their online catalog. They have provided a MIDI version for you to include, named lawnwrld.mid. Because you don't really have this file on your system, you can use another MIDI or WAV sound file in its place.
  7. Place the cursor after the <BODY> tag and press Enter. Then type <BGSOUND="lawnwrld.mid" LOOP=INFINITE>. If you used a different file as the background sound, type that file name in place of lawnwrld.mid.

    Figure 7 :

  8. Now you can begin enhancing the table, which displays all the different products in the LawnBirds line. First of all, you can change the font displayed in the table.
  9. Insert a blank line after the <TABLE> tag and type <FONT FACE="Lucida Sans,Arial">. Internet Explorer will attempt to display the table text in Lucida Sans. If that font is not installed on the user's system, it will try to display it in Arial. If neither font is available, the text will be displayed in the default font.

    Figure 8 :

  10. Now change the background color of the table to "LawnBirds Pink,' which has an RGB hexadecimal code of #ef9cb5. Place the cursor inside the <TABLE> tag, after the word BORDER and type BGCOLOR=#ef9cb5.

    Figure 9 :

  11. Now change the colors of the light and dark edges of the borders, which give the table its 3-D effect. Type BORDERCOLORLIGHT=#fbe3eb inside the <TABLE> tag to change the light colored borders from white to a light pink.

    Figure 10 :

  12. Type BORDERCOLORDARK=#e04372 to change the dark colored borders from dark gray to a dark shade of pink. The table coloring effects are purely cosmetic, but will make your table look much better when viewed by Internet Explorer. These changes will not affect the table when viewed by other browsers.

    Figure 11 :

  13. LawnBirds, Inc. wants the table's price column to be highlighted. You can do this by changing the background color for each cell in the column. Place the cursor inside the first price cell's <TD> tag.

    Figure 12 :

  14. Type BGCOLOR=#e4c2d1 inside the <TD> tag. This will change the background color to a lighter shade of pink.

    Figure 13 :

  15. Repeat the previous step for each of the remaining cells that contain price information.
  16. LawnBirds, Inc. wants to place a scrolling text marquee at the top of this document to convey last-minute updates and sale information. Place the cursor on a new line immediately before the document's <H1> headline tag.

    Figure 14 :

  17. Type <MARQUEE>Sale! 10% off all Great Egret purchases this summer. Call 1-800-555-LAWN to place your order today.</MARQUEE>.

    Figure 15 :

  18. Now place the cursor inside the opening <MARQUEE> tag and type BGCOLOR=#ef9cb5. This will set the background color of the marquee text to 'LawnBirds Pink,' the same color as the table you just enhanced.

    Figure 16 :

  19. Set the marquee width to 50% of the screen by typing WIDTH=50% inside the <MARQUEE> tag.

    Figure 17 :

  20. Internet Explorer also recognizes the Netscape <CENTER> tag. Type in the opening <CENTER> and closing </CENTER> tags around the <MARQUEE> tag pair. This will center the scrolling text marquee on the screen.

    Figure 18 :

  21. Choose Save from the File menu to save your changes.

    Figure 19 :

  22. Launch Internet Explorer and choose Open from the File menu.

    Figure 20 :

  23. Click on the Open File button and then locate catalog.html.

    Figure 21 :

  24. Click on the Open button to load the enhanced LawnBirds, Inc. catalog with Internet Explorer. Note the changes you made, including the colored table and the scrolling text marquee. You should also open catalog.html with other browsers, such as Netscape, for comparison.

    Figure 22 :