HTML AVANZADO Guía 8
Anuncio
HTML AVANZADO Guía 8 BOTONES DE COMANDO FORMULARIOS FRAMES HTML Avanzado guía 8 1 Botones Operativos en nuestra web Hemos visto no solo en la web, sino también en los sistemas operativos o aplicaciones de los mismos botones que nos permiten la ejecución de distintos eventos. En HTML, podemos crearlos para nuestra página Web. Código HTML para la creación de un botón <html> <head> <title> boton </title> </head> <body> <form action="tabla1.htm" method="get"> <input type="submit" value="ir a tabla"> </form> </body> <html> Descripción del código <form action="tabla1.htm" method="get"> esta línea de código ejecutará mediante el tag form action el archivo tabla1.htm, la etiqueta method=”get” indica a la PC, que espere la “entrada” , en este caso un click sobre el botón. <input type="submit" value="ir a tabla">, est línea nos permite colocar el rótulo de texto que irá sobre dicho botón. Ejercicio: Editar el código que nos permita crear un documento HTML que posea tres botones (en forma horizontal) y cada uno de ellos “cargue” un documento HTML distinto. HTML Avanzado guía 8 2 FORMULARIOS Los formularios poseen gran importancia en los sitios Web´s. La utillización de los mismos sirven para obtener datos del navegante, dándole además a una página web interactividad con los usuarios. A continuación se edita el código HTML de un formulario. <html> <head> <title> FORMULARIOS </title> </head> <body> <form action=mailto:dpl@mafer2000.com.ar method="post" > <p>Su nombre <input type="text" name="nombre"> <p>Su dirección de e-mail <input type="text" name="email"> <p>El url de un sitio web que le gusta:<br> <input type="text" size="60" name="url" value="http://"> <p>comentario<br><textarea rows="5" cols="60” name="comentario"></textarea> <p> <input type="submit" value="Enviar"> <input type="reset" value="borrar"> </form> </body> </html> Descripción del código Al igual que el primer ejemplo (boton en HTML) todo formularios comienza con la etiqueta Form <form action=mailto:dpl@mafer2000.com.ar method="post" > Form action=mailto esta expresión nos permite enviar los campos que se completarán más adelante a la dirección de correo electrónico, en este caso dpl@mafer2000.com.ar, el parámetro method=”post” (método postal) hace referencia a lo explicado anteriormente. HTML Avanzado guía 8 3 <p>Su nombre <input type="text" name="nombre"> <p>Su dirección de e-mail <input type="text" name="email"> Estas dos líneas definen los campos cuyos rótulos serán Su nombre y Su dirección, luego input type define a los mismos como de texto, y name define las variables (nombre y email) donde se “caragarán” los datos tipeados en dichos campos. <p>comentario<br><textarea rows="5" cols="60” name="comentario"></textarea> El campo “comentario” es un campo memo (de gran extensión), el mismo es definido por el tag textarea y los parámetros rows y cols definirán el número de filas o renglones y la cantidad de caracteres de cada fila, en este caso tendría 5 filas de 60 caracteres de cada ( recordar que los espacios en blanco también se contabilizan). <p> <input type="submit" value="Enviar"> <input type="reset" value="borrar"> Esta línea de código (como lo vimos en el primer ejemplo) crea botones de ejecución. En este caso son dos, el botón Enviar (envía los datos de los campos a la dirección de correo electrónico antes definida) y el botón Borrar (elimina los datos editados en los campos del formulario. FRAMES (Marcos) Los frames o marcos nos permiten dividir un página web en distintas secciones, y cada una de ellas (de ser necesario) tendrá las barras de desplazamiento (horizontal y/o vertical), dándole a cada “parte” de la página independencia. Los frames son muy utilizados en los web profesionales. Veremos a continuación un ejemplo. <html> <head> <title>frame 1</title> </head> <frameset cols="1*,3*"> <frame src="pagina8.html"> HTML Avanzado guía 8 4 <frameset rows="1*,3*"> <frame src="pagina6.html"> <frame src="pagina7.html"> <body> </body> </frameset> </html> Descripción del código Una de las particularidades de los marcos es que se definen entre la cabecera (Head) y el cuerpo (Body) de un documento HTML. Frameset es el tag que utilizamos para comenzar a definir marcos en nuestro documento HTML, el atributo cols cumple la función de definir los marcos verticales y rows los marcos horizontales. Por ej: en <frameset cols="1*,3*"> la primera columna toma el valor relativo de una parte de la ventana del explorador. La segunda columna toma el valor relativo de tres partes de la ventana del explorador, o sea el primer marco ocupará el 25% y el segundo el 75%. <frame src="pagina8.html"> este tag nos permite la carga del documento HTML que irá en un marco determinado. <frameset rows="1*,3*"> este tag dividirá la ventana del explorador en forma horizontal en dos partes, en la cuál la primera ocupará el 25%, y la segunda el 75%. HTML Avanzado guía 8 5 Trabajo Práctico HTML II Avanzado 1.- Crear una documento en HTML, que posea una tabla centrada, y seis botones debajo de la misma alineados en dos filas de tres botones cada una de ellas. 2.- Crear un formulario que posea los siguientes campos: Nombre y Apellido, País, Ciudad, Te, email, profesión y edad. Dicho formulario debe ser enviado a la dirección de correo electrónico info@hotmail.com 3.- Crear un formulario con una imagen de fondo. Los campos del mismo (no menos de 10 ) deben estar relacionados con el fondo elegido. Enviar los datos de dicho formulario a info@hotmail.com 4.- Crear un formulario de no menos de 7 campos relacionando con una tabla de 5 x 5, en donde el contenido de la tabla posea una relación con los campos de dicho formulario. Los datos deben ser enviados a info@yahoo.com.ar 5.- Crear un documento HTML que posea un marco vertical que divida la ventana del explorador en 2 ventanas, la primera del 20% y la segunda del 80%. En la ventana mayor debe crearse una tabla de 4 x 4. 6.- Crear un documento HTML que posea un marco horizontal de 30% y 70% respectivamente, ambos deben poseer una imagen de fondo (común). 7.- Editar un documento HTML, que posea marcos verticales y horizontales, con una imagen de fondo, una tabla y botones. HTML Avanzado guía 8 6
