Dynamic HTML
Dynamic HTML (DHTML) is an all-in-one word for web pages that use Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and rely on JavaScript to make the web pages interactive. DHTML is a feature of Netscape Communicator 4.0, and Microsoft Internet Explorer 4.0 and is entirely a "client-side" technology. It relies only the browser for the display and manipulation of the web pages and is unrelated to other client-side technologies like Java, Flash.
DHTML excels in creating low-bandwidth effects that enhance a web page's functionality. It can be used to create animations, games, applications, provide new ways of navigating through web sites, and create out-of-this world page layouts that simply aren't possible with just HTML. Although many of features of DHTML can be duplicated with either Flash or Java, DHTML provides an alternative that does not require plugins and embeds seamlessly into a web page.
Although the underlying technologies of DHTML (HTML, CSS, JavaScript) are standardized, the manner in which Netscape and Microsoft have implemented them differ dramatically. For this reason, writing DHTML pages that work in both browsers (referred to as cross-browser DHTML) can be a very complex issue.
Links for more DHTML information:
Microsoft DHTML Documentation
Netscape DHTML Documentation
Cascading Style Sheets
Cascading Style Sheets (CSS) is an addition to HTML that gives developers a sophisticated manner to structure web pages. It does this by separating the content of a web page (the text) from the display (the colors, styles, and positioning).
Cascading Style Sheets Positioning (CSSP) is an extension to CSS that allows pixel-level control over the position of HTML elements.
Links for more DHTML information:
W3C CSS-Positioning
Builder.com's CSS Guide
JavaScript
Contrary to its name, JavaScript is very much unrelated to Java. JavaScript is scripting language built into web browses that controls HTML elements, whereas Java is a high-level programming language for building cross-platform applications (among other things like Applets which are Java programs that can be displayed in a web page).
JavaScript first appeared in Netscape 2.0, and was primarily for scripting the contents of a web page, and providing added functionality to HTML forms, frames, and windows. Netscape 3.0 added more features like image rollovers and audio/video controls. Microsoft Internet Explorer 3.0 (released shortly after Netscape 3.0) also implemented JavaScript, but marketed it as JScript which is essentially the same as JavaScript with a few minor incompatibilities that Microsoft threw in to lure developers into using their version of JavaScript.
Extensions to JavaScript were added in Netscape 4.0 and Internet Explorer 4.0 to give developers a way to manipulate DHTML (HTML elements that use CSS). However these extensions were not standardized before the release of the 2 browsers. And as a result we now have to versions of JavaScript that are largely incompatible.
Links for more JavaScript information:
Netscape JavaScript Guide
JavaScript Reference
Microsoft JScript
The Dynamic Duo
The Dynamic Duo, is a tutorial written by me, Dan Steinman, and is the result of my experimentation and successes in creating Cross-Browser DHTML.
This tutorial focuses primarily on the JavaScript issues involved in DHTML. It only covers the portions of CSSP and JavaScript that can be used in both Netscape and Internet Explorer. By no means does this tutorial cover everything, or necessarly offer the best solutions to a particular task, but rather the things that I have tried and have had good results with.
If you are unfamiliar with JavaScript and CSS, this tutorial may not be the best starting point for you. However, I do start out slowly and cover much of the ground knowledge needed to understand how DHTML works. The programming concepts in this this tutorial are not extremely complex. However, cross-browser DHTML requires a level of debugging skills that can be quite daunting to a beginner. You will be working with browsers that are only partially compatible, and computer languages that are only partially implemented. You will encounter bugs and limitations not only between the 2 browsers, but between different operating systems, as well as between incremental versions of the browsers. This tutorial only scratches the surface of the problems that you will encounter with building your own DHTML pages... and do believe me on this one, I am not kidding.
With that said, I have done my best to lay down a set of guidelines that makes cross-browser DHTML feasible. Following the tips and techniques in this tutorial you can create just about anything you can think of. By time you are finished reading, you will understand nearly all the concepts involved in DHTML, learn a rich set of JavaScript programming techniques using my DHTML API (The DynLayer), as well as learn how to build your very own DHTML objects for creating reusable widgets and components for your website.
I'd appreciate any comments or suggestions you have about this tutorial, I'm always looking for ways to improve it. Also, I'd be very gracious of any contributions you have, including modifications to any code in this tutorial, or any DHTML objects that you've created and want to share with other people. And if you have built a website, game, or application using this tutorial, I would be more than happy to provide a link from my DHTML Resources links page.
| Home | Next Lesson: Cascading Style Sheets Positioning |