|
Beginner Tip:
Do I Need DHTML?
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
Maybe. Dynamic HTML (DHTML) is overkill if you just want to include a simple image rollover on your page - like using a chainsaw to cut a tomato. However, DHTML may be for you if you need to develop special effects that don't require plug-ins.
Before you get started though, you must understand the basic principles of DHTML design.
What Makes HTML Code Dynamic?
Basic HTML defines the components of a Web page so the browser can display them. It was never meant to handle animations or interactivity, yet those are just the features that many Internet users now expect. DHTML is a response to the limitations of HTML.
Quite simply, DHTML is HTML that changes after the browser has loaded the Web page. Generally this is in response to actions by the user (onClick, onMouseOver, etc.). Dynamic effects range from simple popup windows to elaborate animations and special effects.
Components of DHTML
The term DHTML is a little misleading. It implies that there is a single magic characteristic that turns plain HTML into a DHTML page. Actually, DHTML is a combination of several different browser features that work together to make Web pages more dynamic and interactive.
You don't "learn DHTML" per se, but instead learn how to integrate these components into your page to make it dynamic.
- HTML is the core of DHTML. You have to understand the basics before you ever even consider making your plain HTML dynamic. Check your HTML code for errors with NetMechanic's HTML Toolbox and correct them before they cause problems in your DHTML code.
- Cascading Style Sheets (CSS): Plain HTML defines a document's structure, while CSS give you precise control over a document's presentation. They define the font, color, size, and display attributes of elements on the page. With DHTML, you use the CSS properties of a page element to change the element's display.
- Document Object Model (DOM) takes the individual components of the HTML document and organizes them into a hierarchal structure of named objects. You must structure your HTML code to meet the DOM requirements before you can implement DHTML effects.
- JavaScript is the most commonly used scripting language for creating DHTML effects. Since Netscape and Explorer implement DHTML differently, the first component of any DHTML application is usually a JavaScript browser detection script. JavaScript creates effects by accessing the components of the DOM and changing them on the Web page.
|
Advantages of DHTML
- Quicker Downloads: DHTML files are much smaller than files for comparable effects created with multimedia programs like Shockwave and Flash.
Small files = faster Web pages = happier visitors.
- No Plug-ins Required: DHTML uses tools already recognized by most browsers so visitors don't have to download and install any special software to view your site's contents. This increases your site's usability level.
- Increasing Popularity: The W3C is working on a final standards document for the DOM and has completed the standards document for CSS Positioning (CSS-P). Both Netscape and Explorer have promised to adhere to those standards once they are final. If they keep that promise, then cross-browser DHTML design will be much easier for developers to work with. Become familiar with the concepts now and you'll be one step ahead of other webmasters.
|
Disadvantages of DHTML
- Incomplete support : Both Netscape and Explorer support CSS-P and the DOM, but apply it to HTML document elements using different tags. Many DHTML effects require a browser detection script and two completely different sets of code to make same effect display across browsers.
In Explorer, dynamic objects are called styles and all elements on the page can be accessed and altered after the page loads.
In Netscape 4.x, only objects contained in the LAYER tag can be changed dynamically. The Preview Release 1 version of Netscape 6.0 implemented DHTML in a way that broke existing DHTML code, so be sure to download the most recent Preview Release to test your DHTML.
Remember that the WebTV browser provides very limited support for JavaScript. Avoid DHTML if you expect many WebTV subscribers to visit your site - or use a browser detection script to redirect visitors.
- Learning Curve: Because DHTML is a combination of technologies, developers need to be proficient in HTML, CSS, and JavaScript. The learning curve can be steep. Many sites offer free DHTML scripts for download, but you need to be comfortable editing your own HTML code if you want to include them on your Web page.
Use these free sites with caution. Lots of people include cut-and-paste JavaScript without problems, but it's more complicated with DHTML. Many of these scripts are on the leading edge of what the browsers support, so you're much more likely to have compatibility problems.
- Expensive Tools: If the learning curve is just too steep for you, several companies offer editors that write DHTML code for you. Dreamweaver and Fusion are two of the most popular; you can create effects quickly with them, but the code they produce is often large and hard to edit by hand. Experiment with the free trial versions of their products before you buy.
|
DHTML is not for everyone, but it is growing in popularity, so seriously consider learning the basics. Experience with HTML, CSS, and JavaScript will make you a better webmaster, even if you never use that knowledge to create DHTML.
|
