Introduccion a las páginas WEB HTML
Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una página WEB HTML simple.
Introducción las páginas WEB HTML ¿Como funciona la WEB? ¿Qué es HTML? Estructura de un documento HTML Elementos de HTML Formularios / Script
¿Cómo funciona la web? Protocolo HTTP: HyperText Transfer Protocol. URL: Uniform Resource Locator. DNS: Domain Name System. Servidor web: IIS, Apache, etc. Clientes web: IE, Mozilla, Netscape, Opera, etc. Documentos HTML: HyperText Mark-up Language. Páginas estáticas vs. Dinámicas.
Hypertext Transfer Protocol (HTTP) Uno de los protocolos más importantes de Internet. HTTP define como los navegadores y los servidores Web se comunican uno con otro. Esta basado en texto y es transmitido sobre conexiones TCP. 5
Funcionamiento de HTTP Cliente http://www.cursopav2.com/inicio.html Servidor Internet DNS IP=66.45.26.25 Puerto: 80 HTTP Request www.cursopav2.com IP = 66.45.26.25 inicio.html <html> <body> Bienvenidos a Programción de Aplicaciones Visuales II </body> </html> HTTP Response
¿Qué es HTML? Lenguaje de marcas. Código abierto. Editores: Notepad. Ejemplo de un documento HTML. <html> <head> <title>Primer ejemplo en HTML</title> </head> <body> <h1>Mi colección de discos</h1> <h2>Grupo 1</h2> <p>Descripción del grupo</p> <ol> <li>Disco 1</li> <li>Disco 2</li> </ol> ……………………… </body> 7
Estructura de un documento HTML Cabecera: <head> </head> Título de la página: <title> </title> Meta-tags: <meta http-equiv="Content-language" content="es"> Estilos: <link rel="stylesheet" href="estilo.css" media="screen" type="text/css"> Cuerpo: <body> </body> <body background="imagenes/logo_usabilidad.gif"> <body bgcolor="white"> <body leftmargin="5px" bottommargin="5px"> 8
Elementos de HTML Elementos y propiedades: Títulos: <h1> </h1>, <h2> </h2>,…, <h6> </h6> Párrafos: <p> </p> Listas (ol, ul): <ol> <li> </li> <li> </li> </ol> Vínculos: <a href="http://.........">Descripción</a> <a ref=“mailto:abc@xyz.com">Jose</a> Avance de línea: <br> Imágenes: <img scr="miimagen.gif" width=130 height=50> 9
Elementos de HTML Elementos y propiedades: Líneas: <hr> Texto en negritas <strong> </strong> Tablas: <table> </table> Filas de una tabla <tr> </tr> Celdas de una tabla: <td> </td> Encabezado de una tabla: <th> </th> Marcos: <frameset></frameset> <frame> </frame> 10
HTML Forms En el corazón de toda aplicación Web genuina están los HTML Forms. Un HTML Form es la porción de un documento HTML que aparece entre las etiquetas <form></form> Suma.html <html> <body> <form> <input type="text" name="op1" /> + <input type="text" name="op2" /> <input type="submit" value=" = " /> </form> </body> </html> 11
HTML Forms Un botón submit (<input type=“submit”>) juega un rol especial en un HTML Form: Cuando es pulsado, el navegador envía el HTML Form junto con cualquier entrada de datos del usuario al servidor Web. Cómo el HTML Form es enviado, dependerá del atributo Method del form: Si el atributo Method del form no está presente o tiene el valor GET, el navegador enviará al servidor un comando HTTP GET. Si el atributo Method del form tiene el valor POST, el navegador enviará al servidor un comando HTTP POST. 12
enviado al servidor, decimos que se produjo un POSTBACK HTML Forms Method = GET <form method=“get"> . . . </form> GET /suma.html?op1=2&op2=2 HTTP/1.1 . Connection: Keep-Alive [blank line] El navegador envía los datos ingresados como una cadena de consulta Method = POST <form method=“post"> . . . </form> POST /suma.html HTTP/1.1 . Content-Type: ... Content-Length: 11 [blank line] op1=2&op2=2 El navegador envía los datos ingresados en el cuerpo de la solicitud HTTP Cualquiera sea el método utilizado, es decir GET o POST, cuando un form es enviado al servidor, decimos que se produjo un POSTBACK 13
Procesamiento en el Servidor Construir la parte del cliente es “fácil”, sólo es HTML. La parte difícil es la construcción de la lógica del lado del servidor. “Algo en el servidor”, tiene que interpretar las entradas del usuario enviadas junto con el form y generar la correspondiente salida. Después del procesamiento Suma.html <html> <body> <form> <input type="text" name="op1" /> + <input type="text" name="op2" /> <input type="submit" value=" = " /> </form> </body> </html> Suma.html <html> <body> <form> <input type="text" name="op1“ value=“2”/> + <input type="text" name="op2“ value=“2”> <input type="submit" value=" = " /> 4 </form> </body> </html> Antes del procesamiento 14
Formularios Propiedades Name: Nombre con que lo referenciamos. Action: que quermos hacer con los datos. Method: método para mover los datos (get/post). Enctype: Tipo de contenido de los datos. <html> <head> <title>Primer ejemplo en HTML</title> </head> <body> <Form method="post" action="mailto:mio@mio.com" enctype="text/plain"> <Input> </Input> </Form> </body> 15
Formularios Elementos de formularios Input TextArea Select Text Password CheckBox Radio Submit Reset File Hidden Image Button TextArea Select 16
Formularios Input <Input Type=“text” value=“Valor” size=NN maxlength= NN> <Input Type=“password” value=“Valor” size=NN maxlength= NN> <Input Type=“radio” name=“TipoDocumento” value=“DNI” checked>DNI<br> <Input Type=“radio” name=“TipoDocumento“ value=“LE“>LE<br> <Input Type=“checkbox” name=“AirBa” value=“SI” checked>Airbag<br> <Input Type=“checkbox” name=“Direccion“ value=“NO“>Direccion asistida<br> <Input Type=“hidden” name=“Direccion“ value=“NO“>Direccion asistida<br> <Input Type=“file” name=“FileName”> <input type=“image” src=“Submit.gif” alt=“Submite“ width=“94” height=“26”> 17
Formularios Lista desplegable <Select> ... </Select> <html> <head> <title>Programación de Aplicaciones Visuales II</title> </head> <body> <Form method="post" action="mailto:mio@mio.com" enctype="text/plain"> <select name="Tipo Documento"> <option value="DNI">Doc. Nac. Identidad</option> <option value="LE" selected>Libreta de Enrolamiento</option> <option value="LC">Libreta Civica</option> <option value="PASAPORTE">Pasaporte</option> </select> </Form> </body> 18
Formularios Lista enrollable SELECT incluyendo el atributo “Size” <html> <head> <title>Programación de Aplicaciones Visuales II</title> </head> <body> <Form method="post" action="mailto:mio@mio.com" enctype="text/plain"> <select name="Tipo Documento" size="3"> <option value="DNI">Doc. Nac. Identidad</option> <option value="LE" selected>Libreta de Enrolamiento</option> <option value="LC">Libreta Civica</option> <option value="PASAPORTE">Pasaporte</option> </select> </Form> </body> 19
Formularios Area de Texto <html> <head> <title>Programación de Aplicaciones Visuales II</title> </head> <body> <form method="post" action="mio@mio.com.ar" enctype="text/plain"> <textarea name="Comentario" cols="60" rows="5" wrap="soft"> </textarea> </form> </body> </html> 20
Formularios Enviar y resetear un formulario <Input Type=“submit” Name = “Nombre1” value=“Presione aquí para enviar”> <Input Type=“reset”> Name=“Nombre2” value=“Presione aquí para resetear”> 21
Script <script type="text/javascript"> ... </Script> <Script language="JavaScript"> ... </Script> Eventos comunes OnClick Recibe un click OnChange Pierde el foco y el valor cambio OnBlur Pierde el foco OnFocus Toma el foco OnSelect Se selecciona el texto Mas información en: http://www.w3schools.com 22