Tecnologias WEB

Tecnologas Web de Cliente
HTML
Profesores
Carlos A. Iglesias
Mercedes Garijo
Puedes contactarme en cif@gsi.dit.upm.es - Despacho C-211
1.
Principios
Para qu vale
Contenido de
la pgina web
Lenguaje de marcas para definir documentos
definiendo la semntica de los elementos
(prrafos, imgenes, tablas, titulares, listas, )
Historia HTML
Fuente: http://www.silverstripe.org/blog/html5-and-beyond/
Arquitectura Servidor Web
HTTP request
HTTP response
Navegador Web
Servidor Web
Prueba
Instala plugin de chrome Advanced REST
client
https://chrome.google.
com/webstore/detail/advanced-restclient/hgmloofddffdnphfgcellkdfbfbjeloo
Cosas que hay que saber de HTML
Siglas
HyperText Markup Language
Navegador web
El navegador web procesa el
cdigo HTML y visualiza la
pgina web
Extensin
Los ficheros html terminan en
.html (o htm)
Marcas
Anotacin semntica del
papel de un elemento de la
pgina. Ej.
<title> Ttulo </title>.
Editor
Es un fichero de texto plano.
Lo editamos con un editor de
texto (notepad, gedit, ) o un
IDE (Integrated Development
Environment)
Referencias
Un fichero HTML referencia
otros ficheros c(imgenes,
estilos CSS, HTML, JS, ) con
una URL que residen en el
mismo servidor o en un
servidor remoto
2.
Lenguaje HTML
bsico
Cmo escribir
pginas web
10
Anatoma pgina HTML
<!DOCTYPE html>
<html>
<head>
<title>Ttulo</title>
<meta charset="UTF-8">
</head>
<body>
<p>Hola!</p>
</body>
</html>
Ttulo
Hola!
11
Estructura pgina HTML

Anatoma HTML
<html>
<head>
<body>
12
Pgina HTML
Prembulo: <!DOCTYPE html>
Resto: elementos HTML
Delimitados por etiquetas <e></e>
13
Elementos HTML
Elemento HTML con contenido
<etiqueta>Contenido</etiqueta>
Ej. <h1>Ttulo</h1>
Elemento HTML vaco
<etiqueta>
Ej. <br> (anteriormente a HTML5 era <br/>)
Anidar elementos
<li><b>....</b></li>
<li><b>...</li></b>
Atributo HTML (comillas opcionales)
<etiq atributo1 = "v1" a2="v2"> contenido</etiq>

Si el atributo es binario, simplemente se pone el
nombre Ej. <etiq controls>contenido</etiq>
Las etiquetas van en minsculas
14
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo</title>
</head>
<body>

<h1>Titular 1</h1>
<h2>Titular 2</h2>
<p>Un prrafo</p>
</body>
</html>
Ejemplo
Titular 1
Titular 2
Un prrafo
15
Ejemplo rbol DOM HTML

document
Nodo element (root)
html
Nodo element
head
body
title
meta
Ejemplo
charset
UTF-8
comment
Prueba etiquetas
Nodo attribute
DOM: Document Object Model
h1
Titular 1
h2
Titular 2
Nodo comment
Un prrafo
Nodo text
16
Entidades de caracter
Problema quieres escribir <p>
Solucin: entidad de carcter
< <
> >
Ejemplo
<!DOCTYPE html>
<html lang="es">
<p>
<head>
</head>
<body>
<p><p></p>
</body>
</html>
17
Elemento root: <html>

Recomendacin: especificar el idioma de la
pgina en el atributo lang
Ej.
Ejemplo
<!DOCTYPE html>
<html lang="es">
Un prrafo
<head>
</head>
<body>
<p>Un prrafo</p>
</body>
</html>
18
Elemento <head>
Qu contiene?
Informacin meta
sobre el documento
Ttulo del
documento
Enlazar
documentos para
visualizar CSS y JS
Informacin meta
que indexan los
buscadores
Etiquetas de <head>
<title> obligatoria
<meta>
Valores para atributos

charset, viewport,
description, author, ...
Enlazar ficheros
<link> CSS, icono

<script> JS
Incluir estilo css

<style> CSS
empotrado
19
Ejemplo <head>
Recomendacin:
usar siempre title y meta charset

meta description y keywords mejoran SEO
meta viewport facilita que se vea bien en mviles
<!DOCTYPE html>
<html lang="es">
<head>
<meta name="description" content="Tutorial de head">
<meta name="viewport" content="width=device-width, initialscale=1">
</head>
<body>
<p>Un prrafo</p>
</body>
</html>
20
Viewport
<meta name="viewport" content="
width = [pixels | device-width ],
height = [pixels | device-height],
initial-scale = float,
minimum-scale = float,
maximum-scale = float,
user-scalable = [yes | no]
">
Fuente: https://developer.apple.
com/library/safari/documentation/AppleApplications/Reference/SafariWebCon
tent/UsingtheViewport/UsingtheViewport.html
21
Ej. Viewport
Fuente: https://developer.apple.
com/library/safari/documentation/AppleApplications/Reference/SafariWebCon
tent/UsingtheViewport/UsingtheViewport.html
22
Favicon
Icono en la pestaa del navegador
Puedes crear la imagen con servicios como
http://www.favicon.cc/
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo Favicon</title>
<link rel="icon" href="upm.ico">
</head>
<body>
<p>Mira el icono en la pestaa</p>
</body>
</html>
23
Elemento <body>
secciones
h1, h2, h3, , h6

article, section, nav,
aside, header,
footer, address
agrupar contenido
p, hr, ul, ol, li, figure,

figcaption, div, main
formato texto
enlaces
a href, link
tablas
table, tr, td, hr
formularios
form, input, label,

button, select,
optgroup, fieldset,
legend,
a, em, strong, span,

br, sub, sup, i, b, u
integrar contenido
img, iframe, video,
audio
24
Elementos de flujo
Prrafo <p></p>
Nueva lnea <br>
Lnea horizontal
<hr>
Titulares
Comentarios

<h1></h1>
<h2></h2>
<h6></h6>
25
Ejemplo
<!DOCTYPE html>
<html>
<head>...</head>
<body>

<h1>Titular 1</h1>
<h2>Titular 2</h2>
<p>Uno y <br> dos </p>
<hr>
<p>Otro prrafo</p>
</body>
</html>
Ejemplo
Titular 1
Titular 2
Uno y
dos
Otro prrafo
26
Elementos para listas

Listas numeradas (ordered list, list item): ol y li
Listas no numeradas (unordered lists): ul y li
...
...
Ejemplo
<body>
<ol>
<li>uno y</li>
<li>dos</li>
</ol>
<ul>
<li>tres</li>
<li>cuatro</li>
</ul>
</body>
1.
2.
uno y
dos
tres y
cuatro
27
Elementos para formato de texto
Etiqueta
Descripcin
Ejemplo
Resultado
<b>
Texto en negrita (bold)
<b>Texto</b>
Texto
<strong>
Texto importante
<strong>Texto</strong>
Texto
<i>
Texto en cursiva (italic)
<i>Texto</i>
Texto
<em>
Texto enfatizado (emphasized)
<em>Texto</em>
Texto
<small>
Letra pequea
<small>Texto</small>
Texto
<sub>
Subndice
H<sub>2</sub>O
H2O
<sup>
Superndice
mc<sup>2</sup>
mc2
<ins>
Insertado
<ins>Texto</ins>
Texto
<del>
Borrado (deleted)
<del>Texto</del>
Texto
<mark>
Marcado
<mark>Texto</mark>
Texto
28
Ejercicio
Escribe el cdigo HTML (entero)
29
Ejercicio
Escribe el cdigo HTML (entero)
30
Enlace a una pgina externa

<a href="URL">Enlace</a>
Ejemplo
Ejemplo
<a href="http://www.google.es">Ir a
Google </a>
Ir a Google
Ejemplo
31
Enlace a una pgina interna

Ancla <a id="ancla">Texto</a>
<a href="#ancla">Enlace misma pgina</a>
<a href="http://pagina.html#ancla">Enlace
otra pgina</a>
Ejemplo
...
<ul>
<li>Ir a <a href="#ref">Referencias</a></li>
</ul>
...
<h2><a id="ref">Referencias</a></h2>
...
32
Imgenes
<img src="url imagen" alt="texto alternativo">
Podemos usar atributos width / height
La URL puede ser absoluta o relativa al
fichero html (ej. src="pepe.jpg", src="../pepe.
jpg")
Ejemplo
<img src="http://www.w3.
org/Icons/w3c_home.gif" alt=""
W3c logo>
33
Vdeos
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Tu navegador no soporta vdeos HTML5
</video>
Fuente: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video
Video cortesa de Big Buck Bunny
34
Sonido
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Tu navegador no soporta el elemento HTML5 audio
</audio>
35
Mini-pginas - iframe
36
Tablas
Ejemplo
<table border="1">
<tr>
<th>Nombre</th><th>Nota</th>
</tr>
<tr>
<td>Pepe</td><td>5.0</td>
</tr>
<tr>
<td>Juan</td><td>7.0</td>
</tr>
</table>
37
3.
Flujo de
elementos
Cmo agrupar
bloques de
elementos en
HTML
38
Elementos de bloque y en lnea

Elementos de bloque: tienen salto de lnea y
la caja ocupa todo el espacio
div, p, ul, ol, li, br, h1-h6, body, table, blockquote,
section, aside, header, footer, article, nav
Elementos de lnea: no tienen salto de lnea

span, a, b, i, img, label
39
Elementos div y span para flujo

div: contenedor de otros elementos HTML
normalmente usado para cambiar el estilo

solemos usar dos atributos de div
id: identifica un div en una pgina (debe ser
nico por pgina)
class: identifica un tipo de div (puede haber
varios)
span: cambia el estilo de un contenido sin

crear una nueva lnea. Suele combinarse con
class.
40
Ejemplo div / span
Ejemplo
Rey Alarico I
395-410
Rey Ataulfo
410-415
41
Secciones desde HTML5
42
Secciones
header - cabecera
nav - navegacin
main - el contenido ppal de la pgina (slo 1
por pgina)
section - conj. de contenidos relacionados
temticamente
article - un contenido
aside - contenido colateral (anuncio, cita, )
footer - pi
43
Ejemplo - Secciones
44
Compatibilidad
En HTML5 podemos usar ambos estilos. La etiqueta div sigue siendo til como una etiqueta
genrica de flujo
45
Ejercicio
Programa una pgina HTML con tu CV que
contenga las secciones:
Datos personales
Incluye una foto tuya
Datos acadmicos
Experiencia profesional (en su caso)
Lista ordenada de forma cronolgica inversa
Conocimientos tcnicos
Incluye listas de lenguajes de programacin,

sistemas operativos y herramientas
Idiomas
Incluye una tabla con idiomas y nivel
Referencias
Al menos 3 enlaces de otros sitios web
46
4.
Formularios
Cmo crear
formularios
para recoger
datos del
usuario
47
Formulario
Navegador Web
CAMPO
CAMPO
CAMPO
SUBMIT
Servidor Web
HTTP request
HTTP response
Valida la peticin,
la procesa, y
genera la
respuesta
48
Validacin cliente y validacin servidor

Validacin cliente
La realiza el
navegador para
agilizar
Basado en las
etiquetas HTML o
mediante
JavaScript
Validacin servidor
El servidor
comprueba que el
formulario est
autorizado
SIEMPRE es
necesaria
Ej. realizar una
compra
49
Formulario HTML
50
Recuerda
Incluye form action,

name en inputs y
botn submit
51
<form>
action: pgina del servidor que procesa la
peticin
method: GET o POST
<form action="procesa.php" method="get">
...
</form>
52
GET
Servidor Web
53
POST
HTTP Request
Servidor Web
name=Pedro&course=2&
phone=222&email=pedro
%40p.com
54
GET vs POST
GET
Parmetros se ven
en el navegador
Permite favoritos
Tamao limitado
(2ks)
Slo ASCII
No podemos enviar
ficheros
POST
No vemos
parmetros
No permite
favoritos
Lmite mayor (8Ms)
Podemos enviar
binario y ficheros
55
URL encoding
Las URLs slo pueden tener caracteres ASCII
Se convierten los otros caracteres mediante un %
y dos dgitos hexadecimales
56
<label>
Etiqueta de un elemento input
Atributo opcional for que indica el id del input
<form>
<label>Nombre
<input>
</label>
...
</form>
<form>
<label for="name">Nombre
<input id="name">
</label>
...
</form>
57
Atributos bsicos de input
type: tipo de entrada (ver a continuacin)

name: nombre de la variable para el servidor
id: nombre del elemento input para CSS/JS
value: valor por defecto
<form>
<label for="phone">Telfono
<input type="tel" id="phone" name="phone" value="333">
</label>
...
</form>
58
Otros atributos de input
maxlength y minlength: validar una longitud

size: tamao de la caja
readonly
required
multiple: podemos seleccionar varios valores
pattern: expresin regular para validar
entrada
min y max: valor min y max de un valor
numrico o fecha
step: incremento en entrada numrica
list: lista de valores sugeridos para
autocompletar
placeholder: ayuda para rellenar la entrada
59
<input type="">
type="text" / type="search"
type="number"
type="tel"
type="url"
type="email"
type="password"
type="range" - nmero con slider
type="color" - enva el cdigo del color HTML
type="file" - necesita tecnologa de servidor
type="submit"
type="reset"
type="date" type="time" type="month"
60
Ejemplo input
61
Cdigo color HTML

El cdigo de color HTML (ej. #FFFFFF) es el cdigo
hexadecimal de las componentes RGB
62
Legend, radio button, desplegable
63
Ejemplo Formulario
Ejemplo fieldset, desplegable
y radio button
64
Checkbox
65
Entrada de Tiempo
66
Ej. input tiempo

Uso de <input type=> en formularios para introducir tiempo.
67
Textarea
68
Valores por defecto
Vlido en input de tipo text, tel, url, email, color,

number, los de fechas, etc.
Ver todo en http://nativeformelements.com/
69
5.
Conclusiones
Qu hemos
aprendido
70
HTML nos permite crear pginas web y definir la

organizacin de los elementos, pero necesitamos otras
tecnologas (CSS, JS) para que las pginas tengan un
aspecto e interaccin adecuadas.
71
Conclusiones
72
No es importante en
absoluto hacerlo bien la
primera vez, lo que es
vital es hacerlo bien la
ltima vez
Andrew Hunt y David Thomas
73
Gracias!
Alguna pregunta?
cif@gsi.dit.upm.es
74
Referencias
Especificacin W3C
http://www.w3.org/TR/html5/
Tutoriales HTML
http://www.w3schools.com/html
http://www.html-5-tutorial.com/
75
Crditos
Gracias a todos los que han publicado estos
recursos de forma gratuita:
Minicons de Webalys
Plantilla de la presentacin de SlidesCarnival
Fotos de Unsplash y Wix
76

Tecnologias WEB

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tecnologias WEB

Uploaded by

Copyright:

Available Formats

Tecnologas Web de Cliente

Puedes contactarme en cif@gsi.dit.upm.es - Despacho C-211

Arquitectura Servidor Web

Cosas que hay que saber de HTML

Anatoma pgina HTML

Estructura pgina HTML

Delimitados por etiquetas <e></e>

Elemento HTML vaco

Atributo HTML (comillas opcionales)

<etiq atributo1 = "v1" a2="v2"> contenido</etiq>

Las etiquetas van en minsculas

Ejemplo rbol DOM HTML

Nodo element (root)

DOM: Document Object Model

Elemento root: <html>

Valores para atributos

<link> CSS, icono

Incluir estilo css

usar siempre title y meta charset

h1, h2, h3, , h6

p, hr, ul, ol, li, figure,

table, tr, td, hr

form, input, label,

a, em, strong, span,

Elementos para listas

Elementos para formato de texto

Texto en negrita (bold)

Texto en cursiva (italic)

Texto enfatizado (emphasized)

Enlace a una pgina externa

Enlace a una pgina interna

Elementos de bloque y en lnea

Elementos de lnea: no tienen salto de lnea

Elementos div y span para flujo

normalmente usado para cambiar el estilo

span: cambia el estilo de un contenido sin

Ejemplo div / span

Secciones desde HTML5

Lista ordenada de forma cronolgica inversa

Incluye listas de lenguajes de programacin,

Incluye una tabla con idiomas y nivel

Al menos 3 enlaces de otros sitios web

Validacin cliente y validacin servidor

Incluye form action,

Atributos bsicos de input

type: tipo de entrada (ver a continuacin)

Otros atributos de input

maxlength y minlength: validar una longitud

Cdigo color HTML

Legend, radio button, desplegable

Ej. input tiempo

Valores por defecto

Vlido en input de tipo text, tel, url, email, color,

HTML nos permite crear pginas web y definir la

You might also like