Tuesday, 22 June 2021

DHTML

 

Ex1: DHTML JavaScript (HTML + JavaScript Event)

<html> 

<head> 

<title>  Method of a JavaScript </title> 

<script type="text/javascript">

  function msg(){

     document.write("Welcome"); 

  }

</script> 

</head> 

<body> 

    <form name="f1">

       <input type="button" value="click" onclick="msg()">

   </form>

</body> 

</html>

**********************************************************


 

Ex2: DHTML JavaScript (HTML DOM+ JavaScript Event)

<html> 

<head> 

<title>  Method of a JavaScript </title> 

<script type="text/javascript">

  function msg(){

   var x1=document.getElementById("t1").value;

   alert(x1);

  }

</script> 

</head> 

<body> 

    <form name="f1">

       Enter value : <input type="text" id="t1">

       <input type="button" value="click" onclick="msg()">

   </form>

</body> 

</html>

************************************************************** 


 

Ex3: DHTML CSS (HTML + CSS) – Internal style sheet

<html> 

<head> 

<title>CSS</title> 

   <style>

       body {

         background-color:blue;

         color: yellow;

       }

   </style>

</head> 

<body> 

   welcome to CSS

</body> 

</html>

****************************************************************

Ex4: DHTML CSS (HTML + CSS) – Internal style sheet

<html> 

<head> 

<title>CSS</title> 

<style>

   body {

     background-color: blue;

     color: yellow;

   }

   p{

     font-family: verdana;

     font-size: 20px;

    }

</style>

</head> 

<body> 

  welcome to CSS

  <p>This is a paragraph</p>111

</body> 

</html> 

********************************************************************


 

Ex5: DHTML CSS (HTML + CSS) – Internal & Inline style sheet

<html> 

<head> 

<title>CSS</title> 

<style>

  body{

   background-color:yellow;

   color:blue;

   font-size:28px;

  }

</style>

</head> 

<body> 

  <marquee onmouseover="this.stop()" onmouseout="this.start()">

   welcome to CSS

  </marquee>

</body> 

</html> 

**************************************************************

DHTML

 

1) What is DHTML?

Ø  DHTML stands for Dynamic Hypertext Markup Language i.e., Dynamic HTML.

Ø  Dynamic HTML is not a Markup Or Programming Language 

Ø  It is a term that combines the features of various web development technologies for creating the web pages dynamic and interactive.

             DHTML = HTML 4.0 + CSS + JavaScript + DOM

2) Components of Dynamic HTML: DHTML consists of the following four components or languages:

a)      HTML 4.0

b)     CSS

c)      JavaScript

d)     DOM.

 

a)      HTML 4.0:

·         HTML stands for Hypertext Markup Language

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

b)     CSS:

·         CSS stands for Cascading Style Sheet

·         It allows the web users or developers for controlling the style and layout of the HTML elements on the web pages.

c)      JavaScript:

·         JavaScript is a scripting language which is done on a client-side validation.

·         The various browser supports JavaScript technology.

·         DHTML uses the JavaScript technology for accessing, controlling, and manipulating the HTML elements.

 

 

d)     DOM

·         DOM is the Document Object Model.

·         It is a w3c (World Wide Web Consortium) 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.

Uses of DHTML (Dynamic HTML)

  • It is used for designing the animated and interactive web pages.
  • DHTML helps users by animating the text and images in their documents.
  • It also allows the page authors for including the drop-down menus or rollover buttons.
  • This term is also used to create various browser-based action games.

Difference between HTML and DHTML

HTML (Hypertext Markup language)

DHTML (Dynamic Hypertext Markup language)

1. HTML is simply a markup language.

1. DHTML is not a language, but it is a set of technologies of web development.

2. It is used for developing and creating web pages.

2. It is used for creating and designing the animated and interactive web sites or pages.

3. This markup language creates static web pages.

3. This concept creates dynamic web pages.

4. It does not contain any server-side scripting code.

4. It may contain the code of server-side scripting.

5. The files of HTML are stored with the .html or .htm extension in a system.

5. The files of DHTML are stored with the .dhtm extension in a system.

6. A simple page which is created by a user without using the scripts or styles called as an HTML page.

6. A page which is created by a user using the HTML, CSS, DOM, and JavaScript technologies called a DHTML page.

7. This markup language does not need database connectivity.

7. This concept needs database connectivity because it interacts with users.