Dynamic HTML
Dynamic HTML or DHTML is not an application or another form of HTML this is an enhancement, something that you add onto an existing HTML to make it more dynamic. This gives you more control over the HTML elements and this allows you to change the physical attributes any time without altering the HTML itself. This is also the enhancement responsible to make your web page interactive. DHTML is also a feature that is visible and utilized with free html web templates.
Dynamic HTML has 4 parts:
-Document Object Model (DOM)
-Scripts
-Cascading Style Sheets
-XHTML
Let us tackle all of them to better understand how DHTML works:
-DOM or Document Object Model
This is the Application that binds JavaScript and other scripting language together for the HTML and other mark-up languages.
-Scripts
Scripts are written in JavaScript or Active X the two most common scripting languages used to activate DHTML. These scripting languages are used to control the objects specified to the DOM.
-CSS or Cascading Style Scripts
This is used to control the look and feel of the website or page. These define the colors, fonts, text, the backgrounds, images and placements of the objects on the website or page. With the aid of this and the DOM you can change the style or various elements.
-XHTML
This is used to create the site or page itself; this also builds the elements that are used for CSS and DOM for them to work on.
These are the four components that are used to create a DHTML. Along with these applications DHTML has 4 primary features, Changing the tags and properties, Real-time positioning, Dynamic Fonts that works best for Netscape Communicator and Data binding for Internet Explorer.
1. Changing the tags and properties- This is the most common feature of DHTML, this allows you to change an HTML tag. You can use this information to preload information onto a page and it will not be displayed unless you hover, or click the mouse cursor to that specific link.
Here is an example of a DHTML code for this specific attribute:
<html>
<head>
<script type=”text/javascript”>
cc=0;
function changeimage()
{
if (cc==0)
{
cc=1;
document.getElementById(‘myimage’).src=”bulbon.gif”;
}
else
{
cc=0;
document.getElementById(‘myimage’).src=”bulboff.gif”;
}
}
</script>
</head>
<body>
<img id=”myimage” onclick=”changeimage()” border=”0″ src=”bulboff.gif” width=”100″ height=”180″ />
<p>Click to turn on/off the light</p>
</body>
</html>
When this is publish on a web site or page as a real size light bulb
Click to turn on/off the light
That if you click the mouse on the bulb itself it will light up but if not and you just hover your mouse nothing happens.
2. Real-time positioning-This is can help you interact with your readers or consumers. You can play interactive games and animate portions of your screen.
3. Dynamic Fonts – This is purely for Netscape users to enjoy. With Netscape designers had some problems when they do not know what fonts would be on their reader’s system so they devised Dynamic fonts for it to be encoded and downloaded with the page, and with this feature the page will always look they way the designer planned it to.
4. Data Binding – This is an IE only feature. This is to allow easy access to databases from websites and uses ActiveX control to perform its duties. This is a relatively difficult application for a beginning DHTML writer.
Processing your request, Please wait....
