CSE2325/3325: Lecture 21

FIT3084: Dynamic HTML, Cascading Style Sheets, Document Object Model

In the previous lecture:

Attributes of a sound: pitch, duration, timbre, attack/decay and loudness
Sound may be recorded and sampled for storage and playback from computers

In this lecture:

What are DHTML, CSS and the DOM?
What are they used for?
Why are they so frustrating for programmers and web designers?

References:

Goodman, D., Dynamic HTML, the Definitive Reference, O'Reilly, 1998, Chpt's 1-3
Holzschlag, M., Web by Design, the Complete Guide, Sybex, 1998, Chpt's 9, 20
Flanagan, D., JavaScript, the Definitive Guide, O'Reilly, 2nd edn, 1997, Chpt's 1, 14

Dynamic HTML (DHTML)

There is no Dynamic HTML "standard".
DHTML is a collection of technologies which operate on HTML to make web-pages dynamic.
- It consists of a scripting language, objects on which the scripts act and a means for specifying the look of HTML content. These are provided by JavaScript, the DOM and CSS respectively. Details are provided below...
DHTML technolgies differ between operating systems, browsers and browser versions.

This makes it a logistical nightmare to ensure everyone looking at a web page can experience the dynamic content.

Have a look at the PHP (PHP: Hypertext Preprocessor) web page for alternatives to JavaScript.

Platform-Specific Issues

"Should I have a static page that everyone can look at, or a dynamic page that only people using a certain platform can experience?"

A platform is any hard/soft-ware system forming the basis for product development.

Developer product	Platform
Operating system	micro-processor
Applications software	operating system
Peripheral	hardware & operating system
Website	browser brand, browser version, browser operating system... yikes!

Strategies for accommodating the mis-matched capabilities of multiple platforms include...

Page branching

Supply different versions of pages for users with browsers of differing capabilities.
Users may manually select which pages to view.
Client-side scripting can be used to direct users to the appropriate pages automatically.
There is an example at Monkey Media (http://www.monkey.com/).

Internal Branching

Instead of supplying seperate documents, supply documents with internal branches to generate appropriate content "on the fly".

e.g. JavaScript code containing the branches...

if (browser==navigator)
then blah;

else if (browser==explorer)
then blech;

else blooh;

This strategy will only work for users with DHTML-enabled browsers, but it can be used to create pages suitable for the different browser brands.
At the start of each document establish a variable which determines the kind of browser (e.g. Firefox, Navigator or Explorer) into which the page has been loaded.
Something to think about: How would you check if a browser has JavaScript installed? (HINT: use JavaScript!)

You could use this to redirect a browser to a JavaScript page where appropriate, whilst ensuring that a non-JavaScript compliant browser displays conventional HTML pages.

The Lowest Common Denominator

This method is really tough!
Even though the documentation might say "This feature of X is supported", chances are that it is supported "in a different way" from browser to browser.
One way to do this is to start creating your pages for an old browser or one without many features and hope that the newer browsers will support at least the features on the one you choose.

Cascading Style Sheets (CSS)

Style sheets are a means of specifying the style in which a page element is rendered.
Style sheets maintain separation between the page element rendering style and its content.
Cascading Style Sheets (CSS) Levels 1 and 2 and CSS-P (Cascading Style Sheets-Positioning) are style sheet specifications.

(The rules laid down by the spec's cascade to allow the resolution of conflicts between rules which apply to the same HTML element.)
Style sheets may be altered by scripts to change style rules after a page has loaded.
Style sheets may be used to specify fonts, colours, text alignment, margins and other aspects of presentation outside the usual features of HTML.
Style sheets may be used to create layers of HTML elements and to position them at specific locations on the page (no need for complex tables to do your page layout!)

Style Sheet Examples

This first example employs style sheets inline:

<p style="font-size: 20pt; color:#FF00FF">Some stylish text</p>

Some stylish text

This second example employs style sheets across a single document:

em { background-color: #ffff00; color: #0000ff }

h1 { font-family: Arial, Helvetica, sans serif; font-size: 24pt}

p { font-family: Times, serif; font-size: 18pt }

.codeTextStyle { font-family: Courier, serif; font-size: 12pt }

</style>
</head>

<body>
<h1>Exciting News!</h1>
<p>Here is something to <em>read</em> on a rainy day.</p>
<BR><BR>

for (i=0; i<10; i++)<br />
{ printf("I must not throw stones at passing cars\n"); }<br />

</span>
</body>

What does this do?

This third example shows style sheets (that are probably being employed in several documents) being employed to an entire document:

In the file (styles.css for example) you put everything that would normally fall between the <style> tags. (Don't put the <style> tags themselves in the style file though.)

NOTE: Linked styles (from files) are over-ridden by document specific style sheets (from a document header) which are over-ridden by inline styles (from an XHTML tag). This "cascade" of specifications gives Cascading Style Sheets its name.

Positioning elements in layers at specific locations on the screen...

<head><title>Positioning Elements</title></head>

<h1 style="position: absolute; top: 50px; left: 120px; z-index: 2;">
THE TEXT I WROTE
</h1>
</body>

What does this do?

Note that the <img> tag needs to appear in a 'container' tag such as <span> or <div> and that it is the container tag itself which has the positioning specification in it. (This is just the way CSS is currently implemented)

Here's an example in which two images are overlaid. (It actually works... if you set the transparency of the foreground GIF image properly you can use it as an overlay.)

The Document Object Model (DOM)

When an HTML page is loaded, the browser creates a "document object model" (i.e. a model of the objects in the document) which may be accessed by a script....

...*NB* the DOM is not the script, but the organization of objects upon which the script operates...
Document "objects" include frames, forms, buttons, images, text-entry boxes or any element which a script may access.

(Remember the objects discussed in the lecture on JavaScript?)
Scripting languages operate on the objects to change their properties after an (X)HTML page is loaded.
E.g. in most current browsers, image objects are scriptable... they can be accessed by a script after a page has loaded.
Use this feature to swap image content when the mouse moves over the image... an image-swapping mouse rollover...
Frustrating note: the document object models of the various browsers may differ.
ECMA-script is a "politically neutral" scripting standard which the web browsers adhere to in current versions (e.g. with JavaScript and/or JScript).

This lecture's key point(s):

As you've seen (because you've used JavaScript and the DOM already), DHTML is a powerful tool for increasing the interactivity of a web page.
Be careful about cross-platform issues when using DHTML.
CSS may be very useful for creating 'designed' pages and consistently styled web sites.

Courseware | Lecture notes