View
186
Download
0
Category
Preview:
Citation preview
ProfesoresCarlos A. IglesiasMercedes Garijo
Puedes contactarme en cif@gsi.dit.upm.es - Despacho C-211
2
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
Prueba
8
▣ Instala plugin de chrome Advanced REST client
▣ https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo
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
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
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
□ < → <□ > → >
<!DOCTYPE html>
<html lang="es"><head>
<title>Ejemplo</title><meta charset="UTF-8">
</head><body>
<p><p></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>
Viewport
21
<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/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Ej. Viewport
22
Fuente: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.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
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
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
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
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é
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
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
<form>
52
▣ action: página del servidor que procesa la petición
▣ method: GET o POST
<form action="procesa.php" method="get">...</form>
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
Código color HTMLEl código de color HTML (ej. #FFFFFF) es el código hexadecimal de las componentes RGB
62
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/
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.
‘’
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
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
Recommended