Programming Languages

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>

</HEAD>

<BODY>

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

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

<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