Code HTML dans les signature

[Virginie31]

Bonjour,

André Jorge a dernièrement indiqué, dans un topic concernant des messages d'erreur survenant lors de la modification de signatures ("signature trop longue"), que "600 caractères sont alloués pour la signature, ce qui comprend le texte simple, mais aussi le code".

Autrement dit, quand vous écrivez le mot "bonjour" en gras, au lieu de vous "coûter" 7 caractères, il vous en coûte 14 parce qu'il y a du code derrière, pour mettre en gras.

Le code, pour ceux qui n'en n'auraient jamais entendu parler, ce sont les "balises" qui apparaissent dans le texte de votre signature lorsque vous mettez un mot en gras, un autre en italique, etc.

Ces balises peuvent être, par exemple :

[b]   [/b]pour mettre en gras
[i]   [i]pour l'italique
etc.

Or, il se peut que, selon la façon dont il est attribué, il y ait du code redondant dans vos signatures, qui "mange" des caractères qui pourraient être utilisés pour écrire un ou deux mots supplémentaires.

Je me propose donc, de façon tout-à-fait modeste, de vous donner quelques petits "trucs" pour comprendre le HTML et éviter ce code redondant. Pour éviter de rendre le contenu trop long et indigeste, je vais le publier en plusieurs messages.

Voici le plan de mon "mini-court" :

1. Principe de base du HTML (version très simple)

2. Comment gagner de la place dans sa signature -1 -

3. Comment gagner de la place dans sa signature - 2 -

4. Que faire si...

[Virginie31]

1. Principe de base du HTML (version très simple)

Première chose : le code HTML est vraiment quelque chose de très simple, à la portée de tous, donc pas de craintes à avoir !

Fonctionnement de base : ce code consiste à placer entre balises, les mots, phrases, paragraphes que l'ont veut souligner, mettre en gras, agrandir, rétrécir, mettre en bleu, etc.

On va partir sur un exemple. J'écris une phrase : "vive le HTML", et je veux mettre en gras "HTML". Il me suffit d'encadrer ce mot avec les balises correspondant à "gras". En anglais, gras se dit "bold". C'est ce b de "bold" que vous allez retrouver dans les balises. Il va donc falloir indiquer à votre ordinateur qu'à partir de ce mot, on va mettre en gras ; vous ouvrez alors la balise juste avant le mot ciblé:

vive le [b]HTML

Si vous vous arrêtez là, tout ce qui suivra continuera d'être gras. Il va donc falloir indiquer à l'ordinateur : "à partir d'ici, on arrête de mettre les mots en gras". Pour cela, on ferme la balise. Une fermeture de balise, ça se fait ainsi : [/nom de la commande]. Autrement dit, pour le gras : .

Ce qui au final, nous donne :

 vive le [b]HTML[/b]

.

Et, une fois qu'on quitte l'éditeur de texte : vive le HTML

Pas très compliqué donc...

[Virginie31]

2. Comment gagner de la place dans sa signature -1 -

Mais alors, si je dois mettre ces balises, où est-ce que je peux gagner de la place dans ma signature ?

Bonne question, parce qu'effectivement, vous ne pourrez jamais avoir de mot en gras sans avoir recours à ce code ; et ce code vous "mange" 7 caractères.

Bon ; là où vous pouvez agir, c'est sur la redondance du code. Comme on vient de le voir, si j'ouvre une balise "gras" et que je ne la referme pas, tout ce qui suivra sera en gras. De même, si j'ouvre une balise de taille et que je ne la referme pas, tout ce qui suivra sera de la même taille.

Attention, avant d'aller plus loin, ayez bien en tête que pour que le code HTML soit correct, il FAUT qu'il y ait une balise d'ouverture et une balise de fermeture. Je ne suis donc pas en train de vous dire : ne fermez pas vos balises, ça fera moins de caractères !

Ce que j'essaye de vous expliquer, c'est qu'il faut profiter des balises ouvertes. Je vais prendre l'exemple de ma signature :

Virginie

******

Mémoire, mon petit mémoire, si seulement tu voulais bien te faire tout seul...

2008-2009 : PE1 à Orléans !

Dans cette signature, je veux que mon texte soit de taille 1, en violet, que les deux premiers éléments soient en gras et que le troisième soit en italique. A partir de là, je peux faire deux manipulations ; je vais commencer par la "mauvaise" manip", celle que certains font peut-être (par "mauvaise" manip, je ne veux pas dire qu'il ne faut surtout pas le faire ; disons que c'est avec cette manipulation qu'on se retrouve avec beaucoup de code redondant et donc mangeur de caractères) :

- j'ai dit que je voulait mon texte en violet ; je sélectionne donc les éléments de mon texte un par un, et avec le bouton couleur, je leur applique la couleur ;

- ensuite, je veux mon texte en taille un ; même manip que ci-dessus avec le bouton "taille" cette fois-ci ;

- je veux les deux premiers éléments en gras ; je sélectionne donc un par un ces éléments, et je leur applique du gras ;

- je veux le troisième élément en italique ; je lui applique donc de l'italique.

Ce qui me donne :

[color="#800080"][size=1][b]Virginie[/b][/size][/color]

[color="##800080"][size=1][b]******[/b][/size][/color]

[color="#800080"][size=1][i]Mémoire, mon petit mémoire, si seulement tu voulais bien te faire tout seul...[/i][/size][/color]
[color="#800080"][size=1]2008-2009 : PE1 à Orléans ![/size][/color]

Et j'obtiens comme signature :

Virginie

******

Mémoire, mon petit mémoire, si seulement tu voulais bien te faire tout seul...

2008-2009 : PE1 à Orléans !

En soit, c'est ce que je voulais. Ce qui est embêtant, c'est que le code prend de la place : 181 caractères à lui tout seul !... Je vous propose de le réduire à 54 caractères !

[Héloïse44]

J'attends la suite avec impatience! Merci pour ton cours de balisage...

[Virginie31]

3. Comment gagner de la place dans sa signature - 2 -

Ce n'est pas de la magie, c'est de la logique

A noter que, bien évidemment, la différence de nombre de caractères variera selon votre signature ; il se pourra même que ce nombre ne change pas, si vous attribuez des caractéristiques différentes à chacune des lignes de votre texte.

On a vu que le principe du HTML, c'était de continuer à attribuer une caractéristique (gras, par exemple), tant que la balise n'était pas refermée.

Ce qui signifie, en toute logique, que si je veux écrire :

Virginie

******

en gras, je n'ai pas besoin de fermer la balise "gras" après mon prénom, puisque la suite peut être en gras aussi. Je la fermerai donc après les étoiles.

Ainsi, mon code sera :

[b]Virginie
******[/b]

Concrètement, ça signifie que lorsque vous êtes dans l'éditeur de signature, au lieu de sélectionner le premier élément, de lui attribuer la caractéristique "gras", puis le deuxième élément et de lui attribuer la caractéristique "gras", vous sélectionnez les deux en même temps, et vous leur attribuez une seule fois cette caractéristique.

Je reprends les éléments de ma signature et je vous montre le code correspondant en dessous :

- je veux que mon texte soit de taille 1 : ça concerne tout le texte, donc je sélectionne tout mon texte avant de lui attribuer une taille => 15 caractères utilisés au lieu de 60

[size=1]Virginie

******

Mémoire, mon petit mémoire, si seulement tu voulais bien te faire tout seul...
2008-2009 : PE1 à Orléans ![/size]

- je veux que mon texte soit violet : idem, ça concerne tout mon texte, donc je sélectionne tout et j'applique la couleur => 25 caractères au lieu de 100

[size=1][color="#800080"]Virginie

******

Mémoire, mon petit mémoire, si seulement tu voulais bien te faire tout seul...
2008-2009 : PE1 à Orléans ![/color][/size]

- je veux que les deux premiers éléments soient en gras : je sélectionne ces deux éléments pour ensuite appliquer le style "gras" => 7 caractères au lieu de 14

[size=1][color="#800080"][b]Virginie

******[/b]

Mémoire, mon petit mémoire, si seulement tu voulais bien te faire tout seul...
2008-2009 : PE1 à Orléans ![/color][/size]

- je veux que le troisième élément soit en italique : je ne sélectionne que cet élément et j'appuie sur "italique" => 7 caractères d'une façon comme d'une autre

[size=1][color="#800080"][b]Virginie

******[/b]

[i]Mémoire, mon petit mémoire, si seulement tu voulais bien te faire tout seul...[i]
2008-2009 : PE1 à Orléans ![/color][/size]

Et on obtient ça :

Virginie

******

Mémoire, mon petit mémoire, si seulement tu voulais bien te faire tout seul...

2008-2009 : PE1 à Orléans !

Vous voyez une différence avec ce qu'on obtient avec la "mauvaise" méthode ? Visuellement non, mais là, si je voulais, je pourrais ajouter 127 caractères supplémentaires, qui étaient "mangés" par le code dans ma première version !

[Héloïse44]

[Virginie31]

4. Que faire si...

Mon petit "cours" touche à sa fin. Je ne prétends pas avoir fait de vous des pros du HTML, pas avec ce que je vous en ai dit, mais j'espère au moins que ça vous a permis de comprendre un peu mieux les choses. Bien sûr, s'il y a des questions, des éclaircissements nécessaires j'y répondrai avec plaisir

Je voudrais finir par un ou deux exemples qui pourraient vous aider si vous vous retrouvez dans devant ce type de situations.

a. Que faire si je souhaite mettre en gras (ou italique, ou en couleur) deux éléments qui ne se suivent pas immédiatement ?

On va dire qu'on a les phrases suivantes :

Ce cours, c'est pas mal.

C'est pas ça qui va faire de nous des pros du HTML.

Mais bon, hein ça prétendait pas le faire

Je veux que mes phrases 1 et 3 soient en gras, mais pas celle du milieu ; là, vous n'aurez pas le choix : il faudra attribuer des balises à la première phrase ET des balises à la troisième :

[b]Ce cours, c'est pas mal.[/b]
C'est pas ça qui va faire de nous des pros du HTML.
[b]Mais bon, hein ça prétendait pas le faire :)[/b]

Je rappelle que si vous laissez la balise gras de la première phrase ouverte, votre deuxième phrase se retrouvera aussi en gras. Donc là, pas la choix !

b. Que faire si je souhaite modifier ma signature, qui comporte déjà plein de code ? Est-ce que je ne risque pas d'obtenir de la redondance inutile dans mon code ?

Eh bien, ça dépend de ce que vous voulez ajouter, mais oui, il risque d'y avoir redondance. Plusieurs solution s'offrent à vous :

#1 : j'ai pas envie de m'embêter avec ça, donc j'efface tout, je retape ma signature entièrement puis j'attribue proprement le code à mes divers éléments

#2 : plutôt que de tout effacer, je me contente de n'effacer que le code de mon texte ; je modifie ma signature puis j'attribue le nouveau code proprement (cette technique peut être un peu plus chronophage que la première)

#3 : j'ai envie de toucher un peu au code ; j'efface les balises qui me semblent superflues, et je contrôle en appuyant sur "vérifier ma signature" le résultat de mes suppressions. Si vous voyez apparaître une balise dans votre texte de signature (celui dans lequel vous n'êtes pas censé voir le code), ça signifie que cette balise n'a pas été ouverte avant. Supprimez là tout simplement si la mise en forme de votre texte vous convient.

Comme il est un peu tard, je ne vois pas trop d'autres situations pour le moment ; si vous souhaitez me soumettre des questions sur votre code, n'hésitez pas !

Juste une chose : mettez moi ce code dans le corps du message. Pour que je puisse le voir, il faut que ce code soit encadré des balises

[code]copiez-collez ici le code de votre texte[//code] Cette balise se trouve à côté du bouton "citation"

Vous aurez sans doute remarqué que ma balise de fermeture comporte deux / ; il ne faut pas le faire, c'était juste pour l'exemple : l'éditeur refuse en effet d'afficher la balise

Voilà...j'espère que ce cours vous aura quelque peu éclairés !

écrite correctement.

[Virginie31]

Merci Héloïse

Je n'avais pas vu que j'avais déjà une lectrice à cette heure !

Je suis désolée s'il y a quelques fautes...mes yeux commencent à se croiser

[dada]

J'adore comprendre et apprendre là j'ai tout en un, c'est top

Bon en fait j'appliquais le principe sans savoir les tenants et les aboutissants, maintenant je sais

Merci de ce cours très simple et explicite

[Héloïse44]

C'est du grand art!

Je suis sûre que ça en aidera beaucoup d'entre nous. Merci encore.

[MaitresseS]

C'est vrai que c'était intéressant. Merci pour le petit cours.

[Aquacrea]

Tout pareil ! Merciii !