Techniques html simples

Retour

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 ».

Paysage

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 :

<a title “désigne une partie de territoire telle que perçue par les populations, dont le caractère résulte de l’action de facteurs naturels et/ou humains et de leurs interrelations“ href=“http://www.coe.int/fr/web/conventions/full-list/-/conventions/webContent/8587941“>Paysage</a>
Le texte qui vient d’être ajouté est en vert.
Si vous passez maintenant le pointeur de la souris sur le mot Paysage, vous verrez apparaître la définition dans un rectangle jaune qu’on appelle une “bulle” (par analogie avec les phylactères des bandes dessinées).

 

Modifier l’interligne
 

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>

N est un nombre entier que vous choisirez inférieur ou supérieur à 30.

Exemple de texte avec un interligne de 20 px. Exemple de texte avec un interligne de 20 px. Exemple de texte avec un interligne de 20 px. Exemple de texte avec un interligne de 20 px. Exemple de texte avec un interligne de 20 px. Exemple de texte avec un interligne de 20 px. Exemple de texte avec un interligne de 20 px.
Exemple de texte avec un interligne de 40 px. Exemple de texte avec un interligne de 40 px. Exemple de texte avec un interligne de 40 px. Exemple de texte avec un interligne de 40 px. Exemple de texte avec un interligne de 40 px. Exemple de texte avec un interligne de 40 px. Exemple de texte avec un interligne de 40 px.
 
 
Traiter du html dans un texte long
 

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”.