CREACIÓN DE UN SITIO WEB CON HTML5 Y CSS3

CREACIÓN DE UN SITIO WEB CON HTML5 Y CSS3

En esta guía vamos a desarrollar el sitio web similar al mostrado a continuación.

Se permite cambiar los colores, el contenido y de ser necesario, la estructura.

[pic 1]

Lo primero que se debe hacer es crear la estructura del sitio. Para ello crean una carpeta llamada sitio web, dentro de ella crean dos carpetas, una llamada imágenes y otra llamada css.

En la carpeta sitio web deben crear un archivo el cual llamaran index.html.

En el archivo html se codifica la estructura general del sitio html5 de la como se muestra a continuación.

[pic 2]

Ahora vamos a codificar la estructura semántica del sitio web dentro del body.

En primer lugar encontramos un encabezado el cual posee una imagen, (llamada logo.png), y el título del sitio Diseño de sitios web con HTML5 y CSS3.

Procedamos a codificar esa parte. Únicamente deben codificar lo que aparece dentro del recuadro rojo, ya que el otro texto ya debe estar codificado. Mucho cuidado con la posición en la cual codifican.

[pic 3]

A continuación viene la barra de menús con sus diferentes opciones. El codigio html del contenido se muestra a continuación.

[pic 4]

A continuación vendría el área de contenido, la cual está distribuida en un área de contenido principal y un área de contenido secundario. Para ello crearan un section con el id contenido; dentro de este otro section con id principal y un aside.

[pic 5]

A su vez dentro del section principal encontramos dos articles, correspondientes a HTML5 y CSS3, los cuales poseen un título, una imagen y tres párrafos. Los títulos se  crearan utilizando la etiqueta h2.  Cada imagen se incluirá dentro de un figure. A continuación se muestra el contenido del section principal, (Aun no se ha incluido el contenido, simplemente se deja la referencia a los tres párrafos).

[pic 6]

Dentro del aside encontramos dos section, uno para los programas de formación y otro para las páginas web. A su vez cada uno tiene un listado de acuerdo a su sección.

El código de estos elementos se muestra a continuación.

[pic 7]

Finalmente el pie de página donde se pondrá el nombre del desarrollador del sitio.

[pic 8]

Ya tenemos la estructura del sitio web, es momento de crear la hoja de estilos para modificar la presentación.

Para ello crearemos en la carpeta css un nuevo archivo llamado estilos.css.

Lo primero que se hará es resetear los márgenes internos, externos y el borde y establecer sus valores a cero, también se asignara a las estructuras semánticas que definimos una naturaleza en bloque.

[pic 9]

A continuación creamos el estilo del body, asignándole un backgraund, el cual posee un color y la imagen bg.jpg, también contiene una fuente y se define el tamaño de fuente.

[pic 10]

Ahora se creara el estilo para el encabezado, el cual actualmente se ve así.

[pic 11]

Primero se asignan los estilos al header, asignándole un background, los bordes redondeados, un margen superior e inferior igual a 0.5em y derecha e izquierda auto, de tal forma que quede centrado, adicional a ello se le asignara un ancho del 90% del ancho total de la página.

[pic 12]

[pic 13]

Con este estilo el encabezado va tomando forma, pero falta que tanto la imagen como el título queden en la misma línea del encabezado.

[pic 14]

[pic 15]

A continuación se le cambia el color al texto del título, su tamaño de imagen y adicional a ello se le asigna una sombra.

A la imagen se le asignara un margen de 0.5em en todos sus lados.

[pic 16]

[pic 17]

A continuación se modificara el menú. Para ello al igual que al header se asigna un color de fondo, un borde redondeado un margen y el ancho, adicional a ello, se agregara una sombra.

...