Cómo colocar el logotipo con enlace en la web

Ya se que aún es pronto para que tengais el banner o logotipo de la web listo, pues seguramente aún nisiquiera tienes claro de qué va a tratar, pero vamos a explicar cómo insertar el logo en la parte superior y cómo colocarle un enlace para que al hacer clic sobre él se dirija al visitante a la página principal. Cuando más adelante tengas el banner o logotipo terminado solo tendrás que sustituir uno por otro.

En cualquier caso, te recuerdo que este ejemplo que estamos "fabricando" debes seguirlo al pie de la letra para no perderte en ningún paso. Luego, en tus experimentos puedes colocar lo que te de la gana, oki? je je.

Bien, vamos a partir de un banner genial, el de CCTW que nos ha creado nuestra amiga Yaneth (con tu permiso...). Imagino que ya sabes copiar y pegar imagenes desde una web, verdad? Pues copiate este banner que dejo abajo y pégalo dentro de tu carpeta objetos para seguir.

Banner de ComoCrearTuWeb creado por Yaneth en el Primer Concurso CCTW (visita el foro para saber más...)

Ahora que lo has pegado en tu carpeta objetos, cambiale el nombre. Ha de llamarse logotipo.gif, oki?

logotipo pegado en la carpeta objetos

Este logotipo.gif lo vamos a situar en la parte superior de cada una de las páginas, por lo que la capa correspondiente será el div llamado cabecera. Para facilitar la colocación de los elementos que pongamos en la cabecera, que mejor que crear dos divisiones dentro de ese espacio o capa? Así, será más fácil colocar el logotipo a la izquierda y dejar un espacio a la derecha, en otro div, para en un futuro colocar una foto guapa o quien sabe, quizás publicidad para ganar algo de dinero extra y pagarnos el hosting de la web, no?

Pues según eso, vamos a crear dos divs dentro del div cabecera. Los llamaremos... logotipo y ... publicidad, por qué no. Así que, abre la plantilla.html con tu Html Kit, y ve a la vista de código para cambiar esta línea (te recuerdo que los códigos Html los escribo en azul y los de la hoja de estilos en verde):

<div id="cabecera">Bienvenidos a mi Web</div>

por estas otras:

<div id="cabecera">
  <div id="logotipo"></div>
  <div id="publicidad">Bienvenidos a mi Web</div>
</div>

Como ves, hemos metido las dos capas nuevas dentro de la capa cabecera, y hemos quitado el mensaje de Bievenida de la capa cabecera para colocarlo directamente dentro de la capa publicidad, por poner algo mientras en ella.

Ahora toca colocar dentro el logotipo. Ya vimos cómo colocar una imagen y también cómo hacerle un enlace cuando vimos lo del buzón de correo, te acuerdas? Pues ahora es casi igual (pero en lugar de mailto:tudireccion@email.com se pone la ruta de la página destino). Escribimos la línea de la imagen dentro del div logotipo, quedando esa línea de este modo:

<div id="logotipo">
<img src="objetos/logotipo.gif" width="270" height="80"
alt="Haz clic aquí para volver a la página de inicio">
</div>

Lo que he puesto dentro del alt="" es el mensaje que aparecerá en algunos navegadores si dejamos el cursor sobre el logotipo.

Ahora nos toca crear y darle propiedades a esa nuevas capas en la hoja de estilos estilo-general.css así que la abrimos y añadimos esto (le he puesto colores de fondo para ver donde está cada una):

#logotipo {background-color: brown}
#publicidad {background-color: pink}

Para guardar un cierto orden, incluye esas dos lineas justo después de la definición de la capa cabecera de la hoja de estilo. Así, en orden, nos será más fácil encontrarlo todo.

Bien. Qué propiedades le damos a estas dos capas? Para empezar habría que definirles la anchura. En principio le daremos un ancho de 280 pixeles a logotipo, pues es un poco más que lo que ocupa la imagen (270px). A publicidad le daremos el resto, es decir, 800-280-2=518 pixeles. (ese 2 es un pixel del borde izquierdo más otro pixel de grosor del lado derecho de esa capa, pues los grosores también ocupan un espacio).

#logotipo {background-color:brown; width:280px;}
#publicidad {background-color:pink; width:518px;}

Guardando la hoja de estilos y haciendo vista previa vemos que realmente estas dos capas están una encima de otra. Cómo se evitaba esto ? Venga, haz memoria... qué propiedad permite que podamos poner una a un lado y la otra al otro lado? A ver si te haces una chuleta! (en Méjico creo que se llama acordeón, je je).

Por si no te acuerdas te ayudo un poco. Vamos a ponerle float:left a logotipo para colocarlo a la izquierda y float:right a publicidad para mandarla a la derecha.

#logotipo {background-color:brown; width:280px; float:left;}
#publicidad {background-color:pink; width:518px; float:right;}

Guardamos la hoja de estilo y hacemos vista previa en plantilla.html para ver cómo ha quedado... exácto, una verdadera mierda , je je je. Vamos a arreglarlo un poco. Para empezar vamos a darle una altura concreta a la capa cabecera, por ejemplo de 85 pixeles (un poquito más que la altura del logotipo que es 80px). Así la capa gris que vemos que se mete dentro del espacio de publicidad respetará esa dimensión. Así que dejamos cabecera así:

#cabecera {background-color:white; border-left:black 1px solid;
border-right:black 1px solid; height:85px;}

Con esto la cosa se arregla bastante. Ahora solo queda bajar un poco el texto de Bienvenida y quizás hacer el tamaño de letra algo mayor (esto del tamaño de letra lo vemos luego). Modificamos en la hoja de estilos la capa publicidad para dejarla así:

#publicidad {background-color:pink; width:518px; float:right; margin-top:25px;}

Ahora, si guardas la hoja de estilo y haces vista previa sí que se ve realmente bien. Ya pudes eliminarle los background-color a las capas logotipo y publicidad, pues ya no necesitamos esos colores para saber dónde acaba cada una. Tras eliminar eso vuelve a guardar la hoja de estilo. Esto ya pinta mejor, no?

Solo nos queda ponerle el enlace hacia la página principal. Eso lo vimos ya, así que pongo directamente la línea, vale? Abres la plantilla.html y a esta línea:

<div id="logotipo">
<img src="objetos/logotipo.gif" width="270px" height="80px"
alt="Haz clic aquí para volver a la página de inicio">
</div>

le añades esto que marco en negrita:

<div id="logotipo">
<a href="index.html">
<img src="objetos/logotipo.gif" width="270px" height="80px"
alt="Haz clic aquí para volver a la página de inicio">
</a>
</div>

Listo, haz vista previa y verifica que todo va bien. Ahora no solo tenemos el banner, sino que tenemos preparado un hueco para poder poner un fondo que mejore el aspecto o publicidad, si lo deseamos. Para cualquiera de esas dos cosas, habría que retocar algo, como por ejemplo eliminar el margin-top:25px de la capa publicidad en la Hoja de Estilos, pero es algo que veremos en su momento. Si ves que se me olvida me lo recuerdas en el Foro CCTW!