Los frames en HTML son una forma de dividir tu página web en varias secciones independientes, cada una capaz de mostrar su propio contenido HTML. Esto puede ser increíblemente útil para mostrar diferentes tipos de contenido de forma simultanea, como un menú de navegación a un lado, un título en la parte superior y el contenido principal en el centro.
Si estás buscando saber más sobre el mundo del HTML y CSS, has llegado al lugar correcto, ya que, a continuación, exploramos los marcos o frames en HTML.
¿Qué son los frames en HTML?
Los frames son un elemento de HTML que, como su nombre indica, crean marcos o frames en nuestra página web. Este concepto puede sonar un poco abstracto, pero seguro que has visto estos marcos en acción. Los frames en HTML nos permiten dividir nuestra página web en secciones o áreas horizontales y verticales, que pueden llenarse con contenido de diferentes URL.
Imagina que tienes un lienzo gigante para pintar. Puedes decidir pintar una sola imagen enorme en todo el lienzo, que es lo que normalmente ocurre en una página web. Pero ¿qué pasaría si quisieras dividir ese lienzo en secciones más pequeñas y que cada una mostrase una pintura diferente? Aquí es donde entran en juego los frames.
¿Cómo funcionan los frames en HTML?
Los frames en HTML se implementan a través de la etiqueta <frame>, que se coloca dentro de una etiqueta <frameset>. La etiqueta <frameset> se utiliza para especificar cuántos marcos se deben crear en la página web y las dimensiones de estos marcos. Estas dimensiones se pueden establecer en términos de porcentajes o píxeles.
Los frames nos permiten tener diferentes páginas web, que se muestran en la misma ventana del navegador, lo que es útil para, por ejemplo, los menús de navegación.
<frameset rows="50%,50%"> <frame src="pagina1.html"> <frame src="pagina2.html"> </frameset>
En este código, hemos creado dos frames horizontales, cada uno ocupa el 50% del espacio vertical disponible.
HTML, CSS y los frames
Aunque los marcos pueden parecer estáticos y aburridos, con algo de HTML y CSS podemos hacer que sean más interesantes y atractivos. Con CSS podemos controlar el color de fondo, los bordes y más de cada marco. ¡El límite es tu creatividad!
Dónde se utilizan los frames en HTML
El uso de frames se considera obsoleto en la versión actual de HTML (HTML5) y ha sido reemplazado por CSS para lograr layouts más flexibles y estilizados. Hay un elemento similar llamado <iframe> que sigue siendo muy útil hoy en día, especialmente cuando quieres incorporar contenido de otra página web, como un vídeo de YouTube o un mapa de Google, directamente en tu propia página.
Los iframes son una forma popular de incrustar vídeos de YouTube en una página web. YouTube proporciona un código de iframe que puedes copiar y pegar en tu propio código HTML. Esto es muy útil para los bloggers y creadores de contenido que desean compartir vídeos en sus páginas web.
Este marco incorporado o inline frame permite incrustar otra página web dentro de tu propia página. Podrías tener la página web de Apple funcionando dentro de tu propia página web.
Por ejemplo, si estás creando una página web para un restaurante y quieres que los visitantes puedan ver su ubicación en Google Maps, puedes hacerlo con un <iframe>. Google Maps proporciona un código HTML que puedes copiar y pegar en tu propio código.
Observa este ejemplo:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3818.890309176828!2d-3.7151403!3d40.4761507!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2ses!4v1405360968295" width="600" height="450" style="border:0" allowfullscreen="" loading="lazy"></iframe>
Este código genera un mapa interactivo de la ubicación especificada, que se puede explorar directamente desde tu página web.
El problema de los frames
Aunque los frames son herramientas útiles, también tienen sus desventajas. Algunas páginas web no permiten que su contenido sea incrustado en otras páginas web a través de frames. Esto es para evitar que los propietarios de otras páginas web puedan simular que están mostrando la misma web y, posiblemente, capturar ciertos eventos o información.
¿Quieres ser un experto?
Ahora que conoces cómo utilizar estos marcos en HTML, puedes experimentar con ellos y ver cómo pueden mejorar tu página web. Si estás interesado en aprender más sobre HTML, CSS, o cualquier otro tema relacionado con el desarrollo web, te recomendamos que te apuntes a nuestro Desarrollo Web Full Stack Bootcamp. Con esta formación íntegra e intensiva, en poco meses estarás listo para destacar en el mercado laboral. ¡Entra ahora y atrévete a cambiar tu vida!
