Mise en forme du texte

Notre curiosité et nos expérimentations techniques étant infinies, les sites internet proposent des contenus multimédia de plus en plus complexes ; un site peut aussi être le support d'une réflexion artistique pleine et entière, se suffisant à elle-même et n'ayant nul besoin d'aucun autre support pour exister.
Ce constat établi, il n'en reste pas moins vrai qu'écrire un contenu textuel pour une page Web est un acte qui présuppose l'acquisition d'un langage; nommé HTML (lien externe), il est interprété par les navigateurs web. Ce langage est dit à balises (lien externe) ou "tag".

Ce code correspond à l'ouverture d'une balise "paragraphe" : <p>.
La fermeture de la balise est tout aussi simple: </p>.
Le texte qui sera contenu entre <p> et </p> sera interprété par votre navigateur comme un paragraphe et rien d'autre qu'un paragraphe.

Il est toujours possible de passer outre la connaissance de ce langage par l'utilisation de logiciels dits wysiwyg, ou de CMS (lien externe) (comme Yeswiki) mais, à voir les résultats qui hantent l'internet, il reste également possible d'affirmer que l'apprentissage progressif du langage HTML est loin d'être une perte de temps... d'autant plus que vous risquez, à tout moment, d'être obligé d'insérer manuellement des séquences HTML dans votre CMS pourtant présenté comme simple d'utilisation.
Il vous en paraîtra encore plus simple dès lors que vous aurez acquis des bases essentielles du langage HTML et de son complément, le langage CSS, qui fera qu'une page sans style, ou dont certains styles préformatés ne vous conviennent pas, ressemblera, enfin, à l'idée que vous vous en faisiez.

La seule ambition de cette page n'est donc que de vous inviter à soulever le capot car elle ne peut, en aucun cas, se substituer aux sommes de connaissances avancées qui feront de vous un développeur web. Elle peut, aussi, avoir quelque début d'utilité à l'utilisation d'un CMS et la compréhension de ses fonctionnalités HTML.

Par quoi commencer ? La question peut trouver réponse en vos préoccupations du moment : images, vidéos, fichiers sons ont un grand succès, certes... mais la mise en page HTML d'un simple texte est la garantie de résultats rapidement acquis et encourageants.


Passé ce stade un peu hermétique de l'écriture de l'en-tête (ci-dessus), il faut matérialiser votre espace de contenu en lui donnant un corps (balise body), un titre (balise h1) et un paragraphe, début de tout discours.

• et votre premier paragraphe... ici, intervient la première subtilité : un paragraphe terminé, un saut de ligne sera automatiquement créé alors que si vous ajoutez une balise br, vous passerez simplement à la ligne.
• Un petit paragraphe pour commencer, mais vous désirez simplement passer à la ligne
  voilà... c'est fait... et fin de ce paragraphe.

Italique (italic), normal, souligné (underline), gras (bold)

Le discours technique du texte numérique prolonge et résulte la longue histoire de l'imprimerie.
Le vocable anglais "font" est, comme son cousin "fonte" utilisé par les imprimeurs fançais, dérivé du latin "fondere" (fondre) car les fontes étaient des caractères composés à partir d'un alliage à base de plomb.
Chaque lettre était déclinée en diverses fontes de caractères (italic, gras, normal, par exemple).
Les caractères ainsi composés étaient rassemblés dans des boîtiers nommés "casses". Ces casses étaient composées de MAJUSCULES ou de minuscules (d'où l'expression "changer la casse").

L'attribut style permet à tout moment d'introduire des variantes ponctuelles dans les styles généraux définis dans le head de la page ou dans la feuille de style liée à la page.

• majuscules

Les anglophones sont toujours privilégiés dès qu'il s'agit de communiquer avec un ordinateur. En l’occurrence, uppercase signifie "case supérieure" car les MAJUSCULES étaient disposées dans la partie haute du boîtier qui contenait les fontes (la partie basse étant réservée aux minuscules).

L'attribut font-style associé à la propriété italic désigne une fonte particulière (italique); la famille et la taille par défaut de cette police (Arial, lien externe) est primitivement exprimée dans le style (balise style contenue dans le head de la page) à l'aide d'une unité nommée "em" (lien externe).

• un paragraphe en "italique" (fin du style italic)

• Ce code souligne le texte

• Ce code engraisse le texte

Toutes ces informations pourraient être regroupées dans la balise style ou dans la feuille de style:

Dans ce cas, tous les paragraphes, de toutes les pages liées à cette feuille de style seraient en italiques soulignées et grasses. Ce qui n'aurait probablement pas grand intérêt.
Par contre, imaginons que vous ayez régulièrement besoin de paragraphes ayant toutes ces caractéristiques.

Si vous avez suivi le raisonnement, vous allez en conclure qu'à chaque fois que vous désirerez ce type de paragraphe, il va vous falloir rester patient et écrire ceci:

À quoi sert-il d'avoir un ordinateur s'il faut passer tant de temps pour obtenir la moindre nuance?
La réponse à cette question peut être l'usage du CMS, ce gestionnaire de contenu qui va prendre en charge tous ces cas répétitifs à l'aide de modèles préétablis qu'il vous suffit d'appeler.
Mais le CMS ne fera rien d'autre que ce qui va suivre. Son modèle correspondra à un style doublé d'une "classe". Cette classe aura un nom et, à chaque fois qu'elle sera utilisée, son nom sera mentionnée et le résultat attendu sera au rendez-vous.

Le nom de la classe est itunbo.

Côté HTML, il suffit alors d'appeler la classe itunbo.


et c'est terminé !
Les noms attribués aux classes sont relativement libres mais ne doivent, comme les noms de fichiers, comporter ni des caractères accentués, ni des espaces vides.
Bien que les classes soient assez pratiques, il ne faut toutefois pas en abuser... car il faut aussi se rappeler de leurs noms et de leurs caractéristiques.

Alignement du texte dans la page

• Position centrée du texte, dans un paragraphe
• Position gauche du texte, dans un paragraphe
• Position droite du texte, dans un paragraphe.

Ces premiers pas réalisés, vous pouvez alors égayer tout cela par quelques couleurs des polices ou des couleurs d'arrière plan qui permettent de différencier visuellement les paragraphes, les titres, etc...
Il serait un peu escroc de vous laisser penser qu'ainsi vous savez déjà tout sur HTML, mais vous en savez suffisamment pour bien commencer.

Les exposants

• 2 mètres²

En savoir plus

• Google Plus