05 junio 2014

[6] Como crear tu pagina web HTML5/CSS3 desde cero - El pie de página

  1 comentario

Publicaciones relacionadas: 
Ya estamos casi finalizando la serie de tutoriales sobre como crear tu propia pagina web HTML5 y CSS3 de una manera muy sencilla, y llegamos al sexto y penúltimo tutorial; el pie de pagina, ultimo pero elemento no menos importante, pues puede ser muy útil si usas tu creatividad, el pie de pagina de una sitio web no debe ir muy recargado, solo debe contener información complementaria de dicho sitio, el usuario que visita un portal sabe que para obtener información sobre tu sitio como derechos de autor, incluso redes sociales o quien administra la pagina, se dirige hasta el pie de pagina sin rodeos, es por esto; que debemos mantener el estándar y no salirnos de los parámetros pues puede ser bastante incomodo para quien visualiza.

Añade el siguiente código entre las etiquetas <footer>...</footer> de tu pagina web


            <a href="#">Friki Bloggeo</a> &copy; Copyright 2014. Diseño y edición por <a href="#">Anthony Medina</a>

Y se debe visualizar de este modo



Simple, sencillo y al grano, no muestra mas que un mensaje de derechos de autor, y creador, autor del blog o pagina web, sin embargo, no tiene que ser asi, muchas personas le agregan el logotipo, quizás, secciones del menu que no pueden mostrar el menu principal, enlaces a redes sociales, todo eso queda a gusto de cada quien. Añade los siguientes estilos CSS


   body footer a {
    text-decoration:none;
    color:#CCC;
    transition:all ease-out .2s;
       }
   body footer a:hover {
    text-decoration:underline;
    color:#EEE;
       }

Y debe quedar de este modo


Un cambio sencillo, nada especial. Como comenté en el tutorial anterior, en el próximo y ultimo tutorial estaré dejando un link de descarga de un archivo comprimido que contendrá el código fuente de esta pagina que hemos estado haciendo y ademas, los recursos usados como las imágenes.

Siguiente parte: Extras y mejoras

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo


1 comentario :

  1. muy buena explicacion
    saludos

    dante
    https://www.palbin.com/es/aff/dantewebs.html

    ResponderEliminar