Scribd
Upload
221 views

DHTML

Dynamic HTML (DHTML) allows web pages to change dynamically without server interaction by combining HTML, CSS, JavaScript, and the Document Object Model (DOM). DHTML provides interactivity and control over page elements. CSS brings powerful layout and design capabilities to DHTML by separating structure from presentation. The DOM is a platform-neutral interface that programs use to dynamically access and manipulate document content and structure. Cross-browser compatibility remains a challenge as browsers support some DHTML features differently.

Uploaded by

cute_guddy
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
221 views

DHTML

Dynamic HTML (DHTML) allows web pages to change dynamically without server interaction by combining HTML, CSS, JavaScript, and the Document Object Model (DOM). DHTML provides interactivity and control over page elements. CSS brings powerful layout and design capabilities to DHTML by separating structure from presentation. The DOM is a platform-neutral interface that programs use to dynamically access and manipulate document content and structure. Cross-browser compatibility remains a challenge as browsers support some DHTML features differently.

Uploaded by

cute_guddy
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 26

Dynamic HTML (DHTML)

Overview Cascading Style Sheets Document Object Model Event Model Filters and Transitions Data Binding Cross-Browser Compatibility Links

What is DHTML

Generally, DHTML refers to applications that allow a Web page to change dynamically without requiring information to be passed to/from a web server.

More specifically, DHTML refers to the interaction of HTML, CSS and Scripting language (JavaScript). Crucial component of DHTML is DOM (Document Object Model)
DHTML = HTML + CSS + JavaScript + DOM

Why comes DHTML


To make Web pages interactive. HTML pages have static nature. DHTML provides us with enhanced creative control so we can manipulate any page element at any time. It is the easiest way to make Web pages interactive. It doesnt increase server workload and require special software to support.

Cascading Style Sheets (CSS)

The purpose of CSS is to define styles for a document's content.

To specify font sizes and faces, margin heights and widths, borders and padding, even text decoration.
To create absolutely and relatively positioned content.

CSS

CSS brings powerful layout and design capabilities to DHTML. CSS provides an efficient way to define universal style.
Separation the structure of document from content allows greater manageability and makes changing the style easier.

CSS evolution

CSS1 (W3C Recommendation in Dec. 1996) It describes the CSS language as well as a simple visual formatting model.

CSS2 (May. 1998) It builds on CSS1 and adds support for media-specific style sheets (e.g. printers and aural devices), downloadable fonts, element positioning and tables.
CSS3 (under development) Concentrate on modularization.

Adding Style to A Document

Use an outside style sheet, either by importing it or by linking it.

Embed a document-wide style in the <head> element of the document. Provide an inline style exactly where the style needs to be applied.

Examples

Definition Rule
H1 { font-size: 24pt; color: green } .dark { font-weight: bold }

Create Style and Grouping Styles (css1.html) Linking external style sheets (imported.html)

Other Methods to Define Styles

Using Document Object Model to Define Styles


Example: document.tags.H1.color = "red";

Using JavaScript to Define Styles (NS 4.0+)


<STYLE TYPE = "text/javascript"> tags.P.fontSize = "18pt"; with (tags.P) { fontSize = "18pt"; tags.P.color ="green"; color ="green"; tags.P.marginLeft = "20pt"; marginLeft = "20pt"; } tags.H1.color = "blue"; </STYLE>

Document Object Mode (DOM)

DOM is a platform- and language-neutral interface that allow programs and scripts to dynamically access and manipulate the content, structure and style of documents. DOM chooses OMG IDL to provide languageindependent specification of the DOM interfaces and provides language bindings for Java and ECMAScript.

DOM evolution

Level 0 (Netscape Navigator 3.0 and MS IE 3.0) Level 1 (Oct. 1998)


Contains functionality for document navigation and manipulation of the content and structure of HTML and XML documents.

Level 2 (Nov. 2000)


It is made of a set of core interfaces to create and manipulate the structure and contents of a document and a set of optional modules. These modules contain specialized interfaces dedicated to XML, HTML, an abstract view, generic style sheets, CSS, Events, traversing the document structure, and a Range object. It builds on the Level 1.

Level 3 (Draft, under development)


Expands Level 2 to define some DOMUtility interfaces.

Objects and Collections


supported by IE 5.0

Some Objects
window document body history location navigator event screen

Some Collections
all anchors applets forms frames images links

Examples

Combination of Dynamic Positioning , Content and Styles (dynamicposition.html)

Using the frames Collection (index.html, top.html)

Event Model

DHTML provides full support for keyboard and mouse events on all page elements. Some popular events
ONLOAD ONCLICK ONMOUSEMOVE ONMOUSEOVER ONMOUSEOUT ONFOCUS and ONBLUR ONERROR (for error handling)

Example (onmouseoverout.html)

Filters and Transitions

Use and combine filters to achieve special effects. Create animated visual transitions between Web pages. Modify filters dynamically using DHTML.

Examples

Flip filters: flipv and fliph (flip.html)


Transparency with chroma Filter (chroma.html) Add shadows to text (shadow.html)

Filter blendTrans (blendtrans2.html)


Filter revealTrans (revealtrans.html)

Data Binding

TDC Tabular Data Control Bind a TABLE and other HTML elements to Data Source Objects (DSOs). Sort and filter data directly on the client without involving the server. Filter data to select only records appropriate for a particular application. Navigate backwards and forwards through a database with the Move methods. Example (advancesort.html)

Cross-browser Compatibility
(Cross-platform)

Most popular browsers are Microsofts Internet Explorer (IE) and Netscapes Navigator (NS). Many features of them are common. Both support HTML, CSS, DOM and JavaScript. Most of their features are incompatible.

Cross-browser Compatibility

Features specific to IE 4.0+ VBScript, JScript ActiveX Control Data Binding Filter and Transition OpenType font

Features specific to NS 4.0+

JavaScript Style Sheets BitStream font <LAYLER> tag

Even when NS and IE expose similar objects for scripting, the syntax is not always the same.

Format of references to elements properties and methods differs between IE 4.0 and NS 4.0. Example: Position an object (obj) at a specific pixel coordinate(x,y). IE 4.0 NS 4.0 obj.pixelLeft(x); obj.moveTo(x, y) obj.pixelTop(y);

Cross-browser Strategies

Include the contents of the style sheet inside a comment (<!-- ... -->) so that browsers that do not recognize the <STYLE> element will ignore it. Create and redirect browser to specific pages using browser detection. Design for common denominator. Custom APIs. Create some JavaScript library for different browsers loading. Building DHTML standard is on the way!

Browser Detection
<!-- Using the navigator object -->

<SCRIPT LANGUAGE = "JavaScript"> function start() { if ( navigator.appName == "Microsoft Internet Explorer" ) { if ( navigator.appVersion.substring( 1, 0 ) >= "4" ) document.location = "newIEversion.html"; else document.location = "oldIEversion.html"; } else document.location = "NSversion.html"; } </SCRIPT>

Links

Microsoft DHTML Document


http://msdn.microsoft.com/workshop/author/default.asp

Netscape DHTML Document


http://developer.netscape.com/docs/manuals/communicator/dynhtml/index.htm

DOM & CSS


www.w3.org/DOM/ www.w3.org/Style/CSS

Library (Great Site! Demo and Code available)


www.dynamicdrive.com

Examples shown in the presentation


www.albany.edu/~sl9006

Thanks!

You might also like