TechiWarehouse.Com


Top 3 Products & Services

1.
2.
3.

Dated: Aug. 12, 2004

Related Categories

DHTML (Dynamic HTML)

Introduction

DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more dynamic.

DHTML is NOT a scripting language (like JavaScript), but merely a browser feature- or enhancement- that gives your browser the ability to be dynamic. DHTML is a collection of features that together, enable your web page to be dynamic. I think its important now to define just what the creators of DHTML meant when they say "dynamic". "Dynamic" is defined as the ability of the browser to alter a web page's look and style after the document has loaded.

Web designers are often limited by default fonts such as Helvetica, Arial and Times Roman. DHTML allows downloadable fonts. Readers will be able to see web pages the way they are designed, with text that responds to exact font, size and style.

DHTML is a new tool for designers to create Web pages with special effects and animation such as flying headlines and news tickers. Designers can attach a simple script to any object on a page and the user can change the appearance of a Web page "on the fly." Prior to DHTML, designers were limited to writing complicated programs to achieve the same effects.

History

During 1960’s, IBM scientists were working on a Generalized Markup Language (GML) for describingDHTML Tutorial documents and their formatting. In 1986, the International Standards Organization (ISO) adopted a version of this standard called Standard Generalized Markup Language (SGML). SGML offers a highly sophisticated system for marking up documents so that their appearance is independent of specific software applications. It is big, powerful, filled with options, and well suited for large organizations that need exacting document standards. As Internet began to grow, data increase rapidly.

Unfortunately, SGML made the language unsuitable for quick easy Web publishing (Randall, 319). The straightforward text was too dull for the mass-market of the Internet. Data needs to be display in an interesting structure and so HTML (HyperText Markup Language) was created. HTML is a subset of SGML. SGML means Standard Generalized Mark-Up Language. A Mark-Up Language alters the presentation of the content of a document. HTML presents data in a browser window in a multitude of shapes, sizes, colors, and provides extra features, such as forms and hyperlinks (Perry). HTML is a good tool for publishing small file size documents over the Internet. However, HTML in its traditional form is not powerful enough to create the interactive and multitude-rich documents that today’s commercial web sites demand.

HTML’s limitation is the control over page layout. Web authors do not have the ability to lay out pages with the pixel-level accuracy available to the traditional desktop publishing author. In addition, a standard HTML document cannot specify that text and images be located at exact coordinates, on top of each other, or even that the text be displayed in a particular point size (Heinle). Most computer programming languages have more functionality than HTML.

The programming language is called JavaScript and it has powerful range of command. In order to combine these two programming languages together to be more powerful, Dynamic HTML emerged

Enhanced User Experience

DHTML makes the Web experience faster and more interactive for end users. Live updates can be activated by user and browser-driven events. For example, text and images can be hidden in a document until a user moves the mouse over an element or clicks a button. A browser-driven event can be triggered by internal actions, such as when the browser finishes downloading the Web page.

DHTML uses Cascading Style Sheets which provides absolute positioning of every object on a page. Web designers can have precise 3-D control over x, y, and z coordinates. That means text and graphics can overlay each other, creating more visual effects.

Data binding is a technique that ties elements in a Web page to a data source. It allows the creation of a Web page that displays up-to-the-minute data extracted from a database. When the page is loaded, the current information from the data source can be read and inserted in a table. The data can be dynamically updated or sorted through a script without redrawing the page or having to go back to the server. Data binding is supported by IE4 but not by NN4.

In a client-server environment, DHTML lets the client/browser make changes after a web page has been downloaded, without the burden of relying on server-side programs or complicated sets of HTML pages to achieve special effects. In other words, the client does not need to reload the document or load a new document, or require a remote server to generate new content. That means a user does not have to wait for text and data to complete time and bandwidth consuming round-trips to and from a server before seeing results.

Components of DHTML

DHTML requires four independent components to work: HTML, Cascading Style Sheets, Scripting and the Document Object Model. The section provides a brief description of each component.

HTML: HTML defines the structure of a Web page, using such basic elements as headings, forms, tables, paragraphs and links. On December 18, 1997, HTML 4.0 attained "recommended" status at the W3C. Changes and enhancements introduced in HTML 4.0 made DHTML possible.

Cascading Style Sheets (CSS): Similar to a template in a word-processing document, a style sheet controls the formatting of HTML elements. Like in traditional desktop publishing, one can use style sheet to specify page margins, point sizes and leading. Cascading Style Sheets is a method to determine precedence and to resolve conflicts when multiple styles are used.

Scripting: Scripting provides the mechanisms to interpret user actions and produce client-side changes to a page. For example, scripts can interpret mouse actions (such as the mouse passing over a specified area of a page through the event model) and respond to the action by using a set of predefined instructions (such as highlighting the text activated by the mouse action). Although DHTML can communicate with several scripting languages, JavaScript is the de facto standard for creating cross-browser DHTML pages.

Document Object Model (DOM): The DOM outlines Web page content in a way that makes it possible for HTML elements, style sheets and scripting languages to interact with each other. The W3C defines the DOM as "a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure, and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented stage."

Lets The Game Begin

Lets get start with a small program of DHTML, since the mouse is the primary pointing device for web navigation, mouse events enhance the appearance of a Web page. There are several mouse events:

  • onmouseover
  • onmouseout
  • onclick
  • onmousemove

Here you can learn how to create mouse over and mouse out events which take place when the mouse pointer is moved across objects on the page.

Use Notepad to create an HTML document, using opening and closing HTML tags

<HTML>
..
</HTML>

Use a style rule to define the default appearance of the document. In this case, we want to create a style for the default text using 24 point Verdana font and the text will be red on a black background, as follows:

<STYLE> BODY { background-color: black; color: red; font: 24pt verdana; } <p>

Insert another rule between the STYLE tags for the "mouse over" event which will change the color of the text to white

.Effect { color: white; }

Note that there is a period "." before "Effect". We are using the CSS Class property
Create the BODY information for the HTML document.

<BODY><H1> Dynamic HTML Tutorials <H2> Tutorial 1 <H2> Tutorial 2 <H2> Tutorial 3 </BODY>

Add the event names into the tags where the events are desired and access the style rules through the className property

<BODY>
<H1>Dynamic HTML Tutorials</H1>
<H2> onmouseover="this.className='Effect'" onmouseout="this.className=';'">
Tutorial1</H2>
onmouseover="this.className='Effect'"onmouseout="this.className=';'">
Tutorial2</H2> onmouseover="this.className='Effect'" onmouseout="this.className=';'">Tutorial 3 </BODY>

Please Note that we are restoring the text to the default setting on "mouse out", by setting the className for the element equal to an "empty string" containing a semicolon.

DHTML in <Layer> Tag

This could either be a good thing, or a bad one, depending on your view. DHTML in NS 4 is quite simple, and comes down to essentially one word- Layer. I was pretty astonished myself, but its true- NS 4 relies completely on a new tag, called the <Layer>tag, to spin up its DHTML magic. This new tag is dynamic in that it can be positioned anywhere on a web page (without relation to other content), moved around, its content inside updated on demand, and more.

The basic syntax of the <Layer> tag can't be simpler (as if any tag in HTML is complicated)
<layer>Text inside layer <br>
The < layer> tag is a content tag, which means you can add into it content (like <table>). Go ahead, try inserting the above code onto your page...you'll notice that the text inside the layer floats above other text, and overlaps them. Imagine a layer as a sheet of paper that resides on top of the rest of the page, and does not take up space within the flow of the document.

A LAYER ATTRIBUTES

A layer by itself can't be more boring, not to mention useless. Fortunately, there's more to it. Layers support attributes that allow you to position it using the x,y coordinates-system, give it a background, clip it (make only certain area of the layer visible), hide it from view, and so on. I've listed the most important layer attributes below:

  • id: The name of the layer, used to identify it in your script
  • left: The position of the layer in relationship to the x coordinates
  • top: The position of the layer in relationship to the y coordinates
  • width: The width of the layer, in px or %
  • height: The height of the layer, in px or %
  • bgColor: The background color of the layer
  • background: The background image of the layer
  • src: The external html document contained inside the layer

After all, its the scripts that make layers come alive. To access a layer, you need to use the following syntax:

document.layername

Accessing the layer is just the first step. Once you've accessed a layer, you can then go on and manipulate one of the layer's attributes to produce dynamic effects. Follow is a simple example where a layer's background color interchanges between red and blue:

Here's the source code

<layer id="test" width=80px height=80px>
<script language="JavaScript1.2">
//variable that helps alternate between red and blue var thecolor=true
//Apply a bgColor of blue as the initial layer color document.test1.bgColor="blue"
function changecol(){ //if thecolor=true if (thecolor) document.test.bgColor="blue" else
document.test.bgColor="red"
//set thecolor to the opposite of its current state thecolor=!thecolor setTimeout("changecol()",1000) } changecol()

 

The Style Object of IE

HTML elements in IE 4 now all support a style object, which is essentially the "dynamic" object used to manipulate the look and "feel" of that element. Like the layer> tag, elements can also be assigned an "id" attribute, which can then be used to identify it during scripting. For example

<div id="adiv">

In your script, the syntax required to access the style object of "adiv" would look like this

adiv.style

The style object contains many properties, and by manipulating these properties, you can alter the look of an element, dynamically. I'll show some of these properties now:

Important properties of the style object:

backgroundColor: The backgound color of the element
backgroundImage: The background image of the element
color: The color of the element
position: The position type of the element. Accepted values are "absolute" and relative"
pixelWidth: The width of the element
pixelHeight: The height of the element
pixelLeft: The position of the element in relation to the x coordinates
pixelTop: The position of the element in relation to the y coordinates

The properties above only represent a subset of the total supported properties, but are the most commonly used ones. The basic syntax to manipulating any style property is the same, which I'll show in a minute. By accessing these properties, we can change the look and style of most HTML elements (as opposed to just the< layer> tag in Netscape)!

Here's a simple demonstration. You can change the text color when the mouse moves over it. Here is the code:

<spand="sometext"onMouseover="sometext.style.color='red'" onMouseout="sometext.style.color='black'">Move your mouse here

Notice how I changed the text's color

sometext.style.color='red'

first used the element's id to gain access to it, then, through the style object and finally the style's color property, I was able to easily change the color of the text on demand!
All style properties are read/write, and are accessed in a similar manner:

element id->style object->property name

Hers's another example that expands an image when the mouse is over it, and reverts it back to its original size when the mouse moves out Below is the Source Code

<img id="aimage" k src = "piza.gif" alt = "" onMouseover="enlarge()" onMouseout="revertback()">
<script language="JavaScript1.2"> function enlarge()
{aimage.style.pixelWidth=164 aimage.style.pixelHeight=202 }
function revertback(){ aimage.style.pixelWidth=82 aimage.style.pixelHeight=101 } </script>:

Dynamice Contents in NS4:

Changing content in NS 4 involves- you guessed it- the layer tag. All layers are treated by the NS browser as a separate entity from the rest of the page, with their own document object (which in turn contains other objects supported by document). This is very important to understand, since the fact that layers contains another document object is what makes it possible to create dynamic content in NS. I'll first construct a basic layer, then show how to change the contents inside of it:

<layer id="alayer" width=100% height=30>

Ready to access the document object of the above layer? Here's the required syntax

document.alayer.document

So, knowing this piece of information, you can write a script that changes the contents of the layer every 3 seconds. Look at how its done:

<script language="JavaScript1.2">

var thecontents=new Array()
thecontents[0]="How are you today?" thecontents[1]="I am fine, thank you." thecontents[2]="Well, nice talking to you!" var current=0 function changecontent(){ document.alayer.document.write(thecontents[current]) document.alayer.document.close() if (current==2) current=0 else current++ setTimeout("changecontent()",3000) } window.onload=changecontent

After running this script you would able to see the text will dynamically generated and erased, without the need to reload the document!

Dynamic content in IE 4

In IE 4, dynamic content is realized through a special property called innerHTML that exists on the and tag. Just set this property to a new HTML value, and the contents inside that span or div is instantly updated to the new value! I'll illustrate how it's done by modifying the above example to create dynamic content for IE 4 users:

<div id="mydiv">
< script language="JavaScript1.2">
var thecontents=new Array() thecontents[0]="How are you today?" thecontents[1]="I am fine, thank you." thecontents[2]="Well, nice talking to you!" var current=0 function changecontent(){ mydiv.innerHTML=thecontents[current] if (current==2) current=0 else current++ setTimeout("changecontent()",3000) } window.onload=changecontent
</script>

After Running this script you will get the Same results, just a different way to get there.

Conclusion

Dynamic HTML is an extension of HTML. It contains a number of new tags that lets you define a user interface in terms of HTML elements and lets users interact with that interface. DHTML consists of a number of related technologies: HTML defines the structure of the information being conveyed to the user; Cascading Style Sheets (CSS) determines the appearance of that information as it is being rendered, and the Document Object Model (DOM) lets scripting languages such as VBScript and JavaScript interact with the HTML elements in the document. Together, these components make it possible to write client applications that live inside the Web browser. Unfortunately, a standard has not yet been decided upon for DHTML, and the two leading browser makers, Netscape Communications and Microsoft, currently have different implementations of DHTML in their browsers. Netscape and Microsoft have pledged future support for a standard that is currently being decided by the World Wide Web Consortium (W3C). When this standard, which defines the document object model and how all part of DHTML communicates is defined, cross-browser compatibility will no longer be a problem.

Now that you've gotten free know-how on this topic, try to grow your skills even faster with online video training. Then finally, put these skills to the test and make a name for yourself by offering these skills to others by becoming a freelancer. There are literally 2000+ new projects that are posted every single freakin' day, no lie!


Previous Article

Next Article


Latasha's Comment
I don't even know what to say, this made things so much esaier!
19 Wed Oct 2011
Admin's Reply:

 Thank you Latasha :)




EPHREM's Comment
BEST TUTORIAL!!!!!
26 Wed Jan 2011
Admin's Reply:

Thanks, Very few ever comment on DHTML. I'm glad to see your comment.






Facebook