34-Iframe en html

Jorge Catalao octubre 21, 2024
HTML


Un iframe en HTML (o "inline frame") es un elemento que permite incrustar otro documento HTML dentro de la página actual. Es como una ventana dentro de una página web que carga otro contenido, el cual puede ser una página web completa, un video, una imagen, o cualquier otro recurso externo.

El elemento <iframe> es útil para integrar contenido externo sin que se mezcle con el contenido del documento principal. Se utiliza con frecuencia para incrustar cosas como videos de YouTube, mapas, o incluso otros sitios web.





Ejemplo de un iframe

Un iframe (inline frame) es un elemento HTML que permite incrustar otro documento HTML dentro de la página actual. Esto puede ser útil para mostrar contenido externo, como un video, un mapa o incluso otro sitio web completo, sin que el usuario tenga que abandonar la página.

El iframe se define utilizando la etiqueta <iframe>, la cual incluye el atributo src para indicar la URL del contenido que queremos incrustar. También podemos definir el tamaño del iframe mediante los atributos width y height.

Aquí tienes la sintaxis básica de un iframe: 

<iframe src="URL_del_contenido" width="1200" height="400"></iframe>

En este caso, el contenido externo especificado por la URL se mostrará dentro del iframe con un tamaño de 600 píxeles de ancho y 400 píxeles de alto.

A continuación, te mostramos un ejemplo funcional que incrusta un video de YouTube desde el canal de "FrioyElectronica".


Ejemplo

El siguiente es un ejemplo de un iframe que muestra un video de YouTube desde el canal de "FrioyElectronica":



El código para incrustar este video es el siguiente:

<iframe width="424" height="238" src="https://www.youtube.com/embed/ne4e48l-_1w" 
  title="FrioyElectronica" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; 
  gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" 
  allowfullscreen></iframe>


...
Sintaxis de un iframe

La etiqueta <iframe> en HTML se utiliza para incrustar contenido de otra página web o recurso dentro de la página actual. Esta es una herramienta común para mostrar videos, mapas o cualquier contenido de terceros sin que el usuario tenga que abandonar la página.

Un iframe se define con varios atributos que permiten personalizar cómo se mostrará el contenido incrustado:

  • src: La URL del contenido que se desea mostrar.
  • width: El ancho del iframe (en píxeles o porcentaje).
  • height: La altura del iframe (en píxeles o porcentaje).
  • title: Proporciona una descripción del iframe, útil para accesibilidad.
  • frameborder: Define si el iframe debe tener borde (valor "0" para sin borde).
  • allowfullscreen: Permite que el contenido del iframe se expanda a pantalla completa.
  • referrerpolicy: Especifica la política de referencia del iframe.

A continuación, te mostramos la sintaxis básica de un iframe: 

<iframe src="URL_del_contenido" width="1200" height="400" frameborder="0" allowfullscreen></iframe>

En el ejemplo anterior, el contenido especificado por la URL se incrustará en la página actual con un ancho de 600 píxeles y una altura de 400 píxeles, sin borde, y permitiendo que el contenido se vea en pantalla completa.


Ejemplo

Este es un ejemplo básico de un iframe que muestra una página web externa:



El código correspondiente es:

<iframe src="https://frioyelectronica.blogspot.com" width="1200" height="400" frameborder="0" allowfullscreen></iframe>

El iframe anterior mostrará la página web de "example.com" incrustada dentro de la página actual.



Altura y anchura de un iframe

La altura y la anchura de un iframe son atributos fundamentales que determinan el tamaño del área visible del contenido que se incrusta en la página. Estos atributos se establecen usando width y height en la etiqueta <iframe>.

Es importante elegir adecuadamente el tamaño del iframe para asegurar que el contenido se visualice correctamente y sea accesible para los usuarios. Se pueden definir estas dimensiones en píxeles (por ejemplo, width="1200") o en porcentajes (por ejemplo, width="100%"), lo que permite que el iframe se ajuste al tamaño del contenedor en el que se encuentra.

Aquí tienes un ejemplo de cómo establecer la altura y la anchura de un iframe: 

<iframe src="URL_del_contenido" width="1200" height="400"></iframe>

En este caso, el iframe tendrá un ancho de 600 píxeles y una altura de 400 píxeles.


Ejemplo

A continuación, se muestra un ejemplo de un iframe con dimensiones específicas:



El código correspondiente para este iframe es:

<iframe src="https://frioyelectronica.blogspot.com" width="1200" height="400" frameborder="0" allowfullscreen></iframe>

En este ejemplo, el iframe mostrará el contenido de "example.com" con un ancho de 600 píxeles y una altura de 400 píxeles.

Si deseas que el iframe se ajuste al ancho de su contenedor, puedes usar un valor porcentual para el ancho: 

<iframe src="https://frioyelectronica.blogspot.com" width="100%" height="400"></iframe>

En este caso, el iframe se ajustará automáticamente al ancho del contenedor que lo rodea, manteniendo la altura en 400 píxeles.



Quitar el borde del iframe

Por defecto, muchos navegadores muestran un borde alrededor de los iframes. Sin embargo, es posible quitar ese borde para que el iframe se integre mejor con el diseño de tu página. Para eliminar el borde, se utiliza el atributo frameborder y se le asigna el valor 0.

Además de utilizar el atributo frameborder, también se puede controlar el estilo del borde a través de CSS. Se puede usar CSS para establecer la propiedad border en none o 0 para eliminar el borde visualmente.

Aquí tienes un ejemplo de cómo quitar el borde de un iframe usando el atributo frameborder: 

<iframe src="URL_del_contenido" width="1200" height="400" frameborder="0"></iframe>

En este ejemplo, el borde del iframe se eliminará gracias a la configuración del atributo frameborder.


Ejemplo

Este es un ejemplo de un iframe sin borde:



El código correspondiente para este iframe es:

<iframe src="https://frioyelectronica.blogspot.com" width="1200" height="400" frameborder="0" allowfullscreen></iframe>

Como se puede ver, al utilizar frameborder="0", se elimina el borde alrededor del iframe, lo que permite que el contenido se visualice sin distracciones.

Alternativamente, se puede usar CSS para eliminar el borde. Aquí hay un ejemplo: 

<iframe src="https://frioyelectronica.blogspot.com" width="1200" height="400" style="border: none;" allowfullscreen></iframe>

En este caso, se establece style="border: none;" para eliminar el borde visualmente, logrando el mismo efecto que con frameborder="0".



Objetivo para un enlace

Un iframe se puede utilizar como el marco de destino para un enlace. Esto significa que cuando se hace clic en un enlace, el contenido del enlace se mostrará dentro del iframe en lugar de en la ventana o pestaña principal del navegador.

Para lograr esto, el atributo target del enlace debe referirse al atributo name del iframe. Al hacerlo, el contenido del enlace se carga dentro del iframe especificado.

Aquí tienes un ejemplo de cómo configurar un iframe como marco de destino para un enlace: 

<iframe name="miIframe" width="1200" height="400" frameborder="0"></iframe>

En este ejemplo, el iframe tiene el atributo name="miIframe".


Ejemplo

A continuación, se muestra un ejemplo de un enlace que utiliza un iframe como marco de destino:



Haz clic en los siguientes enlaces para cargar contenido en el iframe:

Cargar Frioyelectronica
Cargar Wikipedia

El código correspondiente para este iframe y enlaces es: 

<iframe name="miIframe" width="1200" height="400" frameborder="0"></iframe>
<a href="https://frioyelectronica.blogspot.com" target="miIframe">Cargar Example.com</a>
<a href="https://www.wikipedia.org" target="miIframe">Cargar Wikipedia</a>

Al hacer clic en cualquiera de estos enlaces, el contenido correspondiente se cargará dentro del iframe en lugar de abrirse en una nueva pestaña.



Resumen de los Temas

En este capítulo, hemos cubierto los siguientes temas relacionados con el uso de iframes en HTML:

Cada uno de estos temas es fundamental para comprender cómo funcionan los iframes, cómo se pueden utilizar en tus proyectos web y cómo mejorar la experiencia del usuario al incrustar contenido externo en tus páginas.

A medida que avances en tu aprendizaje, será importante experimentar con estos conceptos y aplicarlos en ejemplos prácticos.






Tags:
Jorge Catalao

Posted by: Jorge Catalao

Durante el decorrer de los años y ya desde niño mis gustos preferidos, fue siempre la electrónica y la programación, eso que llevo a que me formase en varias escuelas profesionales, en temas tales como: electrónica Electricidad programación Técnicas de refrigeración etc. Tengo varias carreras profesionales relacionadas a los temas anteriormente descritos, precisamente por ese motivo, me he entusiasmado a crear un blog donde los temas serán los mencionados anteriormente. Espero que a mis visitantes les guste, y se aprovechen de los conocimientos que llevo años recopilando. Si eres estudiante de electricidad, electrónica o programación, aquí vas adquirir los conocimientos básicos, tanto para que continúes tus estudios, como para tu formación profesional. Cursos completos desde cero, los iré recopilando poco a poco, los cuales servirán para consulta tanto de estudiantes como electricistas profesionales, será como un manual o mas bien dicho un resumen donde podremos encontrar lo que necesitamos. Bueno espero que vos guste y me seguis, ya que los temas los ire duplicar tanto nel blog, como en mi canal de youtube.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias