Education is a powerful tool that opens up the mind and expands our horizons. It provides us with the knowledge and skills necessary to succeed in life and make positive contributions to society. “Life is too short to waste. Dreams are fulfilled only through action…not through endless planning to take action.“

1. INTRODUCTION OF DHTML
UNIT: 2ND

2. DHTML stands for Dynamic hyper text markup language . DHTML is a
n Umbrella term for
A collection of technologies used together to create interactive and
animated web sites by using a combination of static markup langaug
e (such as HTML), a client side scripting langauge (such as javascript
) , a presentation definition langauge (such as css) and Document ob
ject model. The DHTML is based on the properties of the HTML, java
script , CSS, and DOM (Document Object Model which is used to acc
ess individual elements of a document) which helps in making dyna
mic content. The DHTML make use of Dynamic object model to mak
e changes in settings and also in properties and methods

3. HTML: HTML stands for Hypertext Markup Language or HTML is the sta
ndard markup language for documents designed to be displayed in a we
b browser.
Javascript: It is a Client-side Scripting language. Javascript is a scripting
angauge for creating dynamic web page content .
CSS: CSS stands for Cascading Style Sheet. It helps in the styling of the w
eb pages and helps in designing of the pages.
DOM: It is known as a Document Object Model . The only defect in it is
hat most of the browser does not support DOM. It is a way to manipulat
the static contents.

5. 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, g
ames, applications along with providing new ways of navigating thro
ugh websites.
 The functionality of a webpage is enhanced due to the usage of lo
w-bandwidth effect by DHTML.
 DHTML also facilitates the use of methods, events, properties, an
d codes.

6. Why Use DHTML?
DHTML makes a webpage dynamic but Javascript also do
es, the question arises that what different does DHTML d
o? So the answer is that DHTML has the ability to change
a webpages look, content and style once the document h
as loaded on our demand without changing or deleting ev
erything already existing on the browser’s webpage. DHT
ML can change the content of a webpage on demand wit
hout the browser having to erase everything else, i.e. bei
ng able to alter changes on a webpage even after the doc
ument has completely loaded.

7. Advantages:
 Size of the files are compact in compared to other interactional media like Flash or Shockw
ave, 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.
 It has more advanced functionality than a static HTML. it is capable of holding more c
ontent 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 Net
scape 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 sh
ould be known to the designer before starting with DHTML which is a long and time-consumi
ng in itself.
 Implementation of different browsers are different. So if it worked in one browser, it migh
t not necessarily work the same way in another browser.

8. 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 dyna
mic 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 com
paratively faster.
 HTML cannot be used as server side code but DHTML used as server side cod
e.
 DHTML needs database connectivity but not in case of HTML.
 Files in HTML are stored using .htm or .html extension while DHTML uses .dht
m extension.
 Web pages created using HTML are rather simple and have no styling as it use
s only one language whereas DHTML uses HTML, CSS, and Javascript which result
s in a much better and way more presentable webpage.
 HTML requires no processing from the browser but DHTML does.

10. DOM (Document Object Model)
The Document Object Model (DOM) is a programming interface for HTML(HyperT
ext Markup Language) and XML(Extensible markup language) documents. It defin
es the logical structure of documents and the way a document is accessed and m
anipulated.
Note: It is called a Logical structure because DOM doesn’t specify any relationship
between objects.
DOM is a way to represent the webpage in a structured hierarchical way so that it wi
ll become easier for programmers and users to glide through the document. With D
OM, we can easily access and manipulate tags, IDs, classes, Attributes, or Element
s of HTML using commands or methods provided by the Document object. Using D
OM, the JavaScript gets access to HTML as well as CSS of the web page and can a
lso add behavior to the HTML elements. so basically Document Object Model is a
n API that represents and interacts with HTML or XML documents.

11. Why DOM is required?
HTML is used to structure the web pages and Javascript is used to add behavior t
o 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 creat
ed(DOM). DOM is basically the representation of the same HTML document b
ut 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(more than one tree). The term structure model i
s sometimes used to describe the tree-like representation of a document. Each bra
nch 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 impl
ementations are used to create a representation of the same document, they will cre
ate the same structure model, with precisely the same objects and relationships.

12. Why called an Object Model?
Documents are modeled using objects, and the model includes not only the structur
e of a document but also the behavior of a document and the objects of which it is c
omposed 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.

14. Window Object:
Window Object is object of the browser which is always at top of the hierarchy. It is l
ike an API that is used to set and access all the properties and methods of the brow
ser. It is automatically created by the browser.
Document object:
When an HTML document is loaded into a window, it becomes a document object. T
he ‘document’ object has various properties that refer to other objects which allow a
ccess to and modification of the content of the web page. If there is a need to acces
s any element in an HTML page, we always start with accessing the ‘document’ obje
ct. 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 f
ields, buttons, radio buttons, checkboxes, etc.

15. 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 n
ame.
Example: In this example, We use HTML element id to find the DOM HTML ele
ment.

16. <
<table>
<ROWS>
<tr>
<td>Car</td>
<td>Scooter</td>
</tr>
<tr>
<td>MotorBike</td>
<td>Bus</td>
</tr>
</ROWS>
</table>

18. CSS - Positioning
CSS helps you to position your HTML element. You can put any HTML element at
whatever location you like. You can specify whether you want the element position
ed relative to its natural position in the page or absolute based on its parent eleme
nt.
Now, we will see all the CSS positioning related properties with examples −
Relative Positioning :
Relative positioning changes the position of the HTML element relative to where it
normally appears. So "left:20" adds 20 pixels to the element's LEFT position.
You can use two values top and left along with the position property to move an H
TML element anywhere in the HTML document.
Move Left - Use a negative value for left.
Move Right - Use a positive value for left.
Move Up - Use a negative value for top.
Move Down - Use a positive value for top.

19. NOTE − You can use bottom or right values as well in the same
way as top and left.
Here is the example :
<html>
<head>
</head>
<body>
<div style = "position:relative; left:80px; top:2px; backgrou
nd-color:yellow;">
This div has relative positioning.
</div>
</body>
</html>

20. Absolute Positioning
An element with position: absolute is positioned at the specified coordinates rela
tive to your screen top-left corner.
You can use two values top and left along with the position property to move an H
TML element anywhere in the HTML document.
Move Left - Use a negative value for left.
Move Right - Use a positive value for left.
Move Up - Use a negative value for top.
Move Down - Use a positive value for top.
NOTE − You can use bottom or right values as well in the same way as top an
d left.
Here is an example −

21. <html>
<head>
</head>
<body>
<div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
This div has absolute positioning.
</div>
</body>
</html>
Fixed Positioning
Fixed positioning allows you to fix the position of an element to a particular spot on th
e page, regardless of scrolling. Specified coordinates will be relative to the browser w
indow.
You can use two values top and left along with the position property to move an HTM
L element anywhere in the HTML document.
 Move Left - Use a negative value for left.
 Move Right - Use a positive value for left.
 Move Up - Use a negative value for top.
 Move Down - Use a positive value for top.

22. NOTE − You can use bottom or right values as well in the same way as top and left.
Here is an example −
<html>
<head>
</head>
<body>
<div style = "position:fixed; left:80px; top:20px; background-color:yellow;">
This div has fixed positioning.
</div>
</body>
</html>

23. JavaScript assisted Style Sheets
JavaScript Style Sheets (JSSS) was a stylesheet language technology proposed by
Netscape Communications in 1996 to provide facilities for defining the presentation
of webpages. It was an alternative to the Cascading Style Sheets (CSS) technology
.
JavaScript is a powerful programming language. It can therefore be used to do thin
gs ordinary style sheet languages could not. For instance, functions and assigned v
alues may be used to make the expression of style information easier for the style s
heet creator.

24. What Is the ID Attribute Used For?
The ID attribute performs several actions for web pages:
A style sheet selector : This is the function most people use the ID attribute
for. Because they are unique, you'll style just the one item on your web page when yo
u style using an ID property. The downside to using an ID for styling purposes is that i
t has a very high level of specificity, which can make it very challenging if you need to
override a style for some reason later in a stylesheet. Because of this, current web pr
actices lean toward using classes and class selectors in place of IDs and ID selectors
for general styling purposes.
THE ID ATTRIBUTE :
According to the W3C, the ID attribute in HTML is a unique identifier for th
e element. It provides a way to identify an area of a web page for CSS styl
es, anchor links, and targets for scripts.

25. Named anchors for linking to :
Web browsers target precise locations in your web documents by pointing to the ID at th
end of the URL. Add the id to the end of the page URL, preceded by a hash mark. Link to
these anchors with the page itself by adding the hash tag and the ID name in the href att
bute for the element. For example, for a division with an ID of contact, link to it on that pa
e with #contact.
A reference for scripts:
If you write any Javascript functions, use the ID attribute so that you can make changes
o the precise element on the page with your scripts.
Other processing :
The id supports processing within your web documents in whatever way you need. For e
xample, you might extract t

26. Rules for Using the ID Attribute
Ensure your ID attributes conform to these three standards:
The ID must start with a letter (a-z or A-Z).
All subsequent characters can be letters, numbers (0-9), hyph
ens (-), underscores (_), colons (:), and periods (.).
Each ID must be unique within the document.
Using the ID Attribute
After you identify a unique element of your web site, use style sheets to style just
that one element.
For example, to identify an ID titled contact, use either of these forms:
div#contact { background: #0cf;}
#contact { background: #0cf;}
div#contact { background: #0cf;}
#contact { background: #0cf;}

27. The first sample targets a division with an ID attribute of contact. The second one still t
argets the element with an ID of contact, it just wouldn't stipulate that it's a division. The
end result of the styling would be exactly the same.
You can also link to that specific element without adding any ta
gs.
 ID attributes are still very useful in HTML, even though class selectors have repl
aced them for most general styling purposes. Using the ID attribute as a hook for styl
es, while also using them as anchors for links or targets for scripts, means that they st
ill have an important place in web design today.
Reference that paragraph in your scripts with the getElementById JavaScript method:
document.getElementById("contact-section")

28. DHTML Events :
An event is defined as changing the occurrence of an object.
It is compulsory to add the events in the DHTML page. Without events, there will b
e no dynamic content on the HTML page. The event is a term in the HTML, which t
riggers the actions in the web browsers.
Suppose, any user clicks an HTML element, then the JavaScript code associated
with that element is executed. Actually, the event handlers catch the events perfor
med by the user and then execute the code.
Example of events:
1.Click a button.
2.Submitting a form.
3.An image loading or a web page loading, etc.
Following table describes the Event Handlers used in the DHTML:

29. 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 han
dler works opposite to onblur.
7. onkeydown It triggers when a user is pressing a key on a keyboard devic
e. This event handler works for all the keys.