miércoles, 14 de noviembre de 2012

Codigo HTML y CSS de la portada de la página web.

1. Estructura portada y códigos HTML y CSS.

Basándome un poco en la página web www.taxicity.es que mostré en la entrada al blog anterior, decidí que la portada fuera parecida a esa, por ello la estructure en 3 partes aunque para no dar a ninguna mas importancia que a las demás  equilibré los tamaños al estilo la bandera de algunos paises:


El codigo html de esta portada está estructurado en 3 partes de la siguiente forma:

    -Defino un encabezamiento o header con una etiqueta <div> el cual está compuesto por el logo (Taxi Sergy) y la foto de fondo que añado posteriormente con el documento inicio.css.

    -La parte central de la página que defino mediante otra etiqueta <div> con identificador "titulo" está compuesta por la barra de menú con las distintas secciones que se desarrollaran en posteriores entregas, y debajo un dibujo de un taxi y el lema de la página.

   -La tercera parte de la página queda compuesta por un texto descriptivo definido mediante la etiqueta <h3> y el pie de la página donde coloco mi nombre como creador de la página utilizando una etiqueta <div> con identificador "pie".



2. Estructura y estilo del header.

     - El elemento mas importate del header sin duda alguna es el fondo el cual da carácter a toda la página, y este esta configurado por completo en el bloque #header del documento inicio.css.



     - El otro elemento del header es el logo el cual está definido mediante la etiqueta <h1> en el documento html y ayudandome de la etiqueta <span> he coloreado dos letras de amarillo.





3. Estructura y estilo de la parte central de la portada.

La parte central de la portada esta formada por 3 partes:

     - La barra de menu creada en el html mediante una lista en la que cada elemento es un enlace a la sección indicada. Para que salgan las distintas secciones con el formato indicado es decir en paralelo y con separación entre ellas se realiza en el documento inicio.css mediante los tres bloques indicados, el primero para colocar la barra de menú dentro de este apartado central, el segundo para que las distintas secciones queden colocadas en la misma frase y el tercero para colocar las separaciones entre secciones danrlas color y formato al texto:




Las otras dos partes que se encuentran en la parte central de la portada son el dibujo del taxi y el lema los cuales para que aparezcan alineados en lugar de uno debajo del otro he utilizado la herramienta float en el css:





4. Estructura y estilo del pie.

Y por último la parte inferior de la portada formada por el texto descriptivo y bienvenida y el pie donde aparce mi nombre para identificar al creador de la pagina estan creados en el documento html y mediante el css he dado formato tanto al texto definido con la etiqueta <h3> y el pie definido con la etiqueta <div>.








No hay comentarios:

Publicar un comentario