Home arrow HTML arrow Page 7 - 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 - Hidden Image Elements
(Page 7 of 10 )

We can also specify other style properties, for example this code:

<object type="image/gif" data="wroxLogo.gif" style="visibility:hidden; height:105pt; width:105pt"> This is our Wrox Logo</object>

loads the image into the <object> element on the page, but makes it invisible. While it may seem a little pointless, it is a good way to get the browser to cache images that we want to make available quickly, such as rollovers like a rotated ad, or a series of frames of animation in an animated-GIF. When the image needs to be displayed, it doesn't need to be downloaded just lifted from the local system's cache, although it can slow down the loading of the first page, as all the images have to be loaded first.

The Alternative Content
Finally, what happens if the browser doesn't know how to handle the object specified by the type and data attributes? Here, we've used an unknown value for type:

<object type="haven't/aclue" data="wroxLogo.gif" style="width:100; height:100"> This is our Wrox Logo</object>

The result is that, after a few moments' indecision, the browser (IE and Netscape 6 only Opera 5.x displays the image regardless) reports that it can't handle the file and displays the alternative text content of the <object> element:

Unfortunately, Internet Explorer's quirky rendering of images with a permanent vertical scrollbar means that adoption of the <object> element in preference to the <img> element is not likely to happen yet.

Inserting Components into a Web Page
While it isn't possible to look at an example of how to embed every single object or component into web pages, we're going to look at a cross section of components that we can embed into web pages using the <object> element.

Showing a Movie
There are several components that are included with each different version of Internet Explorer, which give us the ability to make our web pages come alive by providing special formatting features, animation, video, and much more.

Perhaps the most useful of them is Microsoft's Windows Media Player control, which comes as part of the DirectX SDK and is available in IE 4 and upwards. Windows Media Player allows us to play back popular media formats on the web, including progressive playback of MPEG Audio and Video, AVI files, some types of QuickTime MOVies, MP3, WAV Files, and MIDI. As this component comes with IE, we don't need the codebase attribute to locate a version of Windows Media Player.

Here we are going to show how to put in-line video into a web page, by inserting Windows Media Player as an object, like so:

Take a look at the following code:

<title>ActiveMovie Example</title>
<object id="WindowsMediaPlayer" classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A" style="position:absolute;top:55;left:90">
<param name="ShowDisplay" value="0">
<param name="ShowControls" value="1">
<param name="AutoStart" value="1">
<param name="AutoRewind" value="-1">
<param name="Volume" value="-5000">
<param name="FileName" value="http://webdev.wrox.co.uk/books/0707/ chapter12/RockClmb.avi"> </object>

The versatility of the Windows Media Player Control is that we can just as easily change the code to play an MP3 sound file, by changing the FileName parameter value as follows:

<param name="FileName" value="http://www.beemen.com/NewBeemenPages/ TheBeemenGoodnightBirmingham.mp3">

This will embedded an MP3 file within the web page.

As can be seen, there are a number of <param> tags included within the <object> element itself: these are all parameters for the Windows Media Player control. If we wanted to embed a different object in our page, the properties for that object would be different, and we would need to enter those different parameters. We are not actually going to spend any time explaining these properties, but further information on Windows Media Player can be found at: MSDN.
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-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials