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:


Dynamic HTML (DHTML)

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?"

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

Page branching

Internal Branching

The Lowest Common Denominator

Cascading Style Sheets (CSS)

Style Sheet Examples

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

Some stylized text

But more usefully...

<STYLE TYPE="text/css">

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 }


<H1>Exciting News!</H1>
<P>Here is something to <EM>read</EM> on a rainy day.</P>

<SPAN CLASS="codeTextStyle">

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


What does this do?

Linking external style specifications...

<LINK REL="stylesheet" TYPE="text/css" HREF="styles.css">

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>

<IMG SRC="images/lect1/drymud.JPG" STYLE="position: absolute; top: 30px; left: 30px; z-index: 1" width="300" height="200">

<H1 STYLE="position: absolute; top: 50px; left: 30px; z-index: 2;">

What does this do?

The Document Object Model (DOM)

This lecture's key point(s):

FIT5900 courseware | FIT5900 lecture notes

©Copyright Alan Dorin & Jon McCormack 1999,2000