Home arrow HTML arrow Page 3 - Sample Chapter: HTML 4.01 Programmers Reference

Sample Chapter: HTML 4.01 Programmers Reference

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.

Author Info:
By: Mitchell Harper
Rating: 5 stars5 stars5 stars5 stars5 stars / 10
July 24, 2002
  1. · Sample Chapter: HTML 4.01 Programmers Reference
  2. · The Object Tag Explained
  3. · How the
  4. · Page 4
  5. · Internet Explorer
  6. · Using the
  7. · Hidden Image Elements
  8. · Inserting a Java Applet with the Object Element
  9. · Inserting a Flash Animation with the Object Element
  10. · Conclusion

print this article

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.
Next: Page 4 >>

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials