tag:blogger.com,1999:blog-82666716501787035402012-02-16T05:14:03.732-08:00DHTML Tutorial For Absolute BeginnersMathihttp://www.blogger.com/profile/03979427407848755119noreply@blogger.comBlogger11100tag:blogger.com,1999:blog-8266671650178703540.post-2449935909979890822008-08-01T00:05:00.000-07:002008-12-10T14:46:51.432-08:00DHTML tutorial for Absolute Beginner * What is DHTML * DHTML Basics * DHTML Fundamentals * Lamens DHTML * Layman's DHTML<!--box starts here-->
<table border="0" cellspacing="0" cellpadding="0" width="400" style="margin-bottom:30px"><tr> <td >
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #f0f0f0; MARGIN: 0px 5px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="padding-left:20px;color:#505050;DISPLAY: block; overflow:hidden; FONT-SIZE:18px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 0px;">
<div style="padding:15px;font-weight:bold;font-size:24px;font-color:#808080">
<h2>
<!-- heading here-->
WARNING !!!!
<span style="font-size:12px;font-family:arial;font-weight:normal">
<br>
if (you read this article)
<br>
{
<br>
at the end of reading(you should answer the questions given below);
<br>
}
<br>
else
<br>
{
<br>
quit && go search for some masala videos;
<br>
}
</span>
<!-- end of heading-->
</h2>
</div> </B> </td> </tr> <tr> <td align="left" bgcolor="#f0f0f0">
<DIV style="font-size:18px;color:#202020;font-family:arial,verdana;padding:20px;BORDER-RIGHT: #cccc40 1px solid; BACKGROUND: #f0f0f0; BORDER-LEFT: #cccc40 1px solid">
<!-- contents starts here-->
<span style="font-size:10px;font-family:arial">
The Questions that are waiting for you are :
</span>
<br>
1. What is DHTML.
<br>
2. If I want to create DHTML web site, then I should know something about html,css and javascript. Is this statement is true or false?
<br>
3. Why the word "DYNAMIC" is used in "DHTML"?
<br>
4. What do you understand by 'Coronary Artery disease'?
<!--contents ends here-->
</DIV> </td> </tr> <tr> <td>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #cccc40; MARGIN: 0px 5px"></B>
</td> </tr> </table>
<!--box ends here-->
<!--box starts here-->
<table border="0" cellspacing="0" cellpadding="0" width="400" style="margin-bottom:30px"><tr> <td >
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #f0f0f0; MARGIN: 0px 5px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="padding-left:20px;color:#505050;DISPLAY: block; overflow:hidden; FONT-SIZE:18px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 0px;">
<div style="padding:15px;font-weight:bold;font-size:24px;font-color:#808080">
<h2>
<!-- heading here-->
DHTML stands for?
<!-- end of heading-->
</h2>
</div> </B> </td> </tr> <tr> <td align="left" bgcolor="#f0f0f0">
<DIV style="font-size:18px;color:#202020;font-family:arial,verdana;padding:20px;BORDER-RIGHT: #cccc40 1px solid; BACKGROUND: #f0f0f0; BORDER-LEFT: #cccc40 1px solid">
<!-- contents starts here-->
Dynamic HyperText Markup Language.
<!--contents ends here-->
</DIV> </td> </tr> <tr> <td>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #cccc40; MARGIN: 0px 5px"></B>
</td> </tr> </table>
<!--box ends here-->
<!--box 2 starts here-->
<table border="0" cellspacing="0" cellpadding="0" width="400" style="margin-bottom:30px"><tr> <td >
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #f0f0f0; MARGIN: 0px 5px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="padding-left:20px;color:#505050;DISPLAY: block; overflow:hidden; FONT-SIZE:18px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 0px;">
<div style="padding:15px;font-weight:bold;font-size:24px;font-color:#808080">
<h2>
<!-- heading here-->
In what way it is different from Normal HTML?
<!-- end of heading-->
</h2>
</div> </B> </td> </tr> <tr> <td align="left" bgcolor="#f0f0f0">
<DIV style="font-size:18px;color:#202020;font-family:arial,verdana;padding:20px;BORDER-RIGHT: #cccc40 1px solid; BACKGROUND: #f0f0f0; BORDER-LEFT: #cccc40 1px solid">
<!-- contents starts here-->
If you are able to bring some kind of <span style="color:red">DYNAMIC EFFECT (animated effect)</span> in your html page, by using <span style="color:red">CSS AND JAVASCRIPT</span>, then your page can be called as DHTML page.
<!--contents ends here-->
</DIV> </td> </tr> <tr> <td>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #cccc40; MARGIN: 0px 5px"></B>
</td> </tr> </table>
<!--box ends here-->
<!--box starts here-->
<table border="0" cellspacing="0" cellpadding="0" width="400" style="margin-bottom:30px"><tr> <td >
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #f0f0f0; MARGIN: 0px 5px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="padding-left:20px;color:#505050;DISPLAY: block; overflow:hidden; FONT-SIZE:18px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 0px;">
<div style="padding:15px;font-weight:bold;font-size:24px;font-color:#808080">
<h2>
<!-- heading here-->
Hmmm! Not able to grasp the meaning of DYNAMIC EFFECT? Don't worry. Letus try with some example.
<br>
<br>Move your mouse over Preity or Rani.
<!-- end of heading-->
</h2>
</div> </B> </td> </tr> <tr> <td align="left" bgcolor="#f0f0f0">
<DIV style="font-size:18px;color:#202020;font-family:arial,verdana;padding:20px;BORDER-RIGHT: #cccc40 1px solid; BACKGROUND: #f0f0f0; BORDER-LEFT: #cccc40 1px solid">
<!-- contents starts here-->
<br>
<script type="text/javascript">
function showInfo(infoText)
{
document.getElementById('info').innerHTML=infoText;
}
function reset()
{
document.getElementById('info').innerHTML="";
}
</script>
<table border="2" cellspacing="5" align="center"><tr><td>
<span align="center" style="font-size:10px;font-family:arial;display:block;text-align:center;width:150px;height:80px" onmouseover="showInfo('Hai! This is Preity Zinta!')" onmouseout="reset()">
Move your Mouse over me<br>
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_Z1RigC4qQAE/SJNHOFFjNnI/AAAAAAAAAT0/PXc5Fp6Q0kY/s400/preity_micro.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5229601899516474994" /></span>
</td></tr></table>
<br/>
<table border="2" cellspacing="5" align="center"><tr><td>
<span align="center" style="font-size:10px;font-family:arial;display:block;text-align:center;width:150px;height:80px" onmouseover="showInfo('This is Rani Mukharji. Kaise hai bhaiyaa?')"
onmouseout="reset()">
Move Your mouse over me.
<br>
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://3.bp.blogspot.com/_Z1RigC4qQAE/SJNHTCltI-I/AAAAAAAAAT8/rqpmoFCg0oQ/s400/rani_micro.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5229601984745382882" />
</span>
</td></tr></table>
<br/>
<span style="background-color:yellow;border:2px dotted #ff0000;height:50px;width:120px" id="info">
</span>
<br>
<span style="color:red;font-weight:normal;font-size:11px;font-family:arial">
Yes, now you agree that this page has some kind of dynamic or animatic or interactive behavior.Is that right? If the web developer has used CSS and JAVASCRIPT to bring this dynamic property to his page, then that page is a DHTML page
</span>
<br>
<textarea cols="90" rows="20" style="color:red;font-size:10px;font-family:arial">
<!--The DHTML code for the above example is given here.copy this code in a notepad and save it as test.htm and run it-->
<script type="text/javascript">
function showInfo(infoText){
document.getElementById('info').innerHTML=infoText;
}
function reset(){
document.getElementById('info').innerHTML="";
}
</script>
<span onmouseover="showInfo('Preity! Yes!! Ofcourse !!!')" onmouseout="reset()">Do you like Preity Zinta?</span>
<br/>
<span onmouseover="showInfo('Rani? Why Not?')"
onmouseout="reset()">Do you like Rani Mukharji?</span>
<br/>
<span style="background-color:yellow;border:2px dotted #ff0000;height:20px;width:80px" id="info">
</span>
</textarea>
<!--contents ends here-->
</DIV> </td> </tr> <tr> <td>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #cccc40; MARGIN: 0px 5px"></B>
</td> </tr> </table>
<!--box ends here-->
<!--box starts here-->
<table border="0" cellspacing="0" cellpadding="0" width="400" style="margin-bottom:30px"><tr> <td >
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #f0f0f0; MARGIN: 0px 5px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="padding-left:20px;color:#505050;DISPLAY: block; overflow:hidden; FONT-SIZE:18px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 0px;">
<div style="padding:15px;font-weight:bold;font-size:24px;font-color:#808080">
<h2>
<!-- heading here-->
Example 2 : Move your mouse over the three color boxes.
<!-- end of heading-->
</h2>
</div> </B> </td> </tr> <tr> <td align="left" bgcolor="#f0f0f0">
<DIV style="font-size:18px;color:#202020;font-family:arial,verdana;padding:20px;BORDER-RIGHT: #cccc40 1px solid; BACKGROUND: #f0f0f0; BORDER-LEFT: #cccc40 1px solid">
<!-- contents starts here-->
<script type="text/javascript">
function showColor(myColor)
{
document.getElementById('colorBox').style.background=myColor;
}
</script>
<table width="150" align="center" cellpadding="10" border="2" cellspacing="3">
<tr>
<td width="20" bgcolor="yellow" onmouseover="showColor('yellow')"> </td>
<td width="20" bgcolor="red" onmouseover="showColor('red')"> </td>
<td width="20" bgcolor="orange" onmouseover="showColor('orange')"> </td>
</tr>
</table>
<br/>
<textarea name="colorBox" style="font-size:10px;font-family:arial" rows="10" cols="80">
<script type="text/javascript">
function showColor(myColor)
{
document.getElementById('colorBox').style.background=myColor;
}
</script>
<table width="150" align="center" cellpadding="10">
<tr>
<td width="20" bgcolor="yellow" onmouseover="showColor('yellow')"> </td>
<td width="20" bgcolor="red" onmouseover="showColor('red')"> </td>
<td width="20" bgcolor="orange" onmouseover="showColor('orange')"> </td>
</tr>
</table>
</textarea>
<!--contents ends here-->
</DIV> </td> </tr> <tr> <td>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #cccc40; MARGIN: 0px 5px"></B>
</td> </tr> </table>
<!--box ends here-->
<!--box starts here-->
<table border="0" cellspacing="0" cellpadding="0" width="400" style="margin-bottom:30px"><tr> <td >
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #f0f0f0; MARGIN: 0px 5px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="padding-left:20px;color:#505050;DISPLAY: block; overflow:hidden; FONT-SIZE:18px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 0px;">
<div style="padding:15px;font-weight:bold;font-size:24px;font-color:#808080">
<h2>
<!-- heading here-->
Example 3.When you click the button, there will be an earth quake.
<span style="font-size:10px;font-family:arial">
(Anyway, there is no need of holding your chair while clicking)
</span>
<!-- end of heading-->
</h2>
</div> </B> </td> </tr> <tr> <td align="left" bgcolor="#f0f0f0">
<DIV style="font-size:18px;color:#202020;font-family:arial,verdana;padding:20px;BORDER-RIGHT: #cccc40 1px solid; BACKGROUND: #f0f0f0; BORDER-LEFT: #cccc40 1px solid">
<!-- contents starts here-->
<script>
function startShake(){
movesize=5;
parent.moveBy(0,movesize);
parent.moveBy(0,-movesize);
parent.moveBy(movesize,0);
parent.moveBy(-movesize,0);
timer=setTimeout("startShake()",10);
}
function stopShake(){
clearTimeout(timer);
}
</script>
<table align="center" cellpadding="5" cellspacing="2" border="2">
<tr><td>
<button onclick="startShake();">Start Shaking</button>
</td>
<td>
<button onClick="stopShake()">Stop Shaking</button>
</td></tr></table>
<br>
<span style="text-align:center;font-size:10px;font-family:arial">
I can hear your shouting "Aiyaiyo ! It is really Dynamic paa.."
</span>
<br>
<textarea cols="80" rows="20" style="font-size:10px;color:red;font-family:arial">
<!--COPY AND PASTE THIS CODE IN NOTEPAD AND
SAVE AS TEST.HTM AND RUN-->
<script>
function startShake(){
movesize=5;
parent.moveBy(0,movesize);
parent.moveBy(0,-movesize);
parent.moveBy(movesize,0);
parent.moveBy(-movesize,0);
timer=setTimeout("startShake()",10);
}
function stopShake(){
clearTimeout(timer);
}
</script>
<button onclick="startShake();">Start Shaking</button>
<button onClick="stopShake()">Stop Shaking</button>
</textarea>
<!--contents ends here-->
</DIV> </td> </tr> <tr> <td>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #cccc40; MARGIN: 0px 5px"></B>
</td> </tr> </table>
<!--box ends here-->
<!--box starts here-->
<table border="0" cellspacing="0" cellpadding="0" width="400" style="margin-bottom:30px"><tr> <td >
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #f0f0f0; MARGIN: 0px 5px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="padding-left:20px;color:#505050;DISPLAY: block; overflow:hidden; FONT-SIZE:18px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 0px;">
<div style="padding:15px;font-weight:bold;font-size:24px;font-color:#808080">
<h2>
<!-- heading here-->
Is that all I should know about DHTML?
<!-- end of heading-->
</h2>
</div> </B> </td> </tr> <tr> <td align="left" bgcolor="#f0f0f0">
<DIV style="font-size:18px;color:#202020;font-family:arial,verdana;padding:20px;BORDER-RIGHT: #cccc40 1px solid; BACKGROUND: #f0f0f0; BORDER-LEFT: #cccc40 1px solid">
<!-- contents starts here-->
If you want to act before your fig... as if you know DHTML, then this is more than enough.
But if you are a web designer and if you want to implement DHTML, then you have to read more. The best web site I recommend is
<a href="http://www.w3schools.com/dhtml/default.asp">W3schools</a>. Don't miss this site. It is really really really really really a SUPER SCHOOL for any web developer.
<!--contents ends here-->
</DIV> </td> </tr> <tr> <td>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #cccc40; MARGIN: 0px 5px"></B>
</td> </tr> </table>
<!--box ends here-->
<!--box starts here-->
<table border="0" cellspacing="0" cellpadding="0" width="400" style="margin-bottom:30px"><tr> <td >
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #f0f0f0; MARGIN: 0px 5px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="padding-left:20px;color:#505050;DISPLAY: block; overflow:hidden; FONT-SIZE:18px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#cccc40; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 0px;">
<div style="padding:15px;font-weight:bold;font-size:24px;font-color:#808080">
<h2>
<!-- heading here-->
Ooooops ! DHTML is enough for today. Let us take a diversion and learn what is CORONARY ARTERY DiSEASE. <!-- end of heading-->
</h2>
</div> </B> </td> </tr> <tr> <td align="left" bgcolor="#f0f0f0">
<DIV style="font-size:18px;color:#202020;font-family:arial,verdana;padding:20px;BORDER-RIGHT: #cccc40 1px solid; BACKGROUND: #f0f0f0; BORDER-LEFT: #cccc40 1px solid">
<!-- contents starts here-->
1. It is commonly known as Heart Disease.
<br>
2. It is the leading cause of death in USA and other countries.
<br>
3. Cholesterol is deposited in the artery walls as plaque and block the flowing of blood.
<br>
4. So, for the sake of you and your family Browse more about cholesterol than DHTML.
<span style="font-size:9px;font-family:arial">Better visit<a href="www.healthcentral.com">health central.com</a>
</span>
<br>
<a href="http://www.healthcentral.com"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_Z1RigC4qQAE/SJPVnNKvrcI/AAAAAAAAAUc/FgmzC-6GKHQ/s400/heart_healthcentral_com.gif" border="0" alt="http://www.healthcentral.com" id="BLOGGER_PHOTO_ID_5229758461833620930" /></a>
<!--contents ends here-->
</DIV> </td> </tr> <tr> <td>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 1px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 2px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 3px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden; FONT-SIZE:1px; BORDER-RIGHT: #cccc40 1px solid; BACKGROUND:#f0f0f0; BORDER-LEFT: #cccc40 1px solid;MARGIN: 0px 4px; HEIGHT: 1px"></B>
<B style="DISPLAY: block; overflow:hidden;FONT-SIZE:1px; HEIGHT: 1px;BACKGROUND: #cccc40; MARGIN: 0px 5px"></B>
</td> </tr> </table>
<!--box ends here--><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/8266671650178703540-244993590997989082?l=lamensdhtml.blogspot.com' alt='' /></div>Mathihttp://www.blogger.com/profile/03979427407848755119noreply@blogger.com0