As of this writing, the third revision of the HTML standard is still being hammered out. The HTML 3.0 standard was never officially adopted, but has already been superseded by the newer HTML 3.2 proposed specification. Internet Explorer 3.0 is not yet
fully compliant with all of the HTML 3.2 proposed elements. In fact, very few browsers are compliant with any HTML 3 proposed elements, but Internet Explorer incorporates many of the newer and more stable proposed mark-up and layout elements that will
almost certainly be included in the final HTML 3.x draft.
Additionally, the Internet Explorer browser supports its own unique set of HTML "enhancements" that other browsers do not yet support. Other browsers, most notably Netscape Navigator, have also implemented their own unique extensions. For the
most part, Internet Explorer and Netscape Navigator now support exactly the same extensions to HTML, except for bleeding-edge features such as embedded objects and streaming media.
Because Navigator and Explorer dominate the browser market by an enormous margin, all other Web browsers can be expected to follow where these two giants lead. So when you use the "non-standard" extensions discussed in this chapter on your
Web
pages, you will not be risking incompatibility with any but the most obscure or ancient Web browser software.
You get a closer look at graphical image formats (including the new progressive JPEG format) in Chapter 24, "Graphics and Multimedia for Internet Explorer." The following sections summarize some of the newest HTML mark-up and document
formatting extensions supported by Internet Explorer 3.0.
You can tell Internet Explorer to load a small version of an image before it loads a full-size image, and if users decide they don't need to wait for that entire image to come in, they have at least seen some representation of it.
The syntax for this low-res to high-res feature is
<IMG SRC="big-picture.gif" LOWSRC="small-picture.jpg">
What happens here is that Internet Explorer makes its first pass through your document, and when it sees your <LOWSRC> tag, it loads that (presumably smaller) image first. Then, when Explorer makes its second pass through your document, it loads
the main image.
Although this attribute was originally designed with the intention that the LOWSRC image would be a low-resolution or highly compressed version of the SRC image, you can also use two entirely different images to get an "el-cheapo" two-frame
animation effect.
NOTE
When users revisit your pages, and if they have let your high-resolution image load completely, then the redrawing effect you see will not occur. Instead, the larger image will be stored in Internet Explorer's cache, and the LOWSRC attribute will be ignored when this page is encountered again. This remains true as long as your page is in the user's cache.
Background tiling is an unofficial extension that is almost certain to make it into the official HTML 3.x standard, and has already gained nearly universal support. This powerful feature enables you to specify an image file to be used as a
"wallpaper" tile behind all text and images in a document. It is implemented as an attribute in the <BODY> tag like this:
<BODY BACKGROUND="image.gif"> (document text goes here) </BODY>
The image specified in the BACKGROUND attribute will be rendered by Internet Explorer as a repeated tiled image and will appear behind the actual content of the page. The image will be tiled as often as necessary for it to fill the back portion of the
screen.
You may also optionally add the BGPROPERTIES="fixed" attribute, which tells Internet Explorer not to scroll the background when scrolling through the text. BGPROPERTIES does not currently accept any other values besides "fixed".
TIP
Tiled background images should be implemented with great care in order to avoid distracting from the main content of the page itself, and they generally should not be too large or too elaborate. It's very easy to get carried away with "cool" background images, and many pages on the Web are almost impossible to read due to overdone backgrounds.
So before you include your company logo or baby pictures as wallpaper behind your Web pages, stop and think: If you had an important message to send someone on a piece of paper, would you write it over the top of the letterhead logo or on the blank part of the page? Backgrounds should be like fine papers: attractive, yet unobtrusive.
Of course, rules are made to be broken. Figure 22.1 stands this guideline on its head, and uses the background as the overwhelmingly dominant image on a page. You'll see another example of this unconventional approach in Chapter 25, "Tables, Frames, and Style Sheets."
As Figure 22.1 shows, background tiling can be combined with transparent images and other effects to add a great deal of flair to your pages. (See Chapter 24 for details on creating transparent images.)
Be aware that background tiling can significantly increase the time it takes for a page to download, although Internet Explorer 3.0 will display the text and images on a page even before it finishes loading the background.
If you do not have adequate graphics software to create satisfactory background images, or if you just cannot seem to get the pattern you want, there are hundreds of sites on the Internet that offer public domain background images that you are free to
use or inexpensive professionally designed backgrounds. A good starting place is Gini Schmitz' "Textures and Backgrounds Wonderland" at http://netletter.com/cameo/hotlist.htm.
If you happen to see a background image on someone else's page that you wish you could use on your own page, it is usually a simple matter to view the source code for that document and derive the exact URL of the background image from there. Be
careful,
though, to ask the person who created the image if you can use it because the image could very well be copyrighted or legally protected in some other way.
An even faster and easier way to wield some control over the background in Internet Explorer is to use the body color extensions. These simply enable you to specify a color for the background, text, and hot links. No extra images need to be loaded or
processed, so pages download and display quickly.
You can specify colors by name or by number. The basic colors can be specified using the English words "blue," "green," "purple," and so forth. To make the background blue, the text white, and the links yellow, you would
use the following:
<BODY BGCOLOR="blue" TEXT="white" LINK="yellow">
To mix your own custom colors, the format is #rrggbb where rr, gg, and bb are two-digit hexadecimal values for the red, green, and blue components of the color. If you're not familiar with hexadecimal numbers, don't sweat
it.
Just remember that FF is the maximum, 00 is the minimum, and 88 is in the middle. To mix the same colors specified earlier by name, you would use the following:
<BODY BGCOLOR="#0000FF" TEXT="#FFFFF" LINK="#FFFF00">
In addition to the BGCOLOR, TEXT, and LINK colors, you can also specify VLINK and ALINK color attributes. VLINK assigns a color to all visited link text. In other words, after a user has accessed a particular link and then returned to the page where
the
user originally found the link, this is the color that the text representing that link will become. Subtle use of this tag can be quite effective. One of my favorite tricks has been to make the <VLINK> color equivalent to the <BGCOLOR> color.
This has the unsettling effect of making it look like visited links are vanishing from the pages after a user clicks on them!
ALINK is the active link color. This is the color that the linked text becomes as you are clicking on it. The effect this has can actually be rather subtle, and many visitors to your pages might never notice that this element even exists or that you
specifically coded this color. But again, if exercised with care, it can be strangely effective.
TIP
Because many computers display "dithered" colors that can create distracting patterns behind text, you should always stick to the basic colors that almost every computer will show without any dithering. These are
Black #000000 White #FFFFFF Red #FF0000 Green #00FF00 Blue #0000FF Yellow #FFFF00 Magenta #FF00FF Cyan #00FFFF
Other valid color names that can be used are Aqua, Fuchsia, Gray, Lime, Maroon, Navy, Olive, Silver, and Teal. These are usually pretty safe, too—but not as reliable as the preceding listed "pure" colors.
Although the colors you specify in the <BODY> tag apply to all text on the page, you can also change the color of a particular word or section of text using the <FONT> tag. How to do this is discussed later in this chapter, along with
the other font controls.
In Chapter 21, "Composing and Editing HTML Pages," you saw how to make any image on a Web page into a "button" that links to another document. You can also subdivide an image into regions and link to different documents, depending
on
which region the user clicks. This is called an image map, and any image that is viewable by Internet Explorer (or by any other browser) can be made into an image map.
Internet Explorer enables you to choose between two different methods for implementing image maps: server-side image maps and client-side image maps. Both of these are also supported by Netscape Navigator and most other current-version browsers.
The old-fashioned way to do an image map is to let the server computer on which the Web page resides do all the work. When the user clicks on an image that has been mapped this way, Internet Explorer sends the x,y coordinates of the mouse pointer's
location to a special script on the server. Usually, this script is called image map and is located in the cgi-bin directory on the server, and the HTML to implement the image map is just a normal anchor link like the following:
<A HREF="/cgi-bin/imagemap/catdog"><IMG SRC="catdog.gif"></A>
Simple. But when you install a Web page that includes such a link, you need to tell the image map script which parts of the image should be associated with which link addresses. This is normally done in a map file. Each line in the map file is simply
the word rect followed by a URL address and two sets of x,y coordinates representing the top-left corner and the bottom-right corner of a region of the image. The first line in a map file begins with the word default followed by the URL address that
should
be used if the user happens to click outside of any rectangular region defined by a rect line. A map file named catdog.map might look like this:
default /top/cat.htm rect /top/cat.htm 30,42 72,160 rect /top/dog.htm 80,0 149,169
The final step in setting up a server-side image map is telling the image map script which map file to use for which image. You do this by adding a line to a system file named imagemap.conf. This file already exists and includes entries for every image
map defined on the server. You simply add a line with the name used in the HREF attribute of the <A> tag, a colon, and then the actual location and name of the associated map file. For example, the previous reference is
HREF="/cgi-bin/imagemap/catdog", and the preceding map file is named catdog.map. If this map file were in a directory named /mapfiles, then the line in imagemap.conf would read
catdog : /mapfiles/catdog.map
All this isn't nearly as difficult as it might sound if you've never set up an image map before, but it can be a hassle—especially if your pages reside on somebody else's server and you don't have the rights to modify system files like
imagemap.conf yourself. What's worse, server-side image maps don't work at all on Web pages located on your hard drive, a CD-ROM, or most local networks.
There are also some variations in the exact syntax for image map implementation, depending on the software installed on your server. So if you move your pages to a different server, the image maps might not work any more. Fortunately, there's now an
easier and more reliable way to set up image maps.
Internet Explorer versions 2.0 and 3.0 support client-side image maps, where the association of links with specific regions in an image is handled by the browser itself instead of a server script. This means that you can include image maps in your HTML
files without imposing an additional burden on your Internet Service Provider's server.
You save a considerable amount of time and network resources by using the client-side image maps method and not the traditional one. This is because client-side image map requests do not have to be sent out to the remote server and because the results
of those requests do not have to be sent back from the server to the end user.
Another key advantage to client-side image maps is that authors can be more certain than before that their image maps will be processed correctly and dependably. Freeing yourself of dependence on your service provider's Web server, no matter what the
task at hand, is advantageous to everyone involved.
Using the same principle as with the previous image maps, where pixel coordinates are assigned URL addresses, there are a few subtle changes to the <IMG> syntax that make client-side image mapping work.
The HTML to implement a client-side image map looks like this:
<MAP NAME="catdog"> <AREA SHAPE="RECT" COORDS="30,42,72,160" HREF="meow.wav"> <AREA SHAPE="RECT" COORDS="80,0,149,169" HREF="woof.wav"> </MAP> <IMG SRC="/catdog.gif" USEMAP="#catdog">
This example is implemented in the file catdog.htm on the Internet Explorer 3 Unleashed CD-ROM if you'd like to try it.
Note that the links do not necessarily have to lead to HTML documents. In this case, clicking on one region of the image catdog.gif would play a Windows sound file named meow.wav, whereas clicking on another region would play woof.wav.
In the preceding example, the <MAP> and <AREA> tags are located in the same file as the <IMG> tag. It is also possible to put the map definition in a separate file by including that file's name in the USEMAP attribute, like this:
<IMG SRC="/catdog.gif" USEMAP="maps.htm#catdog">
TIP
Microsoft Internet Explorer 3.0 supports two new values for the AREA SHAPE attribute besides the traditional SHAPE=rectangle. The first new value is SHAPE=circle, which requires the center x coordinate, center y coordinate, and radius of the circle to be specified in the COORDS attribute. SHAPE=polygon requires three or more coordinate pairs specifying the corners of a polygon. Most Web page authors use the shorter forms rect, circ, and poly instead of the longer (but also permissible) rectangle, circle, and polygon.
There is a way for you to provide client-side image maps that automatically switch to server-side image maps if the user's browser doesn't support client-side maps. With a single line of code, you can allow an image map to be interpreted either by the
end-user's software or by the server. You do this by including the ISMAP attribute in the <IMG> tag, and then including both a USEMAP= attribute and cgi-bin/imagemap reference as follows:
<A HREF="/cgi-bin/imagemap/catdog"> <IMG SRC="catdog.gif" USEMAP="maps.htm#catdog" ISMAP></A>
Here, as with any unrecognized tag, browsers that don't support client-side image maps will simply ignore the <USEMAP> and <ISMAP> tags and treat the preceding code just like an old-fashioned server-side image map.
TIP
You might want to include an HREF anchor link with client-side image maps even if you don't implement server-side image maps at all. For example, the following would bring up a document named nomaps.htm when clicked from a browser that didn't support client-side image maps:
<A HREF="nomaps.htm"><IMG SRC="catdog.gif" USEMAP="maps.htm#catdog"></A>
The nomaps.htm document might include a text list of choices equivalent to the various regions in the image, or simply an error message telling users that their browser doesn't support client-side image maps.
Internet Explorer supports an elaborate series of enhancements to the <IMG> (inline image) tag. These enhancements include attributes to control image alignment, spacing, borders, and much more.
The IMG ALIGN attribute is perhaps the most complex and powerful single attribute in all of HTML. Table 22.1 summarizes the values it can currently have.
You can see most of these enhancements in action in the Maple Syrup site pictured in Figure 22.2, and the related pages discussed in Chapter 25, "Tables, Frames, and Style Sheets" and included on the CD-ROM that accompanies this book.
| left | Align image to left margin and wrap text around it. |
| right | Align image to right margin and wrap text around it. |
| top | Align image to top of the line of text. |
| texttop | Align image to top of the tallest text or image in the line. |
| middle | Align center of image to baseline of text. |
| absmiddle | Align center of image to center of the text line. |
| bottom | Align bottom of image with baseline of text. |
| baseline | Identical to bottom. |
| absbottom | Align bottom of image with bottom of text line. |
If you assign either a left or a right value, the image is rendered as a "floating image." It differs, then, from ordinary images in that text that immediately precedes or follows the image will "wrap" around the
image. ALIGN=LEFT causes the image to float to the left side of the page, and any text that follows will wrap along the right side of the image. The opposite is true for ALIGN=RIGHT. The image will float to the right, and all text will wrap to its left.
Some of the distinctions between the various other alignment elements are rather subtle. Generally, you'll use top, absmiddle, or bottom only to align an image with the top, middle, or bottom of the line of text it accompanies. The others usually come
into play only if you have multiple images on one line and want to line everything up just so.
The floating image feature allows for more flexible image placement, but it also necessitates changes to the standard <BR> line break tag. When placed after a floating image, the <BR> tag will still produce a line break the same as it did
before. The <CLEAR> tags, however, enable you to position the subsequent text with a little more flexibility. <CLEAR=left> will insert a line break, and then clear the left margin and begin the next section of text below the image. <BR
CLEAR=right> clears the right margin, and <BR CLEAR=all> clears both margins.
VSPACE stands for "vertical space," and the number value assigned to it is an exact pixel measurement. This pixel value determines the amount of space in pixels that lies between the floating image and any text, image, or other HTML element
located directly above or below it. Similarly, HSPACE (which stands for "horizontal space") determines the amount of horizontal space in pixels to the left and right of the image.
The BORDER attribute lets you control the size of the border that appears around an image that links to another document URL as a hypertext reference. You can manipulate the color of this border with the <BODY LINK=rrggbb> tag near the beginning
of the document. You can have a border with a value of 0, which is rendered as no border at all. There seems to be no limit on how large you can make this border. See where setting a border value of 300 gets you.
The image sizing options afforded by the <IMG WIDTH=value HEIGHT=value> tag are perhaps the most misunderstood extensions to the image tag. These tags were implemented so that user agents such as Internet Explorer would not have to calculate the
size of a document's inline images before attempting to lay out the document. If you have a text document in which you wish to include an inline image that is 100 pixels wide by 150 pixels high, then specifying those exact dimensions with <IMG
WIDTH=100
HEIGHT=150 SRC="image.gif"> will set that amount of space within the document aside. Having set that space aside for the images, Internet Explorer then loads the entire text content of the document, making the document appear to transfer more
quickly. The benefit of this tag is most noticeable when applied to documents that contain a lot of text and several inline images throughout the document.
TIP
You can make images appear larger or smaller, or you can simply constrain them to a fixed size by making the height and width attributes whatever size you need. Be careful, however, that you do not attempt this for any graphics file for which resolution or image quality is important because Internet Explorer is merciless in the way it distorts images that are resized in this way. The size attribute is useful, however, in instances where the appearance of an image is not as significant as its content. For example, if you've received a fax via your fax modem, and you wish to share the contents of it with several people, it might be easier and more efficient to make it available on your Web page.
Internet Explorer's font control HTML enhancements allow for marvelous subtleties of font manipulation. Currently, you can change the size, color, and even the typeface of any piece of text. Future enhancements will include other font controls, plus
enhanced support for compressed fonts that download automatically along with a Web page.
NOTE
In addition to (or instead of) the font and text formatting tags discussed in the following section, you can opt to use a new HTML feature called style sheets to control the fonts and text formatting in your Web pages. Refer to Chapter 25 for details on how to use style sheets.
The most popular font control attribute is <FONT SIZE="">. The valid numeric values for this attribute are from 1 to 7, with 7 being the largest size and 1 being the smallest. The defaults for these values are approximately equal to the
standard point sizes of typesetting.
You can also use relative size increments by specifying + or - before a number. For example, the following would display the words Here come the as 3-point text, the word elephants as 7-point text, the words running from the as 3-point text, and the
word mice as 1-point text:
<FONT SIZE="3">Here come the <FONT SIZE="+4">elephants</FONT> running from the <FONT SIZE="-2">mice</FONT> </FONT>
Another new HTML tag supported by Internet Explorer is the <BIG> tag. In HTML, as in life, "big" is a relative attribute; any text between <BIG> and </BIG> tags will be made "big" compared to the text that precedes
it. As you probably guessed, <SMALL> and </SMALL> do just the opposite. Even though these tags don't offer the flexibility of the <FONT SIZE=""> tag, they are recommended when the exact size doesn't matter and you just want
some
emphasis.
Figure 22.3 shows the previous elephants-and-mice example implemented with <FONT SIZE>, followed by a similar effect achieved with the <BIG> and <SMALL>.
By default, fonts in Internet Explorer are given a point size of 3. However, you can override this default size by placing the <BASEFONT SIZE=""> tag within the <HEAD> tags. By specifying <BASEFONT SIZE="7">, for
example, all the text in your document, unless otherwise specified, will have a point size of 7. Applying <FONT SIZE="-1"> to a particular piece of text will therefore produce 6-point text.
NOTE
Unfortunately, there is no use in attempting <FONT SIZE="100"> because the maximum size displayed can never exceed 7.
Also, keep in mind that the user can choose to enlarge or reduce the font size when viewing the page, using the font size button on the Internet Explorer toolbar.
Superscript and Subscript are further additions to the list of HTML 3 tags supported by Internet Explorer. Particularly useful for footnote references and numeric dates such as 1[st, 2–, and so on, superscript text
is contained within <SUP> </SUP> tags, and subscript text within <SUB> </SUB> tags.
One of the more striking new HTML tags is <FONT COLOR=#rrggbb">. This tag eliminates one of the most ornery limitations of the <BODY TEXT=#rrggbb> attribute by enabling the freedom to speckle your text pages with all kinds of gaudy
text
colors. This extension permits you to give color to individual pieces of text, overriding any <BODY TEXT> values you might have made in the opening statement.
The very straightforward tag is
<FONT COLOR=#rrggbb>Put your text here</FONT>
Note that the <FONT COLOR> tag can be combined with the <FONT SIZE> tag, making <FONT SIZE=2 COLOR=#FF0000> a perfectly valid tag. You can also use the standard English color names mentioned under background colors earlier in this
chapter.
The <FONT COLOR> tag is actually an extension originally implemented by Microsoft's Internet Explorer, which has since been incorporated by Netscape and most other browsers.
With Internet Explorer version 3.0, Microsoft has added another extremely powerful form of font control: the FONT FACE attribute. This enables you to specify the actual typeface that should be used to display text—and has been the source of much
rejoicing among Webmasters who are awfully sick of Times and Courier!
The site in Figure 22.4 uses these font controls, and another new Microsoft Explorer feature, borderless frames, to present a warmly welcoming homestyle site. (You'll revisit this site in Chapter 25 to see how the frames were set up.)
The code to set the font used in Figure 22.4 (in the file /maple/main.htm on the CD-ROM) is
<FONT FACE="Lucida Handwriting, Brush Script, Brush Script MT" SIZE=5 COLOR="#800000">
If Explorer can find a font named Lucida Handwriting on a user's system, that font is used. Otherwise, it checks for a font named Brush Script or Brush Script MT and uses whichever of those it can find. If the user doesn't have any of those fonts
installed, the default font set up for Explorer is used (this is usually Times New Roman).
Browsers other than Microsoft Explorer also use the default fonts they always use. So Figure 22.4, when viewed in Netscape Navigator or on a system without the specified fonts, would resemble Figure 22.2 shown earlier.
In the near future, Microsoft and Adobe are promising auto-downloading compressed fonts that will eliminate the need for users to have the fonts on your page pre-installed on their system.
TIP
Note that both TrueType and Postscript fonts installed on the user's system can be used in Web pages. TrueType fonts are more common, but it's always a good idea to include the name of a similar Postscript font (if you know one) because some people don't use TrueType at all.
In this example, Brush Script is the customary name for the Postscript version of the font, but Brush Script MT is the most common name of the TrueType version of the same font. I included both names just to be on the safe side.
Currently, only fonts that each user happens to have on his or her system will show up, and you have no control over which fonts are installed. Furthermore, the exact spelling of the font names is important, and many common fonts go by several slightly
different names. Extensions to HTML will soon support a new, highly compact font format that can be automatically downloaded along with your pages to solve these problems. But for now, you just have to stick to the most common fonts and make sure your
pages still look acceptable in Times New Roman.
Figure 22.5 shows the most common TrueType fonts, many of which are also available in Postscript format. Microsoft offers a number of these fonts available for free download from the following site:
http://www.microsoft.com/truetype/
Microsoft has also included these fonts (and variations on them) in Windows and other popular software packages.
If you want to use a font on your Web page that isn't on this list, don't be afraid to do so! The user will never see an error message if the font can't be found—the worst thing that could happen is that the user won't see your special font, but
will still see the text in the next best font that can be found. If one of the fonts in Figure 22.5 has a similar feel to the one you want, include it as a "second choice" as I did with Brush Script in the preceding example.
You can center lines of text (and images) by enclosing them between <CENTER> and </CENTER>. The powers that be have resisted adding this tag to the official standard because it goes against the concept that HTML isn't supposed to tell a
browser how to display text, but simply what kind of text it is. That's a nice theory. Meanwhile, I'd say over half the pages on the Web use centering, and most major browsers support it. (There's a lesson about standards committees in there somewhere.)
In the end, however, the committee might prevail. The <CENTER> tag has been theoretically superseded by the HTML 3 <DIV> tag, which accomplishes the same thing in a more flexible way. (Still, most Web authors continue to use <CENTER>
for compatibility with older browsers.) In addition to the ALIGN="center" attribute, the <DIV> tag also allows ALIGN="left" or ALIGN="right". Any image or text placed within these tags will be aligned either to the
center, left, or right, depending on which you choose. The ALIGN="right" option should provide welcome relief to Web authors because HTML has until now not supported any reliable means of aligning text to the right side of the display.
You can also use the ALIGN attribute with the <P> paragraph tag to align a single paragraph of text to the left, right, or center. This is not recommended, however, because some browsers might support only DIV ALIGN.
NOTE
The DIV ALIGN and P ALIGN attributes do not, on their own, function identically to the IMG ALIGN attribute discussed earlier in this chapter. Placing an image within a <DIV ALIGN="RIGHT"> tag does not cause that image to become "floating," and text that follows that image will not wrap around the image unless the specific <IMG> tag itself includes an ALIGN attribute.
You can, for example, place an <IMG ALIGN="LEFT"> before a <DIV ALIGN="RIGHT"> section, causing the entire contents of the right-justified section of text to wrap around the image.
Microsoft has added two new attributes to the <BODY> tag that enable you to set the top and left margins for a page in pixels. For example, the following would leave ten pixels of blank space on the left and top edge of a page:
<BODY TOPMARGIN=10 LEFTMARGIN=10>
You can also set the margins of a page (including the bottom and right margins) with style sheets, as discussed in Chapter 25.
Lest you forget, the curse[as]d <BLINK> tag is alive and well.
Lest you forget, the curse[as]d <BLINK> tag is alive and well.
Lest you forget, the curse[as]d <BLINK> tag is alive and well.
The <BLINK> and </BLINK> tags highlight a piece of text by making it blinkblinkblinkblink ad infinitum. This is an excellent tag to use liberally throughout your site if you want to make sure visitors will hate you forever and never come
back again.
To round out the text and image formatting techniques described so far, Internet Explorer also offers several extensions to the horizontal rule <HR> tag.
<HR> is used to insert a solid, horizontal line across a document. By default, Internet Explorer produces a shaded, engraved-looking line. You can, however, enhance or otherwise change the appearance of that default.
You use the SIZE attribute to set the vertical size of the rule. The number value in this attribute should be equal to the height in pixels you want the line to be. <HR SIZE=1> will be a single-pixel "hairline" rule, whereas <HR
SIZE=300> will be a big, fat rectangle across the page.
By default, Internet Explorer draws horizontal rule lines to span the width of the screen. You can override this, however, with the WIDTH attribute, which enables you to specify the size of the line either as a relative percentage or as a precise pixel
value. <HR WIDTH=250> draws a 250-pixel-wide line, whereas <HR WIDTH=50%> draws a line halfway across the Internet Explorer window, no matter what size the window happens to be.
In Internet Explorer and most other browsers, horizontal rules are normally centered, but Internet Explorer enables you to override this default with the ALIGN attribute, which can have the values "left", "center", or
"right".
Internet Explorer allows for one more horizontal rule enhancement: the <HR NOSHADE> attribute. This specifies that the <HR> will be rendered as a solid gray line and not the transparent beveled one that Internet Explorer renders by default.
Dynamic documents are pages that automatically change without any action from the user. Dynamic documents are not new to Internet Explorer 3.0 (they were first introduced in version 2.0), but they represent yet another very striking development in HTML
content presentation.
There are two basic approaches to producing a dynamic document: server push and client pull. As these terms suggest, server-push documents are sent automatically by the server without being "asked for." A client-pull document, on the other
hand, is a page that instructs the browser ("client") program to automatically initiate a request for another page.
TIP
Dynamic documents work beautifully within frame documents. You can have one frame automatically refreshing itself while the other frames display ordinary static pages. (See Chapter 23, "Tables, Frames, and Stylesheets," for an introduction to frames.) Oh, and whatever you do, don't put a server-push animation into your background image. On second thought....
Server push is different from standard HTTP information transfers. Normally, when you use Internet Explorer (or any other Web browser) to request a document from a site on the World Wide Web, your computer makes a request of another computer, the other
computer processes your request and sends back the information you requested (if it is available), and that is the end of the communication.
With server push, however, Internet Explorer establishes a connection to an HTTP server and keeps that connection open, enabling content to be "streamed" out of the server until the parameters of the HTTP request have been satisfied.
Server-push programming usually involves some kind of PERL or C programming knowledge.
Before you embark on any substantial work, though, be sure to check with your Internet access provider to find out if their server is capable of handling server-push programs or if you could expect to be billed extra for the service. Server-push
scripts
are known to bring the most robust servers down.
Unlike many other Internet Explorer extensions, Internet Explorer's implementation of server push has not been very widely adopted by other browsers, and for the most part, server-push programs can be viewed only by Internet Explorer. The multimedia
dimensions that server push offers are expected to be superseded by more advanced animation and multimedia interfaces such as Java.
For a fun demonstration of server push, point your Internet Explorer browser to http://anansi.panix.com/~sorabji/smile.smile.smile.html.
Client pull is different from server push in that the main "work" involved is performed by the Web browser. The <META> tag is used to automatically request another page after a specified time period. The syntax of the <META> tag
looks somewhat bizarre at first.
<META HTTP-EQUIV="Refresh" CONTENT="2; URL=http://someplace.com/page2.html">
What this actually does is send a message pretending to be from the server saying Refresh: 2; URL=http://someplace.com/page2.html. When Internet Explorer Navigator sees this message, it waits two seconds, and then loads the URL given. In this case, a
document named page2.html is loaded from someplace.com, but the URL could be any other document anywhere else on the Internet (or a file on the local hard drive). It could also be any type of viewable file, such as a sound or multimedia file for which a
plug-in or helper app has been configured.
The net effect is simple: Internet Explorer retrieves one document, and then pauses for a couple of seconds before loading a second document. This can be very striking when used as an attention-getting device, but it can also be useful if you want to
be
reasonably certain that visitors to your page will see a set of pages in a certain sequence.
Depending on what you wish to accomplish, server push can be more efficient and reliable than client pull because client pull involves multiple HTTP requests and because the speed of HTTP requests can vary considerably.
For a working example of client-pull animation, open the catdog2.htm file on the CD-ROM that accompanies this book. The HTML for this animation is listed here and illustrated in Figure 22.6.
<HTML> <HEAD> <META HTTP-EQUIV="Refresh" CONTENT="2; URL=catdog3.htm"> <TITLE>Meow</TITLE></HEAD> <BODY> <IMG SRC="catdog2.gif"><A HREF="catdog4.htm">Click here to stop.</A> </BODY> </HTML>
Figure 22.6. This page (catdog2.htm) automatically turns into Figure 22.7 after two seconds.
After two seconds, the page automatically replaces itself with the catdog3.htm file, listed here and shown in Figure 22.7.
<HTML> <HEAD> <META HTTP-EQUIV="Refresh" CONTENT="2; URL=catdog2.htm"> <TITLE>Meow</TITLE></HEAD> <BODY> <IMG SRC="catdog.gif"><A HREF="catdog4.htm">Click here to stop.</A> </BODY> </HTML>
Figure 22.7. This page (catdog3.htm) automatically turns back into Figure 22.6 after two seconds.
When the user clicks on the Click here to stop. link, a similar page without any client-pull animation tags is loaded. This page, called catdog4.htm, is listed following:
<HTML> <HEAD> <TITLE>Meow</TITLE></HEAD> <BODY> <IMG SRC="catdog.gif"><A HREF="catdog2.htm">Click here to start.</A><P> <A HREF="catdog.htm">Click here to go back.</A></BODY> </HTML>
This chapter has introduced many of the new and nonstandard extensions to HTML that Internet Explorer 3.0 supports. Some of the most important and useful extensions haven't even been mentioned yet, however. Chapter 25, "Tables, Frames, and Style
Sheets," covers the wide variety of formatting tricks you use to add creative layouts and complex formatting to your Web pages.
