HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  1. HTML history
  2. HTML summary

HTML objects

What if there was a way for you to embed anything onto a webpage? Not just audio or video, but other webpages as well? What if you can take it a step further and actually embed external documents (like PDF files) onto your webpages?

NOTE: The elements on this webpage (audio, video, documents) may take a few minutes to load. Please be patient. Apologies in advance for any browser crashes (sorry!).

NOTE: You might need to download and install some plug-ins for some of the objects to be displayed.

This tutorial focuses on:

The <object> tag

The <object> tag is a rather useful, but underappreciated tag in HTML. With the <object> tag you can embed several things onto a webpage including another webpage, an external document, audio, video, and images.

Attributes of the <object> tag
Example:
<object data="/html-tutorials/verticalframes.php" type="text/html" name="framesPage" width="480" height"240"></object>
Output:

In the above example, we embed another webpage using the <object> tag. It is the 'vertical frames' page from our HTML frames tutorial.

Alternative content

What happens if a user is using an older browser that does not support the <object> tag or the object does not get loaded for some reason such as it cannot be found? You can specify alternative content to display in this situation.

Example:
<object data="/html-tutorials/verticalframes.php" type="text/html" name="frame" width="480" height"240"> <a href="/html-tutorials/verticalframes.php">See a frameset</a> </object>

The above example is just like the first with one major difference -- we use the <a> tag to specify alternative content to display in case the object does not load.

If the object doesn't load, the user will see this:

You can even specify that if an object does not load, a different object should load.

Example:
<object data="/html-tutorials/verticalframes.php" type="text/html" name="frame" width="480" height"240"> <object data="/html-tutorials/frameswlinks.html" type="text/html" name="frame" width="480" height"240"> </object>

In the above example we are saying that if the first object does not load, load the object specified within it.

Parameters

There is another tag used together with the <object> tag, and that is the <param> tag. The <param> tag is used to set the settings for an embedded object. Settings like if it should start playing automatically (for an audio object), or if their should be a control panel (for video objects).

You will have to use the <object> tag together with the <param> tag and understand how they work together to create specific settings for certain objects.

Attributes of the <param> tag

NOTE: The <param> tag does not have a closing tag.

Example:
<object type="video/mpeg" data="/video/toy_cars.mpg"width="200" height="40"> <param name="src" value="/video/toy_cars.mpg" /> <param name="autoplay" value="false" /> <param name="autoStart" value="0" /> <a href="/video/toy_cars.mpg">Watch a classic commercial</a> </object>
Output:

Embedding another page

To embed another page into a webpage, use the "text/html" MIME type.

Example:
<html> <head> <title>Embedding a webpage</title> </head> <body> This is a webpage with an embedded webpage. <object data="/html-tutorials/verticalframes.php" type="text/html" name="frame" width="480" height"240"> <a href="/html/verticalframes.php">See a frameset</a> </object> Isn't that cool? </body> </html>
Output:
This is a webpage with an embedded wepage. See a frameset Isn't that cool?

Embedding audio

You can embed audio files to play in your webpages using several different audio formats such as WAV, MP3, and MIDI. The MIME type to use depends on the format. For WAV use "audio/x-wav", for MP3 use "audio/mpeg", for MIDI use "audio/rtp-midi".

Example:
<object type="audio/mpeg" data="/audio/notes.mp3" width="200" height="40"> <param name="src" value="/audio/notes.mp3"> <param name="autoplay" value="false"> <param name="autostart" value="0"> listen to the audio: <a href="/audio/notes.mp3">bach.mid</a> </object>
Output:
listen to the audio: guitar notes

To learn more about using audio on webpages, read our HTML audio tutorial.

Embedding video

You can embed video files to play in your webpages using several different video formats such as MPEG, WMV, and Flash. The MIME type to use depends on the format. For MPEG use "video/mpeg", for WMV use "video/x-ms-wmv", for Flash use "application/x-shockwave-flash".

Example:
<object type="video/mpeg" data="/video/toy_cars.mpg"width="200" height="40"> <param name="src" value="/video/toy_cars.mpg" /> <param name="autoplay" value="false" /> <param name="autoStart" value="0" /> <a href="/video/toy_cars.mpg">Watch a classic commercial</a> </object>
Output:

To learn more about using video on webpages, read our HTML video page.

Embedding images

You can embed images into your webpages using the "image/jpeg" MIME type for jpeg images (extension .jpg or .jpeg), or the "image/gif" MIME type for gif images (extension .gif).

Using the <object> tag for images is not really necessary since the <img> tag works just fine for images, but you can still use it.

Example:
<object data="/images/apple.jpg" type="image/jpeg"> <a href="/images/apple.jpg">Apples are great</a> </object> They say that an apple a day keeps the doctor away!
Output:
Apples are great They say that an apple a day keeps the doctor away!
© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information