Learn DHTML Step by Step

DHTML(Dynamic Hyper Text markup Language)  is NOT a language. It is a TERM describing the art of making dynamic and interactive web pages. DHTML combines HTML, JavaScript, the HTML DOM, and CSS. It is an extension of HTML that enables, among other things, the inclusion of small animations and dynamic menus in Web pages. DHTML is the combination of HTML, Cascading Style Sheets, and Javascript used to create dynamic Web content which can move, hide, or animate as a result of user events. Dynamic Hyper Text Markup Language is a technique in which HTML elements move across the page.

The DOM is separated into 3 different parts / levels:

Core DOM – standard model for any structured document
XML DOM – standard model for XML documents
HTML DOM – standard model for HTML documents.

Below is the table  of content for DHTML lessons.

Event on Double click

Event on Double Click

<html>
<head>
<script>
function gettip(txt)
{
document.getElementById(‘tip’).innerHTML=’is about Create websites by using scripting technologies for the World Wide Web’;
}
</script>
</head>
<body>
<p>Double click the “Paktutorial.com”</p>
<table>
<tr>
<th valign=”top”>Paktutorial.com</th>
<th> </th>
</tr>
</table>
</body>
</html>

OUTPUT:

Double click the “paktutorial.com”

Paktutorial.com

Event onfocus

Event onfocus

<html>
<head>
<script>
function message()
{
alert(“This alert box was triggered by the onfocus event handler”);
}
</script>
</head>
<body>
<form>
Enter your name: <input onfocus=”message()” size=”20″>
</form>
</body>
</html>

OUTPUT:

Enter your name:

Event Onselect

Event Onselect

<html>
<head>
<script>
function message()
{
alert(“This alert box was triggered when you selected the content of the input field”);
}
</script>
</head>
<body>
<p>Select the content in the input field</p>
<form>
<input value=”Select this text” size=”20″>
</form>
</body>
</html>

Select the content in the input field


Event Onreset

Event Onreset

<html>
<head>
<script>
function message()
{
alert(“This alert box was triggered by the onreset event handler”);
}
</script>
</head>
<body>
<form>
Enter your name: <input size=”20″>
<input>
</select>
</form>
</body>
</html>

Enter your name:


Event On submit

Event On submit

<html>
<head>
<script>

function confirmInput()
{
fname=document.forms[0].fname.value;
alert(“Hello ” + fname + “! You will now be redirected to www.paktutorial.com”);
}

</script>
</head>
<body>
<form action=”http://www.paktutorial.com/”>
Enter your name: <input type=”text” size=”20″>
<input>
</form>
</body>
</html>

Event OnChange

Event OnChange:

<html>
<head>
<script>
function preferedBrowser()
{ prefer=document.forms[0].browsers.value;
alert(“You prefer browsing internet with ” + prefer); }
</script>
</head>
<body>
<form>
Choose which browser you prefer:
<select onchange=”preferedBrowser()”>
<option value=”Internet Explorer”>Internet Explorer</option>
<option value=”Firefox”>Firefox</option>
<option value=”Chrome”>Chrome</option>
<option value=”Opera”>Opera</option>
</select>
</form>
</body>
</html>

OUTPUT:

Choose which browser you prefer:

Event Examples

EVENT EXAMPLES

HTML Event Onload

<html>
<head>
<script>
function mymessage()
{alert(“This message was triggered from the onload event”);}
</script>
</head>
<body>
</body>
</html>

HTML Event Onunload

<html>
<head>
<script>
function ­mymessage()
{alert(“This message was triggered from the onunload event”);}
</script>
</head>
<body>
<p>An alert box will display a message when you close this document!</p>
</body>
</html>

Change Background Color

Change Background Color

<html>
<head>
<script>
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>
</head>
<body>
<b>Mouse over the squares and the background color will change!</b><table width=”300″ height=”100″>

<tr>

<td onmouseover=”bgChange(‘red’)” onmouseout=”bgChange(‘transparent’)” bgcolor=”red”></td>

<td onmouseout=”bgChange(‘transparent’)” bgcolor=”blue”></td>

<td onmouseover=”bgChange(‘green’)” onmouseout=”bgChange(‘transparent’)” bgcolor=”green”> </td>

</tr>

</table>

</body>

</html>

Mouse over the squares and the background color will change!