What is DHTML | DHTML Tutorial



DHTML ( Dynamic HTML )

 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 4th version of IE ( Internet Explorer ) in 1997.

Read Also

Components of Dynamic HTML

  • DHTML consists of the following four components or languages:
 Components

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

 Uses of DHTML

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.

Features of DHTML

 Features of DHTML

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

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

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 Tutorial2

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 Tutorial3

Dhtml javascript & HTML Event

 Dhtml Tutorial4

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.

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

 Dhtml Tutorial5

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 Tutorial6

Dhtml Tutorial 6

 Dhtml Tutorial7

Dhtml Change Color

Read Also

 Dhtml Tutorial8

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>

Output

 Dhtml Tutorial9

Dhtml Changes Current HTML Elements

 Dhtml Tutorial10

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 Tutorial11

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.

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 Tutorial12

Dhtml Example of OnClick Event

 Dhtml Tutorial13

Dhtml Example of OnClick Event

Read Also

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

 Dhtml Tutorial14

Example of Onsubmit Event

 Dhtml Tutorial15

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.

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 Tutorial16

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.

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.


Related Searches to What is DHTML | DHTML Tutorial