Cours de HTML Mise en forme de texte G. Chagnon Ce chapitre présente le formatage du texte en HTML. html, base, concept, introduction, balise, texte, font À l'origine, HTML devait décrire la structure du texte sans imposer sa représentation physique qui devait rester le choix de l'utilisateur et de son navigateur (voir le premier chapitre). Pour décrire la structure du texte, c'est à-dire la nature du contenu (nom, adresse...) on parle de formatage logique. Pour décrire la représentation physique du texte (gras, italique, taille des caractères...) on parle de formatage physique. Ce second type de formatage, on le rappelle, n'est pas à conseiller, sauf s'il faut assurer la compatibilité avec les plus vieux navigateurs. Ce cours va présenter ces deux types de formatage et les balises qui leur sont associées.

Il s'agit ici des titres qui s'afficheront dans la page (et non dans la barre de titre comme la balise ]]> précédemment) : ce sont les en-têtes de sections ou paragraphes. Il existe six niveaux de titres d'importance décroissante : <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Exemple et code source avec chaque balise TITRE : Niveau de titre Effet en Times New Roman Titre de niveau 6]]> Titre de niveau 5]]> Titre de niveau 4]]> Titre de niveau 3]]> Titre de niveau 2]]> Titre de niveau 1]]> Les niveaux de titre.

Fonction : Un paragraphe comme celui que vous lisez est délimité par les balises ]]> et ]]> (voir le source de cette page). La balise ]]> provoque un saut de ligne avant le paragraphe. Un paragraphe ne peut en contenir un autre (le navigateur les interprète comme des paragraphes successifs...). Attributs : Attributs de la balise ]]> Attribut Valeur(s) align left(par défaut) right center justify Attribut de la balise ]]>. Cet attribut n'est pas conforme au HTML strict. Fonction : Force un retour en début de ligne suivante à l'intérieur d'un même paragraphe. La balise fermante est facultative. Attributs : Attributs de la balise ]]> Attribut Effet Valeur(s) clear répartit le texte autour d'une image flottante ou d'un autre objet all left right Attribut de la balise ]]>. Cet attribut n'est pas conforme au HTML strict.

Ces balises jouent un rôle particulier. Elles permettent de découper l'information en unités logiques, et sont fortement utilisées avec des feuilles de style. Par exemple, on peut scinder un document HTML avec deux balises ]]> en deux parties, une présentant... une table des matières, et l'autre présentant un contenu de cours (cf. le code source de cette page !). La balise permet quant à elle une structuration interne à un paragraphe. Par exemple, on peut indiquer un changement momentané de langage utilisé avec l'exemple suivant : Hamlet a dit en"To be or not to be".

Balise Signification Effet <em> emphasis <strong> fort <cite> citation brève <dfn> définition <code> extrait de programme <samp> sample : échantillon <kbd> Keyboard(clavier) <var> variable ou argument <abbr> abréviation <acronym> acronyme <sub> subscript/indice <sup> superscript/exposant <pre> preformatted Balises de formatage logique. La touche "Entrée" (le "retour chariot" du temps des machines à écrire) est codée en ASCII par 13. Le navigateur ne le considère pas comme un retour à la ligne mais comme un simple séparateur comme un blanc. Sans demande particulière, le navigateur ignore votre formatage initial. ]]> force le navigateur à respecter les retours à la ligne et les blancs consécutifs.

Elle est destinée à séparer différentes parties d'un document au moyen d'un trait horizontal de longueur et d'épaisseur variables, et généralement pourvu d'un ombrage. Il s'agit d'un conteneur vide dont la balise fermante est facultative (et même jamais utilisée en HTML). Cette balise possède des attributs, mais leur emploi est déconseillé par le W3C : attribut effet valeur(s) noshade suppression de l'ombrage booléen, sa présence seule supprime l'ombrage align alignement left (valeur par défaut) right center justify size épaisseur du trait nombre en pixels width largeur du trait en pixels ou en pourcentage de la fenêtre du navigateur (ajouter le symbole %) Les attributs (obsolètes) de la balise ]]>.

Toutes les balises de cette partie sont obsolètes dans le HTML 4.01 strict.

Les navigateurs utilisent par défaut une police proportionnelle : Times Roman sur les Macintosh, et Times New Roman sur les PC. En tant qu'utilisateur (surfeur !), il vous est possible de modifier cette police par défaut. Cela rend la tâche des développeurs de site d'autant plus ardue... Cette balise est déconseillée, utiliser plutôt les feuilles de style. Pour modifier une partie du texte, on écrira par exemple : Verdana, Arial, Helvetica, sans-serif5redmon exemple qui produira l'effet suivant : L'attribut face : sa valeur est une liste de polices séparées par des virgules, c'est la première de cette liste présente sur le navigateur qui sera utilisée. Il est recommandé de spécifier en dernier lieu une famille de polices dite "générique" (nous y reviendrons dans le cours sur le CSS). L'attribut size : Il existe 7 tailles, la taille par défaut est 3. On peut spécifier une taille relative à l'aide d'un incrément signé, par exemple size="+2", size="-1". L'attribut color : A l'aide d'un nom de couleur ou d'un code RGB (voir paragraphe sur la couleur). Elle est à déconseiller. Elle définit la taille du texte du conteneur dans laquelle elle est citée (seul attribut size). Balise Signification Effet ]]> gras ]]> italique ]]> télétype : police à pas fixe ]]> taille supérieure à la taille courante ]]> taille inférieure à la taille courante ]]> ou <strike> ]]> underline/soulignement Balises de formatage physique. La balise ]]> permet de centrer son contenu. Il est recommandé d'utiliser plutôt l'attribut ou, mieux, une feuille de style. ]]>, prévu pour des citations de plusieurs lignes, cette balise permet de produire un effet d'indentation sur les deux marges latérales.

Il existe plusieurs codifications des caractères : ASCII sous MS-DOS, ANSI sous Windows ; les Macintosh ont leur propre système et les grosses machines IBM se servent de l'EBCDIC.

Les diacritiques sont les caractères constitués d'une lettre modifiée par un signe particulier : accent, tréma, cédille comme é, ï, ç etc. HTML utilise la codification ASCII qui ne comporte aucun caractère accentué. Il faut donc définir une convention de codage supplémentaire pour faire apparaître ces caractères.

Une entité de caractère débute par "", et finit par "". Exemple le "é" est codé "". Voici une petite liste des principaux caractères accentués : Caractère Entité Caractère Entité à â ä æ é è ê ë ù û ü ö ï î ç œ Principales entités de caractères utilisées en français.

Les caractères comme "", "]]>" et "" ont une signification spécifique : le inférieur désigne le début d'une balise, etc. Codés tels quels, le navigateur est incapable de les faire apparaître. Il a donc fallu leur adjoindre une codification supplémentaire : "" est codé , "]]>" est codé , "" est codé .

Ce caractère permet d'interdire la césure entre deux mots, par exemple : "" ou d'ajouter des blancs contigus.

HTML propose deux façons de coder unecouleur :

Il existe une liste de couleurs reconnues par la plupart des navigateurs. Les seize couleurs simples sont données dans le tableau ci-dessous donné dans la section "Les seize couleurs simples". Il en existe d'autres aux noms plus poétiques comme : Cependant, le rendu de ces couleurs dépend parfois fortement du navigateur et de la plateforme utilisée.

Toute couleur peut être décomposée en trois couleurs : rouge, vert, bleu (Red, Green, Blue d'où RGB) d'intensité convenable. Cette intensité est exprimée en un nombre compris entre 0 et 255. Ce nombre est codé en hexadécimal : il est alors compris entre 0 et FF. Par exemple, #BA1B85 code une intensité de BA (186) pour le rouge, 1B (27) pour le vert, 85 (133) pour le bleu qui donne :

Voici les seize couleurs de base : Vous aurez noté la couleur noire !