Dynamic
HTML, or DHTML, is an umbrella term for a collection of technologies
used together to create interactive and animated websites[1] by using a combination of a static markup language (such
as HTML), a client-side
scripting language
(such as JavaScript), a presentation definition language
(such as CSS), and the Document
Object Model (DOM).[2] The application of DHTML was introduced by
Microsoft with the release of Internet Explorer 4 in 1997.
DHTML
allows scripting languages to change variables in a web page's definition
language, which in turn affects the look and function of otherwise
"static" HTML page content, after the page has been fully loaded and
during the viewing process. Thus the dynamic characteristic of DHTML is the way
it functions while a page is viewed, not in its ability to generate a unique
page with each page load.
By
contrast, a dynamic web page is a broader concept, covering
any web page generated differently for each user, load occurrence, or specific
variable values. This includes pages created by client-side scripting, and ones
created by server-side
scripting (such
as PHP, Perl, JSP or ASP.NET) where the web server generates
content before sending it to the client.
DHTML
is differentiated from Ajax by the fact that a DHTML page is
still request/reload-based. With DHTML, there may not be any interaction
between the client and server after the page is loaded; all processing happens
in JavaScript on the client side. By contrast, an Ajax page uses features of
DHTML to initiate a request (or 'subrequest') to the server to perform
additional actions. For example, if there are multiple tabs on a page, pure DHTML
approach would load the contents of all tabs and then dynamically display only
the one that is active, while AJAX could load each tab only when it is really
needed.
Key features:-DHTML allows authors to add
effects to their pages that are otherwise difficult to achieve, by changing
the Document
Object Model (DOM)
and page style. The combination of HTML, CSS and JavaScript offers ways to:
Animate
text and images in their document.
Embed
a ticker or other dynamic display that automatically refreshes its content with
the latest news, stock quotes, or other data.
Use
a form to capture user input, and then process, verify and respond to that data
without having to send data back to the server.
Include
rollover buttons or drop-down menus.
A
less common use is to create browser-based action games. Although a number of
games were created using DHTML during the late 1990s and early 2000s,[citation
needed] differences
between browsers made this difficult: many techniques had to be implemented in
code to enable the games to work on multiple platforms. Recently browsers have
been converging towards web standards, which has made the design of DHTML
games more viable. Those games can be played on all major browsers and they can
also be ported to Plasma for KDE, Widgets for macOS and Gadgets for Windows Vista, which are based on DHTML code.
The
term "DHTML" has fallen out of use in recent years as it was
associated with practices and conventions that tended to not work well between
various web browsers. DHTML may now be referred to as unobtrusive
JavaScript coding
(DOM Scripting), in an effort to place an emphasis on agreed-upon best practices
while allowing
similar effects in an accessible, standards-compliant way.
DHTML
support with extensive DOM access was introduced with Internet
Explorer 4.0.
Although there was a basic dynamic system with Netscape
Navigator 4.0, not
all HTML elements were represented in the DOM. When DHTML-style techniques
became widespread, varying degrees of support among web browsers for the
technologies involved made them difficult to develop and debug. Development became easier when Internet
Explorer 5.0+, Mozilla Firefox 2.0+, and Opera 7.0+ adopted a shared DOM inherited from ECMAScript.
More
recently, JavaScript
libraries such
as jQuery have abstracted away many of the
day-to-day difficulties in cross-browser DOM manipulation.