06 HTML5

Escuela Complutense Latinoamericana
Escola Complutense Latinoamericana
Programación para Internet
HTML
Páginas de marcos
Universidade Federal de Santa Catarina

Florianópolis, Brasil
21 de mayo a 1 de junio de 2007
Páginas de marcos
Tienen distribuido su contenido entre varios marcos,

cada uno conteniendo un documento HTML distinto:
PruebaMarcos.html
Tablas1.html
EjMapa.html
Formatos.html
El lenguaje HTML: Páginas de marcos HTML: 5 - 1

Universidad Complutense de Madrid Universidade Federal de Santa Catarina
Páginas de marcos
La página web de marcos se describe con un documento

HTML global (PruebaMarcos.html) cuyo cuerpo está
definido como un conjunto de marcos:
Conjunto de marcos
Dentro de cada marco definido en el conjunto de marcos

se carga el documento HTML que se indique.
Así pues, hay tantos documentos HTML involucrados
como número de marcos establecidos más uno.
Páginas de marcos
La página web en sí se define como un conjunto de

marcos.
Un conjunto de marcos es una secuencia de marcos
en filas o en columnas (o en cuadrícula), por lo que
a menudo se crea más de un conjunto.
La página de marcos contiene un

conjunto de dos marcos en filas
El marco inferior contiene un conjunto

de dos marcos en columnas

Conjuntos de marcos
Para crear una página de marcos se sustituye el

elemento BODY por un elemento FRAMESET:
<HTML>
<HEAD>
<TITLE>Pruebas de marcos</TITLE>
</HEAD>
<FRAMESET>
...
</FRAMESET>
</HTML>
Cada elemento FRAMESET define un conjunto de marcos
que pueden estar dispuestos en filas y en columnas.
Marcos en filas: alturas con el atributo ROWS.
Marcos en columnas: anchuras con el atributo COLS.
Marcos en filas
Se asigna al atributo ROWS de FRAMESET la lista de

alturas deseadas para los marcos.
Altura de un marco: en valor absoluto (píxeles),
de forma relativa (porcentaje) o con un * para que
se calcule automáticamente.
Las alturas se separan por comas:
<FRAMESET ROWS="alto1,alto2,...">
Se crean tantos marcos en filas como alturas se asignen
al atributo.
<FRAMESET ROWS="*,*,*">
...
</FRAMESET>
Se crean tres marcos en filas
con la misma altura

Marcos en filas
<FRAMESET ROWS="50%,*,*">
...
</FRAMESET>
Se crean tres marcos en filas,
el primero con el doble de altura
que los otros dos.
<FRAMESET ROWS="100,50%,*">
...
</FRAMESET>
Se crean tres marcos en filas,
el primero con 100 píxeles
de altura, el segundo con una altura
del 50% de la ventana y el tercero
con el resto como altura.
Uso de * para especificar dimensiones relativas
Cuando se usa el asterisco (*) para especificar que se

calcule la altura de los marcos automáticamente, se
pueden colocar números delante de los asteriscos para
especificar múltiplos.
Por ejemplo, lo siguiente:
<FRAMESET ROWS="2*,*,*">
...
</FRAMESET>
hace que se creen tres marcos,
el primero de ellos con el doble
de altura que los otros dos.
También sirve para las anchuras

de los marcos en columnas.

Marcos en columnas
Se asigna al atributo COLS de FRAMESET la lista de

anchuras deseadas para los marcos.
Anchura de un marco: en valor absoluto (píxeles),
de forma relativa (porcentaje) o con un * para que
se calcule automáticamente.
Las anchuras se separan por comas:
<FRAMESET COLS="ancho1,ancho2,...">
Se crean tantos marcos en columnas como anchuras se
incluyan.
<FRAMESET COLS="*,*,*">
...
</FRAMESET>
Se crean tres marcos en columnas
con la misma anchura.
Marcos en columnas
<FRAMESET COLS="*,50%,*">
...
</FRAMESET>
Se crean tres marcos en columnas;
el del medio con el doble de anchura
que cada uno de los otros dos
<FRAMESET COLS="100,50%,*,100">
...
</FRAMESET>
Se crean cuatro marcos en columnas;
los de los extremos con 100 píxeles
de anchura, el segundo con una
anchura del 50% de la ventana y
el tercero con el resto como anchura.
Rejilla de marcos
Se pueden usar al mismo tiempo los atributos ROWS y

COLS, para crear una rejilla bidimensional de marcos.
<FRAMESET ROWS="*,*" COLS="*,*">
...
</FRAMESET>
Se crean cuatro marcos, dos por fila y
dos por columna.
Y en este caso, todos con el mismo
tamaño (altura y anchura).
Contenido de los marcos
Dentro de un FRAMESET se definen los contenidos de

los marcos mediante elementos de marcos.
Un elemento de marco es un marco individual (elemento
FRAME) o un conjunto de marcos (otro FRAMESET).
El documento HTML a cargar en un marco individual se
indica con el atributo SRC del elemento FRAME:
<FRAMESET ROWS="*,*,*"> 
<FRAME SRC="Tablas.html">
<FRAME SRC="Mapa.htm">
<FRAME SRC="Formatos.htm">
</FRAMESET>
El elemento FRAME es un elemento vacío (no hay marca
de cierre).

Contenido de los marcos
<FRAMESET ROWS="*,*,*">
<FRAME SRC="Tabla1.html">
<FRAME SRC="EjMapa.html">
<FRAME SRC="Formatos.html">
</FRAMESET>
Alternativa para navegadores obsoletos
Algunos navegadores antiguos pueden no saber cómo

mostrar conjuntos de marcos, por lo que se contempla
el elemento NOFRAMES como un elemento más que se
puede colocar dentro de los elementos FRAMESET.
El elemento NOFRAMES sirve para proporcionar un
contenido alternativo para navegadores que no puedan
mostrar conjuntos de marcos:
<FRAMESET>
...
<NOFRAMES>
<BODY>
<P>Esta página usa marcos, pero su
navegador no los admite.</P>
</BODY>
</NOFRAMES> Actualmente es inusual que un usuario
</FRAMESET> utilice un navegador que no admita marcos

Anidamiento de conjuntos de marcos
Dentro de un conjunto de marcos pueden definirse

algunos de los marcos como otros conjuntos de marcos.
El espacio asignado al elemento de marco en el conjunto
de marcos exterior se reparte entre los marcos del
conjunto de marcos interior que describe ese elemento.
El anidamiento de marcos permite crear disposiciones de
marcos a medida:
<FRAMESET ROWS="30%,*">
<FRAME ...>
<FRAMESET COLS="20%,*">
<FRAME ...>
<FRAME ...>
</FRAMESET>
</FRAMESET>
Anidamiento de conjuntos de marcos
Con el anidamiento se pueden conseguir disposiciones

de marcos realmente complejas.
<FRAMESET ROWS="20%,50%,*">
<FRAME ...>
<FRAMESET COLS="20%,*,*">
<FRAME ...>
<FRAME ...>
<FRAME ...>
</FRAMESET>
<FRAMESET COLS="*,*">
<FRAME ...>
<FRAME ...>
</FRAMESET>
</FRAMESET>

Ejercicios sobre composición de marcos
Para realizar los ejercicios debes usar algunas páginas

que te proporcionamos (carpeta Marcos1).
Página con escudo:
Escudo.html
Página de vínculos:
Navega.html
Página de menú: Página principal:

Ejemplos.html Curso.html

Página de contenido:
Contenido.html
Marcos1.html
Navega.html
20%
80%
Curso.html

Marcos2.html
Navega.html 25%
Escudo.html
75%
Curso.html
20% 80%

Marcos3.html
Navega.html 25%
Escudo.html
75%
Contenido.html
Ejemplos.html
20% 80%

Bordes de los marcos en conjunto
Se puede establecer la anchura de los bordes de los

marcos con el atributo BORDER de FRAMESET.
Si se asigna 0, no se verán bordes de marcos.
<FRAMESET ROWS="25%,*" COLS="20%,*" BORDER="0">
<FRAME SRC=
"Escudo.html">
<FRAME SRC=
"Navega.html">
<FRAME SRC=
"Ejemplos.html">
<FRAME SRC=
"Contenido.html">
</FRAMESET>
Márgenes de los marcos
Se establecen con los atributos MARGINWIDTH y

MARGINHEIGHT de FRAME (en anchura y en altura).
<FRAME MARGINWIDTH="30" MARGINHEIGHT="30" ...

Barras de desplazamiento de los marcos
Si el contenido de un marco no cabe entero en el marco

se colocan automáticamente barras de desplazamiento
según se necesite (vertical, horizontal o ambas).
Se puede hacer, sin embargo, que no haya barras
aunque se necesiten (SCROLLING="no") o que
las haya aunque no se necesiten (SCROLLING="yes").
El valor por defecto es "auto".
Se debe usar con cuidado el valor "no" para
SCROLLING, ya que puede hacer que parte del
contenido resulte inaccesible para usuarios que trabajen
a bajas resoluciones.
A continuación se muestra un ejemplo de ausencia de
barras de desplazamiento.
Ausencia de barras de desplazamiento
SCROLLING="No"
en esos dos
elementos FRAME

Redimensionamiento de los marcos
Por defecto, el usuario puede arrastrar el borde de un

marco para aumentar o disminuir en la correspondiente
dirección el tamaño del marco.
Para impedir que se pueda cambiar el tamaño de un

marco se puede usar el atributo NORESIZE de su
elemento FRAME (atributo que no toma valor).
Ejercicio sobre características de marcos
Modifica los tres ejercicios anteriores para que los

marcos tengan estas características:
9 Marcos sin bordes.
9 Barra de navegación (Navega.html) más centrada
en su marco, sin barras de desplazamiento y sin
poder cambiar su tamaño.
9 Logotipo (Escudo.html) sin barras de
desplazamiento y sin poder cambiar su tamaño.
9 Menú lateral (Ejemplos.html) sin barras de
desplazamiento, sin poder cambiar su tamaño y
con fondo de color "Silver".
Carpeta Marcos2.

Marcos1.html
Marcos2.html

Marcos3.html
Navegación con marcos
Los documentos que se cargan en los marcos

pueden contener hipervínculos a otros documentos.
Cuando se pulsa sobre un hipervínculo de un documento
que se está en un marco…
¿dónde se carga el nuevo documento?
Por defecto, estando en un marco el documento de
destino de un hipervínculo se carga en ese mismo marco.
Podemos indicar explícitamente en el hipervínculo
(elemento A) cuál es el lugar en el que se ha de mostrar
el documento de destino.

Objetivo (TARGET) de un hipervínculo
El elemento A contempla un atributo TARGET al que

se le pueden asignar distintos valores para determinar
dónde se ha de colocar el documento de destino
(la ventana objetivo del hipervínculo).
Por ventana se entiende no sólo una ventana en sí,
sino también un marco o un conjunto de marcos.
<A TARGET="objetivo" HREF="...
Los valores posibles para TARGET son:
_blank: nueva ventana del navegador.
_self: marco o ventana del vínculo (por defecto).
_parent: conjunto de marcos padre.
_top: ventana completa actual del navegador.
nombre: marco con el nombre indicado.
Objetivo de un hipervínculo
Hipervínculo en la página Ejemplos.html que tenga

como documento de destino Formatos.htm:
<A HREF="Formatos.htm">Formatos</A>
Por defecto, el documento de destino

aparece en el mismo marco.

<A TARGET="_top" HREF="Formatos.htm"> ...

Se olvida la estructura de marcos y se coloca el
documento ocupando toda la ventana del navegador.
TARGET="_top"
TARGET="_blank": mismo resultado pero cargando el

documento en una nueva ventana completa.
TARGET="_parent": el destino se ha de cargar en el
espacio que ocupa el conjunto de marcos (FRAMESET)
en el que se encuentra el marco con el hipervínculo.
El caso que nos queda (aparte de TARGET="_self", el
valor por defecto) se basa en el uso de un nombre de
marco como objetivo; se debe haber dado previamente
al marco objetivo un nombre que lo identifique.
Para identificar un marco
se usa el atributo NAME
del elemento FRAME:
<FRAME SRC="Contenido.html" Principal
NAME="Principal">

Se puede utilizar el nombre para establecer el marco

como destino de un hipervínculo; basta asignar el
nombre del marco a TARGET:
<A TARGET="Principal" HREF="Formatos.htm"> ...
Si no hay ningún marco con ese nombre se usa una

nueva ventana. El atributo TARGET también se usa
con elementos AREA (mapas).
Objetivo predeterminado de los hipervínculos
Para hacer que un marco sea el destino de los vínculos

del documento actual se usa el elemento BASE.
El elemento BASE es un elemento de alcance global, por
lo que se coloca en la cabecera del documento HTML.
Con BASE se puede especificar el objetivo por defecto
para todos los hipervínculos del documento (por medio
de su atributo TARGET):
<HEAD>
<TITLE>Ejemplos del curso</TITLE>
<BASE TARGET="Principal"
</HEAD>
Ahora no hace falta indicar explícitamente en cada
elemento A cuál es el marco objetivo: por defecto será
el denominado Principal.

Ejercicio sobre navegación con marcos
Páginas que usaremos para crear un sitio web completo:

Además de las páginas que creamos antes como punto
de partida (Escudo.html, Navega.html, Ejemplos.html
y Contenido.html) también usaremos páginas de temas
anteriores que ya están en la carpeta Marcos3.
Formatos.html
Hiper.html
Imágenes.html
Listas.html
EjMapa.html
Tabla1.html
Tabla2.html
Y se han añadido los vínculos en las páginas de índice.
La página principal del sitio será index.html, similar a la

página Marcos2.html que creamos anteriormente.
El marco inferior
se denominará
Principal.
Escudo.html
Navega.html Principal
Curso.html

Cuando se pulse el vínculo Página principal se cargará

Curso.html en el marco Principal (mismo resultado
que index.html).
Curso.html
Cuando se pulse el vínculo Contenido se cargará

Contenido.html en el marco Principal.
Contenido.html

Vínculos del documento Contenido.html: sus

documentos de destino se cargan en el marco
denominado Principal.
Formatos.html
Hiper.html
Imágenes.html
Listas.html
EjMapa.html
Tabla1.html
Tabla2.html
Cuando se pulse en la barra de navegación el vínculo

Comentarios se cargará Formulario.html en el marco
Principal.
Formulario.html

Cuando se pulse en la barra de navegación el vínculo

Ejemplos se cargará Menu.html en el marco Principal.
Menu.html
Menu.html: conjunto de dos marcos en columnas (20%

y 80%), conteniendo, respectivamente, los documentos
Ejemplos.html y Curso.html (inicialmente).
Marco
identificado
como
Ejemplo
Ejemplos.html Curso.html

Vínculos del documento Ejemplos.html: sus

documentos de destino se cargan en el marco
denominado Ejemplo:
Formatos.html
Hiper.html
Imágenes.html
Listas.html
EjMapa.html
Tabla1.html
Tabla2.html
Un caso de estudio
La web de Informática El Acuario

Carpeta Empresa2:
9 NavegaMapa.html
9 Red.html
9 Mapa.html
9 NavegaComent.html
9 Comentarios.html
9 NavegaHome.html
9 Menu.html
9 index.html

06 HTML5

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

06 HTML5

Caricato da

Copyright:

Formati disponibili

Escuela Complutense Latinoamericana

Escola Complutense Latinoamericana

Programación para Internet

Universidade Federal de Santa Catarina

Tienen distribuido su contenido entre varios marcos,

El lenguaje HTML: Páginas de marcos HTML: 5 - 1

La página web de marcos se describe con un documento

Dentro de cada marco definido en el conjunto de marcos

El lenguaje HTML: Páginas de marcos HTML: 5 - 2

La página web en sí se define como un conjunto de

La página de marcos contiene un

El marco inferior contiene un conjunto

El lenguaje HTML: Páginas de marcos HTML: 5 - 3

Para crear una página de marcos se sustituye el

El lenguaje HTML: Páginas de marcos HTML: 5 - 4

Se asigna al atributo ROWS de FRAMESET la lista de

El lenguaje HTML: Páginas de marcos HTML: 5 - 5

El lenguaje HTML: Páginas de marcos HTML: 5 - 6

Uso de * para especificar dimensiones relativas

Cuando se usa el asterisco (*) para especificar que se

También sirve para las anchuras

El lenguaje HTML: Páginas de marcos HTML: 5 - 7

Se asigna al atributo COLS de FRAMESET la lista de

El lenguaje HTML: Páginas de marcos HTML: 5 - 8

Se pueden usar al mismo tiempo los atributos ROWS y

El lenguaje HTML: Páginas de marcos HTML: 5 - 10

Contenido de los marcos

Dentro de un FRAMESET se definen los contenidos de

El lenguaje HTML: Páginas de marcos HTML: 5 - 11

El lenguaje HTML: Páginas de marcos HTML: 5 - 12

Alternativa para navegadores obsoletos

Algunos navegadores antiguos pueden no saber cómo

El lenguaje HTML: Páginas de marcos HTML: 5 - 13

Dentro de un conjunto de marcos pueden definirse

El lenguaje HTML: Páginas de marcos HTML: 5 - 14

Anidamiento de conjuntos de marcos

Con el anidamiento se pueden conseguir disposiciones

El lenguaje HTML: Páginas de marcos HTML: 5 - 15

Para realizar los ejercicios debes usar algunas páginas

El lenguaje HTML: Páginas de marcos HTML: 5 - 16

Ejercicios sobre composición de marcos

Página de menú: Página principal:

El lenguaje HTML: Páginas de marcos HTML: 5 - 17

El lenguaje HTML: Páginas de marcos HTML: 5 - 18

Ejercicios sobre composición de marcos

El lenguaje HTML: Páginas de marcos HTML: 5 - 19

El lenguaje HTML: Páginas de marcos HTML: 5 - 20

Ejercicios sobre composición de marcos

El lenguaje HTML: Páginas de marcos HTML: 5 - 21

Se puede establecer la anchura de los bordes de los

El lenguaje HTML: Páginas de marcos HTML: 5 - 22

Márgenes de los marcos

Se establecen con los atributos MARGINWIDTH y

<FRAME MARGINWIDTH="30" MARGINHEIGHT="30" ...

El lenguaje HTML: Páginas de marcos HTML: 5 - 23

Si el contenido de un marco no cabe entero en el marco

El lenguaje HTML: Páginas de marcos HTML: 5 - 24

Ausencia de barras de desplazamiento

El lenguaje HTML: Páginas de marcos HTML: 5 - 25

Por defecto, el usuario puede arrastrar el borde de un

Para impedir que se pueda cambiar el tamaño de un

El lenguaje HTML: Páginas de marcos HTML: 5 - 26

Ejercicio sobre características de marcos