CNN logo

Infoseek/Big Yellow

Pathfinder/Warner Bros

Barnes and Noble

Site seer half banner

DHTML -- The next wave?

Superfly tutorial

November 6, 1997

From CNN Interactive writer David Mandeville

Dynamic HTML is something you've probably heard of but may not have seen. It's a new concept for the mark-up language that defines the way that your browser displays pages -- the ability to alter the layout of a web page according to a preset pattern or in response to user interaction. That's the hard way to say a user interface you'd expect in a multimedia application built with HTML.

DHTML combines standard tagging with scripting languages and cascading style sheets. Scripting languages, like Javascript or VBScript, are limited programming languages that you can embed in HTML pages. Style sheets have been around a long time, but few people were aware of them. They give page builders control over general layout and presentation. The most recent browser releases (Navigator 4.x and Internet Explorer 3.x) support them at least in part.

Time to upgrade, or, What's wrong with this page?

So you want to see it, right? First, you'll need a browser that can display it ... or maybe two of them. Netscape and Microsoft are carrying their browser war into DHTML, competing to see who gets to be the standard. Meanwhile, the World Wide Web Consortium has already set a standard that neither company complies with completely. That means the pages you find will probably be built to one version or the other and you're almost guaranteed your browser won't be able to display anything built to the other companies specifications. Annoying, huh?

Still, it's cool enough to be worth it. So go get a new browser or two. For Windows 95 or NT, you'll need the 4.x version of either Navigator or Internet Explorer. To see all the DHTML out there, get both. You'll want the latest versions of each. If you're using Macintosh or UNIX, just get Navigator. The beta previews of Internet Explorer for those platforms don't support DHTML yet. And don't expect miracles.

Still having problems? Me, too. DHTML isn't completely cross platform because browsers don't implement it the same way across platforms. Navigator 4.x seems to suffer from the biggest gap in implementation between the Macintosh and Windows platforms. Some sites work fine, so try it anyway; just cross your fingers before you follow a link.

As the new browsers are updated, and when the industry finally turns to a single standard, DHTML will probably be as common as guestbook cgi's. Until then we'll have to suffer through some growing pains.

Check this out

Freefall demo

Now take a quick look at some sites that boast DHTML enhanced pages. Netscape and Microsoft offer galleries demonstrating their version of DHTML and those are good places to start. You'll find some great example of what can be done with this new extension of the web pages.

My favorites are the Alienhead demo at Microsoft and the Freefall Web Design Studio demo at Netscape. Neither is very practical, but they are fun. They are also perfect examples of DHTML that breaks on the opposite browser.

Both sites point to Macromedia's DHTMLZone for examples. More on that next.

Hey, kids, try this at home

So, now you've seen, learn how to do it.

DHTMLzone front page

First off, point your browser at DHTMLZone. In addition to pointing to some nice dynamic sites in the Spotlight, it also offers essays on creating DHTML-enhanced pages and sports some nice combinations of DHTML and Macromedia's plug-in based multimedia features. Nick Heinle's article, "Creating Multimedia with Dynamic HTML: An Overview," introduces you to the how and why of DHTML particularly well. You'll also find tips for creating cross-browser pages and backwards-compatibility for older browser versions.

While you're there, be sure to go through the Superfly tutorial. It's an excellent cross-browser, cross-platform example of DHTML that is both practical and artistic. Plus you can download the source code and follow along with the tutorial.

Next, it wouldn't hurt to read up on the specifications for cascading style sheets on the World Wide Web Consortium (W3C) site. I cannot stress the value of information on this site enough. These are the people who are trying to shape the future of the Internet into a form everyone can use, not just the followers of one or another proprietary system. Here you can find all the commands and implementations for all to the standard style sheet functions. The information may be a little difficult to understand if you've never dealt with HTML before, but it's fairly easy to learn.

Both sides of the browser war offer developer's guides for DHTML on their respective sites. I highly recommend spending some time looking through the information on them. These are good resources for tips and shortcuts as well the offering answers for the bits you just can't seem to figure out on your own.


Related sites:

Site Seer Archives
See previous site seer reviews.
External sites are not endorsed by CNN Interactive.
Some newsgroups may

Infoseek search  

Message Boards Sound off on our message boards

You said it...
To the top

© 1997 Cable News Network, Inc.
All Rights Reserved.

Terms under which this service is provided to you.