Dynamic Hypertext Markup Language - DHTML

 

 

The DHTML, introduced by Microsoft in version 4 of the Internet Explorer, enhanced the user experience.  It allowed designers to display information in much richer format and create web applications that use server resources more efficiently.

 

 

DHTML is not a separate language. It is just a name given by Microsoft to all tools that control the appearance of HTML pages.  It uses JavaScript, VBScript, layers and Cascading Style Sheets (CSS) to change the Document Object Model (DOM) properties dynamically.

 

 

What is the Document Object Model?

 

The DOM is a platform-neutral and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure and style of documents.

 

 

 1.            Components of a DHTML page

 

q       HTML with <div> and <span> tags that position the objects on the page

q       CSS tells the browser how to display the objects

q       JavaScript allows user to interact with the page

 

 

 2.            Advantages of using DHTML

 

q       Make pages dynamic without using Java, Flash or databases.

q       All interaction is done on the user’s browser

 

 

 3.            Hints on creating a DHTML page

 

You can create DHTML pages using software packages such as Dreamweaver or FrontPage.  This can make the total file size of the page excessive, as it will contain the html, CSS and JavaScript.  It will be easier to maintain and quicker to download the DHTML pages if you try and keep the html, CSS and JavaScript as separate files.

 

 

3.1         HTML file

 

<HTML>

<HEAD>

 

<TITLE>DHTML - Introduction</TITLE>

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

<SCRIPT SRC=”DHTMLscr.js”></SCRIPT>

 

</HEAD>

 

<BODY>

 

<P class="title">Dynamic Hypertext Markup Language</P>

 

<P class="bodytext"> AlphaImageLoader Style</P>

 

<DIV ID="oDiv" STYLE="position:absolute; left:140px; top:120; height:300; width:300; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='book.gif', sizingMethod='image');"></DIV>

 

<BUTTON onclick="fnToggle(this);">Enlarge It</BUTTON>

 

</BODY>

</HTML>

 

Note: look at the <LINK> and <SCRIPT> tags to see how the CSS and JavaScript files are linked with the HTML file

 

 

3.2         CSS file "DHTMLprj.css"

 

P.title {text-indent: 0cm;

          font-size: 30pt;

          color: #330066;

          font-family: Verdana, Arial, Helvetica, Sans-serif;

          }

P.bodytext {text-indent: 2cm;

                    font-family: Verdana, Arial, Helvetica, Sans-serif;

                    font-size: 18pt;

                    font-style: normal;

                    font-weight: normal;

                    font-variant: normal;

                    background: #CCDDEE;

                    padding: 0.5em;

                    line-height: normal;

                    margin-top: 2em;

                    margin-right: 1em;

                    margin-bottom: 1em;

                    margin-left: 1em;

                    }

 

 

3.3         JavaScript file “DHTMLscr.js”:

 

var bToggle = 1

 

// Toggle the sizingMethod property to resize the image.

function fnToggle(oObj) {

    if (bToggle) {                                                       

        bToggle = 0;

        oDiv.filters(0).sizingMethod="scale";

        oObj.innerText='Make Normal';}

    else {

        bToggle = 1;

        oDiv.filters(0).sizingMethod="image";

        oObj.innerText='Enlarge It';}

}

 

 

 4.            Resources

 

This is the first web site that introduced me to the DHTML:

http://hotwired.lycos.com/webmonkey/authoring/dynamic_html/

With step-by-step training, I was able to move pictures across my page in no time.

 

 

http://www.w3.org The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential.

 

 

DHTML demos for Netscape:

http://developer.netscape.com/docs/demos/dynhtml.html

 

 

Puzzle demo:

http://developer.netscape.com/devcon/jun97/contest/puzzle/index.html

 

 

 

Jeff Rule's Dynamic HTML Demos:

http://www.ruleweb.com/dhtml/

 

 

mouse over with sound

http://www.ruleweb.com/dhtml/mouseover_snd/mouse_snd.html

 

 

beginers site

http://wdvl.internet.com/Quadzilla/DHTML/

 

 

MSDN

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/overview.asp

 

 

Titanic Demo with pictures sliding and overlaying:

http://www.geocities.com/Hollywood/Studio/9349/ForIE.html

 

 

superb site:

http://www.dynamicdrive.com/

 

 

great DHTML sites:

http://dhtmlnirvana.com/

http://www.htmlguru.com/

http://www.bratta.com/bratta/

 

 

tutorials

http://www.dhtmlcentral.com/tutorials/tutorial6.asp

http://www.codekit.com/programming.asp

http://www.geocities.com/ResearchTriangle/Facility/4490/

http://webmaster.tophosts.com/dhtml/index.htm

http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/

 

 

more samples

http://www.dhtmlcentral.com/coolmenus/examples/withoutframes/menu14.html

http://plaza.harmonix.ne.jp/~jimmeans/bench2/

http://www.wdvl.com/Authoring/DHTML/

Magnifier: http://www.dynamicdrive.com/dynamicindex3/zoom.htm

Transitions: http://www.dynamicdrive.com/dynamicindex3/document2.htm

 

 

source code samples:

http://www.high.demon.nl/

 

 

games:

http://plaza.harmonix.ne.jp/~jimmeans/falcon/

http://plaza.harmonix.ne.jp/~jimmeans/mario2/

http://plaza.harmonix.ne.jp/~jimmeans/pman/

http://plaza.harmonix.ne.jp/~jimmeans/tetriscript.html

 

 

Netscape games

http://macosx2.ncs.gr.jp/~masa/eng/web_game/index.html

http://www.t3.rim.or.jp/~naoto/

 

 

 

CS403, Fall 2001

Bogdan Rzadkowski