Nota: Este documento es parte de una traducción al castellano de la Recomendación del W3C "HTML 4.01 Specification" (más información). Puede consultar la versión original del mismo. Para cualquier comentario o corrección acerca de la traducción póngase en contacto con el traductor en jrpozo[arroba]conclase.net. Gracias por su colaboración.
Véase el Aviso de copyright de la traducción.
Contenidos
Los marcos HTML permiten a los autores presentar documentos con vistas múltiples, que pueden ser ventanas o subventanas independientes. Las vistas múltiples ofrecen a los autores una manera de mantener cierta información visible mientras otras vistas se desplazan o se sustituyen. Por ejemplo, dentro de una misma ventana, un marco podría mostrar un gráfico estático, un segundo marco un menú de navegación, y un tercero el documento principal que puede ser desplazado, o reemplazado al navegar por el segundo marco.
Aquí tenemos un documento simple con marcos:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un documento simple con marcos</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="contenidos_del_marco1.html">
<FRAME src="contenidos_del_marco2.gif">
</FRAMESET>
<FRAME src="contenidos_del_marco3.html">
<NOFRAMES>
<P>Este conjunto de marcos contiene:
<UL>
<LI><A href="contenidos_del_marco1.html">Contenidos chéveres</A>
<LI><IMG src="contenidos_del_marco2.gif" alt="Una imagen chévere">
<LI><A href="contenidos_del_marco3.html">Más contenidos chéveres</A>
</UL>
</NOFRAMES>
</FRAMESET>
</HTML>
Esto podría crear una disposición de marcos como la siguiente:
--------------------------------------- | | | | | | | Marco 1 | | | | | | | | |---------| | | | Marco 3 | | | | | | | | | | | Marco 2 | | | | | | | | | | | | | | ---------------------------------------
Si el agente de usuario no puede mostrar marcos o está configurado para no mostrarlos, representará los contenidos del elemento NOFRAMES.
Los documentos HTML que describen una disposición de marcos (llamados documentos con marcos) tienen una estructura diferente a la de los documentos HTML sin marcos. Un documento normal tiene una sección HEAD y una sección BODY. Un documento con marcos tiene una sección HEAD, y un FRAMESET en lugar del BODY.
La sección FRAMESET de un documento especifica la disposición de las vistas en la ventana principal del agente de usuario. Además, la sección FRAMESET puede contener un elemento NOFRAMES que proporcione contenido alternativo para los agentes de usuario que no soporten marcos o que estén configurados para no mostrar marcos.
Los elementos que normalmente podrían colocarse en el elemento BODY no deben aparecer antes del primer elemento FRAMESET o el FRAMESET no será tenido en cuenta.
<![ %HTML.Frameset; [ <!ELEMENT FRAMESET - - ((FRAMESET|FRAME)+ & NOFRAMES?) -- subdivisión en ventanas --> <!ATTLIST FRAMESET %coreattrs; -- id, class, style, title -- rows %MultiLengths; #IMPLIED -- lista de longitudes, por defecto: 100% (1 fila) -- cols %MultiLengths; #IMPLIED -- lista de longitudes, por defecto: 100% (1 columna) -- onload %Script; #IMPLIED -- todos los marcos han sido cargados -- onunload %Script; #IMPLIED -- todos los marcos han sido quitados -- > ]]>
Definiciones de atributos
Atributos definidos en otros lugares
El elemento FRAMESET especifica la organización de la ventana principal del usuario en términos de subespacios rectangulares.
Cuando se establece el atributo rows (filas) se define el número de subespacios horizontales. Cuando se establece el atributo cols (columnas) se define el número de subespacios verticales. Ambos atributos se pueden especificar simultáneamente para crear una cuadrícula.
Si no se establece el atributo rows, cada columna se extiende a lo largo de toda la longitud de la página. Si no se establece el atributo cols, cada fila se extiende a lo largo de toda la anchura de la página. Si no se establece ninguno de los dos atributos, el marco tiene exactamente el mismo tamaño que la página.
Los marcos se crean de izquierda a derecha para las columnas y de arriba a abajo para las filas. Cuando se especifican ambos atributos, las vistas se crean de izquierda a derecha en la fila superior, de izquierda a derecha en la segunda fila, etc.
En este primer ejemplo dividimos la pantalla verticalmente en dos (es decir, creamos una mitad superior y una mitad inferior).
<FRAMESET rows="50%, 50%"> ...el resto de la definición... </FRAMESET>
El siguiente ejemplo crea tres columnas: la segunda tiene una anchura fija de 250 píxeles (lo cual es útil, por ejemplo, para incluir una imagen de tamaño conocido). La primera recibe el 25% del espacio restante, y la tercera el 75% del espacio restante.
<FRAMESET cols="1*,250,3*"> ...el resto de la definición... </FRAMESET>
El siguiente ejemplo crea una cuadrícula de 2x3 subespacios.
<FRAMESET rows="30%,70%" cols="33%,34%,33%"> ...el resto de la definición... </FRAMESET>
Para el siguiente ejemplo, supongamos que la ventana del navegador tiene actualmente una altura de 1000 píxeles. Para la primera vista se asigna el 30% de la altura total (300 píxeles). Para la segunda vista se especifica que tenga una altura de exactamente 400 píxeles. Esto deja 300 píxeles para repartir entre los otros dos marcos. La altura del cuarto marco se ha especificado como "2*", de modo que es el doble de alto que el tercer marco, cuya altura es sólo "*" (equivalente a 1*). Por tanto el tercer marco será de 100 píxeles de alto y el cuarto tendrá una altura de 200 píxeles..
<FRAMESET rows="30%,400,*,2*"> ...el resto de la definición... </FRAMESET>
Las longitudes absolutas que no sumen el 100% del espacio real disponible deberían ser ajustadas por los agentes de usuario. Cuando sobre espacio, el espacio sobrante debería repartirse proporcionalmente entre cada vista. Cuando falte espacio, debería reducirse cada vista en función de la relación entre el espacio especificado y el espacio total.
Los grupos de marcos pueden anidarse hasta cualquier nivel.
En el siguiente ejemplo, el FRAMESET exterior divide el espacio disponible en tres columnas iguales. A continuación el FRAMESET interior divide la segunda área en dos filas de alturas diferentes.
<FRAMESET cols="33%, 33%, 34%">
...contenidos del primer marco...
<FRAMESET rows="40%, 50%">
...contenidos del segundo marco, primera fila...
...contenidos del segundo marco, segunda fila...
</FRAMESET>
...contenidos del tercer marco...
</FRAMESET>
Los autores pueden compartir datos entre varios marcos incluyendo estos datos a través de un elemento OBJECT. Los autores deberían incluir el elemento OBJECT en el elemento HEAD del documento con marcos y darle un nombre con el atributo id. Cualquier documento que sea el contenido de un marco del documento con marcos puede hacer referencia a este identificador.
El siguiente ejemplo ilustra cómo podría hacer referencia un script a un elemento OBJECT definido para todo un grupo de marcos:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Esto es un documento con marcos con un OBJECT en el HEAD</TITLE>
<!-- ¡Este OBJECT no se representa! -->
<OBJECT id="miobjeto" data="datos.dat"></OBJECT>
</HEAD>
<FRAMESET>
<FRAME src="blanca.html" name="blanca">
</FRAMESET>
</HTML>
<!-- En blanca.html -->
<HTML>
<HEAD>
<TITLE>Página de Blanca</TITLE>
</HEAD>
<BODY>
...comienzo del documento...
<P>
<SCRIPT type="text/javascript">
parent.miobjeto.mipropiedad
</SCRIPT>
...el resto del documento...
</BODY>
</HTML>
<![ %HTML.Frameset; [ <!-- los nombres de marcos reservados comienzan con "_", los demás con una letra --> <!ELEMENT FRAME - O EMPTY -- subventana --> <!ATTLIST FRAME %coreattrs; -- id, class, style, title -- longdesc %URI; #IMPLIED -- vínculo a descripción larga (complementa al título) -- name CDATA #IMPLIED -- nombre destino del marco -- src %URI; #IMPLIED -- origen del contenido del marco -- frameborder (1|0) 1 -- ¿poner bordes al marco? -- marginwidth %Pixels; #IMPLIED -- anchuras de los márgenes en píxeles -- marginheight %Pixels; #IMPLIED -- alturas de los márgenes en píxeles -- noresize (noresize) #IMPLIED -- ¿permitir a los usuarios redimensionar los marcos? -- scrolling (yes|no|auto) auto -- barra de desplazamiento o no -- > ]]>
Definiciones de atributos
Atributos definidos en otros lugares
El elemento FRAME define los contenidos y la apariencia de un marco dado.
El atributo src especifica el documento inicial que contendrá el marco.
El siguiente ejemplo de documento HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un documento con marcos</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
<FRAMESET rows="*,200">
<FRAME src="contenidos_del_marco1.html">
<FRAME src="contenidos_del_marco2.gif">
</FRAMESET>
<FRAME src="contenidos_del_marco3.html">
<FRAME src="contenidos_del_marco4.html">
</FRAMESET>
</HTML>
debería crear una distribución de marcos parecida a ésta:
------------------------------------------ |Marco 1 |Marco 3 |Marco 4 | | | | | | | | | | | | | | | | | | | | | | | | | | | | | -------------| | | |Marco 2 | | | | | | | | | | | ------------------------------------------
y hacer que el agente de usuario cargara cada fichero en una vista separada.
Los contenidos de un marco no deben estar en el mismo documento que la definición del marco.
EJEMPLO ILEGAL:
La siguiente definición de un grupo de marcos no es legal según HTML, ya que los
contenidos del segundo marco están en el mismo documento que la definición
del grupo de marcos.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>Un documento con marcos</TITLE> </HEAD> <FRAMESET cols="50%,50%"> <FRAME src="contenidos_del_marco1.html"> <FRAME src="#vinculo_al_mismo_documento"> <NOFRAMES> ...texto... <H2><A name="vinculo_al_mismo_documento">Sección importante</A></H2> ...texto... </NOFRAMES> </FRAMESET> </HTML>
El siguiente ejemplo ilustra el uso de los atributos decorativos de FRAME. Especificamos que el marco 1 no permitirá barras de desplazamiento. El marco 2 dejará espacio en blanco alrededor de sus contenidos (inicialmente, un fichero de imagen) y el marco no será redimensionable. No se dibujará ningún borde entre los marcos 3 y 4. Se dibujarán los bordes (por defecto) entre los marcos 1, 2 y 3.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un documento con marcos</TITLE>
</HEAD>
<FRAMESET cols="33%,33%,33%">
<FRAMESET rows="*,200">
<FRAME src="contenidos_del_marco1.html" scrolling="no">
<FRAME src="contenidos_del_marco2.gif"
marginwidth="10" marginheight="15"
noresize>
</FRAMESET>
<FRAME src="contenidos_del_marco3.html" frameborder="0">
<FRAME src="contenidos_del_marco4.html" frameborder="0">
</FRAMESET>
</HTML>
Nota. Para información sobre las prácticas actuales referentes a la determinación del marco destino, consulte las notas sobre marcos del apéndice.
Definiciones de atributos
Consulte la sección sobre nombres de marcos destino para información sobre nombres de marcos reconocidos.
Este ejemplo ilustra cómo es posible mediante la especificación de un destino la modificación dinámica de los contenidos de un marco. Primero definimos un grupo de marcos en el documento frameset.html, mostrado a continuación:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>Un documento con marcos</TITLE> </HEAD> <FRAMESET rows="50%,50%"> <FRAME name="fijo" src="inicial_fijo.html"> <FRAME name="dinamico" src="inicial_dinamico.html"> </FRAMESET> </HTML>
Después, en inicial_dinamico.html, hacemos un vínculo al marco llamado "dinamico".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Un documento con vínculos con destinos específicos</TITLE>
</HEAD>
<BODY>
...comienzo del documento...
<P>Puede avanzar ahora a la
<A href="diapo2.html" target="dinamico">diapositiva 2.</A>
...más documento...
<P>Lo está haciendo muy bien. Vaya ahora a la
<A href="diapo3.html" target="dinamico">diapositiva 3.</A>
</BODY>
</HTML>
Si se activa cualquiera de los vínculos se abre un nuevo documento en el marco llamado "dinamico", mientras que el otro marco, "fijo", mantiene sus contenidos iniciales.
Actualmente no hay ninguna manera de codificar con un URI el estado real de un grupo de marcos. Por tanto, muchos agentes de usuario no permiten a los usuarios asignar un marcador a un grupo de marcos.
Cuando muchos vínculos del mismo documento designan al mismo destino, es posible especificar el destino una sola vez para que no sea necesario incluir el atributo target en todos los elementos. Esto se hace estableciendo el atributo target del elemento BASE.
Volvemos al ejemplo anterior, esta vez definiendo la información sobre el destino en el elemento BASE para quitarla de los elementos A.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Un documento con un destino específico en BASE</TITLE>
<BASE href="http://www.micom.com/Diapos" target="dinamico">
</HEAD>
<BODY>
...comienzo del documento...
<P>Puede avanzar ahora a la <A href="diapo2.html">diapositiva 2.</A>
...más documento...
<P>Lo está haciendo muy bien. Vaya ahora a la
<A href="diapo3.html">diapositiva 3.</A>
</BODY>
</HTML>
Los agentes de usuario deberían determinar el marco destino en el que cargar un recurso vinculado de acuerdo con las siguientes reglas de precedencia (ordenadas de mayor a menor prioridad):
Los agentes de usuario pueden proporcionar a los usuarios un mecanismo para deshabilitar el atributo target.
Los autores deberían proporcionar contenido alternativo para aquellos agentes de usuario que no soporten marcos o que estén configurados para no mostrar marcos.
<![ %HTML.Frameset; [ <!ENTITY % noframes.content "(BODY) -(NOFRAMES)"> ]]> <!ENTITY % noframes.content "(%flow;)*"> <!ELEMENT NOFRAMES - - %noframes.content; -- contenedor de contenido alternativo para representación no basada en marcos --> <!ATTLIST NOFRAMES %attrs; -- %coreattrs, %i18n, %events -- >
Atributos definidos en otros lugares
El elemento NOFRAMES especifica un contenido que sólo deberían mostrar los agentes de usuario que no soporten marcos o que estén configurados para no mostrar marcos. Los agentes de usuario que soporten marcos sólo deben mostrar los contenidos de una declaración NOFRAMES cuando se configuren para no mostrar marcos. Los agentes de usuario que no soporten marcos deben mostrar los contenidos de NOFRAMES en cualquier caso.
El elemento NOFRAMES es parte tanto del DTD transicional como del de documentos con marcos. En un documento que use el DTD de documentos con marcos, NOFRAMES se puede usar al final de la sección FRAMESET del documento.
Por ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Un documento con marcos con NOFRAMES</TITLE>
</HEAD>
<FRAMESET cols="50%, 50%">
<FRAME src="principal.html">
<FRAME src="tabla_de_contenidos.html">
<NOFRAMES>
<P>Aquí puede encontrar la <A href="principal-sinmarcos.html">
version sin marcos del documento.</A>
</NOFRAMES>
</FRAMESET>
</HTML>
NOFRAMES se puede usar, por ejemplo, en un documento que sea el origen de un marco y que use el DTD transicional. Esto permite a los autores explicar el propósito del documento en los casos en que éste se vea fuera del grupo de marcos o con un agente de usuario que no soporte marcos.
El atributo longdesc permite a los autores hacer los documentos con marcos más accesibles a las personas que utilizan agentes de usuario no visuales. Este atributo designa un recurso que proporciona una descripción larga del marco. Los autores deberían recordar que las descripciones largas asociadas con los marcos se refieren al marco, y no a los contenidos del marco. Como los contenidos pueden variar con el tiempo, la descripición larga inicial podría ser inapropiada para los contenidos posteriores del marco. En particular, los autores no deberían incluir una imagen como único contenido de un marco.
El siguiente documento con marcos describe dos marcos. El marco izquierdo contiene una tabla de contenidos y el marco derecho contiene inicialmente la imagen de un avestruz:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>Un documento con marcos mal diseñado</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAME src="tabla_de_contenidos.html"> <FRAME src="avestruz.gif" longdesc="desc-avestruz.html"> </FRAMESET> </HTML>
Obsérvese que la imagen ha sido incluida en el marco independientemente de cualquier elemento HTML, de modo que el autor no tiene ninguna manera de especificar un texto alternativo aparte de usar el atributo longdesc. Si los contenidos del marco derecho cambian (p.ej., el usuario selecciona una serpiente de cascabel en la tabla de contenidos), los usuarios no tendrán acceso textual a los nuevos contenidos del marco.
Por tanto, los autores no deberían poner una imagen en un marco directamente. En su lugar, la imagen debería especificarse en un documento HTML independiente, en el cual se podría adjuntar el texto alternativo apropiado:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <HTML> <HEAD> <TITLE>Una documento con marcos bien diseñado</TITLE> </HEAD> <FRAMESET cols="20%, 80%"> <FRAME src="tabla_de_contenidos.html"> <FRAME src="contenedor_avestruz.html"> </FRAMESET> </HTML>
<!-- En contenedor_avestruz.html: --> <HTML> <HEAD> <TITLE>El avestruz, robusto y veloz</TITLE> </HEAD> <P> <OBJECT data="avestruz.gif" type="image/gif"> ¡Estos avestruces seguro que están ricos! </OBJECT> </HTML>
<!ELEMENT IFRAME - - (%flow;)* -- subventana en línea --> <!ATTLIST IFRAME %coreattrs; -- id, class, style, title -- longdesc %URI; #IMPLIED -- vínculo a descripción larga (complementa al título) -- name CDATA #IMPLIED -- nombre destino del marco -- src %URI; #IMPLIED -- origen del contenido del marco -- frameborder (1|0) 1 -- ¿poner bordes al marco? -- marginwidth %Pixels; #IMPLIED -- anchuras de los márgenes en píxeles -- marginheight %Pixels; #IMPLIED -- alturas de los márgenes en píxeles -- scrolling (yes|no|auto) auto -- barra de desplazamiento o no -- align %IAlign; #IMPLIED -- alineación vertical u horizontal -- height %Length; #IMPLIED -- altura del marco -- width %Length; #IMPLIED -- anchura del marco -- >
Definiciones de atributos
Atributos definidos en otros lugares
El elemento IFRAME permite a los autores insertar un marco dentro de un bloque de texto. Insertar un marco en línea dentro de una sección de texto es muy similar a insertar un objeto mediante un elemento OBJECT: ambos permiten insertar un documento HTML en medio de otro, ambos pueden alinearse con el texto circundante, etc.
La información a insertar en línea se designa mediante el atributo src de este elemento. Los contenidos del elemento IFRAME, por su parte, sólo deberían ser mostrados por los agentes de usuario que no soporten marcos o que estén configurados para no mostrar marcos.
Para aquellos agentes de usuario que soporten marcos, el siguiente ejemplo colocará un marco en línea rodeado por un borde en medio del texto.
<IFRAME src="blabla.html" width="400" height="500"
scrolling="auto" frameborder="1">
[Su agente de usuario no soporta marcos o está actualmente configurado
para no mostrar marcos. Sin embargo, puede visitar
<A href="blabla.html">el documento relacionado.</A>]
</IFRAME>
Los marcos en línea no pueden ser redimensionados (y por lo tanto no tienen un atributo noresize).
Nota. También puede incluirse un documento HTML dentro de otro documento HTML por medio del elemento OBJECT. Véase la sección sobre documentos incluidos para más detalles.