4. ENLACES/LINKS

Bueno hemos llegado a la parte esencial de las paginas web, he aquí donde radica gran parte de la utilidad de estas cosas, el manejo de los enlaces, también conocidos como links o hipervínculos. Veamos algunas definiciones.

 Definición
Link/URL: Son aquellos "elementos" que unen unas páginas con otras, o con archivos, estos elementos pueden ser texto, imágenes, aplicaciones de JavaScript, etc.

4.1 El Tag <a>

Para crear un link primero debes tener claro hacia que objeto quieres realizar el enlace, éste objeto puede ser otra página web, una url, un video, una canción, etc. Por ejemplo supon que dicho objeto se trate de una página llamada enlaces.html. Para que el enlace sea efectivo escribe:

<a href="enlaces.html"></a>

Al igual que en las imágenes el objeto linkeado deberá estar guardado en el mismo directorio, en caso contrario se deberá especificar en que directorio está ubicado o indicar la url del objeto, ambos casos se deben especificar en el href así como en las imagenes se especificaba en el src.

El texto o imagen que se encuentre entre <a> y </a> será sensible, es decir el cursor se convertirá en mano, esto quiere decir que si pulsas con el ratón sobre él, se realizará la función de enlace hacia el objeto. Si lo que está entre <a></a> es un texto, este aparecerá subrayado y en distinto color, y si es una imagen, esta aparecerá con un borde rodeándola (a menos que se quiera quitar).

Atención: No da lo mismo poner
<a href="Mipagina.html"></a> que <a href="mipagina.html"></a>.
El navegador hace diferencias entre minúsculas y mayúsculas.

4.2 Atributos de el Tag <a>

Atributo Función
target= _blank
_top
_self
Abre el enlace en una nueva ventana. Prueba
Abre el enlace a pantalla completa, quitando los frames. Prueba
Abre el enlace en al ventana actual. Prueba

El atributo "_top" tendrá más sentido en el capítulo de frames.

4.3 Enlaces Ocupando Texto.

En este caso pon un texto entre <a> y </a>, el texto es "aquí", y el enlace irá a la página de Aprende HTML, es decir a "https://www.mpmx.info", todo esto queda así:

Ejemplo Se vería como
<p>Pulse <a href="https://www.mpmx.info" target="_blank">aquí</a> para ir a la página de Aprende HTML</p> Pulse aquí para ir a la página de Aprende HTML

Si colocas el ratón encima de la frase y das click, el navegador accederá en una nueva ventana, a la página Web indicada por el parámetro href, es decir a la página https://www.mpmx.info

4.4 Enlaces Ocupando Imágenes.

Ahora usaremos la imagen "yahoo.gif", que está junto con esta página en un mismo directorio, para realizar un enlace a "https://shop.awiwi.mx", también se incluirá en el tag <a> el atributo "target=_blank", para que la página de yahoo se abrá en una nueva ventana. La imágen al ser puesta como link aparece un borde alrededor de ella, para quitar este borde sólo pon el atributo border=0 dentro de el tag <img>

Ejemplo Se vería como
<p>Para buscar en Internet:<br>
<a href="https://shop.awiwi.mx" target="_blank"><img src="yahoo.gif" alt="https://shop.awiwi.mx"></a></p>
Para buscar en Internet:
https://shop.awiwi.mx
sólo agrega a <img> border=0. Para buscar en Internet:
https://shop.awiwi.mx

Pulsando sobre la imagen se accedería a la pagina situada en https://shop.awiwi.mx

4.5 Anclaje

Un enlace también puede llevarte a una determinada zona de una página. Pero como todo enlace necesita un objeto al cual enlazar, en este caso el objeto lo haces tú. La idea es dejar en el código html diferentes marcas para que el navegador enlace un link con las marcas, que también reciben el nombre de anclas. Las anclas se crean con el parámetro name. Veamos un ejemplo.

<a name="seccion1"></a>

Lo que he hecho es crear el ancla con el nombre "sección1". Luego para hacer un enlace a esta ancla hacemos lo siguiente:

<a href="#seccion1">subtítulo 4.5</a>

También puedes hacer el enlace usando la url de la página, es decir:

<a href="https://www.mpmx.info/mipagina.html#seccion1">subtítulo 4.5</a>

En ambos caso el enlace es el siguiente: subtítulo 4.5

No hay restricción de cuantas anclas se puedan poner en una misma página web, sólo hay que tener cuidado de que todas tengan un diferente nombre.

4.6 Enlaces a un Mail

También se puede hacer que el enlace de como resultado el envío de un correo electrónico a un mail determinado. Por ejemplo quieres poner un enlace a mi e-mail, que es "contacto@mundopaul.com". El método es el siguiente

Ejemplo: Se vería como
<a href ="mailto:contacto@mundopaul.com">Mi e-mail</a> Mi e-mail

Los navegadores viejos no soportan esta última instrucción por lo que se recomienda poner:

Mi e-mail es: contacto@mundopaul.com

<p>Mi e-mail es: <a href ="mailto:contacto@mundopaul.com">contacto@mundopaul.com</a><p>

También puedes poner un subject ó asunto al e-mail que te van a mandar. Ejemplo: Mi e-mail

<a href ="mailto:contacto@mundopaul.com?subject=HTML">Mi e-mail</a>

4.7 Otros Enlaces

Con los tags anteriores has visto como hacer enlaces a páginas Web o secciones dentro de una página web, pero puedes hacer un enlace a un grupo de noticias o a otro servicio de Internet.

Ejemplo
<a href="http://news.google.com.mx">Noticias de actualidad</a>

También puedes realizar un enlace a un archivo cualquiera. En este caso el navegador intentará "ver" el archivo, y si no puede hacerlo te preguntará si deseas guardarlo en tu máquina.

Ejemplo: Se vería como
<a href="blockpaul.zip">Clickea para bajar el Block Paul.</a> Clickea para bajar el Block Paul.

4.8 Menú Horizontal

En esta sección no hay nada nuevo, sólo es un ejemplo de como poner varios links de forma ordenada:

<center><p><font size=1>
<b> | </b><a href="https://www.mundopaul.com" target="_blank">MundoPaul.CoM</a>
<b> | </b><a href="https://www.mundojuegos.info" target="_blank">MundoJuegos.INFO</a>
<b> | </b><a href="https://www.mpmx.info" target="_blank">HTML</a>
<b> | </b><a href="https://www.mpmx.info" target="_blank">Aprende HTML</a>
<b> | </b></font></p></center>

El resultado es el siguiente:

| MundoPaul.CoM | MundoJuegos.INFO | HTML | Aprende HTML |