Introduccion a las páginas WEB HTML

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> <html> 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

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> • <html> 15

Formularios • Elementos de formularios • Input • Text • Password • CheckBox • Radio • Submit • Reset • File • Hidden • Image • Button • TextArea • Select • Button 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> • <html> 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> • <html> 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

Introduccion a las páginas WEB HTML