Está en la página 1de 26

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
<html>
<head>
<title>Facultad de Informtica Universidad Nacional de La
Plata</title>
</head>
<body>
Contenido de la pgina de inicio.
</body>
</html>

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
<!DOCTYPE html>
<html>
<head>
<title>Ac va el ttulo
de la pgina</title>
</head>
<body>
<p>Hola mundo!</p>
</body>
</html>

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

El documento comienza
con el elemento raz
<html></html>
Le sigue el elemento
<head></head> donde se
especifica informacin y
metadatos para el
documento html
El elemento <body></body>
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:
<p></p>

Hay algunas excepciones a esta regla. Ejemplo:


<br>, <img>

Los tags pueden tener atributos. Ejemplo:


<a href="http://www.info.unlp.edu.ar">Sitio de la Facultad</a>

Puede haber comentarios en el cdigo HTML, el cul no ser


procesado por el navegador. Ejemplo:
<!-- Esto es un comentario -->

HTML
Prrafos:
<p>Esto es un prrafo</p>

Salto de lnea:
<br>

Ttulos
<h1></h1>, <h2></h2>, <h3></h3>,<h4></h4>, <h5></h5>, <h6></h6>
Los buscadores utilizan los ttulos para indexar la estructura y el contenido
de la pgina

Linea horizontal separatoria


<hr>

Imgenes
<img src="foto-perfil.jpg" alt="Foto de perfil del usuario">

HTML
Lista sin orden
<ul>
<li>Caf</li>
<li>Gaseosa</li>
<li>Licuado</li>
</ul>

Lista con orden


<ol type="1">
<li>Caf</li>
<li>Gaseosa</li>
<li>Licuado</li>
</ol>

Lista de descripciones
<dl>
<dt>Caf</dt>
<dd>Bebida
caliente</dd>
<dt>Gaseosa</dt>
<dd>Bebida fra</dd>
</dl>

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

HTML
Links
<a href=http://www.info.unlp.edu.ar" title=Sitio Facultad de
Informtica">
Acceder al sitio de la Facultad de Informtica
</a>

Links Internos
<p id=inicio" >Parrafo inicial</p>
<a href=#inicio" title=Volver al inicio">Ir al comienzo</a>

Algunas maneras de enfatizar texto


<em>Texto enfatizado</em>
<strong>Texto enfatizado</strong>
<b>Atencin!</b>
<i>Italics...</i>
<u>Texto subrayado</u>

HTML
Tablas
<table>
<thead>
<tr>
<th>Nombre</th><th>Apellido</th>

</tr>
</thead>
<tbody>
<tr>

<td>Diego</td><td>Maradona</td>
</tr>
<tr>
<td>Lionel</td><td>Messi</td>
</tr>

</tbody>
</table>

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
<form
name=form-contacto
action=procesamiento.php
method=POST
>
Nombre: <input type=text name=nombre>
<input type=submit value=Enviar>
</form>

HTML - Inputs
Un formulario puede contener inputs de distinto tipo:
Texto:
<input type=text name=nombre>
Password:
<input type=password name=clave>
Archivo:
<input type=file name=foto>
Checkbox:
<input type=checkbox name=opciones value=1>
Opcin 1
<br>
<input type=checkbox name=opciones value=2>
Opcin 2

HTML - Inputs
Un formulario puede contener inputs de distinto tipo:
Texto:
<input type=text name=nombre>
Password:
<input type=password name=clave>
Archivo:
<input type=file name=foto>
Checkbox:
<input type=checkbox name=opciones
value=1>
Opcin 1
<br>
<input type=checkbox name=opciones

HTML - Inputs
Un formulario puede contener inputs de distinto tipo:
Radio:
Sexo:
<input type=radio name=sexo value=hombre>
Hombre
<br>
<input type=radio name=sexo value=mujer>
Mujer
Hidden
<input type=hidden name=valor value=oculto>
Buttn:
<input type=button onclick= >

HTML - Inputs
Un formulario puede contener inputs de distinto tipo:
Select
Materia:
<select name=materia>
<option value=phonegap>
Seminario de Lenguajes - PhoneGap
</option>
<option value=php>
Seminario de Lenguajes - PHP
</option>
<option value=dotnet>
Seminario de Lenguajes - .NET
</option>
</select>

Textarea:
Observaciones:
<textarea name=observaciones></textarea>

HTML - Inputs
Un formulario puede contener botones:
Buttn:
<input type=button onclick= >
Submit:
<input type=submit value=Enviar>
Reset:
<input type=reset value=Limpiar>

HTML - Inputs
Nuevos elementos surgen con
En la actualidad no todos los navegadores lo
soportan
color:
<input type=color >

telfono:
<input type=tel >

HTML - Inputs
Nuevos elementos surgen con
En la actualidad no todos los navegadores lo
soportan
Bsqueda:
<input type=search >

Url:
<input type=url >

HTML - Inputs
Nuevos elementos surgen con
En la actualidad no todos los navegadores lo
soportan
Email:
<input type=email >

Fecha:
<input type=date >

HTML - Inputs
Nuevos elementos surgen con
En la actualidad no todos los navegadores lo
soportan
Hora:
<input type=time >

Nmero:
<input type=number >

Rango:
<input type=range min=0
max=50>