Dynamic HTML: The Next Generation of User-Interface Design

Microsoft Corporation

February 1997

Introduction to Dynamic HTML

Dynamic HTML adds richer, more engaging user interfaces to the HTML presentation language, while also greatly reducing the workload of networks and servers. The object model provided by Dynamic HTML gives Web developers the ability to dynamically update the content, style, and structure of Web-based content, while providing them with detailed control over the appearance, interactivity, and multimedia elements required for a polished and exciting application. Developed in collaboration with the World Wide Web Consortium (W3C), Dynamic HTML is a feature of Microsoft^® Internet Explorer version 4.0.

Hypertext Markup Language Today

Hypertext markup language (HTML), the underlying language for creating Web pages, is a standard for delivering document-oriented content across the Internet. It is used by browsers and authoring tools on numerous operating systems.

But as a tool for delivering rich, interactive applications, HTML is limited. Even the most interactive and polished Web pages look dull, tame, and functionally challenged compared to any of today’s top education or entertainment CD-ROM titles. Users notice the difference immediately. HTML does not allow developers to create equally appealing and interactive applications because it is essentially static. Any interactive feature of a page that, when activated, results in a significant change to the page’s appearance requires new HTML code from the server, that is, another round trip over the Internet. This repetitive server contact makes pages less responsive and taxes Web server resources.

HTML’s inability to accommodate large, dynamic changes to a page’s appearance limits it as a tool for creating front ends to business applications. A task as seemingly simple as creating a master detail order form is very difficult with static HTML. Such tasks are dramatically simpler with today’s client/server application development tools such as Borland Delphi, Sybase Powerbuilder, and the Microsoft Visual Basic® programming system.

HTML has another limitation: While it can express textual content, it can’t express multimedia capabilities such as positional control (moving objects in two dimensions), sprite effects, built-in visual transitions, audio mixing or inclusion of real-time interactive multimedia.

Dynamic HTML

Dynamic HTML extends HTML with an object model allowing scripts or programs to change styles and attributes of page elements (or objects) , or even to replace existing elements (or objects) with new ones. Other additions include multimedia and database features. Developed by Microsoft Corp. in collaboration with the W3C, Dynamic HTML adds the interactivity, database manipulation, and extensibility needed for creating business applications, as well as the snap and polish needed for consumer-oriented applications.

Dynamic HTML allows developers and Web page designers to bring more creativity, control, and sophistication to their Web sites. It increases the usefulness, attractiveness, and enjoyment of the Web within current bandwidth limits, without requiring developers to abandon their current tools. Developers can use the HTML editors they use today and control the dynamic behavior of pages through the languages that they use today, such as JavaScript, Java™ and Microsoft Visual Basic, Scripting Edition (VBScript).

Developers have other options for adding dynamic behavior to their pages (such as writing custom embedded objects in Java, Visual Basic, or C++). But these isolated regions of the page cannot take advantage of the rich layout, open formats, and easy editing provided by Dynamic HTML. With Dynamic HTML, interactive behavior is fully integrated with the expressive power of HTML, and integrated directly into the browser’s page display. If custom embedded objects are necessary, they can be simpler because they leverage the power of Dynamic HTML. Many tasks that formerly required custom embedded objects can now be done with scripts.

Dynamic HTML is fully compatible with the W3C Cascading Style Sheets (CSS) Specification, making it compatible with current browsers and existing HTML pages.

Examples of Dynamic HTML Use

Dynamic HTML can be used in browsers, business productivity applications, “edutainment” titles, and more. Examples include the following:

Business applications. Dynamic HTML makes the Internet a more powerful tool for business use. Dynamic forms (for example, master detail order entry, sales tracking and analysis, and employee benefits) can respond to user input, recalculate on the fly, and obtain additional information in the background. With these new capabilities, Dynamic HTML becomes a viable application development language for creating client/server front ends for business applications.

Interactive documents. While the hyperlinking built into the HTML model aids user navigation of Web documents, documents delivered over the Internet and intranets are essentially confined to a page-by-page design metaphor. Dynamic HTML changes that by making it possible to create a more interactive document that responds instantly to user actions. Following are some examples of how interactive documents can be built using Dynamic HTML:

Dynamic expansion. When users conduct a typical Internet search, they receive a summary page that lists target Web sites. Obtaining additional information requires clicking on a listing and going back over the Internet in search of the Web page. With Dynamic HTML, search results pages can be programmed with scripts that provide a detailed synopsis of any listing when the mouse is passed over it, eliminating redundant fetches from the server.
Text effects. Hyperlinks or other text elements can change style based on mouse or keyboard actions. For example, to get the user to click a specific hyperlink, the designer could cause its font to grow (and an audio theme to grow louder) as the mouse pointer moves closer.
Table manipulation. Tabular data such as price lists and search results can be sorted, filtered, and viewed using the built-in local database engine. This provides a more “live” experience of the document than conventional HTML.

Entertainment and education. Interactive entertainment and education Web sites can include animated characters that respond to user input by moving anywhere in a two-dimensional (2-D) plane; they can also, through z-positioning and scalable graphics, appear to move in three-dimensional (3-D) space. Audio, such as music or voice-overs, can fade in and out to correspond with the characters’ movements.

Benefits of Dynamic HTML

Dynamic HTML provides the following benefits:

More creative options using objects. Developers have more options for programming their pages creatively. The entire contents of the Web page are exposed as a collection of open, extensible, and scriptable objects, regardless of the language used to program them. Dynamic HTML can capture and respond immediately to a user’s actions. Web page designers can make the page act as they need, with fewer limits imposed by HTML.

Rich multimedia and layout. Web site designers can use rich effects such as moving sprites, animated washes of color and texture across text fonts, dynamic multichannel audio mixing, font and screen transition effects (for example, swipes and fades), vector graphics for scalable, low-bandwidth images, and x-, y- and z-order positioning. This last capability allows objects to move in a 2-D plane, as well as in front of or behind other objects (“2.5-D”), without going back across the Internet to the server for instructions.

Lower server load. Using Dynamic HTML, developers have the choice of creating dynamic content on the client or on the server to optimize for the best user experience. When processing occurs on the client, no round trips need to occur, eliminating additional network traffic, latency, and server load.

More snap. Users can interact with a Web page as though it were an application without having to communicate with the Web server for each specific user interaction. Dynamic HTML content can modify itself on the fly in response to user actions, dynamically altering the appearance or content of the Web page. Data manipulation can occur locally, not on the server, resulting in less waiting for users.

Built-in database support. Using built-in data binding, Web designers can provide pages that organize data on the fly, interactively, on the client system, and without requiring a round trip to the server. For example, a user can dynamically sort a list of stock quotations by price or by price/earnings ratio, without requiring complex Java programming or abandoning the display richness of HTML.

Open, cross-platform support. Dynamic HTML will be included in Microsoft Internet Explorer 4.0 and packaged as a no-cost component for all platforms supported by Active Client, including Windows®-, Macintosh- and UNIX-based systems. In addition, vendors of other applications, browsers, or tools can incorporate Dynamic HTML technology seamlessly and royalty-free into their products and even extend the functionality to meet their specific needs.

Dynamic HTML and Standards

Dynamic HTML is a standards-based technology, enabling easy use in conjunction with today’s software, tools, browsers, and other Internet components. Unlike other approaches, Dynamic HTML builds on and is completely consistent with the Cascading Style Sheets Specification recently ratified by the W3C consortium. Microsoft has submitted its object specification for HTML programming to the W3C for adoption as an open standard. Microsoft has been working closely with the W3C and will enhance future versions of Dynamic HTML and other Active Client technologies to conform to specifications recommended by the W3C.

Dynamic HTML pages can be extended by incorporating Java applets or ActiveX™ controls in Web pages and can be scripted using VBScript, JavaScript, or any other language that supports the ActiveX Scripting interface. Because of the open extensibility and the flexibility it provides, Microsoft is adopting Dynamic HTML across all of its tools and applications as its standard user-interface engine.

Availability and Third-Party Support

Dynamic HTML will be provided in Microsoft Internet Explorer 4.0 on 32-bit Windows platforms (the Windows NT® operating system and Windows 95), Macintosh, Windows 3.1 and key Unix platforms. Microsoft Internet Explorer 4.0 is scheduled for general release early in the second half of 1997 and is available to third parties for royalty-free inclusion in browsers, tools, and client application software.

Appendix: A More Detailed Discussion of the Major Features of Dynamic HTML

Dynamic HTML includes several major features:

Dynamic styles
Positioning
Dynamic content
Filter, transition, and animation controls
Data awareness

These features enable Web page designers to dynamically change the style and attributes of elements, as well as insert, delete, or modify elements and their text even after a page has been loaded. Dynamic HTML automatically updates the display of the page to reflect these changes, including reformatting the document as necessary. Some of these features can be used without scripting, while others are exposed via an object model that can be accessed from scripts and other components within a page (for example, ActiveX controls and Java applets). The object model is a superset of, and is therefore backward compatible with, the JavaScript object model found in Netscape Navigator 3. Like Microsoft Internet Explorer versions 3.0 and 4.0, Dynamic HTML supports ActiveX scripting, which gives Web page designers the choice of scripting languages, including JScript™ development software (Microsoft’s implementation of a JavaScript-compatible scripting engine) and VBScript.

These Dynamic HTML innovations work together holistically and synergistically—the whole is greater than the sum of its parts.

Dynamic Styles

Using Dynamic HTML, Web designers can dynamically change the style of every HTML element in a document. In HTML, styles are specified as element attributes or via Cascading Style Sheets (CSS). The object model exposed by Dynamic HTML exposes every HTML element in the document, including its attributes and CSS properties. Using simple scripts, Web page designers can dynamically read and change the values of these attributes and CSS properties. For example, dynamic styles can be used to do the following :

Show or hide an element. For example, the detail text of a bullet point could be hidden until the user moves the mouse pointer over the bullet.
Change the size, color, or other font properties of elements. For example, a title could be emphasized by enlarging the font and changing its color when the user moves the mouse over the title.
Change the position of elements on a page.

Unlike other browsers, Microsoft Internet Explorer 4.0 uses Dynamic HTML to dynamically change the style and content of a page at any time, even after it has been loaded. Dynamic HTML supports intelligent recalculation to rerender a page only if sections of that page change, including reformatting text paragraphs as needed. For example, if list items are shown or hidden, Dynamic HTML adjusts the other related items, including renumbering them where appropriate.

Positioning

Dynamic HTML supports x-, y-, and z-order positioning of HTML elements, as specified in the W3C Working Draft on positioning HTML with Cascading Style Sheets. This capability allows Web page designers to place elements such as images, controls, or text precisely on the page. By placing objects in different z-planes, Web page designers can also cause the objects to overlap, specifying which element should be on top of which.

By manipulating object coordinates and other dynamic styles using scripts, Web page designers can move elements around a page, thus animating the page. Dynamic styles, positioning, transparent ActiveX controls(supported in Microsoft Internet Explorer), and transparent images present Web page designers with a rich set of animation options.

This positioning capability has many uses in both consumer and business applications. Two-dimensional style layout functionality was first available from Microsoft using the HTML Layout Control, which shipped in Microsoft Internet Explorer 3.0. The syntax used by the Layout Control was previously submitted to the W3C. Since then, Microsoft has been actively working with the W3C to turn the syntax into a standards-based proposal. This positioning functionality represents the evolution of that 2-D functionality, the key difference being that Dynamic HTML uses native HTML and W3C-proposed syntax.

Dynamic Content

In addition to changing the styles on a page, Web page designers can dynamically change the content of an HTML page. This capability can be used to insert or delete elements on a page, as well as modify the text of individual elements. In essence, scripts can construct and alter the content of a document at run time. For example, a script can scan the elements of a page and, using dynamic content, insert a table of contents at the beginning of the page. Furthermore, the table of contents can be made live, using links to bookmarks.

Unlike other approaches, which restrict content changes to load time only (using syntax such as document write), these changes can be made at any time, even after the entire document has been loaded.

Filter, Transition, and Animation Controls

Dynamic HTML includes animation and multimedia controls that can be used to apply visual effects to elements on a page or to the entire page. These controls support filters, animation, and transitions. Transitions can be used for elements on a page, or for transitions between pages.

Furthermore, these controls can take advantage of new multimedia and animation services delivered with Microsoft Internet Explorer 4.0. ActiveX control and Java developers can take advantage of these services to implement additional multimedia or animation effects.

Data Awareness

Many HTML pages are based on data, regardless of whether that data is stored in databases or files. Dynamic HTML incorporates several features to integrate data with native HTML elements. These features make HTML a better environment for displaying and collecting data. Microsoft Internet Explorer 4.0 includes the following data awareness features:

Automatic generation of table rows from data records. By binding a table to a data source, Dynamic HTML can automatically create a table row for each record in the data source.
The table expansion is dynamic. The user can view the page while the table is still being rendered. This contrasts with conventional server-generated tables that must be entirely generated before the page is sent to the client.
Dynamic table regeneration. The table can be regenerated dynamically (to support sorting and filtering) on the client without requiring the server to send additional data. This provides a new level of user interactivity without requiring round trips to the server.
Binding of HTML elements to a specific record. By designating a record as the current record and binding fields from the record to elements on the page, data from the current record is displayed as part of the HTML in the document.
Data-bound form fields. HTML forms can be created using intrinsic controls and compliant ActiveX controls. These controls can be bound to fields in a record. Whatever the user enters in the control is then pushed into the record in the data source control. Upon user command (for example, pushing a button), the data source control then uploads the data to the Hypertext Transfer Protocol (HTTP) or database.

Dynamic HTML data awareness is implemented using an open architecture. Within each data-aware page is a data source control. A data source control is an invisible ActiveX control that knows how to communicate with a data source (for example, a database). Dynamic HTML intrinsically understands how to bind HTML elements to fields in the data source control. Dynamic HTML will include three data source controls to access comma-delimited data in files, Structured Query Language (SQL) data in Microsoft SQL Server™ and other open database connectivity (ODBC) sources, and Java database connectivity (JDBC) data sources. ActiveX control and Java applet developers can implement additional data source controls to communicate with other data sources.

The Dynamic HTML data awareness functionality provides a rich set of options to allow the author to use native HTML to provide users with the ability to manipulate and input data efficiently, with minimal load on the server. The result is faster, richer, and more interactive pages.