DHTML Introduction

DHTML stands for Dynamic HTML, it is totally different from HTML. The
browsers which support the dynamic HTML are some of the versions of
Netscape Navigator and Internet Explorer of version higher than 4.0. The
DHTML is based on the properties of the HTML, javascript, CSS, and DOM
(Document Object Model which is used to access individual elements of a
document) which helps in making dynamic content. It is the combination of
HTML, CSS, JS, and DOM. The DHTML make use of Dynamic object model to
make changes in settings and also in properties and methods. It also makes
uses of Scripting and it is also part of earlier computing trends. 
DHTML allows different scripting languages in a web page to change their
variables, which enhance the effects, looks and many others functions after the
whole page have been fully loaded or under a view process, or otherwise static
HTML pages on the same. But in true ways, there is noting that as dynamic in
DHTML, there is only the enclosing of different technologies like CSS, HTML,
JS, DOM, and different sets of static languages which make it as dynamic. 
DHTML is used to create interactive and animated web pages that are
generated in real-time, also known as dynamic web pages so that when such a
page is accessed, the code within the page is analyzed on the web server and
the resulting HTML is sent to the client’s web browser. 

Javascript: It is a Client-side Scripting language. Javascript is supported by

most of the browser, also have cookies collection to determine the user needs. 
CSS: The abbreviation of CSS is Cascading Style Sheet. It helps in the styling
of the web pages and helps in designing of the pages. The CSS rules for
DHTML will be modified at different levels using JS with event handlers which
adds a significant amount of dynamism with very little code. 
DOM: It is known as a Document Object Model which act as the weakest links
in it. The only defect in it is that most of the browser does not support DOM. It is
a way to manipulate the static contents. 

Key Features: Following are the some major key features of DHTML: 

 
 Tags and their properties can be changed using DHTML.
 It is used for real-time positioning.
 Dynamic fonts can be generated using DHTML.
 It is also used for data binding.
 It makes a webpage dynamic and be used to create animations, games,
applications along with providing new ways of navigating through websites.
 The functionality of a webpage is enhanced due to the usage of low-
bandwidth effect by DHTML.
 DHTML also facilitates the use of methods, events, properties, and codes.

Advantages: 
 
 Size of the files are compact in compared to other interactional media like
Flash or Shockwave, and it downloads faster.
 It is supported by big browser manufacturers like Microsoft and Netscape.
 Highly flexible and easy to make changes.
 Viewer requires no extra plug-ins for browsing through the webpage that
uses DHTML, they do not need any extra requirements or special software
to view it.
 User time is saved by sending less number of requests to the server. As it is
possible to modify and replace elements even after a page is loaded, it is not
required to create separate pages for changing styles which in turn saves
time in building pages and also reduces the number of requests that are sent
to the server.
 It has more advanced functionality than a static HTML. it is capable of
holding more content on the web page at the same time.
Disadvantages: 
 
 It is not supported by all the browsers. It is supported only by recent
browsers such as Netscape 6, IE 5.5, and Opera 5 like browsers.
 Learning of DHTML requires a lot of pre-requisites languages such as
HTML, CSS, JS, etc should be known to the designer before starting with
DHTML which is a long and time-consuming in itself.
 Implementation of different browsers are different. So if it worked in one
browser, it might not necessarily work the same way in another browser.
 Even after being great with functionality, DHTML requires a few tools and
utilities that are some expensive. For example, the DHTML text editor,
Dreamweaver. Along with it the improvement cost of transferring from HTML
to DHTML makes cost rise much higher. 
 
Difference between HTML and DHTML: 
 
 HTML is a markup language while DHTML is a collection of technologies.
 HTML is used to create static webpages while DHTML is capable of creating
dynamic webpages.
 DHTML is used to create animations and dynamic menus but HTML not
used.
 HTML sites are slow upon client-side technologies whereas DHTML sites
are comparatively faster.
 Web pages created using HTML are rather simple and have no styling as it
uses only one language whereas DHTML uses HTML, CSS, and Javascript
which results in a much better and way more presentable webpage.
 HTML cannot be used as server side code but DHTML used as server side
code.
 DHTML needs database connectivity but not in case of HTML.
 Files in HTML are stored using .htm or .html extension while DHTML
uses .dhtm extension.
 HTML requires no processing from the browser but DHTML does.

DOM (Document Object Model)

The Document Object Model (DOM) is a programming
interface for HTML(HyperText Markup Language) and XML(Extensible
markup language) documents. It defines the logical structure of documents
and the way a document is accessed and manipulated.
DOM is a way to represent the webpage in a structured hierarchical way so that
it will become easier for programmers and users to glide through the document.
With DOM, we can easily access and manipulate tags, IDs, classes, Attributes,
or Elements of HTML using commands or methods provided by the Document
object. Using DOM, the JavaScript gets access to HTML as well as CSS of the
web page and can also add behavior to the HTML elements. so
basically Document Object Model is an API that represents and interacts
with HTML or XML documents.

Why DOM is required?

HTML is used to structure the web pages and Javascript is used to

add behavior to our web pages. When an HTML file is loaded into the browser,
the javascript can not understand the HTML document directly. So, a
corresponding document is created(DOM). DOM is basically the
representation of the same HTML document but in a different format with
the use of objects. Javascript interprets DOM easily i.e javascript can not
understand the tags(<h1>H</h1>) in HTML document but can understand
object h1 in DOM. Now, Javascript can access each of the objects (h1, p, etc)
by using different functions.

Structure of DOM: DOM can be thought of as a Tree or Forest(more than one

tree). The term structure model is sometimes used to describe the tree-like
representation of a document.  Each branch of the tree ends in a node, and
each node contains objects  Event listeners can be added to nodes and
triggered on an occurrence of a given event. One important property of DOM
structure models is structural isomorphism: if any two DOM implementations
are used to create a representation of the same document, they will create the
same structure model, with precisely the same objects and relationships.
Why called an Object Model?
Documents are modeled using objects, and the model includes not only the
structure of a document but also the behavior of a document and the objects of
which it is composed like tag elements with attributes in HTML.
Properties of DOM: Let’s see the properties of the document object that can be
accessed and modified by the document object.

Representation of the DOM

 Window Object: Window Object is object of the browser which is always at

top of the hierarchy.  It is like an API that is used to set and access all the
properties and methods of the browser. It is automatically created by the
browser.
 Document object: When an HTML document is loaded into a window, it
becomes a document object. The ‘document’ object has various properties
that refer to other objects which allow access to and modification of the
 content of the web page. If there is a need to access any element in an
HTML page, we always start with accessing the ‘document’ object.
Document object is property of window object.
 Form Object: It is represented by form tags.
 Link Object: It is represented by link  tags.
 Anchor Object : It is represented by a href tags.
 Form Control Elements:: Form can have many control elements such as
text fields, buttons, radio buttons, checkboxes, etc.
Methods of Document Object:
 write(“string”): Writes the given string on the document.
 getElementById() : returns the element having the given id value.
 getElementsByName() : returns all the elements having the given name
value.
 getElementsByTagName():  returns all the elements having the given tag
name.
 getElementsByClassName() : returns all the elements having the given
class name.
Example: In this example, We use HTML element id to find the DOM HTML
element.
<!DOCTYPE html>
<html>
 
<body>
    <h2>GeeksforGeeks</h2>
   
    <!-- Finding the HTML Elements by their Id in DOM -->
    <p id="intro">A Computer Science portal for geeks.</p>
 
 
 
     
 
 
<p>This example illustrates the <b>getElementById</b> method.</p>
 
 
 
    <p id="demo"></p>
 
 
 
    <script>
    const element = document.getElementById("intro");
    document.getElementById("demo").innerHTML =
      "GeeksforGeeks introduction is: " + element.innerHTML;
    </script>
</body>
 
</html>
Output

Example: This example describes the representation of the HTML elements in

the tree structure.
<table>
  <ROWS>
    <tr>
      <td>Car</td>
      <td>Scooter</td>
    </tr>
    <tr>
      <td>MotorBike</td>
      <td>Bus</td>
    </tr>
  </ROWS>
</table>
CSS Introduction
CSS is the language we use to style a Web page.

 CSS stands for Cascading Style Sheets

 CSS describes how HTML elements are to be displayed on screen, paper,
or in other media
 CSS saves a lot of work. It can control the layout of multiple web pages
all at once
 External stylesheets are stored in CSS files
 Cascading Style Sheet(CSS) is used to set the style in web pages that
contain HTML elements. It sets the background color, font-size, font-
family, color, … etc property of elements on a web page. 

There are three types of CSS which are given below: 

 Inline CSS
 Internal or Embedded CSS
 External CSS

Inline CSS: Inline CSS contains the CSS property in the body section attached
with element is known as inline CSS. This kind of style is specified within an
HTML tag using the style attribute. 
<!DOCTYPE html>
<html>
    <head>
        <title>Inline CSS</title>
    </head>
      
    <body>
        <p style = "color:#009900; font-size:50px;
                font-style:italic; text-align:center;">
            computer
        </p>
  
    </body>
</html>         

Output: 
Computer
Internal or Embedded CSS: This can be used when a single HTML document
must be styled uniquely. The CSS rule set should be within the HTML file in the
head section i.e the CSS is embedded within the HTML file. 
Example:  <!DOCTYPE html>
<html>
    <head>
        <title>Internal CSS</title>
        <style>
            .main {
                text-align:center; 
            }
            .GFG {
                color:#009900;
                font-size:50px;
                font-weight:bold;
            }
            .geeks {
                font-style:bold;
                font-size:20px;
            }
        </style>
    </head>
    <body>
        <div class = "main">
            <div class ="GFG">GeeksForGeeks</div>
              
            <div class ="geeks">
                A computer science portal for geeks
            </div>
        </div>
    </body>
</html>              
Output: 
 

External CSS: External CSS contains separate CSS file which contains

only style property with the help of tag attributes (For example class, id,
heading, … etc). CSS property written in a separate file with .css
extension and should be linked to the HTML document using link tag.
This means that for each element, style can be set only once and that will
be applied across web pages.
 Example: The file given below contains CSS property. This file save
with .css extension

body {
background-color:powderblue;
}
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
#geeks {
font-style:bold;
font-size:20px;
}
Below is the HTML file that is making use of the created external style sheet  
 link tag is used to link the external style sheet with the html webpage.
 href attribute is used to specify the location of the external style sheet file.

 <!DOCTYPE html>
 <html>
     <head>
         <link rel="stylesheet" href="geeks.css"/>
     </head>
   
     <body>
         <div class = "main">
             <div class ="GFG">GeeksForGeeks</div>
             <div id ="geeks">
                 A computer science portal for geeks
             </div>
         </div>
      </body>
 </html>

Output:

Properties of CSS: Inline CSS has the highest priority, then comes

Internal/Embedded followed by External CSS which has the least priority.
Multiple style sheets can be defined on one page. If for an HTML tag, styles are
defined in multiple style sheets then the below order will be followed. 
 As Inline has the highest priority, any styles that are defined in the internal
and external style sheets are overridden by Inline styles.
 Internal or Embedded stands second in the priority list and overrides the
styles in the external style sheet.
 External style sheets have the least priority. If there are no styles defined
either in inline or internal style sheet then external style sheet rules are
applied for the HTML tags.
Supported Browser:
 Google Chrome
 Internet Explorer
 Firefox
 Opera
 Safari
CSS is the foundation of webpages, is used for webpage development by
styling websites and web apps.