THE FIRST PRIORITY of any Web page/site should be that it has a purpose and then has copy/content that will advance that purpose. If you are not offering something uniquely interesting or useful then don't bother starting up your text or HTML editor.
After you've got that, then begin your page or site and markup
the content according to the basic logical structure using HTML
2.0 standard level tags and techniques (which can be found at:
http://www.w3.org/MarkUp/) with paragraphs
<UL>, <OL>, <MENU>, <DIR>; <BLOCKQUOTE>; <EM>; <STRONG>;
<I>; <CODE>; <CITE>; entities
<BR>; etc. Also, add header tags
n = 1, 2, 3, 4, 5, or 6 ) if they are appropriate
to the material. Then validate the page using a HTML validator
at the HTML 2.0 level and do a spell and grammar check.
Now you actually have a page with a purpose and content that even has all or nearly all of its words spelled correctly. It also should work as intended with all Web browsers. So you are one step ahead of 95% of all other pages/sites on the Web.
Okay, so now you want to spice it up. So add images. Make them as small (in H X W, and number
of colors or compression) as aesthetically possible (preferably less than 20K),
and make sure you provide descriptive alternate
text with the images
<IMG SRC=" " >.
Also, add in any links
<A HREF=" ">.
Then validate your pages again at the HTML 2.0 level and check your pages links.
Now you've got a page that not only has a purpose and unique content, but also looks pretty good and can be accessed by everyone.
But, you still may want to add icing, so now you can very carefully and selectively
add recommended HTML 4.0 features (available at
Begin by adding the
<!DOCTYPE> declaration as the first
line on your document. It must be placed before
<TITLE> (and the
<HTML> tags, if included). The current HTML 4.0 Transitional
<!DOCTYPE> declaration is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
Once you add the
<!DOCTYPE>, now you can add centering where appropriate using
ALIGN=CENTER> for paragraphs or images
<Hn ALIGN=CENTER> for headers
n = 1, 2, 3, 4, 5, or 6.
Also you could add an appropriate GIF background (or background color)
with both contrasting text and links colors and you may want
tags to text where appropriate. Also, you may want to wrap text
around your images for those browsers which are capable of rendering
your page in this way by adding,
align = left or,
align = right within your image
tags. Still no harm; no foul for everyone viewing your page (even
if they can't wrap the text).
Validate your page again, this time at the 4.0 Transitional level and check your spelling again.
Now you should have a page and site that is both visually interesting
and will look good even if one of the "less capable"
browsers is used to access it. Also, those with low bandwidth
and high bandwidth won't need separate pages, nor will text-only
browsers because you've provided
ALT text. All can
use this page according to their browser's optimum capabilities
or settings and options and you aren't getting in the way of a
clear presentation for anyone using any of the features thus far.
Okay, so now at some point you may want to add forms, and nearly
all browsers support these today. Also you may want to include
an e-mail link adding a
mailto: with a visible mailing
address as an alternative for those with browsers that may have
trouble with the
mailto: or form feature.
So even up until this point, creating two separate pages for low and high bandwidth or for specific browsers is unnecessary.
Now, if you still find you can't live without tables and you must have them try to build them so older non-table browser versions will get a reasonable presentation as well. Alan Flavell's Web Page on tables can be invaluable in this regard and can be found by searching Alta Vista or Lycos, etc.: Flavell tables.
So even with all this icing you still will have a page that everyone can use and again is both visually interesting and will look good even if one of the "less capable" browsers is used to access it.
If you have to go further, you may want to create a few small, efficient, and well-crafted animated GIFs that would spice up the presentation for those with browsers that support animated GIFs while still rendering the static first or last frame of the graphic for others: again no harm; no foul for everyone viewing the page (though it's a good idea to limit the number of loops, otherwise, infinite loops eventually could put a strain on user's resources who have browsers with animation capability).
Part of authoring a good Web page is knowing what to leave out and when to stop. Adding one-browser-only and cutting-edge features often can create a one-browser-only Web page and, therefore, not a "world-wide" Web page. Despite their inclusion in the HTML 4.0 recommendation, "frames" are one of the features that fits into this category. For example, many browsers do not support frames. In addition, for some individuals frames can be annoying. One annoying feature (bug) is that they often force a browser to render images even if it is set with the images off. So just for starters, you may be harming low bandwidth users and/or forcing images upon those who prefer the efficiency of browsing with images off.
Java, to a large extent is still in beta and support for a portion of the Web audience (e.g., Windows 3.1x users) is still not widespread or at least not consistent. And most that I've seen nets little real benefit to viewers yet in relation to all the extra work and bandwidth an application may consume. In other words, currently in most cases, its marginal cost is not yet worth its marginal benefit. That will change when most have an ISDN, T1, or cable line; more powerful computers; 32 bit operating systems; and/or the language matures. But at the moment, the "sweet spot" for this language has not yet been reached.
On a more positive note, one of the most promising newer features available (now available in MS Internet Explorer 3.x and 4.x and Netscape 4.x as well as a few less widely known browsers) to spice up your documents, while still keeping them portable, is Cascading Style Sheets (CSS-1). With a CSS-1, you can suggest a specific style for your documents.
With a CSS-1 template you can specify point sizes (relative and absolute), page margins, leading (spacing between lines), indents, and text background colors. This can be accomplished either by linking to a detached style sheet from your HTML document (Web page) or by embedding a style sheet in your page, or by adding inline styles to your page.
With a CSS-1, also you can create a number of formatting variations for a single
HTML tag. Further CSS-1 information is available at
The author, Stephen Traub, owner of Web Page Re<p>air, can be reached by e-mail at email@example.com, or by phone at 978-462-4347. Mr. Traub has a B.A. from Harvard University cum laude in Social Science, and is a member of The HTML Writers Guild.
We'd like to help you get the most from your Web page(s). If that's what you want as well, contact me, Stephen Traub at firstname.lastname@example.org. If you're undecided, see my articles, "Widen Your Web Site's Audience", and "What You See is Not What Others Get on the Web". Or see my background information or comments from those we've helped, then contact me. I guarantee that you will be satisfied with the results.
P.S. Thanks for stopping by. We appreciate your visit. While you're
here, check out some On-Line Tools You Can Use,
Free Web/Internet Software, The
Mispelled Misspelled Word of the Week, or our
Java and GIF Animation Test Page.
Web Page Re<p>air (Front Page)
Widen Your Web Site's Audience
What You See is Not What Others Get
On-Line Tools You Can Use
Free Web/Internet Software
Comments From Those We've Helped
Resumé of Stephen Traub
Mispelled Misspelled Word of the Week
Java(Script) and GIF Animation Test Page
http://www.shore.net/~straub/wprmultb.htm, was last updated March 3, 1998.