Dynamic HTML is not a new markup language. It is a collection of technologies (generally HTML, CSS and JavaScript) which changes the document content once it is loaded into a web browser.
Some examples for dynamism in a web document are given below:
- Changes to document content on user interactions or after a specified time interval or on specific browser events.
- Moving elements to new positions.
- Making elements disappear and reappear.
- Changing the colour of the background and foreground.
- Changing the font properties of elements.
- Changing the content of the elements.
- Overlapping elements in stack order.
- Allow dragging and dropping elements anywhere in the browser window.
Writing explicit editing instructions in or around text is generally known as marking up text. While creating web pages, we use markup (tags) which specifies the browser how it should display the text (bold, underline, big text etc…).
In the early 1990’s a new language was created, Hypertext Markup Language, or HTML. The language was created to provide a way for developers to mark up documents so web browsers could display certain elements in bold, underline or in italics etc.
As an example let’s consider a web document which contains an image image1 initially when the page is loaded. When the user clicks on the image, the image changes to image2 which demonstrates dynamism and hence Dynamic HTML (DHTML).
1
2
3
4
5
6
7
8
9
10
|
//HTML Code
<html>
<head>
<title>DHTML Demo</title>
</head>
<body>
<img src=“image1.jpg” id=“image” />
<script type=“text/javascript” src=“script.js”></script>
</body>
</html>
|
1
2
3
4
5
6
7
8
|
//JavaScript code – script.js
function change( )
{
var img = document.getElementById(“image”);
img.src = image2.jpg;
}
document.getElementById(“image”).onclick = change;
|
Take your time to comment on this article.
EmoticonEmoticon