Quelques techniques simples en langage html
Le langage html (Hypertext Markup Language) est celui utilisé pour la réalisation de pages web. Vous ne le visualisez pas lorsque vous tapez un texte sur WordPress, mais le logiciel le réalise pour vous à partir des instructions que vous donnez à l’aide des outils et des menus. C’est ce que l’on appelle le “Code source”. Pour le visualiser, cliquez sur le bouton Texte (au dessus et à droite de la barre d’outils).
Par exemple, lorsque vous mettez un groupe de mots en gras, le code source traduit votre commande par : <strong>groupe de mots en gras</strong>. Le mot “strong”, qui n’apparaît pas en mode visuel, est ce que l’on appelle une “balise”. Toute balise html est encadrée par < et >. Il y a toujours une balise de début et une balise de fin, indiquant, dans le cas présent, où commencent et où finissent les caractères gras. La balise de fin s’écrit de la même manière mais est précédée de “/”.
Modifier l’apparence d’un texte
• Pour écrire un texte plus petit que les 14 points du format “Paragraphe”, accédez au code source, repérez le mot ou groupe de mots concernés, et faites-le précéder de <small> et suivre de </small>. La balise “small” réduit la taille de la police d’un cran. Pour la réduire davantage, placez les balises deux ou trois fois (<small><small> et </small></small>).
Exemple de texte écrit plus petit
Exemple de texte écrit encore plus petit
Exemple de texte écrit beaucoup plus petit
Procédez de même pour grossir un texte, en remplaçant “small” par “big”.
• Pour écrire en exposant ou en indice, procédez de même avec les balises <sup> et </sup> pour l’exposant, <sub> et </sub> pour l’indice.
• Pour écrire avec une police différente, utilisez la balise <font face=“nom de la police“> (que vous terminez par </font>). Il est préférable d’indiquer plusieurs noms de police (qui constituent une “famille”), séparés par des virgules, afin que votre texte soit lisible sur tous les types de supports.
Exemple 1 : “Times New Roman, Times, Serif“
Exemple de texte écrit avec une police de la famille Times
Exemple 2 : “Courier New, Courier, mono“
Exemple de texte écrit avec une police de la famille Courrier
Exemple 3 : “Alpha Geometrique, Critter, Cottonwood, Fantasy“
Exemple de texte écrit avec une police de la famille Fantasy
Exemple 4 : “Comic Sans MS, Comic Sans, Lucida Handwriting“
Exemple de texte écrit avec une police cursive
Mettre en place des infobulles (attribut “title”)
Une infobulle est un “message qui apparaît lors du passage du pointeur de la souris sur certains éléments” (Wikipédia). Lorsque le pointeur de votre souris survole les différents boutons de la barre d’outil de WordPress, les messages qui apparaissent à l’écran sont des infobulles. Les infobulles peuvent être attribuées à une image (voir insérer une image) ou à un lien hypertexte.
Pour placer une infobulle sur un lien hypertexte, il est nécessaire de recourir au langage html. Dans l’exemple ci-dessous, on verra comment associer au mot “paysage” une infobulle donnant la définition du terme dans la Convention de Florence, l’hyperlien correspondant renvoyant au texte officiel de la convention sur le site du Conseil de l’Europe.
Sélectionner le mot “paysage” et créer un lien vers la page de destination (voir “Hypertexte” dans le tutoriel « Traitement de texte ».
Cliquer maintenant sur le bouton “Texte” (en haut à droite). Le mot “paysage” auquel vous venez d’attribuer un lien apparaît sous cette forme :
<a href=“http://www.coe.int/fr/web/conventions/full-list/-/conventions/webContent/8587941“>Paysage</a>
Le texte mis ici en vert correspond à l’adresse web vers laquelle renvoie le lien.
Insérer maintenant entre “<a” et “href” l’attribut “title” suivi de la définition entre guillemets :
Sur Topia, l’interligne par défaut est de 30 px (pixels). Vous pouvez l’augmenter ou le diminuer en utilisant l’attribut “div style” que vous placerez en mode “Code source” en respectant la syntaxe suivante :
<div style=“line-height: Npx;“>Votre texte</div>
où N est un nombre entier que vous choisirez inférieur ou supérieur à 30.
La dernière version de WordPress, utilisée ici, permet de localiser facilement en mode “Texte” le passage que vous voulez traiter. Il suffit de le sélectionner en mode “Visuel”, puis de passer en mode “Texte”. Le texte que vous aviez sélectionné apparaît également sélectionné en mode “Texte”.