Cap¡tulo 1
¿De d¢nde viene y qu? es HTML? ...... 1
Expectativa ..................................................... 2
Introducci¢n ................................................... 3
Un poco de historia ....................................... 4
El ?xito puede ser el mayor problema ....... 4
Round 2 (nuevos competidores) ................ 5
¿HTML5 o una versi¢n anterior? ................ 5
HTML4 ..................................................... 5
XHTML ..................................................... 6
HTML5 ..................................................... 6
Comprendiendo las etiquetas (tags) ......... 6
Comprendiendo las hojas de estilo
en cascada (CSS) ....................................... 7
JavaScript ....................................................... 8
Tecnolog¡as de p ginas activas de servidor 8
Resumen ........................................................ 9
Autoevaluaci¢n.............................................. 9
Evidencia ........................................................ 10
Referencias .................................................... 11
Bibliograf¡a ............................................. 11
Paginas Web recomendadas .............. 11
Respuestas sugeridas ................................. 12
Cap¡tulo2
Prepar ndonos para HTML5 ................ 13
Expectativa ..................................................... 14
Introducci¢n ................................................... 15
Eligiendo un navegador ............................... 15
Tipo de documento ....................................... 17
Etiqueta .................. 18
Estructura b sica de un documento HTML 18
Etiquetas y ................. 18
T¡tulo y Metadatos ........................................ 19
Ejemplo ................................................... 19
Ejercicio .................................................. 21
P rrafos y saltos de l¡nea ............................ 21
Detecci¢n de las caracter¡sticas
de HTML5.................................................... 23
Resumen ........................................................ 26
Autoevaluaci¢n ............................................. 26
Evidencia ........................................................ 27
Referencias ................................................... 27
Bibliograf¡a ............................................. 27
Paginas Web recomendadas .............. 27
Respuestas sugeridas ................................ 28
Cap¡tulo 3
M s bases HTML ............................... 29
Expectativa ................................................... 30
Introducci¢n ................................................. 31
¿HTML o XHTML? .......................................... 31
Formato de texto con etiquetas ................. 32
Cabeceras .............................................. 33
Ejercicio .................................................. 34
Negritas, cursiva, subrayado y otros .. 34
Ejercicio .................................................. 36
Sub¡ndices y super¡ndices ................... 36
Ejercicio .................................................. 37
Bloque de citas ...................................... 38
Ejercicio .................................................. 38
L¡nea Horizontal .................................... 39
Listas .............................................................. 40
Listas numeradas y listas
no numeradas .................................... 41
Listas de definici¢n ............................... 42
Ejemplo ................................................... 43
Im genes ....................................................... 44
Tablas ............................................................. 46
Ejemplo ................................................... 47
Hiperv¡nculos (enlaces) ................................ 48
Ejemplo ................................................... 49
Formularios (controles cl sicos) ................. 51
Estructura del formulario ..................... 56
Campo de texto ..................................... 56
µrea de texto .......................................... 57
Campo de contrase¿a
(password) ........................................... 57
Lista de selecci¢n simple
(combobox) .......................................... 58
Lista de selecci¢n m£ltiple (listbox) ... 59
Lista de selecci¢n m£ltiple
(listbox multiple selection) ................ 59
Lista de botones radio
(radio buttons) .................................... 59
Lista de cajas (checkboxes) ................. 61
Bot¢n para enviar informaci¢n ........... 62
Bot¢n para borrar
informaci¢n del formulario ............... 62
Bot¢n simple .......................................... 62
Imagen (bot¢n) ...................................... 63
Notas adicionales sobre botones ........ 63
Campo oculto ......................................... 63
Validar p ginas HTML5 ................................ 64
Resumen ........................................................ 64
Autoevaluaci¢n.............................................. 65
Evidencia ........................................................ 65
Referencias .................................................... 66
Bibliograf¡a ............................................. 66
Paginas Web recomendadas .............. 66
Respuestas sugeridas ................................. 66
Cap¡tulo 4
Los nuevos elementos HTML5 ............ 67
Expectativa ..................................................... 68
Nueva sem ntica .......................................... 69
Elementos estructurales .............................. 69
article....................................................... 69
aside ........................................................ 70
footer ....................................................... 71
header ..................................................... 71
nav ........................................................... 71
section ..................................................... 72
Elementos estructurales
complementarios ....................................... 72
address .................................................... 72
hgroup ..................................................... 73
menu ....................................................... 73
Elementos sem nticos en l¡nea ................. 74
command ............................................... 74
details y summary ................................ 75
dfn ........................................................... 75
figure y figcaption ................................. 76
wbr ........................................................... 76
Media .............................................................. 76
audio ....................................................... 76
canvas ..................................................... 77
embed ..................................................... 79
svg ........................................................... 80
video ........................................................ 81
Resumen ........................................................ 83
Autoevaluaci¢n ............................................. 83
Evidencia ........................................................ 84
Referencias ................................................... 84
Bibliograf¡a ............................................. 84
Paginas Web recomendadas .............. 84
Respuestas sugeridas ................................ 84
Cap¡tulo 5
Controles nuevos en
formularios HTML5 ........................... 85
Expectativa .................................................... 86
Introducci¢n .................................................. 87
Un vistazo a los controles nuevos .............. 87
Elementos independientes ......................... 90
fieldset .................................................... 90
keygen .................................................... 90
label......................................................... 91
meter ..................................................... 91
progress .................................................. 92
Elementos tipo input .................................... 92
email ....................................................... 92
number ................................................... 93
range ....................................................... 93
search .................................................... 93
tel ............................................................. 94
url ............................................................. 94
Nuevos atributos ........................................... 94
autofocus ................................................ 94
pattern .................................................... 95
placeholder ............................................ 95
Resumen ........................................................ 96
Autoevaluaci¢n ............................................. 96
Evidencia ........................................................ 97
Referencias ................................................... 97
Bibliograf¡a ............................................. 97
Paginas Web recomendadas .............. 97
Respuestas sugeridas ................................. 98
Cap¡tulo 6
Primeros pasos con CSS ...................... 99
Expectativa ..................................................... 100
Introducci¢n ................................................... 101
Un vistazo a hojas de estilo o CSS
(Cascading Style Sheets) .......................... 101
Utilizar estilos a nivel local .......................... 102
Utilizar estilos a nivel documento .............. 103
Utilizar estilos a nivel de sitio (link) ............ 105
Utilizar clases y el identificador
(class e id) .................................................... 107
Manipular la apariencia de una p gina .... 110
Manipular texto ...................................... 110
Manipular colores .................................. 114
Manipular Bordes .................................. 115
Agrupaci¢n de elementos (span y div) ...... 116
span ......................................................... 116
Ejemplo ................................................... 117
div............................................................. 117
Ejemplo ................................................... 118
Posicionamiento ........................................... 119
Elementos flotantes (propiedades
float y clear) ........................................ 119
Posicionamiento absoluto ................... 123
posicionamiento relativo ...................... 124
Resumen ........................................................ 126
Autoevaluaci¢n.............................................. 126
Evidencia ........................................................ 127
Referencias .................................................... 127
Bibliograf¡a ............................................. 127
Paginas Web recomendadas .............. 127
Respuestas sugeridas ................................. 128
Cap¡tulo 7
Nuevo y mejorado CSS3 ......................... 129
Expectativa ..................................................... 130
Introducci¢n ................................................... 131
Motores de renderizado y CSS3 ................. 131
Nuevas notaciones para color .................... 132
Notaci¢n RGBA ...................................... 132
Notaci¢n HSL Y HSLA ............................ 132
Bordes ............................................................. 133
Bordes redondeados ............................. 135
Bordes sombreados .............................. 135
Bordes con imagen ............................... 136
Gradientes ...................................................... 138
Transformaciones ......................................... 144
Transiciones .................................................. 146
Transparencia ............................................... 150
Texto y fuentes descargables ..................... 151
text-shadow ............................................ 152
text-stroke .............................................. 152
@font-face .............................................. 153
Herramientas de selecci¢n ......................... 154
Selecci¢n por atributo .......................... 154
Selecci¢n por relaci¢n padre-hijo ....... 155
Selecci¢n inversa (not) ......................... 156
Resumen ........................................................ 158
Autoevaluaci¢n ............................................. 158
Evidencia ........................................................ 159
Referencias ................................................... 159
Bibliograf¡a ............................................. 159
Paginas Web recomendadas .............. 159
Respuestas sugeridas ................................ 160
Cap¡tulo 8
Novedades en JavaScript .................. 161
Expectativa .................................................... 162
Introducci¢n .................................................. 163
Nuevas herramientas de selecci¢n ........... 163
getElementsByClassName() ................ 163
getElementsByTagName ..................... 164
querySelector() ...................................... 164
querySelectorAll() .................................. 165
Almacenamiento de sesi¢n y local ............ 165
Almacenamiento por sesi¢n ............... 166
Almacenamiento local ......................... 166
Asignando y recuperando datos
de sessionStorage y localStorage ... 166
M?todos y propiedades de session
Storage y localStorage ...................... 169
Web offline (cach?) ...................................... 169
Geolocalizaci¢n ............................................. 172
WebSocket .................................................... 176
Creaci¢n interfaz ................................... 183
Conexi¢n de sockets ............................. 183
Env¡o de mensaje .................................. 184
Algunas puntualizaciones .................... 185
Web workers ................................................. 185
Creaci¢n interfaz ................................... 190
Llamar al web worker ........................... 191
Construir el c¢digo del web worker .... 192
Resumen: pasos para crear un
Web worker ............................................ 193
Algunas puntualizaciones entre
Web workers y navegadores ............... 194
Resumen ........................................................ 195
Éste no es un manual o guía para migrar aplicaciones de las versiones anteriores de HTML a HTML5, es un libro que introduce poco a poco al lector, en forma amable pero consistente con las alternativas que ofrece HTML5. Cuenta con recursos en línea y contenido adicional para respaldar mejor el aprendizaje obte-nido con el texto. Es un libro que ordena ideas, conceptos e información en nues-tro idioma, es una forma muy bella y eficaz de aprender HTML5.Ventajas competitivas: En la Web se encuentran todos los programas fuentes del libro ordenadospor capítulo.Conozca:Las características fundamentales de HTML5. Aprenda:A trabajar con los nuevos elementos de HTML5.A desarrollar páginas Web con HTML5.Emmanuel Herrera Ríos Es Ingeniero en Sistemas Computacionales, colaborador en el desarrollo contenidos multimedia destinados a la educación, elaborados en México y en América Latina. Ha trabajado como desarrollador de diversos sistemas de información y control para diferentes empre-sas e instituciones. También se ha desempeñado como diseñador, desarrollador y administrador de sistemas de información financiera, ha desarrollado y coordinado proyectos multimedia para institu-ciones públicas a través del Instituto Latinoamericano de la Comunicación Educ
Éste no es un manual o guía para migrar aplicaciones de las versiones anteriores de HTML a HTML5, es un libro que introduce poco a poco al lector, en forma amable pero consistente con las alternativas que ofrece HTML5. Cuenta con recursos en línea y contenido adicional para respaldar mejor el aprendizaje obte-nido con el texto. Es un libro que ordena ideas, conceptos e información en nues-tro idioma, es una forma muy bella y eficaz de aprender HTML5. Ventajas competitivas: En la Web se encuentran todos los programas fuentes del libro ordenadospor capítulo. Conozca: Las características fundamentales de HTML5. Aprenda: A trabajar con los nuevos elementos de HTML5. A desarrollar páginas Web con HTML5. Emmanuel Herrera Ríos Es Ingeniero en Sistemas Computacionales, colaborador en el desarrollo contenidos multimedia destinados a la educación, elaborados en México y en América Latina. Ha trabajado como desarrollador de diversos sistemas de información y control para diferentes empre-sas e instituciones. También se ha desempeñado como diseñador, desarrollador y administrador de sistemas de información financiera, ha desarrollado y coordinado proyectos multimedia para institu-ciones públicas a través del Instituto Latinoamericano de la Comunicación Educativa.
