4.0 Links
Certain characters are reserved and can
not be used in URLs without encoding (in hexidecimal format).
Some browsers may handle some of these characters properly,
but this does not indicate that these characters are safe
to use without encoding in all browsers. For example, spaces
are special characters that aren't allowed in URLs without
encoding them to . Internet Explorer users will not catch
this problem, but Netscape and many other browsers will,
so you should be especially careful to encode these properly.
In general, you should avoid the use of characters in your
file or path names that may require encoding and you should
always encode a character if there is some doubt as to whether
it can be placed as it is in a URL. As a rule of thumb,
any character other than a letter, number, or any of the
characters $-_.+!*'(), should be encoded to their hexidecimal
equivalents
5.0 Proper Graphics Usage
5.1 Using Colors on Web:
Microsoft Windows Provide 256 different colors
while Mac operating system supports only 216 colors out
the windows 256 colors. To ensure that your graphics display
correctly on all plateforms, you should use colors out of
216 colors avialable on all plateforms.
5.2 Use ALT attribute with IMG tags:
Use the ALT parameter in your <IMG> statement to provide
a text placeholder for the image; for example:
<IMG SRC="home.gif" ALT="Click here to
go to home">
ALT tags have two advantages:
The browser will load the text first, so
readers can start reading while they're waiting for the
full graphic.
You can provide information to readers who are browsing
with graphics turned off.
5.3 Using Image Maps: Make sure that text
navigation links or a textual site map is available to make
the entire site available to users without images.Using
textual navigation or separate graphics may be a viable
alternative to using image maps entirely. Indicate in the
ALT text for any image mapped graphic that it is an image
map
You can provide both a server side and a client side image
map, and you should do so whenever possible, since some
browsers only support one or the other. You can do this
by including both the ISMAP and USEMAP attributes in the
image which you are using for your image map
5.4 Include WIDTH and HEIGHT attributes
with <IMG> tag: Some browser formats the
page with text first and adds the graphics later. If you
don't specify the size of your graphic, the browser will
have to reformat your page when it downloads the graphic.
This results in an annoying screen flicker. If you specify
WIDTH and HEIGHT then most of the browsers will reserve
that much space for the image to be downloaded and screen
flicker is avoided.
5.5 Specifying Colors:
Use the hexadecimal color codes (such as "#FF0000"), and
not the names of the colors (such as "red"), as some browsers
don't support the color names.
5.6 Screen resolution:
If you're targeting a more general audience, stick with
designing for an 640x480 resolution screen for your web
pages.
6.0 Proper Table Usage
6.1 Using nested tables:Some
browsers (for example, Mosaic) give some problems in case
of nested tables. So you should be careful while using nested
tables.
6.2 Lay out text and images before
adding table tags: You can ensure that your table
data is complete and in the right order if you finalize
the table text before you add the formatting tags. This
method may also help you realize that you didn't need a
table to present the information after all. Use tables for
data, which is what they were meant for, not for layout.
6.3 Avoid specifying sizes in <TD>
tags: Fonts and sizes may be different on readers'
systems, so specific <TD> size parameters can result
in truncated text.
6.4 Using color attribute with <TD>:
Many browsers don't support cell background colors, so if
you're using this feature, choose your colors cautiously.
For example, white text on a black background will display
correctly with Internet Explorer, but will disappear (because
it will appear white on white ) in Netscape Navigator 2.0
as table background feature is not available there.So if
you're using color in your tables, choose light backgrounds
and dark text.
7.0 Proper Frame Usage
If possible avoid frames in the first place.
Most of the features of frames can be made available by
proper usage of other HTML tags like table. The main problem
with frames is that when a user is viewing a page with frames
on a browser which does not support frames, then only a
blank page gets displayed. This might confuse the user.To
avoid this problem use the tag <NOFRAMES> to display
information to the user.
For example the following code will work
perfectly in a browser which supports frames
<HTML>
<HEAD>
<TITLE>Frame example</TITLE>
</HEAD>
<FRAME SRC="page1.htm" name="left" >
<FRAME SRC="page2.htm" name="right" >
</FRAMESET>
</HEAD>
But in a browser which does not support
frames only a blank page will be displayed .Instead if the
following code is used then the user at least gets the message
"Your browser does not support frames!".
<HTML>
<HEAD>
<TITLE>Frame example</TITLE>
</HEAD>
<FRAME SRC="page1.htm" NAME="left" >
<FRAME SRC="page2.htm" NAME="right" >
</FRAMESET>
<NOFRAMES>Your browser does not support frames!</NOFRAMES>
</HEAD>
In some browsers like Netscape once the
<BODY> tag has been encountered in a document, the
browser assumed this is a normal Web document, and would
then ignore any <FRAMESET> definitions.
This meant that the following HTML
<HTML>
<BODY BACKGROUND="clouds.jpg">
<FRAMESET cols="150,*">
<FRAME SRC="links.html" NAME="links">
<FRAME SRC="content.html" NAME="content">
</FRAMESET>
</BODY>
</HTML>
would produce a perfectly valid page using
some browsers. However, if this page were viewed with either
Internet Explorer 4.0 or Navigator, only the cloud background
image would be displayed. To make the page work properly
in those browsers, you would need to move the <BODY>
description below the <FRAMESET> description.
8.0 Using The <OBJECT> Tag
Cover all your bases. You can support multiple
browsers simply by adding complementary HTML tags to your
<OBJECT> statements.
Here's your typical <OBJECT> tag for
placing an object (in this case, a Shockwave control) on
your page:
<OBJECT ID="ShockWave1" CLASSID="CLSID:166B1BCA-3F9C-11CF-8075-444553540000"
CODEBASE="http://www.macromedia.com/..." WIDTH=100 HEIGHT=
100 >
<PARAM NAME="swURL" VALUE="my_movie.dcr">
</OBJECT>
Some browsers will display it and will download
the control if it isn't already on the system. Other browsers,
however, do not understand the <OBJECT> tag and will
not know what to do with this syntax.
A better approach would be to use:
<OBJECT ID="ShockWave1" CLASSID="CLSID:166B1BCA-3F9C-11CF-8075-444553540000"
CODEBASE="http://www.macromedia.com/..." WIDTH=100 HEIGHT=100
>
<PARAM NAME="swURL" VALUE= "my_movie.dcr">
<EMBED SRC= "my_movie.dcr" ALT= "CoolShockwave
Movie" WIDTH=100 HEIGHT= 100>
</EMBED>
</OBJECT>
The <EMBED> tag we've added above allows browsers
that don't support <OBJECT> to find and display the
Shockwave control.
For browsers that don't support either tag (for example,
Apple browsers) you can add a <NOEMBED> tag with a
replacement for the control (for example, an image that
illustrates the control) :
<OBJECT ID="ShockWave1" CLASSID="CLSID:166B1BCA-3F9C-11CF-8075-444553540000"
CODEBASE="http://www.macromedia.com/..." WIDTH=100 HEIGHT=100
>
<PARAM NAME="swURL" VALUE="my_movie.dcr">
<EMBED SRC="my_movie.dcr" ALT="Cool Shockwave Movie"
WIDTH=100 HEIGHT=100>
</EMBED>
<NOEMBED>
<IMG SRC="my_image.gif" ALT="Cool Shockwave Movie" WIDTH=100
HEIGHT=100>
</NOEMBED>
</OBJECT>
If you have a Java applet that performs
the same functionality as the Shockwave control, here's
how you can provide access to it:
<OBJECT ID="ShockWave1" CLASSID="CLSID:166B1BCA-3F9C-11CF-8075-444553540000"
CODEBASE="http://www.macromedia.com/..." WIDTH=100 HEIGHT=100
>
<PARAM NAME="swURL" VALUE="my_movie.dcr">
<APPLET CODE="my_applet" WIDTH=100 HEIGHT=100>
<IMG SRC="my_applet.gif" ALT="Cool Java applet" WIDTH=100
HEIGHT=100>
</APPLET>
</OBJECT>
Again, the IMG statement provides a static
image to be displayed in browsers that support neither objects
nor applets.
Thus if any other tag can be used to perform
even part of the functions that the object tag does then
it is advisible to use other tags along with the object
tag.
9.0 Using Scripting
9.1 Java is not entirely stable
on some platforms:Keep this in mind before you
add Java code to your pages, and be sure to test your code
on various browsers (see Testing your pages).
9.2 Some Browsers do not support
scripting: For example, the AOL browser does not
support Visual Basic Scripting Edition (VBScript) or JavaScript,
so try not to make it mandatory for viewing your site. Make
sure that your site functions (at least at some level) without
the scripting code.
9.3 Declare your scripting language.
If you don't specify the scripting language you're using
in the <SCRIPT> tag, for example:
<SCRIPT LANGUAGE="VBScript"> ... </SCRIPT>
the browser will assume the default language
set for the browser. Since scripting languages use different
syntax, you may end up with scripting errors.
9.4 Use comment tags. Delimit
your script with comment tags:
<SCRIPT LANGUAGE="VBScript"> <!--
... --> </SCRIPT>
Otherwise, your script will be displayed
as text in browsers that don't support the <SCRIPT>
tag, and Netscape Navigator will attempt to read the code
as JavaScript, resulting in syntax errors.
10.0 Style Sheets
One way to deal with cross-platform, cross-browser
issues is to provide a plain, default style sheet for all
browsers that doesn't specify font sizes or any of the more
elaborate attributes. Then you can use scripting to find
out which browser the user is using and then serve to that
browser a different, more elaborate style sheet which will
be compatible to it.
11.0 Testing Your Pages
Finally, test your Web pages using as many
browsers as possible, especially:
Search