Scribd
Upload
71 views

DHTML Tutorial w3c

DHTML stands for Dynamic HTML and refers to combining HTML, JavaScript, CSS, and the DOM to create dynamic and interactive web pages. JavaScript can dynamically update HTML content by accessing and manipulating DOM elements. Events like user clicks can trigger JavaScript functions to update styles using CSS or change content in the DOM. The HTML DOM defines a standard interface for JavaScript to access and modify HTML documents and their elements.

Uploaded by

Jm Lazaro
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
71 views

DHTML Tutorial w3c

DHTML stands for Dynamic HTML and refers to combining HTML, JavaScript, CSS, and the DOM to create dynamic and interactive web pages. JavaScript can dynamically update HTML content by accessing and manipulating DOM elements. Events like user clicks can trigger JavaScript functions to update styles using CSS or change content in the DOM. The HTML DOM defines a standard interface for JavaScript to access and modify HTML documents and their elements.

Uploaded by

Jm Lazaro
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

DHTML Introduction

Previous Next Chapter 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 CSS JavaScript

If you want to study these subjects first, find the tutorials on our Home Page.

DHTML is NOT a Language


DHTML stands for Dynamic HTML. DHTML is NOT a language or a web standard. 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."

HTML
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 most popular scripting language on the internet, and it works in all major browsers. DHTML is about using JavaScript to control, access and manipulate HTML elements. You can read more about JavaScript in the next chapter of this tutorial.

HTML DOM
The HTML DOM is a W3C standard. It describes the Document Object Model for HTML. The HTML DOM defines a standard way for accessing and manipulating HTML documents. DHTML is about using the DOM to access and manipulate HTML elements. You can read more about the HTML DOM in a later chapter of this tutorial.

HTML Events
HTML events are a part of the HTML DOM. DHTML is about creating web pages that reacts to (user)events. You can read more about events in a later chapter of this tutorial.

CSS
CSS defines how to display HTML elements. DHTML is about using JavaScript and the HTML DOM to change the style and positioning of HTML elements.

You can read more about CSS in a later chapter of this tutorial.

DHTML - JavaScript
Previous Next Chapter

JavaScript can create dynamic HTML content. Date: Sat Mar 20 2010 17:58:45 GMT-0800 (Pacific Standard Time)

JavaScript Alone
In JavaScript, the statement: document.write(), is used to write output to a web page.
Example

The following example uses JavaScript to display the current date and time on a page:

Example
<html> <body> <script type="text/javascript"> document.write(Date()); </script> </body> </html>

Try it yourself

JavaScript and the HTML DOM

A JavaScript can also be used to change the content or attributes of HTML elements. 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


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

You will learn more about JavaScript and CSS in a later chapter of this tutorial.

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 h1 element:

Example
<html> <body> <h1 id="header">Old Header</h1> <script type="text/javascript"> document.getElementById("header").innerHTML="New Header"; </script> </body> </html> Try it yourself Example explained:

The HTML document above contains an h1 element with id="header" We use the HTML DOM to get the element with id="header" A JavaScript changes the content (innerHTML) of that element

Change an HTML Attribute


The following example changes the src attibute of an img element:

Example
<html> <body> <img id="image" src="smiley.gif"> <script type="text/javascript"> document.getElementById("image").src="landscape.jpg"; </script> </body> </html> Try it yourself Example explained:

The HTML document above contains an img element with id="image" We use the HTML DOM to get the element with id="image" A JavaScript changes the src attribute of that element from "smiley.gif" to "landscape.jpg"

HTML DOM Tutorial


To learn more about the HTML DOM, please read our complete HTML DOM tutorial. HTML events can trigger actions in a browser.

HTML Events
Every element on an HTML page has events which can trigger a JavaScript. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags. Examples of events:

A mouse click A web page or an image loading Mousing over a hot spot on the web page

Selecting an input field in an HTML form Submitting an HTML form A keystroke

In the following example, the content of the h1 element will change when a user clicks on it:

Example
<html> <body> <h1 onclick="this.innerHTML='Ooops!'">Click on this text</h1> </body> </html> Try it yourself You can also add the script in the head section, and then call a function from the event handler:

Example
<html> <head> <script type="text/javascript"> function changetext(id) { id.innerHTML="Ooops!"; } </script> </head> <body> <h1 onclick="changetext(this)">Click on this text</h1> </body> </html> Try it yourself

More About HTML Events


For all HTML events, look at our complete HTML DOM Event Object Reference. JavaScript and the HTML DOM can be used to change the style of any HTML element.

Change Style of the Current HTML Element


To change the style of the current HTML element, use the following statement: this.style.property=new style

Example
<html> <body> <h1 onclick="this.style.color='red'">Click Me!</h1> </body> </html> Try it yourself

Change Style of a Specific HTML Element


To change the style of a specific HTML element, use the following statement: document.getElementById(id).style.property=new style

Example
<html> <body> <h1 id="h1" onclick="document.getElementById('h1').style.color='red'">Click Me!</h1> </body> </html> Try it yourself

More About the Style Object and CSS


For all style properties, look at our complete HTML DOM Style Object Reference.

To learn more about CSS, please read our complete CSS tutorial. 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 combinations of HTML, JavaScript, DOM, and CSS to create more dynamic web pages. More DHTML examples

JavaScript
JavaScript is the standard scripting language for the Internet. Every web developer should learn JavaScript. Visit our JavaScript tutorial, and our complete JavaScript reference.

The HTML DOM


HTML 4 supports the HTML Document Object Model (DOM). The HTML DOM is the standard way to access HTML elements. It works in all browsers. With the HTML DOM, you can make interactive web pages that will work in all modern browsers. If you are serious about web development, study our HTML DOM tutorial, and our complete HTML DOM reference.

Dynamic CSS
There is no such thing as dynamic CSS.

However, with JavaScript and the HTML DOM you can dynamically change the style of any HTML element.

Server-side Scripting
In this tutorial we have created dynamic web pages 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-side 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 .NET tutorial

You might also like