Cómo incrustar iFrames en nuestra página HTML

Curso de HTML

30.  
31.  
33.  
35.  
48.  

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

<a href="https://pablomonteserin.com/" target="nombreDelIframe">Otra página</a>

<iframe src = "http://csszengarden.com/" width="500px" height="500px" name="nombreDelIframe"></iframe>

Notas

  • El atributo target define dónde se va a cargar la información del enlace. En este caso, debe coincidir con el valor del atributo name del iframe.
  • Ojo! El iframe no se cierra en la propia etiqueta (<iframe />).

Razones por las que no debes utilizar frames:

  • Están desaconsejados por el W3C.
  • El usuario debe entrar siempre por la página principal, donde se encuentra la declaración de marcos. Si accediese por otra página diferente se perdería elementos tales como la navegación (el uso más frecuente de los frames)
  • Al no cambiar la URL en las diversas páginas, el usuario no podrá añadir a sus favoritos secciones de la página
  • Los botones «anterior» y «siguiente» de los navegadores pueden no funcionar adecuadamente. Así mismo podemos dificultar el uso del Historial del Navegador.
  • Si el usuario desea imprimir la página podemos obtener resultados no deseados.
  • No podemos promocionar páginas interiores ya que necesitamos que los visitantes accedan por la página principal.
  • «Esta página utiliza frames pero su navegador no lo soporta»

Atributo target

Determina dónde se va a cargar la información de un enlace. Por defecto no se pone y la web se cargará en la propia pestaña.

target="_blank" cargará la información en una nueva pestaña.
<a href="#" target="_blank"></a>

Ejercicio Iframe

En una página html, inserta un iframe que permita visualizar un video de youtube, un video de vimeo y un mapa de Google Maps.

Ver código fuente

Ejercicio iframe 2

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.