HTML object
La etiqueta <object> en HTML se utiliza para insertar contenido multimedia en una página web, como videos, imágenes, sonidos, documentos PDF, entre otros. A diferencia de la etiqueta <embed>, <object> permite especificar un contenido alternativo en caso de que el navegador no pueda mostrar el contenido multimedia.
La etiqueta se usa dentro de una etiqueta <body> y requiere un atributo “data” que especifica la ubicación del archivo multimedia. También se pueden especificar atributos adicionales, como “width” y “height” para controlar el tamaño del contenido insertado.
La estructura básica de un objeto es:
<object data="path/to/file" type="type/of/file"></object>
Lenguaje del código: HTML, XML (xml)
Ejemplo de uso
Aquí tienes un ejemplo de cómo se utiliza:
<object data="movie.mp4" type="video/mp4" width="320" height="240"></object>Lenguaje del código: HTML, XML (xml)En este ejemplo se está usando un video con el nombre “movie.mp4” con tamaño de 320×240 y tipo de formato “video/mp4”.
Atributos
Los atributos más importantes de la etiqueta <object> en HTML son:
- data: Este atributo especifica la ubicación del archivo multimedia que se va a insertar en la página web. Es obligatorio especificar un valor para este atributo.
- type: Este atributo especifica el tipo de archivo multimedia que se está insertando. Por ejemplo “video/mp4” para un video en formato MP4.
- width y height: Estos atributos especifican el tamaño del contenido multimedia insertado en la página. Por defecto el tamaño es el original del archivo multimedia.
- id y class: Estos atributos se utilizan para identificar y dar estilo al objeto con CSS.
- standby: Este atributo especifica un mensaje de espera que se mostrará mientras se carga el objeto.
- name: Este atributo especifica un nombre único para el objeto.
- usemap: Este atributo especifica un mapa de imagen asociado con el objeto, si el objeto es una imagen.
- form: Este atributo especifica un formulario asociado con el objeto, si el objeto es un control de formulario.
- archive: Este atributo especifica una lista de archivos que se deben descargar antes de que se pueda mostrar el objeto.
- codebase: Este atributo especifica la ubicación de los archivos necesarios para mostrar el objeto, en caso de que el navegador no los tenga.
- codetype: Este atributo especifica el tipo de código del objeto, en caso de que sea necesario descargarlo antes de mostrarlo.
- tabindex: Este atributo especifica el orden de tabulación del objeto en caso de que se utilice la función de tabulación del navegador.
Ten en cuenta que estos son solo algunos de los atributos más importantes de la etiqueta <object>, hay otros atributos adicionales que se pueden utilizar dependiendo de tus necesidades.
Más ejemplos
Aquí te muestro algunos ejemplos de cómo utilizar los atributos de la etiqueta <object> en HTML:
- Ejemplo de uso de data:
<object data="path/to/image.jpg"></object>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se está especificando la ubicación del archivo de imagen que se va a insertar en la página web.
- Ejemplo de uso de type:
<object data="path/to/video.mp4" type="video/mp4"></object>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se está especificando el tipo de archivo multimedia que se está insertando como “video/mp4”.
- Ejemplo de uso de width y height:
<object data="path/to/image.jpg" width="800" height="600"></object>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se está especificando el tamaño del objeto en 800×600 píxeles.
- Ejemplo de uso de id y class:
<object data="path/to/image.jpg" id="mi_imagen" class="imagen_destacada"></object>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se está especificando el id “mi_imagen” y la clase “imagen_destacada” para el objeto, permitiendo su estilado con CSS.
- Ejemplo de uso de standby:
<object data="path/to/image.jpg" standby="Cargando imagen..."></object>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se está especificando un mensaje de espera “Cargando imagen…” mientras se carga el objeto.
- Ejemplo de uso de usemap:
<object data="path/to/image.jpg" usemap="#mapa1"></object>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se está especificando un mapa de imagen asociado con el objeto, siendo este una imagen y se especifica el id del mapa para que sea reconocido.
Ten en cuenta que estos son solo algunos ejemplos de cómo utilizar los atributos de la etiqueta <object> en HTML, hay muchas otras formas de utilizar estos atributos dependiendo de tus necesidades.