Il n’est pas obligatoire d’être un expert en HTML pour réussir votre marketing direct électronique mais quelques connaissances vous seront donc fort utiles pour gagner en efficacité et être autonome.
Un emailing est en général en mode « multipart » ce qui signifie que le message est envoyé en plusieurs parties complémentaires :
- Une partie en HTML qui est lue par la plupart des logiciels de messagerie
- Une autre partie en version texte pour certains terminaux mobiles notamment.
Le code HTML permet d’afficher des contenus visuellement riches et il est utilisé pour le Web et l’emailing notamment. La difficulté à anticiper pour vos campagnes de marketing direct électronique est qu’un code optimisé pour une page Web ne l’est pas nécessairement pour un emailing.
HTML signifie Hypertext Markup Language. C’est un format informatique conçu pour afficher correctement les pages web. C’est un langage sous forme de balise (markup) qui permet d’écrire de l’hypertexte. C'est-à-dire des pages reliées entre elle par des liens !
Si vous ne savez pas de quoi il s’agit, vous pouvez ouvrir une page Web dans votre navigateur. Par exemple, vous pouvez consulter notre exemple.html.
En ouvrant le code source (clic droit dans la page, Affichez le code source ou Code source de la page), vous verrez du code HTML qui aura peut-être l’air un peu effrayant. Ne fuyez pas et astreignez-vous à en comprendre les basiques.
Concrètement, le code HTML est donc constitué de balises. Chacune des balises indique à votre navigateur Web ce qu’il doit afficher. Ces codes sont entourés par les caractères <> et ne sont visibles qu’en regardant le code source.
A noter que de nombreuses balises existent en deux états : ouvertes et fermées.
Par exemple
<HTML> est une balise qui signifie que la page est en langage HTML. Ce sera vrai jusqu’à la même balise fermée avec la barre / : </HTML>.
<BODY> indique que commence le contenu de la page (et </BODY> indique donc la fin du contenu de la page).
<BR/> signifie retour à la ligne. Cette balise n’a pas de fermeture.
<STRONG></STRONG>Entre ces deux balises le texte sera en gras.
<EM></EM> Entre ces deux balises le texte sera en italique.
Un lien vers l’adresse d’autre page est indiqué sous la forme <a href= »/adressedemonlien »>Nom de mon lien</a>. On parle aussi d’URL (Uniform Ressource Locator) pour indiquer l’adresse d’une page Web.
Par exemple :
<a href="http//www.sendethic.com" target="_blank">Sendethic</a>
Pour des mises en forme en tableau vous allez utiliser les balises
<TABLE>
<TR>
<TD>
</TD>
</TR>
</TABLE>
Par exemples avec 2 lignes et 2 colonnes, le code HTML aurait cette apparence
<TABLE border="1"> <TR> <TD>Colonne 1 ligne 1 </TD> <TD>Colonne 2 ligne 1</TD> </TR> <TR> <TD>Colonne 1 ligne 2</TD> <TD>Colonne 2 ligne 2</TD> </TR> </TABLE>
Et l’affichage aura cette apparence.
| Colonne 1 ligne 1 | Colonne 2 ligne 1 |
| Colonne 1 ligne 2 | Colonne 2 ligne 2 |
Dans la plupart des balises, des attributs, c'est-à-dire des compléments d’information, donnent des indications complémentaires sur l’affichage. Par exemple, dans le tableau ci-dessus, border signifie que le tableau à une bordure de 1.
Dans l’exemple de lien ci-dessus, l’attribut target= »_blank » indique que la page doit s’ouvrir dans une nouvelle fenêtre.
Une image est insérée sous la forme <img scr= »url_de_mon_image »>. Par exemple :
<img src="https://www.sendethic.com/v2/img/logo-top.png" width="327" height="65" alt="logo Sendethic">
https://www.sendethic.com/v2/img/logo-top.png indique l’adresse de l’image.
Les attributs width indique sa largeur, height sa hauteur et alt permet de proposer un texte alternatif qui s’affiche en cas de non affichage de l’image ou pour les non-voyants.
Il existe des centaines de balises et d’attributs qui permettent de définir l’affichage de vos pages. Pour en savoir plus sur le HTML, vous pouvez vous référer à ce site qui présente un tutoriel très pédagogique.
Par ailleurs, il est possible aussi de définir des styles graphiques à appliquer dans toute une page ou sur l’ensemble d’un site. On parlera alors de feuille de style ou CSS (Cascading Style Sheet) qui est une manière spécifique de faire du HTML, par exemple sur la page web de exemple2.html.
En ouvrant le code source (clic droit dans la page, Affichez le code source ou Code source de la page),
Les éléments de style sont déclarés en haut de la page au sein d’une balise
<style type= »text/css »>
</style>
Dans exemple2.html, on remarque que la class Style1 indique .Style1 {font-weight: bold; font-family: Arial}. Cela signifie que chaque fois qu’un mot aura le style1 alors il sera en police Arial et en gras.
Le Style2 précise .Style2 {font-family: Times New Roman; font-size:36px}
Cela signifie que chaque fois qu’un mot aura le style2, il sera en police Time New Roman de taille 36.
Le bénéfice de faire des pages Web en CSS est de gagner en légèreté (puisqu’il est inutile de répéter à chaque fois la totalité des indications de styles) et des sites web plus faciles à créer et à mettre à jour. La CSS peut être déclarée dans le haut de la page comme dans exemple2.html ou dans un fichier spécifique externe (mais ce dernier type de CSS est interdit dans le cas des Emailings).
Pour en savoir plus sur le HTML, vous pouvez vous référer au tutoriel créé par le W3C qui est l’instance qui normalise le Web dans le monde.