MARCOS

Los marcos permiten dividir la ventana del navegador en distintas zonas o subventanas, de forma que cada una de ellas contenga un fichero HTML diferente. Para ello se crea un fichero que va a tener las definiciones de todas esas subventanas y que va a representar al conjunto de todos ellos. A estas subventanas se les denomina marcos (frames).

Los marcos se pueden anidar.

El elemento que se usa es <frameset></frameset> y sus atributos son:

Atributo Valor Descripción
rows píxeles, %, * disposición y tamaņos de los marcos horizontales (* para asignar el resto)
cols píxeles, %, * disposición y tamaņo de los marcos verticales (* para asignar el resto)
onload   El evento onload ocurre cuando finaliza la carga de todos los marcos
onunload   El evento onunload ocurre cuando se elimina un marco

El elemento <frame> define los contenidos y la apariencia de un marco dado. Atributos:

Atributo Valor Descripción
name nombre Determina el nombre del marco.
src url localización de los contenidos iniciales que contendrá el marco
noresize   Indica al navegador que el tamaño de los marcos no se pueden variar
scrolling auto|yes|no

Muestra u oculta la barra de scroll dependiendo del valor asignado:

  • auto: solo muestra la barra cuando es necesaria
  • no: no muestra la barra en ningún caso
  • yes: muestra la barra siempre, aunque no sea necesaria
frameborder 1 ó 0 Indica al navegador si se ha de mostrar un borde para los marcos.
marginwidth píxeles Indica el tamaño de los margenes izquierdo y derecho
marginheight píxeles Indica el tamaño de los margenes superior e inferior

Ejemplos:

Código Resultado
<frameset cols="80,*" frameborder="NO" border="0" framespacing="0">
<frame name="leftFrame" scrolling="YES" noresize src="izq1.htm">
<frame name="mainFrame" src="principal1.htm">
</frameset>

izq1.htm principal1.htm

Ver resultado

Código Resultado
<frameset rows="80,*" frameborder="YES" border="0" framespacing="0" bordercolor="#CC3333">
<frame name="topFrame" scrolling="NO" src="sup1.htm" >
<frame name="mainFrame" src="principal1.htm">
</frameset>

sup1.htm
principal1.htm

Ver resultado

Código Resultado
<frameset rows="80,*" frameborder="NO" border="0" framespacing="0">
        <frame name="topFrame" scrolling="NO" noresize src="sup1.htm" >
        <frameset cols="125,*" frameborder="NO" border="0" framespacing="0" rows="*">
                <frame name="leftFrame" scrolling="NO" noresize src="izq1.htm">
                <frame name="mainFrame" src="principal1.htm">
        </frameset>
</frameset>
sup1.htm
izq1.htm principal1.htm

Ver resultado

Cuando insertamos un enlace dentro de un marco tenemos que especificarle el marco destino del enlace. Por defecto el documento indicado en el enlace se cargará en el mismo marco que lo llama. Con el atributo target indicamos el destino del enlace:

Valor Descripción
_self El navegador carga la página en el mismo marco
_blank El navegador carga la página en una ventana nueva
_top El navegador carga la página en la misma ventana pero ocupando todo el espacio de la misma, es decir, anula la definición de los marcos para esa página.
_parent El navegador carga la página en una ventana con la misma estructura que tenía la página padre, es decir, la página de la que procede.
nombre_frame se puede especificar el nombre del marco dado en el atributo name de frame

Ejemplos:

Código Resultado

FRAMESET:

<frameset rows="80,*" frameborder="NO" border="0" framespacing="0">
        <frame name="topFrame" scrolling="NO" noresize src="sup1.htm" >
        <frameset cols="180,*" frameborder="NO" border="0" framespacing="0" rows="*">
                <frame name="leftFrame" scrolling="NO" noresize src="izq2.htm">
                <frame name="mainFrame" src="principal1.htm">
        </frameset>
</frameset>

izq2.htm:

<a href="enlace.htm" target="mainFrame">Enlace al marco principal</a>
<a href="enlace.htm" target="_self">Enlace _self</a>
<a href="enlace.htm" target="_blank">Enlace _blank</a>

Ejemplo de target=_self, _blank, nombre_frame


Ver resultado

 

Código Resultado

FRAMESET:

<frameset cols="189,*" frameborder="yes" border="2" framespacing="2" rows="*" bordercolor="#999999">
        <frame name="leftFrame" scrolling="NO" noresize src="izq1.htm">
        <frame name="mainFrame" src="parent_top.htm">
</frameset>

parent_top.htm:

<a href="marcos5.htm">Bajar un nivel</a> (cargo de nuevo el frameset actual)
<a href="parent_top.htm" target="_parent">Subir un nivel</a> (cargo este marco con target =_parent)
<a href="parent_top.htm" target="_top">target=_top</a> (del marco actual)

Ejemplo de target=_parent, _top


Ver resultado

 

Hay navegadores que no soportan marcos o que están configurados para no mostrar marcos. En este caso existe un elemento <noframes></noframes> para especificar un contenido alternativo (normalmente un texto) al de los marcos.

El elemento <IFRAME> permite insertar un marco dentro de un bloque de texto. Los contenidos del elemento IFRAME sólo deberían ser mostrados por los navegadores que no soporten marcos o que estén configurados para no mostrar marcos.

Atributo Valor Descripción
name nombre Determina el nombre del marco.
src url localización de los contenidos iniciales que contendrá el marco
width píxeles La anchura del marco en línea
height píxeles La altura del marco en línea
scrolling auto|yes|no

Muestra u oculta la barra de scroll dependiendo del valor asignado:

  • auto: solo muestra la barra cuando es necesaria
  • no: no muestra la barra en ningún caso
  • yes: muestra la barra siempre, aunque no sea necesaria
frameborder 1 ó 0 Indica al navegador si se ha de mostrar un borde para los marcos.
marginwidth píxeles Indica el tamaño de los margenes izquierdo y derecho
marginheight píxeles Indica el tamaño de los margenes superior e inferior

Los marcos en línea no pueden ser redimensionados (y por lo tanto no tienen el atributo noresize)

Ejemplo:

Código Resultado
<body bgcolor="#993333" text="#FFFFFF">
<center>
<p>&nbsp;</p>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="3"><b>Ejemplo de
IFRAME: </b></font></p>
<IFRAME src="enlace_iframe.htm" width="400" height="400"
scrolling="yes" frameborder="1">
[Su navegador no soporta marcos o está actualmente configurado para no mostrar marcos]
</IFRAME>
</center>
</body>

Ver resultado


Ejercicio:

Cambiar de nombre al documento index.html y denominarlo contenido.html. Crear otro documento que se llame index.html constituido por frames con el siguiente aspecto (en cada frame se indica el nombre del fichero que debe contener):

cabecera.html
menu.html

 

contenido.html

 

pie.html