Download - Introducción a HTML
-
Taller de Nuevas Tecnologas Introduccin a HTML
Lic. Dela Lisandro [email protected]
-
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: