La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una.

Presentaciones similares


Presentación del tema: "Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una."— Transcripción de la presentación:

1 Introduccion a las páginas WEB HTML

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

3 Introducción las páginas WEB HTML ¿Como funciona la WEB? ¿Como funciona la WEB? ¿Qué es HTML? ¿Qué es HTML? Estructura de un documento HTML Estructura de un documento HTML Elementos de HTML Elementos de HTML Formularios / Script Formularios / Script

4 ¿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.

5 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

6 Funcionamiento de HTTP IP = inicio.html IP= Puerto: 80 Internet DNS Servidor Cliente HTTP Request HTTP Response inicio.html Bienvenidos a Programción de Aplicaciones Visuales II

7 ¿Qué es HTML? Lenguaje de marcas. Código abierto. Editores: Notepad. Ejemplo de un documento HTML. Primer ejemplo en HTML Mi colección de discos Grupo 1 Descripción del grupo Disco 1 Disco 2 ……………………… 7

8 Estructura de un documento HTML Cabecera: Cabecera: Título de la página: Título de la página: Meta-tags: Meta-tags: Estilos: Estilos: Cuerpo: Cuerpo: 8

9 Elementos de HTML Elementos y propiedades: Títulos:,,…, Títulos:,,…, Párrafos: Párrafos: Listas (ol, ul): Listas (ol, ul): Vínculos: Descripción Vínculos: Descripción Jose Jose Avance de línea: Avance de línea: Imágenes: Imágenes: 9

10 Elementos de HTML Elementos y propiedades: Líneas: Líneas: Texto en negritas Texto en negritas Tablas: Tablas: Filas de una tabla Filas de una tabla Celdas de una tabla: Celdas de una tabla: Encabezado de una tabla: Encabezado de una tabla: Marcos: Marcos: 10

11 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 Un HTML Form es la porción de un documento HTML que aparece entre las etiquetas Suma.html + 11

12 HTML Forms Un botón 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. 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 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. Si el atributo Method del form tiene el valor POST, el navegador enviará al servidor un comando HTTP POST. 12

13 HTML Forms Method = GET... 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... 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

14 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. Suma.html + Suma.html

15 Formularios Propiedades 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 (get/post). Method: método para mover los datos (get/post). Enctype: Tipo de contenido de los datos. Enctype: Tipo de contenido de los datos. Primer ejemplo en HTML 15

16 Formularios Elementos de formularios Input Input Text Text Password Password CheckBox CheckBox Radio Radio Submit Submit Reset Reset File File Hidden Hidden Image Image Button Button TextArea TextArea Select Select Button Button 16

17 Formularios Input DNI DNI LE LE Airbag Airbag Direccion asistida Direccion asistida 17

18 Formularios Lista desplegable Programación de Aplicaciones Visuales II Doc. Nac. Identidad Libreta de Enrolamiento Libreta Civica Pasaporte 18

19 Formularios Lista enrollable SELECT incluyendo el atributo Size Programación de Aplicaciones Visuales II Doc. Nac. Identidad Libreta de Enrolamiento Libreta Civica Pasaporte 19

20 Formularios Area de Texto Programación de Aplicaciones Visuales II 20

21 Formularios Enviar y resetear un formulario Name=Nombre2 value=Presione aquí para resetear> Name=Nombre2 value=Presione aquí para resetear> 21

22 Script Eventos comunes OnClickRecibe un click OnClickRecibe un click OnChangePierde el foco y el valor cambio OnChangePierde el foco y el valor cambio OnBlurPierde el foco OnBlurPierde el foco OnFocusToma el foco OnFocusToma el foco OnSelectSe selecciona el texto OnSelectSe selecciona el texto Mas información en: 22


Descargar ppt "Introduccion a las páginas WEB HTML. Objetivo Identificar los principales elementos y tecnologías que intervienen en el desarrollo y despliegue de una."

Presentaciones similares


Anuncios Google