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!).
This lesson focuses on:
- The <object> tag
- Embedding another page
- Embedding documents
- Embedding audio
- Embedding video
- Embedding images
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.
Example:
Output:
In the above example, we embed another webpage using the <object> tag. It is the 'vertical frames' page from our HTML frames lesson.
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 embedded for some reason such as it cannot be found? You can specify alternative content to display in such a situation.
Example:
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 does not load, the user will see this:
You can even specify that if an object does not load, a different object should load.
Example:
In the above example we are saying 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.
NOTE: The <param> tag does not have a closing tag.
Example:
Output (turn up your volume a little for this one):
NOTE: Turn your volume back down
Embedding another page
To embed another page into a webpage, use the "text/html" MIME type.
Example:
Output:
Embedding documents
You can embed documents (like PDF files) into your webpages. To embed a PDF document into a webpage, use the "application/pdf" MIME type.
Example:
Output:
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:
Output:
To learn more about using audio on webpages, read our HTML audio page.
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:
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:
Output:
