Dynamic HTML - Physical Markup
Example
(view source to see the code)
Dynamic HTML is a new term for a set of old technologies: HTML, Cascading Style Sheets (CSS), Cascading Style Sheet Positioning (CSS), and JavaScript.
Dynamic HTML is really just a set of technologies: HTML, Cascading Style Sheets (CSS), and JavaScript.
HTML, alone, is static and unchanging, cannot respond to user actions, and cannot change itself. If it is used to describe document presentation, it is clumsy and time consuming to change.
Dynamic HTML, on the other hand, separates the document's structure (HTML) from presentation (CSS) thus making it simpler to quickly change the look of an entire web presentation. For example, this web site uses only contextual or logical tags in its HTML markup, such as H1, H2, and P. Tables are used only for tabular data or to glue sliced images back together, namely the header graphic. All of the web site's presentation details are contained in an external stylesheet. The external stylesheet is linked to each HTML document through the LINK tag in the document's HEAD. By making a few changes to the external stylesheet, I can change the look of the entire web site; and I only have to modify one document!
When properly coded, documents are more accessible than web pages that utilize tables for layout. They also degrade gracefully in older browsers and can be indexed more readily by search engines.
DHTML can also make web presentations more dynamic, engaging, and interactive (JavaScript). See WebWoman's JavaScript articles for examples and scripts.
Examples:
- Style Provided By Physical HTML Tags
- This example web document uses physical HTML tags to specify document style. One look at the code and you can see that changing its appearance would be cumbersome and time-consuming: the entire document must be edited! Any additional pages would have to be edited as well to change the web presentation's appearance. Notice that the example uses physical HTML tags such as FONT, B, etc. to specify presentation.
- Style Provided By CSS
- In this example, the web document is marked up with HTML and all stylistic settings are provided by a variety of style sheets. Typically, you would link an external stylesheet to the document and only embed style rules to override the main style sheets settings for select special cases. However, this document shows style rules being attached in various ways for illustration.
- Using CSSP for Animation.
- This example uses CSSP to place each image in its own separate layer on the screen. Once activated, a JavaScript script moves the fish across the screen and behind one of the poles. View Source
Copyright © 1999-2000 by Tina McDuffie