An umbrella term is a word that provides a superset or grouping of concepts that all fall under a single common category. Umbrella term is also called a hypernym. For example, cryptology is an umbrella term that encompasses cryptography and cryptanalysis, among other fields...
for a collection of technologies used together to create interactive and animated web sites by using a combination of a static markup language
Markup language
A markup language is a modern system for annotating a text in a way that is syntactically distinguishable from that text. The idea and terminology evolved from the "marking up" of manuscripts, i.e. the revision instructions by editors, traditionally written with a blue pencil on authors' manuscripts...
Client-side scripting generally refers to the class of computer programs on the web that are executed client-side, by the user's web browser, instead of server-side...
JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....
), a presentation definition language (such as CSS
Cascading Style Sheets
Cascading Style Sheets is a style sheet language used to describe the presentation semantics of a document written in a markup language...
The Document Object Model is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Aspects of the DOM may be addressed and manipulated within the syntax of the programming language in use...
.
DHTML allows scripting languages to change variable
Variable (programming)
In computer programming, a variable is a symbolic name given to some known or unknown quantity or information, for the purpose of allowing the name to be used independently of the information it represents...
s in a web page's definition language, which in turn affects the look and function of otherwise "static" HTML page content, after the page has been fully loaded and during the viewing process. Thus the dynamic characteristic of DHTML is the way it functions while a page is viewed, not in its ability to generate a unique page with each page load.
A dynamic web page is a kind of web page that has been prepared with fresh information , for each individual viewing. It is not static because it changes with the time , the user , the user interaction , the context A dynamic web page is a kind of web page that has been prepared with fresh...
is a broader concept, covering any web page generated differently for each user, load occurrence, or specific variable values. This includes pages created by client-side scripting, and ones created by server-side scripting
Server-side scripting
Server-side scripting is a web server technology in which a user's request is verified by running a script directly on the web server to generate dynamic web pages. It is usually used to provide interactive web sites that interface to databases or other data stores. This is different from...
PHP is a general-purpose server-side scripting language originally designed for web development to produce dynamic web pages. For this purpose, PHP code is embedded into the HTML source document and interpreted by a web server with a PHP processor module, which generates the web page document...
Perl is a high-level, general-purpose, interpreted, dynamic programming language. Perl was originally developed by Larry Wall in 1987 as a general-purpose Unix scripting language to make report processing easier. Since then, it has undergone many changes and revisions and become widely popular...
JavaServer Pages is a Java technology that helps software developers serve dynamically generated web pages based on HTML, XML, or other document types...
ASP.NET is a Web application framework developed and marketed by Microsoft to allow programmers to build dynamic Web sites, Web applications and Web services. It was first released in January 2002 with version 1.0 of the .NET Framework, and is the successor to Microsoft's Active Server Pages ...
) where the web server generates content before sending it to the client.
Uses
DHTML allows authors to add effects to their pages that are otherwise difficult to achieve. For example, DHTML allows the page author to:
Animate text and images in their document, independently moving each element from any starting point to any ending point, following a predetermined path or one chosen by the user.
Embed a ticker that automatically refreshes its content with the latest news, stock quotes, or other data.
Use a form to capture user input, and then process and respond to that data without having to send data back to the server.
Include rollover buttons or drop-down menus.
A less common use is to create browser-based action games. During the late 1990s and early 2000s, a number of games were created using DHTML, but differences between browsers made this difficult: many techniques had to be implemented in code to enable the games to work on multiple platforms. Recently browsers have been converging towards the web standards
Web standards
Web standards is a general term for the formal standards and other technical specifications that define and describe aspects of the World Wide Web. In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites,...
, which has made the design of DHTML games more viable. Those games can be played on all major browsers and they can also be ported to Widgets for Mac OS X
Mac OS X
Mac OS X is a series of Unix-based operating systems and graphical user interfaces developed, marketed, and sold by Apple Inc. Since 2002, has been included with all new Macintosh computer systems...
Windows Vista is an operating system released in several variations developed by Microsoft for use on personal computers, including home and business desktops, laptops, tablet PCs, and media center PCs...
, which are based on DHTML code.
The term "DHTML" has fallen out of use in recent years as it was associated with practices and conventions that tended to not work well between various web browsers. DHTML may now be referred to as unobtrusive JavaScript
Unobtrusive JavaScript
"Unobtrusive JavaScript" is a general approach to the use of JavaScript in web pages. Though the term is not formally defined, its basic principles are generally understood to include:...
The term DOM scripting refers to programmatically accessing the Document Object Model . In common usage, DOM scripting implies JavaScript. DOM scripting has its roots in Dynamic HTML , but is more structured. It is the third pillar in the web standards movement.-DHTML vs...
Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic HTML markup, and external stylesheet and scripting technologies...
.
Basic DHTML support was introduced with Internet Explorer 4.0, although there was a basic dynamic system with Netscape Navigator 4.0
Netscape Navigator
Netscape Navigator was a proprietary web browser that was popular in the 1990s. It was the flagship product of the Netscape Communications Corporation and the dominant web browser in terms of usage share, although by 2002 its usage had almost disappeared...
. When it originally became widespread, varying degrees of support among web browsers for the technologies involved made DHTML-style techniques difficult to develop and debug. Development became easier when Internet Explorer 5.0+
Internet Explorer 5
Microsoft Internet Explorer 5 was a graphical web browser released in March 1999 by Microsoft, primarily for Microsoft Windows, but initially with versions available for Apple Macintosh, Sun Solaris, and HP-UX. It was one of the main participants of the first browser war...
Opera is a web browser and Internet suite developed by Opera Software with over 200 million users worldwide. The browser handles common Internet-related tasks such as displaying web sites, sending and receiving e-mail messages, managing contacts, chatting on IRC, downloading files via BitTorrent,...
A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies....
jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig...
have abstracted away much of the day-to-day difficulties in cross-browser DOM manipulation.
Structure of a web page
Typically a web page using DHTML is set up the following way:
DHTML example
Often the code is stored in an external file; this is done
by linking the file that contains the JavaScript.
This is helpful when several pages use the same script:
In the above code, the blue code represents the DOCUMENT TYPE declaration, which specifies which version of markup code is used to create the website. The red code shows browser detection Javascript, which enables web pages to adjust to browser application standards and requirements.
Example: Displaying an additional block of text
The following code illustrates an often-used function. An additional part of a web page will only be displayed if the user requests it.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Test
How to use a DOM function
External links
QuirksMode, a comprehensive site with test examples and instructions on how to write DHTML code which runs on several browsers.
