Con el nombre de marcos (frames en inglés) se denominan un tipo de estructuras HTML que permiten dividir una página en dos o más áreas independientes entre sí, en cada una de las cuales podemos cargar un documento diferente. Cada una de estás áreas es susceptible de volver a dividirse en otros marcos. Además cada marco podrá contar con sus propios bordes, botones, barras de desplazamiento, etc.
Los marcos pueden facilitarnos en gran medida la navegación al permitirnos definir una zona en la que permanezcan siempre a la vista los botones o vínculos de exploración y otra zona o zonas en la que mostrar la información. Por contra, pueden confundir al usuario ya que no muestran la URL real de la página y el uso de los botones Anterior y siguiente del navegador puede no ser el esperado, además dificultan la impresión y pueden ocasionar problemas de diseño con monitores de baja resolución.
Una estructura muy sencilla de creación de marcos podría ser la siguiente:
<HTML>
<HEAD><TITLE>PÁGINA DE MARCOS</TITLE></HEAD>
<FRAMESET COLS="25%,75%">
<FRAME SRC="UNO.HTM" NAME="izda">
<FRAME SRC="DOS.HTM" NAME="dcha">
</FRAMESET>
</HTML>
Debe de quedarte claro que una página con marcos está formada por varios documentos. Un documento que define la página de marcos y un documento para cada uno de los marcos definidos en cada página.
La estructura de la página que define los marcos es muy similar a la de una página normal, pero tiene unos pequeños cambios. Si te fijas en el código del ejemplo superior las etiquetas <BODY> </BODY> han sido sustituidas por los elementos <FRAMESET> </FRAMESET> que nos va a indicar el número y el tamaño de los marcos.
En el ejemplo citado, el elemento <frameset> indica que la pantalla se dividirá en dos columnas, la primera de ellas ocupará el 25% de la pantalla y la segunda el 75% restante.
| ATRIBUTO | FUNCIÓN |
| COLS | Define marcos verticales. <FRAMESET COLS="25%,75%> Define dos marcos horizontales el primero de los cuales tendrá un tamaño del 25% de la ventana y el segundo el 75%. |
| ROWS | Define marcos horizontales. <FRAMESET ROWS=100,400>. Define dos marcos horizontales, el primero de ellos con un tamaño de 100 pixels y 400 pixels el segundo. |
El tamaño de los marcos los podemos especificar de las siguientes formas:
|
|
| FRAMEBORDER | Tamaño del borde. Si lo hacemos igual a cero desaparecerá. |
| FRAMESPACING | Espacio de separación entre frames. Se elimina haciéndolo igual a cero. |
La etiqueta <FRAME> define el contenido que se colocará dentro del marco. Se requiere tantas etiquetas <FRAME> como valores se hayan asignado a COLS O ROWS.
En el código del recuadro, al tener dos valores el atributo cols deberemos definir dos elementos <frame>. El documento uno.htm se cargará en el marco izquierdo y dos.htm en el marco derecho, ¡cuidado! los documentos se cargan según el orden de los elementos <frame>.
| ATRIBUTO | FUNCIÓN |
| SRC | Define el contenido del marco, generalmente la dirección del documento que va a ocuparlo. |
| NAME | Asigna un nombre al marco para poder cargar en él otros documentos distintos del indicado con el atributo SRC. |
| MARGINWIDTH | Modifica la separación horizontal entre frames. |
| MARGINEIGHT | Modifica la separación vertical entre frames. |
| SCROLLING | Controla la presencia de barras de desplazamiento en los frames. Su valor puede ser YES, NO o AUTO (aparecerá si es necesario) |
| NORESIZE | Impide que el usuario cambie el tamaño del frame. Basta con escribir el atributo sin valor alguno. Ejemplo |
| FRAMEBORDER | Define el tamaño del borde. Si lo hacemos cero se eliminará si el borde del frame contiguo tiene también dicho valor. |
Imagínate que tenemos una página dividida en varios marcos, cuando se pulse en un enlace ¿en qué marco se cargará el nuevo documento? Por defecto se cargará en el marco en que se encuentre el enlace pero si yo quiero cargarlo en otro ¿cómo puedo hacerlo?
Para resolver este problema utilizaremos el atributo "TARGET" perteneciente a la etiqueta <A>, que ya estudiamos en el apartado correspondiente a los enlaces.
Al activar el enlace se cargaría el fichero indicado en el atributo HREF, en este caso TABLAS.HTM en el marco indicado en el atributo TARGET, DCHA. Lógicamente al definir la página de marcos tendremos que utilizar el atributo NAME para poder dar nombre a los marcos.
TARGET es un atributo opcional que puede tener cualquier valor que previamente hayamos definido con NAME pero tiene además una serie de atributos predeterminados.
| VALOR | FUNCIÓN |
| _blank | El documento se cargará en una nueva ventana de navegación. |
| _parent | El documento se cargará en el <FRAMESET>donde se ha declarado el enlace. |
| _self | El documento se cargará en el mismo marco en el que se activó el enlace. |
| _top | El documento se cargará a pantalla completa, eliminando todos los marcos. |
El elemento <iframe>...</iframe> crea un marco flotante, es decir, que puede no estar situado contiguo a alguno de los lados del explorador (izquierda, derecha, arriba, abajo) y permite además que el texto fluya a su alrededor de manera similar a otros elementos de HTML.
El elemento <iframe> fue introducido por Microssoft y posteriormente fue incluido en el estándar HTML, las versiones 4 y anteriores de Netscape no admiten dicho elemento.
Al igual que los marcos fijos puede hacer que el elemento <iframe> sea el destino de un enlace, para ello haremos que el valor del atributo target sea el nombre del <iframe>.
Recuerda que el elemento <iframe> tiene etiqueta de cierre, por lo tanto puede contener otros elementos HTML y que para definirlo no es necesario ningún elemento <frameset>.