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 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 include 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: 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 and JPEG images, or invokes an associated plug-in application for the job.
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. Although it's not yet fully supported, expect <object> to be well supported soon by the popular browsers, and expect the alternative <embed> and <applet> tags to be less well supported, if not completely ignored, by future HTML 4/XHML-compliant browsers.
<object>
|
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 in case the browsers cannot handle the <object> tag or the object cannot be loaded successfully.
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 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 in your HTML document the code:
<object classid="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:
http://www.kumquat.com/harvest_time.html
the browser retrieves the applet code for our clock.class example as:
http://www.kumquat.com/clock.class
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. [Section 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:
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 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.
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 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 12.2.1.6), 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>
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>
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.
There are several attributes, like the corresponding attributes for the <img> tag, that 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 of these dimension attributes should be an actual number of pixels.
The align attribute determines how the browser aligns the region in context with the surrounding text.[4] 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.
[4] The align attribute is deprecated in the HTML 4 and XHTML standards because of the CSS standard, but it is still popularly used and supported.
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. [Section 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. [Section 8.1.1] [Section 8.3]
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.
Use the id or name attribute 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 in Section 12.2.2:
<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.
All the popular browsers support name and id.
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 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 responses, add this attribute as a courtesy to your users.
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 in which they appear in the document. Use the HTML 4/XHTML standard tabindex attribute and an integer value to modify the position the object occupies in the sequence of Tab-selected elements on the page.
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. [Section 3.6.1.1] [Section 3.6.1.2]
As user-initiated mouse and keyboard events occur within the object, you may want to perform special actions. Accordingly, you can use the 10 standard event attributes to catch these events and execute JavaScript code. We describe JavaScript event handlers more fully in Section 12.3.3.
Since 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 supplies parameters for a containing <object> or <applet> tag. (We discuss the deprecated <applet> tag in Section 12.2.3.)
<param>
|
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 <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 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 assigned valid values.
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 name="document" value="http://kumquats.com/quat.doc" type="application/msword" valuetype="ref" />
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.
<applet>
|
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. [Section 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.
As with an an image, you can 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, or use the left and right alignments for wraparound content. [Section 5.2.6]
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.15 to find out how to inform users of applet-incapable browsers why they can't view an applet.
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. Archived .jar files are in the Java archive format. Archived .jar files support compression and advanced features like 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 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 or an archive, as described in Section 12.2.3.4. 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:
http://www.kumquat.com/classes/clock.class
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. 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).
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 mayscript attribute, supported only by Netscape, indicates that the Java applet is 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.
The value of this attribute is a quoted string that provides a title, if necessary, for the applet.
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.
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>
|
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 are passed to the plug-in associated with AVI video clips: autostart and loop.[5]
[5] Internet Explorer has built-in support for AVI movies; Netscape requires a plug-in it finds on the Internet and installs automatically, if the user lets it.
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 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]
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 12.2.4.8). 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, if any, surrounding the viewing region.
Internet Explorer and Netscape support the height, width, and align attributes; only Netscape supports border, hspace, and vspace for the <embed> tag.
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:
<embed src=music.wav>
might present an audio control panel to users so that they can start and stop the audio playback, adjust the volume, and so forth.
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 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 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.
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.
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 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 executes to process the object.
If you don't include a src attribute with the <embed> tag, you must include a type attribute to explicitly reference the MIME type and, as a result, the plug-in application.
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 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.
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.
Some browsers do not support the <embed> tag. The <noembed> tag makes it easy to supply alternative content that tells users what they are missing.
<noembed>
|
The popular browsers ignore the contents of the <noembed> tag, whereas browsers that do not support the <embed> tag display the contents of the <noembed> tag. Normally, 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, provide a link to a document that can stand alone without the embedded object, or nicely explain the difficulty.