WEBalley - dhtml - introduction

DHTML - introduction

By David Gardner (11/09/99)

< intro >
netscape
internet explorer
dynamic content
moving elements
cross browser
resources

What is DHTML exactly?
That's a great question, one that I admit I had a lot of trouble finding a straight answer to. I remember seeing a posting on a JavaScript newsgroup that attempted to answer this question with the reply:

"DHTML is the combination of HTML and JavaScript."

I said to myself "Isn't that just a webpage with JavaScript on it then?" I was confused, to say the least. After shuffling through hundreds of search results on search engines for that elusive answer to my question, I still could not find it. So I thought, what the heck, I'll learn DHTML first, then figure out what it is! Now that I'm somewhat a DHTML programmer, I think I'm ready to present you with a decent one-line definition to the word DHTML:

"DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more dynamic."

You see, DHTML is NOT a scripting language (like JavaScript), but merely a browser feature- or enhancement- that gives your browser the ability to be dynamic. What you really want to learn is not DHTML itself, but rather, the syntax needed to use DHTML. Before anything else, you may want to quickly visit Dynamic Drive to see what this language is capable of.
Like I said, DHTML is a collection of features that together, enable your web page to be dynamic. I think its important now to define just what the creators of DHTML meant when they say "dynamic". "Dynamic" is defined as the ability of the browser to alter a web page's look and style after the document has loaded. I remember when I was learning JavaScript, I was taught that you could use the document.write() method of JavaScript to create webpages on the fly. For example:

"Not bad", I remember saying to myself. But what if I wanted to create content not only on the fly, but on demand? Naive I was then, I tried doing just that, by nesting the above code in a function, and calling it via a form button:

Pressing the button was nothing short of a big disappointment. My entire web page was erased, and I was left with only the text the function produced.
That was back then. Now, with the introduction of DHTML, I can alter content on a web page on demand, whenever I bloody feel like it, without having the browser erase everything else. That's what DHTML is all about. The ability of the browser to change look and style even after the document has loaded.
Now that I've got you all excited, I think it's only fair that I put a damper on it. The technology of DHTML is currently at its development stage, with NS 4 and IE 4 differing quite greatly in their implementation of this great technology. Its currently not possible to write one DHTML code and expect it to function in both browsers properly. Furthermore, the two browsers are at different stages in their development of DHTML; from my own knowledge and what I've heard, DHTML in IE 4 is far more powerful and versatile than NS 4's. I don't want to help spread any propaganda, so I'll leave it at that.

About the author
This tutorial was contributed by David Gardner: "As a self-proclaimed webmaster, I try my best to keep up with the latest in web technology. My current endeavor is DHTML, or Dynamic HTML. After hearing a lot about this technology and how it will eventually revolutionize the internet, I thought I had to get off the couch and start learning about it, before I lose the right to call myself a "webmaster". If you're just as clueless as I am when it comes to DHTML, this tutorial is for you. Enjoy, and please feel free to email me if you have questions."