Dynamic HTML
For the past few weeks I have been discussing SVG
"Scalable Vector graphics" and the advanced design and
animation capabilities it offers to Web designers.
SVG however, is not the only animation format available
for web design nor is it the first. Dynamic HTML became
widely available in late 1997 with the release of Internet
Explorer 4 and Netscape Navigator 4. Like SVG, Dynamic
HTML is a W3C sanctioned format. Unlike SVG, Dynamic HTML
is built directly on top of HTML. This means that you do
not need a special plug-in or a player in order to make it
work.
Most subscribers to this newsletter know at least a little
HTML while many of you would be classed as expert 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.
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).
If that sounds complicated, in some respect it is. 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 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. If you need an example, take a look at our
Motions example 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
and 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 might 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:
is5fig2
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.
So what is the relationship between DHTML and the new SVG
format being proposed by the W3C and which one should you
use?
SVG in my opinion, is intended to address some of the
shortcomings in DHTML. The most significant of these are
DHTML's lack of support for vector graphics, and the
complexity of animating Objects which requires a knowledge
of a scripting language such as JavaScript. Dynamic HTML
on the other hand, is here today and does not require a
special plug-in. if you post a DHTML page to your web site
it will be viewable by almost everyone.
Whether it is DHTML or SVG, CSS (Cascading Style Sheets)
and JavaScript are common to both. Next week.
================================================
"IMS Web Tips" ISSN 1488-7088
© Copyright 2000 Virtual Mechanics
================================================
"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.
To subscribe send an email to join.imswebtips@list.imswebtips.com or visit www.IMSWebTips.com for subscription information and a list of past articles.
-----------------------------------------------------
If you like the contents of this newsletter, please recommend it to a friend. Not only will you help us to continue to provide you with useful and informative articles, you could also win $10,000. Click here for details.
"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 might 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:
is5fig2
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.
So what is the relationship between DHTML and the new SVG
format being proposed by the W3C and which one should you
use?
SVG in my opinion, is intended to address some of the
shortcomings in DHTML. The most significant of these are
DHTML's lack of support for vector graphics, and the
complexity of animating Objects which requires a knowledge
of a scripting language such as JavaScript. Dynamic HTML
on the other hand, is here today and does not require a
special plug-in. if you post a DHTML page to your web site
it will be viewable by almost everyone.
Whether it is DHTML or SVG, CSS (Cascading Style Sheets)
and JavaScript are common to both. Next week.
================================================
"IMS Web Tips" ISSN 1488-7088
© Copyright 2000 Virtual Mechanics
================================================
"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.
To subscribe send an email to join.imswebtips@list.imswebtips.com or visit www.IMSWebTips.com for subscription information and a list of past articles.
-----------------------------------------------------
If you like the contents of this newsletter, please recommend it to a friend. Not only will you help us to continue to provide you with useful and informative articles, you could also win $10,000. Click here for details.
