PIA Training Centre

Prime Communications

DHTML

Introduction to DHTML
What you should already know
Before you continue you should have a basic understanding of the following:

WWW, HTML and the basics of building Web pages Cascading Style Sheets JavaScript

If you want to study these subjects first, go to our Home Page

DHTML does not exist !

DHTML is an abbreviation for the term "Dynamic HTML". But DHTML is just a buzzword. DHTML does not exist. It is not a "thing" or a standard defined by the World Wide Web Consortium (W3C). It is not defined anywhere. It is just a fancy word. It is important that you know this (so you don't make a fool of yourself when you are talking with the pros).

So what is DHTML?
To most people DHTML means a combination of HTML 4.0, Style Sheets and JavaScript. W3C once said this: "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."

The Elements of DHTML

HTML 4.0
HTML 4.0 introduced two important things: Cascading Style Sheets (CSS), and the Document Object Model (DOM). Creating dynamic HTML documents would not be possible without these two additions.

Cascading Style Sheets (CSS)

Page # 1/9

PIA Training Centre

Prime Communications

With CSS we got a style and layout model for HTML documents. Creating dynamic HTML documents would not be possible without CSS.

Document Object Model

With the DOM we got a document content model for HTML documents. Creating dynamic HTML documents would not be possible without the DOM.

JavaScript (and VBScript)

With HTML 4.0, CSS and the DOM were made available for scripting. Creating dynamic HTML documents would not be possible without the ability to change the style, layout and content of HTML document via scripts.

The Bottom Line

DHTML is the art of making HTML pages dynamic by using scripting to manipulate the style, layout and contents of the document.

DHTML Cascading Style Sheets

HTML 4.0 introduced CSS, which gave us a style and layout model for HTML. With CSS, HTML elements can be styled with colors, backgrounds, borders, position, and visibility.

Position
The position property gives us the opportunity to place the elements anywhere on the document.

position:relative
This property places the element based on (or relative to) its current position. H1 { position:relative; left:10; } This places the header 10 pixels to the right from where it is normally placed.

position:absolute
Page # 2/9

PIA Training Centre

This property places the element out from the window's margins. H1 { position:absolute; left:10; } This places the header 10 pixel to the right from the left-margin.

Prime Communications

Visibility
The visibility property determines if an element is visible or not.

visibility:visible
This property makes the element visible. H1 { visibility:visible; }

visibility:hidden
This property makes the element invisible. H1 { visibility:hidden; }

Z-index
The z-index property determines the placement order of the elements. H1 { z-index:1; } H2 { z-index:2; }

Page # 3/9

PIA Training Centre

Prime Communications

The H1 element is placed before the H2 element, so if these two elements happen to be placed on top of each other, the H2 element is placed on top of the H1 element.

Filters
Internet Explorer 4.0 introduced the filter property to CSS. The filter property allows you to add more style effects to your text and images. H1 { width:100%; filter:glow; } The element you want to add a filter to, must have a specified width. There are many values to the filter property, this example shows the "glow" value, which produces this output:

Header
All the values have arguments that allow you to control the filters.

Filters
Property alpha Value opacity finishopacity style startx starty finishx finishy add direction strength color none none color strength none Syntax filter:alpha(opacity=20, finishopacity=100, style=1, startx=0, starty=0, finishx=140, finishy=270) Explanation Allows you to set the opacity of the element

blur

filter:blur(add=true, directions=90, strength=80); filter:chroma(color=#ff0000) filter:fliph; filter:flipv; filter:glow(color=#ff0000, strength=5); filter:gray;

Makes the element blur

chroma fliph flipv glow gray

Makes the specified color transparent Flips the element horizontally Flips the element vertically Makes the element glow Renders the element in black and white

Page # 4/9

PIA Training Centre

invert mask none color filter:inver; filter:mask(color=#ff0000);

Prime Communications
Renders the element in its reverse color and brightness values Renders the element with the specified background color, and transparent foreground color Renders the element with a shadow

shadow

color direction

filter:shadow(color=#ff0000, direction=90);

dropshadow color offx offy positive wave

filter:dropshadow(color=#ff0000, Renders the element with a dropshadow offx=5, offy=5, positive=true);

add filter:wave(add=true, freq=1, freq lightstrength=3, phase=0, lightstrength strength=5) phase strength none filter:xray;

Renders the element like a wave

xray

Renders the element in black and white with reverse color and brightness values

Background
The background property allows you to select your own background, in any style.

background-attachment:scroll
The background scrolls along with the rest of the page.

background-attachment:fixed
The background does not move when the rest of the page is scrolling.

DHTML Document Object Model

DOM

Page # 5/9

PIA Training Centre

Prime Communications

HTML 4.0 introduced the Document Object Model, which gives us access opportunity to every element in the document. It contains no functions or fancy layout tricks, it is more like a map of all the elements, and we use this map to access the elements.

How to access the elements

A scripting language is needed. JavaScript is the most browser compatible scripting language, so we use JavaScript. To make an element available for the DOM, the element must define the id attribute. <html> <body> <h1 id="header">My header</h1> <script type="text/javascript"> header.style.color="red" </script> </body> </html> The script changes the style of the header element, and produces this output.

My header
The DHTML Object Model
Object window document methods properties methods properties collections properties properties collections Explanation The window object is the top object in the DHTML Object Model, and gives you information about the window and the frames. The document object represents the HTML document, and gives you access to the HTML elements. The navigator object gives you information about the user's browser. The event object gives you information about events that occur.

navigator event

DHTML Event Handlers

Event handlers

Page # 6/9

PIA Training Centre

Prime Communications

With event handlers you can change all the elements whenever you want. When the user clicks an element, when the page loads, when a form is submitted, and more, but you need help from JavaScript, a small line of code in the value of the event handler. <h1 onclick="style.color='red'">Click on this text</h1> This makes a header which turns red when a user clicks on it. Or you can write the script as a function and place it in the head section of the page, then you have to call the function from the event handler: <html> <head> <script type="text/javascript"> function changecolor() { header.style.color="red" } </script> </head> <body> <h1 id="header" onclick="changecolor()"> Click on this text</h1> </body> </html> This method is preferred if you have many lines of code to be executed.

HTML 4.0 Event Handlers

Event onabort onblur onchange onclick ondblclick onfocus onkeydown onkeypress onkeyup onload onmousedown onmousemove What it handles User aborted page loading User left the object User changed the value of an object User clicked on an object User double clicked an object User made an object active When a keyboard key is on its way down When a keyboard key is pressed When a keyboard key is released Page finished loading User pressed a mouse-button Cursor moving on an object

Page # 7/9

PIA Training Centre

onmouseover onmouseout onmouseup onreset onselect onsubmit onunload Cursor moved over an object Cursor moved off an object

Prime Communications

User released a pressed mouse-button User resets a form User selected content of a page User submitted a form User left window

DHTML
With CSS, we can change the style of any HTML element. With the DOM, we have a map of all the elements in an HTML page. With a scripting language, we can access the elements in the DOM. With event handlers, we can access these scripts at any time. Now you have endless possibilities to make dynamic web pages.

Most of the DHTML examples require Internet Explorer 4.0 or higher

CSS Position:relative Position:relative Position:absolute Visibility Z-index Z-index Vice Versa Cursors Filters Filters on Images Filter:mask image Filter:mask text Filter light effect Filter moving light effect Watermark Change background color

Page # 8/9

PIA Training Centre

Window Events onload onunload Form Events onchange onsubmit onreset onselect onblur onfocus Keyboard Events onkeydown onkeyup onkeydown vs onkeyup onkeypress Mouse Events onmouseover & onmouseout onclick ondblclick onmousedown & onmouseup onmousemove Disable right-click

Prime Communications

Page # 9/9