FIT5900: Lecture 21

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

In the previous lecture:

Perl is a little bit like a bag of magic tricks which you can use to amuse your friends, amaze your Mum and write useful CGI scripts - thanks to its easy maintainability and powerful web-friendly features.

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.

An example of a DHTML page at PHP (which nevertheless includes some poor interface decisions... what are they?)

Platform-Specific Issues

"Should I have a static page which everyone can look at, or a dynamic page which 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 accomodating 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.

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. Navigator and Explorer are the main two) into which the page has been loaded.

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.
The best way to do this is to start creating your pages for Navigator 4 - much stuff will still work in Explorer.
The reverse is not necessarily the case!

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

<P STYLE="font-size: 20pt; color:#FF00FF">Some stylized text</P>

Some stylized text

But more usefully...

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?

Linking external style specifications...

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.)

Why is this useful?

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

<HEAD><TITLE>Positioning Elements</TITLE></HEAD>

<H1 STYLE="position: absolute; top: 50px; left: 30px; z-index: 2;">
THE TEXT I WROTE
</H1>
</BODY>

What does this do?

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.
Scripting languages operate on the objects to change their properties after an HTML page is loaded.
E.g. in Navigator 3+, 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 Navigator and Explorer differ. In the version 4 browsers, Explorer leads the way in that every HTML element is accessible to a script. Future browser versions are expected to further enhance the possibilities of DHTML.
ECMA-script is a "politically neutral" scripting standard which Netscape and Micro$oft happily adhere to in their version 4 browsers (with JavaScript and JScript respectively).

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.

FIT5900 courseware | FIT5900 lecture notes