You are here
AN INTRODUCTION TO CASCADING STYLE SHEETS AND DYNAMIC HTML
Note: This article was scanned using OCR from the Spring 1998 CCCE Newsletter. Please contact us if you identify any OCR errors.
Cascading style sheets (CSS) and dynamic hypertext markup language (DHTML) provide new methods to control page layout and provide interactivity on Web pages. The benefits of CSS and DHTML include the ability to control the formatting and layout of the page content, and the ability to add animation, interactivity, and multimedia effects. These techniques, and some of the newer development tools, can simplify the development of interactive tutorials and exercises for chemical education. DHTML pages do not require the loading of Java applets or Active X controls, the presence of browser plug-ins, or repetitive transfers from a Web server. Unfortunately, the current browsers that support DHTML, Netscape Navigator (ver. 4.0 and higher) and Microsoft Internet Explorer (ver. 3.0 and higher), implement many DHTML features differently. In the future, CSS and DHTML will be an integral part of HTML standards as part of the Document Object Model being developed by the World Wide Web Consortium (W3C) [Document Object Model (DOM): http://www.w3.org/DOMI].
Like other client-side programming methods such as JavaScript, DHTML is best suited for developing and delivering presentations, tutorials, or practice exercises [B. M. Tissue, "Overview of interactive programming methods for the World-Wide Web," Trends Anal. Cham. 16 (1997), 490-495; http://www.elsevier.ni:BO/inca/homepage/saa/trac/progmeth.htm.] Applications that require an interface to a database for quiz generation, student tracking, or grading are still best programmed using server-based methods with the common-gateway interface (CGI) or server-side scripting. DHTML can animate graphics to replace animated GIF images, which lack user interactivity. Many multimedia development tools are more sophisticated and stable than DHTML to create presentations, but do require that users have the appropriate plug-in.
Our original intent in this article was to provide a simple tutorial of DHTML. Unfortunately, even defining DHTML is difficult since different authors and organizations use the term quite differently. DHTML might refer to any of a variety of Web-based programming methods or to a very specific set of HTML extensions or procedures supported by either Netscape Navigator or Internet Explorer. The best definition we have found for DHTML is from the W3C DOM Working Group [op. cit.: http://www. w3.org/DOMI]:
"Dynamic HTML" is a term used by some vendors to describe the combination of HTML. style sheets and scripts that allows documents to be animated.
To avoid adding to the confusion about DHTML, this article will concentrate on describing the underlying notion of cascading style sheets, and then qualitatively discuss some of the options for using and developing DHTML.
CASCADING STYLE SHEETS
Style sheets provide the means to control all attributes of a Web page [Web Style Sheets: http://www.w3.org/Style!]. They provide layout control to augment the document structure that HTML tags specify. Style sheets replace manyHTML extensions such as <FONT>, <8>,
and <I>, and layout work-arounds such as complicated tables or image spacers. For example, style sheets can specify the font type, color, line spacing, margins, and positioning of document components such as headings, <H1 >,or paragraphs, <P>. Arbitrary styles can also be applied to any part of a document (see <SPAN> below). The following HTML code is an example of a cascading style sheet, which is placed in the header section of an HTML file or in a separate file.
<STYLE TYPE="text/css">
BODY{
}
background: white;
color: black;
margin-left: 5%;
margin-right: 5%;
H1 (
}
margin-left: -5%;
text-align: left;
color: blue;
H2 {
}
text-align: center;
color: red;
#userdefined1 {
font: italic bold 16pt Arial;
color: green;
}
<!STYLE>
In this example, the body text will be black on a white background. Any H1 headers will be flush to the left edge of the page, and everything else on the page will appear indented by 5% of the page width on both the left and right margins. The userdefined1 style can be applied to anytextontheWeb page by placing the <SPAN ID=userdefined1 >and <!SPAN> tags around the text to be highlighted. The ID attribute can also be used in <P> or <DIV> tags to format whole paragraphs or sections of a document. This simple example uses percentages for positioning. Style sheets allow absolute or relative positioning in percentage, pixels, points, and other units, for complete control of a Web page.
HTML files can be linked to external style sheets by placing a line of code such as the following in the header section:
<LINK REL=StyleSheet HREF="mystyle.css"
TYPE="texticss">
The mystyle.css is a text file that contains the <STYLE> ... <iSTYLE> content, such as shown above, but not <HTML>, <HEAD>, or any other HTML tags. An external style sheet can control the formatting of mul tiple documents, allowing an author to create and maintain a consistent interface throughout a set of Web pages by editing only one file. More tools and information about cascading style sheets are available on thefollowing Web sites: CSS draft specifications: http://www.w3.org/Style/css/HTML Help by The Web Design Group: http://www.htmlhelp.com/
DYNAMIC HTML
The cascading style sheets provide the tools to control style and layout on a Web page. Combining style sheets and scripting languages allows delivery of dynamic and interactive elements on a Web page. A useful feature for interactive tutorials is the ability for a text block or image to change based on the position of the pointer or on a mouse click in a certain area. Other examples include drop down menu boxes, text boxes, and animated text or image overlays.
Unfortunately, these dynamic features are where Netscape Navigator and Microsoft Explorer diverge in their implementation of DHTML. DHTML pages on the Web currently, are either browser-specific, or they incorporate browser testing and two sets of DHTML code. The more sophisticated DHTML development tools have the capability to produce browser-independent code. The following development tools support CSS and DHTML to varying extents.
HomeSite 3.0, Allaire Corp., http://www.allaire.com/HoTMetaL PRO 4.0, SoftQuad Inc., http://www.softquad.com/products/hotmetal/lnteractor 1.1, mBED Software, http://www.mbed.com/NetObjects Fusion 3.0, NetObjects Inc., http://www.netobjects.com/Dreamweaver 1.0, Macromedia Inc., http://www.macromedia.com/sottware/dreamweaver/
More tools and information on DHTML are available on the following Web sites.
WebReference.com (sm) - The Webmaster's Reference Library: http://www. webreference.com/ZDNet lnternetUser I Garage I Dynamic HTML: http://www.zdnet.com/products/garage/dhtml.html
Date:
03/10/98 to 03/14/98
- Log in to post comments