In the HTML tutorial 11 – HTML audio, we have learned how to add audio files and music to our HTML-pages. Now it’s time to expand the horizons of our knowledge. The Object in HTML tutorial will teach you how to add different objects to your HTML-page such as: video, flash animation and java-applet.
The <object> tag description
The <object> tag ‘tells’ the browser how to load and display an object in HTML that your browser does not ‘understand’ by default. Usually such objects require installing of some modules or add-ons.
It is possible to embed the <object> tag into another <object> tag. It allows displaying a specific content even if a required add-on is missing. For example, the external <object> tag loads a video file and if the required add-on is missing the internal <object> tag displays an image. Also, you can specify the <param> tag within the <object> and </object> tags which set additional parameters of an object. The closing </object> tag is necessary.
Syntax:
<object width="width" height="height"></object>
Object in HTML attributes
This section describes all the attributes that can be used with the <object> tag in details and includes examples.
Also, the <object> tag can be used with the universal attributes and events which I will cover in further HTML tutorials.
The align attribute
The align attribute determines how an object will be aligned on a web-page and the way of text-wrapping.
Syntax:
<object align="absmiddle | baseline | bottom | left | middle | right | texttop | top"></object>
The default value of object align is bottom.
The absmiddle value aligns the middle of an object to the middle of the current text line.
The baseline value aligns an object to the baseline of the current text line.
The bottom value aligns the lower boundary of an object to the surrounding text.
The left value aligns an object to the left edge of the window, a text flows around it on the right.
The middle value aligns the middle of an object to the baseline of the current line.
The right value aligns an object to the right edge of the window, a text flows around it on the left.
The texttop value aligns the upper boundary of an object with the highest text element of the current line.
The top value aligns the upper boundary of an object to the highest element of the current line.
Example:
<object data="demo.mpg" width="400" height="300" align="left"></object>
The archive attribute
The archive attribute determines the path to the files that are necessary for an object to work. This attribute is optional. The value of this attribute is the path to a file or a bunch of files. In case you need to specify several files then file names with extensions should be separated with spaces.
Syntax:
<object archive="URL"></object>
Example:
<object classid="java:Clock.class" codetype="application/java" width="100" height="20" archive="clock.jar"></object>
The classid attribute
The classid attribute determines the path to the program (application or plug-in) which will run an object. Also, you can use the registered ActiveX application identifier specifying it in the clsid value.
Syntax:
<object classid="URL">...</object>
Example:
<object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codetype="audio/mp3">
Example 2:
<object codetype="application/java-vm" codebase="http://webdesy.com/applet.class"
classid="java:program.start" height="100" width="100">
<param name="options" value="que">
</object>
The code and codebase attributes
The code attribute determines the name of an object. It is used instead of the <applet> tag which is loading and running a Java-applet. The value of the code attribute is the name of a Java-applet class (with the .class extension). If a file and an HTML-page are located in the same folder then you should specify a path in the codebase attribute. This tag is working in Internet Explorer only.
Syntax:
<object code="clock.class"></object>
The codebase attribute determines a path to the folder that includes the object which is specified in the code or classid attribute. It must contain the folder name only and not the file name.
Example:
<object classid="clock.class" codebase="java_applets"></object>
The codetype and type attributes
The codetype attribute determines an object type which is specified in the classid attribute.
The type attribute defines the MIME (Multipurpose Internet Mail Extensions) object type.
Syntax:
<object codetype="MIME-type"></object>
Example:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codetype="video/quicktime"> </object>
The data attribute
The data attribute determines the file address so the browser can display it.
Syntax:
<object data="URL">...</object>
Example:
<object data="video/duel.mp4" type="application/mpeg" width="300" height="200">
</object>
The height and width attributes determine an object height and width.
The vspace and hspace attributes determine the vertical and horizontal offset from an object to the surrounding content.
The tabindex attribute determines the order of the transition between elements by pressing Tab key on your keyboard.
Syntax:
<object tabindex="number"></object>
Object in HTML code examples
Let’s now check some examples of how to embed an object in HTML.
This is how we can embed Flash animation:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Object in HTML</title>
</head>
<body>
<p><object type="application/x-shockwave-flash" data="images/mouse.swf" width="400" height="300">
<param name="quality" value="high">
<param name="wmode" value="opaque">
</object></p>
</body>
</html>
This is how to embed an audio file in HTML using the classid and codetype attributes example:
<html>
<head>
<title>Object in HTML</title>
</head>
<body>
<object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codetype="audio/mp3">
</object>
</body>
</html>
Please note that the above code works in Internet Explorer only.
This is how we can embed a video in HTML using the param attribute example:
<html>
<head>
<title>Object in HTML</title>
</head>
<body>
<object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="300" height="300" type="video/avi">
<param name="Volume" value="20" />
<param name="URL" value="test.avi" />
<param name="AutoStart" value="1" />
</object>
</body>
</html>
An image can be also specified as an object in HTML, like we have already learned in the Image in HTML tutorial:
<object height="100" width="100" type="image/jpeg" data="test.jpeg"></object>
Also we can add a website using the <object> tag:
<object type="text/html" height="100" width="100" data="http://www.WebDesy.com"></object>
As we can see the <object> tag can be used in various ways to add an object in HTML. However most of the browsers will require special add-ons to be installed to display an object properly. So be attentive and check your web-page in different browsers before publishing it on the web.
Thank you for your attention and have a wonderful weekend!
P.S Your comments right below this post are very appreciated!
