home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam  


Book HomeHTML & XHTML: The Definitive GuideSearch this book

12.2. Embedded Content

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 as well as a variety of discrete inclusions in your documents, even 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. And with <object>, use 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 will either handle its rendering directly, such as with GIF and JPEG images, or invoke an associated plug-in application for the job.

12.2.1. The <object> Tag

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

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

<object>

Function:

Embed an object or applet in a document

Attributes:

ALIGN

ONKEYDOWN

ARCHIVE

ONKEYPRESS

BORDER

ONKEYUP

CLASS

ONMOUSEDOWN

CLASSID

ONMOUSEMOVE

CODEBASE

ONMOUSEOUT

CODETYPE

ONMOUSEOVER

DATA

ONMOUSEUP

DECLARE

SHAPES

DIR

STANDBY

HEIGHT

STYLE

HSPACE

TABINDEX

ID

TITLE

LANG

TYPE

NAME

USEMAP

NOTAB

VSPACE

ONCLICK

WIDTH

ONDBLCLICK

End tag:

</object>; never omitted

Contains:

object_content

Used in:

text

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

12.2.1.2. The codebase attribute

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

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

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

which resolves to the URL:

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

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

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

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

12.2.1.4. The codetype attribute

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

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

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

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

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

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

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

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

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

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

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

12.2.1.10. The shapes and usemap attributes

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

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

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

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

and as the more familiar image map:

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

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

12.2.1.15. Supporting incompatible browsers

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 tag and blithely go on to display whatever content may appear inside. It's as simple as that. The following fragment tells object-incapable browser users they won't see our clock example:

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

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

12.2.2. The <param> Tag

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

<param>

Function:

Supply a parameter to an embedded object

Attributes:

ID

NAME

TYPE

VALUE

VALUETYPE

End tag:

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

Contains:

Nothing

Used in:

applet_content

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

12.2.3. The <applet> Tag (Deprecated)

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

<applet>

Function:

Insert an application into the current text flow

Attributes:

ALIGN

ID

ALT

MAYSCRIPT

ARCHIVE

NAME

CLASS

OBJECT

CODE

STYLE

CODEBASE

TITLE

HEIGHT

VSPACE

HSPACE

WIDTH

End tag:

</applet>; never omitted

Contains:

applet_content

Used in:

text

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

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

12.2.3.5. The code and codebase attributes

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

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

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

which the browser will retrieve and display from:

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

12.2.4. The <embed> Tag

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

<embed>

Function:

Embed an object in a document

Attributes:

ALIGN

PLUGINSPAGE &netscape;

BORDER

SRC

HEIGHT

TYPE

HIDDEN

UNITS

HSPACE

VSPACE &netscape;

NAME

WIDTH

PALETTE

End tag:

None

Contains:

Nothing

Used in:

text

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

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

For example, this tag:

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

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

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

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

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

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

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



Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.