Optimizing WebPage (Sybex)

SYBEX Sample Chapter
HTML Complete
Sybex, Inc.
Chapter 13: Optimizing Your Web Pages

for Internet Explorer
Copyright 2003 SYBEX Inc., 1151 Marina Village Parkway, Alameda, CA 94501. World rights reserved. No part of this
publication may be stored in a retrieval system, transmitted, or reproduced in any way, including but not limited to
photocopy, photograph, magnetic or other record, without the prior agreement and written permission of the publisher.
ISBN: 0-7821-4209-5
SYBEX and the SYBEX logo are either registered trademarks or trademarks of SYBEX Inc. in the USA and other
countries.
TRADEMARKS: Sybex has attempted throughout this book to distinguish proprietary trademarks from descriptive terms
by following the capitalization style used by the manufacturer. Copyrights and trademarks of all products and services
listed or described herein are property of their respective owners and companies. All rules and laws pertaining to said
copyrights and trademarks are inferred.
This document may contain images, text, trademarks, logos, and/or other material owned by third parties. All rights
reserved. Such material may not be copied, distributed, transmitted, or stored without the express, prior, written consent
of the owner.
The author and publisher have made their best efforts to prepare this book, and the content is based upon final release
software whenever possible. Portions of the manuscript may be based upon pre-release versions supplied by software
manufacturers. The author and the publisher make no representation or warranties of any kind with regard to the
completeness or accuracy of the contents herein and accept no liability of any kind including but not limited to
performance, merchantability, fitness for any particular purpose, or any losses or damages of any kind caused or alleged
to be caused directly or indirectly from this book.
Sybex Inc.
1151 Marina Village Parkway
Alameda, CA 94501
U.S.A.
Phone: 510-523-8233
www.sybex.com
4209c13.qxd 2/7/03 4:58 PM Page 419
Chapter 13
Optimizing Your Web Pages
for Internet Explorer
n Chapter 6, Planning for a Usable, Maintainable Website,
you learned about site planning and site maintenance. Another
important step in the site planning process is to evaluate your
audience and the browsers your audience is most likely to use
to view your web pages. This gives you valuable information for
making decisions about which features you should include in
your pages for the best viewing experience by your target audience.
In this chapter, youll learn the major features of Internet
Explorer 6, the latest version of IE, including its support for
technologies, plug-ins, and a variety of scripting, markup, and
programming languages. In the next chapter (Chapter 14,
Optimizing Your Web Pages for Netscape Navigator), youll
learn about Netscape Navigator 6 and 7.
Written for HTML Complete, Third Edition,

by Lucinda Dykes
Copyright 2003 SYBEX Inc., 1151 Marina Village Parkway, Alameda, CA 94501. World rights reserved.
Part III
4209c13.qxd 2/7/03 4:58 PM Page 420
420
Chapter Thirteen
Defining the Target Audience

Browser compatibility continues to be a major problem for web designers
and developers, although there has been some improvement with the
latest versions of the two most popular browsers, Internet Explorer and
Netscape Navigator. Learning the features of the major browsers will help
you to design pages that work well when viewed in either browser and
save you from having to create a different version of your pages for each
browser.
Unless you are designing pages for a very specific audiencean office
intranet where everyone is using computers with the same operating system
and the same browsers, for exampleyou need to consider browser compatibility as you design and create pages.
The vast majority of your audience is most likely to be using a computer
with the Windows operating system. As of October 2002, according to
statistics from TheCounter.com (www.thecounter.com), Windows users
comprise about 97 percent of the web audience, Mac users comprise 2 percent, and the remaining 1 percent includes all other platforms combined.
Internet Explorer 5 and 6 currently are the most popular browsers, and
the number of Internet Explorer 6 users continues to increase steadily.
Overall, as of October 2002, global statistics at TheCounter.com showed
that 46 percent of the web audience use Internet Explorer 5, 45 percent
use Internet Explorer 6, and the remaining 9 percent use other browsers,
including Netscape Navigator, Opera, and Mozilla.
WARNING
Internet Explorer 6 currently is available only for PCs. The latest versions
of Internet Explorer for the Mac include version 5.1.6 for Mac OS 8.1 and 9.x
and version 5.2.2 for Mac OS X.
A recent report from StatMarket (www.statmarket.com) shows that

Internet Explorer 6 and Windows XP are the most popular browser
operating system combination on the web. This combination currently is
used by about 20 percent of the global web audience.
Keeping these statistics in mind, look at your target audience. Which
browsers are they likely to use? Do your pages include JavaScript or CSS
(Chapter 16, Using Style Sheets)? Do your pages include multimedia
4209c13.qxd 2/7/03 4:58 PM Page 421
Optimizing Your Web Pages for Internet Explorer
421
files (Chapter 15, Including Multimedia) such as Flash animations,

QuickTime movies, or streaming audio? Do your pages include special
features that require the latest browsers, such as XML (Chapter 20,
Introduction to XML, and Chapter 21, Fundamentals of XML) or CSS
absolute positioning? Can your pages be viewed by users with disabilities (Chapter 6)? You should review all these issues at the beginning
of the site design process and evaluate them again during the testing
process.
As you learned in Chapter 2, Getting Acquainted with HTML and XHTML,

the World Wide Web Consortium (W3C) develops and issues detailed
specifications outlining the vocabulary and syntax of HTML and other
languages and technologies. Browser support for these specifications,
however, has always been incomplete and varies both among the browsers
and among different versions of the same browser. Browser differences
have included not only proprietary HTML tags that are not part of any
specification (for example, Netscapes infamous blink tag or Internet
Explorers marquee tag) but also varying support for features such
as Cascading Style Sheets, JavaScript, and other web languages and
technologies.
Web designers and developers often have been compelled to create
multiple versions of web pages so that their websites could be viewed in
more than one browser. As web technologies continued to develop, it
became more and more frustrating to design pages that either used only
the simplest web technologies in order to function well and be viewable
in all browsers or used the new technologies but at the cost of decreased
accessibility. The differences between Netscape and Internet Explorer
were greatest with the release of the level 4 browsers in 1997, but crossbrowser compatibility has improved since that time due to increased
attention to compliance with web standards in newer browser versions.
The recommendations issued by the W3C are known as web standards.
Through the work of many individuals and with the help of organizations
such as the Web Standards Project (www.webstandards.org), both the
web community and the browser developers have begun to address the
problems of browser incompatibility and incomplete support for web
standards. Although no browser currently offers complete support of
Part III
Web Standards
4209c13.qxd 2/7/03 4:58 PM Page 422
422
Chapter Thirteen
web standards, the latest browsers (Internet Explorer 6 and Netscape 6
and 7) support the W3C specifications for HTML 4.01, XHTML 1.0,
XML 1.0, ECMAScript 262 (the standard version of JavaScript), Cascading Style Sheets level 1 (CSS1), and most (but not all!) features of
Cascading Style Sheets level 2 (CSS2).
The browser manufacturers are not the only ones that need to address
the issue of compliance with current web standards. Web designers and
developers also must learn to design and create web pages that comply with
web standards. This is not only economical; it also ensures that pages
created today will continue to be accessible in the browsers of tomorrow.
To learn more about web standards:
8 Visit the Web Standards Project at www.webstandards.org.

8 Check out the specifications themselves on the W3C site at
www.w3.org.
8 See the article by Paul Boutin, Web Standards for Hard Times, at
http://hotwired.lycos.com/webmonkey/02/33/index1a.html.
Support for Web Standards

in Internet Explorer 6
According to the Web Standards Project (www.webstandards.org/about/),
current web standards include four different standards categories.
Structural Languages: HTML 4.01,

XHTML 1.0, XHTML 1.1, and XML 1.0
Internet Explorer (IE) 6 supports HTML 4.01 and XHTML 1.0 and offers
some support for XHTML 1.1. IE 6 offers the most support for XML 1.0 of
any current browser. For example, if an XML document is well formed (in
other words, follows the syntax rules of XML), the XML markup will appear
in Internet Explorer 6. It is easy to see the overall XML document structure
from this display, as shown in Figure 13.1. Netscape Navigator and Opera,
on the other hand, show the content contained in the XML markup but
do not display document structure. As you can see in Figure 13.2, the
XML content is displayed as one line of text in Netscape 7.
4209c13.qxd 2/7/03 4:58 PM Page 423
supplier.xml displayed in Internet Explorer 6
FIGURE 13.2:
supplier.xml displayed in Netscape Navigator 7
Part III
FIGURE 13.1:
423
TIP
Both CSS and XSLT (Extensible Style Language Transformations) style sheets
can be used to display XML content as HTML and XHTML pages.
4209c13.qxd 2/7/03 4:58 PM Page 424
424
Chapter Thirteen
Presentation Languages: Cascading Style

Sheets (CSS) Levels 1, 2, and 3
Internet Explorer 6 offers complete support for the Cascading Style Sheets
level 1 specification and supports most of CSS level 2, including support
for positioning. No current browser supports CSS level 3 (although we
hope that will change soon!).
Object Models: Document Object Model

(DOM) Level 1 (Core) and Level 2
The Document Object Model (DOM) is an application programming
interface (API) for HTML, XHTML, and XML documents. It provides
any scripting or programming language with access to each part of
a document (as long as you use the methods and properties of the
Recommendation). Internet Explorer 6 offers complete support for
the W3C Document Object Model level 1 (Core) and also supports some
features of the Level 2 DOM, including the methods getElementById
and getElementsByTagName.
NOTE
To learn more about the DOM and scripting for browsers, see Chapter 18,
Bringing Pages to Life with Dynamic HTML and XHTML.
Scripting Languages: ECMAScript 262

(the Standard Version of JavaScript)
Netscapes JavaScript and Internet Explorers JScript combined to form
the ECMA-262 standard. The third and latest edition of ECMA-262 is
supported by Internet Explorer 6, as well as all level 6 browsers and
above.
Internet Explorer 6 supports web standards to a greater degree than
any previous Internet Explorer release, but support for web standards is not
100 percent in any current browser.
4209c13.qxd 2/7/03 4:58 PM Page 425
425
In summary, Internet Explorer 6 supports most web standards and

offers strong support for CSS and XML.
Using DOCTYPE Declarations

As you learned in Chapter 3, Creating Your First HTML or XHTML
Document, a DOCTYPE declaration tells the browser which version of
HTML or XHTML a document complies with. A DOCTYPE declaration
includes a document type definition (DTD) attribute value. This DTD
specifies both the elements and attributes that can be used in the document, as well as the rules for the structure of the document. For example,
the following DOCTYPE declaration tells the browser that this page
complies with the XHTML 1.0 strict DTD:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
This DOCTYPE specifies that the document has a root element of html, uses
the elements and attributes of XHTML 1.0, does not include presentational
markup (strict), and is in the English language.
See Chapter 3 for more information about using DOCTYPE declarations in HTML
and XHTML documents.
The DTDs are included in the W3C specifications and can be viewed at
the W3C site (www.w3.org). Although a DOCTYPE declaration is not required
for an HTML or XHTML page to be displayed in a browser, the newer
browsers (6 and above) use the DOCTYPE declaration to make decisions
about how the page should be displayed.
In Internet Explorer 6, if no DOCTYPE declaration is included, the page
will be displayed in what is called backward-compatibility or quirks
mode, which means that the page will be displayed in the same way as it
would in earlier versions of Internet Explorer (before version 6). If a DOCTYPE
declaration is included, Internet Explorer 6 will do its best to display the
page according to the rules of the specified DTD.
Part III
TIP
4209c13.qxd 2/7/03 4:58 PM Page 426
426
Chapter Thirteen
NOTE
Browsers that use DOCTYPE to determine how a page is displayed include Internet Explorer 6 and above on Windows, Internet Explorer 5 and above on Macs,
and all Mozilla-based browsers, including Netscape 6 and above.
Whats New in Internet

Explorer 6
Internet Explorer 6 was released in August 2001. It includes several
new features both for viewers and for web designers and developers.
Important new features are discussed in the following sections.
WARNING
Internet Explorer 6 will not work in Windows 95 or earlier versions of the
Windows operating system.
The Image Toolbar

The image toolbar is new in Internet Explorer 6. This toolbar appears
whenever a viewer moves the mouse across an image on a web page. (The
image size must be at least 200 pixels in height and width for the image
bar to appear.) It includes four functions that enable the user to save, print,
email an image, or open the My Pictures folder easily. These four functions
are displayed visually as four icons on a toolbar, as shown in Figure 13.3.
FIGURE 13.3:
The image toolbar in Internet Explorer 6
4209c13.qxd 2/7/03 4:58 PM Page 427
427
The image toolbar can be distracting to the visual presentation of a page

because it appears whenever the viewer moves the mouse over any image
on the page. Although it makes it easier for a viewer to access those four
functions, all of the functions can be accessed as usual by right-clicking
on the image and using the context menu.
To disable the image toolbar in pages you create, insert the following
line of code in the head section of your documents:
<meta http-equiv=imagetoolbar content=no />
To disable the image toolbar for a specific image, add the galleryimg
attribute to the img element, as in the following:
<img src=cat.gif alt=tabby cat height=250 width=250
galleryimg=no />
Part III
To disable or enable display of the image toolbar in your browser, choose

Tools Internet Options from the Internet Explorer menu bar, and then
click on the Advanced tab and check (enable) or uncheck (disable) the
Enable Image Toolbar option in the Multimedia section, as shown in
Figure 13.4.
FIGURE 13.4:
Disabling the image toolbar in Internet Explorer 6
4209c13.qxd 2/7/03 4:58 PM Page 428
428
Chapter Thirteen
TIP
For more information on configuring the new features of Internet Explorer 6,
see Customizing New Browser Features at www.microsoft.com/windows/
ie/using/howto/default.asp.
The Media Bar

The media bar enables the viewer to locate and play media files within the
browser window itself rather than in a separate media player window. It
includes an HTML content area and a media player control that enables
the viewer to play music, video, or mixed-media files in the browser window.
This can be advantageous if your page includes multimedia content that
is viewable in the Windows Media Player and you want the viewer to see
the multimedia files in the browser window.
TIP
To learn more about including multimedia in your web pages, see Chapter 15.
The media bar settings can be accessed by clicking the Media icon
on the Internet Explorer 6 toolbar or by choosing View Explorer Bar
Media. The media bar (see Figure 13.5) will also appear the first time a
user clicks on a media file link on a page in Internet Explorer 6. The
first time the media bar appears, the user is offered the option to play
media files in Internet Explorer. Those settings also can be accessed
at any time by clicking the down arrow labeled Media Options in the
media bar.
The media bar is enabled by default. To disable the media bar in your
browser, choose Tools Internet Options from the Internet Explorer
menu bar, click on the Advanced tab, and check (disable) the Dont
Display Online Media Content in the Media Bar, as shown previously in
Figure 13.4.
You can use scripting to access the mediaBar object and its properties
to control the playback, display, and HTML content of the media bar. You
also can format links to media files that specify that the files wont play
in the browser window, regardless of the users media preference settings.
When the user clicks on this media file link, the file will open in a separate
4209c13.qxd 2/7/03 4:58 PM Page 429
429
Windows Media Player window or other appropriate application for the

media file type. To ensure that a media file opens in a separate window,
include target=_blank in the link, as shown in the following code:
<a href=myMusic.wav target=_blank>My Music</a>
The media bar in Internet Explorer 6
NOTE
To learn more about scripting for the media bar, see Using the Media Bar in
Internet Explorer at http://msdn.microsoft.com/library/default
.asp?url=/nhp/default.asp?contentid=28000441.
Expanded Privacy Features

Internet Explorer 6 includes enhanced privacy features based on the
Platform for Privacy Preferences (P3P) Recommendation of the W3C.
The specification became a full W3C Recommendation in April 2002
(after the release of Internet Explorer 6) but was available as a proposed
Recommendation at the time Internet Explorer 6 was developed. P3P is a
web privacy standard that specifies preferences and guidelines for the use
of cookies (small text files that websites store on your computer so that
they can identify you when you visit the site again).
Part III
FIGURE 13.5:
4209c13.qxd 2/7/03 4:58 PM Page 430
430
Chapter Thirteen
Internet Explorer 6 allows the user to set preferences for cookies. It
includes six levels of preferences, including Accept All Cookies, Reject All
Cookies, and four choices in between. The browser monitors all incoming
cookie traffic based on the users chosen privacy level. To access the privacy
settings, choose Tools Internet Options from the Internet Explorer
menu bar and then click on the Privacy tab. Figure 13.6 shows details of
the Medium High privacy setting. As you can see at the bottom of the
figure, the user also can choose to override the chosen setting for individual
websites.
FIGURE 13.6:
Privacy settings in Internet Explorer 6
How does this affect you as the web developer? Websites that distribute
cookies and want to be displayed in Internet Explorer 6 need to create a
privacy profile and save it as an XML file named p3p.xml that resides in
the root directory of the site. When an Internet Explorer 6 user visits the
site, the browser reads the p3p.xml file for that site and compares it to
the users chosen privacy preferences. The browser then allows the cookie
to be served if the sites privacy profile is compatible with the users privacy
preferences or alerts the user if it is not compatible.
4209c13.qxd 2/7/03 4:58 PM Page 431
431
NOTE
For additional information on creating privacy profiles for your websites, see
the W3Cs Resources for P3P Implementation at www.w3.org/P3P/
develop.html and the P3P 1.0 specification at www.w3.org/TR/P3P/.
Internet Explorer 6 has deleted some major features from previous

versions. Internet Explorer 6 does not support the use of Netscape-style
plug-ins and instead supports only the use of ActiveX controls. The
main plug-in affected by this decision is the Apple QuickTime plug-in.
Apple has provided an ActiveX control for QuickTime that can be downloaded at www.apple.com/quicktime/download/qtcheck/.
Internet Explorer 6 also no longer includes the Java Virtual Machine,
so if you want to view some of the million web pages that use Java applets,
you will need to install the Java Virtual Machine. If you upgraded to Internet
Explorer 6 from a previous version, the Java Virtual Machine will still be
available. Otherwise, you can download it at http://java.sun.com/
getjava/download.html.
When we talk about optimization, we are talking about two different

things:
8 Adding functionality (through elements, attributes, and properties)

not present in other browsers.
8 Making sure that the code you write is clean and clear and takes
the minimum time to load into the browser.
Adding Functionality
This is the most exciting aspect of optimization, so this is where well
begin. Adding functionality to a web page isnt as complicated as it sounds.
You dont need to write pages of HTML or learn complicated scripting
languages. Adding functionality generally means only making small
adjustments or tweaks to the HTML or XHTML and letting the browser
do the rest.
Lets begin by looking at how to optimize the layout of the page.
Part III
Optimizations for Internet

Explorer 6
4209c13.qxd 2/7/03 4:58 PM Page 432
432
Chapter Thirteen
Page Layout
Figure 13.7 shows a web page in Internet Explorer 6 containing a couple
of paragraphs of text. Notice the margins around the page. These are set
to the default of the browser.
FIGURE 13.7:
A web page in IE 6 with default margins
However, you can easily change the margins of the page to any number
of pixels you want by using the topmargin and leftmargin attributes of
the body element.
<body topmargin=0 leftmargin=0>
The result is shown in Figure 13.8.
FIGURE 13.8:
The same page in IE 6 with top and left margins set to zero
4209c13.qxd 2/7/03 4:58 PM Page 433
433
If you wanted to set a large margin at both the top and left side of the
page, you would set them as follows:
<body topmargin=50 leftmargin=50>
The values for topmargin and leftmargin must be positive integers.

This means that negative values are invalid, and the browser will revert to
the default page margins.
TIP
Neither Netscape Navigator nor Opera supports the use of the topmargin or
leftmargin attribute of the body element and will display the page with
default margin settings if those attributes are used. Both topmargin and
leftmargin are proprietary Internet Explorer attributes that continue to be
supported in Internet Explorer 6.
TIP
If your page is created in frames (see Chapter 8, Dividing a Window with
Frames), you can use marginheight = 0 and marginwidth = 0. These are
valid HTML 4.01 attributes for the frame and iframe elements. If you are using
CSS (Chapter 16), you can use body {margin: 0;}.
Once upon a time, that blue underlined text of a hyperlink was unmistakable. Nowadays, with so much color and excitement on Web
pages, hyperlinks can blend too easily into the background. When you
want them to stand out, one of the best ways is to use colorbut not a
single color! Its far better to make them change color as the visitor moves
the mouse pointer over them.
The great thing about this is that it is easy to do, and you need to code
it only once on the page for all hyperlinks on that page to behave in the
same way.
To perform this magic, youll use a web technology called Cascading
Style Sheets (CSS). Internet Explorer 6 supports the hover pseudo-class
from the CSS level 2 specification, which is the link pseudo-class well
explore in this section.
NOTE
Cascading Style Sheets are covered in greater depth in Chapter 16.
Part III
Making Hyperlinks Hover
4209c13.qxd 2/7/03 4:58 PM Page 434
434
Chapter Thirteen
Lets start with a web page that has three hyperlinks. The code is
shown in Listing 13.1, and the page is shown in Figure 13.9.
Listing 13.1: A Web Page with Three Hyperlinks
<!DOCTYPE html PUBLIC
-//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<title>Links</title>
<meta http-equiv=Content-Type
content=text/html; charset=iso-8859-1 />
</head>
<body>
<h1>Links, links, links!</h1>
A link to <a href=mypage.htm>Me</a>!
<br />
A link to <a href=friends.htm>my friends</a>!
<br />
A link to <a href=pets.htm>my pets</a>!
</body>
</html>
FIGURE 13.9:
A web page with three hyperlinks in Internet Explorer 6
4209c13.qxd 2/7/03 4:58 PM Page 435
435
Its quite easy to make these hyperlinks much more visually appealing.
Lets look at the steps:
1. First, add a style block to the head element on the web page.
This is where the Cascading Style Sheet information will go
and consists of the <style> opening and closing tags.
<style type=text/css>
</style>
</head>
2. Next, add XHTML comment tags inside the style block that
you just created. These comment tags are put there in case
someone visits the page with an older browser that isnt capable of understanding the Cascading Style Sheet information
you will add. With comment tags in place, older browsers will
simply ignore anything between the <style> tags. Without
the comment tags, those browsers may throw out error messages or display the page incorrectly.
TIP

</style>
</head>
Part III
It is a good idea to always add the comment tags, even if you know that the
browser your visitor is using can understand CSS.
4209c13.qxd 2/7/03 4:58 PM Page 436
436
Chapter Thirteen
4. Save the web page and view it in Internet Explorer 6. Move
the mouse pointer over the hyperlinks, and watch them
change color. The hyperlinks should turn red, according to
the code above. As the mouse pointer moves off them, they
automatically change back to the original color.
5. If you dont like red, you can choose another color.
<!-a:hover { color: teal }
-->
</style>
</head>
Once you are more familiar with other CSS properties, you can do a lot
more with hyperlinks, such as making them bold or applying an overhead
line when the mouse pointer is moved over them.
NOTE
Netscape added support for the CSS level 2 a:hover pseudo-class in Netscape 6.
Adding a Favorites Icon

This feature, first introduced in IE 5, enables you to add an icon to your
web pages. The icon will be saved along with the page title when an Internet Explorer user adds your page to his Favorites menu, and the icon also
will be displayed in the browser address bar when the page is viewed.
For more information about using this feature, see http://msdn
.microsoft.com/library/default.asp?url=/workshop/author/
dhtml/howto/shortcuticon.asp.
Writing Clean Code

In this chapter, youve learned about web standards and about Internet
Explorer 6s support for web standards. As a web designer or web developer, how can you be sure that the pages you create support web standards?
The easiest way is to validate your pages.
Validating your pages simply means making sure that your pages
follow the rules of the language you are using to create them, whether
that language is HTML or XHTML.
4209c13.qxd 2/7/03 4:58 PM Page 437
437
The W3C offers free validation services for HTML and XHTML and for
CSS. Lets test the document from the previous section in the W3C XHTML
validator at http://validator.w3.org/. The heading on the page says
W3C HTML Validation Service, but it now can validate XHTML documents as well as HTML documents. If your page is available on the
web, you can enter the URL and click the button labeled Validate This
Page. If your page is not yet available online, you can upload the file
from your computer to the validator at http://validator.w3.org/fileupload.html.
Lets use the code from Listing 13.1 and see if our page validates as
XHTML:
1. Type the code in a text editor such as Notepad or SimpleText
and save the file as pseudoclass.html. This file includes an
XHTML 1.0 Transitional DOCTYPE declaration, so it will be
validated as an XHTML 1.0 Transitional document.
3. Check the box for Show Source Input. This option shows
the source code for your document as part of the validation
result. It can be very useful to have the source code at hand
when you are evaluating any error messages from the
validator. You dont need to specify a Document Type
because you have included a DOCTYPE declaration in
the document.
4. Click the button labeled Validate This Document.
Figure 13.10 shows the validation result. The source code (not seen
in the figure) is listed below the results. If we choose, we now can include
the W3C graphic that indicates that this page has been tested and validates
as XHTML 1.0.
Of course, we knew that our code was valid, so lets test our file after
we insert an error. Since we are using XHTML, we used the format <br />
for the line break element. Change one of the <br /> tags to <br>, save
the file, and revalidate it. Figure 13.11 shows the result. This time, the
validator has pointed out the invalid form of the <br> tag for an XHTML
document.
As you can see, using a validator is a free and easy way to test your
pages for compliance with web standards, and it is also a great way to
learn web standards.
Part III
2. Browse to the pseudoclass.html file on your computer.
4209c13.qxd 2/7/03 4:58 PM Page 438
438
Chapter Thirteen
FIGURE 13.10:
Using the W3C validator for pseudoclass.html
FIGURE 13.11:
Validator results point out an error in the document.
4209c13.qxd 2/7/03 4:58 PM Page 439
439
The Web Design Group also offers a free validation service for HTML
and XHTML documents at www.htmlhelp.com/tools/validator/. The
site also includes many support documents for using the validator. The
error message text generated by the Web Design Group validator generally is
much more helpful than the sometimes cryptic error messages generated
by the W3C validator.
With improved compliance with web standards in the new browsers, directing users to a specific version of a page should be a rare event! However,
Internet Explorer and Netscape Navigator, although certainly more alike
than in the past, still differ. Even if your pages are compliant with web
standards, those standards may not yet be supported in both Internet
Explorer and Netscape Navigator. Making separate versions of site pages
is costly, but occasionally it still is necessary. If you have had to create separate versions of web pages for different browsers, consider implementing
JavaScript to detect which browser your users are using. Remember, if
users are not using the browser for which the documents were developed,
theyll get error messages.
Browser detection in the past generally was a simple matter of determining whether users were using Netscape Navigator or Internet Explorer,
using two simple JavaScript methods and properties:
8 navigator.appName to determine the browser name

8 navigator.appVersion to determine the browser version
This worked well for both Netscape Navigator and Internet Explorer
version 4.x or lower and enabled site developers to redirect users to an
appropriate page with the appropriate JavaScript for the version of the
browsers that they were using and the DOM that the version implemented.
With the introduction of newer versions of Internet Explorer (6) and
Netscape Navigator (6 and 7), other browsers such as Opera, and the
multitude of possible operating systems, browser detection became much
more complex.
Current browser detection usually makes use of the userAgent string.
The HTTP 1.1 specification uses a header called userAgent. This header
identifies the client to the server and includes information about the operating system, the browser name, and the browser version. If you use the
Part III
Implementing Browser Detection
4209c13.qxd 2/7/03 4:58 PM Page 440
440
Chapter Thirteen
following simple script, you can find out the userAgent string returned
by your current browser:
<script type=text/javascript language=javascript>
var agent = navigator.userAgent;
document.write (userAgent string: + agent);
</script>
Here are a few examples of the userAgent string returned by this script:
userAgent string: Mozilla/4.75 [en] (Win98; U)
userAgent string: Mozilla/3.0 (compatible; Opera/3.0;
Windows 95/NT4)
userAgent string: Opera/6.05 (Windows XP; U) [en]
userAgent string: Mozilla/5.0 (Windows; U; Win98; en-US;
CDonDemand) Gecko/20010131 Netscape6/6.01)
userAgent string: Mozilla/4.0 (compatible; MSIE 6.0;
Windows NT 5.1)
The first string is returned from a computer running Netscape 4.75

on the Windows 98 platform, the second from Opera 3.0 on Windows 95,
the third from Opera 6.05 on Windows XP, the fourth from Netscape 6
on Windows 98, and the last from Internet Explorer 6 on Windows XP
(note that the value returned for Windows XP is Windows NT5.1). You
can see how browser detection has become much more complex!
Its beyond the scope of this chapter to go into the details of pulling
out the needed pieces of information from the userAgent string, but
for more information on how browser detection works, see the Browser
Detection tutorial by Richard Blaylock at http://hotwired.lycos.com/
webmonkey/99/02/index2a.html?tw=authoring.
If you choose to use browser detection, how can you do so? How do you
sort out Internet Explorer 6 users from those using Netscape Navigator 7?
A few years ago, developers placed links on their web pages that said
something such as, If you are viewing with Internet Explorer, CLICK
HERE.... This had many drawbacks, one of the biggest being that
many of the users themselves didnt know which browser they were
using. Of those who did, not many understood the relevance of choosing
the correct link.
The best solution is one that removes the responsibility from the visitors and does the sorting out in the background, while they are waiting
for the page to load. In order to do this, you need to insert some code into
your web pages that will find out which browser the visitor is using and,
4209c13.qxd 2/7/03 4:58 PM Page 441
441
if it is a different browser from the one you are expecting, redirect the user
to the appropriate web page suited to his browser.
The code that you will use, called a script, is written in a scripting language called JavaScript. If youre now beginning to worry because you
havent used a script before, dont. The great thing about this script is
that you dont need to know how it works. You just need to add it to the
web page and watch it work.
WARNING
According to November 2002 statistics at www.thecounter.com, 10 percent
of web users have JavaScript turned off in their browsers.
Adding the Script

<head>
<title>Browser Detection</title>
</head>
<body>
</body>
</html>
The JavaScript we are going to add will be inserted inside the <head>
tag, after the <title> tag. The script is as follows:
<script type=text/javascript language=JavaScript>
<!-var browser = unknown
var version = 0
var detected = false
var ua = window.navigator.userAgent
if (ua.substring(0,7) == Mozilla) {
if (ua.indexOf(MSIE) > 0) {
browser = Microsoft
}
Part III
Lets start off with an empty XHTML page and look at how to add the
script to it. Heres the script for the empty page:
4209c13.qxd 2/7/03 4:58 PM Page 442
442
Chapter Thirteen
if (ua.indexOf(6.) > 0) {
version = 6
}
}
//Find Internet Explorer 6 users and do nothing
if (browser == Microsoft && version == 56) {
detected = true
}
//Find other JavaScript-enabled browser here and move
//them to another, more suitable page!
if (detected == false) {
location.href = alternate.html
}
//-->
</script>
Notice the line location.href = alternate.html. This is the line

that decides where visitors not using Internet Explorer 6 go. Remember
to change the page name referred to in the script to correspond to the name
of the page you want visitors to be redirected to. A common mistake made
by beginners is to forget to do this and redirect to the same page every time.
This can leave the visitor going around in a loop or going to a dead link.
The complete code containing the JavaScript to redirect those users who
are not using Internet Explorer 6 to a page called alternate.html is shown
in Listing 13.2. The code for the alternate page is shown in Listing 13.3.
Listing 13.2: browser_detect.html
<head>
<title>Browser Detection</title>
<script type=text/javascript language=JavaScript>
<!-var browser = unknown
var version = 0
var detected = false
var ua = window.navigator.userAgent
if (ua.substring(0,7) == Mozilla) {
if (ua.indexOf(MSIE) > 0) {
4209c13.qxd 2/7/03 4:58 PM Page 443
443
browser = Microsoft
}
if (ua.indexOf(6.) > 0) {
version = 6
}
}
//Find Internet Explorer 6 users and do nothing
if (browser == Microsoft && version == 6) {
detected = true
}
Listing 13.3: alternate.html

<head>
<title>Alternate Document</title>
</head>
<body bgcolor=teal>
<h2>This browser is not Internet Explorer 6.</h2>
</body>
</html>
Note that we have used different background colors and have also
included different messages in the body section of these pages to tell
them apart as we test our code. Figure 13.12 shows the page displayed
Part III
//Find other JavaScript-enabled browser here and move

//them to another, more suitable page!
if (detected == false) {
location.href = alternate.html
}
//-->
</script>
</head>
<body bgcolor=green>
<h2>This browser is Internet Explorer 6.</h2>
</body>
</html>
4209c13.qxd 2/7/03 4:58 PM Page 444
444
Chapter Thirteen
when browser_detect.html is opened in Internet Explorer 6, and
Figure 13.13 shows the page displayed when browser_detect.html is
opened in any browser other than Internet Explorer 6.
FIGURE 13.12:
browser_detect.html in Internet Explorer 6
FIGURE 13.13:
browser_detect.html redirects to alternate.html when

opened in Netscape 7.
NOTE
For a common sense approach to the use of browser detection in your pages,
see Browser Detection and Cross-Browser Support at http://devedge
.netscape.com/viewsource/2002/browser-detection/.
Whats Next?
In this chapter, you learned about Internet Explorer 6, web standards,
and testing your pages for compliance with web standards. Now its
time to look at that other major web browser and learn about Netscape
Navigator 6 and 7.

Optimizing WebPage (Sybex)

Uploaded by

Copyright:

Available Formats

Optimizing WebPage (Sybex)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Optimizing WebPage (Sybex)

Uploaded by

Copyright:

Available Formats

SYBEX Sample Chapter

Chapter 13: Optimizing Your Web Pages

4209c13.qxd 2/7/03 4:58 PM Page 419

Written for HTML Complete, Third Edition,

4209c13.qxd 2/7/03 4:58 PM Page 420

Defining the Target Audience

A recent report from StatMarket (www.statmarket.com) shows that

4209c13.qxd 2/7/03 4:58 PM Page 421

Optimizing Your Web Pages for Internet Explorer

files (Chapter 15, Including Multimedia) such as Flash animations,

As you learned in Chapter 2, Getting Acquainted with HTML and XHTML,

4209c13.qxd 2/7/03 4:58 PM Page 422

8 Visit the Web Standards Project at www.webstandards.org.

Support for Web Standards

Structural Languages: HTML 4.01,

4209c13.qxd 2/7/03 4:58 PM Page 423

Optimizing Your Web Pages for Internet Explorer

supplier.xml displayed in Internet Explorer 6

supplier.xml displayed in Netscape Navigator 7

4209c13.qxd 2/7/03 4:58 PM Page 424

Presentation Languages: Cascading Style

Object Models: Document Object Model

Scripting Languages: ECMAScript 262

4209c13.qxd 2/7/03 4:58 PM Page 425

Optimizing Your Web Pages for Internet Explorer

In summary, Internet Explorer 6 supports most web standards and

Using DOCTYPE Declarations

4209c13.qxd 2/7/03 4:58 PM Page 426

Whats New in Internet

The Image Toolbar

The image toolbar in Internet Explorer 6

4209c13.qxd 2/7/03 4:58 PM Page 427

Optimizing Your Web Pages for Internet Explorer

The image toolbar can be distracting to the visual presentation of a page

To disable or enable display of the image toolbar in your browser, choose

Disabling the image toolbar in Internet Explorer 6

4209c13.qxd 2/7/03 4:58 PM Page 428

The Media Bar

4209c13.qxd 2/7/03 4:58 PM Page 429

Optimizing Your Web Pages for Internet Explorer

Windows Media Player window or other appropriate application for the

The media bar in Internet Explorer 6

Expanded Privacy Features

4209c13.qxd 2/7/03 4:58 PM Page 430

Privacy settings in Internet Explorer 6

4209c13.qxd 2/7/03 4:58 PM Page 431

Optimizing Your Web Pages for Internet Explorer

Internet Explorer 6 has deleted some major features from previous

When we talk about optimization, we are talking about two different

8 Adding functionality (through elements, attributes, and properties)

Optimizations for Internet

4209c13.qxd 2/7/03 4:58 PM Page 432

A web page in IE 6 with default margins

The result is shown in Figure 13.8.

4209c13.qxd 2/7/03 4:58 PM Page 433

Optimizing Your Web Pages for Internet Explorer

The values for topmargin and leftmargin must be positive integers.

Making Hyperlinks Hover

4209c13.qxd 2/7/03 4:58 PM Page 434