DHTML Example

As we know DHTML is the extension of HTMl , so it is necessary to understand the basuc concept of HTML. DHTML a fairly simple language to learn, and most beginning web designers are usually self-taught when it comes to using it for creating a simple web page.

DHTML is a language that makes web pages both interactive and dynamic. It consists of several different components, including Java Script, html, the Document Object Model (DOM) and Cascading Style Sheets (CSS). Using these, a web designer can control how the various elements of a web page are positioned and displayed within a web browser window. All pages designed with create website dhtml utilize client-side scripting, which means that the changes it initiates occur after the page has been fully loaded and viewing has begun. Server-side scripting languages, such as Perl and PHP, run on the server side before the page has finished loading.

Simple DHTML program in javascript to make simple login page

<html>
<head>
<title>
Login page
</title>
</head>
<body>
<h1 style="font-family:Comic Sans Ms;text-align="center";
font-size:20pt;
color:#00FF00;>
Simple Login Page
</h1>
<form name="login">
Username<input type="text" name="userid"/>
Password<input type="password" name="pswrd"/>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form)/*function to check userid & password*/
{
 /*the following code checkes whether the entered userid 
 and password are matching*/
 if(form.userid.value == "myuserid" &&
 form.pswrd.value == "mypswrd")
  {
    window.open('target.html')/*opens the target page while
	Id & password matches*/
  }
 else
 {
   alert("Error Password or Username")/*displays error message*/
  }
}
</script>
</body>
</html>

Syntax to place the images on the page

<DIV id=OuterDiv style="position:relative;
                    width:200%;height:300px">
    <img ID="playboard" STYLE="position:absolute;TOP:83pt;
            LEFT:120pt;width: 200px; height=100px; 
            Z-INDEX:2;" src="rectangle.png">
    <img ID="square" STYLE="position:absolute;TOP:83pt;
            LEFT:0pt;WIDTH:100px;HEIGHT:100px;Z-INDEX:22;" 
            src="square.png">
    <img ID="circle" STYLE="position:absolute;TOP:83pt;
            LEFT:70pt;WIDTH:100px;HEIGHT:100px;Z-INDEX:21;" 
            src="circle.png">
    <img ID="triangle" STYLE="position:absolute;TOP:83pt;
            LEFT:140pt;WIDTH:100xt;HEIGHT:100px;Z-INDEX:21;" 
            src="triangle.png">
</DIV>