Pasos para crear la cabecera de una pagina web HTML

Una de las cosas muy útiles que se han puesto de moda, es hacer que la cabecera de una web sea a su vez un enlace hacia la sección principal de una web. El hecho de que si nos perdemos tengamos un enlace bien gordo arriba del todo, es un salvavidas.

Código XHTML

Los estándares nos dicen que el título principal de la página se pone con la etiqueta <h1>. No obstante, el texto de esta etiqueta lo cambiaremos por una imagen. Como queremos además meterle un link, también usaremos la etiqueta <a>. Dentro del link, metemos una etiqueta <span> para poder ocultar con CSS el texto y que sólo se vea la imagen que hará de cabecera. . . pero nos estamos adelantando. El código XHTML sería este:

<div id=" header ">
 <h1><a href ="..." title ="...">
 <span>Título</span></a></h1>
</div>

#header

Primero tocaremos el CSS de la capa #header. Establecemos el ancho y el alto de la capa con las medidas que tenga la imagen(400x100 en este caso). Además, ponemos la imagen de fondo y quitamos el margin y el padding:

#header {
    background: url(bg.png) top left no-repeat;
    width: 400px;
    height: 100px;
    margin: 0px;
    padding: 0px;
}

El heading

También quitamos los márgenes a la etiqueta <h1> (para que la capa mida exactamente lo que la imagen) y hacemos invisible el contenido de la etiqueta <span>, para que el texto de la cabecera sólo se muestre en navegadores de texto o aurales:

#header h1 {
 margin: 0px;
}

#header a span {
 visibility: hidden;
}

El enlace

Ahora sólo nos falta la etiqueta <a>. Lo que queremos conseguir es que se pueda hacer clic entodo el área de la cabecera, no sólo en lo que sería el texto (invisible) del enlace. Para eso, tenemos que transformar el enlace en un elemento de bloque, y darle las medidas de la imagen.

Además, hemos de quitar los márgenes y el padding, así como la decoración del texto, para que no salga una línea de subrayado:

#header a {
    width: 400px;
    height: 100px;
    display: block;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
}

Ya tenemos nuestra cabecera cuca con enlace incorporado.