introduction tod html

7/29/2019 Introduction Tod HTML

1/38

Introduction to DHTML

Created 2/16/2003


2/38

Dynamic HTML

As discussed earlier DHTML is the combinationof 3 browser technologies to render a dynamic

browser experience

HTML for contentCascading Style Sheets for general presentation

Javascript to enable dynamic presentation

In reality it is tapping into the richness of the

browsers Document Object Model (DOM) usingHTML, CSS and Javascript that is the key to ahighly dynamic browser experience


3/38

Affect the DOM through

Browser

DOM

HTML

(content)Cascading Style

Sheets (general

presentation)

Javascript (and

other scripting

languages) for

most dynamic

effects


4/38

Dynamic HTML

With Dynamic HTML the emphasis is on makingthe browser provide a richer viewing experiencethrough effects like

AnimationFilters

Transitions

This is done by applying properties and methods

of the Browsers Document Object Model (DOM)This is usually done through Javascript, but it canalso be done by any scripting language supported

by the browser, such as VB-Script


5/38

HTML 4.0 tag

Allows you to create a window inside your

web page to display another HTML file

Syntax:

Height and width must be in pixels


6/38

CSS-P: Dynamic CSS

An extension of CSS-1

Stands for Cascading Style Sheet

PositioningEventually became part of CSS-2

Used to control the positioning of images

and objectsExpressed in Style Sheet Syntax


7/38

CSS-P Position

tag {position: absolute|relative|fixed|static; left:value; top: value}

left: position in relative or absolute units from left edge

top: position in relative or absolute units from top edgeabsolute: position from top left corner of parent object

relative: position in relation to where the browserwould place it by default

fixed: will not scrollstatic: this happens by default. The browser determineswhere to position an object based on natural flow


8/38

CSS-P Examples

Absolute:

position: absolute; left:100; top:100

Relative:

position: relative; left:2cm; top:0cm


9/38

CSS-P Absolute Positioning


10/38

CSS-P Relative Positioning


11/38

CSS-P Layering Objects

If two objects overlap the object referenced last in theHTML code will overlay objects preceding it

Can be overruled by using z-index

Specify z-index as an integer (positive or negative)

The higher z-index values gets the foreground

If two objects have the same z-index, the one appearing last in theHTML has the foreground

Syntax:

tag {zindex: | auto} number: any integer, positive, negative or zero

auto: browser determines (default)


12/38

CSS-P z-index


13/38

Layering Example

z-index:2 The quick brown fox jumped over the lazy dog. The quick brown fox jumped

over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped overthe lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over thelazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazydog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.


14/38

CSS-P visibility

Syntax:

tag {visibility: visible | inherit | hidden}

visible: item must be visible

inherit: depends on the visibility of parent object ex: if a is hidden, all tags in the are hidden

this is the default

hidden: explicitly hide the object.

The object still takes up space, but content is not seen

Example:


15/38

CSS-P display:none

Used in conjunction with visibility:hidden

Informs the browser to hide all space in the

browser window needed for the object.Example:

An

invisible and hidden object


16/38

CSS-P Visibility


17/38

CSS-P Object width and height

Can be in absolute or relative units

Use width or height attributes

Examples:

100 x 300 pixel object

10em x 5em object


18/38

CSS-P overflow

Specifies how to handle text overflow

Syntax:

tag {overflow: visible | hidden | scroll | auto}

visible - increases size to display all the text

hidden - text outside of specified height and width is not

displayed

scroll - adds vertical and horizontal scroll bars, even if

unneeded auto - adds vertical and horizontal scroll bars only if needed


19/38

CSS-P overflow


20/38

CSS-P clip: rect

Used to display only a portion of an object

Syntax:tag {clip:rect (top,right,bottom,left)}

top, right, bottom, left specified in pixels

Must be used with absolute positioning

width and height attributes needed

Space for whole image is taken up

But only part of image is actually shown

Example:


21/38

Browser Detection

Use navigator.appName

Typically returns Netscapeor Microsoft

Internet Explorer

Ex:

document.write("

navigator.appName =

"+navigator.appName+"

");


22/38

Browser Version Detection

Major Version:

parseInt(navigator.appVersion) parseInt looks through a text string and returns the first integer

it can find, if any

Full Version:

partFloat(navigator.appVersion) parseFloat looks through a text string and returns the first

floating number it can find, if any.

IE 5.0+ will return version 4, so this is of limitedusefulness


23/38

DOM Type Detection

If you know the type of DOM your browser supports youcan fine tune Javascript to match the DOM

if (document.layers)

Since only Netscape 4.x supports layers, so the DOM is Netscape4.x; however this code will normally cause a Javascript errortoday! Since Netscape 4.x is less than 3% of the browser market, itis best not to use this code.

if (document.all)

Since IE supports the allcollection, it should be IE 4.x or greater

compatible DOMSome browsers can fake out the browser type, e.g. Opera

if (!(document.all))

Probably Mozilla/Netscape 6+ or a W3C compliant DOM


24/38

Cross-Browser Code

Place this code in before functions or in .js filevar isW3C = false;

var isIE = false;

if (!(document.all)) isW3C=true; /* standard compliant DOM, probably */

if (document.all) isIE=true;

Above code is not foolproof. There are lots of browsers out there but ifyou can live not supporting a small number of Netscape 4.x and otherodd browsers this may be good enough

Reference inNS and isIE as needed:Ex:

if (isW3C)

Or use location.hrefto immediately load a page optimized for aparticular DOM

Ex: if (isW3C)

location.href=myPageW3C.htm;


25/38

Cross Browser Strategies


26/38

DOM Problems

Each browser may extend or modifyrecommended ways of implementing a browserDOM

Internet Explorer is rife with features like filters andtransitions that are unique but limit accessibility of the

page to other browsers

Other browsers, have similar problems

The W3C has come up with a standard DOM that allbrowsers should implement

See http://www.w3.org/DOM/

Browsers are beginning to adhere to the W3Crecommendations
http://www.w3.org/DOM/http://www.w3.org/DOM/


27/38

W3C DOM Standard

IE 6+, Opera 7, and Mozilla/Netscape 7+ allowtwo modes of addressing their DOMs:

QuirkorCompatible Mode: this usually happens by

default and includes all the browsers proprietary andnonstandard features

StandardorCompliant Mode: implements the W3Cstandard

How to tell what DOM standards your browsercan support?

W3C provides this handy link
http://www.w3.org/2003/02/06-dom-support.htmlhttp://www.w3.org/2003/02/06-dom-support.html


28/38

W3C DOM Essential Ideas

Every document is a hierarchy that can be traversed

Methods in the DOM allow nodes to be located, added,deleted and changed at will through an interface languagesuch as Javascript

A node represents a DOM object and usually has anHTML representation, ex:

or

Link to a good tutorial (will show this page in class, if you did notattend class please study this page carefully)

Two fundamental entities in a DOM:Element: often corresponds to an HTML tag, also a node

Attribute: similar to an HTML attribute, but is really any propertyor method supported by the DOM
http://www.xs4all.nl/~ppk/js/dom1.htmlhttp://www.xs4all.nl/~ppk/js/dom1.html


29/38

Enabling Standard Mode

The DOM Standard mode can be switched on with theproper XHTML statement at the top of the source file

IE: (any of these will work, choose the type of XHTMLdocument you want to produce):

Mozilla/Netscape: Usually turned on by default if you usevalidated XHMTL. Otherwise you may be placed intoQuirk mode.
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asphttp://mozilla.org/docs/web-developer/quirks/doctypes.htmlhttp://mozilla.org/docs/web-developer/quirks/doctypes.htmlhttp://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp


30/38

What to do now

W3C DOM standards will be widely adapted by allbrowser manufacturers over time

The problem right now is supporting older browsers, i.e. IE 5 orless, Netscape 4.

Recommendation: write to W3C standard DOM ifpossible. In time browsers will catch up

If you must support older browsers you have options:

Consider using Flash & Shockwave technologies for dynamicpresentation

See if it is possible to standardize on a particular browser, such asIE 5

Write complex cross platform code as a last resort


31/38

W3C DOM-1

Document Object Model Level 1

It gives the scripting language easy access to thestructure, content, and presentation of a document

which is written in such languages as HTML andCSS.

Compatible with future improvements intechnology

Allows any scripting language to interact withwhatever languages are being used in thedocument

Typically Javascript is the interface
http://www.webstandards.org/learn/faq/http://www.webstandards.org/learn/faq/http://www.webstandards.org/learn/faq/http://www.webstandards.org/learn/faq/


32/38

W3C DOM-1

Provides a standard set of objects for representing HTMLandXML documents

Typically HTML objects are used, but XML documents will bemore frequently used in the future

Two parts:Core

Provides a low-level set of fundamental interfaces that can representany structured document

Defines extended interfaces for representing an XML document

HTML Interfaces with Core Level 1 section to provide a more convenient

view of an HTML document

For more information see http://www.w3.org/TR/REC-DOM-Level-1/
http://www.w3.org/TR/REC-DOM-Level-1/http://www.w3.org/TR/REC-DOM-Level-1/http://www.w3.org/TR/REC-DOM-Level-1/http://www.w3.org/TR/REC-DOM-Level-1/http://www.w3.org/TR/REC-DOM-Level-1/http://www.w3.org/TR/REC-DOM-Level-1/http://www.w3.org/TR/REC-DOM-Level-1/http://www.w3.org/TR/REC-DOM-Level-1/http://www.w3.org/TR/REC-DOM-Level-1/


33/38

W3C DOM-2

Consists of Core, Events, Style, Traversal andRange, and Views specifications. All build on topof DOM-1 Core

Core:Consists of interfaces to create and manipulate thestructure and contents of a document

Contains specialized interfaces dedicated to XML

Events: gives to programs and scripts a genericevent system

Style: allows programs and scripts to dynamicallyaccess and update the content and of style sheets

documents


34/38

W3C DOM-2

Traversal and Range: Allow programs and scripts

to dynamically traverse and identify a range of

content in a document.

Views: allows programs and scripts to

dynamically access and update the content of a

representation of a document


35/38

W3C: Accessing DOM-1Nodes

document.getElementsByTagName

This can be cumbersome

Ex: var x =

document.getElementsByTagName('B')[0]; // getfirst tag on the page

document.getElementsByTagId

If you know the unique ID attribute to the tag, jump to

it directly. Ex:

This is a paragraph

var x = document.getElementById('hereweare');


36/38

W3C: Changing a Node

Elements cannot be changed, they can

only be added or deleted

But you can change attributes of anelement

Use the common setAttribute method

for any DOM object. Example:

node =

document.getElementById('hereweare);

node.setAttribute('align',val);


37/38

W3C: Creating a Node

Find the place in the DOM hierarchy where you want the

content to go.

Use techniques on the previous page

You can either create an element or add an attribute to anelement

Creating an element example:

var x = document.createElement('HR');

document.getElementById('inserthrhere').appendChild(x);

Adding an attribute to an element example:

node.setAttribute('align',val);


38/38

W3C: Removing a Node

Find the parent object of that which you

want to remove:

x = document.getElementById(deleteID')y=x.parentNode;

Then execute a removeChild method on the

parent node:

y.removeChild(x);

introduction tod html

Documents