Introducción HTML

76
Tecnologías Web de Cliente HTML

Transcript of Introducción HTML

Tecnologías Web de Cliente

HTML

ProfesoresCarlos A. IglesiasMercedes Garijo

Puedes contactarme en [email protected] - Despacho C-211

2

1.Principios Para qué vale

3

Contenido de la página web

Lenguaje de marcas para definir documentos definiendo la semántica de los elementos

(párrafos, imágenes, tablas, titulares, listas, …) 4

Historia HTML

Fuente: http://www.silverstripe.org/blog/html5-and-beyond/6

Arquitectura Servidor Web

Navegador WebServidor Web

HTTP request

HTTP response

7

Cosas que hay que saber de HTML

SiglasHyperText Markup Language

Navegador webEl navegador web procesa el código HTML y visualiza la página web

ExtensiónLos ficheros html terminan en .html (o htm)

MarcasAnotación semántica del papel de un elemento de la página. Ej. <title> Título </title>.

EditorEs un fichero de texto plano. Lo editamos con un editor de texto (notepad, gedit, …) o un IDE (Integrated Development Environment)

ReferenciasUn fichero HTML referencia otros ficheros c(imágenes, estilos CSS, HTML, JS, …) con una URL que residen en el mismo servidor o en un servidor remoto 9

2.Lenguaje HTML

básicoCómo escribir páginas web

10

Anatomía página HTML

<!DOCTYPE html><html>

<head><title>Título</title><meta charset="UTF-8">

</head><body>

<p>¡Hola!</p></body>

</html>

Título

¡Hola!

11

Estructura página HTML

Anatomía HTML<html><head><body>

12

Página HTML

▣ Preámbulo: <!DOCTYPE html>▣ Resto: elementos HTML

□ Delimitados por etiquetas <e></e>

13

Elementos HTML

▣ Elemento HTML con contenido□ <etiqueta>Contenido</etiqueta>□ Ej. <h1>Título</h1>

▣ Elemento HTML vacío□ <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 minúsculas

14

Ejemplo

<!DOCTYPE html><html>

<head><title>Ejemplo</title><meta charset="UTF-8">

</head><body>

<!-- Prueba etiquetas --><h1>Titular 1</h1><h2>Titular 2</h2><p>Un párrafo</p>

</body></html>

Ejemplo

Titular 1Titular 2Un párrafo

15

16

Ejemplo Árbol DOM HTML

html

head

title meta

body

h1 h2comment p

charsetEjemplo Prueba etiquetas Titular 1 Titular 2 Un párrafo

DOM: Document Object Model

Nodo element (root)

Nodo element

Nodo text

document

UTF-8Nodo attribute Nodo comment

Entidades de caracter

17

▣ Problema quieres escribir <p>▣ Solución: entidad de carácter

□ < → &lt;□ > → &gt;

<!DOCTYPE html>

<html lang="es"><head>

<title>Ejemplo</title><meta charset="UTF-8">

</head><body>

<p>&lt;p&gt;</p></body>

</html>

Ejemplo

<p>

Elemento root: <html>

18

▣ Recomendación: especificar el idioma de la página en el atributo lang

▣ Ej.

<!DOCTYPE html>

<html lang="es"><head>

<title>Ejemplo</title><meta charset="UTF-8">

</head><body>

<p>Un párrafo</p></body>

</html>

Ejemplo

Un párrafo

Elemento <head>

¿Qué contiene?▣ Información ‘meta’

sobre el documento▣ Título del

documento▣ Enlazar

documentos para visualizar CSS y JS

▣ Información 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>

▣ Recomendación: □ usar siempre title y meta charset□ meta description y keywords mejoran SEO□ meta viewport facilita que se vea bien en móviles

20

<!DOCTYPE html><html lang="es">

<head><title>Ejemplo</title><meta charset="UTF-8"><meta name=description content="Tutorial de head"><meta name=keywords content="width=device-width, initial-scale=1"

></head><body>

<p>Un párrafo</p></body>

</html>

Favicon

▣ Icono en la pestaña del navegador▣ Puedes crear la imagen con servicios como

http://www.favicon.cc/

23

<!DOCTYPE html><html lang="es">

<head><title>Ejemplo Favicon</title><meta charset="UTF-8"><link rel="icon" href="upm.ico">

</head><body>

<p>Mira el icono en la pestaña</p></body>

</html>

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

□ a, em, strong, span, br, sub, sup, i, b, u

▣ integrar contenido□ img, iframe, video,

audio

▣ enlaces□ a href, link

▣ tablas□ table, tr, td, hr

▣ formularios□ form, input, label,

button, select, optgroup, fieldset, legend,

24

Elementos de flujo

▣ Párrafo <p></p>▣ Nueva línea <br>▣ Línea horizontal

<hr>▣ Titulares

□ <h1></h1>□ <h2></h2>□ …□ <h6></h6>

▣ Comentarios □ <!-- … -->

25

Ejemplo

26

<!DOCTYPE html><html>

<head>...</head><body>

<!-- Prueba etiquetas --><h1>Titular 1</h1><h2>Titular 2</h2><p>Uno y <br> dos </p><hr><p>Otro párrafo</p>

</body></html>

Ejemplo

Titular 1Titular 2Uno ydos

Otro párrafo

Elementos para listas

▣ Listas numeradas (ordered list, list item): ol y li▣ Listas no numeradas (unordered lists): ul y li

27

...<body>

<ol><li>uno y</li><li>dos</li>

</ol><ul>

<li>tres</li><li>cuatro</li>

</ul></body>

...

Ejemplo

1. uno y2. dos● tres y● cuatro

Elementos para formato de texto

28

Etiqueta Descripción 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 pequeña <small>Texto</small> Texto

<sub> Subíndice H<sub>2</sub>O H2O

<sup> Superíndice mc<sup>2</sup> mc2

<ins> Insertado <ins>Texto</ins> Texto

<del> Borrado (deleted) <del>Texto</del> Texto

<mark> Marcado <mark>Texto</mark> Texto

Ejercicio

29

Escribe el código HTML (entero)

Ejercicio

30

Escribe el código HTML (entero)

Enlace a una página externa

▣ <a href="URL">Enlace</a>▣ Ejemplo

31

<a href="http://www.google.es">Ir a Google </a>

Ejemplo

Ir a Google

Ejemplo

Enlace a una página interna

▣ Ancla <a id="ancla">Texto</a>▣ <a href="#ancla">Enlace misma página</a>▣ <a href="http://pagina.html#ancla">Enlace

otra página</a>▣ Ejemplo

32

...<ul>

<li>Ir a <a href="#ref">Referencias</a></li></ul>...<h2><a id="ref">Referencias</a></h2>...

Imágenes

▣ <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")

33

<img src="http://www.w3.org/Icons/w3c_home.gif" alt=""W3c logo>c

Ejemplo

Vídeos

<video width="400" controls>

<source src="mov_bbb.mp4" type="video/mp4">

<source src="mov_bbb.ogg" type="video/ogg">

Tu navegador no soporta vídeos HTML5

</video>

34

Fuente: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video

Video cortesía de Big Buck Bunny

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-páginas - iframe

36

Tablas

37

<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>

Ejemplo

3.Flujo de

elementos

Cómo agrupar bloques de elementos en HTML

38

Elementos de bloque y en línea

▣ Elementos de bloque: tienen salto de línea 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 línea: no tienen salto de línea

□ 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 página (debe ser único por página)

■ class: identifica un tipo de div (puede haber varios)

▣ span: cambia el estilo de un contenido sin crear una nueva línea. Suele combinarse con class.

40

Ejemplo div / span

41

Ejemplo

Rey Alarico I395-410Rey Ataulfo410-415

Secciones desde HTML5

42

Secciones

43

▣ header - cabecera▣ nav - navegación▣ main - el contenido ppal de la página (sólo 1

por página)▣ section - conj. de contenidos relacionados

temáticamente▣ article - un contenido▣ aside - contenido colateral (anuncio, cita, …)▣ footer - pié

Ejemplo - Secciones

44

Compatibilidad

45

En HTML5 podemos usar ambos estilos. La etiqueta div sigue siendo útil como una etiqueta genérica de flujo

Ejercicio

46

Programa una página HTML con tu CV que contenga las secciones:▣ Datos personales

□ Incluye una foto tuya▣ Datos académicos▣ Experiencia profesional (en su caso)

□ Lista ordenada de forma cronológica inversa▣ Conocimientos técnicos

□ Incluye listas de lenguajes de programación, sistemas operativos y herramientas

▣ Idiomas□ Incluye una tabla con idiomas y nivel

▣ Referencias□ Al menos 3 enlaces de otros sitios web

4.Formularios

Cómo crear formularios para recoger datos del usuario

47

Formulario

48

Navegador Web Servidor Web

HTTP request

HTTP responseSUBMIT

CAMPO

CAMPO

CAMPO

Valida la petición, la procesa, y

genera la respuesta

Validación cliente y validación servidor

49

Validación cliente▣ La realiza el

navegador para “agilizar”

▣ Basado en las etiquetas HTML o mediante JavaScript

Validación servidor▣ El servidor

comprueba que el formulario está autorizado

▣ SIEMPRE es necesaria

▣ Ej. realizar una compra

Formulario HTML

50

51

RecuerdaIncluye form action,

name en inputs y botón submit

<form>

52

▣ action: página del servidor que procesa la petición

▣ method: GET o POST

<form action="procesa.php" method="get">...</form>

GET

53

Servidor Web

POST

54

Servidor Web

name=Pedro&course=2&phone=222&email=pedro%40p.com

HTTP Request

GET vs POST

55

GET▣ Parámetros se ven

en el navegador▣ Permite favoritos▣ Tamaño limitado

(2ks)▣ Sólo ASCII▣ No podemos enviar

ficheros

POST▣ No vemos

parámetros▣ No permite

favoritos▣ Límite mayor (8Ms)▣ Podemos enviar

binario y ficheros

URL encoding

56

Las URLs sólo pueden tener caracteres ASCIISe convierten los otros caracteres mediante un % y dos dígitos hexadecimales

<label>

▣ Etiqueta de un elemento input▣ Atributo opcional for que indica el id del input

57

<form><label>Nombre

<input></label>

...</form>

<form><label for="name">Nombre

<input id="name"></label>

...</form>

Atributos básicos de input

▣ type: tipo de entrada (ver a continuación)▣ name: nombre de la variable para el servidor▣ id: nombre del elemento input para CSS/JS▣ value: valor por defecto

58

<form><label for="phone">Teléfono

<input type="tel" id="phone" name="phone" value="333"></label>

...</form>

Otros atributos de input

▣ maxlength y minlength: validar una longitud▣ size: tamaño de la caja▣ readonly▣ required▣ multiple: podemos seleccionar varios valores▣ pattern: expresión regular para validar

entrada▣ min y max: valor min y max de un valor

numérico o fecha▣ step: incremento en entrada numérica▣ 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" - número con slider▣ type="color" - envía el código del color HTML▣ type="file" - necesita tecnología de servidor▣ type="submit" ▣ type="reset"▣ type="date" type="time" type="month"

60

Ejemplo input

61

Código color HTMLEl código de color HTML (ej. #FFFFFF) es el código hexadecimal de las componentes RGB

62

Legend, radio button, desplegable

63

Ejemplo FormularioEjemplo fieldset, desplegable y radio button

64

65

Checkbox

66

Entrada de Tiempo

Ej. input tiempoUso de <input type=””> en formularios para introducir tiempo.

67

Textarea

68

Valores por defecto

69

Válido en input de tipo text, tel, url, email, color, number, los de fechas, etc.

Ver todo en http://nativeformelements.com/

5.Conclusiones

Qué hemos aprendido

70

71

HTML nos permite crear páginas web y definir la organización de los elementos, pero necesitamos otras tecnologías (CSS, JS) para que las páginas tengan un aspecto e interacción adecuadas.

Conclusiones

72

‘’

73

“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

¡Gracias!¿Alguna pregunta?

[email protected]

74

Referencias

▣ Especificación W3C□ http://www.w3.org/TR/html5/

▣ Tutoriales HTML□ http://www.w3schools.com/html □ http://www.html-5-tutorial.com/

75

Créditos

Gracias a todos los que han publicado estos recursos de forma gratuita:▣ Minicons de Webalys▣ Plantilla de la presentación de SlidesCarnival▣ Fotos de Unsplash y Wix

76