Manual de Html5 Part1.

1. Estructura semántica de HTML5
Conceptos básicos: párrafos y líneas
Listas
Añadir imágenes
Enlaces
2. Contenido editable
3. Introducción a CSS3
Las propiedades CSS más habituales
Colocar un footer inferior (pegajoso)
4. Selectores CSS3
5. Alineación flotante de divs (float)
6. Centrar el contenido
7. Posicionamiento de las cajas (div)
8. Vídeo
9. Audio
10. Creación de gráficoscon CANVAS
11. Creación de gráficos vectoriales con SVG
12. Formularios
Enviar la información con PHP
13. Tipografías personalizadas
14. Bordes y Bordes redondeados
15. Fondos
16. Sombras
17. Transformaciones (transform)
18. Transiciones (transition)
19. Animaciones (animation)
20. Columnas de texto y líneas separadoras
21. Colores y transparencias
22. Guardado de información (Storage)23. Media Queries (Responsive Design)


Estructura semántica de HTML5
Profesor: Javier López
Volver

 Estructura básica de una página en HTML5

 Las nuevas etiquetas semánticas
 Estructura compleja
 Guardar con formato UTF-8

• Estructura básica de una página en HTML5
En HTML5 la estructura interna básica de una página web se ha simplificado, reduciendo el códigoinnecesario hasta quedarse con el esqueleto básico, que sería el siguiente:





Título de la web



Contenido de la web



Cada fichero HTML está compuesto de dos partes. El , donde se añade toda la información que el navegador necesita pero que no se visualizará y el , que será toda la información que contiene la página y que el navegador visualizará.• 
Todo lo que coloquemos entre las etiquetas del  y , aunque no se visualizará en el navegador, ofrece información importante sobre la propia página, por lo que en el se introduce información referente a:
la codificación de la página (para que aparezcan los acentos correctamente) utilizando 'meta charset'.
el título de la página, que aparece en la pestaña del navegador (a través de 'title').La descripción de la temática de la página para los búscadores (Google entre otros).
el estilo CSS que la página utilizará (lo trataremos en el tema: Introducción a CSS3).
o la programación en javaScript (en el caso de que se utilice).
Por otra parte, dentro del  colocaremos todo aquello que sí se tiene que visualizar en el navegador, entre lo que vamos a destacar las etiquetas semánticas.• Las nuevas etiquetas (semánticas)
Una de las novedades de HTML5 hace referencia a las etiquetas semánticas, que tienen como objetivo crear cajas o apartados de contenido dentro de la página pudiendo aportar un significado semántico interno dependiendo del contenido que contenga. Así, si un apartado tiene como nombre , el navegador sabrá que se trata de un encabezado, o si por el contrario se utilizala etiqueta  identificará que es una barra de navegación y que por lo tanto es donde se encuentran los enlaces de la página.
Así, utilizando las etiquetas semánticas, se puede identificar el contenido que cada apartado de la página contiene, huyendo de esta manera del abusivo uso que se hace del omnipresente DIV (que no aporta ninguna información adicional sobre la información de la informaciónque contiene).

Las etiquetas semánticas más importantes son:
Header
Nav
Section
Article
Article
Aside
Footer

(Coloca el cursor sobre cada uno de los siguientes enlaces azules para resaltar su colocación en la imagen).

Header:
Es el equivalente a la cabecera de la página web. Contiene el título o nombre de la empresa/titular de la página, logo e información relacionada.
Nav:
Esteapartado contiene los enlaces (barra de navegación) externos o internos de la página.
Section:
Este gran apartado puede agrupar diferentes subapartados (de tipo 'article') de diferentes temas, o bien puede definir un gran apartado de contenido unitario.
Article:
Es una pieza independiente de contenido, que puede estar contenida (o no) dentro de un apartado de tipo 'section'.
Aside:...