Los frames (también llamados marcos) son usados para dividir una página web en varias partes, cargando otra página web en cada una de ellas. Por defecto se muestran con un borde que permite redimensionarlos según necesitemos.
Para usar los ejemplos de las siguientes secciones debemos crear los tres archivos siguientes:
pagina1.html:
<html>
<head>
<title>Mi primera página WEB: Frames (página 1)</title>
</head>
<body bgcolor="lightyellow">
<p>Esta es la página 1</p>
</body>
</html>
pagina2.html:
<html>
<head>
<title>Mi primera página WEB: Frames (página 2)</title>
</head>
<body bgcolor="lightblue">
<p>Esta es la página 2</p>
</body>
</html>
pagina3.html:
<html>
<head>
<title>Mi primera página WEB: Frames (página 3)</title>
</head>
<body text="yellow" bgcolor="navy">
<p>Esta es la página 3</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</body>
</html>
Para crear una página web dividida en frames usaremos la etiqueta HTML <frameset>, y dentro de ella insertaremos una etiqueta <frame> por cada marco que deseemos crear, así como la etiqueta <noframes>, cuyo contenido se mostrará en los navegadores web que no soportan frames.
Además de id, name y el resto de atributos estándar, dichas etiquetas HTML admiten los siguientes:
<frameset
cols: separadas mediante comas se indica el número de columnas y el tamaño de las mismas (en
píxels y/o porcentajes).
rows: separadas mediante comas se indica el número de filas y el tamaño de las mismas (en píxels y/o
porcentajes).
>
</frameset>
<frame
frameborder: indica si se mostrará el border del frame o marco o no (1 | 0).
marginheight: margen entre el contenido del frame y sus bordes superior e inferior (en píxels).
marginwidth: margen entre el contenido del frame y sus bordes izquierdo y derecho (en píxels).
noresize: si indicamos este atributo el frame o marco no se podrá redimensionar (en HTML no hay que
asignarle valor alguno, pero según las especificaciones de XHTML es necesario asignarle como valor el
mismo nombre de dicho atributo).
scrolling: especifica si se mostrarán barras de desplazamiento en el frame, pudiendo tomar como valores
auto (se mostrarán sólo en caso necesario para poder hacer scroll en el contenido del marco), no (no se
mostrarán nunca) o yes (estarán siempre visibles).
src: la URL que se cargará en el frame.
>
</frame>
<noframes> no admite atributos que merezca la pena reseñar.
A continuación mostramos un ejemplo de página web con frames:
<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>
El anterior código HTML daría como resultado una página web dividida en dos frames: el primero de ellos con un ancho del '20%' de la ventana del navegador web, y el otro ocuparía el resto del ancho disponible:
En el siguiente ejemplo creamos un <frameset> principal para las columnas, en el que insertamos un <frame> para la de la izquierda, y un <frameset> anidado (en el que a su vez insertamos un <frame> para la fila superior, y otro para la inferior) para la de la derecha:
<html>
<head>
<title>Mi primera página WEB: Frames</title>
</head>
<frameset cols="120,*">
<frame id="frmIzquierdo" name="frmIzquierdo" src="pagina2.html" />
<frameset rows="100,*">
<frame id="frmSuperior" name="frmSuperior" src="pagina1.html" />
<frame id="frmInferior" name="frmInferior" src="pagina3.html" />
</frameset>
<noframes>
<body>Su navegador no soporta frames</body>
</noframes>
</frameset>
</html>
En este otro ejemplo creamos un <frameset> principal para las filas, en el que insertamos un <frame> para la de la arriba, y un <frameset> anidado (en el que a su vez insertamos un <frame> para la columna izquierda, y otro para la derecha) para la de la abajo:
<html>
<head>
<title>Mi primera página WEB: Frames</title>
</head>
<frameset rows="100,*">
<frame id="frmSuperior" name="frmSuperior" src="pagina1.html" />
<frameset cols="150,*">
<frame id="frmIzquierda" name="frmIzquierda" src="pagina2.html" />
<frame id="frmCuerpo" name="frmCuerpo" src="pagina3.html" />
</frameset>
<noframes>
<body>Su navegador no soporta frames</body>
</noframes>
</frameset>
</html>
Con <iframe> podemos crear un marco en el que cargar otra página web dentro de la principal:
Entre sus etiquetas de inicio y cierre podemos escribir un texto que será mostrado en caso de que el navegador web no soporte frames.
Sus principales atributos son:
<iframe
align: alineación horizontal del iframe con respecto a la página (bottom | left | middle | right | top).
height: alto del iframe.
marginheight: margen entre el contenido del iframe y sus bordes superior e inferior (en píxels)
marginwidth: margen entre el contenido del iframe y sus bordes izquierdo y derecho (en píxels)
scrolling: especifica si se mostrarán barras de desplazamiento en el iframe, pudiendo tener valor auto
(se mostrarán sólo en caso necesario para poder hacer scroll en el contenido del marco), no (no se
mostrarán nunca) o yes (estarán siempre visibles).
src: la URL que se cargará en el frame.
width: ancho del iframe (en pixels o porcentaje).
>
</iframe>
Ejemplo:
<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>
