CURSO DE HTML 4.01
Elementos de HTML 4.01, etiquetas, atributos. Base del actual HTML5.
11. Marcos
11.1 Definición y estructura de los marcos
Los marcos (frames en inglés) constituyen un recurso del lenguaje HTML para dividir la pantalla en diferentes zonas o ventanas, que pueden actuar independientemente unas de otras. Cada ventana carga una página y posee sus barras de desplazamiento para moverse en el documento html contenido en ella.
La estructura de los marcos se define en una página, y en ésta se indica el número de divisiones que se realizará, el nombre de cada una y el archivo html que cargará cada una. O sea, que para hacer una página con dos marcos, uno derecho (contenidos) y otro izquierdo (menú), por ejemplo, tendremos 3 archivos.
Veamos el código de una estructura muy utilizada años atrás: una página con dos marcos, uno izquierdo para el menú y otro derecho para los contenidos:
<html>
<head>
<title>Marcos. Estructura </title>
</head>
<frameset cols="20%,80%">
<frame src="marco_izq_menu.htm">
<frame src_"marco_der.htm" name="principal">
</frameset>
</html>Observemos la estructura del código: la cabecera del documento se escribe como siempre. ¿Qué pasa con el cuerpo?
Se reemplaza la etiqueta <BODY> por la etiqueta <FRAMESET>. Esta etiqueta tiene apertura y cierre y definirá el tipo y cantidad de divisiones que deseamos para nuestra página.
La etiqueta <FRAME> es la que designa cada división (en este caso son dos) y mediante sus atributos estableceremos la ruta del archivo html que cargará y de qué forma se presentará. Esta etiqueta no tiene cierre.
La maquetación de sitios con marcos ha caído en desuso debido a que los buscadores indexan cada archivo por separado, al igual que con éstos, la etiqueta IFRAME, que veremos hacia el final de este Módulo, se sigue utilizando para importar contenidos de otros sitios (Google Maps, Videos, módulos de clima o de cotización de dólar, por ejemplo). En este curso, la encontrarás en varios de los ejemplos de los códigos.
11.2 Atributos de las etiquetas FRAMESET y FRAME
La etiqueta frameset posee los siguientes atributos:
| Atributo | Descripción | Ejemplo |
|---|---|---|
| cols | Especifica las columnas que habrá en la página de los marcos. Se define el ancho de cada columna (sean dos, tres o más) separados por una coma. El ancho puede estar en píxeles o porcentajes. Si queremos que una columna se ajuste al ancho restante, se coloca un asterisco (*). También se puede combinar el asterisco para designar tamaños relativos. Si no trabajamos con columnas no hace falta poner este atributo. | 2 columnas: cols="200,*" cols="20%,*" cols="20%,80%" 3 columnas: cols="200,*,200" cols="20%,65%,*" Tamaño relativo: la segunda columna ocupa 3 veces más que la primera: cols="*,3*" |
| rows | Especifica las filas que habrá en la página de los marcos. Se define el alto de las filas de igual manera que se define el ancho en las columnas. Si no trabajamos con filas, no hace falta colocar este atributo. | 2 filas: 3 filas con tamaño relativo: |
| frameborder | Asigna el ancho de los bordes de los marcos en píxeles, si queremos que estos no aparezcan debe tener el valor 0 (cero). | frameborder="2" frameborder="0" |
| framespacing | Designa el espacio de separación entre frames en píxeles. Por defecto, hay un pequeño espacio entre los marcos. Si el diseño del sitio requiere que no haya espacio de separación entre marcos, utilizaremos este atributo con el valor 0 (cero). | framespacing="10" framespacing="0" |
La etiqueta frame posee los siguientes atributos:
| Atributo | Descripción | Ejemplo |
|---|---|---|
| name | Asigna el nombre al marco. Es necesario a la hora de especificar la ruta de los enlaces entre los marcos. El primer caracter debe ser alfanumérico (letra o número). | name="principal" |
| src | Ruta del archivo html que se cargará en el marco. Podemos emplear rutas relativas o absolutas. | src="marco_izq.htm" src="http://www.sitio.com.ar/index.htm" |
| marginheight | Alto del margen del marco. | marginheight="5" marginheight="0" |
| marginwidth | Ancho del margen del marco. | marginwidth="5" marginwidth="0" |
| scrolling | Determina la aparición o no de la barra de desplazamiento (tanto vertical como horizontal) del marco. Sus valores posibles son: yes (mostrar barras), auto (ponerlas en caso que el documento lo requiera) y no (no mostrar barras). | scrolling="yes" scrolling="no" scrolling="auto" |
| noresize | Al incluir este atributo, el usuario no tendrá la posibilidad de variar el tamaño de los marcos. Por defecto, todos los marcos son redimensionables. | noresize |
| frameborder | Funciona de igual modo que con la etiqueta frameset. En caso de querer sacar todos los bordes en todos los marcos, no basta con poner esta opción en la etiqueta frameset, sino que también hay que agregarla en cada etiqueta frame. | frameborder="3" frameborder="0" |
11.3 Marcos anidados
Se pueden obtener distribuciones más complejas anidando marcos dentro de una columna, o dentro de una fila.
Siguiendo el código del ejemplo de arriba, cambiaremos la segunda línea de columna por otro set de marcos con dos filas:
<html>
<head>
<title>Marcos. Estructura </title>
</head>
<frameset cols="20%,80%" frameborder="0">
<frame src="marco_izq_menu.htm" name="menu" scrolling="no" frameborder="0">
<frameset rows="20%,*" frameborder="0">
<frame src="menu.htm" name="menu_secundario" scrolling="no" frameborder="0">
<frame src="cont.htm" name="contenidos" frameborder="0">
</frameset>
</frameset>
</html>Incorporamos algunos atributos: scrolling="no" a los menús, y frameborder="0" a todos los marcos para eliminar los bordes.
Aquí el ejemplo (agregamos colores para que se noten los marcos).
Enlaces entre los marcos
Al nombrar los frames con el atributo name, podremos enlazar documentos HTML para que se abran en determinado marco. Por ejemplo, si tenemos un menú en el marco superior y deseamos que un botón abra el contenido en el marco de abajo, en el documento correspondiente al menú superior se colocará:
<a href="documento.htm" target="contenidos">Botón 1</a>Nótese la diferencia con las anclas, donde utilizamos el símbolo numeral adelante del nombre.
Respecto al target, vimos que hay dos para emplear en este caso: _top y _parent. Top abre el documento en la ventana principal, rompiendo la estructura de los frames; y parent abre el documento en el marco padre, es decir, si tenemos marcos anidados será en el principal de esa subestructura de marcos.
11.4 Etiqueta NOFRAMES
¿Qué pasa si nuestro sitio se carga en un navegador que no soporta marcos?
Para prevenir esta situación, existe la etiqueta <NOFRAMES> (tiene apertura y cierre). Se agrega al final del documento que contiene la definición de los marcos, antes de cerrar la etiqueta HTML. Puede ser un texto, el enlace hacia otra versión del sitio sin marcos o una página alternativa completa, agregando las etiquetas <BODY></BODY>.
Ejemplo:
<noframes>
<p>Este navegador no admite marcos. <br>
Ingresá <a href="sin_frames.htm">a la versión sin marcos</a> para ver este sitio en tu navegador.</p>
</noframes>
11.4 Marcos especiales: ventanas (etiqueta IFRAME)
La etiqueta <IFRAME> (inline frame o marco en línea) permite incorporar un documento HTML en un sector de otro documento HTML. Tiene apertura y cierre.
El código es el siguiente:
<iframe src="documento.htm" width="300" height="300" scrolling="auto" frameborder="1"> </iframe>Donde src es la ruta del documento a cargarse en el iframe, width es el ancho en píxeles, height el alto en píxeles, scrolling y frameborder se utilizan igual que con los marcos. En este sitio, hemos utilizado iframes en varios módulos para incorporar la vista previa de los ejemplos.
Atributos de la etiqueta iframe:
| Atributo | Descripción | Ejemplo |
|---|---|---|
| src | Ruta del documento a cargar. | src="documento.htm" |
| width | Ancho en píxeles o en porcentaje. | width="300" width="30%" |
| height | Alto en píxeles o en porcentaje. | height="300" height="30%" |
| scrolling | Define si se verá o no la barra de scroll. Las alternativas son: yes, no y auto. La opción por defecto es auto. | scrolling="no" |
| frameborder | Define si el marco tendrá borde o no. (0=no, 1=sí), la opción por defecto es sí. | frameborder="0" |
| name | Indispensable si vamos a cargar contenidos mediante enlaces desde el documento principal hacia el iframe. | name="contenidos" |
| marginheight | Define el margen superior e inferior del iframe. | marginheight="10" |
| marginwidth | Define el margen izquierdo y derecho del iframe. | marginwidth="10" |
Los tres primeros atributos de esta lista son indispensables para que un iframe funcione adecuadamente.
Usos del IFRAME
En la actualidad, se utiliza para incorporar widgets como el clima, cotización del dólar, Google Maps, videos de YouTube, para utilizar un diseño de fondo y cargar contenidos al IFRAME sin que se modifique el diseño principal. Si podemos no utilizarlos, es mejor para el posicionamento web y para la indexación en Google. Ya que cada IFRAME es un documento html, los buscadores los rastrean e indexan en forma independiente. Muchas veces, al ser parte de un sitio, no tienen datos de contacto o información de procedencia visible para el usuario, haciéndose difícil acceder a la versión completa. Hay etiquetas meta (en el header de la página) que se utilizan para que no se indexen estos archivos en los buscadores.
Material adicional
Actualización: enero, 2021. Elena Navntoft.