InformIT: Visual C++ 6 Unleashed > Understanding Dynamic HTML

Table of Contents

Understanding Dynamic HTML

Dynamic HTML, also known as DHTML, is an acronym for Dynamic Hypertext Markup Language. Dynamic HTML is an updated scripting language based on the older HTML, or Hypertext Markup Language. Both languages, DHTML and HTML, have standards that are specified by the W3C, a standards body that defines various Web standards.

As Dynamic HTML is a superset of HTML, Visual C++ 6 and MFC will support both HTML and DHTML pages. Dynamic HTML adds new capabilities to HTML pages, enabling pages that are more interactive than typical HTML pages. Listing 12.1 contains an example of a simple DHTML page. This code can be found on the CD-ROM as Dynamic.htm.

Example 12.1. A Simple DHTML Page

<HTML>
<HEAD>
<TITLE>Visual C++ Unleashed Chapter 12</TITLE>

<STYLE>
UL                   { cursor:hand; color:black}
UL LI                { display:none; font:12pt; list-style:circle;
                       color:green; cursor:default; text-indent:20px;}
UL.showList LI       { display:block; }
UL.defaultStyles LI  { display:none; cursor:default}
</STYLE>
</HEAD>

<BODY>

<H2>An Expanding DHTML List (Click Items to Expand)</H2>

<UL onclick       = "this.className='showList'"
    ondblclick    = "this.className='defaultStyles'"
    onmouseover   = "this.style.color='red'"
    onmouseout    = "this.style.color='black'"
    onselectstart = "event.returnValue=false" >Favorite C++ Keywords
    <LI>class
    <LI>template
    <LI>new
</UL>

<UL onclick       = "this.className='showList'"
    ondblclick    = "this.className='defaultStyles'"
    onmouseover   = "this.style.color='red'"
    onmouseout    = "this.style.color='black'"
    onselectstart = "event.returnValue=false">Favorite MFC Classes
    <LI>CWnd
    <LI>CArchive
    <LI>CFormView
    <LI>CHTMLView
</UL>


</BODY>
</HTML>

As shown in Listing 12.1, a DHTML page is composed of a number of elements delimited by tags in angle brackets. Some of the elements, such as <body> and </body>, are mandatory. Other elements, such as the elements that define text formatting are optional.

When viewed using Internet Explorer, the DHTML source shown in Listing 12.1 creates the page shown in Figure 12.1. Clicking on either of the visible lines causes hidden subitems to be displayed. To collapse the list, double-click on the item.

Figure 12.1 Using Internet Explorer to view a DHTML page.

You can use DHTML to create documents that are more interactive than static HTML pages. A DHTML page can have many of the same features as an application, such as buttons and other controls. DHTML documents also have a well-defined model that can be used to manage the page, and allow interaction based on events generated by the page.

Notice that there is no JavaScript or VBScript code in Listing 12.1. All of the effects are managed in DHTML script. There are several dynamic effects occurring on this page:

When the mouse moves over a list, the list is highlighted in red.
When the mouse moves away from a list, the list is redrawn in black.
When a list is clicked, the hidden list items are displayed.
When a list is double-clicked, the list items are hidden.

This is just a small sample of the interactive effects that can be achieved using DHTML. A full discussion of DHTML is beyond the scope of this book, but a great place to get started is the Microsoft Site Builder Workshop , which can be found at http://msdn.microsoft.com.

Using the Win32 WebBrowser ActiveX Control | Next Section

Previous Section