INTRODUCTION TO DHTML

TOPICS TO BE DISCUSSED……….  Introduction Introduction  UsesUses  ComponentsComponents  Difference between HTML and DHTMLDifference between HTML and DHTML

Introduction Dynamic Hyper Text Markup Language (DHTML) is a combination of Web development technologies used to create dynamically changing websites. Web pages may include animation, dynamic menus and text effects. The technologies used include a combination of HTML, JavaScript or VB script, CSS and the document object model (DOM). Designed to enhance a Web user’s experience.

DHTML includes the following features:  Dynamic content, which allows the user to dynamically change Web page Content.  Dynamic positioning of Web page elements  Dynamic style, which allows the user to change the Web page’s color, font, size or content

Uses of DHTML  Animate text and images in their document, independently moving each element from any starting point to any ending point, following a predetermined path or one chosen by the user.  Embed a ticker that automatically refreshes its content with the latest news, stock quotes, or other data.  Use a form to capture user input, and then process, verify and respond to that data without having to send data back to the server.  Include rollover buttons or drop-down menus.

Components of DHTML DHTML requires four independent components to work: HTML, Cascading Style Sheets, Scripting and the Document Object Model. Following is the description of each component. HTML: HTML defines the structure of a Web page, using such basic elements as headings, forms, tables, paragraphs and links.

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."

Differences between HTML and DHTML:  HTML is a mark-up language, while DHTML is a collection of technology.  DHTML creates dynamic web pages, whereas HTML creates static web pages.  DHTML allows including small animations and dynamic menus in Web pages.  DHML used events, methods, properties to insulate dynamism in HTML Pages.

 DHML is basically using JavaScript and style sheets in an HTML page.  HTML sites will be slow upon client-side technologies, while DHTML sites will be fast enough upon client-side technologies.  HTML creates a plain page without any styles and Scripts called as HTML. Whereas, DHTML creates a page with HTML, CSS, DOM and Scripts called as DHTML.  HTML cannot have any server side code but DHTML may contain server side code.

 In HTML, there is no need for database connectivity, but DHTML may require connecting to a database as it interacts with user.  HTML files are stored with.htm or.html extension, while DHTML files are stored with.dhtm extension.  HTML does not require any processing from browser, while DHTML requires processing from browser which changes its look and feel.

THANKS