Go to main content
Bypass navigation bar Referencia HTML Tags HTML Tutoriales HTML
Bypass language selection
Bypass location bar

Location: Inicio > Referencia HTML > Tags HTML > Tag HTML frameset

Bypass main content

Tag HTML frameset

 Nota: Si no sabes lo que es un elemento/tag o cómo debes utilizarlo, te recomiendo que leas el tutorial "Tags y atributos en HTML", que puedes encontrar en la sección de tutoriales HTML.

Bypass main content

Descripción

El elemento HTML frameset divide el espacio de un documento (usando los atributos "rows" y "cols") donde haya sido insertado, y permite luego la carga de otros documentos en cada espacio. estos espacios den ser ocupados por un marco (elemento HTML frame), que actúa como contenedor de un documento específico, o de otro grupo de marcos.

Esta anidación permite muchas posibilidades y puede ayuda a resolver muchos problemas. Sin embargo, el uso de marcos no es muy popular principalmente debido a que la relación entre los diferentes documentos no puede ser correctamente establecida en muchos casos. Además, los marcos pueden causar problemas de compatibilidad o accesibilidad.

Debido a esto, el uso de marcos ha sido etiquetado por los expertos como una "mala práctica", por lo que su utilización no es muy recomendable.

Ejemplos

En el siguiente ejemplo, el espacio es dividido verticalmente en dos marcos idénticos, y un documento es cargado en cada uno de ellos. Este ejemplo es muy útil para la comparación de documentos.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head lang="es" xml:lang="es">
<title>Comparación de documentos</title>
</head>
<frameset cols="50%,50%">
<frame src="original.html"></frame>
<frame src="nueva-version.html"></frame>
</frameset>
</html>

Otro documento con marcos podría dividir el espacio en filas y columnas. Este es el caso del siguiente documento, donde el espacio es divififo exactamente en cuatro rectángulos idénticos.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head lang="es" xml:lang="es">
<title>Ejemplo de cuatro documentos</title>
</head>
<framesetcols="50%,50%" rows="50%,50%">
<frame src="superior-izquierda.html"></frame>
<frame src="superior-derecha.html"></frame>
<frame src="inferior-izquierda.html"></frame>
<frame src="inferior-derecha.html"></frame>
</frameset>
</html>

El próximo ejemplo muestra el uso de conjuntos de marcos anidados, en un documento con un título en la parte superior, un menú a la izquierda y un área de contenido en el espacio restante. Para lograr esto, el documento primero se divide horizontalmente en dos, donde el título (parte superior) toma 200 píxeles de altura. El espacio resultante es dividido en dos nuevamente: el menú (a la izquierda) toma 180 píxeles y el resto del espacio es asignado al contenido.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head lang="es" xml:lang="es">
<title>Distribución de contenido</title>
</head>
<frameset rows="200,*">
<frame src="titulo.html"></frame>
<frameset rows="180,*">
<frame src="menu.html"></frame>
<frame src="contenido.html"></frame>
</frameset>
</frameset>
</html>

Atributos

id (name)

El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en todo el documento y puede ser usado para referirse a este elemento en otras instancias (por ejemplo, desde un script del lado cliente).

<p id="parrafo1">Este es el primer párrafo, llamado "parrafo1". Para cambiar dinámicamente sus prpiedades usa este identificador.</p>

class (cdata)

El atributo "class" asigna un nombre de clase (o una lista de nombres de clases separadas por espacios) al elemento contenedor. Es usado junto con hojas de estilos y le dice al navegador la clase (o clases) a las que el elemento está asociado.

Una clase da atributos presentacionales a los elementos (lee más en el tutorial "Hojas de estilo en cascada").

<p class="referencias">Este artículo está basado en el libro "Viento en los árboles" de Jhon L. Brooks</p>
<p class="referencias importante">Este artículo está basado en el libro "Viento en los árboles" de Jhon L. Brooks... y es más importante que el anterior.</p>

style (style)

Este atributo es utilizado para definir atributos presentacionales para el elemento contenedor, y su valor debería estar compuesto por propiedades de hojas de estilo. Aunque en algunos casos es particularmente útil, es una mejor práctica poner los atributos presentacionales en archivos externos, relacionándolos a los elementos a través del atributo "class". De este modos, se mejora la separación de las partes semántica y presentacional de tu documento.

Puedes encontrar más información acerca de los atributos presentacionales en el tutorial "Hojas de estilo en cascada".

<p style="color: #0000FF; font-size: 12pt">Este es un párrafo con un estilo definido.</p>
<p>Y este es otro texto sin estilo.</p>

title (text)

El propósito de este atributo es proveer un título para el elemento. Su valor debe ser una descripción corta y precisa del contenido del elemento. Habitualmente, los navegadores muestran el contenido de este atributo en un recuadro al posar el mouse encima del contenido del elemento por un pequeño período de tiempo.

Código
<a title="HTMLQuick.com" href="http://www.htmlquick.com/es/">Código HTML</a>
Vista

rows (multi-length)

Toma por valor una lista separada por comas de anchos, representando los anchos de los sucesivos marcos. El número de valores en esta lista indicará la cantidad de marcos que serán insertados horizontalmente.

<frame rows="50%,20%,30%" src="articulos-principal.html"></frame>

cols (multi-length)

Toma por valor una lista separada por comas de alturas, representando las alturas de los sucesivos marcos. El número de valores en esta lista indicará la cantidad de marcos que serán insertados verticalmente.

<frame cols="500,1*,2*" src="articulos-principal.html"></frame>

Eventos

  • onload
  • onunload

Ve a la lista completa de eventos en HTML.

Diseño y desarrollo: Latitud29.com

Vínculos y logos|Contacto|Más allá de HTML|Herramientas y recursos|Mapa del sitio|Webmaster|Dona