HTML y Email

HTML Email
algunas cosas que considerar
Hello
Un HTML Email es una pgina web que se enva por email
<img>
<h1>Hello</h1>
HTML
Content-Type: text/html
Puede ser nicamente el cdigo HTML
HTML
<img>
<h1>Hello</h1>
Multipart/Alternative MIME
Hello
TXT
O puede incluir tambin texto plano alternativo
ENVIAR TXT
<?php
$txt = file_get_contents("message.txt");
$from = "admin@host.dev";
$to = "akobashikawa@gmail.com";
$subject = "Text Email Test ";
$headers = "From: $from\r\nReply-To: $from";
if ( mail( $to, $subject, $txt, $headers ) ) {
echo "OK";
} else {
echo "KO";
}
Ejemplo de cdigo para enviar un email normal
ENVIAR HTML
<?php
$html = file_get_contents("message.html");
$from = "admin@host.dev";
$to = "akobashikawa@gmail.com";
$subject = "HTML Email Test ";
$headers = "From: $from\r\nReply-To: $from"."\r\n";
$headers .= "MIME-Version: 1.0"."\r\n";
//$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$headers .= "Content-Type: text/html; charset=UTF-8\r\n";
if ( mail( $to, $subject, $html, $headers ) ) {
echo "OK";
} else {
echo "KO";
}
Ejemplo de cdigo para enviar HTML Email
<HTML>
De modo similar a como el mismo HTML se renderiza diferente en diferentes

navegadores
<HTML>
Outlook
Lotus
Notes
El mismo HTML se renderiza diferente en diferentes clientes email
NO
S
<doctype>,<head>, <body>
suelen ser borrados
99% del CSS no funciona
UTF-8 no siempre es reconocido
URL relativos no funcionan
Algunas versiones de Lotus
Notes (6 y 7) no soportan PNG
No se puede usar imgenes
como background
Inline styles
Tablas y gif para espaciado
<font> para fuentes
ISO-8859-1 y &xxxx;
URL absolutos
Usar JPG, GIF
Usar texto grfico cuando se
requiera (no importa el SEO)
Adems, hay varias limitaciones en el HTML que se puede usar
HTML como en
1996
Es decir
Tablas y gif para diagramacin

<table border="1" cellspacing="0" cellpadding="0" style="width:100%;" align="center" bgcolor="#888">
<tr><td>
<table border="1" cellspacing="0" cellpadding="0" width="600" align="center" bgcolor="#fff">
<tr><td><img style="display:block;" src="spacer.gif" width="10" height="10"></td>
<td><img style="display:block;" src="spacer.gif" width="40" height="10"></td>
<td><img style="display:block;" src="spacer.gif" width="540" height="10"></td>
<td><img style="display:block;" src="spacer.gif" width="10" height="10"></td></tr>
<tr><td></td>
<td valign="top"><font size="7" face="Times" color="#088">L</font></td>
<td align="justify">orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore <b>magna aliqua</b>. Ut enim ad minim veniam.
</td>
<td></td></tr>
<tr><td><img style="display:block;" src="spacer.gif" width="10" height="30"></td>
<td></td>
<td></td>
<td></td></tr>
<tr><td></td>
<td colspan="2" align="justify"><i>Quis nostrud exercitation ullamco laboris</i> nisi ut
. . .
</table>
</td></tr>
</table>
Tablas y gif para diagramacin
<table align="center">
para centrar una tabla
<table cellpadding="0" border="0" cellspacing="0" style="border-collapse:
collapse;">
previene el espaciado por default que se suele aplicar a las tablas.
<td><img style="display:block;"></td>
previene el gap que puede aparecer debajo de las imgenes.
<td align="justify">
para justificar texto en la celda
El ancho de los img de la primera fila pueden servir para fijar los anchos
de sus respectivas columnas.
La altura de los img de la primera columna pueden servir para fijar las
alturas de sus respectivas filas.
Controlar los mrgenes con columnas o filas extra.
Una herramienta visual, como Dreamweaver o Fireworks, facilita este tipo de
diagramacin.
Ms tips
<font size="n">
para el tamao del texto (1: 9px, 7: 48px)
<font color="#123456">
para el color del texto
<b> para negritas
<i> para itlicas
<a style="color:#333333;text-decoration:none;">
para ocultar el color y subrayado de un link
img/
<img src="img/smile.
png">
<h1>Hello</h1>
Una pgina web tiene normalmente referencias a recursos externos,

como las imgenes, que pueden ser relativas
http://mydomain.
com/img/
<img src="http://mydomain.
com/img/smile.png">
<h1>Hello</h1>
En un HTML Email, esas referencias tienen que ser absolutas
<img src="ci:smileimg">
<h1>Hello</h1>
Usando Multipart/Alternative MIME se puede incrustar la imagen en el mismo

email y enlazarla mediante el id asignado
GMail
GDocs
PASTE
COPY
Internamente, se copia el
HTML y todas las referencias
son absolutas
Una forma prctica de crear un HTML Email es usando Google Docs y GMail
Enlaces
http://htmlemailboilerplate.com/
Plantilla que incluye varias cosas descubiertas por
expertos a lo largo de varios aos.
Referencias
http://kb.mailchimp.com/article/how-to-code-htmlemails
http://css-tricks.com/sending-nice-html-email-withphp/
http://www.campaignmonitor.
com/blog/post/2695/lotus-notes-doesnt-support-pngimages/
Gracias
akobashikawa@rcp.pe

HTML y Email

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML y Email

Загружено:

Авторское право:

Доступные форматы

HTML Email

algunas cosas que considerar

Un HTML Email es una pgina web que se enva por email

Puede ser nicamente el cdigo HTML

O puede incluir tambin texto plano alternativo

Ejemplo de cdigo para enviar un email normal

Ejemplo de cdigo para enviar HTML Email

De modo similar a como el mismo HTML se renderiza diferente en diferentes

El mismo HTML se renderiza diferente en diferentes clientes email

Adems, hay varias limitaciones en el HTML que se puede usar

Tablas y gif para diagramacin

Tablas y gif para diagramacin

Una pgina web tiene normalmente referencias a recursos externos,

En un HTML Email, esas referencias tienen que ser absolutas

Usando Multipart/Alternative MIME se puede incrustar la imagen en el mismo

Вам также может понравиться