introduccion a las páginas web html. objetivo identificar los principales elementos y tecnologías...
TRANSCRIPT
![Page 1: Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una](https://reader033.vdocuments.pub/reader033/viewer/2022061300/54cff4f149795911798b4cd0/html5/thumbnails/1.jpg)
Introduccion a las Introduccion a las páginas WEB HTMLpáginas WEB HTML
![Page 2: Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una](https://reader033.vdocuments.pub/reader033/viewer/2022061300/54cff4f149795911798b4cd0/html5/thumbnails/2.jpg)
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.
![Page 3: Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una](https://reader033.vdocuments.pub/reader033/viewer/2022061300/54cff4f149795911798b4cd0/html5/thumbnails/3.jpg)
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
![Page 4: Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una](https://reader033.vdocuments.pub/reader033/viewer/2022061300/54cff4f149795911798b4cd0/html5/thumbnails/4.jpg)
¿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.
![Page 5: Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una](https://reader033.vdocuments.pub/reader033/viewer/2022061300/54cff4f149795911798b4cd0/html5/thumbnails/5.jpg)
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
![Page 6: Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una](https://reader033.vdocuments.pub/reader033/viewer/2022061300/54cff4f149795911798b4cd0/html5/thumbnails/6.jpg)
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>
![Page 7: Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una](https://reader033.vdocuments.pub/reader033/viewer/2022061300/54cff4f149795911798b4cd0/html5/thumbnails/7.jpg)
¿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
![Page 8: Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una](https://reader033.vdocuments.pub/reader033/viewer/2022061300/54cff4f149795911798b4cd0/html5/thumbnails/8.jpg)
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
![Page 9: Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una](https://reader033.vdocuments.pub/reader033/viewer/2022061300/54cff4f149795911798b4cd0/html5/thumbnails/9.jpg)
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
![Page 10: Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una](https://reader033.vdocuments.pub/reader033/viewer/2022061300/54cff4f149795911798b4cd0/html5/thumbnails/10.jpg)
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
![Page 11: Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una](https://reader033.vdocuments.pub/reader033/viewer/2022061300/54cff4f149795911798b4cd0/html5/thumbnails/11.jpg)
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
![Page 12: Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una](https://reader033.vdocuments.pub/reader033/viewer/2022061300/54cff4f149795911798b4cd0/html5/thumbnails/12.jpg)
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
![Page 13: Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una](https://reader033.vdocuments.pub/reader033/viewer/2022061300/54cff4f149795911798b4cd0/html5/thumbnails/13.jpg)
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
![Page 14: Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una](https://reader033.vdocuments.pub/reader033/viewer/2022061300/54cff4f149795911798b4cd0/html5/thumbnails/14.jpg)
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
![Page 15: Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una](https://reader033.vdocuments.pub/reader033/viewer/2022061300/54cff4f149795911798b4cd0/html5/thumbnails/15.jpg)
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
![Page 16: Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una](https://reader033.vdocuments.pub/reader033/viewer/2022061300/54cff4f149795911798b4cd0/html5/thumbnails/16.jpg)
FormulariosFormularios
Elementos de formulariosElementos de formularios InputInput
TextText PasswordPassword CheckBoxCheckBox RadioRadio SubmitSubmit ResetReset FileFile HiddenHidden ImageImage ButtonButton
TextAreaTextArea SelectSelect ButtonButton
16
![Page 17: Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una](https://reader033.vdocuments.pub/reader033/viewer/2022061300/54cff4f149795911798b4cd0/html5/thumbnails/17.jpg)
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
![Page 18: Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una](https://reader033.vdocuments.pub/reader033/viewer/2022061300/54cff4f149795911798b4cd0/html5/thumbnails/18.jpg)
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
![Page 19: Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una](https://reader033.vdocuments.pub/reader033/viewer/2022061300/54cff4f149795911798b4cd0/html5/thumbnails/19.jpg)
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
![Page 20: Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una](https://reader033.vdocuments.pub/reader033/viewer/2022061300/54cff4f149795911798b4cd0/html5/thumbnails/20.jpg)
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
![Page 21: Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una](https://reader033.vdocuments.pub/reader033/viewer/2022061300/54cff4f149795911798b4cd0/html5/thumbnails/21.jpg)
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
![Page 22: Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una](https://reader033.vdocuments.pub/reader033/viewer/2022061300/54cff4f149795911798b4cd0/html5/thumbnails/22.jpg)
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