Pour gérer l’affichage d’une carte, Anki utilise le langage HTML, qui est un langage de description de document utilisé par les sites Web.

Le sujet du HTML étant trop vaste, il sort du carde de ce tutoriel (et ce n’est pas mon domaine de prédilection ;). Nous allons juste aborder les bases simples pour pouvoir faire un minimum, mais là encore je vous renvoi à des tutoriels sur Internet comme Alsacreations ou W3schools (EN).

Principes du HTML

Le HTML c’est du texte que l’on va décorer avec des “balises” pour indiquer comment afficher ce texte. Par exemple le HTML :

<p>Voici un paragraphe
sur deux lignes <br/>
avec un <strong>mot</strong> en gras.</p><p>Deuxième paragraphe.</p>

Va s’afficher:

• La balise <p> indique qu'on ouvre un nouveau paragraphe
• La balise <br/> indique qu’on passe à la ligne suivante
• La balise <strong> indique qu’on commence a écrire en gras
• La balise </strong> indique qu’on arrête d’écrire en gras.
• La balise </p> indique qu’on ferme/termine le paragraphe

On constate plusieurs choses:

• Les balises qui “englobent” du contenu (comme <p> ou <strong>) ont une balise de début “<p>” (balise ouvrante) et une balise de fin “</p>” (balise fermante) se sont les mêmes balises mais le “/” (slash) indique la balise fermante
• Les balises qui n’englobent pas de contenu comme le saut à la ligne “<br/>” sont seules et ont le slash à la fin du nom de la balise (balise autofermante)
• Même si le paragraphe est écrit sur trois lignes, il n’en affiche que deux : le HTML ne comprends pas les “sauts de ligne” dans le texte, il les transforme en “espace”
• Même si le deuxième paragraphe est écrit sur la même ligne que la fin du premier il est affiché “en dessous” du premier.
• Il y a une différence de comportement entre la balise <p> et la balise <strong> : les balises <p> s’affichent les une en dessous des autres alors que la balise <strong> ne change pas le cours du texte affiché. La balise <p> est une balise de type “bloc” car elle affiche son contenu d’un seul bloc, alors <strong> est une balise “inline” dont le contenu reste sur la ligne où elle s’affiche. Voir le paragraphe sui dessous pour plus d’informations.

Il existe énormément de balises différentes pour afficher différents contenus, dans ce tutoriel on va utiliser deux balises simples et “génériques” :

• <div> pour les blocs
• <span> pour les inlines

A savoir que l’on peut mettre des <div> dans des <div> ca peut surprendre mais c’est très utilisé.

Les balises peuvent contenir des informations complémentaires appelés “attributs”, par exemple :

<p id="paragraphe" class="important">Mon paragraphe.</p>

Cette balise <p> contient deux attributs:

• id : contenant “paragraphe” (cet attribut permet de définir un nom à un élément HTML)
• class : contenant “important” (cet attribut permet de définir des styles, voir plus bas)

Là encore il existe une multitude d’attribut.

Les balises ‘block’ et ‘inline’

Comme indiqué précédemment nous avons deux types de balises ayant un comportement différents à l’affichage. Les types bloc vont afficher leur contenu les un en dessous des autres, alors que les types inline vont s’afficher les uns après les autres sur la même ligne.

Le code HTML suivant affiche les mêmes bloc de texte, mais une fois avec des <div> (bloc) et ensuite avec des <span> (inline).

<div class="red">Ceci est mon premier texte.</div>
<div class="blue">Un autre texte.</div>
<div class="green">On raconte encore sa vie.</div>
<div class="gray">Et on finit avec ce texte.</div>
<br/>
<span class="red">Ceci est mon premier texte.</span>
<span class="blue">Un autre texte.</span>
<span class="green">On raconte encore sa vie.</span>
<span class="gray">Et on finit avec ce texte.</span>

Voici le rendu

On constate bien que les <div> se placent les uns en dessous des autres, alors que les <span> sont plus les uns après les autres.

On va généralement utiliser les bloc pour structurer la page en zone ou bloc où placer les informations (avec des cadres, des fonds), alors qu’avec les inline on va plutot faire ressortir les mots ou groupe de mot.

Principe des styles CSS

On peut modifier les informations d’affichage (appelées propriétés) du HTML (couleur, taille, etc…) pour chaque balise avec un attribut qui s’appelle “style”. Toutefois c’est fastidieux de devoir écrire toutes les propriétés pour chaque élément (balise). Pour simplifier tout ca nous avons le CSS (Cascading Style Sheet) qui est un autre langage qui va nous permettre de définir les propriétés en sélectionnant les éléments destinataires.

Un style CSS ressemble à ca :

.mot-important {
  color: blue;
  font-weight: bold;
}

• une instruction avant une accolade ouvrante “{” qui s’appelle un sélecteur (.mot-important)
• une liste de propriétés entre deux accolades “{…}”

Le sélecteur permet d’indiquer quels éléments on va modifier. Les propriétés indiquent quelles informations on va définir sur les éléments sélectionnés.

La notion de classe

Un point fondamental dans le CSS c’est la notion de “classe”, class en anglais. Il s’agit d’un nom que l’on créé pour définir un ensemble de propriétés. On peut ensuite ajouter ce nom dans l’attribut class d’une balise, et tous les éléments ayant cette classe recevra les propriétés. Si on change les propriétés de cette classe, tous les éléments correspondants changeront automatiquement.

Autre point intéressant c’est qu’une balise peut avoir plusieurs classes dans son attribut class.

Sélection d’éléments

La encore sujet extrêmement vaste, mais voici les plus utilisés:

• div : ce sélecteur va sélectionner TOUTES les balises <div>. En gros il suffit de mettre le nom de la balise sélectionner tout ces éléments
• .ma-classe : ce sélecteur va sélectionner TOUTES les balises qui possède la classe ma-classe dans son attribut class. ATTENTION le point ‘.’ est très important c’est ce qui permet d’indiquer que c’est une classe que l’on cherche pas un élément
• div.ma-classe : ce sélecteur va sélectionner uniquement les <div> qui possèdent la classe ma-classe. Attention à ne pas mettre d’espace avant le point (voir plus bas)
• #nom : ce sélecteur va sélectionner les éléments qui ont un attribut id contenant nom. Attention au dièse.
• a b c : ce sélecteur va sélectionner les c qui sont inclus dans un élément b lui même inclus dans un élément a. Attention ce sont les espaces qui sont importants ici.

Pour le dernier sélecteur a, b ou c est l’un des sélecteurs précédents. C’est utile pour cibler précisément un élément, par exemple le HTML:

<div id="header">
  <div class="title">Mon titre</div>
  <span class="title">Mon en-tête</span>
</div>
<div id="body">
  <div class="title">Mon paragraphe</div>
  <div>Mon contenu</div>
</div>
<div id="footer">
  <div class="title">Ma conclusion</div>
  <div>Mon pied</div>
</div>

avec les styles:

.title {
  font-weight: bold;
}

#header div.title {
  font-size: 32px;
}

#footer .title {
  color: blue;
}

affiche

• Le premier sélecteur .title sélectionne toutes les balises (<span> et <div>) contenant la classe title et met le contenu en gras.
• Le second sélecteur #header div.title sélectionne “toutes les balises <div> contenant une classe title se trouvant dans un élément qui possède un id ’header’”. Ces éléments ont une taille de caractères plus grande.
• Le dernier sélecteur #footer .title sélectionne “toutes les balises contenant une classe title se trouvant dans un élément qui possède un id ‘footer’”.

Définition des propriétés

La encore nous avons une multitude de propriétés CSS disponibles (voir CSS Tutorial (w3schools.com)), afin de spécifier comment afficher l’élément.

Chaque propriété est définie entre les accolades selon le format suivant : NOM**:** VALEUR**;**

Faites attention au deux-points ‘:’ et au point-virgule ‘;’, ils sont importants, si on les oublis ou qu’on les placent mal, le style sera mal interprété et ne s’affichera pas comme vous voulez.

Les propriétés les plus courantes sont :

• color : (color: blue;) défini la couleur du texte. La valeur est une couleur nommée (’blue’, ‘red’, etc…) ou un code couleur informatique du style #347F54FF. Plus de précision ici Colors Tutorial (w3schools.com)
• background-color : (background-color: gray;) cette fois on défini la couleur du “fond” de l’élément
• font-size : (font-size: 32px;) taille de la police de caractère CSS Font Size (w3schools.com)
• font-weight: (font-weight: bold;)permet de définir la “graisse” d’un texte (mettre en gras) CSS Font Style (w3schools.com)