In this article we will look at a sample chapter from Wrox's HTML 4.01 Programmer's Reference book. This chapter focuses on the HTML object tag and shows a variety of advanced ways to use and manipulate it.
Sample Chapter: HTML 4.01 Programmers Reference - How the (Page 3 of 10 )
Most browsers have built-in native support for common features such as images (GIFs, JPEGs, and PNGs), text, fonts, and colors. When IE 4 was released in 1997, the most common components available on the web were ActiveX controls and Java applets, both of which could be run by the <object> element. However, there has been a considerable shift since then. COM objects have replaced ActiveX controls, and these in turn are in the process of being partially superceded by web services in the .NET framework.
The progress with compression algorithms and higher bandwidth being made available more cheaply means that streaming video, such as MPEGs, AVIs, and Quick time Movies, are now much more commonplace on the web. These require separate applications such as the Windows Media Player, or the Apple Quick Time Movie Player to be available to run them. Secondly, audio has moved beyond large, clunky WAV files. Streaming audio is common in the form of .ra (real audio files), but by far the most common form of audio file is the MP3 format, which has shrunk the size of audio files to a manageable few megabytes, while retaining a sound quality close to that of a CD player. Once again, we need to insert a third party player such as Windows Media Player into our page to be able to play MP3 files.
Technically speaking, most MP3 files are saved at a better sample rate than the average CD player, which saves at 44.1Khz. However, even with files saved at 128KHz, the lossy compression algorithm used in MP3 removes non-audible information to reduce file size. This is still flawed, and you will find CDs audibly superior to MP3 files.
We can use the <object> element to insert these kinds of technologies. However, due to large file sizes, the preferred method for many web users is to download these files separately, and as a result it is becoming less common for web developers to actively embed either video or audio files within a web page. Instead, the most common form of embedded application in a web page is Macromedia's motion web graphics tool – Flash. This allows developers to create animations, interactive graphics, and menus and embed them into web pages. Flash can also handle sound and text, and has become a popular catchall solution for developers. Flash animations are embedded into HTML pages using the <object> element.
To be able to embed an object in a page, the W3C states that we need to specify three types of information:
The implementation of the included object (or the location of the executable code).
The data to be rendered.
Additional values required by the object at run time.
The first two values are specified within the attributes of the <object> element, while additional values are specified within the <param> element. However, we don't need to specify all three at once. Some objects might not have to be initialized at run time, while others won't have any data to render. When a browser comes across an object it must attempt to render its contents on the web page, otherwise it must attempt to render the contents of the <object> element. For example:
<object type="oojit/wotsit"> If you are reading this text then your browser can't render the object. </object>
Here we have placed some alternative text inside a non-existent object. All browsers will display the alternative text, as they can't render the object.
We can also use the <object> element to embed objects one inside another. The browser will attempt to the render the first <object> – if it can't render that, then it should attempt to render the second <object> element, and so on, until it reaches the innermost <object> element, if it hasn't yet managed to render any objects. If it can't render any objects, then it will render the text contained within. If we wish, we can supply the object as an <embed>, <applet>, or <img> element within the innermost object instead, for those browsers that don't support the <object> element.
It is also possible to insert the <object> element within the document header (within the <head> element), as long as the <object> element isn't intended to render any physical content on the web page. This sounds a little strange, given that the <object> element is primarily intended for embedding multimedia content, but it is a useful technique to consider – for example, we could use an <object> element in the document header to invoke a database, values out of which could then be manipulated by script in the body.
However, looking at the way in which Netscape 6 and Opera 5.x handle the <object> element, it seems we need to ensure ourselves that the element doesn't render, for example by setting it within a style sheet display: none;. IE 5.5 on the other hand automatically won't render any <object> elements appearing in the <head> section.
Now, let's take a look at the <object> element's attributes, and see how we can use an object in our web page.