Introducción a Iframes en HTML

Los iframes en HTML no son más que marcos en línea que se utilizan como documento HTML para agregarle otro documento HTML. Se usa principalmente en páginas web o procesos de desarrollo web para incluir algún otro contenido a través de otra fuente, como anuncios en esa página web.

La mayoría de los diseñadores web usan Iframe para presentar aplicaciones interactivas en el sitio web o en páginas web. Se hace posible utilizando javaScript o utilizando el atributo de destino en HTML.

El objetivo principal de Iframe es mostrar una página web dentro de otra página web. El marco en línea debe mostrarse utilizando una etiqueta llamada

  • También es posible dar un alto y ancho específicos a nuestro Iframe en formato de píxeles de la siguiente manera:
  • En la sintaxis anterior, todo irá igual, además, podemos especificar la altura y el ancho en formato de píxeles definiendo como

Ejemplo:

  • En la siguiente sintaxis se muestra un método más para definir la altura y el ancho del iframe mediante el uso de valores a través de CSS:
  • Todas las cosas son iguales a las anteriores, solo que cambian al especificar valores.

Ejemplo:

  • Una característica más se agrega al iframe es que podemos eliminar los bordes ya definidos al marco mediante el uso de la propiedad border none. La sintaxis para esto es la siguiente:
  • Con la ayuda de CSS, también es posible hacer muchas cosas con el borde, como cambiar el tamaño del borde, aplicar un poco de color al borde, etc.

El iframe se puede usar como destino para un enlace utilizando la sintaxis:

  • En la sintaxis anterior, src es nuestra URL normal, aquí el atributo de destino del enlace se referirá al atributo de nombre en nuestra etiqueta de iframe.

Ejemplo:

Atributo de etiqueta de marcos flotantes

Hay diferentes etiquetas de atributos que se usan en los Iframes, que son las siguientes:

  • Src: este atributo se utiliza para insertar archivos que deben incluirse en el marco. URL especifica la página web de destino que se cargará dentro de un iframe.
  • Nombre: Nombre es un atributo que se usa para dar un nombre de identificación al marco. Es más útil cuando está creando un enlace para abrir otra página web.
  • allowfullscreen: este atributo le permite mostrar su marco en el formato de ancho completo. así que tenemos que establecer el valor verdadero para que suceda esta función
  • Frameborder: este es un atributo útil que le permite mostrar el borde o no mostrarlo en el marco. El valor 1 es mostrar el borde y 0 para no mostrar el borde del marco.
  • Ancho de margen: le permite definir el espacio entre el lado izquierdo y derecho del marco
  • Altura de margen: le permite definir el espacio entre la parte superior e inferior del marco.
  • Desplazamiento: estos atributos se utilizan para controlar si la barra de desplazamiento se mostrará o no en el cuadro. los valores incluidos son 'yes' o 'no' o 'auto'.
  • Altura: solía definir la altura del marco. Clima en% o en píxeles
  • Ancho: solía definir el ancho del marco. Clima en% o en píxeles
  • Longdesc: Con la ayuda de este atributo, puede vincular otra página con una descripción larga del contenido de su marco.

Ejemplos de iframes en HTML

Aquí hay algunos ejemplos de Iframes en HTML que se explican a continuación:

Ejemplo 1

Consideremos un ejemplo en el que vamos a mostrar cómo crear un iframe con una altura y ancho específicos.

Código:

Demostración de iframes HTML


Aquí mostramos un ejemplo de Iframe que contiene Altura y ancho específicos en formato de píxeles

Salida:

Ejemplo # 2

Consideremos otro ejemplo en el que vamos a mostrar cómo crear un iframe con una altura y ancho específicos. Pero en este ejemplo, estamos especificando la altura y el ancho a través de CSS. Aquí podemos ver que la barra de desplazamiento se está ajustando según el tamaño del contenido.

Código:

Demostración de iframes HTML


Aquí mostramos un ejemplo de Iframe que contiene Altura y ancho específicos en formato de píxeles

Salida:

Ejemplo # 3

Aquí estamos considerando un ejemplo en el que vamos a agregar un borde al iframe agregando algunas propiedades CSS adicionales para mostrar un cambio en el tamaño del borde, cambio en el color del borde, etc. Para que podamos agregar tanto como estilo a nuestro iframe.

Código:

Demostración de iframes HTML


Aquí mostramos un ejemplo de Iframe que contiene un borde con algunas propiedades CSS adicionales

Salida:

Ejemplo # 4

Consideremos otro ejemplo en el que vamos a mostrar cómo el objetivo de atributo para abrir un enlace de una página web utilizando un iframe.

Código:

Demostración de iframe: objetivo de un enlace


EDUCBA

Cuando el objetivo de un enlace coincide con el nombre de un iframe, el enlace se abrirá en el iframe.

Salida:

Salida objetivo:

Como se muestra en el ejemplo anterior, podemos hacer clic en el enlace de destino EDUCBA para que se abra la siguiente página web que se muestra a continuación.

Conclusión

De toda la información anterior, concluyó que el iframe es un marco en línea que incluye otro documento HTML en sí mismo. Se considera el elemento HTML más potente para fines de diseño web. Con la ayuda de este, también puede agregar contenido de otra fuente. Utiliza diferentes tipos de atributos HTML como Atributos globales, Atributos de eventos, algunas páginas relacionadas, etc.

Artículos recomendados

Esta es una guía de los iframes en HTML. Aquí discutimos la sintaxis, el atributo de etiqueta de iframes en HTML junto con los diversos ejemplos y la implementación del código. También puede consultar los siguientes artículos para obtener más información:

  1. Comandos de selenio
  2. Marcos HTML
  3. Enlace de texto HTML
  4. Crear tablas en HTML

Categoría:

Herramientas de desarrollo web