Information En général, l’apparence d’un caractère est définie par 6 caractéristiques modifiables :

1. la police qui détermine son apparence
2. la taille du caractère
3. la graisse du caractère qui affecte l’expansion du caractère (gras ou plus ou moins large, etc…)
4. l’inclinaison
5. la décoration : souligné, barré
6. la position par rapport à la ligne de base de l’éciture. Cette caractéristique relève plus du positionnement du texte que du caractère. Nous l’examinerons dans une prochaine page.

Observez
Vous vous souvenez que nous avions travaillé sur un document qui avait comme titre Mon premier document. Nous y avions écrit une seule ligne :La première ligne de mon site. Lancez l’exécution de BlueGriffon. Normalement si le fichier enregistré précédemment est encore disponible, il devrait être ouvert automatiquement dans l’éditeur et vous devriez voir le contenu déjà examiné dans la page « Premiers pas ». Vous reconnaissez dans la partie gauche, de la copie d’écran ci-dessous, une liste déroulante sur laquelle s’affiche le mot paragraphe.

Faites

La partie droite de la copie d’écran ci-dessus montre la liste ouverte. Vous pourrez constater qu’elle offre 10 choix. Ces choix correspondent à des types de bloc qui sont eux-mêmes associés à des types de caractères avec leurs composantes.
Cliquez dans la ligne écrite, puis écrivez à la place de La première… : « Un titre de niveau 1 ». Sélectionnez dans la liste déroulante, Un titre de niveau 1, puis validez. Sélctionnez Un titre de niveau 2 et écrivez « Un titre de niveau 2 ». Validez. Renouvelez les opérations ci-dessus, jusqu’à obtenir le résultat affiché par la copie d’écran ci-dessous.

Information Comme vous pouvez le constater, nous retrouvons les balises html, dont nous avions commencé à parler dans cette page. Vous devinez aisément que les balises <h1>,<h2>… <h6>, correspondent aux différents niveaux de titre. Notez que l’association entre une balise ouvrante <h1> et la balise fermante correspondant </h1> détermine un bloc dans lequel est écrit le texte. En l’absence de toute autre information, nous devons penser que les composantes taille, police, couleur, graisse, inclinaison, décoration sont prédéfinies par le système, ou mieux encore définies dans les spécifications de l’html. Nous ne pouvons que constater des variations de taille, le titre 1 utilise des caractères d’une taille plus grande que le style 2,etc…Lee caractères du style adresse sont inclinés et sont probablement en italique, le texte préformaté est écrit avec des caractères de police et de taille différents.

Faites
Cliquez dans chacune des lignes écites dans la fenêtre visualisation et observez les icônes de la barre d’outils qui sont activées en fonction de la ligne dans laquelle vous avez cliqué. Ci-dessous vous trouverez deux copies d’écran qui mettent en évidence les outils de modification des caractères.

Observez
Cette copie d’écran vous montre la barre des outils lorsque l’on clique dans la ligne Un titre de niveau 1 Je vous invite à observez les trois zones encadrées en rouge, vert et bleu.

1. Le cadre rouge est une liste déroulante qui permet de sélectionner un type de bloc d’écriture. Sa valeur est Titre de niveau 1
2. Le cadre vert entoure toutes les icônes qui permettent de modifier l’une ou l’autre des composantes d’un caractère. Dans ce cas là nous voyons que l’icône est activée. Cette icône permet de mettre en gras un ou plusieurs caractères sélectionnés.
3. le cadre bleu entoure une liste déroulante dont la valeur sélectionnée est Largeur variable. Nous verrons plus en détails le contenu de cette liste.

 Nous allons maintenant utiliser les icônes de modification des caractères accessibles dans la barre des outils. Elles sont au nombre de six…De gauche à droite vous trouvez la mise en :

1. emphase du texte sélectionné
2. emphase forte du texte sélectionné
3. type code du texte sélectionné
4. gras du texte sélectionné
5. italique du texte sélectionné
6. italique du texte sélectionné

Observez
L’observation de la copie d’écran ci-dessus permet de constater que certaines modifications activent deux icônes. C’est le cas pour les « styles » Emphase et Emphase forte. Pour l’un l’icône est associée à l’icône , pour l’autre l’icône est associée à l’icône . Il est encore plus intéressant d’examiner, sur la copie d’écran ci-dessous, le code produit par BlueGriffon. Nous pouvons distinguer deux types de codes :

Observez
En effet, nous pouvons distinguer deux types de code :

1. des balise html simple, comme <em>, <strong> ou <code>
2. une autre balise <span> ouvrante et fermante. La différence avec les balise précédentes et que la blaise ouvrante contient une information supplémentaire de la forme <span style= »font-weight: bold; »>. Cela mérite un petit détour par la balise span et les feuilles de style (CSS).

Information …la première <p> est une balise bloc, la deuxième, <span> est une balise dite inline, ce qui signifie que :

1. <p> affiche le texte en commençant par un retour à la ligne et un saut de ligne, après la balise fermante, il y a également un retour à la ligne. Tout le texte contenu entre la balise ouvrante et fermante est formaté de la même manière..sauf…
2. si entre la balise <p> et la balise </p>, le navigateur rencontre une balise <span>. Dans ce cas tout le texte contenu entre les balises <span> et </span> sera affiché dans la continuité du flux qui le précède et qui le suit, sans retour à la ligne ni saut de ligne.

Information Vous constatez que cette liste est une liste de polices de caractères. Pour modifier la police d’une phrase particulière, d’un mot, il suffit de sélectionner le texte à modifier à l’aide de la souris, d’ouvrir la liste, de cliquer sur le nom de la police de caractère désirée.

Une phrase en police Courier

Une phrase en police arial

Une phrase en police Century Schoolbook

Une phrase en police Beta Dance

Mais n’oubliez pas que le navigateur qui affichera votre texte va fonctionner sur une machine qui ne contiendra peut-être pas la police fantaisiste dont vous raffolez. Donc pour un affichage assuré, choisissez des polices classiques.

Information Vous constaterez d’abord que le menu Format double les outils accessibles directement par les icônes de la barre des outils. Par exemple, on y retrouve les outils Gras, Italique, Souligné,etc.. Mais on y découvre aussi certains outils qui ne sont pas disponibles dans les barres d’outils comme Barré. Notez que le B est souligné ce qui pourrait indiquer que cette fonctionnalité est accessible par le raccourci clavier Maj+b. Essayez de tester en sélectionnant dans l’éditeur de BlueGriffon, un mot, puis appuyez sur la touche majuscule et b, le mot sélectionné devrait être affiché barré. Mais…il n’en est rien…

---

Un mot de plus pour vous faire noter la présence de la balise span dans ce menu Format. Pour mettre un caractère, un mot, une phrase en relief, sélectionnez le texte voulu appuyez sur la touche n et le texte en question devrait être encadré par <span>. Devrait être, mais les raccourcis ne sont pas définis par défaut. Consulter la page À propos de, elle est consacrée à la configuration des raccourcis clavier.

---

Reportez-vous au paragraphe de cette page pour une première approche de cette balise ou à cette page pour une étude plus approfondie.