CURSO DE HTML 4.01
Elementos de HTML 4.01, etiquetas, atributos. Base del actual HTML5.
9. Enlaces
9.1 Enlaces de texto
Los enlaces o links o hipervínculos dan interactividad a las páginas web. La etiqueta es <A> y su código es el siguiente:
<a href="http://www.internetparavos.com.ar">Texto del enlace</a>Donde lo que está entre comillas es el destino o ruta del enlace, que puede ser de tres tipos: dentro de la página (ancla), hacia otra página del mismo sitio (expresado en rutas relativas o absolutas), externo o a una página en otro lugar (ruta absoluta).
Esta etiqueta tiene apertura y cierre.
Colores por defecto y cómo cambiarlos
Los colores predeterminados son: azul para los vínculos, rojo para los vínculos activos (cuando se hace clic en él, dura fragmentos de segundos), y púrpura o violeta para los vínculos visitados.
Podemos definir nuestros propios colores en la etiqueta BODY mediante los atributos link (enlace), alink (vínculo activo) y vlink (vínculo visitado) respectivamente.
<body link="orange" vlink="yellow">Target o destino
La etiqueta <A> tiene un atributo denominado target (objetivo), que determina dónde se abrirá la página del enlace. Por defecto las páginas enlazadas se cargan en la misma ventana de navegador. Los valores de target pueden ser:
target="_self" (por defecto, en la misma ventana)
target="_blank" (en ventana aparte, se abre otra ventana de navegador con la página del enlace)
target="_top",
target="_parent", y
nombre_del_frame;
estos tres últimos se utilizan con los marcos, que veremos en el Módulo 11.
Ejemplo: si queremos que el enlace de arriba se abra en otra ventana, la instrucción será:
<a href="http://www.internetparavos.com.ar" target="_blank">Texto del enlace</a>9.2 Enlaces de imagen
Las imágenes también pueden ser hipervínculos. De hecho, las botoneras que vemos en muchos sitios son imágenes enlazadas con las páginas que componen el sitio.
El código para colocar una imagen como enlace es el siguiente:
<a href="http://www.internetparavos.com.ar><img src="link.jpg" width="150" height="114"></a>Podemos observar que la etiqueta <a></a> está por afuera de la etiqueta <img> para decirle al navegador que lo que abarca es un enlace.
Lo que vimos en el Módulo 7 respecto a las rutas relativas y absolutas para imágenes es válido también para las rutas de los enlaces. Podemos utilizar una ruta absoluta como en el ejemplo de arriba o una ruta relativa hacia un archivo en la misma carpeta u otra en el mismo directorio o servidor.
Esta etiqueta tiene un atributo llamado border que en la actualidad es cero por defecto y, aunque está en desuso, la mayoría de los navegadores lo reconocen.
En los siguientes ejemplos veremos la diferencia entre el enlace con la imagen por defecto y con un borde de 2 píxeles. El color del borde es el asignado para vínculos.
<a href="http://www.internetparavos.com.ar" target="_blank"><img src="img/modulo8_imagenes_tipos1.jpg" width="150" height="112" alt="Imagen para enlazar" /></a>
<a href="http://www.internetparavos.com.ar" target="_blank"><img src="img/modulo8_imagenes_tipos1.jpg" width="150" height="112" alt="Imagen para enlazar con borde" border="2"/></a>Para hacer una botonera, primero debemos hacer los botones con un editor de fotos y luego armarla con tablas (o sin ellas). Veamos un ejemplo sencillo:
<p><a href="inicio.htm"><img src="img/boton1.jpg" width="99" height="29" alt="Inicio"></a></p>
<p><a href="seccion1.htm"><img src="img/boton2.jpg" width="99" height="29" alt="Sección 1"></a></p>
<p><a href="seccion2.htm"><img src="img/boton3.jpg" width="99" height="29" alt="Sección 2"></a></p>
<p><a href="seccion3.htm"><img src="img/boton4.jpg" width="99" height="29" alt="Sección 3"></a></p>Atributo title
Similar al empleo del atributo alt en imágenes, en la etiqueta A tenemos el atributo title para agregar una descripción al enlace. Se recomienda aportar algo más acerca del enlace, especialmente a los efectos de los lectores de pantalla en sitios accesibles.
<p><a href="inicio.htm" title="Internet para vos - Desarrollo web"><img src="img/boton1.jpg" width="99" height="29" alt="Inicio"></a></p>9.3 Enlaces especiales: ancla, e-mail
Anclas
Un ancla es un marcador que se coloca en un lugar de la página, al que queremos acceder mediante un enlace, ya sea en la misma página o en otra. El funcionamiento es similar a los marcadores de Word. Para agregar un ancla, en la etiqueta <A> empleamos el atributo name y asignamos un nombre.
Generalmente se utilizan anclas en páginas con mucho texto, de gran extensión, para que la navegación sea más fácil.
Un ejemplo muy frecuente es el ancla para subir en páginas con mucho texto, de más de una pantalla. (Botón subir o ir arriba).
Empleo: inmediatamente luego de la etiqueta body, insertamos un ancla con nombre top:
<a name="top"></a>Cabe destacar que la etiqueta de enlace <a> puede ir sin contenido, sólo como ancla o marcador; o puede estar enmarcando un texto o una imagen. Si está vacía no ocupa lugar en la página web.
<a name="top"><img src="logo.jpg" width="100" height="50" border="0" alt="logo empresa"></a><h1><a name="top">CURSO HTML</a></h1>Y para enlazar con el ancla, desde una misma página, el código es el siguiente:
<a href="#top">Ir arriba</a>Colocamos el símbolo numeral adelante del nombre del ancla en el atributo href.
Si estamos en una página y queremos ir a un ancla determinada en otra página, la codificación es:
<a href="index.htm#top">Ir al inicio</a>Primero se escribe la ruta (absoluta o relativa) y a continuación, sin espacio, el símbolo numeral y el nombre del ancla.
Una desventaja del uso de anclas, es que funcionan únicamente cuando la página excede el largo de la ventana del navegador. Por ejemplo, si tenemos un ancla al último párrafo de una web y éste es menor que el alto de la ventana, no veremos el efecto del ancla (su funcionamiento).
Enlace a un e-mail
<a href="mailto:nombre@gmail.com">e-mail</a>En el atributo href, en vez de una dirección web, escribimos mailto: y a continuación el e-mail que deseamos que se abra. Al hacer clic el usuario, se abrirá con su programa de correo predeterminado.
También podemos enlazar una imagen:
<a href="mailto:nombre@gmail.com"><IMG src="email.gif" width="34" height="34" alt="envíenos un e-mail"></a>
Ejemplos editables
Material adicional
Actualización: enero, 2021. Elena Navntoft.