El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Usando Iframes

Siguiente ►
►

Introducción

Los iframes (marcos en línea) son elementos HTML que permiten incrustar otro documento HTML dentro de la página actual. Son útiles para mostrar contenido de otras fuentes, como videos de YouTube, mapas de Google, o incluso otras páginas web.

Conceptos Clave

  • Iframe: Un elemento HTML que permite incrustar otro documento HTML dentro de la página actual.
  • Atributos comunes: src, width, height, frameborder, allowfullscreen, entre otros.

Estructura Básica de un Iframe

La estructura básica de un iframe es bastante simple. Aquí hay un ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Iframe</title>
</head>
<body>
    <h1>Mi Página con Iframe</h1>
    <iframe src="https://www.ejemplo.com" width="600" height="400" frameborder="0"></iframe>
</body>
</html>

Explicación del Código

  • <iframe>: La etiqueta que define el iframe.
  • src: El atributo que especifica la URL del documento que se va a incrustar.
  • width y height: Atributos que definen el ancho y alto del iframe.
  • frameborder: Atributo que define si el borde del iframe es visible (0 para ocultar, 1 para mostrar).

Atributos Comunes de Iframes

src

El atributo src es obligatorio y define la URL del documento que se va a incrustar.

<iframe src="https://www.ejemplo.com"></iframe>

width y height

Estos atributos definen el tamaño del iframe.

<iframe src="https://www.ejemplo.com" width="600" height="400"></iframe>

frameborder

Este atributo define si el borde del iframe es visible. Los valores comunes son 0 (sin borde) y 1 (con borde).

<iframe src="https://www.ejemplo.com" frameborder="0"></iframe>

allowfullscreen

Este atributo permite que el iframe se muestre en pantalla completa.

<iframe src="https://www.ejemplo.com" allowfullscreen></iframe>

Ejemplo Práctico

Vamos a crear una página HTML que incruste un video de YouTube usando un iframe.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video de YouTube en Iframe</title>
</head>
<body>
    <h1>Video de YouTube</h1>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>

Explicación del Código

  • src="https://www.youtube.com/embed/dQw4w9WgXcQ": URL del video de YouTube que se va a incrustar.
  • allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture": Permisos adicionales para el iframe.
  • allowfullscreen: Permite que el video se vea en pantalla completa.

Ejercicio Práctico

Ejercicio

Crea una página HTML que incruste un mapa de Google utilizando un iframe. Usa las siguientes especificaciones:

  • El mapa debe mostrar la ubicación de la Torre Eiffel.
  • El iframe debe tener un ancho de 600 píxeles y una altura de 450 píxeles.
  • El borde del iframe debe estar oculto.

Solución

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mapa de Google en Iframe</title>
</head>
<body>
    <h1>Mapa de la Torre Eiffel</h1>
    <iframe 
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.9999999999995!2d2.294481315674545!3d48.85837007928739!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66f1f06e2b1b1%3A0x40b82c3688c9460!2sTorre%20Eiffel!5e0!3m2!1ses!2sfr!4v1616161616161!5m2!1ses!2sfr" 
        width="600" 
        height="450" 
        frameborder="0" 
        style="border:0;" 
        allowfullscreen="" 
        aria-hidden="false" 
        tabindex="0">
    </iframe>
</body>
</html>

Explicación del Código

  • src: URL del mapa de Google que muestra la ubicación de la Torre Eiffel.
  • width y height: Define el tamaño del iframe.
  • frameborder="0" y style="border:0;": Ocultan el borde del iframe.
  • allowfullscreen, aria-hidden, tabindex: Atributos adicionales para mejorar la accesibilidad y funcionalidad.

Conclusión

Los iframes son una herramienta poderosa para incrustar contenido externo en tu página web. Entender cómo usarlos y configurarlos correctamente te permitirá integrar diversos tipos de contenido de manera efectiva y eficiente. En el siguiente módulo, exploraremos cómo utilizar atributos de datos en HTML para añadir más funcionalidad a tus páginas web.

◄ Anterior
◄
Siguiente ►
►

Curso de HTML

Módulo 1: Introducción a HTML

Módulo 2: Formateo de Texto en HTML

Módulo 3: Enlaces y Medios en HTML

Módulo 4: Tablas en HTML

Módulo 5: Formularios en HTML

Módulo 6: Elementos Semánticos de HTML5

Módulo 7: Técnicas Avanzadas de HTML

Módulo 8: Integración de HTML y CSS

Módulo 9: Diseño Web Responsivo

Módulo 10: Mejores Prácticas y Accesibilidad

Módulo 11: Proyecto: Construyendo un Sitio Web Completo

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados