Dynamic HTML

From Free net encyclopedia

Template:Html series

Dynamic HTML or DHTML is a method of creating interactive web sites by using a combination of static markup language HTML, a client-side scripting language (such as JavaScript), the presentation definition language (e.g. Cascading Style Sheets), and the Document Object Model. 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.

[edit]

Structure of a web page

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<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 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

[edit]

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. 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<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';
     showhide.innerHTML = 'Hide example';
    } else {
     e.style.display = 'none';
     showhide.innerHTML = 'Show example';
    }
   }
  //-->
  </script>
</head>

<body>

<h2>How to use a DOM function</h2>
<p><a id="showhide" href="javascript:changeDisplayState('example1')">Show example</a></p>
<div id="example1">
  This is the example. (Additional information, which is only displayed on request) 
  ..............</div>
<p>The general text continues ....</p>
<p></p>

</body>

</html>
[edit]

External links

  • QuirksMode, a comprehensive site with test examples and instructions on how to write DHTML code which runs on several browsers
  • 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.
  • HTML & DHTML Reference on MSDN
  • Dynamic Drive, a web site dedicated to providing free DHTML javascripts with the important feature, that you can actually try the effect/script online and then immediately afterwards, you can cut and paste the script from a text on the very page.
  • walterzorn.com Drag'nDrop & DHTML Library A DHTML JavaScript Library with extended yet easily understandable DHTML API. Provides also Drag & Drop functionality for layers and images, as will be demonstrated on this page. wz_dragdrop.js provides extended DHTML abilities.de:Dynamic HTML

es:HTML dinámico fr:HTML dynamique ko:DHTML it:DHTML he:Dynamic HTML nl:Dynamic HTML ja:ダイナミックHTML pl:Dynamiczny HTML pt:DHTML ru:DHTML sv:DHTML vi:HTML động tr:DHTML zh:DHTML

Retrieved from "http://www.netipedia.com/index.php/Dynamic_HTML"