Tag HTML object


 Nota: Si no sabes lo que es un elemento/tag o cómo debes utilizarlo, te recomiendo que leas el tutorial "Tags y atributos en HTML", que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento HTML object es usado para ejecutar aplicaciones externas como applets, películas flash o imágenes.
Este elemento se torna útil a la hora de mostrar contenido que no es nativamente soportados por los navegadores, al permitir a los autores especificar qué aplicación debería intervenir para mostrar correctamente el contenido personalizado.
Desde su comienzo, este elemento ha sido muy pobremente soportado por los navegadores, y aún hoy, sólo algunas instancias son compatibles. Este es el caso de las películas flash, que necesitan ser definidas con el uso de los atributos "data" y "type" (en lugar de "classid") para que funcione correctamente en navegadores como Netscape y Mozilla.
Algunos atributos de este elemento tienen una fuerte naturaleza presentacional, por lo que han sidodesaprobados en HTML 4.01 en favor de las hojas de estilo. Estos atributos son: "align", "border", "hspace" y "vspace".

Ejemplos

En el próximo ejemplo, el elemento HTML object es utilizado para mostrar una imagen.
Código
<object data="/img/p/link-to-us/button.jpg" type="image/jpeg" width="88" height="31"></object>
Vista
A continuación, una película flash es insertada usando el elemento HTML object. Nota que la declaración usa los atributos "data" y "type" en lugar del típico "classid". Esto se debe a que las peículas insertadas utilizando el atributo "classid" no son mostradas en algunos navegadores como Mozilla y Netscape. de echo, la siguiente, es la declaracíon válida más compatible hasta ahora. el único problema con esto es que Internet Explorer, la película es totalmente cargada antes de comenzar, lo cual puede ser un problema para películas largas.
Nota: este problema puede solucionarse creando una película que sirva como cargador de la película final.
Código
<object data="/img/button.swf" type="application/x-shockwave-flash" width="88" height="31">
<param movie="/img/button.swf" />
</object>
Vista

Atributos

id (name)

El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en todo el documento y puede ser usado para referirse a este elemento en otras instancias (por ejemplo, desde un script del lado cliente).
<p id="parrafo1">Este es el primer párrafo, llamado "parrafo1". Para cambiar dinámicamente sus prpiedades usa este identificador.</p>

class (cdata)

El atributo "class" asigna un nombre de clase (o una lista de nombres de clases separadas por espacios) al elemento contenedor. Es usado junto con hojas de estilos y le dice al navegador la clase (o clases) a las que el elemento está asociado.
Una clase da atributos presentacionales a los elementos (lee más en el tutorial "Hojas de estilo en cascada").
<p class="referencias">Este artículo está basado en el libro "Viento en los árboles" de Jhon L. Brooks</p>
<p class="referencias importante">Este artículo está basado en el libro "Viento en los árboles" de Jhon L. Brooks... y es más importante que el anterior.</p>

style (style)

Este atributo es utilizado para definir atributos presentacionales para el elemento contenedor, y su valor debería estar compuesto por propiedades de hojas de estilo. Aunque en algunos casos es particularmente útil, es una mejor práctica poner los atributos presentacionales en archivos externos, relacionándolos a los elementos a través del atributo "class". De este modos, se mejora la separación de las partes semántica y presentacional de tu documento.
Puedes encontrar más información acerca de los atributos presentacionales en el tutorial "Hojas de estilo en cascada".
<p style="color: #0000FF; font-size: 12pt">Este es un párrafo con un estilo definido.</p>
<p>Y este es otro texto sin estilo.</p>

title (text)

El propósito de este atributo es proveer un título para el elemento. Su valor debe ser una descripción corta y precisa del contenido del elemento. Habitualmente, los navegadores muestran el contenido de este atributo en un recuadro al posar el mouse encima del contenido del elemento por un pequeño período de tiempo.
Código
<a title="HTML" href="https://sites.google.com/site/dwebhtml/">Código HTML</a>
Vista

lang (langcode)

Especifica el lenguaje del contenido de un elemento. El valor por defecto es "desconocido".

Al escribir documentos XHTML 1.0, el atributo usado para especificar el lenguaje de un elemento es "xml:lang". Para compatibilidad con los dos tipos de estándar ambos atributos pueden ser usados simultáneamente como en el ejemplo a continuación. Nota que en XHTML 1.1, el atributo "lang" ha sido completamente reemplazado por "xml:lang" y su uso ya no es válido.
<p lang="en" xml:lang="en">This is a paragraph in English.</p>
<p lang="es" xml:lang="es">Este es un párrafo en español.</p>

dir

Este atributo indica la dirección en que el texto del elemento debe ser leído. Esto incluye al contenido, los valores de los atributos y las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:
  • RTL: derecha a izquierda.
  • LTR: izquierda a derecha.
<q lang="he" dir="rtl">...una cita en Hebreo...</q>

name (cdata)

Este atributo asigna un nombre al elemento, que puede ser usado para referirse al mismo en scripts u hojas de estilo.
<object name="foto1" data="img/foto1.png" type="image/png"></object>

usemap (uri)

El valor de este atributo apunta a un mapa de imagen (elemento HTML map) que será asociado a este elemento. Por lo tanto, este valor debe coincidir con el valor del atributo "name" en el mapa de imagen.
<map name="menuprincipal">
...Información del mapa...
</map>
<img src="../img/menuprin.png" alt="Menú principal" usemap="menuprincipal" />

tabindex (number)

Especifica la posición de este elemento en el orden de tabulación. El orden de tabulación define una secuencua con todos los elementos que pueden recibir el enfoque. Los usuarios pueden navegar esta secuencia mediante el teclado (usualmente con la tecla "tab").
<a href="doc1" tabindex="1">Primer documento en la lista</a>
<a href="doc2" tabindex="2">Segundo documento en la lista</a>
<a href="doc3" tabindex="3">Tercer documento en la lista</a>

width (length)

Especifica el ancho del objeto. Este valor puede ser diferente al ancho real de la imagen, y los navegadores deberían redimensionar la misma como sea necesario. Sin embargo, especificar un ancho diferente, puede causa imágenes pixeladas (cuando es mayor) o mayores tiempos de carga de la página (cuando es menor).
<img src="img/mapa-del-tesoro.jpg" width="100" />

height (length)

Especifica la altura del objeto. Este valor puede ser diferente a la altura real de la imagen, y los navegadores deberían redimensionar la misma como sea necesario. Sin embargo, especificar una altura diferente, puede causa imágenes pixeladas (cuando es mayor) o mayores tiempos de carga de la página (cuando es menor).
<img src="img/mapa-del-tesoro.jpg" height="50" />

classid (uri)

Este atributo apunta a la ubicación de la implementación del objeto. Puede ser reemplazado o usado conjuntamente con el atributo "data", dependiendo del tipo de objeto.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0">
...Información del objeto...
</object>

codebase (uri)

Establece la URI base usada como punto de partida para resolver las URIs relativas en los atributos "classid", "data" y "archive". El valor predeterminado es la URI base del documento.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0">
...Información del objeto...
</object>

codetype (content-type)

Especifica el tipo de contenido del objeto declarado en el atributo "classid". cuando está ausente, toma el valor del atributo "type".
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0" codetype="application/x-shockwave-flash">
...Información del objeto...
</object>

data (uri)

Especifica la ubicación de la información del objeto.
<object data="img/imagen.jpg"></object>

type (content-type)

Especifica el tipo de contenido de la información declarada en el atributo "data".
<object data="img/imagen.jpg" type="image/jpg"></object>

archive (uri)

Provee una lista separada por espacios de recursos útiles para el objeto, que puede incluir los recursos declarados en los atributos "classid" y "data". Esto puede ser usado para precargar recursos, reduciendo los tiempos de carga.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0" archive="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
...Información del objeto...
</object>

declare

La presencia de este atributo booleano indica que el objeto actual está pensado para actuar únicamente como una declaración. Para ser usado, el objeto debe ser instanciado por otro objeto que se refiera al mismo.
Recuerda que en XHTML, los atributos booleanos deben tomar a su propio nombre como valor (por ejemplo, nombreatributo="nombreatributo").
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0" declare="declare">
...Información del objeto...
</object>

standby (text)

Provee un texto para mostrado mientras el objeto se está cargando.
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0" standby="Object loading. Please wait...">
...Información del objeto...
</object>

align

Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no es recomendado.
Especifica la posición de la imagen respecto del contenido a su alrededor. Puede tomar uno de los siguientes valores (insensibles a mayúsculas/minúsculas):
  • top: el lado superior de la imagen es alineado verticalmente con la línea base.
  • middle: la imagen es centrada verticalmente respecto de la línea base.
  • bottom: el lado inferior de la imagen es alineado verticalmente con la línea base. Este es el valor por defecto.
  • left: la imagen flota a la margen izquierda.
  • right: la imagen flota a la margen derecha.
<img src="img/foto.png" align="center" />

border (pixels)

Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no es recomendado.
Este atributo establece el ancho del borde en número de píxeles.
<img src="img/foto.png" border="2" />

hspace (pixels)

Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no es recomendado.
Establece la cantidad de espacio en blanco (en píxeles) que será insertado como márgenes izquierdo y derecho de la imagen.
<img src="img/foto.png" hspace="20" />

vspace (pixels)

Este atributo ha sido desaprobado en HTML 4.01. Por lo tanto, su uso ya no es recomendado.
Establece la cantidad de espacio en blanco (en píxeles) que será insertado como márgenes superior e inferior de la imagen.
<img src="img/foto.png" vspace="10" />