Objetos

Insertar documentos html: <iframe>

La etiqueta <iframe> permite insertar un documento html dentro de otro. La etiqueta <iframe> puede aparecer como elemento de bloque o como elemento en-línea.

<iframe
  src="ejemplo-iframe.html">
</iframe>
Enlace externo

El tamaño predeterminado del <iframe> es de 300px x 150px, aunque depende del espacio libre disponible. Si se tiene que hacer más pequeño, los navegadores conservan la proporción 2:1 del elemento. Referencias: anchura (CSS 2), altura (CSS 2), stackoverflow nº 5871668.

El tamaño del <iframe>se puede establecer con las propiedades de estilo width y height

<iframe
  src="ejemplo-iframe.html"
  style="width: 400px; height: 200px;">
</iframe>
Enlace externo

El documento puede estar en otro servidor, como en este ejemplo en el que se inserta un mapa de Google Maps:

<iframe width="425" height="350"
        src="https://www.google.com/maps/embed?origin=mfe&pb=!1m14!1m8!1m3!1d24637.230090345016!2d-0.382204!3d39.477148!3m2!1i1024!2i768!4f13.1!3m3!1m2!2sies+abastos!4s11271517402525668942!6i14!3m1!1ses!5m1!1ses">
</iframe>
Enlace externo

Insertar objetos: <object> y <param>

La etiqueta <object> permite insertar cualquier tipo de documentos (no solamente de texto) dentro de un documento html. Para poder mostrar esos archivos, el navegador suele necesitar plug-ins. Algunos tipos de documentos necesitan información adicional que se proporciona mediante la etiqueta vacía <param>.

Ejemplos de inserción de objetos

Insertar una página web

Se puede insertar una página web en una página web mediante la etiqueta <object>, como muestra el siguiente ejemplo.

<object
  type="text/html"
  data="ejemplo-object.html"
  style="width: 400px; height:200px;">
  ERROR (no puede mostrarse el objeto)
</object>
Enlace externo
<object
  type="text/html"
  data="https://www.google.com/maps/embed?origin=mfe&pb=!1m14!1m8!1m3!1d24637.230090345016!2d-0.382204!3d39.477148!3m2!1i1024!2i768!4f13.1!3m3!1m2!2sies+abastos!4s11271517402525668942!6i14!3m1!1ses!5m1!1ses"
  style="width: 425px; height:350px;">
  ERROR (no puede mostrarse el objeto)
</object>
Enlace externo

Insertar un archivo flash SWF

Se puede insertar un archivo flash SWF en cualquier página web, como muestra el siguiente ejemplo.

<object
  type="application/x-shockwave-flash"
  data="ejemplo-flash.swf"
  style="width: 200px; height: 50px;">
  <param
    name="movie"
    value="ejemplo-flash.swf">
  ERROR (no puede mostrarse el objeto)
</object>
Enlace externo

Insertar un vídeo de YouTube

Los vídeos de YouTube pueden obtenerse en formato Flash, por lo que se pueden insertar en una página web mediante la etiqueta <object>, como muestra el siguiente ejemplo. Para insertar otro vídeo habría que sustituir el código del vídeo en el atributo data (en el ejemplo, el código del vídeo es vZV-t3KzTpw).

<object
  type="application/x-shockwave-flash"
  data="https://www.youtube.com/v/vZV-t3KzTpw"
  style="width: 425px; height:350px;">
  <param
    name="movie"
    value="https://www.youtube.com/v/vZV-t3KzTpw">
  ERROR (no puede mostrarse el objeto)
</object>
Enlace externo

Insertar un archivo PDF

Se puede insertar un archivo PDF en cualquier página web, como muestra el siguiente ejemplo. Para insertar otro archivo PDF habría que indicar la URI del archivo mediante el atributo data (en el ejemplo, es simplemente ejemplo.pdf).

<object
  type="application/pdf"
  data="ejemplo-pdf.pdf"
  style="width: 400px; height: 550px;">
  ERROR (no puede mostrarse el objeto)
</object>
Enlace externo