Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías...
-
Upload
basilia-guadalupe -
Category
Documents
-
view
10 -
download
2
Transcript of 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
FormulariosFormularios
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
FormulariosFormularios
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
FormulariosFormularios
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
FormulariosFormularios
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
FormulariosFormularios
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