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 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.
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:
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. [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:
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 datafile
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 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 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.
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 × 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 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 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.
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, and browsers may provide other mechanisms
to select content. Normally, each time the user moves to the next
object—by pressing the Tab key, for example—the 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.
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, 3.6.1.1]
[The lang attribute,
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 shortly in section 12.3.3.
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
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 <param>
tag has two required attributes: name or id, and value. You've seen these attributes 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 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.
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" />
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.
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
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 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
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 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 12.2.1.2, or
an archive, as described earlier in section 12.2.1.3. 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.
[The height and width
attributes, 5.2.6.10]
The mayscript attribute
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.
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 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
12.2.4.8, 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.
All the popular browsers support the height, width, and align attributes, but unlike <applet> or <object>, Internet Explorer does not
support border, hspace, or 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.
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:
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, 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.
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 an 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 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.
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 × 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 × 1920
pixels.
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.
[*] Believe it or not, Netscape once dominated the browser market!
[*] 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.
[*] Internet Explorer has built-in support for AVI movies; other browsers require that users download and install a plug-in that plays the AVI movie.