Contenidos
Enlaces
Los enlaces, hipervínculos o hiperenlaces permiten al usuario explorar de manera no secuencial, otras páginas web externas repartidas por todo el mundo por medio de enlaces hipertexto o partes de la misma web
Para ello utilizamos el elemento a que es un ancla (anchor)
En ejemplo se ha enlazado con la página inicial de esta web dónde el atributo href es el destino del enlace (es aconsejable usar las comillas (simples o dobles) para que el navegador entienda que es de tipo texto) y el texto dentro del elemento es el texto indicativo que aparecerá en la pantalla del enlace (con un color especial y generalmente subrayado)
Quedando como resultado:
Se pueden distinguir tres tipos de enlaces:
- Con dirección absoluta
- Con dirección relativa
- Dentro de la misma página
- Dentro de nuestra web
- Fuera de nuestra web
- Correo electrónico
Con dirección absoluta
Si queremos enlazar con nuestra página u una página que esté fuera de la nuestra (es decir, que esté en un servidor distinto del que la tenemos alojada)
Es necesario conocer su dirección completa, o URL (Uniform Resource Locator)
El URL podría ser, además de la dirección de una página de Internet, una dirección de ftp, gopher u otro servicio de internet
El destino del enlace será en estos casos la página inicial o por defecto de esa página web, que normalmente será por defecto index.html, index.htm, index.php o index.asp, dependerá del lenguaje utilizado al escribir la página web
Por esa razón podremos omitir esa página de inicio y depende cómo esté configurado el servidor obtendremos la respuesta deseada o un error de tipo 404 de dirección incorrecta
En el ejemplo se ha enlazado con la página inicial de Microsoft mediante el URL de web segura HTTPS y se ha usado el atributo target con el valor _blank para indicarle al navegador que nos abra una nueva ventana con la página enlazada, así podremos ver ambas páginas sin perder el contenido que estábamos visualizando previamente
Es muy importante copiar estas direcciones correctamente (respetando las mayúsculas y minúsculas, pues los servidores son capaces de distinguirlas y pueden no reconocer la dirección que hemos escrito, devolviendonos el ya citado error 404 de dirección incorrecta)
También se ha utilizado el atributo rel con los valores noopener y noreferrer para que no sea guardada en la caché del navegador
Quedando como resultado:
Con dirección relativa
Puede ser que tengamos una sola página. Pero lo más frecuente es que tengamos varias páginas, una inicial (o principal) y otras conectadas a ella, entre ellas mismas o con otras externas que a su vez están conectadas consigo mismas y con otras externas
Dentro de la misma página
A veces, en el caso de páginas muy extensas, nos puede interesar dar un salto desde una posición a otra determinada
El destino del enlace, en este caso el sitio dentro de la página a donde queremos saltar, se sustituye por una marca (la palabra marca puede ser cualquier palabra que queramos, pero precedida del símbolo #)
Esta palabra (o palabras, ya que podemos utilizar más de una separadas con _) aparecerán en pantalla coloreada (en forma de hipertexto y si usamos una hoja de estilo CSS puede ser modificada según nuestras necesidades)
En el ejemplo se ha creado un enlace al final de esta misma página, al cuál podremos saltar hasta la etiqueta que hemos llamado final si pulsamos en el enlace
Para que funcione correctamente, también debe existir el enlace final, sino el navegador ignorará el enlace porque no sabrá a donde saltar
En el ejemplo tenemos el enlace que deberemos incluir, en la posición que queremos que se salte, para ello se ha utilizado el atributo name, con el valor elegido pero sin usar el símbolo #
Quedando como resultado:
Dentro de nuestra web
También podemos ir a otra página de nuestra web alojada a nuestro servidor
En el ejemplo se ha enlazado con la página dentro de esta web que habla de la listas, hemos incluido en el atributo href la dirección relativa y unos parámetros, que van precedidos del símbolo ? y tienen el formato de variable=’valor’ y si tenemos más de uno, se separan con el símbolo &
Quedando como resultado:
En el ejemplo se ha enlazado con un lugar concreto de la página de listas, en concreto la que habla del listado con viñetas
Para ello, se ha utilizado el sistema de marcas explicado anteriormente
Quedando como resultado:
En los ejemplos anteriores estábamos suponiendo que la página en la que escribimos la etiqueta y la página a la que queremos saltar estaban en el mismo directorio
Ya que pudiera ocurrir que hemos organizado el sitio Web con un directorio principal y subdirectorios auxiliares que cuelgan del mismo
Si la página a la que quiero saltar está en el subdirectorio subdir, entonces en el atributo href deberíamos haber escrito /subdir/pagina.html, indicando la ruta completa desde el directorio raíz hasta la página pagina.html
Y a la inversa, si queremos saltar desde una página a otra que está en un directorio anterior, en el atributo href deberíamos haber escrito ../pagina.html
En este caso, los dos puntos indican al navegador que se dirija al directorio anterior
Se debe utilizar el símbolo / para indicar los subdirectorios si se está trabajando con un servidor Unix, y el símbolo \, si se está trabajando con un servidor Windows, ya que el sistema de directorios se trata de distinta forma
Si queremos evitarnos las complicaciones derivadas de tener tanto subdirectorio, podemos guardarlo todo en el directorio raíz o en un único directorio
Sin embargo, esta práctica tiene el inconveniente de que todo esté más desordenado y si en un futuro queremos realizar modificaciones sea más complicado de encontrar los contenidos, que si lo hubiéramos ordenado por subdirectorios específicos con un nombre que sea descriptivo sobre su contenido
Fuera de nuestra web
Se aplica lo explicado anteriormente para las direcciones absolutas y dentro de nuestra web, pero esta vez los enlaces no estarán alojados en nuestro servidor, sino en uno externo
Correo electrónico
Si queremos que nuestros usuarios se pongan en contacto con nosotros podemos incluir nuestra dirección de correo electrónico en un enlace
En el ejemplo se ha incluido dentro del atributo href la palabra reservada mailto seguida de dos punto junto con la dirección de correo electrónico del administrador de esta web
También se ha repetido la misma dentro de la etiqueta para que el usuario sepa que el enlace pertenece a un correo electrónico, de este modo reconocerlo fácilmente, aunque podría haberse usado un mensaje descriptivo o la imagen de un buzón (una metáfora que el usuario podría relacionar con el correo), por ejemplo
Quedando como resultado:
Al pinchar el enlace veremos que el navegador intentará abrir el programa que tenga asociado para la gestión del correo, con la dirección del destinatario ya rellenada, que es la que aparecía en el enlace
También podemos añadir otros valores que serán usados por el gestor de correo utilizando palabras reservadas que van precedidas del símbolo ? y tienen el formato de variable=’valor’ y si tenemos más de uno, se separan con el símbolo &
Entre las más destacadas tenemos:
- subject
es el usuario destinatario del correo, por defecto será Feedback
- cc
simula una copia en carboncillo (Carbon Copy) se utiliza en caso de haber más de un destinatario, deberíamos indicarlos aquí separándolos con el símbolo ;
Los destinatarios serán capaces de ver quienes son el resto de destinatarios
- bcc es similar a la copia en carboncillo (Carbon Copy)
En este caso la copia está oculta y los destinatarios no serán capaces de ver quienes son el resto de destinatarios
- body
es el texto del correo en sí, el gestor de correo podría ignorarlo o añadirle algo, como un mensaje de despedida o una firma, así que no siempre será igual al que nosotros hayamos escrito en el enlace
Esta es la marca de final (no contiene un enlace real ya que es una referencia de enlace, pero como tiene texto, aparecerá subrayado como si lo fuera) para el ejemplo anterior del sistema de marcas explicado anteriormente