34 mots de HTML pour créer sa newsletter

34 mots de HTML à connaître pour créer sa newsletter Un guide pour débutant Finis les templates de newsletters figés, impersonnels et les logiciels onéreux pour créer ses courriels. Aujourd’hui, le langage HTML est accessible à tous. Ce guide s’adresse autant aux bloggeurs soucieux d’avoir des emails en accord avec le design de leur site qu’aux programmeurs SAS devant automatiser l’envoi d’emails de qualité professionnelle.

www.sasr

eference

.fr

[email protected] www.sasreference.fr

ww

w.s

as

refe

ren

ce

.fr

1 34 mots de HTML à connaître pour créer sa newsletter

34 mots de HTML à

connaître pour

créer sa newsletter

II.. DDEESS BBAALLIISSEESS PPOOUURR EENNRRIICCHHIIRR UUNN TTEEXXTTEE BBRRUUTT

Les pages disponibles sur le Web sont à la base des fichiers contenant du texte brut

avec une extension .HTML, tellement simples qu’ils sont lisibles par des éditeurs de

texte rustiques comme Bloc-Note. Je vous conseille de télécharger le logiciel

NotePad++ beaucoup plus sympathique pour programmer.

Pour affiner la présentation, le texte est entouré de mots-clés donnant des ordres :

met en gras, écrit en bleu, insère une image, ajoute un lien, etc.

Un mot-clé s’écrit entre les symboles inférieurs e t supérieurs. Pour englober le texte,

il faut distinguer le mot-clé de début du mot-clé de fin. Une barre inclinée (slash) est

ajouté au mot-clé de fin.

<début du changement>Mon Texte</fin du changement>

Ces mots-clés se nomment dans le jargon BALISE. Je vais me tenir à ce terme

pour le reste de l’article.

Ces balises peuvent être affinées en ajoutant des styles.

SPAN est en fait une balise passe partout. Dans sa forme basique, elle ne donne

aucun changement.

<span>Mon Texte</span>

Elle permet d’intégrer un style lorsqu’aucune autre balise n’est présente autour du

texte. Il existe donc souvent deux manières de donner un ordre.

http://sourceforge.net/projecNotePad++

ww

w.s

as

refe

ren

ce

.fr


IIII.. PPEERRSSOONNNNAALLIISSEERR SSOONN TTEEXXTTEE

1. Mettez en gras (bold), FONT-WEIGHT:BOLD <strong>en gras</strong>

<span style='font-weight:bold'>en gras</span>

STRONG est l’appellation utilisée par Wordpress mais le B de bold <B></B>

fonctionne aussi.

2. Mettez en italique (italic), FONT-STYLE:ITALIC <i>en italique</i>

<span style='font-style:italic'>en italique</span>

3. Centrez (center), TEXT-ALIGN:CENTER <center>centré</center>

<span style='text-align:center>centré</span>

L’alignement à gauche (LEFT) est l’alignement par défaut. Vous pouvez vous servir

également de RIGHT et JUSTIFY avec les styles.

Ici, vous noterez que c’est le mot américain CENTER et non le mot anglais CENTRE

qui est utilisé. La raison ? Internet vient des Etats-Unis.

4. Soulignez (underline), TEXT-DECORATION:UNDERLINE <u>souligné</u>

<span style='text-decoration:underline'>souligné</span>

Pour tracer un trait au dessus du texte , utilisez OVERLINE et pour le barrer, c’est

LINE-THROUGH. Pour enlever le soulignement des liens hypertextes, il faudra

utiliser TEXT-DECORATION:NONE. Par exemple :

<a style='text-decoration:none' href=''>non soul.</span>

ww

w.s

as

refe

ren

ce

.fr


5. Mettez en petite majuscule (small capitals), FONT-VARIANT:SMALL-CAPS

<span style='font-variant:small-caps'>Petite Maj</span>

6. Mettez en majuscule (to uppercase), TEXT-TRANSFORM:UPPERCASE <span style='text-transform:uppercase'>Majuscule</span>

Vous pouvez aussi mettre tout le texte en minuscule avec LOWERCASE ou encore

la première lettre de chaque mot en majuscule avec CAPITALIZE.

7. Mettez en exposant (superscript), VERTICAL-ALIGN:SUPER

Le 1<sup>er</sup> gagnant.

Le 1<span style='vertical-align:super;'>er</span> gagnant

SUB met un texte en indice (subscript) : <SUB> et VERTICAL-ALIGN :SUB;.

8. Changez la police (font), FONT-FAMILY:ARIAL <font face='arial,sans-serif'>Arial si disponible</font>

<span style='font-family:arial,sans-serif;'>Sinon </span>

9. Changez la taille du texte (size), FONT.SIZE: 24PT <font size=24pt>Taille de 24 pt</font>

<span style='font-size: 24pt'>Taille de 24 pt</span>

Vous pouvez aussi remplacer la valeur brute par un pourcentage : <span style='font-

size: 90%'.

10. Utilisez des balises pour vos titres, <H1> </H1> <h1>Utiliser la taille la plus grande pour le titre</h1>

Les titres peuvent être affichés avec les balises <h1> à <h7> où <h1> est la taille la

plus grande.

11. Agrandissez l’espace entre les lettres, LETTER-SPACING <span style='letter-spacing:10;'>Mon texte</span>

Ce style reste d’une utilisation très occasionnelle.

ww

w.s

as

refe

ren

ce

.fr


12. Changez l’espace entre les lignes, LINE-HEIGHT <span style='line-height:2;'>

Ma première ligne

<br/>

Ma seconde ligne

</span>

Ce style est également d’un usage peu fréquent.

13. Changez la couleur (color) du texte, COLOR:ORANGE

<font color=orange>Mon texte est orange</font>

<span style='color:orange;'>Mon texte est orange</span>

Les couleurs les plus courantes ont un nom. Pour les autres, il faudra utiliser un code

à 6 chiffres précédé du symbole dièse #. Je vous invite à vous reporter à l’article

Choisir ses Couleurs www.sasreference.fr/2008/11/21/couleurs_sas pour trouver le

code couleur qui vous correspond.

Ici aussi, c’est le mot américain COLOR qui est utilisé et non le mot anglais

COLOUR.

14. Insérez des caractères spéciaux (special characters)

Aujourd’hui, le texte accentué est reconnu par les navigateurs. Plus besoin de taper

é pour afficher un é. Parfois, il est plus facile de taper le code que le caractère

lui-même. Voici une liste de symboles les plus courants.

espace &nbps; oe œ &oelig; Œ Œ OElig

¼ ¼ ¼ ç ç ç Ç Ç& Ç

½ ½ ½ à à à À À À

¾ ¾ ¾ â â & acirc; Â Â Â

€ € € é é é É É É

© © © è è è È È È

™ ™ ê ê ê Ê Ê Ê

‰ &permil; ë ë ë Ë Ë Ë

< < < î î î Î Î Î

≤ &#8804 ; &le ; ï ï ï Ï Ï Ï

> &#62 ; &gt ; ô ô ô Ô Ô Ô

≥ ≥ &ge ; ù ù ù Ù Ù Ù

± ± ± ü ü ü Ü Ü Ü

≈ ≈ ≈

http://www.sasreference.fr/2008/11/21/couleurs_sas

ww

w.s

as

refe

ren

ce

.fr


IIIIII.. LLEESS LLIIEENNSS HHYYPPEERRTTEEXXTTEESS

15. Renvoyez vers une page internet avec <A HREF=''> </A> <a href='http://www.sasreference.fr'>En savoir plus</A>

N’oubliez pas ici HTTP dans votre adresse.

16. Donnez un titre à votre lien avec TITLE=

<a href='http://www…' title='Blog SAS'>En savoir plus</A>

Le titre améliore le référencement du lien par les moteurs de recherche.

17. Renvoyez vers une partie de la page avec <A NAME=''> </A>

Vous avez une liste des rubriques abordées en début d’articles. En cliquant dessus,

votre lecteur peut directement atteindre le paragraphe qui l’intéresse. Pour cela, i l

faut procéder en deux étapes.

Tout d’abord, ajoutez un point d’ancrage sur le point à atteindre

<a name='partie01'></a>Partie 1

Ensuite, ajoutez le lien vers le point d’ancrage.

<a href=#partie01>Lire Partie 1</a>

Donnez le chemin d’accès complet d’accès si vous vous référez à une autre page.

<a href=http://www…/exemple.html#partie01>Lire P1</a>

18. Invitez à l’envoi d’un email avec MAILTO: <a href='mailto:…@sasreference.fr'>Véro</a>

Avec MAILTO:, le logiciel de messagerie installé sur l’ordinateur s’ouvre. L’email du

destinataire s’inscrit automatiquement.

19. Prédéfinissez l’objet (subject) de l’email avec ?SUBJECT=

<a href='mailto:contact@…fr?subject=Inscription'>Véro</a>

L’affichage des caractères spéciaux passent en général mal avec ce procédé.

ww

w.s

as

refe

ren

ce

.fr


IIVV.. LLEESS IIMMAAGGEESS

20. Insérez une image <IMG SRC='…/monlogo.gif'> <img src='http://www.sasreference.fr/images/monlogo.gif'>

La balise pour les images est une balise unique. Il n’y a pas de balise de fin.

On préfèrera les images au format .gif, .jpg/jpeg.

Pour la création d’un site avec de multiples images, il est courant de sauvegarder

toutes les images dans un même répertoire.

Pour une newsletter, vous devrez avoir mis vos images sur un serveur du réseau

Internet et donner un chemin d’accès absolu comme dans l’exemple au dessus. Pour

ma part les images sont sauvegardées sur le serveur fourni par Wordpress.

21. Donnez un titre à l’image, ALT= et TITLE= <img src='http://www…/monlogo.gif' title='Blog SAS'>

Le texte dans TITLE s’affiche au passage de la souris.

<img src='http://www…/monlogo.gif' alt='Blog SAS'>

Le texte dans ALT apparaîtra sur l’écran si, pour des raisons techniques, votre image

ne s’affiche pas.

Ces deux textes sont lus par les moteurs de recherches. Il facilitera votre

référencement chez Google, Yahoo…

22. Changez la hauteur de l’image, HEIGHT= <img src='http:…/logo.gif' height=3cm>

La hauteur se change avec HEIGHT et la largeur avec WIDTH. Mais évitez de mettre

les deux au risque de déformer l’image.

23. Enlevez la couleur d’un lien autour d’une image, BORDER:NONE <a href='http:…'>

<img src='http: …/logo.gif' style="border:none;">

</a>

ww

w.s

as

refe

ren

ce

.fr


VV.. LLAA MMIISSEE EENN PPAAGGEE

24. Ajoutez des puces (bullets) avec <LI> </LI> <ul>

<li>Ma première puce</li>

<li>Ma seconde puce</li>

</ul>

25. Ajoutez une numérotation (numbering) avec <OL> </OL> <ul>

<ol>Mon premier numéro</ol>

<ol>Mon second numéro</ol>

</ul>

26. Ajoutez un trait de séparation avec <HR /> <hr />

La balise HR est une balise qui ne se ferme pas. Vous pouvez personnaliser

la couleur

la largeur (une valeur absolue en pixel ou un relative avec un pourcentage)

l’alignement avec un style. I

<hr style="color:red; width=50%;align=left;" />

Vous pouvez personnaliser la couleur de cette ligne.

27. Passez à la ligne à la fin du paragraphe avec < P> </P>

<p>Mon premier paragraphe</p>

28. Indentez le texte de mon paragraphe, PADDING-LEFT:30px

<p style="padding-left: 30px;">Mon texte indenté</p>

ww

w.s

as

refe

ren

ce

.fr


29. Passez à la ligne avec <BR>

<br />

Comme les balises d’image <IMG SRC=> ou la balise pour tracer un trait <HR>, la

balise de passage à la ligne ne fonctionne pas par paire.

30. Ajoutez une citation (quote), <BLOCKQUOTE> </BLOCKQUOTE>

<blockquote>Ma citation</blockquote>

31. Insérez un tableau pour personnaliser la mise en page

Parfois les tableaux peuvent servir dans votre mise en page.

Ce petit exemple crée un tableau (table) avec deux lignes (TR for Table Row).

Pour enlever les bordures enlevez l’option border='1' ou écrivez border='0'.

<html>

<body>

<table border='1'>

<tr>

<td>A1</td>

<td>A2</td>

</tr>

<tr>

<td colspan=2>B1/B2</td>

</tr>

</table>

</body>

</html>

La première ligne est composée de deux cellules contenant respectivement les

valeurs A1 et A2.

La seconde ligne est composée de la fusion de deux cellules (colspan=2) et contient

la valeur B1/B2.

Lien : http://www.commentcamarche.net/contents/html/htmltable.php3

http://www.commentcamarche.net/contents/html/htmltable.php3

ww

w.s

as

refe

ren

ce

.fr


VVII.. LLEE CCAASS PPAARRTTIICCUULL IIEERR DDEE LLAA BBAALLIISSEE SSTTYYLLEE

32. Adaptez des balises standards avec <STYLE> </STYLE>

Pour personnaliser leur apparence de manière global, au moyen des balises

<STYLE> </STYLE>.

Cette balise <STYLE> </STYLE> sera à l’intérieur des balise <HEADER>

</HEADER> du programme pour une page web classique et dans les balises

<BODY></BODY dans le cas d’une newsletter, le header n’étant pas pris en compte

par la plupart des messageries.

Voici un premier exemple avec la balise H3.

<h3>Mon premier titre</h3>

La balise <H3> est définie comme une balise utilisant un texte de 18px, de couleur

STEELBLUE, mis en gras avec VERDANA comme police de caractères.

<STYLE type="text/css">

h3

{

font-size:18px; font-weight:bold;

color:steelblue; font-family:verdana;

}

</STYLE>

33. Nommez vos styles, l’option CLASS=

Maintenant, imaginez que vous voulez deux types de balise <h3>, une pour votre

menu et une pour le titre de vos articles. Vous donnerez alors un nom à chaque type

de balise avec l’option CLASS=.

<h3 class=menu>Au programme</h3>

<h3 class=article>Personnaliser ses titres avec SAS</h3>

Les deux styles seront préalablement définis dans la balise STYLE.


h3.menu

{

font-size:18px;

color:steelblue;

font-weight:bold;

font-family:verdana;

}

h3.article

{

font-size:18px;

color:pink;

font-weight:bold;

font-family:verdana;

}

</STYLE>

ww

w.s

as

refe

ren

ce

.fr


34. Créez des cadres avec les balises <DIV> </DIV>

Une alternative aux balises neutres <SPAN> </SPAN> sont les balises <DIV>

</DIV>. Elles servent à définir des blocs de texte. Voici un exemple de

personnalisation de la balise DIV


div.contenu

{

position:absolute;

top:50px;

left:200px;

width:600px;

height:100px;

}

</STYLE>

Ici, le cadre se site alors à 50 pixels du haut et à 200 de pixels du bord gauche. Ce cadre a une

largeur de 600 pixels et haut de 100 pixels.

La POSITION du cadre a une position absolue (ABSOLUTE) et non relative

(RELATIVE). Préférez ce positionnement pour vos newsletters.

Avec la position absolue, vous définissez toujours par rapport à la fenêtre de votre

navigateur. Avec une position relative, si vous avez plusieurs cadres imbriqués les

uns dans les autres, la position est définie par rapport au cadre supérieur.

D’autres styles : Les styles présentés tout au long du document peuvent également

être utilisés dans les balises <STYLE> </STYLE>. A cette liste, ajoutez :

background:darkslateblue;

border-style:solid;

border-width:1px;

border-color:darkgreen;

margin:50px;

padding:20px;

BORDER–STYLE : Si votre bord doit être visible, vous pouvez choisir le style de

bordure : pointillés (DOTTED), tirets (DASHED), une ligne (SOLID), une double ligne

(DOUBLE), etc.

PADDING et MARGIN: L’espace séparant le bord de votre cadre et l’extérieur du

cadre est défini avec le style MARGIN tandis que l’espace entre le bord du cadre et

le texte à l’intérieur du cadre est donné par PADDING.

Dans tous les cas, la valeur s’appliquer à tous les côtés ou à un côté en particulier.

margin:20px; or margin-left:20px etc.

boder-color:red; or border-left-color:red; etc.

ww

w.s

as

refe

ren

ce

.fr


VVIIII.. AANNNNEEXXEE

Je veux faire plusieurs choses à la fois <strong><i><u>gras, italique et souligné</u></i></strong>

Notez ici que si les balises de début et de fin sont jointes, les lignes ne se croisent

pas. C’est important de prendre cette bonne habitude pour des raisons de lisibilité

notamment.

Je veux ajouter des commentaires

Les commentaires dans votre fichier .html ne seront pas visibles sur le net. Ils vous

faciliteront la compréhension de votre code. A utiliser sans modération.



J’ajoute entre guillemets du texte avec des apostrophes

Si vous voulez ajouter des apostrophes dans un texte entre guillemets vous devrez

obligatoirement utiliser des guillemets doubles et non des guillemets simples.

J’écris ma première page HTML

Afin que les balises soient interprétés comme ordre dans un navigateur (Firefox,

Internet Explorer, etc.), débutez votre fichier texte par <HTML></HTML>

sauvegardé avec une extension .HTML. Entre les balises <HTML> </HTML>, i l y

a deux parties principales, l’en-tête (header) et le corps du document (body). L’en-

tête permet de sauvegarder des informations globales comme le titre de la page

(title). Le contenu du corps est affiché dans la page du navigateur. Les headers et

les styles inclus dans la balise <BODY style='background:grey;'> ne sont pas

pris en compte lorsque vous copiez votre page HTML. Voici un exemple.

<html>

<header>

<title>La Référence SAS</title>

</header>

<body>

<p>

<i><u>gras, italique</u></i>

</p>

</body>

</html>

ww

w.s

as

refe

ren

ce

.fr


VVIIIIII.. LLEE BBLLOOGG SSAASSRREEFFEERREENNCCEE..FFRR

Optimisez l’usage des bases de données avec le logiciel SAS Le logiciel SAS est sert à exploiter de bases de données. Certains secteurs

requièrent des équipes de programmeurs SAS: essais cliniques, finance,

télécommunication) et d’autres non (milieu hospitalier, services publics locaux).

Apprenez un métier : programmeur SAS Au rythme de deux articles par semaine, le blog se propose d’expliquer les

connaissances de bases pour programmer avec le langage SAS. Ici, pas de diplôme

à la clé mais des explications basées sur trois ans de programmation dans le secteur

pharmaceutique pour acquérir une compétence, un métier : une vraie formation

professionnelle continue.

Travaillez en équipe : une communauté francophone active Le blog c’est aussi une communauté ayant à sa disposition un forum pour échanger

leur point de vue sur des ouvrages, s’entraider dans son travail, se retrouver lors des

rencontres d’utilisateurs. Les lecteurs peuvent diffuser des offres emplois, publier

un CV et ainsi cibler son public, rédiger un article, etc. par simple email à l’auteur

Restez en contact avec l’actualité

En outre, le blog parle de l’actualité SAS. Les rencontres autour du logiciel SAS sont

annoncées. Les acteurs majeurs reçoivent des invitations pour être interviewés. Les

écoles présentent leur formation pour faciliter le choix des futurs étudiants.

Recevez des services privilégiés en vous inscrivant à la newsletter

Une newsletter est publiée tous les mois. Elle résume l’actualité du blog, du forum,

les rencontres à venir pour les lecteurs les plus occupés. Elle donne aussi accès à

des services uniques comme des exercices de programmation avec leur solution.

Rejoignez Véronique Bourcier sur Viadeo.fr

Véronique Bourcier

[email protected]

www.sasreference.fr, Blog pour se former au logiciel de programmation SAS

Le Forum la Référence SAS

http://www.viadeo.com/recherche/profil/index.jsp?memberId=00223b8hdpzsst6o&distance=2&queryString=v%E9ronique+bourcier

mailto:[email protected]

http://www.sasreference.fr/

http://www.facebook.com/group.php?gid=62742793112&ref=mf

Documents

34 mots de HTML pour créer sa newsletter