What is DHTML | DHTML Tutorial

DHTML Tutorial

DHTML stands for Dynamic Hypertext markup language i.e., Dynamic HTML.
Dynamic HTML, or DHTML, may be a collection of technologies used together to make interactive and animated websites by using a combination of a static markup language (such as HTML ), a client-side scripting language (such as JavaScript ), a presentation definition language (such as CSS ), and therefore the Document Object Model (DOM).
The DHTML application was introduced by Microsoft with the release of the 4^th version of IE ( Internet Explorer ) in 1997.

Read Also

1. Flask in Python

Components of Dynamic HTML

DHTML consists of the following four components or languages:

HTML 4.0
CSS
JavaScript
DOM.

DHTML Components

HTML 4.0

HTML may be 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.
Using CSS, you'll control the color of the text, the design of fonts, the spacing between paragraphs, what background images or colors are used, layout designs, variations in display for various devices and screen sizes also as a variety of other effects.
It allows the online users or developers for controlling the design and layout of the HTML elements on the web pages.

JavaScript

JavaScript was first known as Live Script, but Netscape changed its name to JavaScript, possibly because of the excitement being generated by Java
JavaScript could also be a scripting language which is completed 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 that the document object model.
It is a w3c standard, which can be a typical interface of programming for HTML.
It's mainly used for defining the objects and properties of all elements in HTML.

Uses of DHTML

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

2. What is Cyber Security ?

Features of DHTML

Its simplest and main feature is that we'll create the web page dynamically.
The web page functionality is enhanced because the DHTML uses low-bandwidth effect.
It allows you to change the qualities of an HTML tag depending on an event outside of the browser (such as a mouse click, time, or date, and so on).
It provides the power for using the events, methods, and properties. And, also provides the feature of code reusability.
It also provides the feature in browsers for data binding . This feature is advanced and difficult to use for beginning DHTML writer.
Dynamic Style could also be a feature that allows the users to alter the font, size, color, and content of a web page.
Using DHTML, users can easily create dynamic fonts for their websites or sites.

Difference between HTML and DHTML

Html vs DHTML

HTML (Hypertext Markup language)	DHTML (Dynamic Hypertext Markup language)
HTML is simply a markup language.	DHTML is not a language, but it is a set of technologies of web development.
This markup language creates static web pages.	This concept creates dynamic web pages.
It is used for developing and creating web pages.	It is used for creating and designing the animated and interactive web sites or pages.
It does not contain any server-side scripting code.
A simple page which is created by a user without using the scripts or styles called as an HTML page.	A page which is created by a user using the HTML, CSS, DOM, and JavaScript technologies called a DHTML page.
The files of HTML are stored with the .html or .htm extension in a system.	The files of DHTML are stored with the .dhtm extension in a system.
This markup language does not need database connectivity.	This concept needs database connectivity because it interacts with users.

Read Also

1. What is Affiliate Marketing ?

2. What is Python Openpyxl

DHTML JavaScript

JavaScript are often included in HTML pages, which creates the content of the page as dynamic. We will easily type the JavaScript code within the <head> or <body> tag of a HTML page.
If we would like to add the external source file of JavaScript, we will easily add using the <srt> attribute.

Following are the various examples, which describes the way to use the JavaScript technology with the DHTML:

Document.write() Method

The document.write() method of JavaScript, writes the output to a web page.

Document

Example 1: 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.

Sample Code

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

Output

Dhtml - Document.write () Method

JavaScript and HTML event

A JavaScript code also can be executed when some event occurs. Suppose, a user clicks an HTML element on a webpage, and after clicking, the JavaScript function related to that HTML element is automatically invoked. And, then the statements within the function are performed.

Example : The following example shows the present date and time with the JavaScript and HTML event (Onclick). During this example, we type the JavaScript code within the <head> tag.

Sample Code

<html>
   <head>
      <title>  
         DHTML with JavaScript  
      </title>
      <script type="text/javascript">  
         function dateandtime()  
         {  
         alert(Date());  
         }  
      </script>  
   </head>
   <body bgcolor="orange">
      <font size="5" color="black">
         <h2>
            <center>
               <p>  
                  Click here # <a href="#" onClick="dateandtime();"> Date and Time </a>  
                  # to check the today's date and time.   
               </p>
            </center>
         </h2>
      </font>
   </body>
</html>

Output

Dhtml javascript & HTML Event

Dhtml Tutorial4

Explanation

In the above code, we displayed the present date and time with the help of JavaScript in DHTML. Within the body tag, we used the anchor tag, which refers to the page itself. Once you click on the link, then the function of JavaScript is called.
In the JavaScript function, we use the alert() method during which we type the date() function. The date function shows the date and time within the alert dialog box on the online page.

Read Also

1. Openpyxl Filter and Sort Data

2. Components of Affiliate Marketing

JavaScript and HTML DOM

With version 4 of HTML, JavaScript code also can change the inner content and attributes of the HTML event.

Example : This instance 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 within the <body> tag.

Sample Code

<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>

Output

Check Student Grade

Explanation

In the above code, we check the student’s Grade with the assistance of JavaScript in DHTML. Within the JavaScript code, we used the checkGrade() method, which is invoked once we click on the button. During this function, we stored the value in variable p. the value is taken within the input field. When the value is stored, then we convert the value of p into integer and store the conversion value in x, because the value in p is text. After that, we used the if-else-if statement for finding the grade according to the marks.

CSS with JavaScript in DHTML

With version 4 of HTML, JavaScript code also can change the design like size, color, and face of an HTML element.

Example : The following example changes the color of a text.

Sample Code

<html>
   <head>
      <title>  
         GetElementById.style.property  
      </title>
   </head>
   <body>
      <h2>
         <p id="demo"> Wikitechy is a popular Tutorial </p>
      </h2>
      <button onclick="change_Color('orange');"> Orange </button>  
      <button onclick="change_Color('blue');"> Blue </button>  
      <script type="text/javascript">  
         function change_Color(newColor) {  
           var element = document.getElementById('demo').style.color = newColor;  
         }  
      </script>  
   </body>
</html>

Output

Dhtml Tutorial 6

Dhtml Change Color

Read Also

1. My First Program in HTML

2. Flask HTTP methods

Dhtml Change Color

Explanation

In the above code, we changed the color of a text by using the following syntax:

document.getElementById('demo').style.property=new_value;.

The above syntax is used within the JavaScript function, which is performed or called once we clicked on the HTML buttons. The various HTML buttons specify the color of a text.

DHTML CSS

We can easily use the CSS with the DHTML page with the help of JavaScript and HTML DOM. With the help of this.style.property=new style statement, we will change the design of the currently used HTML element. Or, we will also update the design of any particular HTML element by document.getElementById(id).style.property = new_style statement.

Example : The following example uses the DHTML CSS for changing the design of current element:

Sample Code 1

<html>
   <head>
      <title>  
         Changes current HTML element  
      </title>
   </head>
   <body>
      <center>
      <h1 onclick="this.style.color='orange'"> This is a Wikitechy Site </h1>
      <center>
   </body>
</html>

2. How to iterate through range of Dates in Java

Output

Dhtml Changes Current HTML Elements

Dhtml Changes Current HTML Elements

Explanation

In the above code, we used the this.style.color='blue' statement, which shows the color of a text as blue.

Example : The following example uses the DHTML CSS for changing the style of the HTML element:

Sample Code 2

<html>
   <head>
      <title>  changes the particular HTML element example  </title>
   </head>
   <body>
      <h2>
         <p id="demo"> Wikitechy is a popular Tutorial </p>
      </h2>
      <button onclick="change_Color('orange');"> Orange </button>  
      <button onclick="change_Color('blue');"> Blue </button>  
      <script type="text/javascript">  
         function change_Color(newColor) {  
           var element = document.getElementById('demo').style.color = newColor;  
         }  
      </script>  
   </body>
</html>

Output

Dhtml Changes Particular Elements

Explanation

In the above code, we used the var element = document.getElementById('demo').style.color = newColor; statement, which changes the color of a text as orange and blue according to the buttons.

DHTML Events

An event is defined as changing the occurrence of an object.
It is compulsory to add the events within the DHTML page. Without events, there'll be no dynamic content on the HTML page.
The event may be a term within the HTML, which triggers the actions within the web browsers.
Suppose, any user clicks an HTML element, then the JavaScript code related to that element is executed. Actually, the event handlers catch the events performed by the user then execute the code.

Example of Events

Click a button.
Submitting a form.
An image loading or an web page loading, etc.

Read Also

1. Openpyxl Adding Image

2. Disadvantages of Affiliate Marketing

Event Handlers used in the DHTML

S.No.	Event	When it occurs
1.	onabort	It occurs when the user aborts the page or media file loading.
2.	onblur	It occurs when the user leaves an HTML object.
3.	onchange	It occurs when the user changes or updates the value of an object.
4.	onclick	It occurs or triggers when any user clicks on an HTML element.
5.	ondblclick	It occurs when the user clicks on an HTML element two times together.
6.	onfocus	It occurs when the user focuses on an HTML element. This event handler works opposite to onblur.
7.	onkeydown	It triggers when a user is pressing a key on a keyboard device. This event handler works for all the keys.
8.	onkeypress	It triggers when the users press a key on a keyboard. This event handler is not triggered for all the keys.
9.	onkeyup	It occurs when a user released a key from a keyboard after pressing on an object or element.
10.	onload	It occurs when an object is completely loaded.
11.	onmousedown	It occurs when a user presses the button of a mouse over an HTML element.
12.	onmousemove	It occurs when a user moves the cursor on an HTML object.
13.	onmouseover	It occurs when a user moves the cursor over an HTML object.
14.	onmouseout	It occurs or triggers when the mouse pointer is moved out of an HTML element.
15.	onmouseup	It occurs or triggers when the mouse button is released over an HTML element.
16.	onreset	It is used by the user to reset the form.
17.	onselect	It occurs after selecting the content or text on a web page.
18.	onsubmit	It is triggered when the user clicks a button after the submission of a form.
19.	onunload	It is triggered when the user closes a web page.

Following are the different examples using the different event handlers, which helps us to understand the concept of DHTML events:

Example : This example uses the onclick event handler, which is used to change the text after clicking.

Sample Code

<html>
   <head>
      <title>  
         Example of onclick event  
      </title>
      <script type="text/javascript">  
         function ChangeText(ctext)  
         {  
         ctext.innerHTML=" Hi Wikitechy! ";  
         }  
      </script>  
   </head>
   <body>
      <font color="red"> Click on the Given text for changing it: <br>  
      </font>  
      <font color="blue">
         <h1 onclick="ChangeText(this)"> Hello Wikitechy! </h1>
      </font>
   </body>
</html>

Output

Dhtml Example of OnClick Event

Dhtml Example of OnClick Event

Read Also

1. XML DOM Interfaces

2. DOM element focus

Example : This example uses the onsubmit event handler, which gives an alert after clicking on a submit button.

Sample Code

<html>
   <head>
      <title>  
         Example of onsubmit event  
      </title>
   </head>
   <body>
      <form onsubmit="Submit_Form()">  
         <label> Enter your name: </label>  
         <input type="text"> </br></br> 
         <label> Enter your Roll no: </label>  
         <input type="Number"> </br> </br>
         <input type="submit" value="submit">  
      </form>
      <script type="text/javascript">  
         function Submit_Form()  
         {  
         alert(" Your form is submitted");  
         }  
      </script>  
   </body>
</html>

Output

Example of Onsubmit Event

Example of Onsubmit Event

DHTML DOM

DHTML DOM stands for Dynamic HTML Document Object Model.
It is a w3c standard, which may be a standard interface of programming for HTML.
It's mainly used for defining the objects and properties of all elements in HTML.
It also defines the methods for accessing the HTML elements.

2. Creating multiline string in javascript

Example : The below code helps in understanding the concept of DHTML DOM. This example changes the colour of text and displays the text in red colour automatically.

Sample Code

<html>
   <head>
      <title>  
         Example of DHTML DOM  
      </title>
   </head>
   <body>
      <font color = "orange">
         <h2>
            <p id="demo"> This text changes color when the page loaded. </p>
         </h2>
      </font>
      <script type="text/javascript">  
         document.getElementById('demo').style.color = "blue";  
      </script>  
   </body>
</html>

Output

DHTML DOM

Advantages of DHTML

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

Read Also

1. History of Artificial Neural Network

Disadvantages of DHTML

For understanding the DHTML, users must understand HTML, CSS, and JavaScript. If any user doesn't know these languages, then it's a time-consuming and long process in itself.
The scripts of DHTML doesn't run properly in various web browsers. Or in simple words, we will say that various web browsers don't support the DHTML. It's only supported by the newest browsers.
The coding of these websites that are created using DHTML is long and complex.

What is DHTML | DHTML Tutorial

DHTML ( Dynamic HTML )

Read Also

Components of Dynamic HTML

HTML 4.0

CSS

JavaScript

DOM

Uses of DHTML

Read Also

Features of DHTML

Difference between HTML and DHTML

Read Also

DHTML JavaScript

Document.write() Method

Sample Code

Output

JavaScript and HTML event

Sample Code

Output

Explanation

Read Also

JavaScript and HTML DOM

Sample Code

Output

Explanation

CSS with JavaScript in DHTML

Sample Code

Output

Read Also

Explanation

DHTML CSS

Sample Code 1

Read Also

Output

Explanation

Sample Code 2

Output

Explanation

DHTML Events

Example of Events

Read Also

Sample Code

Output

Read Also

Sample Code

Output

DHTML DOM

Read Also

Sample Code

Output

Advantages of DHTML

Read Also

Disadvantages of DHTML

UP NEXT IN DHTML

Related Searches to What is DHTML | DHTML Tutorial

Summer Offline Internship

Summer Online Internship

Internship in Chennai

Programming / Technology Internship in Chennai

Wikitechy

Workshop

Join our Community

Other Languages