Getting to Know Dynamic HTML
by Thomas Valentine
|
Dynamic HTML combines the best of HTML, CSS, DOM, and
JavaScript. Used together, there are an unlimited number of
effects or user driven actions that can bring your web pages
to life.
|
Dynamic HTML is the culmination of four specifications -
HTML, CSS, DOM, and JavaScript. The only
thing stopping the creation of amazing web content and
interactivity is the skill level of the developer (you) and
his or her imagination. We hope to conquer the skill level
with this series of tutorials, but you'll have to supply the
imagination. Our advice is to use the existing web content
as the inspiration to fuel your imagination and creative
spirit.
Simply put, Dynamic HTML is any part of your web page
that changes according to user actions or scripted events.
The actions your page might take may be a simple color or
textual change, or dynamic content generated from a
database. The use of cookies is widespread in the
implementation of Dynamic HTML. Cookies can store
information about your user's preference for page content,
display, and formatting. We'll cover cookies in this
tutorial at a later time.
The Limitations of Browsers - The Browser War
In planning for your page content, it is necessary to have
an in depth understanding of the implementation of all of
the four constituent parts of Dynamic HTML. It is also of
paramount importance to know and understand the capabilities
and limitations of each of the two major browsers,
Microsoft's Internet Explorer and Firefox.
Refer to the Language Reference and Tutorials for each
language, which lists any discrepancies between the two.
Internet Explorer, which in my opinion is the best
browser on the market, has a huge list of capabilities, and
has warmly embraced the complete specifications for HTML,
CSS, DOM, and JavaScript. The makers of Internet Explorer
have even gone a step further and included some enhancements
of their own, most notably the Document Object Model's
'document. all' statement, which decreases the amount of
typing that has to be done, but actually increases the
capabilities of DOM as a whole. Internet Explorer now
commands a 65% to 70% market share. In studying the hit
counter statistics for my personal internet sites, I can
conclude that this figure is closer to 85%. The numbers
don't lie.
The Limitations of Browsers - Designing Your Web Site
In designing your web site, the cross browser compatibility
issue must be addressed. Basically, you have two options.
You can either take a branched approach where the user is
redirected to a web page designed solely for that browser.
This is where you can have some really amazing sites (on the
Internet Explorer pages) that visually pop and are exiting
to peruse. The other approach is you can make one page and
have a limited capability because of cross browser
limitations. Some web developers will absolutely not
duplicate their work, and so are forced to implement cross
browser compatibility. This decreases the functionality and
interactivity of your site while increasing complexity.
Basically, if Netscape would get on the bandwagon and
join the new millennium, web sites would be infinitely more
entertaining and more gripping to the user. Since they are
not yet on the wagon, a redirecting script is almost
essential to most modern websites with dynamic content of
any type. The script below has been used by us many times,
and works great, even in older versions of the two major
browsers. Take a look.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Final//EN">
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var isNav, isIE
if (parseInt(navigator.appVersion)) {
if (navigator.appName == "Netscape") {
isNav = true
} else {
isIE = true
}
}
if (isNav) {
top.location.href = "URL to Navigator Main Page"
}
if (isIE) {
top.location.href = "URL to Internet Explorer Main Page"
}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
Basically, the above script redirects the users visiting
your web site to a page intended for the browser they are
using. Opera users will be directed to the Netscape pages,
as Opera returns an id of 'NN' or 'Netscape' when queried by
this script.
Working with Forms in JavaScript
The JavaScript Chronicles
The Four Partners of DHTML
The JavaScript Chronicles
JavaScript Introduction
Part 2: Data Types
Part 3: Arrays
Part 4: Operators
Part 5: Conditional Statements
Part 6: JavaScript Functions
Part 7: Pattern Matching - The RegExp Object
Part 8: Introduction to Server Side JavaScript
Part 9: Server Side JavaScript Mail Sending
Part 10: Server Side JavaScript and File Manipulation
Part 11: Working with Forms in JavaScript
Part 12: Getting to Know Dynamic HTML
|
