DHTML Tutorial  Hot PDF Print E-mail
Tag it:
Delicious
Furl it!
Digg
NewsVine
Reddit
YahooMyWeb
Technorati
Articles Reviews DHTML
Written by Bogdan V   
Friday, 01 September 2006
Article Index
DHTML Tutorial  Hot
HTML in Netscape The tag
The style object of Internet Explorer
Dynamic content
Moving elements around in the document
Creating cross-browser DHTML


Staying on the cutting edge of web design is a hard but important thing to do. One of the buzzwords around the net is DHTML and DOM. No doubt you may have have wondered exactly what in the world they are. DHTML, Dynamic HTML, allows you to alter the display of your page after it has loaded. I'm sure you've seen neat DHTML effects at numerous sites on the net. And if you've ever looked at some code there, you may have given up on ever coding DHTML. However, don't give in just yet. DHTML is really fun and easy. In fact, it is merely a combination of a scripting language (most commonly JavaScript, which will be used throughout this article), CSS (Cascading Style Sheets), and HTML.



What is Dynamic Hypertext Markup Language


According to Microsoft DHTML (first implemented in IE 4.0) is a set of innovative features which allows web developers to change the rendering and content of a document on the fly without relying on server-side programs (such as Active Server Pages or ColdFusion) or complicated sets of HTML pages to achieve special effects.

DHTML can be described as an interface which makes it possible to access the browser object model though JavaScript or VBScript scripting language.

This way you can control your page more efficiently. And yes, you can actually make a page without HTML tags at all!

Welcome to this tutorial and let us begin!

What is DHTML?

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

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.

DHTML is a collection of features that together, enable your web page to be dynamic. I think its important now to define just what is meant by 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>


But what if we wanted to create content not only on the fly, but on demand? We can do 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 will erase the entire web page and we were left with only the text the function produced.

That was back then. Now, with the introduction of DHTML, we can alter content on a web page on demand, whenever we 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.

The technology of DHTML is currently at its development stage, with NE, IE 5 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 is far more powerful and versatile than NS's.



Last Updated ( Saturday, 20 September 2008 )
 
< Prev