Los hipervínculos o enlaces son, probablemente, lo más característico de las páginas web.
Desde cualquier elemento de una página, podemos establecer un vínculo a cualquier otro elemento de nuestro mismo sitio o de otro.
La sintaxis inicial es muy sencilla.
Escribimos la etiqueta <a> con el atributo href (del inglés Hipertext Reference) que describe la URL (del inglés Uniform Resource Locator, Localizador Uniforme de Recursos) el localizador del sitio al que queremos apuntar el enlace.
Por ejemplo, vamos a crear un vínculo a la página web inicial del W3 School que es un excelente lugar en el que aprender lenguaje HTML, CSS, Javascript... La URL del sitio es https://www.w3schools.com Luego, tendré que escribir:
<a> href="https://www.w3schools.com">Visita W3 School</a>
Que dará como resultado:
En un ordenador, al pasar el puntero del ratón por encima de un enlace, la flechita del puntero se transforma en el icono de una mano indicando que ese texto o imagen es un hipervínculo.
Si pulsamos sobre un vínculo con esa sintaxis, la página nueva se cargará en el mismo espacio en el que nos encontremos al pulsar el enlace.
Muchas veces, sobre todo si el sitio vinculado es ajeno a nuestra web, nos interesará que el vínculo se cargue en pestaña o ventana nueva. De esta manera el usuario no abandona el sitio desde el que ha pulsado el enlace.
Esto se consigue con el atributo target y, para que se cargue en otra pestaña del navegador le indicamos target="_blank"
Lo probamos en el vínculo anterior:
<a> href="https://www.w3schools.com" target="_blank">Visita W3 School</a>
Dará como resultado:
El atributo title crea una ventanita emergente con información adicional cuando el cursor se encuentra encima del enlace (tooltip). Puede ser muy interesante pero hay que tener en cuenta que en las pantallas táctiles esta información no va a aparecer.
Por ejemplo:
<a> href="https://www.w3schools.com" target="_blank" title="El mejor sitio para aprender">Visita W3 School</a>
Dará como resultado:
Para establecer un vínculo podemos usar rutas absolutas o relativas
Cuando el sitio vinculado es ajeno, no tenemos más remedio que usar rutas absolutas.
Son las rutas con la dirección URL completa.
Es la URL que empieza por el protocolo https:// (a veces por el protocolo http://).
En el caso anterior, https://www.w3schools.com
Cuando el sitio es nuestro podríamos emplear las rutas absolutas o las relativas.
Por ejemplo, hago un hipervínculo a una página web de este sitio empleando una URL absoluta:
Resumen de contenidosHe escrito el siguiente código:
<a href="https://angelpuente.es/html5css3/contenidos.html" target="_blank">Resumen de contenidos</a>
Pero también habría podido hacer un vínculo empleando una ruta relativa.
Es decir, considerando la posición de la página en la que se hace el vínculo respecto del sitio en el que se aloja el destino del vínculo.
En este caso, como la página html en la que estoy escribiendo, está en la misma carpeta y nivel que la página de destino, escribiría:
<a href="contenidos.html" target="_blank">Resumen de contenidos</a>
Este es el resultado del vínculo. Comprueba que funciona correctamente igual que en el caso anterior, de la ruta absoluta:
Resumen de contenidosEs muy importante emplear URLs relativas siempre que sea posible
Los posibles casos son:
1.- Los dos ficheros se encuentran en el mismo nivel.
Es el caso explicado. No hay más que escribir el nombre del fichero de destino con su extensión correspondiente.
2.- El fichero destino se encuentra dentro de una carpeta que se encuentra en el mismo nivel que el documento desde el que se declara el vínculo.
Por ejemplo, en la carpeta en la que se encuentra esta página, hay una carpeta interna denominada imag que tiene una imagen que se denomina estructura.png
Escribiríamos:
<a href="imag/estructuraweb.png" target="_blank">Mapa inicial del sitio</a>
3.- El fichero destino se encuentra en una carpeta que está al mismo nivel que otra carpeta en la que se encuentra el fichero de la página desde la que hacemos el vínculo.
En este caso la URL relativa consiste en emplear la sintaxis ../ que lo que hace es situarse en un nivel superior y luego ya nombrar la carpeta y el fichero con su extensión.
Para poner un ejemplo, vamos a colocar en este espacio con un iframe (el elemento <iframe> lo veremos más adelante) una página de prueba con el único contenido de un vínculo a un documento que se encuentra en una carpeta paralela.
<a href="../archivos/miestilo.pdf">Documento en pdf del estilo CSS</a>
Resultado:
Podemos emplear el código ../ más veces seguidas si fuera necesario.
Ejemplo: <a href="../../carpeta1/index.html">
<button onclick="document.location='index.html'">Curso HTML 5 y CSS 3</button>
Por defecto los hipervínculos muestran un estilo que, lógicamente con CSS, podemos cambiar.
Los estilos predeterminados son:
Vamos a dar formato a modo de ejemplo para observar cómo pueden ser cambiados estos estilos iniciales
Convertiremos el siguiente vínculo en un botón con una cierto espacio alrededor y con colores y estilos modificados.
Este es el estilo introducido en el head del documento:
<style> a.estilo:link { background-color: #f44336; color: #ddd; padding: 15px 25px; text-align: center; text-decoration: none; display: inline-block; } a.estilo:hover { background-color: firebrick; font-weight: bold; color:white; text-decoration:underline; } </style>
Primero en el HTML, hemos declarado una class en el elemento <a> que hemos querido que fuera afectado por este CSS. A la class la hemos llamado estilo.
<a class="estilo" href="https://es.wikipedia.org" target="iframe_a">La Wikipedia</a>
Observa que los demás vínculos de esta página no se ven alterados.
Así hemos declarado el a.estilo con el link inicialmente con un color de fondo #f44336.
El color del texto lo hemos puesto a un gris #ddd
En el padding (separación del texto de los bordes, hemos puesto 15 px para arriba y abajo y 25 px para la derecha e izquierda. Cuando se escriben dos valores, el primero indica el espacio de arriba y abajo y el segundo valor el de la derecha e izquierda).
Hemos centrado el texto.
Hemos quitado el subrayado que viene por defecto con el tex-decoration:none
Y hemos establecido el display en inline-block esto permite que el elemento adquiera una medida condicionada por la longitud del texto y los paddings establecidos.
En cuanto al hover (cuando se coloca el cursor del ratón sobre el enlace), hemos cambiado el color de fondo a firebrick
El texto hemos querido que se mostrase en negrita
El color del texto en blanco.
Y que se subrayase.
Finalmente, hemos hecho que se cargue el enlace en el iframe colocado debajo del enlace, para no abandonar la página. Esto del iframe lo veremos más adelante.
Si nuestra página es muy larga, puede ser interesante movernos en vertical desde un punto a otro para agilizar la lectura.
Esto se consigue con los marcadores o enlaces locales.
Primero tenemos que marcar los puntos del documento a los que queremos dirigirnos.
Actualmente se hace con el atributo id (identificador) que es un atributo de carácter único para cada elemento de la página. No puede haber dos elementos en una misma página con el mismo id.
Una vez marcados los puntos, establecemos el vínculo con la sintaxis <a href=#id>Vínculo</a>
Por ejemplo, el primer apartado de este documento, esta página 9, lo he marcado con el id="pagina91"
Hago un hiperenlace a este punto:
Este es el código que he escrito:
<a href="#pagina91">Hipervínculos</a>
También puedo aprovechar este sistema para hacer vínculos a puntos concretos de otras páginas. Es lo que estoy haciendo desde la página de contenidos de este sitio. Cada apartado dirige al punto de cada una de las páginas donde se explica ese tema.
Por ejemplo, hago un hipervículo al apartado Código hexadecimal reducido que está en la página 5 y marcado con el id=pagina52
Este es el código que he escrito:
<a href="pagina5.html#pagina52">Código hexadecimal reducido</a>
Acabamos este documento con la sintaxis para crear un vínculo a partir de una imagen.
La idea es que el texto del enlace debe ser sustituido por la imagen.
Por ejemplo:
Este es el código que he escrito:
<a href="https://www.w3schools.com/colors/colors_picker.asp" target="_blank"> <img src="imag/colorpicker.png" width="80" height="68" alt="Icono del ColorPicker de w3schools" title="Ir al Color Picker de w3schools"></a>