8/6/2019 Dhtml Final

1/21

DHTML

8/6/2019 Dhtml Final

2/21

What is DHTML?

DHTML is the combination of several built-in browserfeatures in fourth generation browsers that enable aweb page to be more dynamic.

DHTML is NOT a scripting language (like JavaScript),but a browser feature- or enhancement- that makesthe browser dynamic

It uses a host of different technologies - JavaScript,

VBScript, the Document Object Model (DOM), layers,cascading style sheets - to create HTML that canchange even after a page has been loaded into abrowser

8/6/2019 Dhtml Final

3/21

What is DHTML? ...

It is considered to be made up of

HTML

Cascading Style Sheets (CSS)

Scripting language

All three of these components are linked viaDocument Object Model (DOM)

DOM is the interface that allows scriptinglanguages to access the content, style, andstructure of the web documents and change

them dynamically

8/6/2019 Dhtml Final

4/21

CSS Cascading Style

Sheets

8/6/2019 Dhtml Final

5/21

What is CSS?

CSS is Cascading Style Sheets

It is a specification controlled by the World

Wide Web Consortium (W3C). HTML controls the organization of a Web

page document

CSS controls the presentation and layoutof the Web page document elements

8/6/2019 Dhtml Final

6/21

What CSS can do?

With CSS you can separate form from

structure

Control layout (alignment, spacing,margins, colors, floating elements etc)

Maintain and update many pages faster

and easier

8/6/2019 Dhtml Final

7/21

CSS-Terminology

CSS is declared as rules: Eg: H1 {color: green}

Means that all text surrounded by the tags should be displayed in green

color

A rule has two parts

- H1 {color:green}

SELECTOR { DECLARATION }

8/6/2019 Dhtml Final

8/21

CSS-Adding styles to web

pagesThree ways Embed a style sheet within HTML

document Link to an external stylesheet from the

HTML document

Add styles inline in the HTML document

8/6/2019 Dhtml Final

9/21

CSS-Embed a style sheet

All stylesheet information lies at the topof the HTML code (in the head portion)

Eg:

. . .

Style applies to the whole document

8/6/2019 Dhtml Final

10/21

CSS-Add styles inline

Applying stylesheets rules to particularHTML tags

Eg:Adding Inline styles

The style applies to only that particular

tag

8/6/2019 Dhtml Final

11/21

Linking External Style Sheets

External linking

Separate pages can all use same style sheet

Only modify a single file to change styles across your site

LINKelement Specifies a relationship (REL attribute) between current

document and another document

LINKelement can only be placed inheader

8/6/2019 Dhtml Final

12/21

Linking External Style Sheets

ExampleLinking External StyleSheets

8/6/2019 Dhtml Final

13/21

DOM Document Object

Model

8/6/2019 Dhtml Final

14/21

DOM-Document Object Model

The Document Object Model is a platform-and language-neutral interface that willallow programs and scripts to dynamically

access and update the content, structureand style of the document

The DOM details the characteristic

properties of each element of a Web page,thereby detailing how we might manipulatethese components and, in turn, manipulatethe page

8/6/2019 Dhtml Final

15/21

DOM

Document Object Model is not a "part" ofScripting languages. The DOM standsalone, able to be interfaced with any

programming language designed to do so

The W3C DOM is the recommendedstandard to be exposed by each browser

Microsoft Internet Explorer and Netscapedo not share the same DOM.

8/6/2019 Dhtml Final

16/21

DOM

Both (IE and Netscape) DOMs break downWeb pages into roughly four types ofcomponents

Objects,Properties, Events and Methods Objects :

Container which reflects a particular element

of a page

objects "contain" the properties and methodswhich apply to that element

Example: the submit object

8/6/2019 Dhtml Final

17/21

DOM

Properties:

Characteristics of an object

Example: the document object

possesses a bgColor property whichreflects the background color of thepage.

Using a programming language (e.g.JavaScript) you may, via thisproperty, read or modify thebackground color of a page

8/6/2019 Dhtml Final

18/21

DOM Methods:

A method typically executes an action whichacts upon the object by which it is owned

Example: Alert

Events:

Used to trap actions related to its owning

object

Typically, these actions are caused by the

user

Example: when the user clicks on a submit

button

8/6/2019 Dhtml Final

19/21

Netscape DOM

DOM "begins" at the window object;

Other objects are below the window object

in the hierarchy Exception is the navigator object, (whose

properties provide information about the

browser version,) which is a peer object ofwindow rather than a child

8/6/2019 Dhtml Final

20/21

Netscape DOM

8/6/2019 Dhtml Final

21/21

Conclusion

HTML To create web pages

DHTML To change HTML

CSS To control format or appearance ofdocuments

Four ways to apply CSS

Positioning

DOM - details the characteristic properties

of each element of a Web page