POW HTML. Denis Leopoldo Espinoza Hernández

Tamaño: px

Comenzar la demostración a partir de la página:

Download "POW HTML. Denis Leopoldo Espinoza Hernández"

Magdalena Benítez Soto
hace 6 años
Vistas:

1 POW Tema 2: Elementos Avanzados de HTML Denis Leopoldo Espinoza Hernández

2 Los Marcos en HTML Los marcos HTML permiten a los autores presentar documentos con vistas múltiples, que pueden ser ventanas o subventanas independientes. Las vistas múltiples ofrecen a los autores una manera de mantener cierta información visible mientras otras vistas se desplazan o se sustituyen. Por ejemplo, dentro de una misma ventana, un marco podría mostrar un gráfico estático, un segundo marco un menú de navegación, y un tercero el documento principal que puede ser desplazado, o reemplazado al navegar por el segundo marco. 2

3 Ejemplo del uso de marcos: Supongamos que se tienen las siguientes páginas web individuales: <html> <head> <title>un documento simple con marcos</title></head> <frameset cols="20%, 80%"> </frameset> </html> <frameset rows="100, 200"> </frameset> <frame src="01-marco1.html" name="imagen"> <frame src="01-marco2.html" name="barra"> <frame src="01-marco3.html" name="principal"> <noframes> Esto es lo que se visualizara cuando no se puedan ver los marcos. </noframes> 3

4 Contenido de cada uno de los marcos: 01-Marco1.html <html> <body> <img src="images/logo_animales.gif" /> </body> </html> 01-Marco2.html <html> <body bgcolor="#ff99ff"> <a href="01-marco3.html" target="principal">datos Personales</a> <br/> <br/> <a href="01-marco4.html" target="principal">asignaturas</a> <br/> <br/> <a href="01-marco5.html" target="principal">curiosidades</a> <br/> <br/> </body> </html> 4

5 Contenido de cada uno de los marcos: 01-Marco3.html <html> <body bgcolor="#66ff00"> Mi nombre es Denis Espinoza. </body> </html> 01-Marco4.html <html> <body bgcolor="#ffff00"> 1. Programacion Orientada a la Web.<br/> 2. Administracion de Servicios de Red. </body> </html> 5

6 Contenido de cada uno de los marcos: 01-Marco5.html <html> <body bgcolor="#ffccff"> Aqui colocare informacion en un futuro </body> </html> Estasson las5páginasqueentran enjuegoalahoradecrearlosdiferentes marcos con los cuales se está trabajando. Si el navegador tiene deshabilitados los marcos, se mostrará el contenido que se encuentre entre las etiquetas noframe. Notesé que en la página la declaración de los frames nohay bodyyque en las páginas quecomponen cadaunode los frames no es necesario colocar el head, aunque puede ocuparse para algunas propiedades. 6

7 Filas y columnas Cuando se establece el atributo rows (filas) se define el número de subespacios horizontales. Cuando se establece el atributo cols (columnas) se define el número de subespacios verticales. Ambos atributos se pueden especificar simultáneamente para crear una cuadrícula. Si no se establece el atributo rows, cada columna se extiende a lo largo de toda la longitud de la página. Si no se establece el atributo cols, cada fila se extiende a lo largo de toda la anchura de la página. Si no se establece ninguno de los dos atributos, el marco tiene exactamente el mismo tamaño que la página. Los marcos se crean de izquierda a derecha para las columnas y de arriba a abajo para las filas. Cuando se especifican ambos atributos, las vistas se crean de izquierdaaderechaenlafilasuperior,deizquierdaaderechaenlasegundafila,etc. 7

8 Ejemplos de utilización de frames En este primer ejemplo dividimos la pantalla verticalmente en dos (es decir, creamos una mitad superior y una mitad inferior). <framesetrows="50%, 50%">...el resto de la definición... </frameset> El siguiente ejemplo crea una cuadrícula de 2x3 subespacios. <framesetrows="30%,70%" cols="33%,34%,33%">...el resto de la definición... </frameset> 8

9 Anidamiento de grupos de marcos Los grupos de marcos pueden anidarse hasta cualquier nivel. En el siguiente ejemplo, el FRAMESET exterior divide el espacio disponible en tres columnas iguales. A continuación el FRAMESET interior divide la segunda área en dos filas de alturas diferentes. <framesetcols="33%, 33%, 34%">...contenidos del primer marco... <framesetrows="40%, 50%">...contenidos del segundo marco, primera fila......contenidos del segundo marco, segunda fila... </frameset>...contenidos del tercer marco... </frameset> 9

10 Propiedades interesantes del elemento frame name= Este atributo asigna un nombre al marco actual. Este nombre puede utilizarse como el destino de vínculos subsiguientes. src= Este atributo especifica la localización de los contenidos inicialesque contendrá el marco. noresizesi está presente, este atributo booleano le dice al agente de usuario que la ventana del marco no debe ser redimensionable. scrolling= auto yes noeste atributo especifica información sobre el desplazamiento de la ventana del marco. Valores posibles: auto: Este valor le dice al agente de usuario que proporcione mecanismos de desplazamiento en la ventana del marco cuando sea necesario. Este es el valor por defecto. frameborder= 1 0 Este atributo proporciona información al agente de usuario sobre el borde del marco. 10

11 Marcos en línea: el elemento iframe El elemento IFRAME permite a los autores insertar un marco dentro de un bloque de texto. Permite insertar un documento HTML en medio de otro. La información a insertar en línea se designa mediante el atributo src de este elemento. A continuación se presenta un ejemplo del uso de iframe: 11

12 <html> <head> <title>ejemplo con iframe</title> </head> <body bgcolor="#ff99ff"> <a href="01-marco3.html" target="principal">datos Personales</a> <br/> <br/> <a href="01-marco4.html" target="principal">asignaturas</a> <br/> <br/> <a href="01-marco5.html" target="principal">curiosidades</a> <br/> <br/> </body> </html> <iframesrc="01-marco3.html" width="400" height="200" scrolling="auto" frameborder="1" name="principal"> Su agente de usuario no soporta marcos o está actualmente configurado para no mostrar marcos. Sin embargo, puede visitar el documento relacionado.</a> </iframe> <img src="images/logo_animales.gif" /> 12

13 Utilización de formularios en HTML Los formularios en HTML se utilizan de una manera similar que los de cualquier lenguaje de programación gráfica. Además se proporcionan una serie de elementos que permiten añadir elementos de entrada para los usuarios. Etiqueta form <form method="post" o"get" action="url" name= formu value= formu >... </form> method: indica cómo se enviarán las respuestas "POST" es el valor que envía los datos al agente de procesamiento almacenándolos en el cuerpo del formulario, en tanto que"get" envía los datos agregándolos a la dirección URL. action:indicaladireccióndelapáginaalaqueseenviarálainformación. 13

14 Entradas de texto Las cajas de texto: <p>ingrese su usuario: <input type="text" name="login" id="login" /></p> Las cajas de password: <p>ingrese su clave: <input type="password" name="clave" id="clave" /></p> Entrada de texto de múltiples líneas: <p>opinion: <br/><textarearows="7" cols="50" name="area" id="area"></textarea></p> 14

15 Opciones Casillas de verificación: <input type="checkbox" name="pel" id="pel" value="1" />Ver Peliculas<br/> O también se puede usar la etiqueta label <label><input type="checkbox" name="mus" id="mus" value="3" />Escuchar musica</label> Los botones de radio: <input type="radio" name="sexo" id="mas" value="1" />Masculino<br/> <input type="radio" name="sexo" id="fem" value="2" />Femenino<br/> 15

16 Combos de listas: <p>selecciona su ocupacion: <select name="ocupacion" id="ocupacion"> <option value="estudiante" selected>estudiante</option> <option value="profesional">profesional</option> <option value="doctor">doctor</option> </select> </p> Listas de múltiple selección: <p>areas de interes:<br/> <select name="interes" id="interes" multiple="multiple" size="4"> <option value="info">informatica</option> <option value="med">medicina</option> <option value="len">lenguajes</option> </select> </p> 16

17 Los botones en HTML submit: Este tipo de botones envía automáticamente el formulario al ser presionados. reset: Este tipo de botones reestablecen los controles de un formulario a sus valores iniciales al ser presionados. imagen: Los botones de imagen funcionan exactamente como los botones de envío con la única diferencia de que lo los botones de imagen son mostrados visualmente con la imagen apuntada en el atributo"src". button: Los botones con contenido pueden ser usados como botones de envío o de reestablecimiento, o pueden no tener ninguna acción preestablecida (dependiendo del valor del atributo"type ). Entrada de archivos: La entrada de archivos puede ser utilizada para subir archivos al servidor. El control muestra una caja de texto donde el usuario debe especificar la ubicación del archivo. <p><input name= archivo" type="file" /></p> 17

Documentos relacionados

T11. MARCOS O FRAMES 2013 CONCEPTOS BÁSICOS SOBRE HTML

T11. MARCOS O FRAMES 2013 CONCEPTOS BÁSICOS SOBRE HTML 11. MARCOS O FRAMES: 2 Define la estructura de la página Se usa en lugar de la etiqueta La declaración de los marcos de la página