Embedded Content (HTML & XHTML: The Definitive Guide, 4th Edition)

12.2.1. The <object> Tag

The <object> tag was originally implemented by Microsoft to support its ActiveX applets and only later added Java support. In a similar manner, Netscape initially supported the alternative <embed> and <applet> tags for inclusion objects and later provided limited support for the <object> tag.

All that jostling for position by the browser giants made us nervous, and we were hesitant in previous editions of this book to even suggest that you use <object> at all. We now heartily endorse it, based on the strength of the HTML 4 and particularly the XHTML standards. Although not fully supported yet, expect <object> to be well supported soon by the popular browsers and expect the alternative <embed> and <applet> tags to be less supported, if not completely ignored, by future HTML 4/XHML-compliant browsers.

<object>

Function:

Embed an object or applet in a document

Attributes:

ALIGN
ONKEYDOWN

ARCHIVE
ONKEYPRESS

BORDER
ONKEYUP

CLASS
ONMOUSEDOWN

CLASSID
ONMOUSEMOVE

CODEBASE
ONMOUSEOUT

CODETYPE
ONMOUSEOVER

DATA
ONMOUSEUP

DECLARE
SHAPES

DIR
STANDBY

HEIGHT
STYLE

HSPACE
TABINDEX

ID
TITLE

LANG
TYPE

NAME
USEMAP

NOTAB
VSPACE

ONCLICK
WIDTH

ONDBLCLICK

End tag:

</object>; never omitted

Contains:

object_content

Used in:

text

The contents of the <object> tag may be any valid HTML or XHTML content, along with <param> tags that pass parameters to an applet. If the browser can retrieve the requested object and successfully process it, either by executing the applet or by processing the object's data with a plug-in (helper) application, the contents of the <object> tag, except for the <param> tags, are ignored. If any problem occurs during the retrieval and processing of the object, the browser won't insert the object into the document, but instead will display the contents of the <object> tag, except for the <param> tags. In short, you should provide alternative content for browsers that cannot handle the <object> tag or if the object cannot be successfully loaded.

12.2.1.1. The classid attribute

Use the classid attribute to specify the location of the object, typically a Java class, that you want included by the browser. The value may be an absolute or relative URL of the desired object. Relative URLs are considered to be relative to the URL specified by the codebase attribute if it is provided; otherwise they are relative to the current document URL.

For example, to execute a clock Java applet contained in a file named clock.class, you might include in your HTML document the code:

<object classid="clock.class">
</object>

The browser will locate the code for the applet using the current document's base URL. Hence, if the current document's URL is:

http://www.kumquat.com/harvest_time.html

the browser will retrieve the applet code for our clock class example as:

http://www.kumquat.com/clock.class

12.2.1.2. The codebase attribute

Use the codebase attribute to provide an alternative base URL from which the browser will retrieve an object. The value of this attribute is a URL pointing to a directory containing the object referenced by the classid attribute. The codebase URL overrides, but does not permanently replace, the document's base URL, which is the default if you don't use codebase. Section 6.2, "Referencing Documents: The URL"

Now, continuing with our previous examples, suppose your document comes from http://www.kumquat.com, but the clock applet is kept in a separate directory named classes. You cannot retrieve the applet by specifying classid="classes/clock.class". Rather, include the codebase attribute and new base URL:

<object classid="clock.class" codebase="http://www.kumquat.com/classes/">
</object>

which resolves to the URL:

http://www.kumquat.com/classes/clock.class

Although we used an absolute URL in this example, you also can use a relative URL. For instance, applets typically get stored on the same server as the host documents, so we'd usually be better off, for relocation's sake, specifying a relative URL for the codebase, such as:

<object code="clock.class" codebase="/classes/">
</object>

The classid attribute is similar to the code attribute of the <applet> tag, providing the name of the file containing the object and is used in conjunction with the codebase attribute to determine the full URL of the object to be retrieved and placed in the document.

12.2.1.3. The archive attribute

For performance reasons, you may choose to preload collections of objects contained in one or more archives. This is particularly true of Java-based applications, where one Java class will rely on many other classes to get its work done. The value of the archive attribute is a quote-enclosed list of URLs, each pointing to an archive to be loaded by the browser before rendering or executing the object.

12.2.1.4. The codetype attribute

The codetype attribute is required only if the browser cannot determine an applet's MIME type from the classid attribute or if the server does not deliver the correct MIME type when downloading an object. This attribute is nearly identical to type (Section 12.2.1.6, "The type attribute"), except that it is used to identify program code type whereas type should be used to identify data file types.

The following example explicitly tells the browser that the object's code is Java:

<object code="clock.class" codetype="application/java">
</object>

12.2.1.5. The data attribute

Use the data attribute to specify the data file, if any, that is to be processed by the object. The data attribute's value is the URL of the file, either absolute or relative to the document's base URL or to that which you provide with the codebase attribute. The browser determines the data type by the type of object that is being inserted in the document.

This attribute is similar to the src attribute of the <img> tag in that it downloads data to be processed by the included object. The difference, of course, is that the data attribute lets you include just about any file type, not just an image file. In fact, the <object> tag expects, but doesn't require, that you explicitly name an enabling application for the object with the classid attribute, or indicate the MIME type of the file via the type attribute to help the browser decide how to process and render the data.

For example, here is an image included as an object, rather than as an <img> file:

<object data="pics/kumquat.gif" type="image/gif">
</object>

12.2.1.6. The type attribute

The type attribute lets you explicitly define the MIME type of the data that appears in the file you declare with the data attribute. (Use codetype to indicate an applet's MIME type.) If you don't provide data, or if the MIME type of the data is apparent from the URL or is provided by the server, you may omit this attribute. We recommend you include it anyway to ensure that your data is handled correctly by the browser and the included object.

For examples of data MIME types, look in your browser preferences for applications. There you'll find a list of the many file data types your browser will recognize and the application, if not the browser itself, that will process and render that file type.

12.2.1.7. The align, class, border, height, hspace, style, vspace, and width attributes

There are several attributes that let you control the appearance of the <object> display region exactly like the corresponding attributes for the <img> tag. The height and width attributes control the size of the viewing region. The hspace and vspace attributes define a margin around the viewing region. The value for each of these dimension attributes should be an actual number of pixels.

The align attribute (deprecated in the HTML 4 and XHTML standards here as well as for <img> and all other tags in lieu of style sheets, yet still popularly used) determines how the browser aligns the region in context with the surrounding text. Use top, texttop, middle, absmiddle, baseline, bottom, or absbottom to align the object display space with adjacent text, or left and right alignments for wraparound content.

The display region's dimensions often must match some other applet requirement, so be careful to check these values with the applet programmer. Sometimes, the applet may scale its display output to match your specified region.

For example, suppose our example clock applet should grow or shrink to fit nearly any size display region. We might create a square clock 100 x 100 pixels:

<object classid="clock.class" height="100" width="100">
</object>

As with <img>, use the border attribute to control the width of the frame that surrounds the object's display space when you include it as part of a hyperlink. The null value (border=0) removes the frame. Section 5.2.6, "The <img> Tag"

Use the class and style attributes, of course, to control the display style for the content enclosed by the tag and to format the content according to a predefined class of the <object> tag. Section 8.1.1, "Inline Styles: The style Attribute" Section 8.3, "Style Classes"

12.2.1.8. The declare attribute

The declare attribute lets you define an object but restrains the browser from downloading and processing it. Used in conjunction with the name attribute, this facility is similar to a forward declaration in a more conventional programming language that lets you defer download of an object until it actually gets used in the document.

12.2.1.9. The id, name, and title attributes

Use the id or name attributes to uniquely label an object. Use the title attribute to simply entitle the tag. Each attribute's value is a text string. The browser may choose to display a title to the user or may use it in some other manner while rendering the document. Use id or name to reference the object in other elements of your document, including hyperlinks and other objects.

For example, suppose you have two clock applets in your document, along with two applets the user operates to set those clocks. Provide unique labels for the clock applets using the name or id attribute, then pass those labels to the setting applets using the <param> tag, which we discuss later in this chapter:

<object classid="clock.class" name="clock1">
</object>
<object classid="clock.class" name="clock2">
</object>
<object classid="setter.class">
  <param name="clockToSet" value="clock1">
</object>
<object classid="setter.class">
  <param name="clockToSet" value="clock2">
</object>

Since we have no need to distinguish between the setter applets, we choose not to identify their instances.

The popular browsers support name and id, but earlier versions of Internet Explorer supported only name. For now, it may pay to use either name or both name and id in order to be compatible with the majority of browsers today.

12.2.1.10. The shapes and usemap attributes

Recall from our detailed discussion of hyperlinks in Chapter 6, "Links and Webs", that you can divide a picture into geometric regions and attach a hyperlink to each, creating a so-called image map. The shapes and usemap attributes for the <object> tag generalize that feature to include other object types.

The standard shapes attribute informs the browser that the <object> tag's contents are a series of hyperlinks and shape definitions. The usemap attribute and required URL value point to a <map> where you define the shapes and associated hyperlinks identical to the client-side image map discussed in Section 6.5.2, "Client-Side Image Maps".

For example, here is the image map we described in Chapter 6, "Links and Webs", rewritten in XHTML as a "shaped" object:

<object data="pics/map.gif" shapes="shapes">
  <a shape="rect" coords="0,0,49,49" href="main.html#link1"></a> 
  <a shape="rect" coords="50,0,99,49" href="main.html#link2"></a> 
  <a shape="rect" coords="0,50,49,99" href="main.html#link3"></a> 
  <a shape="rect" coords="50,50,99,99" href="main.html#link4"></a>
</object>

and as the more familiar image map:

<object data="pics/map.gif" usemap="#map1">
</object>
... 
<map name="map1">
  <area coords="0,0,49,49" href="main.html#link1" /> 
  <area coords="50,0,99,49" href="main.html#link2" /> 
  <area coords="0,50,49,99" href="main.html#link3" /> 
  <area coords="50,50,99,99" href="main.html#link4" /> 
</map>

You also may take advantage of all the attributes associated with the hyperlink, map, and <area> tags to define and arrange the image map regions. For instance, we recommend that you include alternative (alt attribute) text descriptions for each sensitive region of the image map.

12.2.1.11. The standby attribute

The standby attribute lets you display a message -- the attribute's value text string -- during the time the browser is downloading the object data. If your objects are large or if you expect slow network response, add this attribute as a courtesy to your users.

12.2.1.12. The tabindex and notab attributes

For Internet Explorer with ActiveX objects only, the notab attribute excludes the object from the document tabbing order.

As an alternative to the mouse, users also may press the Tab key to select and the Return or Enter key to activate a hyperlink or to access a form control. Normally, each time the user presses the Tab key, the browser steps to the next hyperlink or form control in the order that they appear in the document. Use the HTML 4/XHTML-standard tabindex and an integer value to modify the position the object occupies in the sequence of tab-selected elements on the page.

Browsers that support the <object> tags ignore the extraneous content inside. Of course, browsers that don't support objects don't recognize the <object> tags. Being generally tolerant of apparent mistakes, browsers usually ignore the unrecognized tag and blithely go on to display whatever content may appear inside. It's as simple as that. The following fragment tells object-incapable browser users they won't see our clock example:

<object classid=clock.class>
  If your browser were capable of handling applets, you'd see
  a nifty clock right here!
</object>

More importantly, object-capable browsers will display the contents of the <object> tag if they cannot load, execute, or render the object. If you have several objects of similar intent but with differing capabilities, you can nest their object tags. The browser will try each object in turn, stopping with the first one it can handle. Thus, the outmost object might be a full-motion video. Within that <object> tag, you might include a simpler MPEG video, and within that <object>, a simple GIF image. If the browser can handle full-motion video, your users get the full effect. If that level of video isn't available, the browser can try the simpler MPEG video stream. If that fails, the browser can just display the image. If images aren't possible, that innermost <object> might contain a textual description of the object.

12.2.2. The <param> Tag

The <param> tag supplies parameters for a containing <object> or <applet> tag. (We discuss the deprecated <applet> tag in Section 12.2.3, "The <applet> Tag (Deprecated)".)

<param>

Function:

Supply a parameter to an embedded object

Attributes:

ID

NAME

TYPE

VALUE

VALUETYPE

End tag:

None in HTML; </param> or <param ... /> with XHTML

Contains:

Nothing

Used in:

applet_content

The <param> tag has no content and, with HTML, no end tag. It appears, perhaps with other <param> tags, only between an <object> or <applet> tag and its end tag. Use the <param> tag to pass parameters to the embedded object, such as a Java applet, as required for it to function correctly.

12.2.2.1. The name and value attributes

The <param> tag has two required attributes: name or id, and value. You've seen these before with forms. Together, they define a name/value pair that the browser passes to the applet.

For instance, our clock applet example might let users specify the time zone by which it sets its hour hand. To pass the parameter identified as "timezone" with the value "EST" to our example applet, specify the parameters as:

<object classid="clock.class">
  <param name="timezone" value="EST" />
</object>

The browser will pass the name/value pairs to the applet, but that is no guarantee that the applet is expecting the parameters, that the names and values are correct, or that the applet will even use the parameters. Correct parameter names, including capitalization and acceptable values, are determined by the applet author. The wise author will work closely with the applet programmer or have detailed documentation to ensure that the applet parameters are named correctly and assigned valid values.

12.2.2.2. The type and valuetype attributes

Use the type and valuetype attributes to define the type of the parameter the browser passes to the embedded object and how that object is to interpret the value. The valuetype attribute can have one of three values: data, ref, or object. The value data indicates that the parameter value is a simple string. This is the default value. The valuetype of ref indicates that the value is a URL of some other resource on the web. Finally, object indicates that the value is the name of another embedded object in the current document. This may be needed to support inter-object communication within a document.

The value of the type attribute is the MIME media type of the value of the parameter. This is usually of no significance when the parameter value is a simple string, but can be important when the value is actually a URL pointing to some other object on the Web. In those cases, the embedded object may need to know the MIME type of the object in order to use it correctly. For example, this parameter tells the embedded object that the parameter is actually the URL of a Microsoft Word document:

<param name="document" value="http://kumquats.com/quat.doc" 
   type="application/msword" valuetype="ref" />

12.2.3. The <applet> Tag (Deprecated)

Use the <applet> tag within your document to download and execute an applet. Also, use the tag to define a region within the document display for the applet's display area. You may supply alternative content within the <applet> tag for display by browsers that do not support applets.

<applet>

Function:

Insert an application into the current text flow

Attributes:

ALIGN
ID

ALT
MAYSCRIPT

ARCHIVE
NAME

CLASS
OBJECT

CODE
STYLE

CODEBASE
TITLE

HEIGHT
VSPACE

HSPACE
WIDTH

End tag:

</applet>; never omitted

Contains:

applet_content

Used in:

text

Most applets require one or more parameters that you supply in the document to control their execution. Put these parameters between the <applet> tag and its corresponding </applet> end tag using the <param> tag. The browser passes the document-specific parameters to the applet at time of execution. Section 12.2.2, "The <param> Tag"

The <applet> tag has been deprecated in the HTML 4 and XHTML standards in deference to the generalized <object> tag, which can do the same as <applet> and much more. Nonetheless, <applet> is a popular tag and remains supported by the popular browsers. Don't expect that it will go away any time soon, but do realize that <applet> will go away.

12.2.3.1. Applet rendering

The browser creates an applet's display region in the containing text flow exactly like an inline image: without line breaks and as a single large entity. The browser downloads and executes the applet just after download and display of the document, and continues execution until the code terminates itself or when the user stops viewing the page containing the applet.

12.2.3.2. The align attribute

Like an image, you may control the alignment of an applet's display region with respect to its surrounding text. As with the <img> tag, set the align attribute's value to top, texttop, middle, absmiddle, baseline, bottom, or absbottom, as well as left and right alignments for wraparound content. Section 5.2.6, "The <img> Tag"

12.2.3.3. The alt attribute

The alt attribute gives you a way to tell users gracefully that something is missing if, for some reason, the applet cannot or will not execute on their computer. Its value is a quote-enclosed message string that, like the alt attribute for images, gets displayed in lieu of the applet itself.

The alt message is only for browsers that support applets. See Section 12.2.1.5, "The data attribute" in order to find out how to inform users of applet-incapable browsers why they can't view an applet.

12.2.3.4. The archive attribute

The archive attribute collects common Java classes into a single library that is cached on the user's local disk. Once cached, the browser doesn't need to use the network to access an applet; it retrieves the software from the local cache, thereby reducing the inherent delays of additional network activity to load the class.

The value of the archive attribute is a URL identifying the archive file. The suffix of the archive filename may be either .zip or .jar. Archived .zip files are in the familiar ZIP archive format, generated by PKZIP and many other utilities. Archived .jar files are in the Java archive format. Archived .jar files support compression and advanced features like digital signatures.

You may use the archive attribute with any <applet> tag, even if the class referenced by the tag's code attribute does not exist in the archive. If the class is not found in the archive, the browser simply attempts to retrieve the class relative to the document URL or the codebase URL, if specified.

12.2.3.5. The code and codebase attributes

The code attribute is required. Use code to specify the filename, not the URL, of the Java class to be executed by the browser. Like <object>, make the search relative to another storage location by using the codebase attribute described in Section 12.2.1.2, "The codebase attribute" or an archive, as described in Section 12.2.3.4, "The archive attribute". Also, the extension suffix of the filename should be .class. If you don't include the suffix, some browsers will append .class automatically when searching for the applet.

Here is our infamous clock example rewritten as an <applet>:

<applet code="clock.class" codebase="http://www.kumquat.com/classes/">
</applet>

which the browser will retrieve and display from:

http://www.kumquat.com/classes/clock.class

12.2.3.6. The name attribute

The name attribute lets you supply a unique name for this instance of the code class -- the copy of the applet that runs on the individual user's computer. Like other named elements in your document, providing a name for the applet lets other parts of your document, including other applets, reference and interact with this one, such as sharing computed results.

12.2.3.7. The height, hspace, vspace, and width attributes

Use the height and width attributes (identical to the counterparts for the <img> and <object> tags) to define the size of the applet's display region in the document. Use hspace and vspace to interpose some empty space around the applet region and thereby set it off from the text. They all accept values indicating the size of the region in pixels. Section 5.2.6.10, "The height and width attributes"

12.2.3.8. The mayscript attribute

The mayscript attribute, supported only by Netscape, indicates that the Java applet will be accessing JavaScript features within the browser. Normally, Java applets attempting to access JavaScript cause a browser error. If your applets access JavaScript, you must specify mayscript in the <applet> tag.

12.2.3.9. The title attribute

The value of this attribute is a quoted string, which is used by Internet Explorer to provide a title, if necessary, for the applet. This attribute is not supported by Netscape.

12.2.3.10. The object attribute

This unfortunately named attribute and its string value reference the name of the resource that contains a serialized version of the applet. How and what it does is an enigma; none of the popular browsers support it.

12.2.4. The <embed> Tag

Use the <embed> tag to include a reference in your document to some special plug-in application and perhaps data for that application. The standard analog for <embed> is the <object> tag with the data attribute.

<embed>

Function:

Embed an object in a document

Attributes:

ALIGN
PLUGINSPAGE &netscape;

BORDER
SRC

HEIGHT
TYPE

HIDDEN
UNITS

HSPACE
VSPACE &netscape;

NAME
WIDTH

PALETTE

End tag:

None

Contains:

Nothing

Used in:

text

With <embed>, reference the data object via the src attribute and URL value for download by the browser. The browser uses the MIME type of the src'd object to determine the plug-in required to process the object. Alternatively, you may also use the type attribute to specify a MIME type without an object, and thereby initiate execution of a plug-in application, if it exists on the user's computer.

Like all other tags, the nonstandard <embed> tag extension has a set of predefined attributes that define parameters and modify the tag's behavior. Unlike most other tags, however, the browsers let you include plug-in-specific name/value attribute pairs in <embed> that, instead of altering the action of the tag itself, get passed to the plug-in application for further processing.

For example, this tag:

<embed src=movie.avi width=320 height=200 autostart=true loop=3>

has attributes that are processed by the <embed> tag (src, width, and height) and two that are not recognized, but rather passed to the plug-in associated with AVI video clips: autostart and loop.

It is not possible to document all the possible attributes that the many different plug-ins might need with their associated <embed> tag. Instead, you must turn to the plug-in developer to learn about all their required and optional attributes for each particular plug-in you plan to use in your pages.

12.2.4.1. The align, border, height, width, hspace, and vspace attributes

The browser displays embedded objects to the user in a region set aside within the document window. The <embed> tag's align, border, height, width, hspace, and vspace attributes let you control the appearance of that region exactly as they do for the <img> tag, so we won't belabor them. Section 5.2.6, "The <img> Tag"

Briefly, the height and width attributes control the size of the viewing region. Normally, you should specify the height and width in pixels, but you may also use some other units of measure if you also specify the units attribute (see Section 12.2.4.8, "The units attribute"). The hspace and vspace attributes define a margin, in pixels, around the viewing region. The align attribute determines how the browser aligns the region within surrounding text, while the border attribute determines the width of the border surrounding the viewing region.

Only Netscape supports the align, border, hspace, and vspace attributes for the <embed> tag.

12.2.4.2. The hidden attribute

The hidden attribute makes an object invisible to the user, forcing it to have a height and width of zero. Note that setting hidden does not cause the browser to display an empty region within the document, but rather completely removes the object from the containing text flow.

The attribute's useful for audio streams placed within documents. The HTML entry:

<embed src=music.wav hidden autostart=true loop=true>

embeds an audio object in the page. The browser does not show anything to the user but rather plays background music for the page. By contrast, the plug-in associated with:

<embed src=music.wav>

might present an audio control panel to users so that they might start and stop the audio playback, adjust the volume, and so forth.

12.2.4.3. The name attribute

Like other name attributes, this one also lets you label the embedded object for later reference by other elements in your document, including other objects. The value of the attribute is a character string.

12.2.4.4. The palette attribute

The palette attribute is supported by both Netscape and Internet Explorer, but in completely different ways. With Netscape, the value of the palette attribute is either foreground or background, indicating which palette of window system colors the plug-in uses for its display.

With Internet Explorer, the value of palette is instead a pair of hexadecimal color values, separated by a vertical bar. The first value determines the foreground color used by the plug-in; the second sets the background color. Thus, specifying this palette:

palette=#ff0000|#00ff00

causes the plug-in to use red as its foreground color and green as its background color. For a complete description of hexadecimal color values, see Appendix G, "Color Names and Values".

12.2.4.5. The pluginspage attribute

The pluginspage attribute, supported only by Netscape, specifies the URL of a web page that provides instruction on where to obtain and how to install the plug-in associated with the embedded object.

12.2.4.6. The src attribute

Like its document-referencing counterparts for a myriad of other tags, the src attribute supplies the URL of the data object that you embed in the HTML document. The server providing the object must be configured so that it notifies the browser of the correct MIME type of the object. If not, the browser will use the suffix of the last element of the src value -- the object's filename in the URL path -- to determine the type of the object. The browser uses this MIME type to determine which plug-in it will execute to process the object.

If you don't include a src attribute with the <embed> tag, then you've got to include a type attribute to explicitly reference the MIME type and as a result the plug-in application.

12.2.4.7. The type attribute

Use the type attribute in addition to or in lieu of the src attribute. Its value explicitly indicates the MIME type of the embedded object, which in turn determines which plug-in the browser will invoke to process the object. This attribute is not required if you include the src attribute and the browser can determine the object type from the object's URL or server. You must supply a type attribute if you don't include the src attribute.

It may seem odd to use an <embed> tag without a src attribute reference to some object, but this is common if the plug-in requires no data or retrieves its data dynamically after it is started. In these cases, the type attribute is required so that the browser knows which plug-in to invoke.

12.2.4.8. The units attribute

Pixels are the default unit of measure for the height and width attributes that control the <embed> display space. The units attribute lets you explicitly state that the absolute measure is pixels, or change it to the relative en, which is one-half the current point size of text in the document. With the en units, you tailor the object's viewing area (viewport) to be proportional to its immediately surrounding content, the size of which is varied by the user.

For example:

<embed src=movie.avi height=200 width=320 units=pixels>

creates a viewport for the window 200 x 320 pixels. By changing units to en, that same viewport, when included within a flow of 12-point text, will become 1200 x 1920 pixels.


12. Executable Content		12.3. JavaScript

12.2. Embedded Content