Hagamos un sitio en HTML5 Y CSS3 – parte 1

En este tutorial de creación de una plantilla web basada en HTML Y CSS3, en esta primera parte vamos a ver la estructuración básica del sitio y vamos a utilizar las nuevas etiquetas y vamos a elementos de la semántica basados en HTML5, así que empezar.

Lo que vamos a lograr es una plantilla web como la siguiente:

html5 y css3

y al final veremos el resultado.

Comencemos con la estructuración del documento base en HTML5

1 – Doctype Y la etiqueta Head

Bueno, Primero definimos el doctype en su nueva forma, (ver info aqui) luego abrimos la etiqueta head y colocamos lo que no debe de faltar en un documento web HTML5 es decir las etiquetas basicas del head (Ver info aqui), a esto agregamos un enlace a la hoja de estilos y un enlace a la librería Modernizr(Ver info aqui) Y añadimos otro enlace a html5shiv para afirmar más la compatibilidad de html5 con los antiguos navegadores. Y sería algo más o menos así el código:

2 – La etiqueta Body

Antes de ocuparnos del contenido primero tenemos que colocar la etiquetapero le asignamos una clase seria así:

3 – el Header

Para el header agregamos la nueva etiqueta <header> dentro de ella colocamos el logo por medio de la etiqueta <figure> y el lema en h1 por medio de la etiqueta <figcaption>, después colocamos un div con la clase redes para meter los logos de las redes sociales y cerramos la etiqueta header. Y quedaria algo asi:

4 – La etiqueta Nav

Para la navegación vamos a utilizar la etiqueta nav conteniendo una lista desordenada con sus respectivo ítem de lista en enlaces. Sería algo así:

5 – Contenedor o fondo del contenido

Para hacer la simulación del fondo del contenido vamos a utilizar un div y lo cerramos antes del footer.

6 – Seccion principal etiqueta Section.

En el siguiente código abrimos una etiqueta section para meter la sección de los artículos y dentro metemos un slider por medio de un div y también un articulo por medio de la etiqueta article y dentro de la etiqueta article hacemos la estructura de un articulo o entrada, es decir un texto de entrada una imagen y los tag de autor, fecha y categoría a la que pertenece ese artículo, podemos duplicar esa etiqueta article para simular varios artículos. Luego cerramos la etiqueta article y la etiqueta section.

7 – Sidebar por medio de la etiqueta Aside

Para el sidebar vamos a utilizar la etiqueta aside y vamos a definir los diferentes bloques para cada modulo, para el de publicidad, el buscador, las categorías, y la información importante por medio de un div con una clase bloque aside, dentro de los bloque siempre va un titulo en un H3 y definimos cada contenido individualmente, unas imágenes para la publicidad, un form con las nuevas propiedades html5 para la búsqueda, una lista para las categorías y un párrafo con una clase para las informaciones importante. Y cerramos la etiqueta aside. Sería algo más o menos así:

8 – El pie de pagina por medio de la etiqueta footer y cierre del html

Bueno para el pie de página vamos a utilizar la etiqueta <footer> dentro vamos hacer una navegación por medio de una lista desordenada y el copyright, cerramos el footer, cerramos el body y cerramos el html.

¡¡Listo, tenemos la estructura de el documento en totalmente en HTML5!!

Si juntamos todo estos fragmentos de codigos obtenemos un documento asi:

 

— Ver el tutorial donde aplicamos los estilos CSS para mejorar la apariencia. —>

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo