HTML y CSS para principiantes

HTML y CSS para principiantes (parte 12): Definición de hipervínculos (2)

Todos los vídeos del tutorial HTML y CSS para principiantes

Puede establecer hipervínculos a direcciones de correo electrónico. Antes de mostrarte cómo funciona, te doy algunos consejos. Personalmente, no soy un fan de estos enlaces de correo electrónico. Los formularios son más adecuados. Si no hay ningún cliente de correo electrónico instalado o no está configurado para el usuario actual, los enlaces de correo electrónico no funcionarán correctamente. En última instancia, por supuesto, tienes que decidir por ti mismo si quieres utilizar enlaces de correo electrónico o formularios. Más adelante encontrará información detallada sobre los formularios.

Si se hace clic en un enlace de correo electrónico, normalmente se abre una ventana de correo electrónico para el visitante.

HTML y CSS para principiantes (parte 12): Definición de hipervínculos (2)

Sin embargo, esto no está garantizado. El usuario debe haber realizado los ajustes apropiados. Una vez más, la solución del enlace de correo electrónico no es la ideal. No obstante, es posible que necesite un enlace de este tipo de vez en cuando. He aquí la sintaxis:

<a href="mailto:kontakt@psd-tutorials.de">kontakt@psd-tutorials.de</a>



Como puede ver, se trata inicialmente de un hipervínculo clásico.

HTML y CSS para principiantes (parte 12): Definición de hipervínculos (2)

Sin embargo, el factor decisivo aquí es lo que se asigna al atributo href como valor. El destino del enlace siempre empieza por mailto, seguido de dos puntos. A continuación aparece la dirección de correo electrónico deseada.

Por cierto, debe tener cuidado con lo que introduce como texto de enlace para los enlaces de correo electrónico. Lo mejor es volver a introducir siempre la dirección de correo electrónico. De este modo, incluso los usuarios que no hagan clic en el hipervínculo o a los que no se les abra ningún cliente de correo electrónico podrán copiar la dirección y enviarle un mensaje.

Si define enlaces de correo electrónico, también dispondrá de más opciones que la mera especificación de la dirección del destinatario. Tenga en cuenta que las cosas que se describen aquí no son HTML estándar, pero están ampliamente soportadas por los navegadores.

En primer lugar, puede especificar directamente un destinatario CC.

<a href="mailto:kontakt@psd-tutorials.de?cc=info@psd-tutorials.de">kontakt@psd-tutorials.de</a>



Fíjese en el signo de interrogación que aparece después de la dirección del destinatario. A continuación aparece cc y un signo igual, seguido de la dirección a la que debe enviarse una copia visible del correo electrónico. Como alternativa a cc, también puede introducir bcc. En este caso, la dirección especificada se copia en el campo CCO y el correo electrónico se envía a esta dirección como copia invisible.

Si desea especificar un asunto predefinido, también es posible.

<a href="mailto:kontakt@psd-tutorials.de?subject=Post%20an%20PSD-Tutorials.de">kontakt@psd-tutorials.de</a>



Anote el asunto deseado después de asunto. Para que todo funcione, no debe utilizar espacios en el asunto o enmascararlos utilizando la cadena de caracteres %20.

Si lo desea, también puede introducir el texto del correo electrónico o parte de él. Para ello se utiliza el cuerpo del parámetro.

<a href="mailto:kontakt@psd-tutorials.de?body=Hallo%20PSD-Tutorials.de">kontakt@psd-tutorials.de</a>



HTML y CSS para principiantes (parte 12): Definición de hipervínculos (2)



Aquí se aplica lo mismo que ya se ha descrito en relación con el asunto.

Ofrecer archivos para descargar

Si quiere ofrecer archivos para descargar en su sitio web, por supuesto que puede hacerlo. (Dejaré a un lado los aspectos legales en este punto). Esto es muy fácil de realizar. Defina un hiperenlace y especifique el archivo correspondiente como destino del enlace.

<a href="libro.zip">Las descargas del libro</a>



En este caso, el destino del enlace es un archivo zip. Si hace clic en el hipervínculo, el navegador le ofrecerá normalmente un cuadro de diálogo de descarga o descargará directamente el archivo.

HTML y CSS para principiantes (parte 12): Definición de hipervínculos (2)



Así podrá descargar el archivo. En última instancia, sin embargo, son los navegadores los que deciden cómo proceder con los archivos especificados.

Normalmente, los navegadores muestran directamente los archivos PDF al hacer clic en el enlace correspondiente. En la mayoría de los casos, esto está perfectamente bien. Sin embargo, es posible que también desee ofrecer archivos PDF para su descarga. (Por supuesto, los usuarios podrían hacer clic en el enlace con el botón derecho del ratón y descargar el archivo. Sin embargo, no debe asumir necesariamente que todos los visitantes del sitio web son conscientes de esta posibilidad).

En HTML5, los hipervínculos pueden etiquetarse como enlaces de descarga. Para ello se utiliza el atributo download.

<a href="ebook.pdf" descargar>Descargar</a>



Un enlace con este atributo descargará el archivo, siempre que el navegador admita el atributo.

Por defecto, el archivo se guarda con el nombre que tiene en el original. Esto también suele estar bien. Sin embargo, es posible que desee asignar un nombre diferente al archivo descargado. Esto también es posible sin problemas. Se vuelve a utilizar el atributo de descarga. El nombre deseado se asigna a este atributo como valor.

<a href="ebook.pdf" download="dk.pdf">Descargar</a>



Si el navegador admite esta opción, utilizará el nombre asignado al atributo download al descargar.

HTML y CSS para principiantes (parte 12): Definición de hipervínculos (2)

Especificar relaciones lógicas

Un atributo que puede resultar muy interesante en relación con la definición de hipervínculos es rel. Esto se debe a que este atributo puede utilizarse para especificar la relación lógica entre el hipervínculo y el destino del enlace. Los navegadores podrían utilizar esta información, por ejemplo, para mostrar los iconos correspondientes al pasar el ratón por encima de los enlaces. Sin embargo, de momento no lo hacen. Por lo tanto, el atributo rel no tiene ningún efecto visible.

<a href="dos.htm" rel="siguiente">más</a>



El atributo rel dispone de los siguientes valores

- alternate - Enlace a una versión alternativa del documento.

- author - Enlace al autor del documento.

- bookmark - Enlace permanente del documento que puede utilizarse como marcador.

- help - Enlace a un archivo de ayuda.

- licencia - Enlace a la información de copyright.

- next - Enlace al siguiente documento.

- nofollow - Puede utilizarse para especificar que los motores de búsqueda no deben seguir el enlace.

- noreferrer - El navegador no envía una cabecera HTTP referrer.

- prefetch - El documento debe cargarse en la caché.

- prev - Enlace al documento anterior.

- search - Enlace a una herramienta de búsqueda del documento.

- tag - Palabra clave que describe el documento.

De este modo, se puede describir con más detalle la relación entre el destino de referencia y los hipervínculos.