DHTML
What is DHTML?
Dynamic Hypertext Markup Language, called DHTML for short, is the name given to a set of web development techniques that are mostly used in web pages that have non-trivial user-input features. DHTML means manipulating the Document Object Model of an HTML document, fiddling with CSS directives in style information, and using client-side JavaScript scripting to tie everything together. DHTML is one of the ways to change the look of web pages. It is not a technology and it is also not a markup language, but it is the combination of many related technologies namely: Cascading Style Sheet (CSS), Hypertext Markup Language (HTML), JavaScript, etc. Document Object Model or (DOM) is a programming model that DHTML uses to represent the content of the document as an object. In short, it allows you to locate any object in a web page, and manipulate it the way you want to.
3 Key Points to Remember
- DHTML is NOT a language.
- DHTML is a TERM describing the art of making dynamic and interactive web pages.
- DHTML combines HTML, JavaScript, the HTML DOM, and CSS.
2 Important Features of DHTML
Dynamic Styles
Dynamic Styles are the key features of DHTML that are used to manipulate the elements in the document. It is usually done with the help of combined client side scripting and CSS.
Data Binding
Data Binding is a feature that allows you to bind single elements in the page with data from other sources. It also means that when you change the outer representation, the underlying data will automatically be updated. However, with JavaScript and the HTML DOM, you can dynamically change the style of any HTML element.
DHTML Examples
CSS
- Visibility
- Change background color
Images
- Preload image
- Change the size of an image
- Change the source of an image
- Change the size and the source of an image
- Change the position of an image
- Change the background image
- Moving image
- Drag and drop the image
- Image viewer
- Shaking image
- Digital clock
Menus
- Drop down navigation (select box)
- Top drop down
- Always-on-top
- Inset borders
- Description menu
- Description image
- Cursor description
- Cursor image
- Sliding horizontal
- Click sliding horizontal