PageResource.com - Web Development Tutorials

Ryan's DHTML Tutorial

by Ryan Frishberg
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.

This tutorial will cover some of the basic concepts and some of the potential (and many) frustrations associated with DHTML; it also offers advice on how to overcome the latter. With this foundation, you'll be able to create an infinite number of truly neat effects. And later in the tutorial, we'll cover W3C DOM Level 1, another one of those "nerd initial words." The W3C (World Wide Web Consortium) is the organization issuing many standards for web development. W3C DOM (Document Object Model) allows you to access (and change) almost everything on your page. Before beginning this tutorial, I must caution you. It's not for the beginner; you should have at least a basic knowledge of JavaScript, CSS, and, of course, HTML. If you don't have a strong footing in those technologies yet, let me recommend some good tutorials. A good tutorial on HTML can be found here: PageResource HTML Tutorial ; good CSS tutorials can be found here: PageResource CSS Tutorial; and finally, good JavaScript tutorials can be found here: PageResource JavaScript Tutorial.

Before beginning, let's first give some simple examples of DHTML.

Example 1

OK, time for some dynamic action!!

Next -->


Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy