Scribd
Upload
63 views

DHTML

DHTML stands for Dynamic Hypertext Markup Language and allows creating dynamic and interactive web pages using a combination of HTML, CSS, JavaScript, and the DOM. It consists of four main components - HTML for structure, CSS for styling, JavaScript for interactivity, and the DOM for programming interfaces. DHTML enables dynamically updating content, animating elements, and handling events on web pages without reloading data from the server.

Uploaded by

Sushree srabani Swain
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
63 views

DHTML

DHTML stands for Dynamic Hypertext Markup Language and allows creating dynamic and interactive web pages using a combination of HTML, CSS, JavaScript, and the DOM. It consists of four main components - HTML for structure, CSS for styling, JavaScript for interactivity, and the DOM for programming interfaces. DHTML enables dynamically updating content, animating elements, and handling events on web pages without reloading data from the server.

Uploaded by

Sushree srabani Swain
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

DHTML

DHTML stands for Dynamic Hypertext Markup language i.e., Dynamic HTML.
Dynamic HTML is not a markup or programming language like HTML but it is a term
that combines the features of various web development technologies for creating the
web pages dynamic and interactive.

The DHTML application was introduced by Microsoft with the release of the
4th version of IE (Internet Explorer) in 1997.

Components of Dynamic HTML

DHTML consists of the following four components or languages:

o HTML 4.0
o CSS
o JavaScript
o DOM.

HTML 4.0

HTML is a client-side markup language, which is a core component of the DHTML. It


defines the structure of a web page with various defined basic elements or tags.

CSS

CSS stands for Cascading Style Sheet, which allows the web users or developers for
controlling the style and layout of the HTML elements on the web pages.

JavaScript

JavaScript is a scripting language which is done on a client-side. The various


browser supports JavaScript technology. DHTML uses the JavaScript technology for
accessing, controlling, and manipulating the HTML elements. The statements in
JavaScript are the commands which tell the browser for performing an action.

DOM

DOM is the document object model. It is a w3c standard, which is a standard


interface of programming for HTML. It is mainly used for defining the objects and
properties of all elements in HTML.

Features of DHTML

o Its simplest and main feature is that we can create the web page dynamically.
o Dynamic Style is a feature, that allows the users to alter the font, size, color,
and content of a web page.
o It provides the facility for using the events, methods, and properties. And, also
provides the feature of code reusability.
o It also provides the feature in browsers for data binding.
o Using DHTML, users can easily create dynamic fonts for their web sites or
web pages.
o With the help of DHTML, users can easily change the tags and their
properties.
o The web page functionality is enhanced because the DHTML uses low-
bandwidth effect.

Applications of DHTML

o It is used for designing the animated and interactive web pages that are
developed in real-time.
o DHTML helps users by animating the text and images in their documents.
o It allows the authors for adding the effects on their pages.
o It also allows the page authors for including the drop-down menus or rollover
buttons.
o This term is also used to create various browser-based action games.
o It is also used to add the ticker on various websites, which needs to refresh
their content automatically.

Example : The following example simply uses the document.write() method of


JavaScript in the DHTML. In this example, we type the JavaScript code in
the <body> tag.

<html >
<head>
<title>
Method of a JavaScript
</title>
</head>
<body>
<script type="text/javascript">
`document.write("JavaTpoint");
</script>
</body>
</html>

Advantages of DHTML

o The web sites and web pages which are created using this concept are fast.
o There is no plug-in required for creating the web page dynamically.
o Due to the low-bandwidth effect by the dynamic HTML, the web page
functionality is enhanced.
o This concept provides advanced functionalities than the static HTML.
o It is highly flexible, and the user can make changes easily in the web pages.

Disadvantages of DHTML

o The scripts of DHTML does not run properly in various web browsers. Or in
simple words, we can say that various web browsers do not support the
DHTML. It is only supported by the latest browsers.
o The coding of those websites that are created using DHTML is long and
complex.
o For understanding the DHTML, users must know about HTML, CSS, and
JavaScript. If any user does not know these languages, then it is a time-
consuming and long process in itself.
o Difference between HTML and DHTML

HTML DHTML

DHTML is a Dynamic Hypertext markup


HTML is a Hypertext Markup language.
language.

HTML stand for static page. DHTML stands for Dynamic.

HTML does not have a server-side


DHTML have server-side code.
code..
Plain page without any scripts and Page with HTML,CSS and scripts called as
style as called as HTML. DHTML.

Client-side technologies slow in HTML. Client-side technologies fast in HTML.

Processing from the browser not Processing from browser required in


required in HTML. DHTML.

HTML files are stored with .htm or DHTML file are stored with .dhtml
.html extensions. extension.

Database connectivity not required Database connectivity required in


HTML. DHTML.

Events methods not use in HTML


Events methods use in DHTML pages.
pages.

HTML does not allow any change in DHTML also allows the pages to changes
the pages without returning to the at any time. Without returning to the
webserver first. webserver first.

Example (HTML DOM with CSS): This example checks the Grade of a student
according to the percentage criteria with the JavaScript and HTML DOM. In this
example, we type the code of a JavaScript in the <body> tag.

<html>
<head>
<title> Check Student Grade
</title>
</head>

<body>
<p>Enter the percentage of a Student:</p>
<input type="text" id="percentage">
<button type="button" onclick="checkGrade()">
Find Grade
</button>
<p id="demo"></p>
<script type="text/javascript">
function checkGrade() {
var x,p, text;
p = document.getElementById("percentage").value;
x=parseInt(p);
if (x>90 && x <= 100) {
document.getElementById("demo").innerHTML = "A1";
} else if (x>80 && x <= 90) {
document.getElementById("demo").innerHTML = "A2";
} else if (x>70 && x <= 80) {
document.getElementById("demo").innerHTML = "A3";
}
}
</script>
</body>
</html>

You might also like