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
Descargar