WinMag * March 1997 * How To

[ Go to March 1997 Table of Contents ]

Power Windows /
Karen Kenworthy

It's Alive!
Bring your Web site to life with ActiveX controls.

Just a few months ago, most Web pages were lifeless. True, when you clicked on hyperlinked text or a picture, a new page might appear. But even this modest interaction was sluggish, requiring frequent and lengthy communication between your browser and a local or remote Web server. As a result, there was no chance of anyone mistaking the World Wide Web for a flashy video game.

As usual, things are changing. ActiveX controls are bringing Web pages to life. In fact, Web pages are acting less like documents, and more like programs.

The next time you're surfing the Web, take a look beneath the waves. Select Source from the View menu of Internet Explorer, or Document Source from Netscape Navigator's View menu, and you'll see the data that defines the current page.

Each page's description is written in a special language called HTML (hypertext markup language). In most cases, the HTML instructions that describe a page are stored in a text file whose name ends in either HTM or HTML. When a Web server sends your browser a page, it's actually transmitting the page's HTML file.

In concept, HTML is remarkably simple. All HTML code falls into one of two categories: text or tag. Tags are easy to spot. They're surrounded by a pair of acute brackets ( <" and ">"). Their main jobs are specifying fonts, formatting paragraphs, controlling the placement of pictures and, as you'll see in a moment, providing access to ActiveX controls. Everything else in an HTML file (all the information outside the tag delimiters) is text displayed by the browser. For instance, in the HTML code <i>Karen </i>, the tags are i and /i and the text is Karen. This code displays Karen in italics.

Unfortunately, HTML is complex in practice. There are scores of different tag types. A few hardy folks create HTML files the old-fashioned way, editing each file manually with a simple text editor like Notepad. But complex pages require considerable coding and tweaking, which can be very time-consuming if done by hand.

Fortunately, HTML editors, such as Microsoft's FrontPage 97 and Netscape's Navigator Gold, can ease Web page creation. These programs are essentially desktop publishing applications that let you type text, insert pictures, define hypertext links and do much more. When you save your page to disk, the editor creates an HTML file containing all the appropriated tags and text. Unless you want to make a few manual adjustments afterward, you don't need to understand HTML at all.

Other choices for HTML programming are at hand. For instance, you can download Microsoft's free Internet Assistant add-ons, which allow Microsoft Word 6.0 and 7.0, and Excel 5.0, to save documents in HTML format. These add-ons, which Office 97 will include, are available free on the Microsoft Web site (www.microsoft.com/msdownload/)

ActiveX Control Pad

HTML editors and Microsoft's Internet add-ons can be a big help for Web page design. But if you're used to Visual Basic's design environment, you may find even the slickest HTML editor a bit frustrating. The problem is with HTML itself, rather than the editor.

HTML was originally designed as a means to publish documents on the Web. Only later were features added that let you enter data and answer questions while visiting a Web site. Even now, the user-input capabilities of HTML are limited. With a little work, a Web page can contain text boxes, radio buttons, check boxes and push-buttons. But even these basic controls have limited capabilities. For the most part, they are only able to passively accept data and send it back to the Web page's server.

Fortunately, we're no longer limited to the input controls built into HTML. Thanks to ActiveX controls, our input choices are now almost unlimited.

ActiveX controls are essentially next-generation OLE controls, and 32-bit descendants of the old 16-bit VBX controls so familiar to Visual Basic programmers and users. There are ActiveX controls that display movies, 3-D text, spreadsheet-like grids, RTF (Rich Text Format) documents, and familiar list boxes and scroll bars. There are even ActiveX controls that securely accept credit card information, retrieve information from databases and more. All told, thousands of ActiveX controls are available. And you can use virtually all of them in your Web pages, including those that ship with Visual Basic and those from third parties.

Internet Explorer 3.0 and later supports Web pages containing ActiveX controls. Netscape Navigator 3.0 does, too, if you install an ActiveX plug-in. One is available from NCompass Labs at www.ncompasslabs.com/products/scriptactive.htm. Future versions of Netscape Navigator are expected to include built-in support for ActiveX controls.

You might think adding an ActiveX control to a Web page is easy. But it's not, especially if you don't have help. Here's the HTML code for a simple scrolling text (Marquee) ActiveX control:

WIDTH=71 HEIGHT=27

CLASSID="CLSID:1A4DA620-6217-11CF-BE62-0080C72EDD2D"

</OBJECT>

The <OBJECT>tag's CLASSID attribute specifies the type of control (in this case, the "Microsoft IE30 Marquee"), via a Registry entry. The CLASSID attribute's value, shown inside quotation marks, is really a 128-bit binary number, shown in hexadecimal. This number is also a key in the Windows Registry.

The <OBJECT>tag's WIDTH and HEIGHT attributes tell the browser how much screen space to set aside for the control (in pixels). After the <OBJECT>tag, you'll usually find one or more <PARAM>tags specifying the control's properties.

Not exactly as simple as you expected? Microsoft agrees. That's why the company developed something called the ActiveX Control Pad. This free software lets you select an ActiveX control from a list, and it will automatically generate the HTML code needed to insert the control into your Web page.

To give the ActiveX Control Pad a try, just download it from http://www.microsoft.com/workshop/author/cpad/default.htm. By the time you read this, it will also be available for download from WINDOWS Magazine's online locations, here.

ActiveX Control Pad is easy to master. First, use it to open an existing HTML file. This file can be one you created by hand, or one generated by an HTML editor. Next, add a blank line in the HTML file where the control's information should be placed. Finally, click once at the beginning of the line to place the text insertion cursor there.

Now you're ready to select a control and set its properties. Select Insert ActiveX Control from ActiveX Control Pad's Edit menu, and a list of available controls will appear. Select a control, and you'll then see a small window that shows how the control will look. Beside the window is the control's Properties dialog, the same Properties dialog displayed in Visual Basic's design mode (see the sidebar "Be an X Maniac")

CodeBase

You can't expect all the readers of your Web pages to have every ActiveX control you use. Fortunately, you can distribute ActiveX controls along with your Web page. The secret is each control's CodeBase property.

This property allows you to specify a file to be downloaded if the user doesn't already have a copy of the control. The file may reside on the same server as the Web page's HTML file or anywhere on the Internet.

For example, to cause a user's Web browser to download the HTML Layout Control from Microsoft's Web site, if needed, you could specify a CodeBase value of codebase="http://activex.microsoft.com/controls/mspert10.cab#version=1,0,4,8290". Everything up to the pound sign (#) is a URL pointing to a file containing the control. The file may be the control itself (usually an OCX file) or a CAB file (a compressed archive containing the control's OCX file and an INF file telling Windows how to install the control). The information following the pound sign tells the browser which version of the control is available there. If the control on the Web server is more recent than the control residing at the browser, the appropriate update is made on the browser side.

HTML Layout Control

The rich assortment of available ActiveX controls solves one problem. But another limitation of HTML remains. For the most part, pictures and text in Web pages "go with the flow." As a browser's window is resized, the Web page being displayed is automatically reformatted. Paragraphs that once occupied four short lines may now be displayed in three longer lines. A picture appearing on the screen's left side might now show up in the middle.

Fortunately, there's a special ActiveX control, included with the ActiveX Control Pad and an optional component of the Internet Explorer, that allows you to precisely specify the placement of ActiveX controls on a Web page. The ActiveX HTML Layout Control comes complete with grid lines and controls that snap into place. When pages are laid out using this control, the user sees your exact, unchanged design.

When the layout control is used, the Web page's HTML file will ordinarily contain only one <OBJECT>tag. This tag defines the layout control itself. One of the tag's attributes is a pointer to another file, with an ALX extension, that stores the page's remaining ActiveX control <OBJECT>tags. The ALX file is really an HTML file, processed by the layout control rather than the Web browser.

Coming soon

Contributing Editor Karen Kenworthy is the author of Visual Basic for Applications, Revealed! (Prima Publishing, 1994) and the manager of WINDOWS Magazine forums on America Online and CompuServe. Contact Karen in the "Power Windows" topic of these areas, or care of the editor at the e-mail addresses here.

Windows Magazine, March 1997, page 239.

[ Go to March 1997 Table of Contents ]