Enviando correo en formato HTML a la lista

  • Por
Una vez creado el boletín en formato HTML debemos enviarlo a la lista con nuestro programa de correo.
Una vez creada la página web -una página HTML normal, con todos los enlaces e imágenes con URLs absolutas- la debemos incluir en un mensaje de email.

Nuestro boletín puede tener un código como el siguiente:

<head><link rel="STYLESHEET" type="text/css" href="http://www.desarrolloweb.com/estilo.css">
<base target="_blank">
</head>
<body bgcolor="ffffff" topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="000033" background="http://www.desarrolloweb.com/images/fondoarriba.gif">
<tr>
<td align="center" background="http://www.desarrolloweb.com/images/plantilla/trama3.gif"> <b><font face="verdana,arial,helvetica" size="4" color=ffffff>Boletín de novedades de DesarrolloWeb.com</font></b></td>
</tr>
<tr>
<td bgcolor="cccc66" align="center"><span class=fuente8><font face="verdana,arial,helvetica" size="1">
Número#13           1 de mayo de 2002</font></span>
</table>
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="cccc66">
<tr>
<td bgcolor="cccc66" align="center">
<a href="http://www.desarrolloweb.com/desarrolladores" target="_blank">
<img src="http://www.desarrolloweb.com/images/banners/d_desarrolladores.gif" width="468" height="60" border="0" alt="Pincha para acceder al directorio de desarrolladores" vspace="3"></a>
<br>
</td>
</tr>
</table>
<br>
<table width="100%" cellspacing="0" cellpadding="2" border="0">
<tr>
<td valign="top">
<font face="verdana,arial,helvetica" size="2">
Tenemos un montón de artículos nuevos que seguro que os interesarán.
<br>
<br>
<b>CONTENIDOS</b>
<br>
1.- Nuevos artículos
<br>
2.- Nuevos programas
<br>
<br>
.....
<br>
<br>
<b><a href="http://www.desarrolloweb.com/manuales/24/">Calendario PHP</a></b>
<br>
Aplicación práctica de PHP en la que construimos un calendario que muestra el mes y año actual y permite moverse a otro mes y año.
</td></tr></table>
</body>
</html>
* Este boletín es una simplificación y recorte de nuestro boletín de novedades. El código en si no tiene mucha importancia, lo que tenemos que fijarnos es en que las imágenes y los enlaces tienen URLs absolutas.

El programa de correo que utilices tendrá su propia manera de incluir código HTML dentro de un mensaje. En Outlook Express hay que acceder al menú de Insertar > Texto de archivo. Si el mensaje que estás escribiendo tiene formato HTML, podrás insertar archivos que tengan extensión .html o .htm. Indico esto porque en el caso de que tu email estuviera en formato "solo texto", sólo podrías insertar archivos de texto .txt. Para cambiar el formato de mensaje a HTML en Outlook Express debemos dirigirnos al menú Formato > Texto enriquecido (HTML).

Atención: Al insertar el código del archivo HTML dentro del boletín hay que fijarse en no insertar el fichero HTML como un archivo adjunto, sino en insertar el código de dicho archivo como texto en el mail. En Outlook Express es fácil equivocarse pues las dos opciones están una al lado de la otra, en el menú insertar. En este programa hay que escoger la opción "Insertar > Texto de archivo" en lugar de "Insertar > Archivo adjunto".

Una vez compuesto el mensaje lo enviamos a nuestra lista de correo, que se encarga de distribuir los mensajes a los miles de suscriptores del boletín. Generalmente, las listas de correo tienen una dirección a la que mandar los mensajes de correo que queremos dirigir a todos los componentes de la lista, algo como miLista_recepción@miProveedor.net.

En general, el envío del mensaje en formato HTML será realizado de la misma manera que un mensaje en formato normal, excepción hecha de lo comentado. Esperamos que no resulte un problema.

Hasta aquí nuestros consejos sobre el envío de boletines en formato HTML, así como la creación de boletines de novedades en general. Ahora, a poner en práctica las ideas.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

kus

09/9/2004
Para tener activa la opción de "texto de archivo" dentro del menú "insertar" es necesario tener activada la opción de "utilizar diseño de fondo" al redactar mensajes con formato "HTML".(Dentro de Herramientas - Opciones - Redactar - Diseño de fondo).
Ya que hay que elegir un diseño de fondo, es mejor crear un documento HTML que contenga una hoja de estilo local, y seleccionar este documento como diseño de fondo de nuestros mensajes.
Los mensajes que escribamos tendran el estilo de fuente, enlaces... que hayamos establecido.
También se puede insertar en el mensaje un "texto de archivo" que contenga enlaces a una URL externa para insertar imágenes...etc

crlt

14/10/2005
Hola. He conseguido enviar mails como indica el tutorial... Sólo que, lamentablemente, las recepciones que hago de esos mails a mi cuenta de Yahoo, las recibo con atachados. Los mails pesan mucho (en fin, pesan lo que pesa la página con sus imagenes, etc).
¿Alguna solución?.

Carolitt

16/8/2006
Hola, ya sé que es tarde... pero quisera compartir esto con todo el que lo necesite ya que es otro modo de enviar un mensaje HTML por Outlook Express con menos peso. Primero, lo hice desde Outlook Express (porque desde Outlook... no me resultó). Luego subo el archivo HTML que contiene todo, al servidor, cuidando que las rutas estén todas vinculadas al sitio web y no al archivo, creo que a eso le llaman rutas Absolutas ( o sea que empiecen con http://paginaweb.com/...etc). eso lo puedes verificar y corregir en dreamweaver por ejemplo o en un editor de texto. Luego abro outlook express, crear correo y me aseguro que en la opción Formato, de arriba, NO esté clickeada la opción "enviar imágenes con el mensaje", pues es esto lo que lo hace más pesado o nó. Clic en pestaña Código fuente (de abajo), pego el código fuente que copié de mi archivo que está en el servidor, luego clic en pestaña modificar. Las imágenes se verán talvez algo descuadradas, pero creo que no es necesario arreglarlas pues se reparan solitas. Y finalmente lo envías. (claro ya tienes que tener configurada tu cuenta en Outlook express y todo eso)

A mí un archivo con imágenes que pesaba 166kb en internet, lo envié con 13kb desde outlook expreess.
En Outlook recibí sin problemas, se ve todo y liviano. En Yahoo también bien y liviano. Pero en Gmail no se ven las imágenes, sólo esas cajitas con cruces... feo. Por eso es importante además agregar un texto con el contenido además de la imágen, para que la falta de texto no cause mala impresión. En todo caso a todas las empresas les pasa lo mismo cuando se revisa directamente de Gmail, yo verifiqué tuparada y otra más y las dos tenían el mismo problema en Gmail.

AAhh. Pero para lograr que esa tabla vacía y con errores de imágenes no encontratas, se vea muy pequeña en Gmail, de tal forma que pase desapercibida, lo que debes hacer es quitarle los valores de alto y ancho a cada imágen que compone tu archivo Html, es decir, desde dreamwever seleccionas una imágen (que a todo esto no se verá talcual si no sólo el símbolo) y en Propiedades, borras los valores alto y ancho (W yH), esos dos campos quedan vacíos. luego guardas, subes y luego copias el código fuentes y etc, etc, etc.

Bueno eso es todo, espero no sea muy tarde y les sirva de algo
Saludos

ramiro gallo

04/4/2007
es bueno recordar que para tener activo la opcion de "insert" se debe hacer click en el cuerpo del e-mail (donde se escribe el texto) si no haces click ahi la opcion te aparece desactivada, no hace falta cambiar nada de la configuracion del outlook.

Javier

17/8/2007
Bueno ya consegui enviar un boletin, tal como enseña en el manual pero el problema que tengo es que el tamaño de las letras se desconfiguran, aparecen muy grandes y deforman todo el boletin, trate de cambiar manualmente el tamaño pero solo me acepta 8, alguien tiene la solucion ??
gracias

victor

14/9/2007
Hay alguna opción en el MICROSOFT OUTLOOK para hacer esto, en lugar de utilizar el OUTLOOK EXPRESS?
Tengo instalado el OUTLOOK y lo gasto para todo. Me supone un inconveniente muy grande no utilizar este program, y tener que instalrme el EXPRESS.
Sabeis alguna opción para insertar el Texto de un archivo HTML y que no salga el código?

Gracias...

asd

18/5/2009
aad
addddddddd

GABRIEL

05/6/2009
Enviando correo en formato HTML
q pasa si no tngo Outlook Express, yo trabajo en Mac, como pongo el archivo html en el programa de mails de Mac

GRACIAS

eliezer

28/6/2009
correo
confimar si me llego este correo

Danna

16/9/2009
muy buen comentario
util y sencillo las primeras lineas te aclaran todo... felicidades a quien lo hizo!

camilo

20/5/2010
programa
q programa es el mejor para realizar esta insercion del codigo al correo

Alejandra Garcia

18/8/2010
duda
ya tengo un formato html creado en dreamweaver como le hago para mandarlo por outlock como publicidad!!?? ya lo intente y/o las imagenes no salen y me parece un archivo adjunto!

Warrioor

09/3/2011
Gracias
Muchas Gracias me salvaste de un apuro sos muy guay thxs

nora

08/5/2011
correo electronico no tiene formato
la direccion de correo, tenia para formato, o sin formato, ahora lo abro y no tengo manera para darle formato, está sin tamaño de letra, corrector ortografica etc etc, si pueden ayudar regio, de todos modos. gracias. nora

vito_guerrero_quesada

11/10/2011
Gmail no me reconoce los enlaces
Hola, he creado un boletin, en el cual mando algunos enlaces que compongo dinamicamente, solo me falla cunado lo reciben sobre gmail, los enlaces cambian de <a href="www.dominio.com">texto</a> por <a>texto</a> Me podrian dar una pista de por donde me estoy equivocando?

Para enviar los correos uso phpmailer
Puede ser el usar tinymce como editor para el contenido del texto?