Enlaces
Profesor: Javier López
Volver
Enlaces (de texto)
Imágenes como enlaces
Enlaces (internos) dentro de un mismo html
CSS exclusivo para enlaces

Enlaces (de texto)
Podemos encontrar 5 tipos de enlaces:
  1. A páginas HTML hechas por nosotros.
  2. A páginas HTML de terceros.
  3. A un correo electrónico.
  4. A ficheros pdf, jpg, gif, png, svg, swf.
  5. A ficheros para ser descargados (zip).

En todos los casos utilizamos la misma etiqueta <a href..> y </a>:
<a href="fichero_a_abrir.html">Enlace</a>
Donde "Enlace" sería el texto donde el usuario tendría que hacer clic para abrir el fichero indicado (en color rojo).
1. Enlazar con páginas HTML hechas por nosotros:
Como normalmente ubicaremos los distintos ficheros HTML en la misma carpeta, para enlazar un HTML con otro únicamente hay que especificar el archivo HTML al que se desea enlazar (sin olvidar de indicar el formato .html).

En el siguiente ejemplo se crea un enlace, que será "Galería de Imágenes", y que comunicará con el archivo galeria.html (ubicados ambos en la misma carpeta):

<a href="galeria.html">Galería de Imágenes</a>
2. Enlazar con páginas HTML de terceros:
Para enlazar con páginas web realizadas por otras personas (sin perder o cerrar nuestra página del navegador cuando el usuario pulse sobre el enlace), tendremos que abrir la página correspondiente en una ventana nueva del navegador utilizando el parámetro target="_blank" y especificando la dirección completa de la web, que tiene que empezar con "http://".
<a href="http://www.edutopia.es/galeria.html" target="_blank">Galería de Imágenes</a>
3. Enlazar con un correo electrónico
Aunque el mejor método para poder enviar un correo electrónico es a través de un formulario y utilizando un pequeño código de PHP, para salir del paso podemos utilizar el prefijo "mailto:".
<a href="mailto:jab@jabmultimedia.com">Enviar mail</a>
El problema de este código es que al hacer clic sobre dicho enlace se abrirá el programa predeterminado de correo electrónico que esté instalado en el ordenador utilizado, con el correo electrónico de destino ya rellenado para que el usuario envie el mail desde este programa de correo. Esto quiere decir que si no existe ningún programa de correo configurado (como es el caso de un cibercafé, biblioteca o del aula de informática de cualquier centro educativo) no será posible enviar ningún mail.
4. Enlazar con ficheros pdf, jpg, gif, png, svg o swf
El navegador puede abrir un gran número de ficheros. Así, si enlazamos con un fichero pdf, una imagen u algunos formatos de archivos determinados, el navegador los podrá mostrar sin ningún problema.

Si dicho archivo está en la misma carpeta que el archivo HTML se indicará el archivo sin más, mientras que si está en Internet habrá que especificar la ruta "http://".

<a href="carpeta/informe.pdf" target="_blank">Ver informe</a>
5. Enlazar con ficheros zip para ser descargados
Para permitir que los usuarios se puedan descargar los ficheros que creamos convenientes, es suficiente con comprimir todos los ficheros en un archivo comprimido (zip o rar), colgarlo en nuestro servidor y enlazar directamente con dicho fichero.
<a href="carpeta/trabajos.zip">Descargar los trabajos</a>
Con este cógido el navegador se descargará el archivo especificado y lo guardará en la carpeta de descargas.

Imágenes como enlace
Para que una imagen funcione como un enlace es suficiente sustituir el texto del enlace por la etiqueta <img>, utilizada para la carga de imágenes.
<a href="galeria.html">
    <img src="carpeta/imagen.png">
</a>


Enlaces dentro de un mismo HTML
Es posible realizar un enlace que comunique con una parte en concreto de un HTML (ya sea del mismo documento o bien de otro), como son los enlaces que te llevan al principio de la página.

Para ello hay que especificar a qué parte del documento HTML se desea acceder, especificando el nombre id de un elemento ubicado en dicho lugar. Este elemento es el nombre id de un elemento (#nombre_de_id) que esté colocado en el lugar de la web a la que se desea acceder.

Por ejemplo si queremos crear un enlace que comunique con el inicio del documento donde existe un <div> que tiene un id llamado "inicio" utilizaríamos el siguiente código:

Enlace dentro del mismo documento:

<a href="#inicio">Enlace</a>
Enlace al mismo punto, pero desde fuera del mismo documento (desde otro documento html):
<a href="galeria.html#inicio">Enlace</a>

CSS exclusivo para enlaces
Si queremos tener el siguiente enlace de color naranja:
<nav id="enlaces">
   <a href="galeria.html">Ir a Galería</a>
</nav>
El siguiente CSS es totalmente erróneo:
#enlaces{
   color:orange;
}
Ya que el selector '#enlaces{' cambia a color naranja todos los textos que haya dentro de la caja <nav> llamada "enlaces", pero como el enlace "Ir a galería" no es un texto, sino que es un enlace lo que tenemos que cambiar es el selector CSS por el siguiente:
#enlaces a{
   color:orange;
}
O, si queremos que este color se aplique a todos los enlaces de la página podemos generalizar, sin indicar la caja donde se encuentra el enlace:
a{
   color:orange;
}
Si además queremos que el enlace NO esté subrayado utilizaremos la etiqueta text-decoration, que también se tiene que aplicar al enlace (a) y no a la caja donde esté el enlace:
a{
   text-decoration:none;
   color:orange;
}
Para que al pasar por encima del enlace éste se coloree de color rojo utilizemos el evento :hover;
a:hover{
   color:red;
}

Por último, si queremos que:
  1. Un enlace no funcione como enlace en un html en concreto (ya que ya estamos en esta misma página de destino del enlace) y por lo tanto al pulsar sobre el enlace se recargaría la misma página en la que ya estamos.
  2. Que dicho enlace en concreto tenga un aspecto diferente al resto de enlaces para informar al usuario del apartado en el que encuentra en este momento.
  3. Que cuando el usuario pase con el cursor por encima éste no cambie y continue siendo el de la flecha negra.
Tendremos que utilizar dos selectores CSS, uno para el aspecto de inicio y el otro para indicar las características para cuando el cursor pase por encima.
<nav>
    <div id="enlace1" class="enlaces">
       <a>Ir a Galería</a>
    </div>
</nav>
Eliminando el href el enlace no funciona como enlace (no enlaza con nada), pero sigue cambiando de color al colocar el cursor encima y además el cursor que aparece al colocar el mouse encima es muy poco apropiado (el de selección de texto).

Ejemplo (coloca el cursor encima del siguiente enlace para ver el cursor que aparece): Ir a galería

Así, para especificar el color de inicio del enlace utilizamos el selector #enlace1 a, mientras que dentro de #enlace1 a:hover especificamos el cursor (el habitual) que aparecerá al colocar el mouse encima.
#enlace1 a{
    color:chocolate;
    font-size:20px;	
}

#enlace1 a:hover{
    cursor:default;
}
Ejemplo: Ir a galería