Los enlaces (hiperenlaces) o simplemente enlaces, son enlaces del documento que permiten que cuando se hace clic sobre ellos, se abra una nueva página, se abra un documento, o nos traslademos a otro punto de la página en la que nos encontramos.
Los enlaces o hiperenlaces son uno de los elementos esenciales de las páginas web, e inclusive de la propia web, ya que ésta consiste en una gran cantidad de páginas enlazadas entre sí. Los enlaces son de tres tipos diferentes:
Enlaces de referencia absoluta
Son aquellos que llevan a un sitio o un archivo especificando la ruta completa, como por ejemplo, http://www.unsitiocualquiera.com/sección/documento.html.
Enlaces de referencia relativa
Este tipo de enlaces solo puede ser empleado para enlazar páginas o documentos que se encuentran dentro del mismo sitio. Para ello utiliza la ruta relativa, es decir, marcando la ruta desde la página donde se encuentra el enlace. Utilizando el esquema anterior, si la página donde ubicamos el enlace se llama página.html y se encuentra en el mismo directorio que documento.html, el enlace solo debería decir “documento.html”.
En el caso de que la página a vincularse se encuentre en un directorio de un nivel superior, debe escribirse de la siguiente forma: “../documento.html”. Del mismo modo, si se encuentra en un directorio dos niveles por encima, se escribirá “../../documento.html”. En el caso de que su ubicación sea en un directorio de un nivel inferior, la ruta debe escribirse “directorio/documento.html”.
Puntos de fijación o anclajes
Es un tipo de enlace que conduce a un punto específico del documento actual o de un documento externo. El enlace se dirige a un punto que se establece anteriormente, llamado “anclaje”, que lleva un nombre para ser identificado por el navegador.
Un ejemplo podría ser “documento.html#capitulo4”.
Crear enlaces en un documento
Para crear enlaces en HTML, en primer lugar, crearemos un documento html. Para ello utilizaremos el procedimiento ordinario. En el ejemplo que desarrollaremos en adelante, crearemos un documento con una única columna, sin encabezado ni pie, del tipo XHTML 1.1 y con el CSS dentro del propio documento.
Luego seleccionaremos aquello que vincularemos, que puede ser un texto, una imagen u otro objeto. En este caso, tomaremos las palabras “Loren ipsum”, seleccionándolas. Luego iremos a “Insertar / hiperenlace” (también es posible hacerlo con el botón derecho del ratón, y en el menú, seleccionar “Crear enlace”, tras lo cual se abrirá el cuadro siguiente:
En el campo “Texto”, aparecerá el texto que hemos seleccionado, el cual poseerá el enlace. Debajo, se encuentra el campo “enlace”, en el cual podremos seleccionar el archivo de destino del enlace. Allí colocaremos la ruta del archivo que estamos enlazando. Luego aparece una lista, en la que aparecen los tipos de destino que podremos dar, que son los siguientes:
- _blank: si seleccionamos este tipo de enlace, el archivo o el sitio que se vincula se abrirá en una nueva ventana (si el navegador tienen esta posibilidad y se encuentra configurado para ello, se abrirá en una nueva pestaña).
- _parent: cuando nos encontramos trabajando con marcos, el sitio o el archivo se abrirá dentro del marco, o en su defecto, se abrirá en la ventana marco que contiene el enlace. Si el enlace no se encuentra anidado en el marco, el archivo se abrirá en la ventana completa del navegador.
- _self: el archivo abierto lo hace en el mismo marco o ventana que se encuentra el enlace. Esta es la opción por defecto de los enlaces, por lo que es lo mismo que si no se especifica el tipo de enlace.
- _top: Se carga en la ventana completa del navegador, quitando todos los marcos.
El siguiente campo contiene la clave de acceso, que es una letra que permite el acceso al enlace tecleando la misma más la tecla “Alt”, lo que es útil para la accesibilidad. En el último campo, aparece “índice de fichas”, en el cual se introducirá (si esto es necesario) el número de orden de la ficha del enlace. Este número, es el orden en que se desplazará el navegador entre enlaces cuando se presiona la tecla “tabulador”.
Ahora, para ver como funciona, estableceremos un enlace empleando los procedimiento que hemos descrito. En el cuadro, colocaremos https://www.lawebera.es como enlace, _blank como destino y dejando el resto de los campos vacíos, ya que no nos serán útiles.
Guardando la página, al hacer clic sobre el enlace, deberá abrirse una nueva ventana donde aparecerá la página principal de “lawebera.es”.
Formato del hiperenlace
Tal como vemos en el documento que estamos desarrollando, los enlaces tienen un formato determinado por defecto. El color de la fuente es azul y el texto se encuentra subrayado. Cuando el enlace ya ha sido visitado, el color es morado, mientras que los enlaces activos son de color rojo. En el caso de las imágenes, estas aparecen con un borde azul de 1px.
Esto puede ser modificado del mismo modo que pueden ser modificadas las propiedades de cualquier objeto. Al igual que en el caso del formato de otros tipos de objetos, las propiedades pueden ser modificadas en conjunto (para todos los enlaces, mediante la regla “a”, o en forma particular para cada uno de los enlaces o para todos los enlaces de una sección.
enlace a correo electrónico
Este tipo de enlaces se inicia, al igual que en cualquiera de los demás casos, en un texto, una imagen o cualquier otro objeto. La diferencia con el resto de los enlaces, es que este sirve para enviar un email, abriendo el cliente de correo electrónico del usuario. La sintaxis del enlace es:
mailto:dirección@correo.com
Para generar un enlace de correo electrónico, deberemos seguir el siguiente procedimiento. En la página que estamos creando, debajo de cualquier párrafo, daremos enter para que se cree un nuevo párrafo. Luego iremos a “insertar / enlace de correo electrónico”, tras lo que se abrirá el siguiente cuadro:
Comprobación de enlaces rotos
Una de las herramientas más interesantes que presenta Adobe Dreamweaver es la que comprueba los enlaces, marcando los errores que la página pueda tener. Para acceder a esta herramienta, hay que seguir la ruta “Archivo / Comprobar página / enlaces”. Esto abre un cuadro donde se muestran todos los enlaces y su estado. Esta comprobación se realiza sobre todo el sitio y no solo sobre una página en particular.
Lo primero que hay que hacer es hacer clic sobre el botón con una flecha verde, a través del cual se ofrece la posibilidad de elegir dónde se comprobarán los enlaces rotos. Puede ser en el documento actual, en todo el sitio o en los archivos o carpetas del sitio seleccionados previamente.
A través de “Ver” hay que especificar si han de mostrarse los enlaces rotos, externos o huérfanos. Como ya dijimos, los enlaces rotos son aquellos que enlazan a una ruta no válida o a un archivo que no existe. Los enlaces externos son los que enlazan a archivos que se encuentran fuera del sitio, pero que Dreamweaver no verifica su validez, ya que solo los enumera. Los enlaces huérfanos son aquellos que no se encuentran enlazados por otros documentos, ni contienen enlaces a otros documentos; en ocasiones, este tipo de documentos son archivos que no se encuentran en uso y no fueron debidamente eliminados.
Reparación de enlaces rotos
Dreamweaver presenta dos posibilidades de reparación de enlaces rotos. La primera es abriendo el archivo desde la columna “Archivos” del cuadro y editando directamente los enlaces en el archivo. La segunda opción es haciendo clic en el nombre del enlace en el mismo cuadro, haciendo la reparación allí mismo.
Ver comentarios (1)
Gracias fue muy especifico