Trabajando con un cliente de Chile, quería que en un hipervinculo para enviar un correo, apareciese al pinchar el asunto del mismo. Todo en HTML ¿Quieres saber cómo lo hice?

En este artículo voy a sobreentender que sabes lo que es el lenguaje HTML. Se trata de un lenguaje de programación que se utiliza en diseño web. Dentro de ese código, hay utilidades (como la que te voy a explicar hoy) muy interesantes. Vamos a verlo por partes.

Cómo se crea un hipervínculo para enviar correos electrónicos

Lo primero que vamos a ver es el código base sobre el que vamos a trabajar. En todos los casos, vamos a suponer que queremos enviar un e-mail a [email protected]. Debes tener en cuenta que, aunque trabajamos con correos electrónicos, vamos a hacerlo mediante un hipervínculo. Si te fijas, el enlace al que hacemos referencia es el propio correo electrónico, al que le añadimos el prefijo “mailto:”

<a href="mailto:[email protected]">Enviar un e-mail</a>

Se vería así:
Enviar un e-mail

Añadir el asunto como parámetro de mailto

Vamos ahora a suponer que vamos a añadirle un asunto que diga “ESTE ES EL ASUNTO”. Adaptaremos el mismo código de antes con el nuevo parámetro.

<a href="mailto:[email protected]?subject=ESTE ES EL ASUNTO">Enviar un e-mail</a>

Se vería así:
Enviar un e-mail

(deberías hacer clic para notar cambios)

Añadir un cuerpo del mensaje al hipervínculo de correo

También somos capaces de añadir texto al cuerpo del mensaje. Lo haremos de manera similar a lo que hicimos con el asunto, pero con un parámetro distinto. Lo verás mejor a continuación:

<a href="mailto:[email protected]?body=ESTE ES EL CUERPO">Enviar un e-mail</a>

Se vería así:
Enviar un e-mail
(deberías hacer clic para notar cambios)

Añadir asunto y cuerpo al mensaje al hipervínculo HTML

Es posible combinar varios parámetros dentro del mismo código. Por ejemplo, supongamos que queremos que en un determinado hipervínculo se defina tanto un asunto concreto como un determiado texto del cuerpo del mensaje. No hay problema, lo haríamos así:

<a href="mailto:[email protected]?subject=ESTE ES EL ASUNTO&body=ESTE ES EL CUERPO">Enviar un e-mail</a>

Se vería así:
Enviar un e-mail
(deberías hacer clic para notar cambios)

 

Añadir destinatarios adicionales a un hipervínculo mailto en HTML

Imaginemos ahora que queremos añadir destinatarios adicionales al correo electrónico. Concretamente vamos a añadir a [email protected] como CC y a [email protected] como BCC. Este sería el código a utilizar:

<a href="mailto:[email protected][email protected]&[email protected]">Enviar un e-mail</a>

Se vería así:
Enviar un e-mail

(deberías hacer clic para notar cambios)

Además, podemos hacerlo todo junto dentro del mismo código:

<a href="mailto:[email protected]??subject=ESTE ES EL ASUNTO&body=ESTE ES EL CUERPO&[email protected]&[email protected]">Enviar un e-mail</a>

Quedaría así:
Enviar un e-mail
(deberías hacer clic para notar cambios)

 

Dónde seguir aprendiendo HTML de forma rápida y en español

Probablemente ya hayas visto esta selección de 10 cursos online de HTML para aprender rápido y en español. Si no lo has hecho, deberías echarle un vistazo.

Libros de HTML que te pueden ser muy útiles

Además, si te has quedado de ganas de más, también hemos elegido para ti estos libros sobre HTML. Podrás tenerlos como guía de consulta junto a tu ordenador, de cara a cualquier proyecto:

 


Espero que te haya servido este artículo. Déjame un comentario si ha sido así. ¡Hasta pronto!