html6 2009

33
FIMÁTICA AVANZADA PARA INGENIEROS ING. MÓNICA DÍAZ REÁTEGUI CIP. 63474 [email protected]

Upload: sofia-contreras

Post on 13-Jun-2015

516 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Html6 2009

FIMÁTICA AVANZADA PARA INGENIEROS

ING. MÓNICA DÍAZ REÁTEGUICIP. 63474

[email protected]

Page 2: Html6 2009

SES

IÓN

06

“Algunos nacen grandes; otros hacen grandes cosas, y otros se ven aplastados por ellas ”.

William Sheakespeare

Page 3: Html6 2009

FRAMES

ETIQUETAS

IFRAMES

Page 4: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 4/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

Frames en inglés significa marcos o cuadros. Es un procedimiento del lenguaje HTML para dividir la pantalla en diferentes zonas, o ventanas, que pueden actuar independientemente unas de otras, como si se trataran de páginas diferentes, pues incluso cada una de ellas pueden tener sus propias barras deslizadoras. Prácticamente en la actualidad todos los navegadores, soportan esta característica.

Una de las características más importantes es que pulsando un enlace situado en un frame, se puede cargar en otro frame una página determinada. Esto se utiliza frecuentemente para tener un frame estrecho en la parte lateral (o superior) con un índice del contenido en forma de diferentes enlaces, que, al ser pulsados cargan en la ventana principal las distintas páginas. De esta manera se facilita la navegación entre las páginas, pues aunque se vaya pasando de unas a otras, siempre estará a la vista el índice del conjunto.

Se distingue dos tipos documentos:

Documento donde se definirán los frames.

Page 5: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 5/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

Documentos que contendrán cada frames.

Documento de definición de los frames Lo primero que se debe hacer es crear un documento HTML en el que se defina cuántas zonas va a haber, qué distribución y tamaño van a tener, y cuál va ser el contenido de cada una de ellas.

Sintaxis <FRAMESET COLS="porcentaje1, porcentaje2"> <FRAME SRC="nombre del archive.html">

<FRAME SRC="nombre del archive.html" NAME="poner nombre"> </FRAMESET>

FRAMESET

Documento Documento

BODY

BODY

Page 6: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 6/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

1. Desarrollar una página va a tener dos frames distribuidos en columnas (es decir, uno al lado del otro, en vez de uno encima del otro, lo que sería una distribución en filas). Con respecto al tamaño, se tendrá en el lado izquierdo (20% del ancho de la pantalla) y el otro el 80% restante. Con respecto al contenido, el frame de la izquierda va a contener un documento HTML que va a servir de índice de lo que observará en el otro lado (y que vamos a llamar trabajo1.html (pagizq.html), y el de la derecha otro documento HTML que va servirá de página de presentación (al que se llamará trabajo2.html (pagder.html). Todo lo anterior, se realizará como sigue:

<html> <head> <title>ejemplo de frames</title> </head> <frameset cols="20%, 80%"> <frame src="pagizquierda.html"> <frame src="pagderecha.html" name="principal"> </frameset> </html> Grabar con el nombre frames1.html

Page 7: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 7/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

Page 8: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 8/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

OBSERVE LO SIGUIENTE:

El uso de la etiqueta body (que sirve normalmente para delimitar lo que se va a ver en la pantalla) será reemplazado por la etiqueta frameset (definir los frames).

Con la etiqueta <frameset cols="20%,

80%"> se define que hay dos frames y que van a ir en columnas.

Si se deseara que fueran en filas, se habría puesto en rows (filas, en

inglés). También se define el espacio en anchura que van a ocupar cada uno de ellos en la pantalla. Se ha puesto como porcentajes del total, pero se podría también haber puesto una cifra absoluta, que representaría el número de píxel a ocupar.

Una vez definido el número de frames, su distribución y su tamaño, a continuación se definirá el contenido de cada frame. Esto se hace con las etiquetas: <frame src="pagizquierda.html"> <frame src="pagderecha.html" name="principal"> Con esto se define que el contenido del primer frame (el de la izquierda) sea el documento HTML pagizquierda.html y el del segundo (el de la derecha) sea el documento HTML pagderecha.html.

Observe que en la etiqueta del segundo se ha incluido el atributo name="principal", pero no así en el primero. El motivo es que se necesita dar un nombre al segundo frame, debido a que el documento del primer frame va a haber unos enlaces que van a ir dirigidos hacia él. En este caso sólo solo se tiene dos frames, pero podría haber más, y es necesario distinguirlos unos de otros. Y el primero no necesita nombre, pues no va a haber enlaces en el segundo dirigidos hacia él.

A este documento se le va a llamar ejer0601.html.

Page 9: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 9/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

Documentos HTML de cada frame Una vez creado los frames deseados, se confeccionan el documento en HTML de cada uno de los frames. Se debe recordar que son como páginas independientes, que pueden tener cada una su propio fondo, etc., y todo lo que quiera añadir en ellos. Documento del frame de la izquierda Se le va a dar un fondo de color amarillo, y va a contener dos enlaces dirigidos al frame de la derecha. Además, como muestra de que se puede añadir cualquier cosa en un frame.

Se guarda este documento con el nombre pagizquierda.html <html> <head> <title> indices pagizquierda.html</title> </head> <body bgcolor=" #0ff0ff "> <p><a href="ejer0602.html" target="principal"> Presentación </a> <p><a href="ejer0603.html" target="principal"> Mi página </a> <p> </body> </html> Dentro de las etiquetas de los enlaces se puede observar el atributo target (en inglés: objetivo, blanco), que sirve para hacer que al ser activado el enlace no se cargue en el propio frame, sino en otro, precisamente en el que se ha llamado con ese nombre en el documento de definición de los frames.

Page 10: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 10/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

En el ejemplo, le tiene el nombre de "principal" al frame de la derecha, en la que se cargará los documentos HTML.

Documento del frame de la derecha Tendrá un color de fondo, y contendrá solamente un texto. Se puede ir añadiendo más cosas.

Guardar este documento con el nombre de pagderecha.html <html> <head> <title>presentación pagderecha.html </title> </head> <body bgcolor="#fff0f0" text="#ff0fff"> <center> <font size=+3><strong> <p>mi primera página <br><font color="#ff0000">con frames</font> <br>bienvenidos </strong> </font> </center> </body> </html>

Page 11: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 11/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

Finalmente se ejecutará: el archivo con el nombre frames1.html

Alternativa para los navegadores que no soportan frames Con lo realizado anteriormente, se tiene tres piezas:

Documento de definición de los frames. Documento del contenido del primer frame. Documento del contenido del segundo frame.

Page 12: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 12/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

En teoría no se necesita nada más. El problema suscitaría si algún navegador no soporta los frames, pues que al desconocer las etiquetas frameset y frame del documento de definición, no podría ejecutarlo y no podría cargar la página. Para estos casos está prevista la etiqueta <noframes> y </noframes>. Se colocan a continuación de las distintas etiquetas <frame>, quedando la estructura de esta manera: <html> <frameset ....> <frame....> <frame....> <noframes> <body> [Aquí va lo que queremos que vean los usuarios con navegadores que no soportan frames] </body> </noframes> </frameset> </html> Dentro de la etiqueta <noframes> se ha colocado las etiquetas <body> y </body>, pero hay que tener en cuenta que esto es sólo para esa página de advertencia. En el ejemplo, se va a poner un mensaje advirtiendo de esta circunstancia, y dirigiendo al usuario, con un enlace normal, hacia la página pag0603.html. También se podría no decir nada sobre frames, y colocar el código de la página de presentación, pero añadiendo un enlace a frame1.html, para que se pueda pasar de página).

Page 13: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 13/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

<noframes> <body> Estas utilizando un navegador que no soporta frames. <p>pulsa para visitar mi <a href="ejer0602.html"> página</a>. </body> </noframes>

Si se incluye dentro del documento de definición de los frames que se ha realizado, quedaría de la siguiente manera:

Guardar el documento con el nombre de noframes.html

<html> <head> <title>mi pagina con frames</title> </head> <frameset cols="20%, 80%"> <frame src="pagizquierda.html"> <frame src="pagderecha.html" name="principal"> <noframes> <body> estas utilizando un navegador que no soporta frames. <p>pulsa para visitar mi <a href="ejer0602.html"> página</a>. </body> </noframes> </frameset> </html>

Page 14: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 14/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

1. Complete un contenido en las páginas ejer0602.html y ejer0603.html.

La etiqueta FRAMESET La etiqueta FRAMESET, como hemos visto en el ejemplo, es la que define la distribución, el número y tamaño de los frames. Tiene dos atributos: COLS (columnas) y ROWS (filas):

<FRAMESET COLS="xx, yy, zz...."> <FRAMESET ROWS="xx, yy, zz....">

Define la distribución de los frames en columnas o en filas, según se use uno u otro atributo. Defina dos tipos de frame en columnas una de dos y otra de tres <frameset cols="xx, yy"> (habrá dos frames en columnas) <frameset cols="xx, yy, zz"> (habrá tres frames en columnas) En este caso se define el tamaño de los frames, según el valor que se da a xx, yy, zz....

Page 15: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 15/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

ESTE VALOR SE PUEDE EXPRESAR EN:

Un porcentaje del ancho del pantalla (para las columnas), o del alto de la

pantalla (para las filas).

<frameset cols="20%, 80%"> (La columna de la izquierda ocupará el 20% del ancho de la pantalla, y la de la derecha el 80% restante)

<frameset rows="10%, 70%, 20%"> (La fila superior ocupará el 10% del alto de la pantalla, la del medio el 70%, y la inferior el 20%)

Page 16: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 16/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

Page 17: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 17/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

Un número absoluto que representa el número de píxeles que ocupará cada frame a lo ancho o a lo alto (según sean filas o columnas).

<frameset cols="40, 600">

(La columna de la izquierda tendrá 40 píxeles de ancho y la de la derecha 600). Pero, es peligroso utilizar sólo valores absolutos, pues el tamaño de la pantalla varía de un usuario a otro. Si se va a usar algún valor absoluto para un frame, es mejor mezclarlo con alguno relativo. A continuación se verá como se ajusta el total a la pantalla del usuario

Un valor relativo que se consigue poniendo un asterisco ( * ), en vez de un número. Esto se interpreta como que ese frame debe tener el espacio restante.

<frameset rows="100,*,100">

(Habrá tres filas, la superior y la inferior de una altura fija de 100 píxeles, y la del medio obtendrá el espacio restante). Si hay más de un frame con asterisco, ese espacio restante se dividirá por igual entre ellos. Si hay un número antes del asterisco, ese frame obtiene esa cantidad más de espacio relativo. Así "2*,*" daría dos tercios para el primer frame y un tercio para el otro.

Page 18: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 18/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

Atributos adicionales

Frames sin bordes Si se desea que no exista un borde de separación entre los frames, se deben incluir el atributo frameborder=0 dentro de la etiqueta frameset. No todas las versiones de los navegadores lo implementan.

Para que desaparezcan las separaciones entre los frames hay que añadir otros dos atributos:

framespacing=0 (para el internet explorer) border =0 (para netscape)

Con lo que la etiqueta completa quedaría: <frameset frameborder=0 framespacing=0 border=0 cols="xx, yy"> Se ha incluido ambos atributos para que el efecto se produzca en ambos navegadores, es decir si se utiliza el Explorer se ejecutará framespacing=0, el atributo border será ignorado.

En el ejercicio anterior sería de la siguiente manera: Grabar con el otroframe.html <html> <head> <title>ejemplos de frames</title> </head> <frameset cols="20%, 80%" frameborder=0 framespacing=0 border=0 > <frame src="pagizquierda.html">

Page 19: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 19/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

<frame src="pagderecha.html" name="principal"> </frameset> </html>

Page 20: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 20/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

La etiqueta FRAME Esta etiqueta define las características de un frame concreto, no del conjunto de los frames, como era el caso con la etiqueta <frameset>. Puede tener los siguientes posibles atributos, que van dentro de la etiqueta <FRAME>: src="dirección" Esta dirección puede ser la de un documento HTML (tal como se ha utilizado en el ejemplo), o cualquier otro recurso del Web (o URL). Con este atributo se indica lo que se cargará inicialmente en el frame. Si no se le pone este atributo a la etiqueta <FRAME>, entonces dicho frame aparecerá inicialmente vacío, aunque tendrá las dimensiones asignadas. name="nombre_de_la_ventana" Este atributo se usa para asignar un nombre a un frame. De esta manera se podrá "dar en el blanco" (en inglés, target) en esta página, desde un enlace situado en otra página. Es decir, que pulsando en otra página un enlace, se cargará precisamente en ésta, tal como se ha visto en el ejemplo. El atributo name es opcional. Por defecto, todas las ventanas carecen de nombre. Los nombres que se escojan deben comenzar por un carácter alfanumérico (una letra o un número, pero no otro tipo de símbolo) marginwidth="número" Se utiliza este atributo cuando se quiere controlar el ancho de los márgenes dentro de un frame. El número que se ponga representa los píxeles de los márgenes. Este atributo es opcional. marginheight="número" Igual que el anterior, pero referido a los márgenes en altura. scrolling="yes|no|auto" Este atributo se utiliza para decidir si el frame tendrá o no una barra deslizadora. Si se escoge "yes" tendrá siempre una barra deslizadora. Si se escoge "no" no la tendrá nunca, y si se escoge "auto", será el navegador quien decida si la tendrá o no. Este atributo es opcional. Su valor por defecto es "auto". noresize A este atributo no se le asigna un valor numérico, como a los demás. Es un indicador para que la ventana no se pueda re-dimensionar (en inglés, resize) por parte del usuario. Se puede comprobar en el ejemplo con frames que si se coloca el cursor del ratón entre los dos frames, al pulsarlo y arrastrarlo en un sentido u otro, varían las dimensiones prefijadas de los frames. Este

Page 21: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 21/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

atributo impide que ocurra esto en un frame. Es un atributo opcional. Por defecto, todos los frames son re-dimensionables.

frameborder="no" Este atributo elimina el borde en un frame, pero si se quiere que se elimine completamente, también hay que ponérselo al frame contiguo. Si se desea eliminar los bordes de todos los frames, se debe colocar en la etiqueta frameset. El atributo TARGET En el ejemplo realizado, los enlaces situados en el frame de la izquierda no se realizarán en el mismo, sino en otro frame, se tendría que poner dentro de cada enlace el atributo target="principal", siendo "principal" el nombre que se habría dado al segundo frame, en el documento de definición de frames. Sintaxis

target="nombre_dado_a_otro_frame". Estos nombres, que se eligen puede ser cualquiera, pero con la condición que el primer carácter sea alfanumérico (letra o número). Pero, hay unos nombres reservados (es decir, que no se pueden usar para denominar a un frame), que hacen que este atributo efectúe unas funciones especiales. Para que cumplan su cometido, es imprescindible escribir estas palabras reservadas:

_Blank _Self _Top

En minúsculas. target="_blank" Hace que se abra una nueva copia del navegador, y el enlace activado se carga en ella, a pantalla completa. Es decir, se tendría dos copias del navegador (Netscape, Explorer, etc.) funcionando a la vez. target="_self" Hace que el enlace se cargue en el propio frame.

Page 22: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 22/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

target="_top" Hace que el enlace se cargue a pantalla completa, suprimiendo todos los frames, pero, sin que se cargue una nueva copia del navegador. Este es particularmente útil. Un error muy común es olvidarse de poner este atributo en los enlaces que están en un frame, con lo que resulta que al ser activados, la página llamada se carga dentro del propio frame, lo cual es muy molesto si esa página pertenece a otro sitio del Web, y aún más grave si esa página tiene a su vez frames. Este inconveniente se evita poniendo este atributo dentro de las etiquetas de los enlaces.

Frames anidados dentro de otros frames No solamente existe la posibilidad de tener una distribución de los frames en filas o bien en columnas, (dependiendo que se utilice el atributo ROWS o COLS en la etiqueta FRAMESET), también se puede obtener distribuciones más complejas anidando filas dentro de una columna, o a la inversa, columnas dentro de una fila.

Un frame estrecho en horizontal en la parte superior, de lado a lado de la pantalla (altura, el 15%) Otro frame estrecho en vertical en la parte izquierda, debajo del anterior (anchura, el 20%) y un tercero ocupando el resto de la pantalla. Se puede observar que, en realidad, esto equivale a la siguiente distribución: Dos filas. La superior ocupa el 15% y la inferior el resto.

Page 23: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 23/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

La fila inferior está a su vez dividida en dos columnas. La primera (la de la izquierda) ocupa el 20% y la otra, el resto.

El documento de definición de las dos filas (por el momento no tomemos en cuenta que la de abajo está subdividida), sería:

<html> <head> <title>página con dos filas</title> </head> <frameset rows="15%, *"> <frame src="documento_fila_superior"> <frame src="documento_fila_inferior"> </frameset> </html>

Grabar con otroframe2.html

Page 24: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 24/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

Como la fila inferior, en realidad, son dos columnas (con una distribución del 20% y resto), se sustituye (anidando) la etiqueta: <frame src="documento_fila_inferior"> Por: <frameset cols="20%, *"> <frame src="documento_columna_izqda"> <frame src="documento_columna_dcha"> </frameset>

Page 25: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 25/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

Grabar con otroframe3.html

<html> <head> <title>pagina con fila superior y dos columnas inferiores</title> </head> <frameset rows="15%, *">

<frame src="documento_fila_superior">

<frameset cols="20%, *"> <frame src="documento_columna_izqda"> <frame src="documento_columna_dcha"> </frameset> </frameset> </html>

Page 26: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 26/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

En base a los códigos presentados en las páginas anteriores, generar los siguientes archivos para mostrar el siguiente cuadro:

Page 27: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 27/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

Ejer0604.html para la creación de los frames Ejer0605.html para el cuadro de la izquierda Ejer0606.html para el cuadro de la derecha Ejer0607.html para el cuadro de la parte inferior. Para las 3 últimas páginas colocar el siguiente código: <html> <head> <title>pagina del cuadro de la izquierda</title> </head> <body bgcolor=green> </body> </html>

FRAMES DENTRO DE UNA PÁGINA WEB

También llamados inline frames, se emplean cuando se desea insertar un documento HTML en medio de otro. Ello se consigue abriendo una ventana que contiene otra página Web. Dicha ventana tendrá unas determinadas medidas y contará con barras de desplazamiento. Para realizar esto se ha de emplear la siguiente etiqueta:

<IFRAME>texto</IFRAME>

En texto se pondrá el texto que se desee que aparezca en pantalla en el caso de que el navegador no reconozca la etiqueta, como el Netscape Navigator (este texto puede ser, por ejemplo, una advertencia de que hay una ventana que contiene un documento y que no se ve, y un enlace a la página que aparece en la ventana).

Atributo Parámetros Descripción SRC= "dirección" Indica la dirección del documento que

aparecerá en dicho frame. Si no se pone este atributo, dicho frame aparecerá vacío (pero con el tamaño previamente definido).

NAME= "nombre_frame" Sirve para asignar un nombre al frame. WIDTH= "n" Indica la anchura de la ventana del frame (en

píxeles o en porcentaje del ancho de pantalla). "n%" HEIGHT= "n" Indica la altura de la ventana (en píxeles o en

porcentaje del alto de pantalla). "n%" SCROLLING= "YES" Indica si el frame tendrá barra de deslizamiento

en caso de que su contenido no entre totalmente en el espacio que le corresponde. El valor por defecto es AUTO.

"NO" "AUTO"

FRAMEBORDER= "1" Dibuja el borde de la ventana. "0" No dibuja el borde de la ventana.

Page 28: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 28/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

Copiar los siguientes códigos en las páginas respectivas, además note una aplicación extendida de los formularios (clase pasada, es decir el uso de un botón de orden que sirve para vincular con otra página). Crear la página ejer0608.html <html> <head> <title>ejemplo de una página que contiene un botón que vincula a otra página </title> </head> <body > <center> <h1> ejemplo de la etiqueta<br> &lt;iframe&gt;...&lt;/iframe&gt; </h1> <br><p> <br><p> <br><p> <br><p> <form> <input onclick="location .href='ejer0609.html'" type=button value=siguiente> </form> <br> </center></body></html>

Page 29: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 29/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

CREAR LA PÁGINA EJER0609.HTML <html> <head> <title> ejemplo de una página que muestra una ventana </title></head> <body > <center> <h1> etiqueta<br> &lt;iframe&gt;...&lt;/iframe&gt; </h1> <br><p> <br><p> <iframe frameborder=1 height=200 width=550 src="ejer0610.html"> </iframe> <br><p> <br><p> <form> <input onclick="location.href='ejer0608.html'" type=button value=volver> </form> <br></center> </body> </html>

Crear la página ejer0610.html

<html> <head> <title>ejemplo de una página que aparece en una ventana</title> </head> <body > <center> <h1> facultad de ingenierías e informática <br><p> facultad de ingenierías e informática <br><p> facultad de ingenierías e informática <br><p> br><p> facultad de ingenierías e informática <br><p> facultad de ingenierías e informática <br><p> </h1> <center> </body> </html>

Page 30: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 30/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

El resultado central sería de la siguiente manera:

Page 31: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 31/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

IFRAME CON CONTENIDO DE LISTA DE IMÁGENES Copiar los siguientes códigos en las páginas respectivas. ARCHIVO IFRAMES1.HTML

<html> <head><title>Lista de Imágnes</title></head> <body bottomMargin=0 bgColor=cyan leftMargin=0 topMargin=0 rightMargin=0 marginwidth=”0” marginheight=”0”> <center><h1>IMÁGENES</h1><p></center> <table cellSpacing=0 cellPadding=0 border=0> <tr> <td width=144 height=362 rowspan=2>.. </td> <td width=144 height=362 rowspan=2> <iframe name=if align=right src="imagsol.html" frameborder=0 width=144 scrolling=yes height=362> </iframe> </td> </tr> </table> </body>

Page 32: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 32/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06

ARCHIVO IMAGSOL.HTM

<html> <head><title> Galeria De Fotos</title></head> <body> <table> <tr> <td align="center"> <img src="sol/sol1.gif" border=1 width=110 height=60><br> ASTRO 1</td> </tr> <p> <tr> <td align="center"> <img src="sol/sol2.gif" border=1 width=110 height=60> <br> ASTRO 2</td> </tr> <p> <tr> <td align="center"> <img src="sol/sol3.gif" border=1 width=110 height=60><br> ASTRO 3</td> </tr> <p> <tr> <td align="center"> <img src="sol/sol4.gif" border=1 width=110 height=60><br> ASTRO 4</td> </tr> <p> <tr> <td align="center"> <img src="sol/sol5.gif" border=1 width=110 height=60><br> ASTRO 5</td> </tr> <p> <tr> <td align="center"> <img src="sol/sol2.gif" border=1 width=110 height=60><br> ASTRO 6</td> </tr> </table> </body></html>

Page 33: Html6 2009

Facultad de Ingenierías y Arquitectura

OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 33/33

Ing.

Món

ica

Día

z R

eáte

gui

mon

icdr

e@ya

hoo.

com

TRA

BA

JOS

ofim

atin

geni

o@ya

hoo.

es

SES

IÓN

06