Hagamos un sitio en HTML5 Y CSS – parte 2

En esta segunda parte de este tutorial en el que hacemos una web completa en HTML5 Y CSS3, vamos a crear los estilos a la estructura que organizamos en el primer tutorial (ver tutorial).

Así que empecemos.

1 – Añadimos los estilos para resetear los estilos de los navegadores(Ver mas acerca de los reset.css)

2 – Estilos de la estructura basica

Seguimos con la estructura base del documento HTML5, es decir las columnas y cajas que contendrán toda la web. (el body, header, contenido, la sección base, la barra lateral o Aside y el footer)

3 – Estilos de el header

Seguimos aplicando los estilos del contenido del header el logo y el lema en el elemento figure, y los estilos al div con la clase de redes para mostrar los iconos de las redes sociales, les damos a ambos posiciones relativas y uno lo flotamos a la izquierda y el otro a la derecha, dentro de figure que es el logo tenemos figcaption y le aplicamos los estilos al h1 que esta hay y le aplicamos un estilo de sombra con text-shadow (saber mas de text-shadow).

4 – estilos de la navegación

Seguimos con los estilos de la barra de navegación. 1º a la etiqueta nav aplicamos un border radius y un degradado que si no lo sabemos hacer podemos utilizar alguna de las herramientas online para conseguir este efecto (Herramientas de css3 online), y le coloque una imagen de fondo por si falla el degradado la imagen hará este trabajo, luego a los enlaces de las listas es decir a los link le aplique unos estilos para diferenciar y mejorar la apariencia y en el estado hover le aplique un color de fondo y un borde para simular un efecto de rollover.

barra navegacion html5

5 – estilos del contenido del post

Bueno lo siguiente es crear los bloques de los post o artículos, utilizamos la etiqueta article, le damos margin y padding, luego nos ocupamos los estilos de la imagen en estado de reposo y en estado hover le damos 8px de borde de ancho en ambos estados, luego los estilos del título en un h2 que es un enlace que lleva al contenido completo del post, luego aplicamos los estilos de los meta, es decir la caja que nos muestra la fecha en que fue escrito, por quien y la categoría a que pertenece, luego al párrafo y el leer mas..

post

6 – estilos del contenido del sidebar o Aside

Seguimos con el contenido de la barra lateral o aside, tenemos los h3 que son los títulos de los modulos con un background de degradado igual al que le aplicamos al nav, un border radius, le damos un color blanco y otras propiedades mas para dar un buen estilo. Luego para el bloque de publicidad colocamos las imágenes de publicidad por medio de una lista y que cada ítem es una imagen le damos un display block y que se floten cada uno a la izquierda del otro, luego para las categorías le damos un color de texto en estado de reposo y otro en hover, seguimos con los estilos de la caja de búsqueda, el bloque de información importante que le damos un estilo al párrafo para darle un padding y un color diferente y el estilo a la respectiva imagen que se va a alinear a la izquierda

7 – estilos del contenido del footer

Y por ultimo aplicamos los estilos del footer, es decir la navegación con clase footer, sus enlaces y el estado hover da cada ítem.

Y listo, trate de ser muy resumido para no extender este tutorial y también estaba asumiendo que manejabas las hojas de estilos css.

Nos vemos en el proximo tutorial donde vamos a pasar esta plantilla a un theme para WordPress.
Hasta la proxima,,

<— ver al primer tutorial de la estructuracion de la web –|

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