Lab 11 Dynamic HTML

Pre Lab:

Goals for the Lab:

What is HTML 4.0?

HTML 4.0 is the fourth revision of the HTML standard and is by far the greatest departure from the original goals and a major shift in goals from HTML 3.0. The original HTML goal viewed the world as being filled with users who had a vast range of different computer environments and browser capabilities. Hence, it tried to transmit the author's desires and wishes on the document should be displayed. HTML compliant browsers were allowed great leeway on how best to render these instructions. The information was the important issue and not the absolute appearance of the document. Revisions Html 2.0 and HTML 3.0 added features such as tables, forms, and multi- media. The desire to make the document less static and more interactive lead to the acceptance of JavaScript and Java. Programming could now be done on the client side leading to interactive client side image maps, interactive help, and form validity checks.

HTML 4.0 became a part of the great browser wars between to Netscape and Micro Soft. The businesses on the net demanded more and more attractive pages to compete for advertising dollars and customers. HTML editors allowed the average computer owner to create their own web pages. Profession web page designers needed more control of the final look and feel that transcended the original goals of HTML to set information form over appearance. Finally the need for the WWW to become a truly international network required the recognition that English is not the only language that needed to be supported by the web. This also forced the recognition of the need for access to the impaired. This lead to the fourth revision of the HTML standard that attempts to address all of the above issues.

The Document Object Model

Document Object Model (DOM) is fundamental to understanding the HTML 4.0 standard. Unfortunately while both Netscape and MicroSoft both claim to subscribe to this standard their approach to the object model is significantly different. These differences leave both the student and the professional with major problems when designing web materials. Not only must the designer consider the needs of those viewers using older less capable browsers; but, the newer family of HTML 4.0 browsers are sufficiently different in their approach to the standard as to require specific alternatives must be included in any web site that hopes to attract a diverse viewer audience.

The student is encouraged to begin by taking a short tutorial that not only addresses the DOM issues but is written for Net 4.0 and IE 4.0 browsers and offers insight into the Dynamic Document and its potential for Computer Based Instruction (CBI) and other emerging applications. (The DOM Tutorial)
A more formal but still readable DOM tutorial site, What is DOM?

What is New in Dynamic HTML?

Microsoft:

Netscape:
For a detailed description of Netscape's version of DHTML (see their manual).

The Layer Tag:

The <layer> tag was created by Netscape to approximate what document publishers have used for years to produce attractive results -- overlays. The idea is to define a series of overlays that may or may not be transparent that can be stacked one on top of another. Up until this point HTML streamed in the data and the text and objects could not be positioned outside this flow.
The <layer> tag can be positioned. The position can be defined in relative or absolute coordinates, The relative coordinates are based on its location of the current flow process is continued. The absolute coordinates are based on the position of the parent container that the <layer> belongs to. The coordinates system is based on origin at the top left corner. The left axis is positive in the direction from going top to bottom. The top axis is positive going from left to right.
        (0,0) ---- + > top
        -
        -
        -
        + left
        v

Fonts:

Typography is the study of type fonts and the correct choice of fonts can give your web site a specific look and feel of a professional or if done wrong can make appear very cluttered and unorganized.
The following Font Tutorials should be read and printed out for reference:

Fonts 101 for Beginners

Typography Tutorial

Tips on Using Fonts

Downloadable Fonts:

What are dynamic fonts?

Microsoft approach:

Netscape's Approach:
The following link is Netscape's Downloadable Fonts -- a developer's Guide.

So Where do I get them?

The Object Tag

Java

Active X:

Active X Plugin for Netscape Browsers on Windows 95/NT:

While not a perfect solution Ncompass offers a shareware Active X plugin for the Netscape brower. It only runs on Windows 95/NT and as shareware cost the browser user.

Download now!

The Style Sheet:

Style sheets will introduce three new tags:

<Style>
<Link>
<Span>

Before going further go the following Tutorials:

The Style sheet is based on HTML 4.0 Cascading Style Sheet Level 1 (CSS1) language which is being supported by both Netscape and Microsoft in significant manners. Unfortunately the differences are not uniform and hence will provide problems for adoption of styles until agreement can be reached. The benefits of styles are very compelling:

Styles allow for smaller files hence faster transmission
Styles degrade well -- if the browser does understand it does what it always does,
Styles are efficient allowing the whole web sites to have changes in style by simply changing the master style sheet that all the pages of the site are linked to. The linking to the master style sheet guarantees the look and feel of the web site is consistent and professional looking.
Style sheets allow the for much greater control over positioning of the objects on the page.

The styles are either:

inline within the HTML tag, i.e. used within an individual tag
embedded within the HTML page, i.e. within the Head section.
imported.
linked to a external style sheet, i.e. in the Head a link tag is used.

Defining Styles:

<Style title=name-of-style type=text/css>
    .
    .
    Rules
    .
    .
</Style>

Rules have the form -- a html selector, a tag, followed by a declaration, a set curly brackets {} and inside the declaration one or more pairs of properties and values separated by a ":", each pair is separated from the other pairs by a ";". For example:
    <Style title=test type=text/css>
    
        </Style>

Commenting our Styles to be more readable and meaningful:

In the above example of a style the /* text comments ... */ is used to create a comment block that is used to explain or clarify the rule(s). It is always good practice to comment any style.

Hiding the <Style > Tag from the Older Browsers:

To hide the style container from browsers that do not support <Style> tags the contents of the container is enclosed in a <! -- style rules--> tag. The older browser will ignore the <Style> tag and treat the contents, the rules, as a comment. This is the same procedure as is used in hiding the <script> tag.

Grouping Multiple Tags for a Single Style:

Suppose you desire for two or more tags (selectors) to use the same rule.
For instance, suppose you desire all the <P> and <UL> and <OL> tags to be the color green.
This can be done with one rule:

P, OL, UL {color:green}

Note the Commas MUST Be used between the selectors. Otherwise the rule is a context sensitive style which will be quite different than the above.

Context Specific Styles:

Suppose that it is desired to make the List Items of an Ordered List -- red, the List Items of a Unordered List -- blue, the List Items of a Menu List to be -- green, and the List Items of a Directory List to be -- orange. In other words a context sensitive List Item.
the following rules accomplish this:

OL LI {color:"red"}
UL LI {color:"blue"}
Menu LI {color:"green"}
Dir LI {color:"orange"}

Note that the context selector is the tags separated by " ". The blank is used for context sensitive and the "," is used for a multiple list.

Classes:

Definition and Examples
Individual

Embedded Styles

The embedded style is accomplished by creating a style container where:

<Style title=name-of-style type=text/css>
    .
    .
    Rules
    .
    .
</Style>

Rules have the form -- a html selector, a tag, followed by a declaration, a set curly brackets {} and one or more pairs of properties and values separated by a ":", each pair is separated from the other pairs by a ";". For example:
    <Style title=test type=text/css>
             h1 {color:red font-size:18 font-family:Arial}
             h2 {color:blue font-size:18 font-family:Arial}
             h3 {color:yellow font-size:18 font-family:Arial}
             h4 {color:green font-size:18 font-family:Arial}
        </Style>

Inline styles

Inline styles are used within the tag and have the form:
<tag Style='rule(s)'>
that is the word Style= followed by rules inclosed in a single quotes.
For Example:
<H3 Style='color:Red ; background-color: black'>Red text on a Black background</H3>
will result as the text inside the container says a red text on a black background.

Linked Style Sheets:

Linking to a style sheet offers the web designer a huge advantage, particularly in large corporate web sites involving more than a handful of pages. Once the style sheet has been created and approved by corporate management the linked style sheets produces a uniform and unified appearance. Further, the change of this look is carried out by simply modifying one file and all the pages conform to the new style code.

How is this effect achieved?

Step 1 Create a new file:

Edit the file using the usual WordPad text editor or use one of the shareware style sheet editors.

Step 2 SaveAs a text document:

Master.css

Step 3 Set up the Head of all Documents that are to be linked to this style sheets:

The-URL-for-file-Master.css

This link indicates that the file Master.css is of type -- text/css the MIME type of a style sheet.

Imported Style Sheets:

Using a Style Sheet Editors:

The style sheet can be designed and built with tools. These tools can greatly simplifies the task of creating style sheets and reduce the debugging and development task.
Some Shareware Style Sheet Editor tools:

Sheet Stylist for construction of CSS1

Down Load Now

Cascade a CSS1 editor for the Macintosh

Down Load Now

StyleMaker with preview capability

Down Load Now

The HTML editors either are now or will in the future support style sheets directly unfortunately Netscape's Composer does not support them.

See Sample Page

Cascading Style Sheets

JavaScript 1.2 and Creating the Scripts that Give DHTML the Sizzle

What's new in JavaScript 1.2?

Key events

Compatibility Issues:

Strategies For Handling the Netscape and IE Differences in DHTML

Handing the Requirements for Internationalization

Creating Web documents that provide Access

Self Test of Lab Concepts:

Example:

Lab Instructions 11: Dynamic HTML

Exercise 1: Creating Style

Exercise 2: Cascading Style Sheets

Exercise 3: Finding, Designing, and Using Fonts

Exercise 4: Finding and Using Objects (Java and Active X Controls)

Exercise 5: Using Layers and JavaScript 1.2 to create TV like displays

Exercise 6: Investigating JavaScript potential to create DHTML

Assignment: Putting it all together -- Designing and Creating your own DHTML documents

References:

Glossary of New Terms:

Demos:

Dynamic Demos of what DHTML is all about includes Web Games

FAQ's:

Other References:

Standards related to HTML 4.0

W3C -- Level 1 Document Object Model Specification

More on HTML 4.0 references:

Dynamic Drive's Script Library for Amazing DHTML Effects
Brown, Mark R. Using Netscape Communicator4, QueCorporation, Indianoplis, IN (1997)

Evans, Tim Teach Yourself HTML 4 in 10 Minutes, Sams Publishing, Indianapolis, IN (1998)

Internet Explorer Manuals Library

Net Site Builder's Workshop

Netscape's Manuals Library

Dynamic HTML in Netscape's Communicator
Netscape's Style Sheet Reference Summary