Languages

System

Application

Script

Database

HTML 4

DHTML

Technology

Client

Server

SB Tools

Protocols

Study Links

SBuilder

 

Learning DHTML 

Dynamic HTML came along with HTML 4.0.  It is a new technology introduced by both Netscape and Microsoft.  As its name dynamic HTML is intended to make HTML more interactive particularly by making HTML tags completely workable with the DOM: Document Object Model.  In addition DHTML integrates Cascading StyleSheets, JavaSctipts, Data Bindings, Scriptlets and Filters.   

    DOM with HTML: In this integration you can manipulate propeties, methods and events of all document objects.  For example, if you need a fuction to allow the user close the pop of window you can use the windows close method with mouse click event. Here's example:
    <LI>To continue click: <INPUT TYPE="button" NAME="button1" VALUE="OK"
    onClick="window.close();"></LI>

    Cascading StyleSheet: Cascading StyleSheet first introduced by Microsoft and later fully supported by Netscape and now it is everywhere.  You can design a Cascading StyleSheet as separate file with the extension *.css and link in the HTML document or within the HTML document code the styleSheet using <style> tags.   Here's the example of *.css file linking :
    <HEAD><LINK REL=STYLESHEET HREF="style/sitesstyles.css></HEAD>
    Here's the inline examle:
    <P STYLE="text-align: center; color: yellow">Yellow, centered text</P>

    Topic JavaScript and Cascading styleSheet integrating in the HTML document makes it more dynamic. Here's the example:
    <HTML><HEAD><TITLE>DHTML</TITLE>
    <STYLE>
          .clicked {font - size:36pt;color:red}
    </STYLE>
    <SCRIPT LANGUAGE="JavaScript">
      function changeH1Style() {
            document.all.tags("H1").item(0).className="clicked";
    document.all.tags("P").item(0).style.fontSize="24pt";
    }
    </SCRIPT></HEAD>
    <BODY onClick="changeH1Style()">
    <H1> Hello world</H1>
    <P>How you doing?</P>
    </BODY></HTML>
    When user clicks the document the font size and the color will change as defined in the styleSheet.  Here JavaScript defines function that uses DOM to get the result.

For more information click the Study Link and navigate the library.  Microsoft, Netscape and W3 give great examples and documentations on DHTML.  It is a new web technology which can make web pages interactive right on the client side without any networking load on the server side.   This is the main purpose of the dynamic technology, "how to minimize the networking load".

Designed by
Prakash Bom