WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS Properties
HTML 4.01 Tags
Site Management
WD Forums

    Web Video
    Expression Web



    Forum, Blog, Wiki & CMS

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

    The Coffee Lounge
    Computer Issues

Dynamic HTML...Are You Ready to Step Up to the Plate?

by Scott Clark

I know...you figured that now that you'd finally learned how to use tables and forms, and heck, even a little JavaScript, that you've mastered all there was to know about HTML. Then along came Dynamic HTML, or DHTML. Is this something that you should be concerned with? Only if you intend to continue with Web development! But before you start slamming chairs and throwing pencils, you should know a little about what all the excitement is about.

Until now, HTML has been the glue that holds the Web together. It's worked wonderfully, for the most part, for creating Web pages that resemble the flat, lifeless ads which we're used to seeing in magazines and newspapers. The problem is--the Web is not a magazine, and it's not a newspaper! Developers have started to realize that if the Web is to become everything it's hyped up to be, it must be realized that it is a new medium, with new controls, new functionality and new concepts for displaying information.

Most people know that the Web was originally designed to facilitate the sharing of textual information among geographically dispersed individuals. Later, it evolved into a mechanism by which text, graphics, music, video, virtual worlds, information stored in databases, 3D objects, animation and ideas may be transmitted around the world in an instant. Okay, perhaps a little more time than an instant is necessary, but the idea was formed.

We live in a jaded society in which the inhabitants are constantly bombarded with information--on the radio, on television, on cable--and they are used to the various forms this information takes. The expectations of the public have risen from those of a generation who looked to the radio as the ultimate communication tool, to those whose idea of special effects includes multi-million dollar explosions and mega-money flash and pizzazz on the big screen. No longer is the superimposed monster sufficient to scare audiences, and now these expectations have extended to the Internet.

The public expects to see full surround virtual reality on par with "Lawnmower Man," and they aren't going to be satisfied with your simple 5-frame animation that takes 2 minutes to load up. In the Web development world, we often take it for granted that our audience will be delighted to view that slick new animation, when our audience is actually wondering when the "real" stuff is going to appear. They're tired of waiting for Web pages to download, tired of static, flat Web pages which present tired information, and sick of being told to "just wait" for faster bandwidth.

So what's a Web developer to do? Enter Dynamic HTML, which will bring us to the next step towards developing Web pages which will fulfill the public's rising expectations. Dynamic HTML enables the developer to include the audience in their creation, allows the audience to view sites, without additional software which has to be installed in the Web browser (plug-ins), and without additional download time on an already straining modem. Sound interesting? It should....

Dynamic HTML Basics

The first thing to know about DHTML is that it does require the use of one of the latest and greatest Web browsers...namely Microsoft Internet Explorer 4+ or Netscape Communicator 4+. Without using one of these browsers, your HTML will still be good ole' standard HTML. That said, you should be happy to know that you can develop your Dynamic HTML pages using any standard text or HTML editor. As time goes on, there will be more and more WYSIWYG DHTML editors, but at the moment they are still rather limited in their usefulness.

Standard HTML is a combination of different elements, or tags, which are designed to hold data in a certain fashion. Dynamic HTML extends these tags by making "objects" of them, and allowing you to alter the way the data is presented by altering those tag "objects." JavaScript does much the same thing, and is itself used in DHTML to control these tags. Examples of JavaScript objects include window, frame, history, navigator, document, etc. Examples of DHTML objects include head, title, bgcolor, forecolor, src, etc.

Using JavaScript, a developer was able to use standard HTML and change the color of, say, the page's header data, but only by re-drawing the entire page. Using DHTML, the developer may change the color on the fly, so to speak. Other objects, such as image objects, may also be dynamically changed on the fly using DHTML. They may be moved up or down the page at will, in response to mouse movements or simply as the page initially loads up. Form data may be applied to other forms on the same page, and elements may be positioned according to X/Y coordinates across the page. This is what Dynamic HTML is about. To really get a good idea of what can be done with DHTML, take a look at the following examples. Remember that you must be using a 4.0 Web browser.

DHTML examples:

While a comprehensive overview of DHTML is more than what the scope of this column can hope to contain, in the upcoming part II we'll go over some of the basics. Then we'll refer you to some places where you can further your education about DHTML, some books which will get you on your way, and some tools which, although limited, may help you to get some code cranked out that you can start hacking.

[ Dynamic HTML...Are You Ready to Step Up to the Plate?:
Part 2 > ]

HTML5 Development Center

Recent Articles