by Jerry Honeycutt and Mark R. Brown
There are three ways to put multimedia objects into your pages: browser plug-ins, ActiveX controls, and Java applets. You'll briefly examine each in this chapter.
You'll also learn how to use HTML tags to insert any of these three kinds of multimedia "players" into your HTML documents. Let's start by looking at browser plug-ins.
When a user starts a Web browser--Netscape Communicator, for example--on her desktop, it checks the appropriate folder (see Table 14.1) to see what plug-ins are installed. Communicator makes a note of each plug-in and its MIME type, which indicates the type of file with which the plug-in is associated.
| Platform | Folder |
| MAC | Plug-ins, directly under the Netscape folder |
| Windows | Plugins, directly under the Netscape folder. |
| UNIX | /usr/local/netscape/plugins |
When the user opens a Web page that embeds a multimedia file, Communicator notes the MIME type of the file, finds a plug-in that can open that type of file (if available), and loads the plug-in, passing it the file. The drawing in Figure 14.1 illustrates this concept for you. The most important concept for you to understand is that you, as the HTML author, embed a multimedia file into your Web page, while a plug-in on the user's computer actually displays that file in the Web browser.
FIG. 14.1
You provide the data, and the user provides the plug-in.
TIP: The information contained in this section is valid for all plug-ins, whether you use the <EMBED> tag or <OBJECT> tag to insert them.
Embedded plug-ins are visible on the Web page and display inline with the rest of the Web page's content. Embedded plug-ins always occupy a rectangular area on the Web page (see Figure 14.2). You, as the HTML author, embed the multimedia file in the Web page, and the plug-in, on the user's computer, displays that file inside the Web page.
Embedded plug-ins can be hidden. That is, the HTML author can designate that the plug-in is not to display anything on the Web page. For example, you might not want to display anything on the Web page if you're embedding a sound file.
FIG. 14.2
Live3D is a Netscape plug-in for displaying VRML worlds that comes with Netscape
Communicator.
Other plug-ins are full page; they don't occupy space in the Web page itself, but occupy the entire browser window. After the user has finished interacting with the plug-in, she can click Back on Communicator's Navigation toolbar to return to the original Web page.
With the latest Web browsers, and thanks to the efforts of the World Wide Web Consortium (W3C), you have two different ways to embed plug-ins into your Web page. You can use the old sturdy <EMBED> tag, or you can use the new HTML 4.0 standard <OBJECT> tag. Making this choice is a lot harder than actually writing the HTML for either. Here are some thoughts on the subject, though, that might help you:
You have a fair amount of control over any plug-in that you embed into your Web page using the <EMBED> tag. You can control its size, for example, or whether or not the browser actually displays the plug-in. Many plug-ins also allow you to set additional attributes that control them. Table 14.2 describes each attribute of this tag.
| Attribute | Description |
| ALIGN=value | LEFT--align text flush left RIGHT--align text flush right TOP--align text with top BOTTOM--align text with bottom |
| BORDER=num | Width of frame's border in pixels |
| FRAMEBORDER=value | NO--do not draw border around frame |
| HEIGHT=num | Height of frame as defined by UNITS |
| HIDDEN | Makes the plug-in invisible on the page |
| HSPACE=num | Width of left and right margin in pixels |
| NAME=name | Name of the embedded object |
| PALETTE=value | FOREGROUND--foreground colors BACKGROUND--background colors |
| PLUGINSPAGE=URL | URL of the Web page that contains instructions for installing the plug-in if the user does not have it installed |
| SRC=URL | URL that indicates the location of the embedded multimedia data file; if you don't use this attribute, use TYPE |
| TYPE=type | MIME type of the embedded object, which determines the plug-in that loads; use TYPE for plug-ins that require no data |
| UNITS=value | PIXELS--use pixels as a unit of measurement, while EN--use half the normal display font point size |
| VSPACE=num | Width of top and bottom margin in pixels |
| WIDTH=num | Width of frame as defined by UNITS |
Many plug-ins also have private attributes. Communicator looks for all of the attributes described in Table 14.2 when it parses the <EMBED> tag, but it ignores other attributes. When Communicator loads the associated plug-in, it passes the plug-in all of the attributes it found. For example, many audio plug-ins have a private attribute called AUTOSTART, which indicates whether or not you want the plug-in to immediately start playing the sound file when it loads.
W3C has made the <OBJECT> tag an official part of HTML 4.0. Many vendors, however, including Microsoft and Netscape, had already adopted the <OBJECT> tag before the specification was finished. You can get the full details on this tag at W3C's Web site: http://www.w3.org/pub/WWW/TR/WD-object.
Using the <OBJECT> tag is just a bit more complicated than using the <EMBED> tag. You have to form the <OBJECT> tag as described in Table 14.3, specify any required parameters using the <PARAM> tag, and provide content for those users who have browsers with no <OBJECT> support or who don't have the required plug-in. This topic is covered in depth later in this chapter, in the ActiveX section.
| Attribute | Description |
| BORDER=num | Width of frame's border in pixels |
| CLASSID=URL | URL of the plug-in, on the Internet, for installing the plug-in if the user does not have it installed |
| DATA=URL | URL of the object's data file |
| HEIGHT=num | Height of frame as defined by UNITS |
| HSPACE=num | Width of left and right margin in pixels |
| ID=name | Name of the embedded object |
| TYPE=type | MIME type of the embedded object, which determines the plug-in that loads; use TYPE for plug-ins that require no data |
| TYPE=type | MIME type of the object's data file |
| VSPACE=num | Width of top and bottom margin in pixels |
| WIDTH=num | Width of frame as defined by UNITS |
Sandwiching <PARAM> Tags You can provide additional properties to the plug-in, if the plug-in supports them, using the <PARAM> tag. You embed a <PARAM> tag between the beginning and ending <OBJECT> tags for each property you want to provide to the plug-in, like this:
<OBJECT definition> <PARAM NAME="LOOP" VALUE="TRUE"> </OBJECT>
Using the <PARAM> tag is similar to using private properties with the <EMBED> tag. The NAME attribute is the name of the property and the VALUE attribute is the actual value that you want to assign to that name. Thus, the following PARAM tag is equivalent to the AUTOSTART attribute in the <EMBED> tag you see just below it: <PARAM NAME=AUTOSTART VALUE=TRUE>
<EMBED blah-blah-blah AUTOSTART=TRUE> Providing Alternate Content (Apology) Not all browsers or users are created equal. Some browsers won't know what in the world to do with the <OBJECT> tag. Still, some users won't have access to a plug-in that you've embedded into your Web page. The authors of the <OBJECT> tag working draft have created a way for you to handle this situation, however: alternative content. Some folks also call the alternative content the apology section. Here's how it works:
Consider Listing 14.1, for example, which is an example of inserting a multimedia file into a Web page. If the browser doesn't do the <OBJECT> tag, all it's going to parse is the <A>, <IMG>, and </A> tags. If the browser does support the <OBJECT> tag, but it doesn't have a plug-in for MOX files, it ignores the <OBJECT> and <PARAM> tags, parsing the same tags as in the previous case. Last, if the browser does support the <OBJECT> tag and it has a plug-in for MOX files, it parses the <OBJECT> and <PARAM> tags, ignoring everything else.
<OBJECT DATA=MYFILE.MOX WIDTH=100 HEIGHT=100>
<PARAM NAME=AUTOSTART VALUE=TRUE>
<A HREF="get-mox.htm">
<IMG SRC=need-mox.gif WIDTH=100 HEIGHT=100>
</A>
</OBJECT>
A Word with Our Lawyer, Please?
Copyright laws protect the author of a work from other folks making illegal copies of it. You can't photocopy a magazine article or make a duplicate of a musical CD, for example, without violating the copyright law. If you do, the organization that owns the copyright can pursue the matter in court (translation: sue the pants off of you).
The copyright laws apply to electronic expression as much as they do to other forms. Thus, the Web pages and multimedia files you find on the Internet can have copyrights with just as much weight as the copyright on this book. Ignorance isn't an excuse, either. Just because you didn't know that a file was copyrighted doesn't protect you when the copyright hits the fan.
So, having scared you a bit, how do you know if an image is indeed copyrighted? It's not quite as cut-and-dry as looking for a copyright symbol (audio clips don't have one). In fact, there is no requirement that work contain a copyright symbol in order to be protected by the copyright laws. You can check a few other places for a file's copyright status, however:
- Look for a copyright notice in the document that originally contained the file. This is the most likely place to find such a notice.
- If you're using a video from a library, check the library's license agreement to see what kind of rights you have for redistribution.
- Look for any comments embedded within the file that might include a copyright notice. Most audio and video editors allow you to edit and view embedded comments.
Before you can jazz up your Web page with multimedia, you have to make or find it. Making your own multimedia content isn't always practical, especially for a novice. You have to work within a third-party authoring environment such as a video editor and sometimes have to purchase additional hardware such as a video camera. You can learn more about creating your own multimedia content in Part IV, "Serving Multimedia Content."
Using free or store-bought multimedia libraries is the quickest route to multimedia bliss. Most multimedia libraries come with a combination of graphical images, sound clips, and video clips. Some libraries do include a handful of Shockwave files, too. While you can find a whole host of different plug-ins, you'll mostly use audio and video in your Web page. It's a reality for most HTML authors, and that's good for two reasons:
NOTE: To see a list of those types of plug-ins that come with Communicator, choose Help, About Plug-ins from Communicator's main menu. You'll see a list similar to that shown in Figure 14.3.
FIG. 14.3
Click click here, at the top of this page, to see a list of plug-ins available
at Netscape's Web site.
Netscape Communicator comes with an audio plug-in called LiveAudio. As shown in Figure 14.4, LiveAudio has a very simple user interface that the user can interact with to stop, play, and pause the audio clip, as well as adjust the volume. LiveAudio handles a majority of the sound files you'll find on the Internet. It definitely handles WAV and MIDI files, which takes care of most of the audio content you'll embed into your Web page.
FIG. 14.4
LiveAudio sports controls that anyone who has ever used a tape deck can understand.
NOTE: A user must have a sound card and speakers installed in her computer in order to hear any audio clips embedded in your Web page. Chances are good that most users do have a sound card these days, though.
You can use either the <EMBED> or the <OBJECT> tag to embed an audio file into your Web page. Listing 14.2 shows you an example of a Web page that uses <EMBED>. The SRC, WIDTH, and HEIGHT attributes are the same ones you learned about earlier in this chapter. If you want the user to see the audio controls, you must use the WIDTH and HEIGHT attributes. The best size for the controls is 144 pixels wide and 60 pixels high.
<HTML>
<HEAD>
<TITLE>Embedding audio using EMBED</TITLE>
</HEAD>
<BODY>
<EMBED SRC=EXAMPLE.WAV HEIGHT=60 WIDTH=144>
</BODY>
</HTML>
Listing 14.3 shows you the same example using the <OBJECT> tag. The parameters are the same as those for the <EMBED> tag, except that you use the DATA attribute instead of the SRC attribute to specify the source file.
<HTML>
<HEAD>
<TITLE>Embedding audio using OBJECT</TITLE>
</HEAD>
<BODY>
<OBJECT DATA=EXAMPLE.WAV WIDTH=144 HEIGHT=60>
</OBJECT>
</BODY>
</HTML>
LiveAudio supports several private attributes, each described in Table 14.4.
| Attribute | Description |
| AUTOSTART=value | TRUE--plays automatically FALSE--doesn't play automatically |
| AUTOLOAD=value | TRUE--load clip automatically FALSE--don't load clip automatically |
| STARTTIME="mm:ss" | Start time from beginning of clip |
| ENDTIME="mm:ss" | End time from beginning of clip |
| VOLUME=num | Initial value as a percentage |
| CONTROLS=value | CONSOLE--display the console SMALLCONSOLE--display small console PLAYBUTTON--display play button PAUSEBUTTON--display pause button STOPBUTTON--display stop button VOLUMELEVER--display volume slider |
TIP: Choose MIDI files over WAV files every chance you get. For the same file size, you can get a much longer audio clip from a MIDI file than you can from a WAV file. It's more economical.
Like audio, you can use the <EMBED> or <OBJECT> tag to embed a video into your Web page. Listing 14.4 shows you an example of a Web page that uses the <EMBED> tag to embed an AVI file into a Web page. The SRC, WIDTH, and HEIGHT attributes are the same ones you learned about earlier in this chapter.
<HTML>
<HEAD>
<TITLE>Embedding a video using EMBED</TITLE>
</HEAD>
<BODY>
<EMBED SRC=EXAMPLE.AVI WIDTH=150 HEIGHT=100>
</BODY>
</HTML>
Listing 14.5 shows you the same example using the <OBJECT> tag. Note that the parameters are the same as those for the <EMBED> tag, except that you use the DATA attribute instead of the SRC attribute to specify the source file. In this example, you see the <IMG> tag sandwiched in the object, which provides alternative content for users who can't display videos. Figure 14.5 shows what this video looks like in Communicator.
<HTML>
<HEAD>
<TITLE>Embedding a video using OBJECT</TITLE>
</HEAD>
<BODY>
<OBJECT DATA=EXAMPLE.AVI WIDTH=150 HEIGHT=100>
<IMG SRC=EXAMPLE.GIF WIDTH=150 HEIGHT=100>
</OBJECT>
</BODY>
</HTML>
FIG. 14.5
To access the controls when they're not visible on the Web page, right-click the
video.
AVI Files (LiveVideo) LiveVideo, which is the plug-in for AVI files, has some additional private attributes that you can use to better control how the plug-in displays in the browser. You see those attributes in Table 14.5.
| Attribute | Description |
| AUTOSTART=value | TRUE-- video starts automatically FALSE--video doesn't start automatically |
| LOOP=value | TRUE--video plays repeatedly FALSE--video plays one time |
| CONTROLS=value | TRUE--plug-in shows video controls FALSE--plug-in doesn't show video controls |
TIP: Turn your favorite AVI video into an animated GIF. Download the GIF Construction Set from Ziff-Davis (http://www.hotfiles.com), which converts an AVI file into an animated GIF frame by frame. It cuts the size of the file in half, and allows the user to see the animation as the file loads from the Web server.
MOV Files (QuickTime) The QuickTime plug-in included with Netscape Communicator also has some private attributes that you can specify to control how it displays in the browser. You see those attributes in Table 14.6.
| Attribute | Description |
| AUTOPLAY=value | TRUE--automatically start FALSE--don't automatically start |
| CONTROLLER=value | TRUE--display a toolbar FALSE--don't display a toolbar |
| LOOP=value | TRUE--play video repeatedly FALSE--play video a single time |
| PLAYEVERYFRAME=value | TRUE--play while downloading FALSE--don't play while downloading |
| HREF=URL | URL to which the video is linked |
| TARGET=FRAME | Targeted link for the video |
Be considerate of those users who have slow connections to the Internet. A user who has a 28.8K connection to the Internet, which is very common, will wait over four minutes for a 1M video to download. A 1M video, on the other hand, plays only for a few seconds; thus, you're asking a user to wait four minutes to view a few seconds of video--blah. The user will feel cheated unless it's a pretty spectacular video clip. Mark Brown calls this the wait/reward ratio. Think of it this way: if the only reward you get after waiting seven hours for Thanksgiving dinner is Kentucky Fried Chicken, you'd feel a bit cheated.
The solution? Provide a link on your Web page to the video clip. If a user wants to see the video clip, she can click on the link--it's her choice. For example, you might add a link to your Web page, with a warning, that looks something like this: Take a look at this AVI video of my new Yorkie.
This video is 1M in size. At 14.4K, it'll take over nine minutes to download. At 28.8K it'll take over four minutes.
You'll need to use a third-party plug-in if you want to embed multimedia content into your Web page other than video, audio, and VRML--for example, Shockwave.
Netscape maintains a fairly comprehensive list of plug-ins. You'll find this list at http://home.netscape.com/comprod/products/navigator/version_2.0/plugins. Click one of the categories (there are six: 3D and Animation; Business and Utilities; Presentations; Audio/Video; Image Viewers; and What's New), and you'll see a list of plug-ins. For each plug-in, you'll see a description and links to the vendor and example Web pages.
However, the ultimate resource for plug-ins is BrowserWatch (http://browserwatch.iworld.com/plug-in.html, shown in Figure 14.6). You can view the list by different categories: multimedia, graphics, sound, document, productivity, or VRML. You can also view the list of plug-ins by platform: Macintosh, OS/2, UNIX, and Windows.
FIG. 14.6
The BrowserWatch Web site provides links to each plug-in's vendor, as well as links
to example Web pages.
TIP: If you use a plug-in that the user isn't likely to already have installed, use the PLUGINSPAGE attribute to point Communicator to the download page for that plug-in. Doing so will help Communicator install the plug-in more or less automatically.
ActiveX controls are small applications that run only on Windows platforms and only in Microsoft Internet Explorer (IE).
That's a bit of an oversimplification, actually. There is a plug-in that lets ActiveX controls run in Netscape Navigator, if you really want to use them. However, it's best to assume if you use ActiveX controls that your target audience will be using IE on a Windows platform.
That having been said, it should be noted that there is one very good reason for using ActiveX controls in your HTML documents: if you know they're going to be viewed on a Windows system in Internet Explorer, ActiveX controls are the fastest, most efficient objects you can use for multimedia and interactive controls. Why? Because ActiveX controls are written to run natively on those machines. Where plug-ins are often big and unwieldy, and Java applets must be interpreted before they are run, ActiveX controls download automatically, reside on your system, and run efficiently under Windows.
You use the <OBJECT> tag to insert ActiveX objects into an HTML document. With regard to ActiveX controls, the <OBJECT> tag identifies the control you're using. That is, the <OBJECT> tag identifies which control on the user's computer you want to use and gives that instance of the control a name, which you can use in scripts. That's all.
In the following sections, you'll learn much more about each of the <OBJECT> tag's attributes as they relate to ActiveX controls. Before doing that, however, take a look at how you use the <OBJECT> tag in a Web page. In its simplest form, the <OBJECT> tag looks something like this:
<OBJECT
classid="clsid:1A771020-A28E-11CF-8510-00AA003B6C7E"
id=Track1
width=400
height=2
align=left>
<IMG SRC="noobject.gif">
<PARAM NAME="Image" VALUE="image.gif">
</OBJECT>
The CLASSID attribute uniquely identifies, on the computer, the control you're using. Every control installed on the user's computer is installed in the Registry. The control's CLASSID is the number that Windows uses to identify that control. You can think of the CLASSID as a name that is guaranteed to be unique. You'll learn more about this attribute later. In this case, we're using the View Tracker control. You use the ID attribute to identify the control to the scripts in your Web page. WIDTH, HEIGHT, and ALIGN work the same as with other types of tags; they specify the size and location of the control on the Web page.
ON THE WEB: You can get a good idea as to what types of ActiveX controls are available by going to http://www.microsoft.com/activex/gallery. If you're running Internet Explorer, several useful ActiveX controls were already installed along with IE.
You will need to set the properties of the ActiveX controls you put on the Web page in order to control its appearance or function. For example, you need to give the Stock Ticker control the URL of the text file it should use for data. You need to provide the Label control with the text it should display. The only way to know for sure which properties each control requires is to check the control's documentation. You can also use the ActiveX Control Pad to set a control's properties.
ON THE WEB: The ActiveX Control Pad is a free tool available for downloading from the Microsoft site at http://www.microsoft.com.
So, how do you set these properties? You use the <PARAM> tag to assign a value to a named property within the control. This works very much like Visual Basic property sheets. Note the <PARAM> tag has no closing </PARAM> tag. Table 21.2 describes the attributes you use with the <PARAM> tag. You frequently need to use only the NAME and VALUE attributes.
| Attribute | Description |
| NAME | Defines the name of the property. An ActiveX control can treat the name as case-sensitive. |
| VALUE | Specifies the value of the property identified in NAME. |
| VALUETYPE | Can be one of REF, OBJECT, or DATA. |
| TYPE | Refers to Internet Media Type (RFC 1590) of the item referred to in the VALUE field when VALUETYPE = REF. |
NAME, VALUE, and TYPE are self-explanatory. Table 21.3 describes the settings you can use with VALUETYPE.
| Value | Meaning |
| REF | VALUE contains an URL. |
| OBJECT | VALUE contains URL of another OBJECT. |
| DATA | VALUE contains string data. |
<OBJECT
id=iemenu1
classid="clsid:0482B100-739C-11CF-A3A9-00A0C9034920"
width=1
height=1
align=left
hspace=0
vspace=0
>
<PARAM NAME="Menuitem[0]" VALUE="First Choice">
<PARAM NAME="Menuitem[1]" VALUE="Second Choice">
<PARAM NAME="Menuitem[2]" VALUE="Third Choice">
<PARAM NAME="Menuitem[3]" VALUE="Fourth Choice">
<PARAM NAME="Menuitem[4]" VALUE="Firth Choice">
</OBJECT>
The <OBJECT> tag has a number of attributes you can use. The sections that follow describe each attribute. In reality, however, you'll find yourself using only a few: CLASSID, ID, HEIGHT, WIDTH, ALIGN, and, possibly, CODEBASE.
ALIGN You use the ALIGN attribute to specify where to place the object. You can position an object relative to the text line or on its own on the left, right, or center of the page. Table 20.4 describes the settings you can use to align the object with the text line. Table 21.5 also describes the settings you can use to align the object with the page.
| Setting | Description |
| TEXTTOP | The top of the object is aligned with the top of the current font. |
| MIDDLE | The middle of the object is aligned with the baseline of the text line. |
| TEXTMIDDLE | The middle of the object is aligned with the middle of the text line. |
| BASELINE | The bottom of the object is aligned with the baseline of the text line. |
| TEXTBOTTOM | The bottom of the object is aligned with the bottom of the current font. |
| Setting | Description |
| LEFT | The object is aligned with the left side of the Web page and text flows around the right side of the object. |
| CENTER | The object is aligned in the center of the Web page and the text starts on the line following the object. |
| RIGHT | The object is aligned with the right side of the Web page and text flows around the left side of the object. |
BORDER When you use an object as part of a hypertext link, you can specify whether or not the object has a border. The BORDER attribute specifies the width of the border around the object. If you don't want a border around the object, set this attribute to 0, like this: BORDER=0.
CLASSID and CODEBASE You use CLASSID to refer to the ActiveX control to be placed within the object's borders. There are several different ways to indicate the object to be inserted here. ActiveX uses the clsid: URL scheme to specify the ActiveX class identifier.
ON THE WEB: For further information on the clsid: URL scheme, see http://www.w3.org/pub/WWW/Addressing/clsid-scheme.
The best way to obtain the CLSID for an ActiveX control is to look at the control's documentation. You can look up Microsoft's ActiveX controls at Microsoft's ActiveX Gallery. Alternatively, use the ActiveX Control Pad to insert an ActiveX control in your Web page so you don't have to worry about the CLSID. If the CLASSID attribute is missing, ActiveX data streams will include a class identifier that can be used by the ActiveX loader to find the appropriate control.
The CODEBASE attribute can be used to provide an URL from which the control can be obtained. If the control is already installed on the user's computer, the browser will do nothing with this attribute. If the control isn't installed on the user's computer, however, the browser will try to download the control from the URL in CODEBASE and install it.
NOTE: You can also get the CLASSID for an ActiveX control from the Windows Registry, like this:
1. Open the Registry Editor. Choose Run from the Start menu, type regedit, and press Enter.
2. Locate a control under HKEY_CLASSES_ROOT, such as Internet.Gradient or Internet.Label.
3.ote the default value of the clsid subkey for that control. This is the string you use in the CLASSID attribute.
You can learn more about clsids in Special Edition Using the Windows 95 Registry or Windows 95 Registry and Customization Handbook by Que.
CODETYPE The CODETYPE attribute is used to specify the Internet Media Type for the code pointed to by the CLASSID attribute. Browsers use this value to check the type of code before downloading it from the server. Thus, the browser can avoid a lengthy download for those objects that it doesn't support. Currently, the CODETYPE attribute is supported in a limited fashion in Internet Explorer 3.0. Microsoft has indicated that TYPE will be implemented for all relevant MIME types.
DATA The DATA attribute contains an URL that points to data required by the object, for instance, a GIF file for an image. Internet Explorer currently supports the DATA attribute.
DECLARE You'll use the DECLARE attribute to tell the browser whether to instantiate the object or not. If the DECLARE attribute is present, it indicates the object should not be instantiated until something references it. That is, the browser will note the declaration of the object, but won't actually load it until you reference it.
HEIGHT The HEIGHT attribute defines the height, in pixels, to make available to the ActiveX control when rendered by the browser. The Web browser may (or may not) use this value to scale an object to the requested height.
HSPACE The HSPACE attribute defines the amount of space, in pixels, to keep as white space on the left and right as a buffer between the ActiveX control and surrounding page elements. The Web browser may (or may not) use this value to allocate white space.
ID The ID attribute defines a document-wide identifier. This can be used for naming positions within documents. You also use the control's ID to reference it in scripts.
NAME You use the NAME attribute to indicate whether an object wrapped in a <FORM> tag will be submitted as part of the form. If you specify NAME, the Web browser submits the VALUE property of the object to the host. If you don't specify NAME, the ActiveX control is assumed to be decorative and not functional in the form.
STANDBY STANDY is a short string of text the browser displays while it loads the ActiveX control.
TYPE The TYPE attribute is used to specify the Internet Media Type for the data specified by the DATA attribute.
ON THE WEB: You can learn more about Internet Media Types by referring to RFC 1590. You can get RFC 1590 from the Internet at ftp://ds.internic.net/rfc/rfc1590.txt.
USEMAP The value in USEMAP specifies an URL for a client-side imagemap.
VSPACE The VSPACE attribute defines the amount of space in pixels to keep as white space on the top and bottom as a buffer between the ActiveX control and surrounding page elements. The Web browser may (or may not) use this value to allocate the requested white space.
WIDTH The WIDTH attribute defines the width, in pixels, to make available to the ActiveX control when rendered by the browser. The Web browser may (or may not) use this value to scale an object to the requested width.
Now, we're getting to the meat of the matter. You've learned how to insert ActiveX controls into your Web page by using the <OBJECT> tag. Now, you need to learn how to interact with those controls by using a scripting language. In the sections that follow, you'll learn how to handle the events that are fired by a control. You'll also learn how to get and set a control's properties from your scripts. Incidentally, my scripting language of choice is VBScript, so that's what I'm using in these examples. The JavaScript versions of these examples aren't much different, however.
ActiveX controls act like and quack like the elements on a form. That is, you interact with each ActiveX control's properties, methods, and events in exactly the same way in which you interact with a form's element. You handle a control's events when the control needs attention; you call a control's methods, and you get and set the control's properties.
You can use a couple of different methods of handling events for forms and elements (event-procedures, inline event handlers, and so on). One such method is to use the FOR/EVENT attributes of the SCRIPT tag.
The FOR and EVENT attributes let you associate a script with any named object in the HTML file and any event for that object. Take a look at the following:
<SCRIPT LANGUAGE="VBScript" FOR="btnButton" EVENT="Click">
<!--
window.alert( "Ouch! You clicked on me." )
-->
</SCRIPT>
<OBJECT ID="btnButton" WIDTH=96 HEIGHT=32
CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
<PARAM NAME="Caption" VALUE="Click Me">
<PARAM NAME="Size" VALUE="2540;847">
</OBJECT>
You can add this code to an HTML file, and you'll see a button (with an ID of btnButton) that executes the script when you click it. Take a look at the <SCRIPT> tag. It contains the FOR and EVENT attributes that define the object and event associated with that script. FOR="btnButton" EVENT="Click" says that when an object named btnButton fires the Click event, every statement in this script is executed.
Some events pass arguments to the event handlers. How do you handle arguments when you're handling the event by using the FOR/EVENT syntax? Like the following:
<SCRIPT LANGUAGE="JavaScript" FOR="btnButton" EVENT= "MouseMove(shift, button, x, y)">
The enclosed script can then use any of the parameters passed to it by the MouseMove event.
TIP: Once you've specified a language in your HTML file, you don't need to do it again. Your browser defaults to the most recently used language in the HTML file. You can put <SCRIPT LANGUAGE="VBScript"> </SCRIPT> at the very beginning of your HTML file one time and forget about it. The rest of the scripts in your file will use VBScript.
You just saw the Click event. ActiveX controls support a wide variety of other events. The best way to know for sure which events a control supports is to consult the control's documentation or the ActiveX Control Pad's documentation. For your convenience, however, the following list describes the most prevalent and useful events:
NOTE: Often, the easiest way to see the events, properties, and methods that an ActiveX control supports is to insert it into a Web page by using the ActiveX Control Pad and pop open the Script Wizard. The Script Wizard lists all of the control's events in the left-hand pane. It lists all of the control's properties and methods in the right-hand pane.
Many objects let the user input data. For example, the user can choose an item from a list, type text into an edit box, or click a check box. What good are those objects if you can't get and set their value? Not much. You read the value of most elements by using the object's value property in an assignment or logical expression. The following example assigns the text the user typed into the txtTextBox control to a variable called str. The next example compares the text the user typed into the txtTextBox with the word "Howdy".
str = txtTextBox.value If txtTextBox.value = "Howdy" Then
You can also set the value of an element from within a script by assigning a string to the element's value, as follows:
txtTextBox.value = "New Contents of the Text Box"
The value property is the default property for most ActiveX controls that accept user input. Thus, you can use them in an expression without explicitly using the value property, like this:
alert txtTextBox txtTextBox = "New Contents of the Text Box"
Sun Microsystems's object-oriented programming language Java is creating a lot of interest on the Web. You can use Java to create dynamic, interactive Web pages. You don't have to be a Java programmer to use Java applets--many are available on the Web for free.
The Java language is object-oriented and very similar to C++. It was designed to take many of the best features of C++ while simplifying it to make writing programs easier.
Programs are normally created to run on only one type of operating system. Windows 95 programs have been specifically created to run on systems running the Windows 95 operating system and will not run on the Macintosh or on a UNIX system. Java programs, however, are intended to be platform independent. Java programs are compiled into a series of bytecodes that are interpreted by a Java interpreter. After a Java program has been compiled, it can run on any system with a Java interpreter. You do not need to recompile it.
This capability makes Java an ideal language for programs on the Web. With so many different systems on the Web, creating programs that will work with all of them is very difficult. Because Java programs are platform independent, programs are no longer restricted to running on one platform. They can run on any platform to which Java has been ported.
Java has been ported to many different platforms. Sun has ported Java to Solaris, Windows NT, Windows 95, and the Macintosh. Other companies have ported Java to Silicon Graphics IRIX, IBM OS/2, IBM AIX, and Linux.
Java programs that can be embedded into WWW pages are called Java applets. To run applets from Web pages, you must have a browser that supports Java, such as HotJava, Netscape, or Internet Explorer.
If you want to write your own Java applets, you should download the Java Development Kit from Javasoft or purchase Microsoft's Visual J++. Javasoft is available for free on the Web. You can download it from the Javasoft Home page at http://www.javasoft.com.
Microsoft Visual J++ is relatively inexpensive. You can purchase it at most computer retailers such as CompUSA or Computer City.
Now take a look at a few examples. Listing 14.1 shows the code for a simple Java applet.
import java.applet.*;
import java.awt.*;
class HelloWorld extends Applet {
public void paint(Graphics g) {
g.drawString("Hello World!",20,20);
}
}
When you place this applet into a page and run it, it prints Hello World!. But, before you can use it in a page, you must compile the applet using javac, the Java compiler. The files that Javac creates are called Java class files. A class file is the platform-independent object file that the browser retrieves when downloading a Java applet.
To use this applet on an HTML page, you have to describe it using the <APPLET> tag. Listing 14.2 shows an HTML page that loads this example applet.
<HTML> <HEAD> <TITLE>HelloWorld Applet</TITLE> <BODY> <APPLET CODE=HelloWorld HEIGHT=100 WIDTH=150> </APPLET> </BODY> </HTML>
The <APPLET> and </APPLET> tags act as a container for the Java applet definition. They indicate to the browser that a Java applet should be loaded. The CODE attribute tells the browser which Java applet should be downloaded. The browser reserves space in the page by using the WIDTH and HEIGHT attributes, just as it reserves space for the IMG element. Then the browser downloads the Java class specified in the CODE attribute and begins running the applet.
In this case, the applet being downloaded is HelloWorld, and it reserves a space 150 pixels high and 200 pixels wide in the page. Figure 14.7 shows what the page looks like when the browser loads it.
FIG. 14.7
A simple Java applet.
Browsers that can't display Java applets don't display anything when this page is loaded. To prevent this situation from happening, you can place HTML markup or text between the <APPLET> and </APPLET> tags. Browsers that can't display Java applets display the HTML markup instead. You can use this approach to tell visitors to your pages what they would have seen if the applet had loaded.
Browsers that can display applets don't display any of this HTML markup. Listing 14.3 shows an HTML page with alternative HTML markup.
<HTML> <HEAD> <TITLE>HelloWorld Applet</TITLE> <BODY> <APPLET CODE=HelloWorld HEIGHT=100 WIDTH=150> <H1>WARNING!</H1> The browser you are using is unable to load Java Applets! </APPLET> </BODY> </HTML>
Figure 14.8 shows how this page looks in a browser that doesn't support Java applets.
FIG. 14.8
Instead of showing the Java applet, the HTML text is displayed. This way, you can
alert visitors to your page about what they're missing.
TIP: You aren't restricted to writing Web applets with Java. You can write full applications with it as well. The HotJava browser and the Java compiler are both written in Java.
The CODE, WIDTH, and HEIGHT attributes of the <APPLET> tag are all required. You also can use other attributes in the <APPLET> tag. Table 14.1 shows the attributes available and their functions.
| Attribute | Function |
| CODE | Defines the applet class to load. (required). |
| WIDTH | Defines the width in pixels of the area in the HTML page to reserve for the applet. (required). |
| HEIGHT | Defines the height in pixels of the area in the HTML page to reserve for the applet. (required). |
| ALT | Defines the alternate text to display if the applet tag is understood, but applet loading is turned off or not supported. |
| CODEBASE | Defines the directory where the classes for the applet are stored. If this attribute is not specified, the directory of the HTML page is searched. |
| NAME | Defines the name of this instance of an applet. This attribute can be used by an applet to find another applet on the same page. |
| ALIGN | Defines how this applet is aligned in the HTML page. Any of the ALIGN options discussed in previous chapters are legal here. |
| VSPACE | Defines how many pixels of space are reserved above and below the applet. |
| HSPACE | Defines how many pixels of space are reserved on either side of the applet. |
As of HTML 4.0, the <OBJECT> tag is actually the "preferred" method of inserting plug-ins, ActiveX controls, and Java applets into HTML documents. However, the <EMBED> and <APPLET> tags will be supported for backwards compatibility.
Using the <OBJECT> tag to insert a Java applet is actually quite similar to using the <APPLET> tag method. Many of the same attributes are supported. Here's a simple example:
<OBJECT CLASSID="java:program.start" HEIGHT=100 WIDTH=100></OBJECT>
This example adds the CODETYPE and CODEBASE attributes, and includes an added PARAM element:
<OBJECT CODETYPE="application:java-vm" CODEBASE="http://hostname/pathname/" CLASSID="java:program.start" HEIGHT=100 WIDTH=100> <PARAM NAME="options" VALUE="abc"> </OBJECT>
In short, using the <OBJECT> tag with Java applets isn't much different from using it with ActiveX objects or plug-ins.
© Copyright, Macmillan Computer Publishing. All rights reserved.