DHTML Tutorial

DHTML stands for Dynamic HTML.

Dynamic HTML, a combination of HTML enhancements, scripting language and interface that are used to deliver animations, interactions and dynamic updating on web pages. The two major elements are the ECMAScript language and the DOM object model. ECMAScript is a derivative of JavaScript, and DOMis an interface that presents the HTML document to the programmer as an object model for ease in updating.

DHTML is not a standard defined by the World Wide Web Consortium (W3C). DHTML is a “marketing term” – used by Netscape and Microsoft to describe the new technologies the 4.x generation browsers would support. DHTML is a combination of technologies used to create dynamic Web sites.

Staying on the cutting edge of web design is a hard but important thing to do. One of the buzzwords around the net is DHTML and DOM. No doubt you may have wondered exactly what in the world they are. DHTML, Dynamic HTML, allows you to alter the display of your page after it has loaded.

You must’ve seen neat DHTML effects at numerous sites on the net. And if you’ve ever looked at some code there, you may have given up on ever coding DHTML. However, don’t give in just yet. DHTML is really fun and easy. In fact, it is merely a combination of a scripting language, CSS (Cascading Style Sheets), and HTML.

Why we need DHTML?

Straightforward text is too dull for the mass-market of the Internet, and we need more complex and interesting structures to display an ever-increasing amount of data. So HTML was born.

 

What is DHTML (Dynamic HTML)?

DHTML stands for Dynamic HTML. Dynamic HTML, a combination of HTML enhancements, scripting language and interface that are used to deliver animations, interactions and dynamic updating on web pages. The two major elements are the ECMAScript language and the DOM object model. ECMAScript is a derivative of JavaScript, and DOMis an interface that presents the …

What is DHTML (Dynamic HTML)? Read More »

Dynamic Expressions In DHTML

One interesting DHTML feature in IE5+ that never quite made it into the spotlight is Dynamic Properties. By their very nature, properties defined in HTML are static, non changing (ie: “). Dynamic Properties allows you to substitute static values in HTML with a dynamic expression instead, so instead of “300”, it could be “half the …

Dynamic Expressions In DHTML Read More »

What Is Window Object?

The Object Model in Overview The browser object model can be thought of as physically part of the software that forms the browser, while Dynamic HTML is (in theory at least) a universal browser-independent document definition language. This means that all browsers which host Dynamic HTML must provide the same object model. Otherwise, it would …

What Is Window Object? Read More »

What Is Status and Default Status In DHTML?

As with the DOM, we can read/write various parts of the BOM. The status line at the base of a browser screen can be read or written to using the window.status property. If the status line is left unattended, the defaultStatus property is displayed. <HTML> <HEAD> <TITLE>Status Demo</TITLE> </HEAD> <BODY onload=”defaultStatus=’Welcome to eBiz.com Pvt Ltd’;”> …

What Is Status and Default Status In DHTML? Read More »

Frames In DHTML

Frames proved to be a valuable extension to the HTML language, allowing multiple documents to be displayed in a single browser. With DHTML, frames become even more powerful, with the ability to read and write across frames.   This is achieved by the usual referencing of elements, but we need to ensure that we ‘travel’ …

Frames In DHTML Read More »

Windows Child Object In DHTML

The window object also has child objects, which contain related information about the browser. Commonly-used child objects include:   • Navigator • History • Location   The navigator object   This object holds all the information about the type of browser and system the user is using. The navigator object has read-only properties.   <HTML> …

Windows Child Object In DHTML Read More »

InnerText & InnerHTML In DHTML

The entire DHTML language is fairly substantial. It contains keywords for all sorts of things – dynamic event handling, text substitution, dynamic element creation, and so on. A discussion of these is beyond the scope of this tutorial, but there are a few features that we can explore.   An Example of innerHTML:     …

InnerText & InnerHTML In DHTML Read More »

Accessing Elements through DOM In DHTML

We can access an element (e.g., a layer) by it’s ID with document.getElementById(ID). We can also access element nodes with document.getElementsByTagName(tagName). That returns an array of elements with that tagName.   Example: document.getElementsByTagName(“TD”).item(0)   In the example, we grab the first table cell (&lt;td> tag) in the document. To get an array of all tags …

Accessing Elements through DOM In DHTML Read More »

Introduction of Events In DHTML

“Events are the heart of any JavaScript application. Events are used to add interactivity to the page. Without events interactivity can not be imagined.”   The Web is an ever evolving environment, and Web pages themselves are steadily blooming from static displays of data to interactive applications. “Dynamic HTML” is an umbrella term encompassing several …

Introduction of Events In DHTML Read More »

OnClick Event In DHTML

OnClick Event In DHTML You may be well ahead of me here, but I’ll say it anyway: OnClick works exactly like onMouseOverexcept onClick creates the effect when you click on the active text or image. Here’s the alert method example from above using onClick: <A HREF=”http://csitquestions.com” onClick=”javascript:alert(‘Hello out there!’);” target=”_blank”>csitquestion PVT LTD</A> And here’s what …

OnClick Event In DHTML Read More »

Rollover Menu In DHTML

Rollover Menu In DHTML The source Code: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title> Rollover Menu </title> <meta name=”generator” content=”editplus” /> <meta name=”author” content=”” /> <meta name=”keywords” content=”” /> <meta name=”description” content=”” /> <style type=”text/css”> #ebizmenu{ width: 180px; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: …

Rollover Menu In DHTML Read More »

No right click [IE & Safari only] In DHTML

Source code: <html> <head> <TITLE>[Right Click Disabled]</TITLE> <script type=”text/javascript”> function disable() { if (event.button == 2) { alert(“Right Click not Allowed”) } } </script> </head> <body onmousedown=”disable()”> <p>Right Click not allowed on the page.</p> <p>…..</p> </body> </html>   Preview of the example on IE. Preview on Apple Safari.

Scroll to Top