34 Mots de html pour créer sa Newsletter

www.sasr
eference
.fr

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.

veronique.bourcier@sasreference.fr
www.sasreference.fr

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

34 mots de HTML à
connaître pour
créer sa newsletter
I. DES BALISES POUR ENRICHIR UN TEX TE BRU T

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.
www.sasreference.fr

<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.


II. PERSONNALISER SON TEX TE

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>
www.sasreference.fr

<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>


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 mi nuscule 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%'.
www.sasreference.fr

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.


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; Â Â Â
www.sasreference.fr

€ € € é é é É É É
© © © è è è È È È
™  ™ ê ê ê Ê Ê Ê
‰  &permil; ë ë ë Ë Ë Ë
< < < î î î Î Î Î
≤ &#8804 ; &le ; ï ï ï Ï Ï Ï
> &#62 ; &gt ; ô ô ô Ô Ô Ô
≥ ≥ &ge ; ù ù ù Ù Ù Ù
± ± ± ü ü ü Ü Ü Ü
≈ ≈ ≈


III. LES LIENS HYPER TEX TES

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, il
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>
www.sasreference.fr

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é.


IV. LES IMAGES

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>
www.sasreference.fr

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>


V. LA MISE EN PAGE

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.
www.sasreference.fr

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>


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>
www.sasreference.fr

</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


VI. LE CAS PARTICUL IER DE LA BALISE STYLE

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=.
www.sasreference.fr

<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.

<STYLE type="text/css">
h3.menu h3.article
{ {
font-size:18px; font-size:18px;
color:steelblue; color:pink;
font-weight:bold; font-weight:bold;
font-family:verdana; font-family:verdana;
} }
</STYLE>


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

<STYLE type="text/css"> Ici, le cadre se site alors à 50
div.contenu pixels du haut et à 200 de pixels
{ du bord gauche. Ce cadre a une
position:absolute; largeur de 600 pixels et haut de
top:50px; 100 pixels.
left:200px;
width:600px;
height:100px;
}
</STYLE>

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;
www.sasreference.fr

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.

VII. ANNEXE

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>, il 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
www.sasreference.fr

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>


VIII. LE BLOG SASREFERENCE.FR

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.
www.sasreference.fr

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
veronique.bourcier@sasreference.fr
www.sasreference.fr, Blog pour se former au logiciel de programmation SAS
Le Forum la Référence SAS

34 Mots de html pour créer sa Newsletter

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie 34 Mots de html pour créer sa Newsletter

Ähnlich wie 34 Mots de html pour créer sa Newsletter (20)

Mehr von Alain Planger

Mehr von Alain Planger (20)

34 Mots de html pour créer sa Newsletter