Styles et autres astuces
Formatage du texte
Grâce au langage HTML, il est possible de varier le style de votre texte pour donner plus de profondeur et de signification à votre présentation. A titre d'exemple, les mots peuvent être mis en italique et en caractères gras. Les marqueurs de formatage se divisent en deux catégories: logiques et physiques. Les marqueurs logiques sont pour ainsi dire illustrés par le formatage de la page actuelle: la citation d'une source ou la mise en valeur d'un détail. L'autre catégorie, les marqueurs physiques, sont plus littéraux: ils signifient au logiciel de navigation de formater un texte spécifiquement en italique, en caractères gras ou dans un autre style. Les concepteurs de pages W3 utilisent souvent les marqueurs logiques: dans ce domaine, des logiciels de plus en plus perfectionnés leur permettent une utilisation plus poussée de certains marqueurs. Ce qui n'enlève rien aux marqueurs physiques: ils sont plus faciles à mémoriser que les marqueurs logiques, spécialement lorsqu'il s'agit de mettre quelques mots en italique ou en caractères gras. (Personnellent, je préfère les marqueurs physiques et j'utilise rarement les marqueurs logiques.) Tous ces marqueurs se programment de la même façon: vous placez un marqueur d'ouverture (sans la barre oblique) avant le texte choisi et un marqueur de fermeture (avec la barre oblique) à la fin du texte. Supposons que je veuille mettre une partie du texte suivant en caractères gras:
Je vous souhaite la bienvenue sur mon site. S'il vous plaît, écrivez-moi si l'occasion se présente.Je veux attirer l'attention sur le fait que je supplie mes lecteurs de m'écrire. Je décide donc de mettre 'S'il vous plaît' en caractères gras. Je marque donc comme ceci:
Je vous souhaite la bienvenue sur mon site. <B>S'il vous plaît</B>, écrivez-moi si l'occasion se présente.En utilisant le marqueur de caractères gras, j'obtiens le résultat suivant:
Je vous souhaite la bienvenue sur mon site. S'il vous plaît, écrivez-moi si l'occasion se présente.
Soyez sans crainte! L'utilisation de ces marqueurs de formatage du texte est vraiment facile. Après quelques pratiques, vous comprendrez parfaitement leur signification. Voici la liste des marqueurs physiques et logiques les plus communs.
Styles physiques
- <B> et </B> sont utilisés pour mettre le texte en caractères gras.
- <I> et </I> sont utilisés pour mettre le texte en italique.
- <TT> et </TT> vous donneront un texte style machine à écrire et à police de caractères fixes.
Styles logiques
- <EM> et </EM>
- Accentué. Utilisé pour attirer l'attention, pour mettre l'emphase sur le texte qui apparaît alors en italique et, parfois, en caractères gras. Exemple: Si vous aimez les Rolling Stones, visitez leur page W3 à http://stones.com.
- <CITE> et </CITE>
- Pour citer des livres, des films, etc. Apparaît en italique. Exemple: Jean-Claude Guédon discute de l'Internet et du cyberespace dans La planète cyber.
- <CODE> et </CODE>
- Pour inclure les marqueurs dans le texte visualisé. Police de caractères fixe. Exemple:
10 if x=y then go to 40
- <KBD> et </KBD>
- Pour afficher un texte style clavier. Police de caractères fixes. Exemple: Pour vous procurer Le guide de l'Internet, inscrivez Guide de l'internet.
- <STRONG> et </STRONG>
- Pour accentuer fortement le texte. Caractères gras. Exemple: Si vous avez des problèmes, veuillez contacter le responsable du site.
- <VAR> et </VAR>
- Pour représenter des variables, i.e. quelque chose que l'utilisateur doit remplacer par une information personnelle. Apparaît en italique. Exemple: REVOIR LA LISTE DES NOMS donne la liste des utilisateurs.
Les caractères spéciaux
Quatre des caractères du jeu de caractères ASCII sont utilisés dans les marqueurs: le chevron gauche (<), le chevron droit (>), l'esperluette (&) et les guillemets ("). Leur utilisation dans un document exige quelques petites précautions. Il en est ainsi des caractères accentués et de quelques autres plus rarement utilisés. Des codes de caractères HTML, placées entre des chevrons, sont alors reconnues comme des instructions par le logiciel de navigation. Voici les plus communs:
<est le code de caractères HTML pour <>est le code de caractères HTML pour >&est le code de caractères HTML pour &"est le code de caractères HTML pour "öest le code de caractères HTML pour ö: la lettre minuscule o avec un trémañest le code de caractères HTML pour ñ: la lettre minuscule n avec un tilde.Èest le code de caractères HTML pour È: la lettre majuscule E avec un accent graveVous trouverez une liste complète des caractères spéciaux et de leurs codes de caractères HTML à http://www.w3.org. Heureusement, vous n'aurez pas à les utiliser très souvent: que vous ne deveniez pas un expert dans ce domaine ne devrait donc pas vous empêcher de dormir.
(N.D.T. Ce qui n'est pas le cas pour la langue française.
Je laisse les caractères accentués dans mes documents HTML. La plupart des logiciels de navigation les acceptent. Je n'ai pas reçu de plaintes jusqu'à ce jour. Mais le meilleur choix est le suivant:
Composez vos documents HTML avec les caractères acccentués, comme vous le faites d'habitude avec votre logiciel de traitement de texte.
Téléchargez gratuitement l'éditeur d'hypertexte WebExpert qui possède les deux fonctions suivantes: Conversion automatique des caractères accentués et Retour vers les caractères accentués.)Le trait horizontal
Le marqueur <HR> génère un trait horizontal de la largeur maximum permise par la fenêtre de votre logiciel de navigation. Il sert à séparer les informations dans un document. J'en fais un usage fréquent dans la présentation de ce cours. Voyez vous-même:
Vous pouvez même faire varier la largeur du trait par cette extension:
<HR WIDTH=X%>Vous n'avez qu'à remplacer la lettre X par le pourcentage de l'écran que le trait horizontal doit occuper. Si vous incluez
WIDTH=50%, il en résulterait ceci:10% donnerait:
et ainsi de suite. De plus, si vous désirez augmenter l'épaisseur du trait, ajoutez l'extension
SIZE=Y, Y étant le nombre de pixels. C'est ce que ce dernier exemple démontre
<HR WIDTH=50% SIZE=20>apparaît finalement comme:
Les traits horizontaux sont réellement commodes mais ne les utilisez que pour de bonnes raisons: un excès pourrait ennuyer les utilisateurs de votre site. (Il n'existe pas de marqueur de fermeture pour le trait horizontal: un seul marqueur <HR> suffit.)
Centrage du texte
Le marqueur qui vous permet de centrer un texte et même des objets sur votre écran, c'est
le marqueur de centrage. Placez <CENTER> avant le texte ou l'objet que vous voulez centrer et </CENTER> après. Comme ceci:
<CENTER>Le marqueur de centrage. </CENTER>
Ce qui donne:
Le marqueur de centrage.
Centrer des textes ou des objet améliore l'apparence d'une page W3. N'oubliez pas le marqueur </CENTER>, sinon tout le reste de votre page sera également centré.Quiz interactif
Vous avez appris comment placer des paragraphes, des en-têtes, des traits horizontaux et différents styles de texte formaté dans un hypertexte. Participez au quiz interactif suivant sur l'hypertexte et vérifiez ce que vous avez retenu. Sans tricher!Quand vous l'aurez terminé, passez à la page suivante ou revoyez la présente leçon.
Ou retournez à la page d'entrée
