Tu web de informática

atras

1.8 Definiendo los enlaces

adelante

Códigos de los enlaces en html

Ahora vamos a hacer que las palabras que pusimos en el menú navegación sean enlaces, es decir, que al dar clic sobre ellas nos manden a otra página. Esta página puede ser otra página de nuestra web o una web externa.

Pues bien, para poner un enlace usamos el código <a href="rutadelarchivo.html"> para abrirlo y </a> para cerrarlo, poniendo donde pone rutadelarchivo.html la ruta de archivo al que enlazamos, ya sea un archivo interior de nuestra web o si es una web externa poniéndola con el http:// incluido.

Pues dicho esto vamos a hacer que la palabrá índice de nuestra web apunte al archivo index.html (apunta a la misma, sí, jeje). Las otras tres palabras por ahora no pueden apuntar a nada, porque no tenemos creadas las secciones, pero nosotros queremos que sean enlaces. En estos casos se hace que apunten a #, que hace que sean enlaces pero al dar clic sobre ellos no envíen a ningún sitio. De esta forma el menú navegación nos queda así:

<div id="navegacion">
<table width="100%" border="0">
<tr>
<td width="25%" align="center"><a href="index.html">Índice</a></td>
<td width="25%" align="center"><a href="#">Sección 1</a></td>
<td width="25%" align="center"><a href="#">Sección 2</a></td>
<td width="25%" align="center"><a href="#">Sección 3</a></td>
</tr>
</table>
</div>

Si nos fijamos ahora en la página veremos que ya son enlaces, pero aún no tienen el color que queremos. Para el caso de que queramos de que el enlace en vez de abrir la página en el mismo sitio la abra en una ventana aparte sólo tenemos que meter el código target="_blank" en la etiqueta del enlace, por ejemplo así: ;<a href="#" target="_blank">.

Definiendo los estilos de los enlaces

Ahora tenemos que definir los enlaces en la hoja de estilos, tenemos que definir los "a". Sin embargo no podemos hacer que ese estilo afecte a todos los enlaces, sino sólo a los enlaces de la capa navegación. Esto se hace añadiendo la siguiente línea a la hoja de estilos:

#navegacion a {}

Si os fijais lo que hacemos es definir de nuevo la capa navegación pero poniéndole después la letra "a", es decir, indicándole que sólo afecte a los "a".

Ahora vamos a hacer que nuestros enlaces tengan el color #CCCCCC, pero no sólo tenemos que hacer eso. También tenemos que hacer que no estén subrayados, ya que los enlaces vienen subrayados por defecto. Para que no estén subrayados ponemos de estilo el siguiente código: "text-decoration: none" (si lo que queremos es que estén subrayados lo que hacemos es poner el código "text-decoration: underline"). Además vamos a hacer que los enlaces tenga un margen de 1 pixel, para que no se peguen a los bordes de la tabla, y también vamos a hacer que estén en negrita, lo que se hace añadiendo el código "font-weight: bold". Por último, si os fijais en nuestro objetivo, al poner el ratón encima del enlace sale un color de fondo que ocupa toda la celda, para hacer que ocupe toda la celda lo que hacemos es añadirle el código "display: block". De esta forma habremos definido el enlace de la siguiente forma:

#navegacion a {color: #CCCCCC; display:block; text-decoration:none; margin: 1px; font-weight: bold}

Pero aún no hemos acabado de definir los enlaces. Para el caso de los enlaces no solo definimos "a", sino que definimos cuatro cosas más:

  1. "a:link", que es lo mismo que "a".
  2. "a:hover", que es el estilo del enlace para cuando tenemos el ratón situado encima.
  3. "a:active", que es para cuando tenemos el ratón pulsado en el enlace.
  4. "a:visited", que es para cuando el enlace ya lo hemos visitado alguna vez.

De esta forma vamos a hacer que mientras tengamos el ratón encima del enlace éste tenga un color #FFFFFF y un color de fondo #000000, y que mientras tengamos el clic pulsado tenga un color #99FFFF, por lo que nos quedará así:

#navegacion a {color: #CCCCCC; display:block; text-decoration:none; margin: 1px; font-weight: bold}
#navegacion a:link {}
#navegacion a:hover {color: #FFFFFF; background-color:#000000}
#navegacion a:active {color: #99FFFF}
#navegacion a:visited {}

De esta forma nuestra hoja de estilos al completo nos debe de quedar de la siguiente forma:

body {background-image: url(imagenes/fondo.jpg); text-align: center}

#fondo {background-color:#FFFFFF; width: 820px; margin: 4px auto; padding: 6px 0px; text-align: center}

#global {margin: 0px auto; width: 800px}

#cabecera {background-image:url(imagenes/degradado1.jpg); height: 120px; margin: 0px 0px 4px 0px}

#logotipo {float:left; padding:13px 0px 13px 10px}
#banner {float:right}

#navegacion {margin: 0px 0px 4px 0px; background-color: #000066}

#navegacion a {color: #CCCCCC; display:block; text-decoration:none; margin: 1px; font-weight:bold}
#navegacion a:link {}
#navegacion a:hover {color: #FFFFFF; background-color:#000000}
#navegacion a:active {color: #99FFFF}
#navegacion a:visited {}

Y nuestra página html se tiene que ver así. Si tienes alguna duda te recuero que tienes el foro a tu disposición (que pesao soy, jeje).

atras
adelante

Volver a crear webs>>


Creada el 03/05/08 15:00
Copyright © - Todos los derechos reservados - Página creada por Juanma