HyperWrite - Consultancy and Training 

Help Systems, Structured Authoring, DITA, Hypertext, Documentation Technologies

HyperWrite Logo
Skip Navigation Links
Skip Navigation Links

This article describes and demonstrates techniques only applicable to Internet Explorer. Your browser (Mozilla) may not display some parts of this article as Internet Explorer does.

Amazing DHTML - But is it Useful?

Dynamic HTML is not another HTML standard, but is a term used to describe techniques by which Web pages can be made dynamic using JavaScript, Cascading Style Sheets (CSS), and the Document Object Model (DOM). It works on the more recent versions of Internet Explorer and Netscape.

You are probably already familiar with the concepts of JavaScript and CSS. JavaScript is a scripting language used to embed some sort of intelligence into a downloaded Web page. It runs (or 'executes') on the Web browser (or 'client'), and is technically known as 'client-side scripting'. It is most commonly used for validating form entries, such as displaying a message box to indicate that the postcode entered cannot contain alphabetical characters. (See a simulation of a validation result.) Cascading Style Sheets allow formatting to be partially separated from content. In typical use, a Web page contains a link to an external CSS file, which details how the various tags in the page should be displayed in the browser.

The DOM is not so familiar. In essence, it is a concept built into the Web browser where page elements are made accessible by scripting languages. For example, if a paragraph is given a name (or ID attribute), that "object" on the page can be addressed by script. It can therefore be made to change colour, change position, change content, disappear, change size, etc.

For example, you choose to use DHTML to allow different currency amounts to be viewed by linking the original amount to a JavaScript that used DHTML to replace the contents of the link with a second currency, as in this example: USD 1,000.

There are numerous effects that can be devised using DHTML. Probably the most useful is to sort the contents of a table by different columns. (Test the example at the top right of this page by clicking on the column headings.) Probably the most useless is the cursor clock example on this page, that you can hardly have failed to notice. Useless it may well be, but it is certainly a spectacular example of the possibilities of DHTML!

 

Valid XHTML 1.0 Transitional Valid CSS!