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 des menus), ou demandez « <>Code source » dans le menu « 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

Notez que pour écrire une ligne entière plus petite, il est parfois plus simple de la mettre en indice ou en exposant.

Procéder de même pour grossir un texte, en remplaçant « small » par « big ».

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

Modifier l’inter-paragraphe

Le même attribut « div style » peut servir à modifier l’espace entre deux paragraphes. La syntaxe est la suivante :

<div style= »margin-bottom: Npx; »>Votre texte</div>

N a par défaut la valeur 30. Lorsque N = 0, il n’y a pas d’espace après les paragraphes. Pour un espace plus grand, donner à N une valeur supérieure à 30.

Essai d’inter-paragraphe 0 px. Essai d’inter-paragraphe 0 px. Essai d’inter-paragraphe 0 px. Essai d’inter-paragraphe 0 px. Essai d’inter-paragraphe 0 px. Essai d’inter-paragraphe 0 px. Essai d’inter-paragraphe 0 px. 

Essai d’inter-paragraphe 0 px. Essai d’inter-paragraphe 0 px. Essai d’inter-paragraphe 0 px.

Essai d’inter-paragraphe 50 px. Essai d’inter-paragraphe 50 px. Essai d’inter-paragraphe 50 px. Essai d’inter-paragraphe 50 px. Essai d’inter-paragraphe 50 px. Essai d’inter-paragraphe 50 px. Essai d’inter-paragraphe 50 px. 

Essai d’inter-paragraphe 50 px. Essai d’inter-paragraphe 50 px. Essai d’inter-paragraphe 50 px.

 
Traiter du html dans un texte long
 

Lorsque votre texte commence à être long, il devient difficile d’en repérer un passage précis dans le code source, d’autant que celui-ci ne reproduit pas la mise en page du mode visuel.

Vous pouvez copier le code source et le coller sur un traitement de texte pour rechercher le passage voulu. Vous pouvez aussi utiliser un éditeur de script, comme par exemple Komposer.

Mais le plus simple, lorsqu’il s’agit simplement d’appliquer une fonction html à un passage court, est de copier ce passage et de le coller sur un article vierge. Ouvrez pour cela une nouvelle fenêtre de votre navigateur et connectez vous une deuxième fois à Topia. Créer un nouvel article et collez-y la portion de texte à traiter. Le code source correspondant est alors beaucoup plus court.

Une fois les attributs html en place, revenez en mode visuel et copier le texte. Lorsque vous le collerez sur votre article d’origine, il s’insérera avec son code source.

Laisser un commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *