Tienda
1
Alojamiento web cloud Terrassa Sabadell

¿Como funciona el comando en HTML5: 'object'?





















A B C D E F G H I J K L M N O P Q R S T U V W X Y Z LinuxHTML5Dominios

La imagen muestra un fondo azul con un texto centrado en letras blancas que muestra la palabra object

Última modificación: 2024-06-18

La etiqueta <object> en HTML5 es un elemento versátil y potente diseñado para incrustar varios tipos de contenido dentro de un documento web. Este contenido puede incluir, entre otros, vídeos, audio, imágenes, documentos PDF y aplicaciones de Java (applets). Aquí te doy una descripción detallada de la instrucción <object> y una explicación de sus atributos, seguida de algunos ejemplos sencillos de uso.

Atributos de <object>

  1. data: Especifica la URL del recurso que se debe cargar y representar dentro del contenedor <object>.
  2. type: Define el tipo MIME del recurso a cargar. Esto ayuda al navegador a decidir cómo procesar el contenido.
  3. width: Establece el ancho del elemento <object>. Generalmente, se da en píxeles o como un porcentaje.
  4. height: Define la altura del elemento <object>, también en píxeles o porcentaje.
  5. name: Asigna un nombre al elemento <object>, permitiendo que pueda ser referenciado en scripts.
  6. form: Especifica el formulario asociado con el objeto.
  7. usemap: Permite asociar el objeto con un mapa de imagen definido por un elemento <map>.
  8. tabindex: Dicta la posición del elemento en el orden de tabulación.
  9. classid: Este atributo es usado para definir la URL de un HTML que contiene la clase o aplicación a ejecutar.
  10. codebase: Especifica una URL base para resolver URLs relativas en otros atributos como classid, data y archive.
  11. codetype: Define el MIME Type de los datos apuntados por el atributo classid.
  12. archive: Un espacio delimitado por comas de URLs adicionales para archivos de recursos que deberían ser prejudiados.
  13. standby: Provee un mensaje que se muestra mientras el objeto se carga.
  14. declare: Esta es una instrucción obsoleta en HTML5.
  15. height: (duplicado mencionado) Define la altura del elemento.

Uso de <object> en HTML5: Ejemplos Sencillos

Incrustar un Documento PDF

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Incrustar PDF</title>
</head>
<body>
    <object data="example.pdf" type="application/pdf" width="600" height="400">
        <p>El documento PDF no puede mostrarse. Puedes <a href="example.pdf">descargarlo aquí</a>.</p>
    </object>
</body>
</html>

Incrustar un Archivo de Sonido

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Incrustar Sonido</title>
</head>
<body>
    <object data="audio.mp3" type="audio/mpeg" width="300" height="200">
        <p>Tu navegador no soporta el elemento de audio. Puedes <a href="audio.mp3">descargar el archivo aquí</a>.</p>
    </object>
</body>
</html>

Incrustar un Video

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Incrustar Video</title>
</head>
<body>
    <object data="video.mp4" type="video/mp4" width="600" height="400">
        <p>El video no puede reproducirse. Puedes <a href="video.mp4">descargarlo aquí</a>.</p>
    </object>
</body>
</html>

En cada uno de estos ejemplos, el <object> se utiliza para incrustar diferentes tipos de contenido (PDF, audio y video) en una página HTML. Los elementos <p> dentro de cada <object> funcionan como fallback content, proporcionando una alternativa en caso de que el recurso no pueda cargarse correctamente.



Colaboraciónes de nuestros usuarios

¿Tienes algo que agregar? ¡Déjanos tu colaboración!

Contribuye a mejorar esta definición.