Beruflich Dokumente
Kultur Dokumente
• HTML
• CSS
• JavaScript
If you want to study these subjects first, find the tutorials on our Home Page.
To most people DHTML means the combination of HTML, JavaScript, DOM and CSS.
HTML
The W3C HTML 4 standard has rich support for dynamic content:
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.
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
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 »
document.getElementById(id).innerHTML=new HTML
document.getElementById(id).attribute=new value
You will learn more about JavaScript and the HTML DOM in the next chapter of this tutorial.
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.
document.getElementById(id).style.property=new style
You will learn more about JavaScript and CSS in a later chapter of this tutorial.
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.
Example
<html>
<body>
<script type="text/javascript">
document.getElementById("header").innerHTML="New Header";
</script>
</body>
</html>
Try it yourself »
Example explained:
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:
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>
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.
JavaScript
JavaScript is the standard scripting language for the Internet.
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.
PHP tutorial
ASP tutorial
.NET tutorial