DHTMLTutorials

DHTML Tutorials

1. DHTML Tutorial
   DHTML stands for Dynamic HTML. 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. To most people DHTML means a combination of HTML 4.0, Style Sheets and JavaScript. Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated.
       
2. An Introduction to DHTML
   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. A generalized mark-up language can deal with many different document types, and a standard generalized mark-up language deals with all these documents in a standardized way. And as you know, HTML presents data in a browser window in a multitude of shapes, sizes and colors, and provides extra features, such as forms and hyperlinks.
      
3. DHTML Shock
   Think of DHTML as not a singular technology but a combination of three existing technologies glued together by the Document Object Model (DOM). HTML - For creating text and image links and other page elements. CSS - Style Sheets for further formatting of text and html plus other added features such as positioning and layering content. JavaScript - The programming language that allows you to access and dynamically control the individual properties of both HTML and Style Sheets. 
        
4. Taylor's Dynamic HTML Tutorial
   Taylor's five-day dHTML tutorial and you'll have your Web pages doing all manner of mysterious things before you know it. Dynamic HTML as a self-contained thing-unto-itself is really just an idea. It is not any one specific technology (such as JavaScript or ActiveX). Nor is it a tag, a plug-in, or a browser. But it uses a host of different technologies - JavaScript, VBScript, the Document Object Model (DOM), layers, cascading style sheets - to create HTML that can change even after a page has been loaded into a browser. For example, a paragraph could turn blue when the mouse moves over it, or a header could slide across the screen. Anything that can be done in HTML can be redone after the page loads. 
      
5. Dynamic HTML
   Dynamic HTML" is typically used to describe the combination of HTML, style sheets and scripts that allows documents to be animated. Dynamic HTML allows a web page to change after it's loaded into the browser - there doesn't have to be any communication with the web server for an update. You can think of it as 'animated' HTML. For example, a piece of text can change from one size or color to another, or a graphic can move from one location to another, in response to some kind of user action, such as clicking a button.
        
6. DHTML:Anim Tree Tutorial
   The easiest way to learn how to use AnimTree is to modify the HTML and CSS in the demos. All of the colors, borders, and fonts can be easily changed right in the CSS file. To change the behavior, modify the TreeParams object. 
   This tutorial is divided into sections: 
   Ingredients - what you need to make an AnimTree 
   HTML Structure- explains the structure that the demos use 
   The event handlers 
   Modifying the CSS 
   Modifying the TreeParams 
   PersistentTree Tutorial 
   Function Reference - Every function in AnimTree and what it does 
   Frequently Asked Questions 
     
7. DHTML Navbar
   You can take the dynamic nature of javascript, and add the positioning abilities of CSS to create dynamic pages that respond to the user's clicks and drags etc. Dynamic navbars are an excellent example of this. The code for the above dynamic navbar is available at Dynamic drive. You can download the code and customize parameters such as color, width, font etc.
     
8. DHTML Diagonal Scroller
   This script is a simple modification of Link Hint Scroller. The only difference here is that the hint will scroll diagonally.  When you move your mouse over the link a hint or something about the link will appear below the link in a diagonally scrolling fashion. When you move your mouseout the scrolling will stop.  There are a few variables you can change:
   scroll_height : Scroll height variable (150 here).