Html6 2009

638 views
552 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
638
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html6 2009

  1. 1. FIMÁTICA AVANZADA PARA INGENIEROS ING. MÓNICA DÍAZ REÁTEGUI CIP. 63474 monicdre@yahoo.com
  2. 2. SESIÓN 06 “Algunos nacen grandes; otros hacen grandes cosas, y otros se ven aplastados por ellas ”. William Sheakespeare
  3. 3. FRAMES ETIQUETAS IFRAMES
  4. 4. Facultad de Ingenierías y Arquitectura SESIÓN 06 Ing. Mónica Díaz Reátegui monicdre@yahoo.com 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 ofimatingenio@yahoo.es cargar en otro frame una página determinada. Esto se utiliza frecuentemente para tener un frame estrecho en TRABAJOS 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. OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 4/33
  5. 5. Facultad de Ingenierías y Arquitectura Documentos que contendrán cada frames. FRAMESET SESIÓN 06 Ing. Mónica Díaz Reátegui monicdre@yahoo.com BODY BODY Documento Documento 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> ofimatingenio@yahoo.es TRABAJOS OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 5/33
  6. 6. Facultad de Ingenierías y Arquitectura SESIÓN 06 Ing. Mónica Díaz Reátegui monicdre@yahoo.com 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%"> ofimatingenio@yahoo.es <frame src="pagizquierda.html"> <frame src="pagderecha.html" name="principal"> TRABAJOS </frameset> </html> Grabar con el nombre frames1.html OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 6/33
  7. 7. Facultad de Ingenierías y Arquitectura SESIÓN 06 Ing. Mónica Díaz Reátegui monicdre@yahoo.com ofimatingenio@yahoo.es TRABAJOS OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 7/33
  8. 8. Facultad de Ingenierías y Arquitectura OBSERVE LO SIGUIENTE: SESIÓN 06 El uso de la etiqueta body (que sirve normalmente para delimitar lo que se va Ing. Mónica Díaz Reátegui a ver en la pantalla) será reemplazado monicdre@yahoo.com 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 ofimatingenio@yahoo.es 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 TRABAJOS 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. OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 8/33
  9. 9. Facultad de Ingenierías y Arquitectura Documentos HTML de cada frame Una vez creado los frames deseados, se confeccionan el documento en SESIÓN 06 HTML de cada uno de los frames. Se debe recordar que son como páginas Ing. Mónica Díaz Reátegui independientes, que pueden tener cada una su propio fondo, etc., y todo lo monicdre@yahoo.com 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> ofimatingenio@yahoo.es <head> <title> indices pagizquierda.html</title> TRABAJOS </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. OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 9/33
  10. 10. Facultad de Ingenierías y Arquitectura En el ejemplo, le tiene el nombre de "principal" al frame de la derecha, en la que se cargará los documentos HTML. SESIÓN 06 Ing. Mónica Díaz Reátegui monicdre@yahoo.com Documento del frame de la derecha Tendrá un color de fondo, y contendrá solamente un texto. Se puede ir añadiendo más cosas. ofimatingenio@yahoo.es Guardar este documento con el nombre de pagderecha.html <html> <head> TRABAJOS <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> OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 10/33
  11. 11. Facultad de Ingenierías y Arquitectura SESIÓN 06 Ing. Mónica Díaz Reátegui monicdre@yahoo.com Finalmente se ejecutará: el archivo con el nombre frames1.html ofimatingenio@yahoo.es TRABAJOS 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. OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 11/33
  12. 12. Facultad de Ingenierías y Arquitectura 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 SESIÓN 06 podría ejecutarlo y no podría cargar la página. Ing. Mónica Díaz Reátegui Para estos casos está prevista la etiqueta <noframes> y </noframes>. Se monicdre@yahoo.com 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 ofimatingenio@yahoo.es 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 TRABAJOS página de presentación, pero añadiendo un enlace a frame1.html, para que se pueda pasar de página). OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 12/33
  13. 13. Facultad de Ingenierías y Arquitectura <noframes> <body> SESIÓN 06 Estas utilizando un navegador que no soporta frames. <p>pulsa para visitar mi <a href="ejer0602.html"> página</a>. Ing. Mónica Díaz Reátegui </body> monicdre@yahoo.com </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> ofimatingenio@yahoo.es <head> <title>mi pagina con frames</title> TRABAJOS </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> OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 13/33
  14. 14. Facultad de Ingenierías y Arquitectura SESIÓN 06 Ing. Mónica Díaz Reátegui monicdre@yahoo.com 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. ofimatingenio@yahoo.es TRABAJOS 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.... OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 14/33
  15. 15. Facultad de Ingenierías y Arquitectura ESTE VALOR SE PUEDE EXPRESAR EN: Un porcentaje del ancho del pantalla (para las columnas), o del alto de la pantalla (para las filas). SESIÓN 06 Ing. Mónica Díaz Reátegui monicdre@yahoo.com <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) ofimatingenio@yahoo.es TRABAJOS <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%) OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 15/33
  16. 16. Facultad de Ingenierías y Arquitectura SESIÓN 06 Ing. Mónica Díaz Reátegui monicdre@yahoo.com ofimatingenio@yahoo.es TRABAJOS OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 16/33
  17. 17. Facultad de Ingenierías y Arquitectura 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). SESIÓN 06 Ing. Mónica Díaz Reátegui monicdre@yahoo.com <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. ofimatingenio@yahoo.es <frameset rows="100,*,100"> TRABAJOS (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. OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 17/33
  18. 18. Facultad de Ingenierías y Arquitectura Atributos adicionales Frames sin bordes Si se desea que no exista un borde de separación entre los frames, se SESIÓN 06 deben incluir el atributo frameborder=0 dentro de la etiqueta frameset. Ing. Mónica Díaz Reátegui No todas las versiones de los navegadores lo implementan. monicdre@yahoo.com 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. ofimatingenio@yahoo.es TRABAJOS 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"> OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 18/33
  19. 19. Facultad de Ingenierías y Arquitectura <frame src="pagderecha.html" name="principal"> </frameset> </html> SESIÓN 06 Ing. Mónica Díaz Reátegui monicdre@yahoo.com ofimatingenio@yahoo.es TRABAJOS OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 19/33
  20. 20. Facultad de Ingenierías y Arquitectura 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>. SESIÓN 06 Ing. Mónica Díaz Reátegui Puede tener los siguientes posibles atributos, que van dentro de la etiqueta monicdre@yahoo.com <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. ofimatingenio@yahoo.es marginheight="número" Igual que el anterior, pero referido a los márgenes en altura. TRABAJOS 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 OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 20/33
  21. 21. Facultad de Ingenierías y Arquitectura 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 SESIÓN 06 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 Ing. Mónica Díaz Reátegui frameset. monicdre@yahoo.com 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: ofimatingenio@yahoo.es _Blank _Self TRABAJOS _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. OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 21/33
  22. 22. Facultad de Ingenierías y Arquitectura 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. SESIÓN 06 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 Ing. Mónica Díaz Reátegui activados, la página llamada se carga dentro del propio frame, lo cual es muy monicdre@yahoo.com 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. ofimatingenio@yahoo.es TRABAJOS 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. OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 22/33
  23. 23. Facultad de Ingenierías y Arquitectura SESIÓN 06 Ing. Mónica Díaz Reátegui monicdre@yahoo.com 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"> ofimatingenio@yahoo.es <frame src="documento_fila_inferior"> </frameset> TRABAJOS </html> Grabar con otroframe2.html OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 23/33
  24. 24. Facultad de Ingenierías y Arquitectura SESIÓN 06 Ing. Mónica Díaz Reátegui monicdre@yahoo.com 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%, *"> ofimatingenio@yahoo.es <frame src="documento_columna_izqda"> <frame src="documento_columna_dcha"> TRABAJOS </frameset> OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 24/33
  25. 25. Facultad de Ingenierías y Arquitectura SESIÓN 06 Ing. Mónica Díaz Reátegui monicdre@yahoo.com 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> ofimatingenio@yahoo.es TRABAJOS OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 25/33
  26. 26. Facultad de Ingenierías y Arquitectura SESIÓN 06 Ing. Mónica Díaz Reátegui monicdre@yahoo.com ofimatingenio@yahoo.es TRABAJOS En base a los códigos presentados en las páginas anteriores, generar los siguientes archivos para mostrar el siguiente cuadro: OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 26/33
  27. 27. Facultad de Ingenierías y Arquitectura 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. SESIÓN 06 Para las 3 últimas páginas colocar el siguiente código: Ing. Mónica Díaz Reátegui <html> monicdre@yahoo.com <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 ofimatingenio@yahoo.es aparecerá en dicho frame. Si no se pone este atributo, dicho frame aparecerá vacío (pero con el tamaño previamente definido). TRABAJOS NAME= "nombre_frame" Sirve para asignar un nombre al frame. WIDTH= "n" Indica la anchura de la ventana del frame (en "n%" píxeles o en porcentaje del ancho de pantalla). HEIGHT= "n" Indica la altura de la ventana (en píxeles o en "n%" porcentaje del alto de pantalla). SCROLLING= "YES" Indica si el frame tendrá barra de deslizamiento "NO" en caso de que su contenido no entre "AUTO" totalmente en el espacio que le corresponde. El valor por defecto es AUTO. FRAMEBORDER= "1" Dibuja el borde de la ventana. "0" No dibuja el borde de la ventana. OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 27/33
  28. 28. Facultad de Ingenierías y Arquitectura SESIÓN 06 Ing. Mónica Díaz Reátegui monicdre@yahoo.com 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> ofimatingenio@yahoo.es <br><p> TRABAJOS <form> <input onclick="location .href='ejer0609.html'" type=button value=siguiente> </form> <br> </center></body></html> OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 28/33
  29. 29. Facultad de Ingenierías y Arquitectura CREAR LA PÁGINA EJER0609.HTML <html> <head> SESIÓN 06 <title> ejemplo de una página que muestra una ventana </title></head> Ing. Mónica Díaz Reátegui <body > monicdre@yahoo.com <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> ofimatingenio@yahoo.es <title>ejemplo de una página que aparece en una ventana</title> </head> TRABAJOS <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> OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 29/33
  30. 30. Facultad de Ingenierías y Arquitectura El resultado central sería de la siguiente manera: SESIÓN 06 Ing. Mónica Díaz Reátegui monicdre@yahoo.com ofimatingenio@yahoo.es TRABAJOS OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 30/33
  31. 31. Facultad de Ingenierías y Arquitectura IFRAME CON CONTENIDO DE LISTA DE IMÁGENES SESIÓN 06 Copiar los siguientes códigos en las páginas respectivas. Ing. Mónica Díaz Reátegui monicdre@yahoo.com 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> ofimatingenio@yahoo.es </td> TRABAJOS </tr> </table> </body> OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 31/33
  32. 32. Facultad de Ingenierías y Arquitectura ARCHIVO IMAGSOL.HTM <html> SESIÓN 06 <head><title> Galeria De Fotos</title></head> Ing. Mónica Díaz Reátegui <body> monicdre@yahoo.com <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> ofimatingenio@yahoo.es <td align="center"> <img src="sol/sol5.gif" border=1 width=110 height=60><br> TRABAJOS 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> OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 32/33
  33. 33. Facultad de Ingenierías y Arquitectura SESIÓN 06 Ing. Mónica Díaz Reátegui monicdre@yahoo.com ofimatingenio@yahoo.es TRABAJOS OFIMÁTICA AVANZADA PARA INGENIEROS MDÍAZR 33/33

×