Dynamic HTML
   HOME

TheInfoList



OR:

Dynamic HTML, or DHTML, is a term which was used by some browser vendors to describe the combination of
HTML The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaSc ...
, style sheets and client-side scripts (JavaScript, VBScript, or any other supported scripts) that enabled the creation of interactive and animated documents. The application of DHTML was introduced by
Microsoft Microsoft Corporation is an American multinational technology corporation producing computer software, consumer electronics, personal computers, and related services headquartered at the Microsoft Redmond campus located in Redmond, Washing ...
with the release of
Internet Explorer 4 Microsoft Internet Explorer 4 (IE4) is a graphical web browser that Microsoft unveiled in Spring of 1997, and released in September 1997, primarily for Microsoft Windows, but also with versions available for the classic Mac OS, Solaris, and H ...
in 1997. DHTML allows scripting languages to change
variable Variable may refer to: * Variable (computer science), a symbolic name associated with a value and whose associated value may be changed * Variable (mathematics), a symbol that represents a quantity in a mathematical expression, as used in many ...
s 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 A server-side dynamic web page is a web page whose construction is controlled by an application server processing server-side scripts. In server-side scripting, parameters determine how the assembly of every new web page proceeds, and includi ...
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 Server-side scripting is a technique used in web development which involves employing scripts on a web server which produces a response customized for each user's (client's) request to the website. The alternative is for the web server itself ...
(such as
PHP PHP is a general-purpose scripting language geared toward web development. It was originally created by Danish-Canadian programmer Rasmus Lerdorf in 1993 and released in 1995. The PHP reference implementation is now produced by The PHP Group. ...
,
Python Python may refer to: Snakes * Pythonidae, a family of nonvenomous snakes found in Africa, Asia, and Australia ** ''Python'' (genus), a genus of Pythonidae found in Africa and Asia * Python (mythology), a mythical serpent Computing * Python (pro ...
, JSP or
ASP.NET ASP.NET is an open-source, server-side web-application framework designed for web development to produce dynamic web pages. It was developed by Microsoft to allow programmers to build dynamic web sites, applications and services. The name s ...
) where the web server generates content before sending it to the client. DHTML is the predecessor of
Ajax Ajax may refer to: Greek mythology and tragedy * Ajax the Great, a Greek mythological hero, son of King Telamon and Periboea * Ajax the Lesser, a Greek mythological hero, son of Oileus, the king of Locris * ''Ajax'' (play), by the ancient Gree ...
and DHTML pages are still request/reload-based. Under the DHTML model, there may not be any interaction between the client and server after the page is loaded; all processing happens on the client side. By contrast, Ajax extends features of DHTML to allow the page to initiate network requests (or 'subrequest') to the server even after page load to perform additional actions. For example, if there are multiple tabs on a page, the 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.


Uses

DHTML allows authors to add effects to their pages that are otherwise difficult to achieve, by changing the
Document Object Model The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document wi ...
(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, 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 Web standards are the formal, non-proprietary standards and other technical specifications that define and describe aspects of the World Wide Web. In recent years, the term has been more frequently associated with the trend of endorsing a set of s ...
, 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 KDE is an international free software community that develops free and open-source software. As a central development hub, it provides tools and resources that allow collaborative work on this kind of software. Well-known products include the ...
, Widgets for
macOS macOS (; previously OS X and originally Mac OS X) is a Unix operating system developed and marketed by Apple Inc. since 2001. It is the primary operating system for Apple's Mac computers. Within the market of desktop and lapt ...
, and Gadgets for
Windows Vista Windows Vista is a major release of the Windows NT operating system developed by Microsoft. It was the direct successor to Windows XP, which was released five years before, at the time being the longest time span between successive releases of ...
, 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 support with extensive DOM access was introduced with
Internet Explorer 4.0 Microsoft Internet Explorer 4 (IE4) is a graphical web browser that Microsoft unveiled in Spring of 1997, and released in September 1997, primarily for Microsoft Windows, but also with versions available for the classic Mac OS, Solaris (operating ...
. 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 Opera is a form of theatre in which music is a fundamental component and dramatic roles are taken by singers. Such a "work" (the literal translation of the Italian word "opera") is typically a collaboration between a composer and a librett ...
7.0+ adopted a shared
DOM Dom or DOM may refer to: People and fictional characters * Dom (given name), including fictional characters * Dom (surname) * Dom La Nena (born 1989), stage name of Brazilian-born cellist, singer and songwriter Dominique Pinto * Dom people, an et ...
inherited from
ECMAScript ECMAScript (; ES) is a JavaScript standard intended to ensure the interoperability of web pages across different browsers. It is standardized by Ecma International in the documenECMA-262 ECMAScript is commonly used for client-side scripting o ...
. More recently,
JavaScript libraries A JavaScript library is a library of pre-written JavaScript code that allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies. Libraries With the expanded demands for JavaScript, an e ...
such as
jQuery jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License. As of Aug 2022, jQuery is u ...
have abstracted away many of the day-to-day difficulties in cross-browser DOM manipulation.


Structure of a web page

Typically a web page using DHTML is set up in the following way: DHTML example


Example: Displaying an additional block of text

The following code illustrates an often-used function. An additional part of a web page will only be displayed if the user requests it. Using a DOM function

Using a DOM function

Show paragraph

This is the paragraph that is only displayed on request.

The general flow of the document continues.


Document Object Model

DHTML is not a technology in and of itself; rather, it is the product of three related and complementary technologies: HTML, Cascading Style Sheets (CSS), and
JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, of ...
. To allow scripts and components to access features of HTML and CSS, the contents of the document are represented as objects in a programming model known as the
Document Object Model The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document wi ...
(DOM). The DOM API is the foundation of DHTML, providing a structured interface that allows access and manipulation of virtually anything in the document. The HTML elements in the document are available as a hierarchical
tree In botany, a tree is a perennial plant with an elongated stem, or trunk, usually supporting branches and leaves. In some usages, the definition of a tree may be narrower, including only woody plants with secondary growth, plants that are ...
of individual objects, making it possible to examine and modify an element and its attributes by reading and setting properties and by calling methods. The text between elements is also available through DOM properties and methods. The DOM also provides access to user actions such as pressing a key and clicking the mouse. It is possible to intercept and process these and other events by creating
event handler In programming and software design, an event is an action or occurrence recognized by software, often originating asynchronously from the external environment, that may be handled by the software. Computer events can be generated or triggered ...
functions and routines. The event handler receives control each time a given event occurs and can carry out any appropriate action, including using the DOM to change the document.


Dynamic styles

Dynamic styles are a key feature of DHTML. By using CSS, one can quickly change the appearance and formatting of elements in a document without adding or removing elements. This helps keep documents small and the scripts that manipulate the document fast. The object model provides programmatic access to styles. This means you can change inline styles on individual elements and change style rules using simple JavaScript programming. Inline styles are CSS style assignments that have been applied to an element using the style attribute. You can examine and set these styles by retrieving the style object for an individual element. For example, to highlight the text in a heading when the user moves the mouse pointer over it, you can use the style object to enlarge the font and change its color, as shown in the following simple example. Dynamic Styles

Welcome to Dynamic HTML

Dynamic styles are a key feature of DHTML.

We've only just begun!


See also

*
Dynamic web page A server-side dynamic web page is a web page whose construction is controlled by an application server processing server-side scripts. In server-side scripting, parameters determine how the assembly of every new web page proceeds, and includi ...


References


External links


QuirksMode
a comprehensive site with test examples and instructions on how to write DHTML code that runs on several browsers.

{{Authority control HTML