Fue diseñado para actualizar los conocimientos de los participantes en cuanto al diseño y desarrollo de sitios web, evolucionando hacia los estándares de los lenguajes fundamentales en la creación de estos sitios.

1. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
Seminario – Taller
Creación de sitios
web dinámicos e
interactivos con
HTML5 - CSS3
- JAVASCRIPT

2. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
GENERALIDADES DEL CURSO
DURACIÓN: Del 1 de agosto al 29 de octubre
de 2016 (60 horas presenciales y 60 horas en
virtuales, en total 120 horas)
HORARIO: 8:00a.m. - 4:00p.m
RECONOCIMIENTO ACADÉMICO
certificados de participación con registro
avalado por la Universidad de Panamá
FACILITADORES
• Profesora Carmen Perea
• Profesor Gabriel Ponte
• Profesora Ivis Bernal
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

3. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
GENERALIDADES DEL CURSO
METODOLOGÍA: Actividades introductoria s al
tema, exposiciones para la construcción del
conocimiento por parte de los participantes y
las practicas correspondientes.
EVALUACIÓN:
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT
CRITERIO PORCENTAJE
Asistencia 20%
Talleres 50%
Proyecto Final 30%
TOTAL 100%

4. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
PARA INICIAR VEREMOS
• Los nuevos elementos
semánticos del html5
• Sus principales novedades
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

5. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
INTRODUCCIÓN
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT
HTML5 es el presente de la web y si no estás
asimilando lo que está pasando ya eres parte de la
vieja generación de desarrolladores. Eso tendría que
tenerte preocupado.”
Entender HTML5 es entender que hoy nos
conectamos desde teléfonos móviles, tabletas,
eBooks, netbooks, computadores y otra gama de
dispositivos. Es entender que se acabaron los
webmasters y hoy hablamos de equipos
multidiciplinarios de empresas de tecnología que
cuentan con frontends, backends, sysadmins, mobile
devs, comunity managers y arquitectos de
información en los proyectos que están reiventando
mercados y generando tráfico e ingresos.

6. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
INTRODUCCIÓN
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT
Podemos hablar de todas las empresas gigantes de la
web, podemos enumerar a Microsoft, Google, Apple,
Adobe, Facebook, Yahoo, Mozilla y miles de proyectos
tecnológicos que independientemente de sus
objetivos hoy respiran HTML5, lo apoyan y tienen
propuestas que los hacen competir en código en el
navegador más cercano a tu pantalla. Es una de sus
más importantes estrategias de posicionamiento y es
una de sus más fuertes apuestas de reclutamiento.
HTML5 es una época maravillosa de la web que tiene
el privilegio de estar disfrutando. No es tecnología, ni
es tendencia.

7. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

8. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
¿QUÉ ES DOCTYPE?
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

9. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

10. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT
Para usar HTML5 se utiliza el doctype.
<!DOCTYPE HTML>
• Es compatible con versiones antiguas de
navegadores.

11. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT
• HTML5
• <!DOCTYPE html>
• <head>
• <meta charset="utf-8">
• <title>Hello world!</title>
• <link rel="shortcut icon" href="favicon.ico"
type="image/x-icon">
• <link rel="stylesheet" href="style.css">
• <script src="code.js"></script>
• </head>
• <body>
• <hgroup>
• <h1>Hola HTML5!</h1>
• <h2>Esta es mi primera web</h2>
• </hgroup>
• </body>
• </html>
EJEMPLO

12. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

13. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

14. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

15. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

16. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

17. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

18. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

19. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
TIPOS DE CONTENIDOS DE LOS
ELEMENTOS
HTML 4 solo manejaba dos tipos principales de
contenido:
• en línea (inline)
• en bloque (block).
HTML5 presenta una lista de tipos de contenido más
completa
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

20. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
TIPOS DE CONTENIDOS DE LOS
ELEMENTOS
• CONTENIDO DE METADATOS: para los elementos de
enlace entre los documentos, los elementos de
presentación o los elementos de comportamiento del
contenido (base, command, link, meta, noscript,
script, style y title).
• CONTENIDO DE FLUJO: para los elementos utilizados
en el cuerpo de la página (a, article, blockquote,
details, label, table...).
• CONTENIDO DE SECCIONAMIENTO: para los
elementos de la estructura (article, aside, nav y
section).
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

21. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
TIPOS DE CONTENIDOS DE LOS
ELEMENTOS
• CONTENIDO DE ENCABEZADO : para los elementos
de encabezado de la sección (h1 a h6 y hgroup).
• CONTENIDO DE ENUNCIADO: para los elementos de
texto (a, abbr, button, canvas, em, span, strong...).
• CONTENIDO INCRUSTADO: para los elementos
insertados (audio, canvas, embed, iframe, img, math,
object, svg y video).
• CONTENIDO INTERACTIVO: para los elementos que
impliquen interactividad con los usuarios (a, audio,
button, input, label video...).
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

22. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
ESQUEMAS
• Los esquema en HTML5 se
refieren al esqueleto estructural del
programa
• Similar a cómo el índice de un libro
muestra la estructura jerárquica de su
contenido
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

23. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
ESQUEMAS
Todo el contenido incluido dentro del
elemento <body> es parte de una sección y
éstas en HTML5 pueden ser anidadas.
También pueden ser definidas explícita o
implícitamente.
Las siguientes etiquetas muestran las
secciones definidas explícitamente
<body>, <section>, <article>, <aside>,
<footer>, <header>, y <nav>
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

24. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
ESQUEMAS
Observa el siguiente ejemplo:
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

25. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
ESQUEMAS
Un esquema también necesita cabeceras
para ser útiles.
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

26. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
ESQUEMAS
HTML5 introduce cuatro nuevos elementos que
permiten definir secciones que no pertenecen
al esquema principal de un documento web:
1. El elemento sección lateral HTML (<aside>)
define una sección que no pertenece al flujo
principal, como una caja de explicación o un
anuncio.
2. El elemento sección de navegación (<nav>)
define una sección que contiene enlaces de
navegación. Pueden ser muchas en un
documento.
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

27. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
ESQUEMAS
3. El elemento de sección de cabecera
(<header>) define una cabecera de página, en
el se encuentra el logo y el nombre del sitio.
4. El elemento HTML de pie de página
(<footer>) define un pie de página, que
contiene el derecho de autor y notas legales.
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

28. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
NUEVAS CARACTERÍSTICAS
DE LOS FORMULARIOS
Nuevos campos definidos en HTML5:
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

29. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
NUEVAS CARACTERÍSTICAS
DE LOS FORMULARIOS
Controles definidos en HTML5:
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

30. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
NUEVAS CARACTERÍSTICAS
DE LOS FORMULARIOS
Nuevos atributos definidos en HTML5:
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

31. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
ELEMENTOS MULTIMEDIA
Una de las características más mencionadas de
HTML5 fue la capacidad de procesar video.
El elemento <video> es muy simple.
ofrece varios atributos para establecer su
comportamiento y configuración. Los atributos
width y height.
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

32. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
EJEMPLO ELEMENTO <video>
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT
<!DOCTYPE html>
<html lang="es">
<head>
<title>Reproductor de Video</title>
</head>
<body>
<section id="reproductor">
<video id="medio" width="720" height="400"
controls>
<source
src="http://minkbooks.com/content/trailer.mp4">
<source
src="http://minkbooks.com/content/trailer.ogg">
</video>
</section>
</body>
</html>

33. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
ELEMENTOS MULTIMEDIA
El elemento <audio>
Nuevo elemento en HTML5 que comparte casi las
mismas características del elemento <video>.
Permite reproducir audio en un documento HTML.
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT

34. 1. Doctype.
2. Nuevos elementos
3. Elementos estructurales
3.1 Header
3.2 Footer
3.3 Nav
3.4 Section
4. Elementos de texto
redefinidos
5. Tipos de contenidos de
los elementos
6. Esquemas
7. Nuevas características de
los formularios
7.1 Nuevos campos
7.2 Controles
7.3 Atributos
7.4 Validación nativa
8. Elementos multimedia
8.1 Video
8.2 Audio
3.5 Article
3.6 Aside
3.7 Figure
3.8 Div
Esto cierra nuestra
discusión sobre los
nuevos elementos
estructurales de
HTML5.
Seminario – Taller
Creación de sitios web dinámicos e interactivos
con HTML5 - CSS3 - JAVASCRIPT