Your SlideShare is downloading. ×
34 Mots de html pour créer sa Newsletter
34 Mots de html pour créer sa Newsletter
34 Mots de html pour créer sa Newsletter
34 Mots de html pour créer sa Newsletter
34 Mots de html pour créer sa Newsletter
34 Mots de html pour créer sa Newsletter
34 Mots de html pour créer sa Newsletter
34 Mots de html pour créer sa Newsletter
34 Mots de html pour créer sa Newsletter
34 Mots de html pour créer sa Newsletter
34 Mots de html pour créer sa Newsletter
34 Mots de html pour créer sa Newsletter
34 Mots de html pour créer sa Newsletter
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

34 Mots de html pour créer sa Newsletter

3,391

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,391
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. 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
  2. 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.
  3. 34 mots de HTML à connaître pour créer sa newsletter 2 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>
  4. 34 mots de HTML à connaître pour créer sa newsletter 3 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.
  5. 34 mots de HTML à connaître pour créer sa newsletter 4 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 ¼ ¼ &frac14; ç ç &ccedil; Ç Ç& &Ccedil; ½ ½ &frac12; à à &agrave; À À &Agrave; ¾ ¾ &frac34; â â & acirc;   &Acirc; www.sasreference.fr € € &euro; é é &eacute; É É &Eacute; © © &copy; è è &egrave; È È &Egrave; ™ ™ &trade; ê ê &ecirc; Ê Ê &Ecirc; ‰ ‰ &permil; ë ë &euml; Ë Ë &Euml; < < &lt; î î &icirc; Î Î &Icirc; ≤ &#8804 ; &le ; ï ï &iuml; Ï Ï &Iuml; > &#62 ; &gt ; ô ô &ocirc; Ô Ô &Ocirc; ≥ ≥ &ge ; ù ù &ugrave; Ù Ù &Ugrave; ± ± &plusmn; ü ü &uuml; Ü Ü &Uuml; ≈ ≈ &asymp;
  6. 34 mots de HTML à connaître pour créer sa newsletter 5 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é.
  7. 34 mots de HTML à connaître pour créer sa newsletter 6 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>
  8. 34 mots de HTML à connaître pour créer sa newsletter 7 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>
  9. 34 mots de HTML à connaître pour créer sa newsletter 8 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
  10. 34 mots de HTML à connaître pour créer sa newsletter 9 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>
  11. 34 mots de HTML à connaître pour créer sa newsletter 10 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.
  12. 34 mots de HTML à connaître pour créer sa newsletter 11 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. <!-- et --> 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>
  13. 34 mots de HTML à connaître pour créer sa newsletter 12 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

×