Taller de Nuevas Tecnologas Introduccin a HTML

Lic. Dela Lisandro ldelia@lidi.info.unlp.edu.ar

Cmo funciona la web?

Protocolo HTTP

Protocolo de transferencia de hipertexto

Cliente / Servidor

Define la sintaxis y la semntica de la comunicacin entre clientes

y servidores

Sigue el esquema de peticin y respuesta entre un cliente y un

servidor

Es un protocolo sin estado. No se guarda ninguna informacin

sobre conexiones anteriores

Ms adelante veremos tcnicas para poder guardar informacin

entre peticiones

Cmo funciona la web?

Cmo funciona la web?

URL

Localizador uniforme de recursos

Especifica una ubicacin nica a cada recurso en internet

Ejemplo:

http://www.info.unlp.edu.ar/index.php/alumnos-introduccion

Host (Nombre de Dominio)

Protocolo

Nombres de Dominio

Mediante los DNS (sistema de nombres de dominio) se traducen

las direcciones IP de cada nodo activo en la red a nombres de

dominios, que son trminos fciles de recordar.

Cmo funciona la web?

Ejemplo Peticin HTTP del cliente (browser) al servidor

GET /index.html HTTP/1.1

Host: www.info.unlp.edu.ar

Accept: text/html, application/xhtml+xml, */*

User-Agent: Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko

[Linea en blanco]

Cmo funciona la web?

Ejemplo Respuesta HTTP del servidor al cliente (browser)

HTTP/1.1 200 OK

Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)

Content-Type: text/html; charset=UTF-8

Content-Length: 131

Facultad de Informtica Universidad Nacional de La Plata

Contenido de la pgina de inicio.

Cmo funciona la web?

Mtodos de peticiones HTTP ms comunes

GET

Utilizado para pedir informacin al servidor

POST

Utilizado para enviar informacin al servidor para que este cree

recursos

PUT

Utilizado para enviar informacin al servidor para que este cree o

modifique recursos

DELETE

Utilizado para enviar informacin al servidor para que este elimine

recursos

Cmo funciona la web?

El Dato

HTTP, URL y HTML tienen algo en comn

Conceptos creados por Tim Berners-Lee

Fundador y lder de World Wide Web Consortium (W3C)

En la W3C se desarrollan los estandars para la World Wide Web

CGI, CSS, DOM, HTML, SOAP, XML y muchos ms

Implicancia en el avance de los browsers

HTML

HiperText Markup Language

Es un standard para la creacin de pginas web

Describe la estructura de una pgina semnticamente mediante tags y sus atributos

En el ao 1999 se public la versin HTML4 popular hasta hace muy poco tiempo

En octubre del 2014 se presenta la versin HTML5 definitiva

HTML

Ac va el ttulo

de la pgina

Hola mundo!

Mediante la etiqueta DOCTYPE se le indica al navegador cules son las reglas para interpretar el documento.

El documento comienza con el elemento raz

Le sigue el elemento donde se especifica informacin y metadatos para el documento html

El elemento es el contenedor para el contenido "legible"

HTML

La mayora de los elementos se definen con un tag de apertura y uno de cierre. Ejemplo:

Hay algunas excepciones a esta regla. Ejemplo: ,

Los tags pueden tener atributos. Ejemplo: Sitio de la Facultad

Puede haber comentarios en el cdigo HTML, el cul no ser procesado por el navegador. Ejemplo:

HTML

Prrafos: Esto es un prrafo

Salto de lnea:

Ttulos , , ,, ,

Los buscadores utilizan los ttulos para indexar la estructura y el contenido de la pgina

Linea horizontal separatoria

Imgenes

HTML

Lista sin orden

Caf

Gaseosa

Licuado

Lista con orden

Caf

Gaseosa

Licuado

Probar type con "1" o "a" o "A" o "i" o "I"

Lista de descripciones Caf Bebida caliente Gaseosa Bebida fra

HTML

Links

Acceder al sitio de la Facultad de Informtica

Links Internos

HTML

Tablas

NombreApellido

DiegoMaradona

LionelMessi

HTML

Div Es un elemento que puede ser utilizado como

contenedor para agrupar otros elementos HTML.

Es un elemento a nivel bloque, por lo tanto, el navegador por defecto mostrar un salto de linea antes y despues de l

Span Es un elemento que puede ser utilizado como

contenedor para agrupar elementos de texto.

Es un elemento a nivel linea, por lo tanto, el navegador por defecto NO mostrar un salto de linea antes y despues de l

HTML - Forms

Forms Mecanismo de envo de datos del cliente

(navegador) al servidor

Ejemplo

Nombre:

HTML - Inputs Un formulario puede contener inputs de distinto tipo:

Texto:

Password:

Archivo:

Checkbox: Opcin 1

Opcin 2

HTML - Inputs Un formulario puede contener inputs de distinto tipo:

Texto:

Password:

Archivo:

Checkbox: Opcin 1

Opcin 2

HTML - Inputs Un formulario puede contener inputs de distinto tipo:

Radio: Sexo:

Hombre

Mujer

Hidden

Buttn:

HTML - Inputs Un formulario puede contener inputs de distinto tipo:

Select Materia:

Seminario de Lenguajes - PhoneGap

Seminario de Lenguajes - PHP

Seminario de Lenguajes - .NET

Textarea: Observaciones:

HTML - Inputs Un formulario puede contener botones:

Buttn:

Submit:

Reset:

HTML - Inputs Nuevos elementos surgen con En la actualidad no todos los navegadores lo

soportan

color:

telfono:

HTML - Inputs Nuevos elementos surgen con En la actualidad no todos los navegadores lo

soportan

Bsqueda:

Url:

HTML - Inputs Nuevos elementos surgen con En la actualidad no todos los navegadores lo

soportan

Email:

Fecha:

HTML - Inputs Nuevos elementos surgen con En la actualidad no todos los navegadores lo

soportan

Hora:

Nmero:

Rango: