Puede que resulte un poco complejo hacer un marco en HTML, pero te aseguro que puedes dominar esta habilidad si aprendes a usar las herramientas adecuadas y, por supuesto, si practicas constantemente. Además, aprender a hacer un marco en HTML te ayudará a mejorar drásticamente la estructura y navegación de tus páginas web. Por eso, conforme vayas leyendo este artículo, conocerás cómo hacer un marco en HTML usando técnicas clásicas y modernas.

¿Qué encontrarás en este post?

¿Qué es un marco en HTML?

Si vas a aprender a hacer un marco en HTML, debes saber qué es. Se trata de una técnica que ayuda a dividir una página web en varias secciones. Cada sección puede mostrar contenido diferente y de forma independiente.

Anteriormente, se usaba la etiqueta <frameset> que permitía dividir la ventana del navegador en diferentes segmentos, pero ha caído en desuso por la llegada de HTML5. De todas maneras sigue siendo una herramienta bastante útil en situaciones específicas, por eso es importante entender su funcionamiento.

Cómo hacer un marco en HTML

Crear una página web con frames

Para crear una página web con frames:

Primero debes definir la estructura básica con <frameset>.
Dentro de esta etiqueta, especificas el número de filas o columnas que quieres y el tamaño de cada una.
Luego, insertas un <frame> por cada sección que desees crear. Te quedará algo así:

<html>
    <head>
        <title>Mi primera página WEB: Frames</title>
    </head>
    <frameset cols="20%,*">
         <frame id="frmIzquierdo" name="frmIzquierdo" src="pagina2.html" />
         <frame id="frmDerecho"   name="frmDerecho"   src="pagina3.html" />
         <noframes>
             <body>Su navegador no soporta frames</body>
         </noframes>
    </frameset>
</html>

Como ves, la página se divide en dos columnas: la primera ocupa el 20% del ancho de la ventana y la segunda el resto. Cada una de estas columnas carga un archivo HTML diferente.

Atributos esenciales de <frameset> y <frame>

Cuando trabajas con frames, es importante conocer los atributos clave que puedes utilizar para personalizar tu marco en HTML:

cols: Define el número de columnas y su tamaño en píxeles o porcentaje.
rows: Similar a cols, pero para filas.
frameborder: Indica si se debe mostrar el borde del frame (1) o no (0).
marginheight y marginwidth: Especifican los márgenes entre el contenido del frame y sus bordes.
noresize: Evita que los usuarios redimensionen el frame.
scrolling: Controla si se muestran barras de desplazamiento.

Por ejemplo, para crear un marco que no se pueda redimensionar y sin barras de desplazamiento, podrías escribir:

<frame src="pagina1.html" frameborder="0" noresize scrolling="no">

Uso de <iframe> para hacer un marco en HTML: la alternativa moderna

Aunque los <frameset> y <frame> han sido útiles, el uso de <iframe> es mucho más común en la actualidad para hacer un marco en HTML, especialmente porque HTML5 ha dejado de soportar las etiquetas de frames tradicionales.

Un <iframe> permite incrustar otra página web dentro de la actual, proporcionando mayor flexibilidad y control.

<html>
    <head>
        <title>Mi primera página WEB: iframe</title>
    </head>
    <body>
        <p>Un párrafo</p>
         <iframe src="pagina3.html" width="25%" height="200">
           <p>Su navegador no soporta iframes.</p>
         </iframe>
        <p>Otro párrafo.</p>
    </body>
</html>

En este ejemplo, el <iframe> carga el contenido de pagina3.html dentro de un cuadro que ocupa el 25% del ancho de la página principal y tiene una altura de 200 píxeles.

Atributos de <iframe>

src: La URL que se cargará dentro del marco.
width y height: Definen el ancho y alto del marco en píxeles o porcentaje.
scrolling: Especifica si se deben mostrar barras de desplazamiento (auto, yes, no).
align: Alinea el marco en la página (left, right, top, bottom, middle).
frameborder: Similar al de <frame>, controla la visibilidad del borde.

Ventajas y desventajas de usar marcos en HTML

Al hacer un marco en HTML debes considerar las siguientes ventajas y desventajas:

Ventajas:

Modularidad: Los marcos permiten dividir una página en secciones modulares, facilitando la actualización de contenido.
Navegación: Puedes crear menús de navegación que permanecen visibles mientras el contenido cambia.

Desventajas:

Compatibilidad: No todos los navegadores soportan bien los frames, especialmente en dispositivos móviles.
SEO: Los frames pueden afectar negativamente al SEO, ya que los motores de búsqueda pueden tener dificultades para indexar correctamente el contenido.

Mejores prácticas para usar marcos en HTML

Si decides usar marcos en HTML, ya sea con <frameset> o <iframe>, sigue estas mejores prácticas para asegurarte de que tu sitio web sea accesible y eficiente:

Usa <iframe> para la mayoría de los casos: Es más flexible y ampliamente soportado en navegadores modernos.
Evita el uso excesivo: Los marcos pueden complicar la navegación y afectar la experiencia del usuario.
Incluye un <noframes> o un mensaje alternativo: Para navegadores que no soporten frames, ofrece una alternativa.
Optimiza para SEO: Minimiza el uso de marcos que puedan fragmentar tu contenido y dificultar la indexación.

Aprender a hacer un marco en HTML, ya sea utilizando las técnicas tradicionales con o las más modernas, te permitirá crear estructuras web más sofisticadas y funcionales. Si te apasiona el desarrollo web y quieres dominar estas y otras técnicas avanzadas, apúntate al Bootcamp de Desarrollo Web de KeepCoding. Este Bootcamp no solo te enseñará a dominar HTML, sino que también te preparará para enfrentar los retos del sector IT, un área en constante crecimiento y con una alta demanda de profesionales. ¡Transforma tu futuro y alcanza nuevas alturas en tu carrera!