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.
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).
//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>
//JavaScript code - script.js
function change( )
{
var img = document.getElementById("image");
img.src = image2.jpg;
}
document.getElementById("image").onclick = change;
Suryateja Pericherla, at present is a Research Scholar (full-time Ph.D.) in the Dept. of Computer Science & Systems Engineering at Andhra University, Visakhapatnam. Previously worked as an Associate Professor in the Dept. of CSE at Vishnu Institute of Technology, India.
He has 11+ years of teaching experience and is an individual researcher whose research interests are Cloud Computing, Internet of Things, Computer Security, Network Security and Blockchain.
He is a member of professional societies like IEEE, ACM, CSI and ISCA. He published several research papers which are indexed by SCIE, WoS, Scopus, Springer and others.
How I can use animation
What kind of animation do you want?