DHTML Tutorial

DHTML Tutorial
• DHTML is NOT a language. It is a TERM describing the art of making dynamic and interactive web
pages.
• DHTML combines HTML, JavaScript, DOM, and CSS.
DHTML Introduction
DHTML is the art of combining HTML, JavaScript, DOM, and CSS.
What you should already know

Before you continue you should have a basic understanding of the following:
• HTML
• JavaScript
• CSS
DHTML is NOT a Language

• DHTML stands for Dynamic HTML.
• DHTML is NOT a language or a web standard.
• DHTML is a TERM used to describe the technologies used to make web pages dynamic and
interactive.
• To most people DHTML means the combination of HTML, JavaScript, DOM, and CSS.
• According to the World Wide Web Consortium (W3C):
• "Dynamic HTML is a term used by some vendors to describe the combination of HTML, style
sheets and scripts that allows documents to be animated."
DHTML Technologies
Below is a listing of DHTML technologies.
HTML 4
• The W3C HTML 4 standard has rich support for dynamic content:
• HTML supports JavaScript
• HTML supports the Document Object Model (DOM)
• HTML supports HTML Events
• HTML supports Cascading Style Sheets (CSS)
• DHTML is about using these features to create dynamic and interactive web pages.
JavaScript
JavaScript is the scripting standard for HTML.
DHTML is about using JavaScript to control, access and manipulate HTML elements.
HTML DOM
• The HTML DOM is the W3C standard Document Object Model for HTML.
• The HTML DOM defines a standard set of objects for HTML, and a standard way to access and
manipulate them.
• DHTML is about using the DOM to access and manipulate HTML elements.
HTML Events
• The W3C HTML Event Model is a part of the HTML DOM.
• It defines a standard way to handle HTML events.
• DHTML is about creating web pages that reacts to (user)events.
CSS
CSS is the W3C standard style and layout model for HTML.
CSS allows web developers to control the style and layout of web pages.
HTML 4 allows dynamic changes to CSS.
DHTML is about using JavaScript and DOM to change the style and positioning of HTML elements.
DHTML - JavaScript
JavaScript can create dynamic HTML content.
Date: Mon Jun 01 2009 13:11:38 GMT+0800
JavaScript Alone
If you have studied JavaScript, you know that the statement:
document.write()
is used to write output to a web page.

Example
Using JavaScript to display the current date:

Example
<html>
<body>
<script type="text/javascript">
document.write(Date());
</script>
</body>
</html>
JavaScript and the HTML DOM

A JavaScript can also be used to change the content and attributes of HTML elements dynamically.
To change the content of an HTML element:
document.getElementById(id).innerHTML=new HTML
To change the attribute of an HTML element:
document.getElementById(id).attribute=new value
You will learn more about JavaScript and the HTML DOM in the next chapter of this tutorial.
JavaScript and HTML Events
A JavaScript can also be executed when an event occurs, like when a user clicks on an HTML element.
To execute code when a user clicks on an element, use the following event attribute:
onclick=JavaScript
You will learn more about JavaScript and HTML Events in a later chapter.
JavaScript and CSS

JavaScript can also change the style of HTML elements.
To change the style of an HTML element:
document.getElementById(id).style.property=new style
DHTML - HTML DOM

What is the HTML DOM?
• The HTML DOM is:
• A Document Object Model for HTML
• A standard programming interface for HTML
• Platform- and language-independent
• A W3C standard
• The HTML DOM defines the objects and properties of all HTML elements, and the methods
(interface) to access them.
In other words:
The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
Change an HTML Element

The following example changes the content of an HTML h1 element:
Example
<html>
<body>
<h1 id="header">Old Header</h1>
document.getElementById("header").innerHTML="New Header";
</script>
</body></html>
Example explained:
1. The HTML document contains a header with id="header"
2. The DOM is used to get the element with id="header"
3. A JavaScript is used to change the HTML content (innerHTML)
Change an HTML Attribute

The following example changes the src attibute of an HTML img element:
Example
<html>
<body>
<img id="image" src="smiley.gif">
document.getElementById("image").src="landscape.jpg";
</script>
</body></html>
Example explained:
1. The HTML document loads with an image with id="image"
2. The DOM is used to get the element with id="image"
3. A JavaScript changes the src attribute from smiley.gif to landscape.jpg
DHTML Event Handlers

HTML events can trigger actions in the browser.
Event handlers
An event handler allows you to execute code when an event occurs.
Events are generated by the browser when the user clicks an element, when the page loads, when a form is
submitted, etc.
In the following example, the h1 heading changes when a user clicks on it:
Example
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text</h1>
</body>
</html>
You can also add a script in the head section of the page and then call the function from the event handler:
Example
<html>
<head>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text</h1>
</body>
</html>
DHTML - CSS
JavaScript and the HTML DOM can be used to change the style of any HTML element.
Change Style of Current HTML Element
To change the style of the current HTML element, use the statement:
this.style.property=new styleExample<html>
<body>
<h1 id="header" onclick="this.style.color='red'">Click Me!</h1>
</body></html>
Change Style of a Specific HTML Element

To change the style of a specific HTML element, use the statement:
document.getElementById(element_id).style.property=new styleExample<html>
<body>
<h1 id="h1" onclick="document.getElementById('h1').style.color='red'">Click Me!</h1>
</body></html>
DHTML Summary
• DHTML is about combining HTML, JavaScript, DOM, and CSS.
• DHTML is a Term
In this tutorial you have learned that DHTML is only a term used to describe the different combinations of
HTML, JavaScript, DOM, and CSS that can be used to create more dynamic web pages.
More DHTML examples
JavaScript
JavaScript is the standard scripting language for the Internet.
Everyone serious about web development should have a full understanding of JavaScript.
The HTML DOM

HTML 4 supports the HTML Document Object Model (DOM).
The HTML DOM is the official (standard and browser independent) way to access HTML elements. It works
in all browsers.
Only by using the HTML DOM you can make interactive web pages that will work in all modern browsers.
Dynamic CSS
There is no such thing as dynamic CSS.
However, with JavaScript and the HTML DOM you can dynamically change the CSS style of any HTML
element.
Server Side Scripting

In this tutorial you have seen that web pages can be made dynamic by using scripts on the client (in the
browser).
Web pages can also be made more dynamic by using scripts on the server.
With server scripting you can edit, add, or change any web page content. You can respond to data
submitted from HTML forms, access data or databases and return the results to a browser, and customize
pages for individual users.
At W3Schools you can study the following server side scripting tutorials:
• PHP tutorial
• ASP tutorial
• DotNET tutorial

DHTML Tutorial

Uploaded by

DHTML Tutorial

Uploaded by

DHTML Tutorial

What you should already know

DHTML is NOT a Language

is used to write output to a web page.

Using JavaScript to display the current date:

JavaScript and the HTML DOM

JavaScript and CSS

DHTML - HTML DOM

Change an HTML Element

Change an HTML Attribute

DHTML Event Handlers

Change Style of a Specific HTML Element

More DHTML examples

The HTML DOM

Server Side Scripting

You might also like