Close

Brushing Up on DHTML

Recently I was looking into how to spruce up a couple of web sites that I oversee, and I stopped at W3Schools.com. I’ve written before about the great, free online tutorials found at this site. After poking around the site, I decided to get deeper into Dynamic HTML (DHTML), which is a worthwhile pursuit if you want to improve the look and behavior of a static site.

DHTML, of course, is not a language unto itself. It’s the art of combining HTML, JavaScript, DOM and CSS. If you don’t already know much DHTML and want to investigate it, you’ll want to have a basic working knowledge of all of the topics just cited first. If you do have that, though, you can start doing nice looking things right away.

The W3Schools DHTML tutorial is particularly good because it allows you to try examples, publishing them to a web page, so that you can see how your results will look. The tutorial does a nice job of giving you examples to try involving JavaScript, DOM, HTML and CSS.

The tutorial’s discussion of event handlers is particularly worthwhile. Event handlers let you specify to execute code when an event occurs. An event may be defined as a user clicking on a button or object, or the submission of a form, or many other examples. I was quickly able to define some nice text effects on a page, triggered by clicking on various components of the page.

In less than an hour, the W3Schools tutorial can give you a broad working knowledge of many ways to make a site more dynamic. After you go through the examples and look at your published results, you’ll be able to riff on lots of new types of web development ideas.

One thing to note is that more involved DHTML ideas can sometimes cause incompatibilities across browsers. For that reason, many web developers favor pure DOM scripting and the like. But for many kinds of simple enhancements to a static site, from drop-down menus to text effects, DHTML is easy to put to work.