HOME  |    TRAINING  |   FREE TUTORIALS   |   JOBS
Find out more about our new RSS feed.
FREE Tutorial
HTML 4.01 : EMBEDDING OBJECTS PART 2 - HOW THE OBJECT ELEMENT WORKS

CATEGORY
SEARCH OUR OTHER TUTORIALS

DESCRIPTION

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.


This free tutorial is a sample from the book HTML 4.01 Programmer's Reference.


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.

<object> Attributes

The <object> element supports the following attributes:

archive   border   classid   codebase
codetype   data    declare   height
width    hspace   vspace    name
standby   tabindex  usemap

plus the usual HTML 4.01 attributes id, class, style, dir, lang, and title, and the common events.

archive

This attribute specifies a list of space-separated URLs, which have information relevant to the resource specified in classid and data attributes. The syntax is:

archive="urllist"

border

This attribute specifies the width of the border to be drawn around the object. The syntax is:

border="n"

where n is an integer. For border="0", no border is drawn. Like align, this attribute is deprecated in HTML 4.01. Style sheets are the preferred method for adding borders.

classid

This specifies a class identifier for an object (on Windows platforms, this information is stored in the registry on the user's machine, once the object has been installed). The syntax is:

classid="class_identifier"

The class_identifier is the information used to create an object on our web page. The class identifier (the HTML 4.01 standard specifies that this should be a URL) tells the browser to draw an object of a specified type. However, in Internet Explorer it's treated slightly differently; the classid attribute is the key to the whole element - this is a value that is unique for every instance of the object, and this is how the browser knows which object to load into the page. Here's an example of the classid for the RDS control.

<object id="RDS Control" classid="clsid:BD96C556-65A3-11D0-983A-
00C04FC29E33">
...

It is used as an alternative to the data attribute, and is often preferred in Internet Explorer to data, where it doesn't seem to work as well for the <object> element.

Continued...


NEXT PAGE



5 RELATED COURSES AVAILABLE
HTML 4.0 INTRODUCTION
To create, format and publish a small website using HTML 4.0. You will learn to create web pages incorporating fo....
JAVASCRIPT PROGRAMMING
This training course aims to teach the reader the fundamentals of JavaScript. This course covers topics such as -....
I-NET+ MODULE 8 - DEVELOPING A WEB SITE
On completion of this module, readers will be able to: create HTML pages incorporating different document-, parag....
MICROSOFT INTERNET EXPLORER 6.0 INTERNET INTRODUCTION
This course provides readers with an introduction to the concept of the Internet and the opportunity to gain a br....
A+ MODULE 5 - THE INTERNET
At the end of this course you will be able to: describe the functions of an operating system, describe the featur....
 
0 RELATED JOBS AVAILABLE
CONTACT US
Thursday 8th January 2009  © COPYRIGHT 2009 - VISUALSOFT