Enlaces o Hipervinculos en HTML
Enlaces o Hipervínculos en HTML.
Una página Web es un archivo HTML en el que podemos incluir, entre otras cosas, textos formateados a nuestro gusto e imágenes (las veremos enseguida). Del mismo modo, un Sitio Web podrá ser considerado como el conjunto de archivos, principalmente páginas HTML e imágenes, que constituyen el contenido al que el navegante tiene acceso.
Sin embargo, no podríamos hablar de navegante o de navegación si estos archivos HTML no estuviesen debidamente conectados entre ellos y con el exterior de nuestro sitio por medio de enlaces hipertexto. En efecto, el atractivo original del HTLM radica en la posible puesta en relación de los contenidos de los archivos introduciendo referencias bajo forma de enlaces que permitan un acceso rápido a la información deseada. De poco serviría en la red tener páginas aisladas a las que la gente no puede acceder y desde las que la gente no puede saltar a otras.
Un enlace puede ser fácilmente detectado en una página. Basta con deslizar el puntero del ratón sobre las imágenes o el texto y ver como cambia de su forma original transformándose por regla general en una mano con un dedo señalador. Adicionalmente, estos enlaces suelen ir, en el caso de los textos, coloreados y subrayados para que el usuario no tenga dificultad en reconocerlos. Si no especificamos lo contrario (ya tendremos ocasión de explicar como), estos enlaces texto estarán subrayados y coloreados en azul. En el caso de las imágenes que sirvan de enlace, veremos que están delimitadas por un marco azul por defecto.
Etiqueta para Hipervínculos
Para colocar un enlace, nos serviremos de las etiquetas <a> y </a>. Dentro de la etiqueta de apertura deberemos especificar asimismo el destino del enlace. Este destino será introducido bajo forma de atributo, el cual lleva por nombre href.
La sintaxis general de un enlace es por tanto de la forma:
<a href="destino">contenido</a>
Siendo el contenido un texto o una imagen. Es la parte de la página que se colocará activa y donde deberemos pulsar para acceder al enlace.
Por su parte, destino será una página, un correo electrónico o un archivo.
Tipos de Enlaces.
1. Enlaces Internos.
Son los enlaces que apuntan a un lugar diferente dentro de la misma página. Este tipo de enlaces son esencialmente utilizados en páginas donde el acceso a los contenidos puede verse dificultado debido al gran tamaño de la misma. Mediante estos enlaces podemos ofrecer al visitante la posibilidad de acceder rápidamente al principio o final de la página o bien a diferentes párrafos o secciones.
Para crear un enlace de este tipo es necesario, aparte del enlace de origen propiamente dicho, un segundo enlace que será colocado en el destino.
Nota.
Supongamos que queremos crear un enlace que apunte al final de la página. Lo primero será colocar nuestro enlace origen. Lo pondremos aquí mismo y lo escribiremos del siguiente modo:
<a href="#abajo">Ir abajo</a>
Nota.
1. El contenido del enlace es el texto "Ir abajo" y el destino, abajo, es un punto de la misma página.
2. El símbolo #; es él quien especifica al navegador que el enlace apunta a una sección en particular.
3. Hay que generar un enlace en el destino. Este enlace llevara por nombre abajo para poder distinguirlo de los otros posibles enlaces realizados dentro de la misma página. En este caso, la etiqueta que escribiremos será ésta:
<a name="abajo"></a>
2. Enlaces Locales (Hipervínculo a otra página del mismo sitio).
Son los que se dirigen a otras páginas del mismo Sitio Web.
Para crear este tipo de enlaces, hemos de crear una etiqueta de la siguiente forma:
<a href="archivo.html">contenido</a>
Ejemplo:
a) Implementemos dos páginas que contengan hipervínculos entre si, los nombres de las páginas HTML serán: pagina1.html y pagina2.html.
pagina1.html
<html>
<head>
</head>
<body>
<h1>Página principal.</h1>
<a href="pagina2.html">Noticias</a>
</body>
</html>
pagina2.html
<html>
<head>
</head>
<body>
<h1>Noticias.</h1>
<a href="pagina1.html">Salir.</a>
</body>
</html>
Nota.
1. Los enlaces locales pueden a su vez apuntar ya no a la página en general sino más precisamente a una sección concreta. Este tipo de enlaces resultan ser un híbrido de interno y local. La sintaxis es de este tipo:
<a href="archivo.html#seccion">contenido</a>
Como para los enlaces internos, en este caso se debe marcar la sección con otro enlace del tipo:
<a name="seccion"></a>
3. Enlaces Remotos.
Son los enlaces que se dirigen hacia páginas que se encuentran fuera de nuestro Sitio Web, es decir, cualquier otro documento que no forma parte de nuestro sitio.
Este tipo de enlaces es muy común y no representa ninguna dificultad. Simplemente colocamos en el atributo HREF de nuestra etiqueta <A> la URL o dirección de la página con la que queremos enlazar. Será algo parecido a esto.
La sintaxis para disponer un hipervínculo a otro sitio de Internet es:
<a href="http://www.google.com">Buscador Google</a>
Nota.
1. Todas las Direcciones Web (URLs) empiezan por http://. Esto indica que el protocolo por el que se accede es HTTP, el utilizado en la Web. No debemos olvidarnos de colocarlas, porque si no los enlaces serán tratados como enlaces locales a nuestro sitio.
2. No tenemos que enlazar con una página web con el protocolo HTTP necesariamente. También podemos acceder a recursos a través de otros protocolos como el FTP. En tal caso, las direcciones de los recursos no comenzarán por http:// sino por ftp://.
Ejemplo.
Desarrollar una página que muestre un hipervínculo al sitio principal del buscador Google:
<html>
<head>
</head>
<body>
<a href="http://www.google.com">Buscador Google</a>
</body>
</html>
4. Enlaces con Imágenes.
Los hipervínculos y como insertar imágenes en nuestra página, ahora podemos implementar un hipervínculo pero en vez de mostrar un texto mostraremos una imagen.
La solución es simple y consiste en disponer la marca <img> encerrada entre la marca de comienzo y fin del enlace (<a>).
Ejemplo.
1. Confeccionar una página que muestre dos imágenes (foto1.jpg y foto2.jpg) como hipervínculos. Al ser presionados llamar a otra página.
Las imágenes se encuentran en una carpeta llamada imágenes que depende directamente de la raíz del sitio:
<html>
<head>
</head>
<body>
<h2>Presione alguna de las imagenes para conocer más sobre esa obra.</h2>
<a href="pagina2.html"><img src="/imagenes/foto1.jpg"
alt="Pintura Geométrica"></a>
<br>
<a href="pagina2.html"><img src="/imagenes/foto2.jpg"
alt="Pintura Geométrica"></a>
</body>
</html>
Nota.
1. Como podemos observar se inserto la marca HTML img en el lugar donde disponíamos el texto del hipervínculo.
2. Las imágenes se encuentran en un directorio llamado imágenes en la raiz del sitio (luego para indicar la referencia al archivo lo hacemos antecediendo la barra invertida / con lo que hacemos referencia a que partimos desde la raíz del sitio) en una carpeta llamada imágenes (/imagenes/foto1.jpg).
5. Enlaces a Direcciones de Correo.
El elemento "a" permite direccionar un hipervínculo a un programa de envío de correos que tengamos configurado en nuestra computadora.