Dynamic HTML, or DHTML, is a collection of technologies used together to create interactive and animated web sites A website is a collection of related web pages, images, videos or other digital assets that are addressed with a common domain name or IP address in an Internet Protocol-based network. A web site is hosted on at least one web server, accessible via the Internet or a private local area network by using a combination of a static markup language A markup language is a set of annotations to text that describe how something is to be structured, laid out, or formatted. Electronic document markup languages are embedded markup codes used to construct structured documents, used in computer typesetting, word processors, web-document editors and web browsers. With the advent of WYSIWIG markup is (such as HTML HTML, an initialism for Hypertext Mark-up Language, is the predominant markup language for web pages. It provides a means to describe the structure of text-based information in a document—by denoting certain text as links, headings, paragraphs, lists, etc.—and to supplement that text with interactive forms, embedded images, and other objects), a client-side scripting 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 . This type of computer programming is an important part of the Dynamic HTML (DHTML) concept, enabling web pages to be scripted; that is, to have different and changing content language (such as JavaScript JavaScript is a scripting language used to enable programmatic access to objects within other applications. It is primarily used in the form of client-side JavaScript for the development of dynamic websites. JavaScript is a dialect of the ECMAScript standard and is characterized as a dynamic, weakly typed, prototype-based language with first-class), a presentation definition language (such as CSS Cascading Style Sheets is a style sheet language used to describe the presentation (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL), and the Document Object Model The Document Object Model is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Objects under the DOM (also sometimes called "Elements") may be specified and addressed according to the syntax and rules of the programming language used to manipulate them.
DHTML allows scripting languages to change variables In computer programming, a variable is an identifier that is linked to a value stored in the system's memory or an expression that can be evaluated. For instance, a variable might be called "total_count" and contain a number 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.
By contrast, a dynamic web page Classical hypertext navigation, with HTML or XHTML alone, provides "static" content, meaning that the user requests a web page and simply views the page and the information on that page is a broader concept — 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 is a web server technology in which a user's request is fulfilled 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 client-side scripting where scripts are run by the viewing (such as PHP PHP is a scripting language originally designed for producing dynamic web pages. It has evolved to include a command line interface capability and can be used in standalone graphical applications or Perl Perl is a high-level, general-purpose, interpreted, dynamic programming language. Perl was originally developed by Larry Wall, a linguist working as a systems administrator for NASA, 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) where the web server generates content before sending it to the client.
Contents |
Uses
DHTML is often used to make rollover buttons or drop-down menus on a web page and interactive web pages.
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[citation needed], such as Kingdom of Loathing, 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 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, and a philosophy of web design and development, 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 is a line of computer operating systems developed, marketed, and sold by Apple Inc., and since 2002 has been included with all new Macintosh computer systems. It is the successor to Mac OS 9, the final release of the "classic" Mac OS, which had been Apple's primary operating system since 1984. Mac OS X, whose "X" and Gadgets for Windows Vista Windows Vista is a line of operating systems developed by Microsoft for use on personal computers, including home and business desktops, laptops, tablet PCs, and media center PCs. Prior to its announcement on July 22, 2005, Windows Vista was known by its codename "Longhorn." Development was completed on November 8, 2006; over the, which are based on DHTML code.
The term has fallen out of use in recent years, as DHTML scripts often tended to not work well between various web browsers. DHTML may now be referred to as unobtrusive JavaScript "Unobtrusive JavaScript" is an emerging technique in the JavaScript programming language, as used on the World Wide Web. Though the term is not formally defined, its basic principles are generally understood to include: coding (DOM Scripting 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 DHTML, but is more structured. It is the third pillar in the web standards movement), in an effort to place an emphasis on agreed-upon best practices while allowing similar effects in an accessible, standards-compliant way Progressive enhancement is a strategy for web design that emphasizes accessibility, semantic markup, and external stylesheet and scripting technologies. Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while.
Some disadvantages of DHTML are that it is difficult to develop and debug Debugging is a methodical process of finding and reducing the number of bugs, or defects, in a computer program or a piece of electronic hardware thus making it behave as expected. Debugging tends to be harder when various subsystems are tightly coupled, as changes in one may cause bugs to emerge in another due to varying degrees of support among web browsers of the technologies involved, and that the variety of screen sizes means the end look can only be fine-tuned on a limited number of browser and screen-size combinations. Development for relatively recent browsers, such as Internet Explorer 5.0+ Microsoft Internet Explorer 5 is 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. (See also Internet Explorer for Mac or for Unix.), Mozilla Firefox Mozilla Firefox is a free and open source web browser descended from the Mozilla Application Suite and managed by Mozilla Corporation. Firefox had 22.51% of the recorded usage share of web browsers as of May 2009[update], making it the second most popular browser in terms of current use worldwide, after Internet Explorer 2.0+, and Opera Opera is a web browser and internet suite developed by the Opera Software company. Opera handles common Internet-related tasks such as displaying web sites, sending and receiving e-mail messages, managing contacts, IRC online chatting, downloading files via BitTorrent, and reading web feeds. Opera is offered free of charge for personal computers 7.0+, is aided by a shared Document Object Model. Basic DHTML support was introduced with Internet Explorer 4.0 Microsoft Internet Explorer 4 is a graphical web browser released in September 1997 by Microsoft, primarily for Microsoft Windows, but also with versions available for Apple Mac OS, Solaris, and HP-UX. (See Internet Explorer for Mac and Internet Explorer for Unix.), although there was a basic dynamic system with Netscape Navigator 4.0 Netscape Navigator and Netscape are the names for the proprietary web browser popular in the 1990s, and the flagship product of the Netscape Communications Corporation, and the dominant web browser in terms of usage share. Yet by 2002 its users had almost disappeared. One of the reasons for this was due to the popularity of Microsoft's Internet.
Structure of a web page
See also: DOM events DOM events allow event-driven programming languages like JavaScript, JScript, ECMAScript, VBScript and Java to register various event handlers/listeners on the element nodes inside a DOM tree, e.g. HTML, XHTML, XUL and SVG documentsTypically a web page using DHTML is set up the following way:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DHTML example</title>
<script type="text/javascript">
function init() {
myObj = document.getElementById("navigation");
// .... more code]]
}
window.onload=init;
</script>
</head>
<body>
<div id="navigation"></div>
<pre>
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:
</pre>
<script type="text/javascript" src="myjavascript.js"></script>
</body>
</html>
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. In e-learning Electronic learning is a term for all types of technology-enhanced learning (TEL), where technology is used to support the learning process. Often the medium of instruction is through computer technology, particularly involving digital technologies. E-learning has been defined as "pedagogy empowered by digital technology" . In some, such a function could be used to display additional hints or an answer the student initially should not see.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
h2 {background-color: lightblue; width: 100%}
a {font-size: larger; background-color: goldenrod}
a:hover {background-color: gold}
#example1 {display: none; margin: 3%; padding: 4%; background-color: limegreen}
</style>
<script type="text/javascript">
function changeDisplayState (id) {
d=document.getElementById("showhide");
e=document.getElementById(id);
if (e.style.display == 'none' || e.style.display == "") {
e.style.display = 'block';
d.innerHTML = 'Hide example..............';
} else {
e.style.display = 'none';
d.innerHTML = 'Show example';
}
}
</script>
</head>
<body>
<h2>How to use a DOM function</h2>
<div><a id="showhide" href="javascript:changeDisplayState('example1')">Show example</a></div>
<div id="example1">
This is the example.
(Additional information, which is only displayed on request)...
</div>
<div>The general text continues...</div>
</body>
</html>
External links
- QuirksMode, a comprehensive site with test examples and instructions on how to write DHTML code which runs on several browsers.
- Introductory DHTML Tutorial for those taking their first steps in DHTML.
- HTML & DHTML Reference on MSDN
Categories: HTML
|
cupid
hu, 02 Jul 2009 09:22:57 GM
All . dynamic. requests will go here location / { default_type text/. html. ;. proxy_set_header Host $http_host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_redirect off; ...
