Marcos o frames en html, una tecnología obsoleta

14. Marcos o frames
Aunque HTML5 considera obsoleto el uso de marcos y está desaconsejado su uso, es imprescindible conocer su funcionamiento ya que todavía hay una gran cantidad de sitios web implementados con este método.
Los marcos o frames nos permiten dividir una web en varias ventanas que pueden cargar otras páginas webs. Se trata de ventanas independientes incorporadas en una misma página y que nos permiten distribuir la información de forma organizada.
La ventana se puede dividir en marcos horizontales o verticales, pero no ambos. De todas formas, existe la posibilidad de que un marco contenga a su vez otros marcos. Así los marcos se pueden anidar para hacer todo tipo de distribuciones.
14.1. Algunos motivos por los que ya no se utilizan los marcos frames o framesets
- Los motores de búsqueda no indexan bien las páginas creadas con framesets.
- Ocupan espacio de la pantalla.
- Las funcionalidades de ir para adelante o para atrás en el historial de navegación del navegador no se pueden utilizar.
- Presentan problemas de usabilidad y accesibilidad web.
14.2. Marcos o frames en HTML
Se utiliza la etiqueta <frameset>
para definir la división de la ventana. La pantalla se puede dividir en filas (rows) o en columnas (cols). El valor de la división se puede realizar de tres formas diferentes:
Dando un valor fijo del ancho del marco en píxeles:
rows= 150, ...
Indicando un porcentaje del tamaño de la ventana:
cols= 25%, ...
Mediante un valor relativo que dependa del espacio libre de la ventana. El asterisco (*) indica el resto del espacio.
rows= 100,*
En el ejemplo siguiente se crearán tres marcos. El marco superior tendrá 100 píxeles de alto, el segundo ocupará el 25% de la ventana y el tercero el ancho del espacio sobrante.
rows= 100,25%,*
Ejemplo
1) Marco de 3 ventanas verticales (cols)
Vista:
a | b | c |
Código:
<frameset cols=30%,20%,50%> <frame src="a.htm"> <frame src="b.htm"> <frame src="c.htm"> </frameset>
2) Marco de 3 ventanas horizontales (rows)
Vista:
a |
b |
c |
Código:
<frameset rows=30%,20%,50%> <frame src="a.htm"> <frame src="b.htm"> <frame src="c.htm"> </frameset>
3) Marco con un área vertical y dos horizontales
Vista:
a | b |
c |
Código:
<frameset cols=20%,> <frame src="a.htm"> <frameset rows=30%,> <frame src="b.htm"> <frame src="c.htm"> </frameset> </frameset>
4) Marco con un área horizontal y dos verticales
a | |
b | c |
<frameset rows=50%,> <frame src="a.htm"> <frameset cols=70%,> <frame src="b.htm"> <frame src="c.htm"> </frameset> </frameset>Ver más ejemplos