Ajouter une ligne de couleur en html

Il suffit d’ajouter le texte suivant

<hr style= »width: 400px; color: firebrick; background-color: firebrick; height: 3px; » />

Pour obtenir


sachant que
width, indique la longueur de la ligne
height, sa hauteur
background-color, sa couleur

Dans WordPress : passer en édition mode « Texte » pour insérer le code

La newsletter : dépassée ou indépassable ?

On estime que 25% des ventes d’album proviennent d’une newsletter. Un pourcentage non négligeable, qui mérite qu’on se penche sur le cas de la newsletter lorsque l’on travaille sur un plan de communication.

Romain Bigay, de l’IRMA, nous explique aujourd’hui comment créer votre newsletter pour qu’elle soit la plus efficace possible.

Romain Bigay est chargé d’information et de ressource à l’Irma, le centre d’information et de ressource pour les musiques actuelles. Il est le rédacteur en chef adjoint du site de l’IRMA.

Créer la maquette de la newsletter

1. Sur une feuille de papier, dessiner, placer les éléments graphiques et les zones de texte fixes et modifiables que vous voulez voir figurer dans votre newsletter.

2. Placer a minima les mentions obligatoires :
Mention obligatoire 1 :
– Vous recevez cet email car vous avez demandé à recevoir les newsletters du site XXX.

Mention obligatoire 2 :
– Cet email ne se lit pas correctement? Affichez-le dans votre navigateur
Variantes :
– Si vous ne parvenez pas à lire correctement cet email, cliquez ici
– Si cet email ne s’affiche pas correctement, consultez la version en ligne

Mention obligatoire 3 :
– Si vous ne souhaitez plus recevoir d’emails de notre part, contactez-nous pour vous désinscrire.

Variante mixte 1 et 3 :
Vous avez reçu cet cet email en tant que membre du Club XXX. Si vous ne souhaitez plus recevoir d’emails, cliquez ici

3. Traduire le schéma en terme de nombre de lignes et de colonnes d’un tableau

4. Sous un éditeur de texte : construire le tableau
exemple : 1 ligne 2 colonnes
<table width= »600px »>
<tr>
<td></td>
<td></td>
</tr>
</table>

Quelques éléments utiles au formatage du tableau :
largeur : width= » »
hauteur : height= » »
couleur de cellule : bgcolor= »#xxxxxx »

5. Placer les mentions obligatoires. Indiquez les liens hypertextes sur les mentions. (balise <a href= »http://monlien.html »>mon lien</a>)

6. Placer les images de la charte graphique (fixes) (balise <img src= » »>)
– pour enlever l’entourage en bleu sur une image cliquable par un lien : ajouter border= »0″
– pour aligner une image en haut d’une cellule : ajouter  valign= »top » dans la balise du tableau <td valign= »top »>

7. Placer les éléments variables (images et textes)
Saut de paragraphe : <p>
Saut de ligne  : <br>

Quelques éléments utiles au formatage du texte :
Centrer : <center>mon texte</center>

Quelques éléments utiles au formatage des polices :
gras : <strong> mon texte en gras</strong>
italique  : <i>mon texte en italique</i>
surligné : <u>mon texte surligné</u>

Style de police : <font face= »ma police« >mon texte</font>
taille de la police : size= »x »
couleur de la police  : color= »#xxxxxx »

8. Envoyer les images et le fichier html par ftp dans le(s) répertoires de votre hébergeur (il est conseillé de créer un répertoire « images » qui contiendra toutes les images).

9. En cas de problème avec les accents à l’affichage, remplacer par le code html correspondant :
Car    Html
â    &acirc;
à    &agrave;
é    &eacute;
ê    &ecirc;
è    &egrave;
ë    &euml;
î     &icirc;
ï     &iuml;
ô    &ocirc;
œ    &oelig;
û    &ucirc;
ù    &ugrave;
ü    &uuml;
ç    &ccedil;
<    &lt;
>    &gt;
ß    &szlig;
ø    &oslash;
Ω    &Omega;
Р   &ETH;
Ø    &Oslash;
Þ    &THORN;
þ    &thorn;
Å    &Aring;

 

 

 

Construire un tableau en HTML

Voici ma méthode mnémotechnique basique pour y arriver sans trop se mélanger les pinceaux sur la base d’un tableau à 2 lignes (balise TR) et 4 colonnes (balise TD).

Un tableau est décrit par différents éléments :

  • L’élément TABLE correspond au tableau lui-même
  • L’élément TR est utilisé pour définir chacune des lignes du tableau
  • L’élément TD est utilisé pour chaque cellule
Dans l’ordre pour faciliter cette construction, je conseille de créer d’abord les lignes  :

<table>
<tr>ma 1ere ligne</tr>
<tr>ma 2nd ligne</tr>
</table>

Ensuite de « découper » chaque ligne en son nombre de colonne (ce qui revient à placer entre ET pour chaque TR quatre fois une balise TD de façon à obtenir le code suivant (et pour clarifier la lecture je passe à la ligne la balise fermante (avec un /devant) :

<table>
<tr>
<td>1ere ligne 1ere colonne</td>
<td>1ere ligne 2e colonne</td
<td>1ere ligne 3e colonne</td>
<td>1ere ligne 4e colonne</td>
</tr>
<tr>
<td>2e ligne 1ere colonne</td>
<td>2e ligne 2e colonne</td>
<td>2e ligne 3e colonne</td>
<td>2e ligne 4e colonne</td>
</tr>
</table>

et ainsi de suite pour les lignes suivantes il suffit d’ajouter un bloc

<tr>
<td>xe ligne 1ere colonne</td>
<td>xe ligne 2e colonne</td>
<td>xe ligne 3e colonne</td>
<td>xe ligne 4e colonne</td>
</tr>

avant </table>
Si vous voulez ajouter une colonne il faudra ajouter pour chaque TR une ligne <td></td> et pour enlever une colonne il faudra supprimer pour chaque TR la colonne en trop.

 

Pour fusionner deux colonnes, utiliser la propriété colspan
<tr>
<td colspan= »2″> fusion de 2 colonnes</td>
</tr>
<tr>
<td> col1 ligne2</td>
<td> col2 ligne2</td>
</tr>
Ce qui a pour résultat :

fusion de 2 colonnes
col1 ligne2 col2 ligne2

 

Pour fusionner des lignes, utiliser la propriété rowspan :
<tr>
<td> col1 ligne2</td>
<td rowspan= »2″> fusion de 2 lignes</td>
</tr>
<tr>
<td> col2 ligne2</td>
</tr>

col1 ligne2 fusion de 2 lignes
col2 ligne2

 

Combinaison :
<tr>
<td>colonne1 ligne1  </td>
<td>colonne2 ligne1  </td>
<td>colonne3 ligne1  </td>
<td>colonne4 ligne1  </td>
<tr>
<td rowspan= »2″> fusion de ligne</td>
<td colspan= »3″> fusion de colonne</td>
</tr>
<tr>
<td colspan= »2″> fusion colonne2et3 ligne3 </td>
<td>colonne3  ligne3</td>
</tr>

a pour résultat :

colonne1 ligne1 colonne2 ligne1 colonne3 ligne1 colonne4 ligne1
fusion de ligne fusion de colonne
fusion colonne2et3 ligne3 colonne3 ligne3

 

Ensuite, reportez vous ici pour compléter selon vos besoins.

Mailpress : une newsletter html sous WordPress

Vous trouverez le plugin à cette adresse :

http://wordpress.org/extend/plugins/mailpress/

Tests en cours, mais cela semble prometteur et une bonne alternative à subscribe2 puisque qu’il est possible de faire des templates sympathiques, de catégoriser les newsletters donc de cibler les internautes afin de ne pas les inonder d’emails qui ne les concernent pas. De plus, les abonnés peuvent choisir leur fréquence de réception et la nature de ce qu’ils souhaitent recevoir. D’autant plus pratique pour moi dans le cadre de ce site que j’ai deux formations différentes, même si dans ce cas précis, elle se retrouvent regroupées sous le même sujet d’une news sous WordPress. A suivre donc !