 |
Chapter 13 Executable Content |
 |
13.2 Embedded Content
The <applet> tag lets you insert programs, usually Java applets, into your HTML pages. As an extension to this concept, the popular browsers also let you insert data "objects" in your pages. These objects are grist for special applications, known as plug-ins, which are created by third-party vendors and are usually distributed over the Web to interested users. If the user owns a copy of the plug-in, the embedded object in your HTML document automatically causes the browser to execute the application, which in turn uses the object's information for processing and display.
Initially, plug-ins addressed the dearth of multimedia content available on the Web. The first plug-ins supported video and audio feeds, for example, and other nifty content like animation that was just not possible with plain HTML. As programmers grew more sophisticated, plug-ins evolved to include applications like games, database interfaces, and graphical interface elements.
In this section, we cover two tags that support embedded content. The <embed> tag lets you include an object whose MIME type references the plug-in needed to process and possibly display that object. The <object> tag is a hybrid of the <embed> and <applet> tags, supporting both embedded objects and applets.
The <embed> tag
Use the <embed> tag to include a reference in your HTML document to some special plug-in application and perhaps data for that application. 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 <embed> tag 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.
The align, border, height, width, hspace, and vspace attributes
The browser invariably 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 here. [the section called "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 13.2.1.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 surrounding the viewing region.
Only Netscape supports the align, border, hspace, and vspace attributes for the <embed> tag.
The hidden attribute
The hidden attribute makes an object invisible to the user, forcing it to have a height and width of zero. Note that setting hidden does not cause the browser to display an empty region within the document, but rather completely remove the object from the containing text flow.
This attribute is useful for audio streams placed within HTML documents. The HTML entry:
<embed src=music.wav hidden autostart=true loop=true>
embeds an audio object in the page. The browser does not show anything to the user, but rather plays background music for the page. By contrast, the plug-in associated with:
<embed src=music.wav>
might present an audio control panel to users so that they might start and stop the audio playback, adjust the volume, and so forth.
The name attribute
Like other name attributes, this one also lets your label the embedded object for later reference by other elements in your document, including other objects. The value of the attribute is a character string.
The palette attribute
The palette attribute is supported by both Netscape and Internet Explorer, but in completely different ways. With Netscape, the value of the palette attribute is either foreground or background, indicating which palette of window system colors the plug-in uses for its display.
With Internet Explorer, the value of palette is instead a pair of hexadecimal color values, separated by a vertical bar. The first value determines the foreground color used by the plug-in; the second sets the background color. Thus, specifying this palette:
palette=#ff0000|#00ff00
causes the plug-in to use red as its foreground color and green as its background color. For a complete description of hexadecimal color values, see Appendix F, Color Names and Values.
The pluginspage attribute
The pluginspage attribute, supported only by Netscape, specifies the URL of a web page that provides instruction on where to obtain and how to install the plug-in associated with the embedded object.
The src attribute
Like its document-referencing counterparts for a myriad of other tags, the src attribute supplies the URL of the data object that you embed in the HTML document. The server providing the object must be configured so that it notifies the browser of the correct MIME type of the object. If not, the browser will use the suffix of the last element of the src value--the object's filename in the URL path--to determine the type of the object. The browser uses this MIME type to determine which plug-in it will execute to process the object.
If you don't include a src attribute with the <embed> tag, you've got to include a type attribute to explicitly reference the MIME type and, hence, the plug-in application.
The type attribute
Use the type attribute in addition to or in lieu of the src attribute. Its value explicitly indicates the MIME type of the embedded object, which in turn determines which plug-in the browser will invoked 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.
The units attribute
The default units of measure for the height and width attributes that control the <embed> display space is pixels. The units attribute lets you explicitly state that absolute measure of pixels, or change it to the relative en, which measure is one-half the current point size of text in the document. With the en units, you tailor the object's viewing area (viewport) to be proportional to its immediately surrounding content, the size of which is varied by the user.
For example,
<embed src=movie.avi height=200 width=320 units=pixels>
creates a view port for the window 200 by 320 pixels. By changing units to en, that same view port, when included within a flow of 12-point text, will become 1200 by 1920 pixels.
The <noembed> Tag
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.
The popular browsers ignore the contents of the <noembed> tag, whereas browsers that do not support the <embed> tag will 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 HTML document. And, in those cases, provide a link to a document that can stand alone without the embedded object, or nicely explain the difficulty.
<object>
The <object> Tag
The <object> tag provides the functionality of both the <applet> and <embed> tags. Use it to insert Java and other applets into a document, along with their parameters, or to embed objects in a document, causing the browser to invoke their associated plug-ins.
The <object> tag was originally implemented by Microsoft to support the insertion of ActiveX applets into documents. Microsoft later added limited support for the <embed> and <applet> tags and added <embed>-like capabilities to <object>, along with the ability to handle Java applets. In a similar manner, Netscape initially supported the <embed> and <applet> tags and later provided limited support for the <object> tag.
All this jostling for position by the browser giants makes us nervous. We just can't predict what extension will be supported today, and in what form, versus what will or won't be available tomorrow. Accordingly, we don't recommend that you use the <object> tag. Rather, use the individual <embed> and <applet> tags for their intended purposes.
Most of the various attributes for the <object> tag are identical to those supported by their <embed> and <applet> counterparts.
The contents of the <object> tag may be any valid HTML content, along with <param> tags that pass parameters to an applet. If the browser can retrieve the requested object and successfully process it, either as an applet or via a plug-in, 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 displays the contents of the <object> tag, except for the <param> tags. In short, you should use the contents of the <object> tag to provide alternative content for browsers that cannot handle the <object> tag or if the object cannot be successfully loaded.
The align, border, height, width, hspace, and vspace attributes
These attributes control the appearance of the <object> display region exactly like the corresponding attributes of the <img> tag. The height and width attributes control the size of the viewing region. The hspace and vspace attributes define a margin, in pixels, around the viewing region. The align attribute determines how the browser aligns the region in context with the surrounding text, while the border attribute determines the width of the border surrounding the viewing region. [the section called "The <img> Tag"]
The border, hspace, and vspace attributes are supported only by Internet Explorer.
The classid attribute
Use the classid attribute and URL value to reference the object that the browser is to include in the document. 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.
The codebase attribute
Use the codebase attribute to reference applet or object data files that are not located in the same directory as the host HTML document. The value of this attribute is a URL that is used, along with the value of the classid attribute, to locate and download the desired object. The codebase URL value may be absolute or relative; if relative, it is assumed to be relative to the containing document's URL.
The codetype attribute
The codetype attribute is for Internet Explorer only and specifies the MIME type of the object. This attribute is only required if the browser cannot determine the code type from the classid and codebase attributes, or if the server does not deliver the correct MIME type when downloading the object.
The data attribute
The data attribute lets you associate a separate 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 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 <embed> tag in that it downloads data to be processed by the included object. The difference between the <embed> and <object> tags is that the <embed> tag infers the processing application based upon the data type, while the <object> tag expects you to explicitly specify the application by the classid and codebase attributes.
The declare attribute
The declare attribute lets you define an object, but restrains the browser from actually 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 which lets you defer download of an object until it actually gets used in the document.
This attribute is supported only by Internet Explorer.
The id and name attributes
Use the id and name attributes to label an object for later reference by other elements of your HTML document, including other objects. Unfortunately, only Netscape supports the id attribute, while only Internet Explorer supports the name attribute. To be safe, you should name your objects with both attributes, since the browsers will ignore attributes they do not support.
The notab attribute
For Internet Explorer with ActiveX objects only, the notab attribute excludes the object from the document tabbing order.
The shapes and usemap attributes
For use with Internet Explorer only, the shapes attribute, informs the browser that the object is mouse-sensitive and contains shaped hyperlinks, much like a client-side image map. In fact, with shapes you must also provide the usemap attribute with its URL for the map that defines the hyperlink hot spots within the object's display area. A complete discussion of client-side image maps can be found in 7.5.2.
The standby attribute
The standby attribute lets you have Internet Explorer only 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 you expect slow network response, add this attribute as a courtesy to your users.
The tabindex attribute
The value of the tabindex attribute is an integer that defines the position of the object in the document's tabbing sequence. Browsers place interactive objects, along with form elements, in the tabbing sequence in the order they appear in the document. To change this sequence with Internet Explorer only, use the tabindex attribute.
The title attribute
Internet Explorer only lets you specially entitle your objects with the title attribute. It takes a text string as its value. The browser may choose to display this title to the user or may use it in some other manner while rendering the document.
JavaScript
The type attribute
The type attribute lets you explicitly define the MIME type of the data that appear in the file you declare with the data attribute. If you don't provide data, or if the MIME type of the data is apparent from the URL or is provided by the server, you may omit this attribute. We recommend you include it anyway, to ensure that your data is handled correctly by the browser and the included object.
|
 |
|
| Applets |  |
JavaScript |
