Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías...

Introduccion a las Introduccion a las páginas WEB HTMLpáginas WEB HTML

ObjetivoObjetivo

Identificar los principales elementos y Identificar los principales elementos y tecnologías que intervienen en el tecnologías que intervienen en el desarrollo y despliegue de una página desarrollo y despliegue de una página WEB HTML simple.WEB HTML simple.

Introducción las páginas Introducción las páginas WEB HTMLWEB HTML

¿Como funciona la WEB?¿Como funciona la WEB? ¿Qué es HTML?¿Qué es HTML? Estructura de un documento HTMLEstructura de un documento HTML Elementos de HTMLElementos de HTML Formularios / ScriptFormularios / Script

¿Cómo funciona la web?¿Cómo funciona la web?

Protocolo HTTP: HyperText Transfer Protocolo HTTP: HyperText Transfer Protocol.Protocol.URL: Uniform Resource Locator.URL: Uniform Resource Locator.DNS: Domain Name System.DNS: Domain Name System.Servidor web: IIS, Apache, etc.Servidor web: IIS, Apache, etc.Clientes web: IE, Mozilla, Netscape, Opera, Clientes web: IE, Mozilla, Netscape, Opera, etc.etc.Documentos HTML: HyperText Mark-up Documentos HTML: HyperText Mark-up Language.Language.Páginas estáticas vs. Dinámicas.Páginas estáticas vs. Dinámicas.

Hypertext Transfer Protocol Hypertext Transfer Protocol (HTTP)(HTTP)

Uno de los protocolos más importantes de Uno de los protocolos más importantes de Internet.Internet.HTTP define como los navegadores y los HTTP define como los navegadores y los servidores Web se comunican uno con servidores Web se comunican uno con otro.otro.Esta basado en texto y es transmitido Esta basado en texto y es transmitido sobre conexiones TCP.sobre conexiones TCP.

5

Funcionamiento de HTTPFuncionamiento de HTTP

www.cursopav2.com

IP = 66.45.26.25

http://www.cursopav2.com/inicio.html

IP=66.45.26.25 Puerto: 80

Internet DNS

Servidor

Cliente

HTTP Request

HTTP Response

inicio.html<html><body>Bienvenidos a Programción de AplicacionesVisuales II</body></html>

¿Qué es HTML?¿Qué es HTML?

Lenguaje de marcas. Código abierto.Lenguaje de marcas. Código abierto.Editores: Notepad.Editores: Notepad.Ejemplo de un documento HTML.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 Estructura de un documento HTMLHTML

Cabecera: <head> </head>Cabecera: <head> </head> Título de la página: <title> </title>Título de la página: <title> </title> Meta-tags: <meta http-equiv="Content-Meta-tags: <meta http-equiv="Content-

language" content="es">language" content="es"> Estilos: <link rel="stylesheet" Estilos: <link rel="stylesheet"

href="estilo.css" media="screen" href="estilo.css" media="screen" type="text/css">type="text/css">

Cuerpo: <body> </body>Cuerpo: <body> </body> <body <body

background="imagenes/logo_usabilidad.gifbackground="imagenes/logo_usabilidad.gif">">

<body bgcolor="white"><body bgcolor="white"> <body leftmargin="5px" <body leftmargin="5px"

bottommargin="5px">bottommargin="5px">

8

Elementos de HTMLElementos de HTML

Elementos y propiedades:Elementos y propiedades: Títulos: <h1> </h1>, <h2> </h2>,…, Títulos: <h1> </h1>, <h2> </h2>,…,

<h6> </h6><h6> </h6> Párrafos: <p> </p>Párrafos: <p> </p> Listas (ol, ul): <ol> <li> </li> <li> Listas (ol, ul): <ol> <li> </li> <li>

</li> </ol></li> </ol> Vínculos: <a Vínculos: <a

href="http://.........">Descripción</a>href="http://.........">Descripción</a> <a <a

ref=“mailto:[email protected]">Joseref=“mailto:[email protected]">Jose</a></a>

Avance de línea: <br>Avance de línea: <br> Imágenes: <img scr="miimagen.gif" Imágenes: <img scr="miimagen.gif"

width=130 height=50>width=130 height=50>

9

Elementos de HTMLElementos de HTML

Elementos y propiedades:Elementos y propiedades: Líneas: <hr>Líneas: <hr> Texto en negritas <strong> </strong>Texto en negritas <strong> </strong> Tablas: <table> </table>Tablas: <table> </table> Filas de una tabla <tr> </tr>Filas de una tabla <tr> </tr> Celdas de una tabla: <td> </td>Celdas de una tabla: <td> </td> Encabezado de una tabla: <th> </th>Encabezado de una tabla: <th> </th> Marcos: <frameset></frameset> Marcos: <frameset></frameset>

<frame> </frame><frame> </frame>

10

HTML FormsHTML FormsEn el corazón de toda aplicación Web En el corazón de toda aplicación Web genuina están los HTML Forms.genuina están los HTML Forms.Un HTML Form es la porción de un Un HTML Form es la porción de un documento HTML que aparece entre las documento HTML que aparece entre las etiquetas <form></form>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 FormsHTML Forms

Un botón Un botón submitsubmit (<input type=“submit”>) (<input type=“submit”>)

juega un rol especial en un HTML Form:juega un rol especial en un HTML Form: Cuando es pulsado, el navegador envía el HTML Cuando es pulsado, el navegador envía el HTML

Form junto con cualquier entrada de datos del Form junto con cualquier entrada de datos del

usuario al servidor Web.usuario al servidor Web.

Cómo el HTML Form es enviado, dependerá Cómo el HTML Form es enviado, dependerá

del atributo Method del form:del atributo Method del form: Si el atributo Si el atributo MethodMethod del form del form no está presenteno está presente o tiene o tiene

el valor el valor GETGET, el navegador enviará al servidor un comando , el navegador enviará al servidor un comando

HTTP GET.HTTP GET.

Si el atributo Si el atributo MethodMethod del form tiene el valor del form tiene el valor POSTPOST, el , el

navegador enviará al servidor un comando navegador enviará al servidor un comando HTTP POST.HTTP POST.

12

HTML FormsHTML 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 cuerpode 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 Procesamiento en el ServidorServidorConstruir la parte del cliente es “fácil”, sólo Construir la parte del cliente es “fácil”, sólo

es es HTML.HTML.

La parte difícil es la construcción de la lógica La parte difícil es la construcción de la lógica

del lado del servidor. “Algo en el servidor”, del lado del servidor. “Algo en el servidor”,

tiene que interpretar las entradas del usuario tiene que interpretar las entradas del usuario

enviadas junto con el enviadas junto con el formform y generar la y generar la

correspondiente salida. correspondiente salida. 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 Antes del

procesamientoprocesamientoAntes del Antes del

procesamientoprocesamiento

Después del Después del

procesamientoprocesamientoDespués del Después del

procesamientoprocesamiento

14

FormulariosFormularios

PropiedadesPropiedades Name: Nombre con que lo referenciamos.Name: Nombre con que lo referenciamos. Action: que quermos hacer con los datos.Action: que quermos hacer con los datos. Method: método para mover los datos Method: método para mover los datos

(get/post).(get/post). Enctype: Tipo de contenido de los datos.Enctype: Tipo de contenido de los datos.<html> <head> <title>Primer ejemplo en HTML</title> </head> <body> <Form method="post" action="mailto:[email protected]" enctype="text/plain">

<Input> </Input> </Form>

</body><html>

15


Elementos de formulariosElementos de formularios InputInput

TextText PasswordPassword CheckBoxCheckBox RadioRadio SubmitSubmit ResetReset FileFile HiddenHidden ImageImage ButtonButton

TextAreaTextArea SelectSelect ButtonButton

16

FormulariosFormulariosInputInput <Input Type=“text” value=“Valor” size=NN maxlength= NN><Input Type=“text” value=“Valor” size=NN maxlength= NN>

<Input Type=“password” value=“Valor” size=NN maxlength= <Input Type=“password” value=“Valor” size=NN maxlength= NN>NN>

<Input Type=“radio” name=“TipoDocumento” value=“DNI” <Input Type=“radio” name=“TipoDocumento” value=“DNI” checkedchecked>DNI<br>>DNI<br>

<Input Type=“radio” name=“TipoDocumento“ <Input Type=“radio” name=“TipoDocumento“ value=“LE“>LE<br>value=“LE“>LE<br>

<Input Type=“checkbox” name=“AirBa” value=“SI” <Input Type=“checkbox” name=“AirBa” value=“SI” checkedchecked>Airbag<br>>Airbag<br>

<Input Type=“checkbox” name=“Direccion“ <Input Type=“checkbox” name=“Direccion“ value=“NO“>Direccion asistida<br>value=“NO“>Direccion asistida<br>

<Input Type=“hidden” name=“Direccion“ value=“NO“>Direccion <Input Type=“hidden” name=“Direccion“ value=“NO“>Direccion asistida<br>asistida<br>

<Input Type=<Input Type=““filefile”” name= name=““FileNameFileName””>>

<input type=“image” src=“Submit.gif” alt=“Submite“ <input type=“image” src=“Submit.gif” alt=“Submite“ width=“94” height=“26”>width=“94” height=“26”>

17


Lista desplegableLista desplegable<Select> ... </Select><Select> ... </Select>

<html> <head> <title>Programación de Aplicaciones Visuales II</title> </head> <body> <Form method="post" action="mailto:[email protected]" 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


Lista enrollableLista enrollableSELECT incluyendo el atributo SELECT incluyendo el atributo “Size”“Size”

<html> <head> <title>Programación de Aplicaciones Visuales II</title> </head> <body> <Form method="post" action="mailto:[email protected]" 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


Area de TextoArea de Texto

<html> <head> <title>Programación de Aplicaciones Visuales II</title> </head> <body> <form method="post" action="[email protected]" enctype="text/plain">

<textarea name="Comentario" cols="60" rows="5" wrap="soft"></textarea>

</form> </body></html>

20


Enviar y resetear un formularioEnviar y resetear un formulario <Input Type=“submit” Name = “Nombre1” <Input Type=“submit” Name = “Nombre1”

value=“Presione aquí para enviar”>value=“Presione aquí para enviar”> <Input Type=“reset”> Name=“Nombre2” <Input Type=“reset”> Name=“Nombre2”

value=“Presione aquí para resetear”>value=“Presione aquí para resetear”>

21

ScriptScript

<script type="text/javascript"> ... <script type="text/javascript"> ... </Script></Script><Script language="JavaScript"> ... <Script language="JavaScript"> ... </Script></Script>Eventos comunesEventos comunes OnClickOnClick Recibe un clickRecibe un click OnChangeOnChange Pierde el foco y el valor Pierde el foco y el valor

cambiocambio OnBlurOnBlur Pierde el focoPierde el foco OnFocusOnFocus Toma el focoToma el foco OnSelectOnSelect Se selecciona el textoSe selecciona el textoMas información en: Mas información en: http://www.w3schools.comhttp://www.w3schools.com

22

Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías...

Documents

Transcript of Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías...