CheatSheet HTML
La majorité des éditeurs wysiwyg propose un mode code qui permet de modifier directement votre contenu sous sa forme html.
Petit message aux développeurs qui passerait par ici, cet article s’adresse aux personnes ayant peu voir aucune connaissance en HTML.
Certains clients veulent parfois interagir directement sur le code, ne serait-ce que pour corriger un retour à la ligne ou un lien mal généré par l’éditeur wysiwyg.
Le but de cet article n’est pas de faire de vous un expert html mais de vous aider à vous y retrouver si jamais vous devez, un jour, mettre les mains sous le capot.
Une balise
Rappelons qu’un ordinateur n’a pas grand chose d’intelligent et ne fait qu'interpréter vos demandes. C’est pourquoi il est important de bien structurer son contenu à l’aide de balise qui se présente comme ceci:
<nom_de_balise>La majorité des balises s’écrivent par paires: une balise ouvrante qui indique le début de l'élément et une balise fermante qui indique la fin de l'élément.
<nom_de_balise>contenu</nom_de_balise>Certaine exception existe comme la balise image qui s’écrit comme ceci:
<nom_de_balise />Titre:
h1, h2, h3, h4, h5, h6
Les balises h sont utilisées pour définir les titres et sous-titres dans une page web.
L’ordre est important à respecter car il est utilisé par le moteur de recherche pour jauger l’importance de votre contenu.
Généralement, dans le cas d’un cms, le h1 représente le titre de votre page ou de votre article. Vous aurez par conséquent rarement un <h1> dans votre contenu.
Mais n’hésitez pas à structurer votre contenu en utilisant les h2, h3, h4, h5 et h6.
Visuellement, les balise <h?> affiche leur contenu de manière bien plus visible mais il faut garder à l’esprit que ce n’est pas un outil de mise en forme.
<h2>Mon sous-titre</h2>
<p>Mon contenu faisant partie du titre ci-dessus.</p>
<h3>Mon sous-sous-titre</h3>
<p>Mon contenu faisant partie du titre ci-dessus.</p>
<h2>Mon autre sous-titre</h2>
<p>Mon contenu faisant partie du titre ci-dessus.</p>Paragraphe: <p></p>
Tout texte se retrouve entre des balises <p> car tout texte fait partie d’un paragraphe, même une simple ligne.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Vestibulum massa dui, rutrum eu velit eu, pulvinar iaculis tortor.</p>Votre contenu peut contenir autant de balise <p> que vous aurez de paragraphe.
Retour à la ligne: <br>
Au sein d’un paragraphe, si vous souhaitez faire un retour à la ligne, appuyer sur enter ne suffira pas.
<p>Ma première ligne.
Ma deuxième ligne.</p>Ne fera pas de retour à la ligne car l’html ne tient pas compte des retour à la ligne, il ne comprend que les balises.
Et la balise <br> est justement là pour signaler un retour à la ligne.
<p>Ma première ligne.<br>Ma deuxième ligne.</p>Ceci écrira bien votre paragraphe en deux lignes.
Petite astuce dans l’éditeur en mode wysiwyg, il vous suffit d’appuyer sur MAJ et suite sur enter pour faire un retour à la ligne sans créer de nouveau paragraphe.
Important:
<strong></strong> / <em></em>
Ces balises sont utilisées pour mettre en évidence un texte important en le rendant plus visible… En gros, <strong> mettra votre texte en gras et <em> en italique.
Mais les rumeurs disent que celà pourrait, dans une faible mesure, impacter l'algorithme des moteurs de recherche. Ne mettez donc pas vos textes en strong/em sans y réfléchir.
<p><strong>Lorem ipsum</strong> dolor sit amet, consectetur <em>adipiscing</em> elit.</p>Tableau: <table></table>
Pour créer un tableau, il faut utiliser une combinaison de plusieurs balises dont la principale qui englobe les autres est <table>.
Vous devez ensuite indiquer les lignes du tableau via la balise <tr> (table row = ligne de tableau).
Ensuite vous indiquer les cellules via les balises suivante:
- <th> pour table header (en-tête du tableau)
- <td> pour table row (ligne du tableau)
- <tf> pour table footer (pied du tableau)
Si on assemble le tout, celà donne une structure comme ceci:
<table>
<tr>
<th>Header1</th>
<th>Header2</th>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
</tr>
<tr>
<tf>Footer1</tf>
<tf>Footer2</tf>
</tr>
</table>Vous aurez donc un tableau contenant:
- Ligne d'en-tête de deux colonnes
- Ligne de contenu de deux colonnes
- Ligne de pied de page de deux colonnes
Liste à puce: <ul></ul>
Pour créer une liste à puces, vous devez utiliser la balise <ul> pour spécifier qu’il s’agit d’une liste. Cette balise contiendra une balise <li> par élément de la liste.
<ul>
<li>Lundi</li>
<li>Mardi</li>
<li>Mercredi</li>
</ul>Liste numérotée: <ol></ol>
La liste numérotée se construit comme une liste à puce à la différence que la balise utilisée est <ol>.
<ol>
<li>Lundi</li>
<li>Mardi</li>
<li>Mercredi</li>
</ol>Image: <img />
Pour insérer une image, rien de bien sorcier mais il va falloir utiliser des attributs.
Les attributs sont des valeurs que l’on peut ajouter dans une balise.
Pour une balise images, nous disposons de:
- src=”” contient l’url de l’image.
- alt=”” contient une description de l’image dans le cas où il y aurait un problème de chargement.
- width=”” spécifie la largeur de l’image en pixel ou % (non obligatoire).
- height=”” spécifie la hauteur de l’image en pixel ou % (non obligatoire).
- title=”” permet l’affichage d’une description lorsque l’on laisse la souris sur l’image.
Une balise image doit donc ressembler à ceci:
<img src="" alt="" title="" />Les attributs alt et title ne sont pas obligatoires mais les moteurs de recherche apprécient ces informations, donc on hésite pas!
Lien: <a></a>
Un lien permet de rendre un texte cliquable afin de diriger votre visiteur vers une autre page de votre site ou vers un autre site.
Tout comme la balise <img>, la balise <a> à besoin d’attribut:
- src=”” contient l’url de l’image.
- title=”” permet l’affichage d’une description lorsque l’on laisse la souris sur l’image.
- target=”” spécifie au navigateur s' il doit ouvrir la page dans le même onglet ou dans un nouvel onglet. (non obligatoire)
- La valeur _blank permet l’ouverture dans un nouvel onglet
Une balise image doit donc ressembler à ceci:
<a src="" title="" target="">Le texte affiche</a>