Dynamic HTML
From Wikipedia, the free encyclopedia.
| HTML |
|---|
|
Cascading Style Sheets |
Dynamic HTML or DHTML is a version of creating interactive web sites by using a combination of static markup language HTML, a client-side scripting language (such as Javascript), and the presentation definition language Cascading Style Sheets and the Document Object Model.
It may be used to create applications in a web browser: for example to ease navigation, to create interactive forms or to create interactive exercises to use in e-learning. Because it can be used to dynamically move elements around the screen, DHTML can also be used as a tool for creating browser based videogames.
DHTML applications that are entirely self-contained in the browser, without server-side support such as a database, are sometimes referred to as Single Page Applications, or SPA. The article Comparison of layout engines (DOM) gives a detailed list of the API available in each browser to use in DHTML applications.
Competing techniques include Macromedia Flash for animation and applets.
Some disadvantages of DHTML are that it is difficult to develop and debug due to varying degrees of support among web browsers of the aforementioned technologies 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 recent browsers, such as Internet Explorer 5.0+, Netscape 6.0+, and Opera 7.0+, is aided by a shared Document Object Model.
Contents |
Structure of a web page
Typically a web page using DHTML is set up the following way
<html>
<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>
</html>
Often the JavaScript code is stored in an external file, this is done by linking the file which contains the JavaScript:
<script language="javascript" src="myjavascript.js"></script>
See also DOM Events
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 request it. In e-learning such a function could be used to display additional hints or an answer the student initially should not see
<html>
<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) {
e=document.getElementById(id)
if (e.style.display == 'none' || e.style.display =="") {
e.style.display = 'block'
this.innerHTML = 'Hide example'}
else {
e.style.display = 'none'
this.innerHTML = 'Show example'}
}
//-->
</script>
</head>
<body>
<h2>How to use a DOM function</h2>
<a href="javascript:changeDisplayState('example1')">Show example</a>
<div id="example1">This is the example. (Additional information, which
is only displayed on request)..............</div>
<p>The general text continues ....<p>
</body>
</html>
A Presentation Application
S5 is a presentation application of DHTML which works in modern browsers (IE 6 included): A single XHTML file contains a slideshow which may be viewed in projector mode slide by slide (browser window set to full screen), as a single web document or printed out as a handout. With DHTML a navigation is built dynamically. Simple animations are possible. Formatting is done with CSS.
External links
- QuirksMode, a comprehensive site with test examples and instructions on how to write DHTML code which runs on several browsers
- Solitaire Mahjongg, a web game application coded in dynamic HTML
- DHTML Lemmings, a classic game
- Haru Ki, a DHTML RPG game
- DHTML Central, a web site with a DHTML library and several javascript components for menus, trees, and a library for simplifying cross-browser DHTML programming.
- DHTML demos
- DHTML games, a collection of DHTML coded action games that provide a good example of what is possible with DHTML in modern browsers. Site includes production notes.
- HTML & DHTML Reference on MSDN
