Most subscribers to this news letter know at least a little HTML
while many of you would be classed as export Web Designers
with an in depth knowledge. Most people's knowledge of
Dynamic HTML (DHTML) is more limited. The reason is simple.
HTML is a Web Page design language. Despite its name, DHTML
is not. Even though some of you will know how to code some
Dynamic HTML effects, DHTML is a method that combines
several technologies. Many aspects of DHTML can be learned
but never really mastered.
So the question "What is DHTML?" is misstated. The correct
question is "What does DHTML do?" The answer to the
question is of course "Dynamic".
DHTML is a technique for adding motion and user interaction to
a HTML web page. This is accomplished by combining HTML
with Cascading Style Sheets that uses addressable variables and
then programming a scripting language such as Javascript, to
modify and update them once the page has loaded (which it
actually may never do). Got that? I can guess that was as hard to
read as it was to write.
In some respects, Dynamic HTML has taken a relatively simple
concept and added an apparently unnecessary level of
complexity to it. The reason is that DHTML needed to address
the limitations of HTML which was never designed to make
Interactive Animated web sites. If you look at DHTML through
squinted eyes however, you will discover that it is actually quite
simple to understand.
As you know, HTML is used to create the components of a web
page such as text and Images. The ability to position and scale
these components in HTML is however, quite limited. Text can be
assigned a few font and paragraph characteristics but for the most
part, each component follows the previous component in a linear
fashion until the page is completed. Even so, HTML is still the
heart of DHTML and needs to be understood in order to learn
DHTML.
With the version 3.2 Browsers, Cascading Style Sheets or CSS was
introduced. CSS addressed the linear limitations of HTML design
by providing a method to scale and position the various Web Page
components. This is accomplished by surrounding a component
with either one of two new tags. These are the <DIV></DIV>
and <SPAN></SPAN> tags. If you look at the source on
a DHTML page you will probably find these tags are used extensively.
Use View Source to see the code. The Motions DHTML Web Page
Note that the tag includes a "Style" command followed by a list of
values. The most significant of these are the "Position", "Width"
and "Height" styles that are used to compose the HTML components
of the page.
Cascading Style sheets addresses a significant limitation in Web Page
design and brings them a lot closer to Page Layout and Design
techniques. The final step in turning Web Pages into Multi Media
presentations, games and animated stories was introduced in the
Version 4 Browsers to provide a mechanism to change the values in the
Style Sheets. This is accomplished by making the Styles addressable
and then using a programming or scripting language to change them. If
you look at the previous example you will see that each <DIV>
and <SPAN> has a "name" or 'id". This name or id is used as the
address of each component. Finally, a scripting language such as
Javascript, is used to change these values.
Previously I stated that a DHTML page may never actually finish
loading. This is the case in our example. The reason is that before
the browser gets to the end of the page, a Script loop is used to change
the values in the component styles. While the loop is running, the page
is still being loaded. A slightly modified version of the loop in our
example looks like:
This loop is started "onload" and repeats indefinitely when the
'frameloop' function calls itself.
Simple n'est-pas? (HTML to define the components of a Web
Page) + (CSS to position and scale them) + (a scripting
language to change the CSS values) = Dynamic HTML.
Someone once said that in order to master Web Page design
you must know at least a little of the technology behind it (it
may have been me). On the other hand my kids claim that
understanding it gives them a headache.
"IMS Web Tips" is a weekly news letter for all web site managers regardless of experience who are looking for detailed information on
creating, maintaining and promoting their web sites.
