Embedded ObjectsS2C Home « Embedded Objects

In this lesson we find out how to embed objects into our HTML and pass parameters to the objects.

The <object> Tag

The <object> tag and its' closing </object> tag are used to define an embedded object in a HTML document.

The <param /> Tag

The <param /> tag is a self closing tag used within the </object> </object> element to define parameters for the embedded object.

Viewing the Tags

So lets see how this works!

Open the file with Notepad we created and tested in Lesson: 3 Interactive Images

You saved the file to your computer in the C:\_HTMLAdvanced folder as lesson_3_webpage.html

Copy and paste the following code into the reopened file, overwriting the existing contents.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Tutorials - Advanced HTML Lesson 4 - Embedded Objects</title>
</head>
<body>
<!-- Our HTML for embedding objects follows -->
<h2>Embedded Objects</h2>
<p>Take a look at this lovely apple.</p>
<p><object data="http://server2client.com/pages/apple.html" 
  type="text/html" 
  width="300" 
  height="200"
  alt : <a href="http://server2client.com/pages/apple.html">View Apple</a>
</object></p>
</body>
</html>

Save the file in the C:\_HTMLAdvanced folder as lesson_4_webpage.html and close the Notepad.

save objects

Viewing Our Changed File

From the C:\_HTMLAdvanced folder, double click on the saved file and it will appear in your default web browser.

For Internet Explorer you might get a screen that looks like this if you are blocking active content

ie blocked object

What Happened?

The alt: line and link appears because the content was blocked a bit like what happens when the content inside <noscript> </noscript> is rendered when JavaScript is blocked. If you click on the link it takes you directly to the image and so it's allowed because the object is no longer embedded but linked to directly. You can allow blocked content for the page by following the options and you will get a screen similar to the 1 shown after 'Unblocked Content' below.

Unblocked Content

For Internet Explorer you might get a screen that looks like the following, if you are NOT blocking active content, or you allowed active content from the page above. Similar results are achieved in all popular browsers. As you can see we have a scrolling object within our page, kinda neat huh?

ie unblocked object

Using Parameters

The <param /> tag is used within the <object> </object> element to specify a set of values that may be required by the object at runtime.

Reopen file lesson_4_webpage.html from the C:\_HTMLAdvanced folder with Notepad. Cut and paste the following code into the reopened file, overwriting the existing contents.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Tutorials - Advanced HTML Lesson 4 - Embedded Objects</title>
</head>
<body>
<!-- Our HTML for embedding objects with parameters follows -->
<h2>Using Parameters With Embedded Objects</h2>
<p>Charlies' Sports Day.</p>
<p><object data="http://server2client.com/pages/ball.avi" 
  type="video/avi" 
  width="320" 
  height="250">
  <param name="src" value="http://server2client.com/pages/ball.avi" />
  <param name="autoplay" value="false" />
  <param name="autoStart" value="0" />
  alt : <a href="http://server2client.com/pages/ball.avi">View Video</a>
</object></p>
</body>
</html>

Save the file in the C:\_HTMLAdvanced folder as lesson_4_webpage.html and close the Notepad.

save objects

Viewing Our Changed File

From the C:\_HTMLAdvanced folder, double click on the saved file and it will appear in your default web browser similar to the following screenshot:

notepad

Reviewing Our Changes

Click on the play button and the video will play, aww bless :) Play around with the parameters and see the effects on the file. For example setting the autoplay value to true and the autoStart value to 1 will play the video on page load.

Lesson 4 Complete

For a full list of the options available with the <object> and <param /> tags look at the reference section.

What's Next?

In the next lesson we take a final look at tables and their more advanced features.

HTML4 Reference

The <object> embedded object tag

The <param /> object parameter tag

go to home page Homepage go to top of page Top