10. Marcos

  1. Dividir una ventana
  2. Vínculos entre marcos
  3. Marcos flotantes

Dividir una ventana

El lenguaje html permite dividir la ventana del navegador en varios marcos, en inglés frames, de manera que podamos cargas en ellos páginas independientes. Estas páginas, por ejemplo, tienen dos marcos o frames, uno a la izquierda, con el menú fijo, y otro a la derecha donde se van mostrando los contenidos.
Las etiquetas y la estructura para crear una página con frames es la siguiente:

<html>
  <head>
    ...
  </head>
  <frameset [cols="..."] [rows="..."]>
    <frame src="archivo 1" name="nombre del marco 1">
    <frame src="archivo 2" name="nombre del marco 2">
    ...
  </frameset>
</html>
<frameset> Define los marcos en que se divide la ventana. La etiqueta <body> desaparece cuando definimos una página con marcos.
Tiene dos posibles atributos para dividir en columnas o en filas, y siempre ha de indicarse un sólo de ellos. Son cols y rows respectivamente.
cols="anchuras" Divide la ventana en dos columnas. La anchura de las columnas se indican en pixels, en porcentajes o en proporciones separadas por comas
Por ejemplo:
<frameset cols="30%,70%"> Divide la pantalla en dos columnas que ocupan el 30% y el 70% de la pantalla respectivamente.
<frameset cols="50,100,*"> Divide la pantalla en tres columnas que ocupan 50 pixels la primera, 100 la segunda y el resto la tercera.
<frameset cols="*,3*"> Divide la pantalla en dos columnas, la segunda ocupa tres veces lo que la primera, es decir, un cuarto la primera y tres cuartos la segunda.
rows="alturas" Divide la ventana en dos filas. La altura de las filas se indican en píxels, en porcentajes o en proporciones separadas por comas, de la misma manera que el atributo cols
Atributos opcionales de <frame>
src="archivo html" Es un atributo obligatorio, indica la página que se mostrará en el marco correspondiente
name="nombre" Es un atributo obligatorio, indica el nombre del marco para futuras referencias.
frameborder="1/0" Indica si se muestra el borde del marco, frameborder="1" muestra el borde y frameborder="0" no. Por defecto se muestra.
marginwidth="Número" Indica el número de pixels de los márgenes interiores izquierdo y derecho del frame entre el borde y el texto.
marginheight="Número" Indica el número de pixels de los márgenes interiores superior e inferior del marco entre el borde y el texto.
scrolling="Yes/No/Auto" Indica si se muestra o no la barra de desplazamiento. Por defecto está en Auto.
noresize Indica que el marco no podrá ser redimensionado por el visitante con el ratón.

Veamos un ejemplo de ventana dividida en dos columnas, la segunda de ellas tres veces más ancha que la primera. Observa como puedes cambiar el tamaño de los marcos desplazando la línea que los divide.

EjemploResultado
<html>
  <head>
    <title>Marcos</title>
  </head>
  <frameset cols="*,3*">
    <frame src="pagina1.html" name="izquierda">
    <frame src="pagina2.html" name="derecha">
  </frameset>
</html>

Otro ejemplo de ventana dividida en dos filas, la superior de 75 píxels, y el resto para la otra. Además no puedes cambiar el tamaño por incluir el atributo noresize

EjemploResultado
<html>
  <head>
    <title>Marcos</title>
  </head>
  <frameset rows="75,*">
    <frame src="pagina1.html" name="arriba" noresize>
    <frame src="pagina2.html" name="abajo">
  </frameset>
</html>

Otra posibilidad que tenemos es crear frames anidados, es decir, unos dentro de otros. A continuación tenemos un ejemplo de una ventana dividida en dos columnas y la columna de la derecha dividida en dos filas.

EjemploResultado
<html>
  <head>
    <title>Marcos</title>
  </head>
  <frameset cols="*,3*">
    <frame src="pagina1.html" name="izquierda">
    <frameset rows="30%,60%">
      <frame src="pagina2.html" name="arriba">
      <frame src="pagina3.html" name="abajo">
    </frameset>
  </frameset>
</html>

Actividad 10.1

  1. Crea un archivo nuevo llamado palabras.htm. Escribe en él únicamente una tabla de ancho el 100%, con dos celdas con las palabras agua y fuego.
  2. Crea un archivo nuevo llamado definiciones.htm con dos marcos en filas de 30 píxels la primera y el resto para la segunda. (¡ojo! Con Mozilla no podrás crear una página con marcos, tendrás que hacerlo con un editor de textos como el Boc de notas)
  3. El marco superior ha de tener:
    • márgenes superior e inferior igual a 0
    • no ha de poder redimensionarse por el visitante
    • Se debe llamar superior
    • Debe contener la página palabras.htm
      • .
  4. El marco inferior ha de tener:
    • no ha de poder redimensionarse por el visitante
    • Se debe llamar inferior
    • Debe contener la página agua.htm
      • .
  5. Guarda la página
  6. Abre definiciones.htm en el navegador para ver el resultado.

Actividad 10.2

  1. Crea un nuevo archivo llamado menu.htm y escribe en él lo siguiente:
    • Mi página Web con formato de encabezado
    • Una lista con los siguientes elementos: Página principal, Recetas, Definiciones, Música y Horario
    • Una línea horizontal
    • Vuestros nombres con tamaño de fuente pequeña x-small
    • Asigna un color de fondo a tu gusto.
  2. Guarda la página
  3. Crea otro archivo llamado index.htm con dos marcos en columnas de ancho 25% y 75% llamados izquierda y derecha respectivamente.
  4. En el marco de la izquierda inserta la página menu.htm
  5. En el marco de la derecha inserta la página inicio.htm
  6. Guarda la página
  7. Abre index.htm en el navegador para ver el resultado
Arriba

Vínculos entre marcos

En el capítulo 7. Vínculos adelantamos que mediante el atributo target de la etiqueta <a> podíamos seleccionar el marco donde debía abrirse el vínculo. El nombre del marco viene dado por el atributo name="nombre" que acabamos de ver y este es el que debe aparecer en target. Recordemos sus posibles valores y veamos algunos ejemplos:

<a href="frames.html" target="derecha">Abre la página frames.html en el marco definido como derecha.
<a href="frames.html" target="_blank">Abre la página frames.html en una nueva ventana del navegador.
<a href="frames.html" target="_self">Abre la página frames.html en el mismo marco donde se encuentra el vínculo.
<a href="frames.html" target="_top">Abre la página frames.html en la ventana al completo del navegador suprimiendo los marcos que hubiera.

Prueba como funciona el atributo target aquí

Actividad 10.3

  1. Abre palabras.htm y asigna a cada palabra la página correspondiente con su definición. Asegúrate que han de abrirse en el marco inferior.
  2. Guarda la página y vuelve a abrir definiciones.htm en el navegador para ver el resultado. Prueba los vínculos para comprobar que funcionan.

Actividad 10.4

  1. Abre el archivo menu.htm y asigna el vínculo correspondiente a cada elemento de la lista para que se abran en el frame derecha de la página index.htm.
  2. Guarda la página
  3. Abre de nuevo index.htm en el navegador para ver el resultado y pulsa los vínculos para comprobar que funcionan. Observa que al pulsar el vínculo definiciones tendrás tres marcos anidados.
Arriba

Marcos flotantes

Otra posibilidad es insertar un marco dentro de una página del tamaño que queramos, como en el ejemplo de la derecha.
La etiqueta para conseguirlo es <iframe> y su uso es muy similar al de <frame>.
Donde pongamos esta etiqueta se insertará el marco, igual que si fuera una imagen. Si lo que queremos es que el texto fluya alrededor del marco haremos igual que con las imágenes, con la propiedad float de las hojas de estilo.

<iframe mane="nombre" src="archivo" width="ancho" height="alto">
Atributos opcionales de <iframe>
src="archivo html" Es un atributo obligatorio, indica la página que se mostrará en el marco correspondiente
name="nombre" Es un atributo obligatorio, indica el nombre del marco para futuras referencias.
width="número"
height="número"		 Indican las dimensiones del marco en píxels o en porcentajes.
frameborder="1/0" Indica si se muestra el borde del marco, frameborder="1" muestra el borde y frameborder="0" no. Por defecto se muestra.
marginwidth="Número" Indica el número de pixels de los márgenes interiores izquierdo y derecho del frame entre el borde y el texto.
marginheight="Número" Indica el número de pixels de los márgenes interiores superior e inferior del marco entre el borde y el texto.
scrolling="Yes/No/Auto" Indica si se muestra o no la barra de desplazamiento. Por defecto está en Auto.

Veamos un ejemplo con el código del marco flotante de arriba

EjemploResultado
<iframe name="flotante" src="iframe.html" width="300" height="100"></iframe>

Actividad 10.5

  1. Abre el archivo inicio.htm.
  2. Inserta al principio de la noticia, después de los encabezados, un marco flotante a la izquierda de tamaño 50% de ancho y 200 píxels de alto, que contenga la página receta.htm.
  3. Guarda la página y ábrela en el navegador para ver el resultado.
Arriba
Tablas Tablas Valid HTML 4.01! Formularios Formularios