DHTML Tutorial
DHTML is NOT a language.
DHTML is a TERM describing the art of making dynamic and
interactive web pages.
DHTML combines HTML, JavaScript, DOM, and CSS.
Start learning DHTML now!
Introduction to DHTML
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
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.
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.
You can read more about this in the next chapter of this
tutorial.
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.
You can read more about this in a later chapter of this
tutorial.
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.
You can read more about this in a later chapter of this
tutorial.
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.
You can read more about this in a later chapter of this
tutorial.
DHTML JavaScript
JavaScript can create dynamic HTML content:
Date: Sat Oct 25 14:44:49 2008
JavaScript Alone
If you have studied JavaScript, you already know that the
statement:
document.write()can be used to display dynamic content to a web
page.
ExampleUsing JavaScript to display the current date:
document.write(Date());
Try it Yourself
JavaScript and the HTML DOM
With HTML 4, JavaScript can also be used to change the inner
content and attributes of HTML elements dynamically.
To change the content of an HTML element use:
document.getElementById(id).innerHTML=new HTMLTo change the
attribute of an HTML element use:
document.getElementById(id).attribute=new valueYou will learn
more about JavaScript and the HTML DOM in the next chapter of this
tutorial.
JavaScript and HTML Events
New to HTML 4 is the ability to let HTML events trigger actions
in the browser, like starting a JavaScript when a user clicks on an
HTML element.
To execute code when a user clicks on an element, use the
following event attribute:
onclick=JavaScriptYou will learn more about JavaScript and HTML
Events in a later chapter.
JavaScript and CSS
With HTML 4, JavaScript can also be used to change the style of
HTML elements.
To change the style of an HTML element use:
document.getElementById(id).style.property=new styleYou will
learn more about JavaScript and CSS in a later chapter of this
tutorial.
DHTML - HTML Document Object Model (DOM)
The DOM presents HTML as a tree-structure (a node tree), with
elements, attributes, and text:
Examples
innerHTMLHow to access and change the innerHTML of an
element.
Attribute changeHow to access an image element and change the
"src" attribute.
What is the HTML DOM?
The HTML DOM is:
A standard 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.
Using the HTML DOM to Change an HTML Element
The HTML DOM can be used to change the content of an HTML
element:
Old Header
document.getElementById("header").innerHTML="New Header";
HTML output:
New Header
Example explained:
The HTML document contains a header with id="header"
The DOM is used to get the element with id="header"
A JavaScript is used to change the HTML content (innerHTML)
Try it yourself
Using the HTML DOM to Change an HTML Attribute
The HTML DOM can be used to change the attribute of an HTML
element:
document.getElementById("image").src="landscape.jpg";
HTML output:
DHTML Event Handlers
HTML events can trigger actions in the browser, like starting a
JavaScript when a user clicks on an element.
Don't Click On This Text
Examples
onclickTurn on the light! How to change an image when the user
clicks it.
onmousedown & onmouseupThis time the light is on only when
the user holds down the mouse button.
onloadDisplays an alert box when the page has finished
loading.
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.
ExampleA header changes when the user clicks it:
Click on this text
Try it yourselfYou can also add a script in the head section of
the page and then call the function from the event handler:
function changetext(id)
{
id.innerHTML="Ooops!";
}
Click on this text
HTML 4.0 Event Handlers
EventOccurs when...
onaborta user aborts page loading
onblura user leaves an object
onchangea user changes the value of an object
onclicka user clicks on an object
ondblclicka user double-clicks on an object
onfocusa user makes an object active
onkeydowna keyboard key is on its way down
onkeypressa keyboard key is pressed
onkeyupa keyboard key is released
onloada page is finished loading
onmousedowna user presses a mouse-button
onmousemovea cursor moves on an object
onmouseovera cursor moves over an object
onmouseouta cursor moves off an object
onmouseupa user releases a mouse-button
onreseta user resets a form
onselecta user selects content on a page
onsubmita user submits a form
onunloada user closes a page
More About HTML Events
For a full overview please refer to the complete DOM Event
Object Reference in our HTML DOM tutorial.
DHTML CSS
JavaScript can be used to change the style an HTML element:
Examples
Change the style of the current elementHow to change the style
of an element using the this object.
Change the style of a specific elementHow to change the style of
an element using getElementById.
(You can find more examples at the bottom of this page)
JavaScript, DOM, and CSS
With HTML 4, JavaScript and the HTML DOM can be used to change
the style any HTML element.
To change the style the current HTML element, use the
statement:
style.property=new styleor more correctly:
this.style.property=new styleTry it yourselfTo change the style
of a specific HTML element, use the statement:
document.getElementById(element_id).style.property=new styleTry
it yourself
More examples
Mouse EventsHow to change the color of an element when the
cursor moves over it.
VisibilityHow to make an element invisible. Do you want the
element to show or not?
More About JavaScript, DOM, And CSS
For a full overview please refer to the complete DOM Style
Object Reference in our HTML DOM tutorial.
To learn more about CSS, find the complete CSS tutorial on our
Home Page.
1.
h1.ex1
{
position:relative;
left:20px;
}
h1.ex2
{
position:relative;
left:-20px;
}
Normal Heading
Heading +20
Heading -20
Relative positioning moves an element relative to its original
position.
"left:20" adds 20 pixels to the element's LEFT position.
"left:-20" subtracts 20 pixels from the element's LEFT
position.
2.
h1
{
position:relative;
left:40px;
}
Heading A
This is a paragraph.
Heading B
This is a paragraph.
Heading C
This is a paragraph.
Heading D
This is a paragraph.
3.
h1.x
{
position:absolute;
left:100px;
top:150px;
}
This is a heading
With absolute positioning, an element can be placed anywhere on
a page.
The LEFT position of the heading is 100 pixels from the left of
the page.
The TOP position is 150 pixels from the top of the page.
4.
In my younger and more vulnerable years my father gave me some
advice that I've been turning over in my mind ever since.
'Whenever you feel like criticizing anyone,' he told me, just
remember that all the people in this world haven't had the
advantages that you've had.'
5.
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
This is a Heading
Default z-index is 0. Z-index -1 has lower priority.
6.
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1;
}
This is a Heading
Default z-index is 0. Z-index 1 has higher priority.
7.
Move the mouse over the words to see the cursor change
Auto
Crosshair
Default
Pointer
Move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
8.
body
{
background-attachment: fixed;
background-image: url("bulboff.gif");
background-repeat: no-repeat;
}
Scroll the page and see what happens
Scroll the page and see what happens
Scroll the page and see what happens
Scroll the page and see what happens
Scroll the page and see what happens
Scroll the page and see what happens
Scroll the page and see what happens
Scroll the page and see what happens
Scroll the page and see what happens
9.
function bgChange(bg)
{
document.body.style.background=bg;
}
Mouse over the squares and the background color will
change!
10.
function mymessage()
{
alert("This message was triggered from the onload event");
}
11
function mymessage()
{
alert("This message was triggered from the onunload event");
}
An alert box will display a message when you close this
document!
13
function preferedBrowser()
{
prefer=document.forms[0].browsers.value;
alert("You prefer browsing internet with " + prefer);
}
Choose which browser you prefer:
Internet Explorer
Netscape
14
function confirmInput()
{
fname=document.forms[0].fname.value;
alert("Hello " + fname + "! You will now be redirected to
www.w3Schools.com");
}
Enter your name:
15
function message()
{
alert("This alert box was triggered by the onreset event
handler");
}
Enter your name:
16
function message()
{
alert("This alert box was triggered by the onblur event
handler");
}
The onblur event occurs when an element loses focus. Try to
click or write in the input field below, then click elsewhere in
the document so the input field loses focus.
Enter your name:
17
function message()
{
alert("This alert box was triggered by the onfocus event
handler");
}
Enter your name:
18
function writeMessage()
{
document.forms[0].mySecondInput.value=document.forms[0].myInput.value;
}
The onkeydown event occurs when the a keyboard key is on it's
way DOWN.
Enter your name:
19
function writeMessage()
{
document.forms[0].mySecondInput.value=document.forms[0].myInput.value;
}
The onkeyup event occurs when the a keyboard key is on it's way
UP.
Write a message:
20
Click Me!
If you click the header above, it turns red.
21
document.getElementById("image").src="landscape.jpg";
The original image was smiley.gif, but the script changed it to
landscape.jpg
22
txtsize=0;
maxsize=100;
function writemsg()
{
if (txtsize