Enviar HTML E-Mails con PHPMailer



1- Averiguar que version de PHP tienes instalada.

<?php
echo phpversion();
?> 

2- De acuerdo a la version que tengas descargar PHPMailer desde aqui .
3- Luego descomprimir el archivo que descargaste en la carpeta de tu proyecto.
4- Crear el archivo index e incluir el siguiente codigo:

<?php
$destinatario = 'destinatario@algo.com';
$nombre = 'Juana';
$apellido = 'Almonte';

require("PHPMailer-master/class.phpmailer.php");

$mail = new PHPMailer();

$mail->IsSMTP(); // Enviar via SMTP
$mail->Host = "smtp.gmail.com"; // SMTP servers
$mail->SMTPAuth = true; // encender SMTP autenticacion
$mail->SMTPSecure = 'ssl';
$mail->Port = 465;
$mail->Username = "mi_email@gmail.com"; // aqui escribe tu correo de gmail
$mail->Password = "mi_contrasena"; // aqui escribe tu contrasena del correo 

$mail->From = "mi_email@gmail.com";
$mail->FromName = "PHPMailer prueba";
$mail->AddAddress($destinatario,$nombre.' '.$apellido);
$mail->AddReplyTo("mi_email@gmail.com","PHPMailer.com");

$mail->WordWrap = 50; // establecer word wrap

$mail->IsHTML(true); // enviar como HTML

$mail->Subject = "PHPMailer mensaje de prueba";
$mail->Body = "
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<title>PHPMailer E-mail</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
</head>
<body style='margin: 0; padding: 0;'>

<table width='600px' bgcolor='#ffffff' style='border:1px solid #CCCCCC; color: #696969; border-collapse: collapse; padding:15px 10px 20px 10px; margin: 5px 0;'>
<tr>
<td width='100%' bgcolor='#1fc8f2' style='padding: 5px; letter-spacing: -3px; color: #ffffff; font-size: 24px; border-bottom: 2px dashed #f2821f;'> TuEmail </td>
<td width='30%'> </td>
</tr>

<tr>
<td style='padding: 0 15px;'>Hola <strong>$nombre $apellido,</strong></td> 
<td width='30%'> </td>
</tr>

<tr>
<td style='padding: 0 15px;'> Este es un email de prueba </td>
<td width='30%'> </td>
</tr>


<tr>
<td bgcolor='#EFEFEF' style='padding: 0 0 10px 5px;'>Gracias por aprender con nosotros.<br /> <i> BlueProgramming Staff </i> </td>
<td width='30%'> </td>
</tr>

</table>
</body>
</html>
";
$mail->AltBody = "Este es un mensaje de solo texto";


if(!$mail->Send())
{
echo "el mensaje no fue enviado";
echo "Mailer Error: " . $mail->ErrorInfo;
exit;
}

echo "El mensaje ha dijo enviando";

    
?>


5- Editar el codigo de acurdo a tu necesidad ej
La variable $destinatario cambiar por el correo al que quieras que llegue este correo de prueba.
En este ejemplo se envia mediante el server de Gmail por lo que es obligatio en username escribir un correo de tu propiedad (desde el que se enviara el email) que sea de Gmail y en password escribir la contrasena de ese correo.

En la parte del body o cuerpo de el mensaje esta todo el codigo HTML que se enviara al correo. Algunas notas que hay que tener en cuenta al enviar correos HTML son las siguientes:

a) Procura usar la menor cantidad de CSS para el estilo del mensaje. En vez de eso se recomienda usar los  atributos HTML como por ejemplo para el color de fondo la una tabla bgcolor en vez de background-color de CSS.

b) Cuando asignes colores siempre hacerlo de la forma larga de seis caracteres debido a la que forma corta de tres no siempre va a funcionar.

Puedes descargar este ejemplo desde aqui.




Elementos transparentes con CSS

Es posible volver elementos transparentes con CSS utilizando la propiedad opacity. En caso de que se desee solo el color de fondo transparente y las letras o bordes opacos se ultiliza los colores rgba. El grado de tranparencia se puede regular segun se desee.

Ejemplo:

Imagen transparente utilizando la propiedad opacity


<style>
img.trans_imagen {
opacity:0.5;
}
</style>

<img class="trans_imagen" src="img/gato.jpg" />



Div transparente utilizando la propiedad opacity. 

*Nota: Cuando se utiliza la propiedad opacity para dar transparencia a un div todos los elementos y  propiedades relacionados al div tambien se haran trasparentes.

<style>
div.imagen_fondo {
border:2px solid #CCC;
width: 500px;
height: 300px;
background: url(img/gato.jpg) repeat;
}

div.trans_div {
opacity:0.3;
background-color: white;
font-color: #FFF;
font-size: 39px;
text-align:center;

}
</style>

<div class="imagen_fondo">
<div class="trans_div">
<p>
GATO
</p>
</div>
</div>



Div transparente con letras y/o bordes opacos

Para esto se utilizan los colores rgba en vez de la propiedad opacity.


<style>
div.imagen_fondo {
border:2px solid #CCC;
width: 500px;
height: 300px;
background: url(img/gato.jpg) repeat;

}

div.letras_opacas_div {
background: rgba(255, 255, 255, 0.3);
font-color: #FFF;
font-size: 39px;
text-align:center;

}
</style>

<div class="imagen_fondo">
<div class="letras_opacas_div">
<p>
GATO
</p>
</div>
</div>