MODULE 1
Dynamic HTML
Dynamic HTML
● DHTML, or Dynamic HTML, is a technology that differs from traditional HTML.
● DHTML combines HTML, CSS, JavaScript, and the Document Object Model (DOM) to create dynamic content.
● It uses the Dynamic Object Model to modify settings, properties, and methods.
● Scripting is also an essential component of DHTML, which was part of earlier computing trends.
● It is supported by some versions of Netscape Navigator and Internet Explorer 4.0 and higher.
● HTML: HTML stands for Hypertext Markup Language and it is a client-side markup language. It is used to build the block of
web pages.
● Javascript: It is a Client-side Scripting language. Javascript is supported by most of browsers, and also has cookie collection to
determine the user's 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 acts as the weakest link in it. The only defect in it is that most of the
browsers does not support DOM. It is a way to manipulate the static content.
DHTML
DHTML is not a technology; rather, it is the combination of three
different technologies, client-side scripting (JavaScript or VBScript),
cascading style sheets and document object model.
Note: Many times DHTML is confused with being a language like
HTML but it is not. It must be kept in mind that it is an interface or
browsers enhancement feature which makes it possible to access
the object model through Javascript language and hence make the
webpage more interactive.
Key Features
● 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.
Why Use DHTML?
DHTML makes a webpage dynamic but Javascript also does, the question arises
that what different does DHTML do? So the answer is that DHTML has the ability
to change a webpages look, content and style once the document has loaded on
our demand without changing or deleting everything already existing on the
browser's webpage. DHTML can change the content of a webpage on demand
without the browser having to erase everything else, i.e. being able to alter
changes on a webpage even after the document has completely loaded.
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.
