▷ Creación de MENÚS y IFRAMES con HTML y CSS
🌐 ¿Qué es un <iframe> en HTML y cómo se usa?
La etiqueta <iframe> en HTML se utiliza para incrustar contenido externo dentro de una página web, como si fuera una ventana que muestra otra página. Es muy útil para insertar videos, mapas, formularios o incluso navegar otras secciones de tu propio sitio desde un menú.
📌 Sintaxis básica de <iframe>
<iframe src="https://www.ejemplo.com" width="600" height="400"></iframe>
🔎 Con eso puedes mostrar otra página web dentro de la tuya.
🎥 Ejemplo: Insertar un video de YouTube
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="YouTube video" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
Este ejemplo muestra cómo incrustar un video directamente en tu página usando un iframe.
🗺️ Ejemplo: Insertar un mapa de Google Maps
<iframe
src="https://www.google.com/maps/embed?pb=..."
width="600" height="450" style="border:0;"
allowfullscreen="" loading="lazy"></iframe>
Los mapas son otro uso muy común del iframe.
📁 Menú para cambiar el contenido del iframe
También puedes usar un menú con enlaces para cambiar el contenido que se muestra dentro del iframe, sin recargar toda la página.
📄 HTML completo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo con iframe y menú</title>
</head>
<body>
<h2>Navega en el iframe usando el menú</h2>
<nav>
<ul>
<li><a href="https://es.wikipedia.org/wiki/HTML" target="miiframe">HTML</a></li>
<li><a href="https://es.wikipedia.org/wiki/CSS" target="miiframe">CSS</a></li>
<li><a href="https://es.wikipedia.org/wiki/JavaScript" target="miiframe">JavaScript</a></li>
</ul>
</nav>
<iframe name="miiframe" width="100%" height="400" style="border: 1px solid #ccc;"></iframe>
</body>
</html>
🔁 Cada vez que hagas clic en un enlace, el contenido del iframe cambiará sin necesidad de recargar toda la página.
⚠️ Cosas importantes a considerar
- 🔒 Algunas páginas bloquean el uso de iframes por motivos de seguridad. Si no funciona, es probable que el servidor tenga activa la política
X-Frame-Options. - 📱 Asegúrate de que el iframe tenga un diseño responsivo o scroll interno si el contenido no se ajusta.
- 💡 Usa
nameen el iframe ytargeten los enlaces para vincularlos correctamente.
🧪 Ejercicio sugerido
Crea una página con un menú y un iframe donde los usuarios puedan navegar entre 3 páginas distintas de tu propio sitio. Usa target y name como en el ejemplo anterior.
Me encantaría saber tu opinión sobre este tema. Déjame un comentario aquí abajo 💬 y, si te gustó el contenido, ¡no olvides seguir el blog para no perderte las próximas publicaciones! 📚✨
Comentarios