Home / Web Building Tutorials / Beginner's Guide to DHTML

 

 

CodingForums
Having trouble with scripting? Visit our help forum to get the answers you need.

Jump to...
-Free JavaScripts
-JS tutorials
-JS Reference
-DHTML/CSS

-Free applets
-Web Tutorials
-Link to Us!

.
Red_CurlyC035.gif (995 bytes) What is DHTML?

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:

<script>
document.write("This is text created on the fly!")
</script>

"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:

<input type="button" onClick="writeconent()" value="text">

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.

-Tutorial Introduction
-What is DHTML?
-DHTML in NS- The <layer> tag
-DHTML in IE 4
-Dynamic Content
-Moving elements around in the document
-Creating cross-browser DHTML

DHTML in NS- The <layer> tag

.
http://www.javascriptkit.com
CopyRight 1997, 1998 JavaScript Kit. NO PART may be reproduced without author's permission.