DHTML Basic

Dynamic HTML.

DHTML is NOT a language. It is a TERM describing the art of making dynamic and interactive web pages. DHTML combines HTML, JavaScript, the HTML DOM, and CSS. It is an extension of HTML that enables, among other things, the inclusion of small animations and dynamic menus in Web pages. DHTML is the combination of HTML, Cascading Style Sheets, and Javascript used to create dynamic Web content which can move, hide, or animate as a result of user events. Dynamic Hyper Text Markup Language is a technique in which HTML elements move across the page.

The DOM is separated into 3 different parts / levels:

  • Core DOM – standard model for any structured document
  • XML DOM – standard model for XML documents
  • HTML DOM – standard model for HTML documents

The DOM defines the objects and properties of all document elements, and the methods (interface) to access them.

The DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing documents like HTML and XML:

“The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document”.

What is the XML DOM?

The XML DOM defines the objects and properties of all XML elements, and the methods (interface) to access them.

What is the HTML DOM?

The HTML DOM is:

  • A standard object model for HTML
  • A standard programming interface for HTML
  • Platform- and language-independent
  • A W3C standard

The HTML DOM defines the objects and properties of all HTML elements, and the methods(interface) to access them. In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

Difference between Static vs. Dynamic HTML

Static HTML means when we put HTML elements (images, paragraphs etc.) in a specific order in the source code. The browser always showed all elements in this order. styling and Positioning was done by tables, div’s and such aids. If we wanted to change the positioning or order of the elements, we had to again write the HTML.

DHTML gives a way to re-organize our pages on the fly. we can take some elements out of the natural flow of the page, put them somewhere and change its position again and again by clicking a link.

The natural flow of the page is the page as the browser shows it one by one and displays them in the best possible way from the beginning to the end of the HTML document.

Now take an image, and put it somewhere on the page without regard to this natural flow. We can force the image to be in the extreme upper left corner of the page, while the rest of the content is still distributed by the natural flow.

Attach a link to that page, say “Move image to the right”. As soon as the user clicks this link, a JavaScript is executed which moves the image, suppose 200 pixels to the right. We can do this at once or make the image move stealthily to its new position. In either case, the other elements on the page stay where they are, only the image moves.

Working of DHTML

Dynamic HTML gives authors creative control so they can manipulate any page element and change styles, content and position at any time. It provides a more dynamic experience on web pages, making them more like dynamic applications and less like static content. Dynamic HTML presents richly formatted pages and lets you interact with the content on those pages without having to download additional content from the server. it means that a page can respond immediately to user actions, such as a mouse click, without having to retrieve an entire new page from the server.
We discuss the three important components of Dynamic HTML authoring:
Positioning – precisely placing blocks of content on the page and, moving these blocks around.

Style modifications done by altering the look and display of content on the page.

Event handling is how to relate user events to changes in style and position

Key features of DHTML

Key features of Dynamic HTML include these:

  • Document  Object  Model  (DOM). Dynamic  HTML  provides  a  comprehensive  object model  for  HTML.  This  model  exposes  all  page  elements  as  objects.  Changing  their attributes or applying methods  to  them at any  time can easily manipulate  these objects. Dynamic HTML  also  provides  full  support  for  keyboard  and mouse  events  on  all  page elements. Support for the Document Object Model enables the following:
  • Dynamic content. Text or graphics  can be added, deleted, or modified on  the  fly. For example, a Web page can display an updated headline, without refreshing the page. The text surrounding the headline will reflow automatically.
  • Dynamic styles. Internet Explorer  4.0  fully supports Cascading Style Sheets  (CSS).  As such, any CSS attribute, including color and font, can be updated without a server round-trip. For  instance,  text  can  change  color  or  size when a mouse pointer  passes over  it. Multimedia  filters  and  transition  effects  can  be  applied  to  HTML  elements  simply  by adding the filter CSS attribute.
  • Absolute  positioning. CSS  positioning  coordinates  for  existing  page  content  can  be updated at any time to create animated effects, without reloading the page.
  • Data Binding. Data-driven  application  front  ends  can  be  built  that  present, manipulate (e.g.,  sort,  filter),  and  update  data  on  the  client  without  numerous  round-trips  to  the server.
  • Scriptlets. A  scriptlet  is  a Web  page,  authored  with  Dynamic  HTML,  which  content providers  can  use  as  a  component  in  their Web  applications. With  scriptlets,  content providers can author content once,  then easily reuse  the content  in other Web pages or applications.

Getting Started:

DHTML is a combination of three existing technologies meshed together by the Document Object Model (DOM):

1. HTML – For creating different page elements like text,image links.

2. CSS – Cascading Style Sheets allows authors and users to attach style (e.g., fonts, spacing,) to structured documents by separating content of documents and the presentation style of documents. CSS simplifies site maintenance and Web authoring .

3. JavaScript – it allows you to accesses and dynamically control the individual properties of both HTML and CSS

JavaScript accesses the properties of an HTML document through the DOM.The work of DOM is to represent all the attributes of HTML and Style sheets to JavaScript control. You need only to know about the DOM is what JavaScript commands it accepts.As different browsers have their slightly different versions of the DOM, so they display HTML properties defferently as well as access them differently.The basic object in DHTML is a named rectangular region, whose method of declaration and javascript reference can differ depending on the browser involved.

DOWNLOAD SOLUTION HERE