Feb. 21, 2011, 10:05 a.m.
posted by pythonics
In this section, we cover three tags that support embedded content. The <object> tag is in the HTML 4 and XHTML standards. It is a generalized hybrid of the deprecated <applet> tag for embedding applets, particularly Java applets, and the <embed> tag extension that lets you include an object whose Multipurpose Internet Mail Extension (MIME) type references the plug-in needed to process and possibly display that object.
The latest standards strongly encourage you to use the <object> tag to incorporate applets and other discrete inclusions in your documents, including images (although the standards do not go so far as to deprecate the <img> tag). Use <object> with the classid attribute to insert Java and other applets into a document, along with their execution parameters as contents of the associated <param> tag. Use <object> with the data attribute to download and display non-HTML/XHTML content, such as multimedia, in the user's computing environment. Object data may be processed and rendered by an included applet, by utilities that come with your browser, or by a plug-in (helper) application that the user supplies.
For applets, the browser creates a display region in the containing text flow exactly like an inline image or an <iframe>: without line breaks and as a single large entity. The browser then downloads and executes the applet's program code, if specified, and downloads and renders any included data just after download and display of the document. Execution of the applet continues until the code terminates itself or when the user stops viewing the page containing the applet.
With data, the browser decodes the object's data type and either handles its rendering directly, such as with GIF, PNG, and JPEG images, or invokes an associated plug-in application for the job.
The <object> Tag
The <object> tag was originally implemented by Microsoft to support its ActiveX controls. Only later did Microsoft add 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) XHTML standards, especially because the currently popular browsers support <object>.
Nonetheless, be aware that the popular browsers interpret <object> and <embed> a bit differently. For example, Internet Explorer still treats <object> content as ActiveX controls and launches its helper program to display the data. By contrast, the browser displays <embed> content within the document display.
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 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 in case the browsers cannot handle the <object> tag or the object cannot be loaded successfully.
The classid attribute
Use the classid attribute to specify the location of the object, typically a Java class, which you want the browser to include. The value may be the 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's URL.
For example, to execute a clock Java applet contained in a file named clock.class, you might include the following code in your HTML document:
<object classid="java:clock.class"> </object>
The browser locates the code for the applet using the current document's base URL. Hence, if the current document's URL is:
the browser retrieves the applet code for our clock.class example as:
The codebase attribute
Use the codebase attribute to provide an alternative base URL from which the browser should 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. [Referencing Documents: The URL, 6.2]
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:
Although we used an absolute URL in this example, you also can use a relative URL. For instance, applets typically are 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; it is used in conjunction with the codebase attribute to determine the full URL of the object to be retrieved and placed in the document.
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 relies 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 it renders or executes the object.
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 (see section 18.104.22.168), except that it is used to identify program code type, whereas type should be used to identify datafile types.
The following example explicitly tells the browser that the object's code is Java:
<object code="clock.class" codetype="application/java"> </object>
The data attribute
Use the data attribute to specify the datafile, if any, that the object is to process. 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>
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 that you include it anyway, to ensure that the browser handles your data correctly.
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 recognizes and the application, if not the browser itself, that processes and renders that file type.
The align, class, border, height, hspace, style, vspace, and width attributes
As with the corresponding attributes for the <img> tag, several attributes let you control the appearance of the <object> display region. 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 dimension attribute should be an actual number of pixels.
The align attribute 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 instance, our example clock applet might grow or shrink to fit nearly any size display region. Instead, we might fix it to a square space, 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. [<img>, 5.2.6]
Use the class and style attributes 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. [Inline Styles: The style Attribute, 8.1.1] [Style Classes, 8.3]
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.
The id, name, and title attributes
Use the id or name attribute to uniquely label an object. Use the title attribute to simply title 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 in section 12.2.2:
<object classid="clock.class" id="clock1"> </object> <object classid="clock.class" id="clock2"> </object> <object classid="setter.class"> <param id="clockToSet" value="clock1"> </object> <object classid="setter.class"> <param id="clockToSet" value="clock2"> </object>
Because we have no need to distinguish between the setter applets, we choose not to identify their instances.
The shapes and usemap attributes
Recall from our detailed discussion of hyperlinks in Chapter 6 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 maps discussed in section 6.5.2.
For example, here is the image map we described in Chapter 6, 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.
The standby attribute
The standby attribute lets you display a messagethe attribute's value text stringduring the time the browser is downloading the object data. If your objects are large or if you expect slow network responses add this attribute as a courtesy to your users.
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, and browsers may provide other mechanisms to select content. Normally, each time the user moves to the next objectby pressing the Tab key, for examplethe browser steps to the next hyperlink or form control in the order in which they appear in the document. To change that order, use the HTML 4/XHTML standard tabindex attribute and an integer value to indicate the object's position in the sequence of selectable elements on the page.
The dir and lang attributes
Use the dir and lang attributes, like their counterparts for most other tags, to specify the language and dialect of the <object>-enclosed contents as well as the direction by which the browser adds text characters to the display. [The dir attribute, 22.214.171.124] [The lang attribute, 126.96.36.199]
Object event handling
Supporting incompatible browsers
Because some browsers may not support applets or the <object> tag, sometimes you may need to tell readers what they are missing. You do this by including body content between the <object> and </object> tags.
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 tags and blithely go on to display whatever content appears inside. It's as simple as that. The following fragment tells object-incapable browser users that 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 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 tries each object in turn, stopping with the first one it can handle. Thus, the outermost object might be a full-motion video. Within that <object> tag, you might include a simpler MPEG video, and within that <object> tag, 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, the innermost <object> tag might contain a text description of the object.
The <param> Tag
The <param> tag supplies parameters for a containing <object> or <applet> tag. (We discuss the deprecated <applet> tag in the upcoming section, 12.2.3.)
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.
The id, name, and value attributes
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 id="timezone" value="EST" /> </object>
The browser passes 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 HTML/XHTML author works closely with the applet programmer or has detailed documentation to ensure that the applet parameters are named correctly and are assigned valid values.
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 ref value 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 interobject communication within a document.
The value of the type attribute is the MIME media type of the value of the parameter. This usually is of no significance when the parameter value is a simple string, but it 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 id="document" value="http://kumquats.com/quat.doc" type="application/msword" valuetype="ref" />
The <applet> Tag (Deprecated)
Use the <applet> tag within your documents 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.
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 will pass the document-specific parameters to the applet at the time of execution. [<param>, 12.2.2]
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.
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 the user stops viewing the page containing the applet.
The align attribute
As with an image or <iframe>, you can use the align attribute to control the applet's display region with respect to its surrounding text, although the standards prefer that you use respective Cascading Style Sheet (CSS) alignment properties. Set the align attribute's value to top, texttop, middle, absmiddle, baseline, bottom, or absbottom, or use the left and right alignments for wraparound content. For a detailed description, see section 5.2.6.
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 188.8.131.52 earlier in this chapter to find out how to inform users of applet-incapable browsers why they can't view an applet.
The archive attribute
The archive attribute collects common Java classes into a single library that is cached on the user's local disk. Once the data is 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. Archived .jar files are in the Java archive format. Archived .jar files support compression and advanced features such as digital signatures.
You can 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.
The code and codebase attributes
The code attribute is required with <applet>. 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 earlier in section 184.108.40.206, or an archive, as described earlier in section 220.127.116.11. The extension suffix of the filename should be .class. If you don't include the suffix, some browsers append .class automatically when searching for the applet.
Here is our clock example from earlier rewritten as an <applet>:
<applet code="clock.class" codebase="http://www.kumquat.com/classes/"> </applet>
which the browser retrieves and displays from:
The name attribute
The name attribute lets you supply a unique name for this instance of the code classthe copy of the applet that runs on the individual user's computer. As with 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 (e.g., for sharing computed results).
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. [The height and width attributes, 18.104.22.168]
The mayscript attribute
The title attribute
The value of this attribute is a quoted string that provides a title, if necessary, for the applet.
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 supports it.
The <embed> Tag (Extension)
At one time, the <embed> tag was the only way you could include a reference in your document for the browser to handle some special plug-in application and perhaps data for that application. Today's standard is the <object> tag with the data attribute, and we recommend that you use it in lieu of <embed>. Nonetheless, <embed> currently remains well supported by all the popular browsers.
With <embed>, you 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 that is 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 are 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> tags. Instead, you must turn to the plug-in developer to learn about all of their required and optional attributes for each plug-in that you plan to use in your pages.
The align, border, height, hspace, vspace, and width 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. [<img>, 5.2.6]
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 use some other units of measure if you also specify the units attribute (see section 22.214.171.124, later in this chapter). 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, and the border attribute determines the width of the border, if any, surrounding the viewing region.
The hidden attribute
The hidden attribute makes an object invisible to the user, forcing it to have a height and width of 0. 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.
This attribute is 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:
might present an audio control panel to users so that they can start and stop the audio playback, adjust the volume, and so forth.
The name attribute
Like other name attributes, this one lets you label the embedded object for later reference by other elements in your document, including other objects. The value of the name attribute is a character string.
The palette attribute
Netscape and Internet Explorer support the palette attribute, 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 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:
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.
The pluginspage attribute
The pluginspage attribute, once supported only by Netscape, but no longer, 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. Now all the popular browsers direct you to their supporting plug-in home pages for downloads.
The src attribute
Like its document-referencing counterparts for myriad 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 uses the suffix of the last element of the src valuethe object's filename in the URL pathto determine the type of the object. The browser uses this MIME type to determine which plug-in it executes to process the object.
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 invokes 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 an 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.
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, this tag creates a viewport of 200 x 320 pixels:
<embed src=movie.avi height=200 width=320 units=pixels>
By changing units to en, that same viewport, when included within a flow of 12-point text, becomes 1200 x 1920 pixels.
The <noembed> Tag (Extension)
The <noembed> tag, although not part of the standards, is supported by the popular browsers; they consequently ignore the <noembed> enclosed text. On the other hand, browsers that do not recognize <embed> ignore <noembed>, too, consequently displaying the latter tag's enclosed text and thereby supplying alternative content to tell users what they are missing in the <embed> content.
Normally, you use the contents of the <noembed> tag to display some sort of message placating users of inadequate browsers:
<embed src=cool.mov autostart=true loop=true> <noembed>To view the cool movie, you need to upgrade to a browser that supports the <embed> tag!</noembed>
We recommend using a <noembed> message only in those cases where the object is crucial for the user to comprehend and use your document. And, in those cases, you should provide a link to a document that can stand alone without the embedded object, or nicely explain the difficulty.