PDF de programación - Curso de maquetación – HTML5 y MODERNIZR

SOPRA
Curso de Maquetación

HTML5



U S AR I N T E R N A S O L A M E N T E



Versión 1.00 del miércoles, 03 de agosto de 2016



Estado : Trabajo





03 de agosto de 2016 – CURSO DE MAQUETACIÓN – HTML5 Y MODERNIZR

SOPRA / Curso de Maquetación
HTML5



Índice

1. Herramientas a utilizar en el curso

2. Qué es HTML5

3.

Semántica HTML5

11

12

13

3.1. Que es ___________________________________________________________________ 13

3.2. Cabecera de un documento __________________________________________________ 13

3.3. DOCTYPE _________________________________________________________________ 13

3.4.

Elemento raíz HTML ________________________________________________________ 13

3.5.

Elemento HEAD ____________________________________________________________ 14
Codificación del contenido _______________________________________________________________ 14
Links ________________________________________________________________________________ 15

3.5.1.
3.5.2.

3.6. Nuevas etiquetas semánticas _________________________________________________ 16

3.7.

Estructura de un documento HTML5 ___________________________________________ 17
Estructura tradicional de un documento en HTML 4 __________________________________________ 17

3.7.1.

3.8. Uso de las nuevas etiquetas semánticas _________________________________________ 19
HEADER ______________________________________________________________________________ 19
NAV _________________________________________________________________________________ 19
FOOTER ______________________________________________________________________________ 20
ARTICLE ______________________________________________________________________________ 20
SECTION _____________________________________________________________________________ 21
ASIDE ________________________________________________________________________________ 23
FIGURE y FIGCAPTION __________________________________________________________________ 23
HGROUP _____________________________________________________________________________ 24
DETAILS y SUMMARY ___________________________________________________________________ 24

3.8.1.
3.8.2.
3.8.3.
3.8.4.
3.8.5.
3.8.6.
3.8.7.
3.8.8.
3.8.9.

3.9. Atributos globales __________________________________________________________ 25
ACCESSKEY ___________________________________________________________________________ 25
CONTENTEDITABLE _____________________________________________________________________ 25
DATA-* (CUSTOM DATA ATTRIBUTES) ______________________________________________________ 26
DRAGGABLE __________________________________________________________________________ 26

3.9.1.
3.9.2.
3.9.3.
3.9.4.

4.

Los Metadatos

27

4.1. APPLICATION-NAME ________________________________________________________ 27

4.2. AUTHOR __________________________________________________________________ 27

4.3. KEYWORDS _______________________________________________________________ 28

© Sopra Group, 2016 / Versión: 1.00 / Estado Trabajo / Ref. : 20150901-110953-p



2/115



03 de agosto de 2016 – CURSO DE MAQUETACIÓN – HTML5 Y MODERNIZR

SOPRA / Curso de Maquetación
HTML5


4.4. DESCRIPTION ______________________________________________________________ 28

4.5. GENERATOR _______________________________________________________________ 28

4.6. ROBOTS __________________________________________________________________ 28

4.7. CREATOR _________________________________________________________________ 29

4.8. GOOGLEBOT ______________________________________________________________ 29

4.9. VIEWPORT ________________________________________________________________ 29

4.10. MSAPPLICATION-TASK_______________________________________________________ 30

4.11. MSAPPLICATION-STARTURL __________________________________________________ 30

4.12. MSAPPLICATION-TOOLTIP ____________________________________________________ 30

4.13. MSAPPLICATION-NAVBUTTON-COLOR __________________________________________ 30

4.14. MSAPPLICATION-WINDOW ___________________________________________________ 30

4.15. MOBILEOPTIMIZED _________________________________________________________ 30

4.16. HandheldFriendly __________________________________________________________ 30

4.17. PalmComputingPaltform _____________________________________________________ 30

4.18. HTTP-EQUIV=”content-type” _________________________________________________ 30

4.19. HTTP-EQUIV=”Refresh” ______________________________________________________ 31

4.20. HTTP-EQUIV=”x-ua-compatible” _______________________________________________ 31

4.21. EXPIRES __________________________________________________________________ 31

4.22. COPYRIGHT _______________________________________________________________ 31

4.23. RATING __________________________________________________________________ 31

4.24. Metadatos Dublin Core ______________________________________________________ 33
DC. Title ______________________________________________________________________________ 33
4.24.1.
DC. Creator ___________________________________________________________________________ 33
4.24.2.
DC. Subject ___________________________________________________________________________ 33
4.24.3.
DC. Description ________________________________________________________________________ 33
4.24.4.
DC. Publisher __________________________________________________________________________ 33
4.24.5.
DC. Contributor ________________________________________________________________________ 33
4.24.6.
DC. Date _____________________________________________________________________________ 34
4.24.7.
DC. Type _____________________________________________________________________________ 34
4.24.8.
4.24.9.
DC. Format ___________________________________________________________________________ 34
4.24.10. DC. Identifier __________________________________________________________________________ 34
4.24.11. DC. Source ____________________________________________________________________________ 34
4.24.12. DC. Language _________________________________________________________________________ 34
4.24.13. DC. Relation __________________________________________________________________________ 34
4.24.14. DC. Coverage __________________________________________________________________________ 35

© Sopra Group, 2016 / Versión: 1.00 / Estado Trabajo / Ref. : 20150901-110953-p



3/115



03 de agosto de 2016 – CURSO DE MAQUETACIÓN – HTML5 Y MODERNIZR

SOPRA / Curso de Maquetación
HTML5


4.24.15. DC. Rights ____________________________________________________________________________ 35

4.25. Metadatos Open Graph ______________________________________________________ 35
og:title _______________________________________________________________________________ 35
4.25.1.
og:type ______________________________________________________________________________ 35
4.25.2.
og:image _____________________________________________________________________________ 35
4.25.3.
og:url ________________________________________________________________________________ 36
4.25.4.
og:audio _____________________________________________________________________________ 36
4.25.5.
og:description _________________________________________________________________________ 36
4.25.6.
og:determiner _________________________________________________________________________ 36
4.25.7.
og:locale _____________________________________________________________________________ 36
4.25.8.
4.25.9.
og:locale:alternate _____________________________________________________________________ 36
4.25.10. og:site_name _________________________________________________________________________ 36
4.25.11. og:video _____________________________________________________________________________ 36
4.25.12. og:image:url __________________________________________________________________________ 36
4.25.13. og:image:secure_url ____________________________________________________________________ 36
4.25.14. og:image:type _________________________________________________________________________ 36
4.25.15. og:image:width ________________________________________________________________________ 37
4.25.16. og:image:height _______________________________________________________________________ 37

4.26. Otros metadatos ___________________________________________________________ 37
Twitter Cards__________________________________________________________________________ 37
Open Graph Facebook __________________________________________________________________ 37

4.26.1.
4.26.2.

4.27. Ejemplos de metadatos ______________________________________________________ 38

5.

Elementos de formulario

39

5.1. Nuevos tipos de input _______________________________________________________ 39

5.2.

Tipo email ________________________________________________________________ 39

5.3.

Tipo url ___________________________________________________________________ 39

5.4.

Tipo date _________________________________________________________________ 39

5.5.

Tipo time _________________________________________________________________ 40

5.6.

Tipo datetime _____________________________________________________________ 40

5.7.

Tipo datetime-local _________________________________________________________ 40

5.8.

Tipo month _______________________________________________________________ 40

5.9.

Tipo week ________________________________________________________________ 40

5.10. Tipo number ______________________________________________________________ 40

5.11. Tipo range __________