Los vínculos o enlaces son la escencia de la Web, aquí aprenderemos algo relativo a los mismos.
El elemento que nos permite la creación de
vínculos o anclas es <a>. Este elemento
sirve para redirigirnos a otro recurso del Web, pero
también se puede convertir en el
destino de un vínculo
externo.
El ancla <a> es por defecto un elemento de
línea. Recordemos que los elementos de línea no
alteran el flujo del texto que se encuentra a su alrededor, a
diferencia de los elementos de bloque, que añaden un salto
de línea antes y al final de ellos mismos.
Veamos los diferentes usos que tiene el elemento
<a>:
La sintáxis es la siguiente:
<a href="http://www.google.com/">Ir a
Google</a>
El atributo href indica el destino del
vínculo. Pueden utilizarse direcciones absolutas (como en
el ejemplo), o bien direcciones relativas con respecto al
directorio en que se encuentra el documento. Y en general, puede
usarse cualquier URI válido. El
vínculo no solo permite crear un enlace hacia otra
página web. ¡Permite hacer un vínculo a cualquier
recurso imaginable! Entre estos se encuentran las referencias a
http, ftp, o
mailto, etc. Es posible crear un enlace a cualquier
tipo de archivo, no es indispensable que sean páginas web.
Pero la manera en que el navegador se comportara ante esos
archivos al activar el vínculo dependerá de su
configuración. Usualmente aparece un cuadro de
diálogo que pregunta al visitante qué desea hacer con dicho
recurso. Se debe tener presente que no se puede asegurar un mismo
comportamiento para todos los casos, ni para todos los navegadores.
Una ruta absoluta para un recurso web es del tipo:
http://www.dominio.com/carpeta/subcarpeta/documento.html.
En el cual indicamos el nombre del ordenador y la ruta dentro de ese
ordenador donde se encuentra el documento buscado.
Si nuestra página se encontrase en el directorio
carpeta en la máquina del
ejemplo de arriba, bastaría con utilizar una ruta relativa
para acceder a documento.html, que
seria: subcarpeta/documento.html.
También es posible hacer referencia a directorios
padre. Los dos puntos seguidos: .. hacen referencia
al directorio de nivel superior. Si desde la misma página
yo quisiera acceder al archivo
documento2.html ubicado en el
directorio raíz del dominio bastaría con escribir la ruta:
../documento2.html.
Estas reglas se aplican para cualquier elemento que haga uso de una dirección, no son exclusivas del elemento <a>.
Cualquier elemento de línea
puede estar contenido entre las etiquetas <a>
y </a>. Pero ninguno de
bloque.
La sintáxis es la siguiente:
<a id="midestino">Quiero ésto como
destino</a>
La posición en el documento que tenga un vínculo como el de arriba será el destino del ancla que lo mandó llamar. Dicha ancla deberá tener una sintaxis como la siguiente:
<a href="pagina.html#midestino">Ir al
destino</a>
El ejemplo valdrá si el ancla destino se encuentra en el archivo pagina.html. De hecho, ambos pueden estar en la misma página, permitiendonos dezplazarnos por ella de manera más eficiente.
Lo mejor es verlos en acción. Haz click en el
vínculo de abajo para verlo. No olvides revisar el
código fuente para ver como está construido todo.
Una manera de ver el código fuente es hacer click con el
botón secundario en la página y seleccionar Ver
código fuente
, o algún comando equivalente de tu navegador.
Haz click aquí para ver el ejemplo 3
Los atributos del elemento <a> son muchos.
Aquí solo los enumeraré y comentarémos algunos
de ellos más adelante:
Ancla <a>
charset: Indica la codificación de
caracteres del documento destino.coords: Permite especificar las coordenadas que
definirán una región para un mapa de imagen.href: Un URI que especifica el
destino del vínculo.hreflang: Indica la lengua base del documento
destino. Por ejemplo: esrel: Indica la relación del documento
destino respecto al documento actual. Valores posibles:
alternate, designates,
stylesheet, start, next,
prev, contents, index,
glossary, copyright,
chapter, section,
subsection, appendix,
help, bookmark.rev: Indica la relación del documento
actual respecto al documento destino. Valores posibles:
alternate, designates,
stylesheet, start, next,
prev, contents, index,
glossary, copyright,
chapter, section,
subsection, appendix,
help, bookmark.shape: Especifica el tipo de región a
emplear en un mapa de imágen. Valores posibles:
rect, rectangle, circ,
circle, poly,
polygon.type: Establece el MIME del
recurso destino.Los mapas de imágenes los abordaremos más adelante.