Dynamic HTML or DHTML is a collection of technologies used together to create interactive and animated web sites by using a combination of a static markup language (such as HTML), a client-side scripting language (such as JavaScript), a presentation definition language (Cascading Style Sheets, CSS), and the Document Object Model. A website, Web site or WWW site (often shortened to just site) is a collection of webpages, that is, HTML/XHTML documents accessible via HTTP on the Internet; all publicly accessible websites in existence comprise the World Wide Web. ... A specialized markup language using SGML is used to write the electronic version of the Oxford English Dictionary. ... HTML, short for Hypertext Markup Language, is the predominant markup language for the creation of web pages. ... Client-side scripting generally refers to the class of computer programs on the web that are executed client-side, by the users web browser, instead of server-side (on the web server). ... JavaScript is a scripting language most often used for client-side web development. ... In web development, Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. ... // Document Object Model (DOM) is a platform- and language-independent standard object model for representing HTML or XML and related formats. ...

A DHTML webpage is any webpage in which client-side scripting changes variables of the presentation 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 — 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 or Perl) where the web server generates content before sending it to the client. Server-side scripting is a web server technology in which a users request is fulfilled by running a script directly on the web server to generate dynamic HTML pages. ... PHP is a reflective programming language originally designed for producing dynamic web pages. ... Wikibooks has a book on the topic of Perl Programming Perl is a dynamic programming language created by Larry Wall and first released in 1987. ...

Uses

DHTML is often used to make rollover buttons or drop-down menus on a web page.

A less common use is to create browser based action games. During the late 1990s and early 2000s, a number of games were created using DHTML. But 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 the 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 Widgets for Mac OS X and Gadgets for Windows Vista, which are based on DHTML code. Mac OS X (official IPA pronunciation: ) is a line of proprietary, graphical operating systems developed, marketed, and sold by Apple Inc. ... Windows Vista is a line of graphical operating systems used on personal computers, including home and business desktops, notebook computers, Tablet PCs, and media centers. ...

The term has fallen out of use in recent years, as DHTML scripts often tended to not work well between various web browsers. Newer techniques, such as unobtrusive JavaScript coding (DOM Scripting), allow similar effects, but in an accessible, standards-compliant way through Progressive Enhancement. The term DOM Scripting refers to programatically accessing the Document Object Model (DOM). ... Progressive Enhancement is a label for a particular strategy for Web design that emphasizes accessibility, semantic markup, and external stylesheet and scripting technologies, in a layered fashion that allows all to access the basic content and functionality of a Web page, using any browser or Internet connection, while also enabling...

Some disadvantages of DHTML are that it is difficult to develop and debug due to varying degrees of support among web browsers of the technologies involved, and that the variety of screen sizes means the end look can only be fine-tuned on a limited number of browser and screen-size combinations. Development for relatively recent browsers, such as Internet Explorer 5.0+, Mozilla Firefox 2.0+, and Opera 7.0+, is aided by a shared Document Object Model. Debugging is a methodical process of finding and reducing the number of bugs, or defects, in a computer program or a piece of electronic hardware thus making it behave as expected. ... Windows Internet Explorer (formerly Microsoft Internet Explorer, abbreviated MSIE), commonly abbreviated to IE, is a series of popular graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems starting in 1995. ... Firefox may refer to: Firefox (novel), written by Craig Thomas, published in 1978 Firefox (film), the 1982 movie starring Clint Eastwood, based on the novel Firefox (arcade game), the laserdisc arcade game based on the movie Mozilla Firefox, a web browser The Red Fox or the Red Panda, based on... Opera is an Internet suite which handles common internet-related tasks, including visiting web sites, sending and receiving e-mail messages, managing contacts, and online chat. ...

Structure of a web page

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DHTML example</title> <script type="text/javascript"> function init() { myObj = document.getElementById("navigation"); // .... more code } window.onload=init; </script> </head> '''<body> <div id="navigation"></div> </body>'''''' == Bold text == ''' </html> 

Often the code is stored in an external file; this is done by linking the file that contains the JavaScript. This is helpful when several pages use the same script:

 <script type="text/javascript" src="myjavascript.js"></script> 

See also DOM Events DOM Events allow event-driven programming languages like JavaScript, JScript, ECMAScript, VBScript and Java to register various event handlers/listeners on the element nodes inside a DOM tree, e. ...

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. In e-learning, such a function could be used to display additional hints or an answer the student initially should not see. This article or section is not written in the formal tone expected of an encyclopedia article. ...

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Test</title> <style type="text/css"> h2 {background-color: lightblue; width: 100%} a {font-size: larger; background-color: goldenrod} a:hover {background-color: gold} #example1 {display: none; margin: 3%; padding: 4%; background-color: limegreen} </style> <script type="text/javascript"> function changeDisplayState (id) { d=document.getElementById("showhide"); e=document.getElementById(id); if (e.style.display == 'none' || e.style.display == "") { e.style.display = 'block'; d.innerHTML = 'Hide example'; } else { e.style.display = 'none'; d.innerHTML = 'Show example'; } } </script> </head> <body> <h2>How to use a DOM function</h2> <div><a id="showhide" href="javascript:changeDisplayState('example1')">Show example</a></div> <div id="example1"> This is the example. (Additional information, which is only displayed on request)... </div> <div>The general text continues...</div> </body> </html> 

See also

• DOM Scripting
• Ajax (programming)

The term DOM Scripting refers to programatically accessing the Document Object Model (DOM). ... Ajax, or AJAX, is a web development technique used for creating interactive web applications. ...

External links

• QuirksMode, a comprehensive site with test examples and instructions on how to write DHTML code which runs on several browsers.
• Introductory DHTML Tutorial for those taking their first steps in DHTML.
• HTML & DHTML Reference on MSDN