Top 3 Products & Services

1. 2. 3.

---

Dated: Aug. 12, 2004

Related Categories

DHTML (Dynamic HTML)

• Introduction
• History of DHTML
• Enhanced User Experience
• Component of DHTML
• Lets the Game Begin
• DHTML in Layer TAG
• A Layer Attributes
• The Style Object of IE
• Dynamic Contents in NS4
• Dynamic Contents in IE4
• Conclusion

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 describing 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

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