mail html

10 sept. 2007, 20:30

Bonjour à tous,
j'essaye d'envoyer un mail au format html (newsletter) sans utiliser de logiciel type outlook, juste à partir d'un client web style hotmail ou squirrel mail.

J'ai créé une page html sans css, avec des images qui sont sur un serveur online.
Je mets cette page html en pièce jointe et j'envoie.

Le mail reçu contient bien la page mais n'affiche pas les images. Voyez vous ce que j'ai mal fait?
Merci pour vos réponses.

Le html de ma page:

<!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=iso-8859-1" />
<title>Librairie Giard</title>
</head>

<body>
<center>
<table width="640" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>&nbsp;</td>
    <td colspan="3" align="left"><div align="center"><font color="#a0a0a0"
face="Times New Roman" size="2">Si vous n'arrivez pas à lire ce message, cliquez
<a href="#">ici</a> </font></div></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td width="26"><img src="http://www.librairiegiard.com/lettre/images/hg.gif"
width="26" height="100" /></td>
    <td colspan="3" align="left" bgcolor="#330065"><img
src="http://www.librairiegiard.com/lettre/images/logo.gif" alt="Librairie Giard"
/></td>
    <td width="26"><img src="http://www.librairiegiard.com/lettre/images/hd.gif"
width="26" height="100" /></td>
    </tr>
  <tr bgcolor="#cc3467">
    <td height="72">&nbsp;</td>
    <td width="481" height="72" align="left" bgcolor="#cc3467"><font color="#ffffff"
face="Times New Roman" size="3">Livres anciens / Catalogue en ligne / Antique
and rare books </font></td>
    <td width="57" align="right" bgcolor="#cc3467"><img
src="http://www.librairiegiard.com/lettre/images/lila.gif" alt="Librairie Giard"
width="49" height="49" /></td>
    <td width="50" align="right" bgcolor="#cc3467"><img
src="http://www.librairiegiard.com/lettre/images/slam.gif" alt="Librairie Giard"
width="49" height="49" /></td>
    <td height="72">&nbsp;</td>
    </tr>
  <tr>
    <td valign="top"><img src="http://www.librairiegiard.com/lettre/images/brdr.gif"
/></td>
    <td colspan="3" align="left"><table width="100%" border="0" cellspacing="0"
cellpadding="10">
      
      <tr>
        <td width="50%" valign="top"><font color="#000000" face="Verdana" size="2">
Madame, Monsieur, <br/><br/>
Nous sommes heureux de vous compter parmi nos clients. <br/>

Vous recevez nos catalogues papier, vous nous avez rencontr&eacute; sur les salons
de bibliophilies ou sur internet. Dor&eacute;navant nous vous proposons un
acc&egrave;s direct &agrave; notre fonds d&rsquo;ouvrages anciens, des rendez-vous
sur les salons de bibliophilie, d&rsquo;exprimer vos d&eacute;siderata, sur notre
nouveau site : <strong>www.librairiegiard.com</strong>.
        </font></td>
        <td valign="top"><img
src="http://www.librairiegiard.com/lettre/images/livres.jpg" alt="Librairie
Giard" width="320" height="213" /></td>
      </tr>
      <tr>
        <td width="50%" colspan="2" valign="top">
                      <font color="#000000" face="Verdana" size="2">
  R&eacute;guli&egrave;rement nous vous proposerons de t&eacute;l&eacute;charger
notre catalogue de nouveaut&eacute;s. D&egrave;s &agrave; pr&eacute;sent
t&eacute;l&eacute;chargez notre dernier catalogue <strong>n&deg; 150</strong> :...
<br/><br/>
  
  A très bientôt sur notre site!<br/>
  Librairie Giard<br/>
  </font>                </td>
        </tr>
    </table>
  </td>
    <td><img src="http://www.librairiegiard.com/lettre/images/brdr.gif" /></td>
    </tr>
  
  <tr>
    <td height="40" bgcolor="#cc3467">&nbsp;</td>
    <td height="40" colspan="3" align="left" bgcolor="#cc3467"><table width="100%"
border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><font color="#ffffff" face="Times New Roman" size="2">E-mail :
[email protected]</font> </td>
        <td align="right"><font color="#ffffff" face="Times New Roman" size="2"> Web
: www.librairiegiard.com</font></td>
      </tr>
      <tr>
        <td><span class="style4">Renseignements : +33 (0)3 20 42 1 86</span></td>
        <td align="right"><font color="#ffffff" face="Times New Roman" size="2">17
bis, rue Saint Jacques F-59000 Lille </font></td>
      </tr>
    </table></td>
    <td height="40" bgcolor="#cc3467">&nbsp;</td>
    </tr>
  <tr>
    <td rowspan="2"><img src="http://www.librairiegiard.com/lettre/images/bg.gif"
width="26" height="40" /></td>
    <td height="21" colspan="3" align="center" valign="bottom"><font color="#a0a0a0"
face="Times New Roman" size="2">Pour vous d&eacute;sabonner de la lettre
d'information,cliquez <a href="#">ici</a> </font></td>
    <td rowspan="2"><img src="http://www.librairiegiard.com/lettre/images/bd.gif"
width="26" height="40" /></td>
  </tr>
  <tr>
    <td height="19" colspan="3" valign="bottom"
background="http://www.librairiegiard.com/lettre/images/ssbg_foot.gif">&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td colspan="3">&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
</table>
</center>
</body>
</html>

10 sept. 2007, 21:01

J'ai afffiché la page telle que tu l'indiques et ça fonctionne bien chez moi, mais dans un navigateur. Il faudrait voir de quelle manière tu l'envoies à tes abonnés.

Et je te signale qu'un petit nettoyage de code ne serait pas superflu, ça permet de voir beaucoup plus rapidement la possibilité d'erreurs. On peut même utiliser des CSS, y compris dans une letre périodique, exemple :

Code : Tout sélectionner

<?xml version="1.0" encoding="iso-8859-1"?>
<!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=iso-8859-1" />
    <title>
      Librairie Giard
    </title>
    <style type="text/css">
/*<![CDATA[*/
    div.c9 {text-align: center}
    span.c8 {color: #A0A0A0; font-family: 'Times New Roman'; font-size: 80%}
    span.c7 {color: #FFFFFF; font-family: 'Times New Roman'; font-size: 80%}
    span.c6 {color: #000000; font-family: Verdana; font-size: 80%}
    tr.c5 {background-color: #CC3467}
    td.c4 {background-color: #CC3467}
    span.c3 {color: #FFFFFF; font-family: 'Times New Roman'}
    td.c2 {background-color: #330065}
    div.c1 {color: #A0A0A0; font-family: 'Times New Roman'; font-size: 80%; text-align: center}
    /*]]>*/
    </style>
  </head>
  <body>
    <div class="c9">
      <table width="640" border="0" align="center" cellpadding="0" cellspacing="0" summary="">
        <tr>
          <td colspan="5">
            <div class="c1">
              Si vous n'arrivez pas &agrave; lire ce message, cliquez <a href="#">ici</a>
            </div>
          </td>
        </tr>
        <tr>
          <td width="26">
            <img src="http://www.librairiegiard.com/lettre/images/hg.gif" width="26" height="100" alt="" />
          </td>
          <td class="c2" colspan="3" align="left">
            <img src="http://www.librairiegiard.com/lettre/images/logo.gif" alt="Librairie Giard" />
          </td>
          <td width="26">
            <img src="http://www.librairiegiard.com/lettre/images/hd.gif" width="26" height="100" alt="" />
          </td>
        </tr>
        <tr class="c5">
          <td height="72">
            &nbsp;
          </td>
          <td class="c4" width="481" height="72" align="left">
            <span class="c3">Livres anciens / Catalogue en ligne / Antique and rare books</span>
          </td>
          <td class="c4" width="57" align="right">
            <img src="http://www.librairiegiard.com/lettre/images/lila.gif" alt="Librairie Giard" width="49" height="49" />
          </td>
          <td class="c4" width="50" align="right">
            <img src="http://www.librairiegiard.com/lettre/images/slam.gif" alt="Librairie Giard" width="49" height="49" />
          </td>
          <td height="72">
            &nbsp;
          </td>
        </tr>
        <tr>
          <td valign="top">
            <img src="http://www.librairiegiard.com/lettre/images/brdr.gif" alt="" />
          </td>
          <td colspan="3" align="left">
            <table width="100%" border="0" cellspacing="0" cellpadding="10" summary="">
              <tr>
                <td width="50%" valign="top">
                  <span class="c6">Madame, Monsieur,<br />
                  <br />
                  Nous sommes heureux de vous compter parmi nos clients.<br />
                  Vous recevez nos catalogues papier, vous nous avez rencontr&eacute; sur les salons de bibliophilies ou sur internet. Dor&eacute;navant nous vous proposons un acc&egrave;s direct &agrave; notre fonds d'ouvrages anciens, des rendez-vous sur les salons de bibliophilie, d'exprimer vos d&eacute;siderata, sur notre nouveau site : <strong>www.librairiegiard.com</strong>.</span>
                </td>
                <td valign="top">
                  <img src="http://www.librairiegiard.com/lettre/images/livres.jpg" alt="Librairie Giard" width="320" height="213" />
                </td>
              </tr>
              <tr>
                <td width="50%" colspan="2" valign="top">
                  <span class="c6">R&eacute;guli&egrave;rement nous vous proposerons de t&eacute;l&eacute;charger notre catalogue de nouveaut&eacute;s. D&egrave;s &agrave; pr&eacute;sent t&eacute;l&eacute;chargez notre dernier catalogue <strong>n° 150</strong> :...<br />
                  <br />
                  A tr&egrave;s bient&ocirc;t sur notre site!<br />
                  Librairie Giard<br /></span>
                </td>
              </tr>
            </table>
          </td>
          <td>
            <img src="http://www.librairiegiard.com/lettre/images/brdr.gif" alt="" />
          </td>
        </tr>
        <tr>
          <td class="c4" height="40">
            &nbsp;
          </td>
          <td class="c4" height="40" colspan="3" align="left">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" summary="">
              <tr>
                <td>
                  <span class="c7">E-mail : [email protected]</span>
                </td>
                <td align="right">
                  <span class="c7">Web : www.librairiegiard.com</span>
                </td>
              </tr>
              <tr>
                <td>
                  <span class="style4">Renseignements : +33 (0)3 20 42 1 86</span>
                </td>
                <td align="right">
                  <span class="c7">17 bis, rue Saint Jacques F-59000 Lille</span>
                </td>
              </tr>
            </table>
          </td>
          <td class="c4" height="40">
            &nbsp;
          </td>
        </tr>
        <tr>
          <td rowspan="2">
            <img src="http://www.librairiegiard.com/lettre/images/bg.gif" width="26" height="40" alt="" />
          </td>
          <td height="21" colspan="3" align="center" valign="bottom">
            <span class="c8">Pour vous d&eacute;sabonner de la lettre d'information,cliquez <a href="#">ici</a></span>
          </td>
          <td rowspan="2">
            <img src="http://www.librairiegiard.com/lettre/images/bd.gif" width="26" height="40" alt="" />
          </td>
        </tr>
        <tr>
          <td height="19" colspan="3" valign="bottom" style="background-image: url('http://www.librairiegiard.com/lettre/images/ssbg_foot.gif');">
            &nbsp;
          </td>
        </tr>
        <tr>
          <td colspan="5">
            &nbsp;
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

Pas plus propre comme ça ?

Enfin bon, il y a mieux bien entendu, on pourrait tout mettre en page en CSS et virer les tableaux complètement, mais il faudrait un petit peu plus de travail au départ. Par contre, ça serait plus facile pour l'envoyer aussi bien au format HTML qu'au format texte brut selon le choix de l'internaute.

13 sept. 2007, 18:36

je te remercie pour tes observations.
Effectivement, la page s'affiche bien dans un navigateur. Mon pb est de savoir s'il est possible d'envoyer une page html contenant de la mise en forme et des images à un client qui utilise hotmail par exemple...tout ça sans utiliser de logiciel spécialisé.
Comment le faire?

13 sept. 2007, 18:43

-tu bien regardé la doc sur la fonction mail() de PHP ?

mail html

Qui est en ligne