Lorsqu’on rédige un texte, que ce soit pour un tutorial, ou soit pour une communication commerciale, une tâche académique ou une publication scientifique, on est appelé, entre autres, à faire face à la question de mise en forme de document. C’est l’objet de cet article qui se penche plus précisément sur la mise en forme en HTML (HyperText Markup Language) et CSS (Cascading StyleSheet) de documents web.
On peut définir la mise en forme comme une opération qui consiste à donner à un document une présentation structurée, organisée en différente(s) partie(s) formant un tout cohérent agréable à lire. Elle comporte de ce fait plusieurs aspects: la ou les polices du texte, le(s) titre(s), la casse, la taille, l’alignement du texte, etc.
Le HTML met à votre disposition des balises d’éléments et le CSS vous fournit des sélecteurs, des pseudo-sélecteurs avec des propriétés pour indiquer au programme-client (browser ou navigateur) la manière d’afficher le contenu du document reflétant la mise en forme voulue. C’est donc le HTML en utilisation seule ou en utilisation conjuguée avec CSS qui va nous permettre de réaliser toute la mise en forme du document web comme nous allons le voir dans la suite.
1./ Police(s) de caractères
La police est le type de jeu de caractères qui se distingue notamment par la forme graphique visuelle du tracé de caractères. Globalement et pour ce qui concerne principalement le web, on a les classes ou familles de polices sans empattement (sans-serif), avec empattement (serif), à espacement fixe (monospace) réalisées selon un style cursif ou décoratif ou classique (d’imprimerie).Il n’y a pas de place dans ce document pour dresser une liste des polices de caractères, famille par famille. Il existe une abondante documentation sur le sujet des polices, fontes, caractères que vous trouverez aisément sur le web pour plus d’information si ça vous passionne. Ce qui nous intéresse ici, c’est comment les utiliser.
Dans la présentation d’un texte, il est conseillé d’utiliser au moins deux différentes polices, particulièrement pour l’esthétique et une lecture plaisante mais c’est loin d’être une règle obligatoire. Beaucoup d’auteurs et de rédacteurs s’en soucient peu d’ailleurs. L’idée du conseil est d’utiliser une police pour les titres et une autre police pour le texte explicatif ou narratif ou autre. Bon, on peut avoir une troisième police pour l’applicode ou les formules scientifiques, si le document en contient. Et pour cela, on utilise conventionnellement les polices monospace (par ex Courier New, Consolas, Lucida Console). Je compte, pour ma part, utiliser Consolas dans le présent document.
Concrètement, l’instruction-type HTML + CSS pour indiquer la police ou une liste de polices est la suivante:
Dans cet exemple, on s’est servi de la propriété >font-family< à laquelle on a donné la valeur: "Tahoma, Helvetica, Eurostile, 'Rotis Sans', sans-serif".
Note: Il faut remarquer que lorsque le nom d’une police est un groupe de mots, on le place entre apostrophes. D’habitude, dans une liste de polices, on indique des polices de la même famille avec le nom de la famille (serif, sans-serif, monospace) à la fin. Mais là-aussi ce n’est pas une obligation et rien ne vous empêche d’écrire par exemple: font-family: Verdana, 'Book Antiqua', sans-serif;
Pourquoi? Eh bien, parce qu’en fait on peut préférer une police avec empattement (serif) comme 'Book Antiqua' à d’autres polices sans empattement (sans-serif) au cas où la police sans-serif précise désirée n’existe pas.
Si dans le document web aucune police de caractères n’est indiquée nulle part, alors la police appliquée sera la police par défaut configurée dans le browser. Ça signifie que si la police du browser (par exemple Mozilla Firefox) utilisé par un visiteur de votre page web est 'Book Antiqua', alors votre document lui apparaîtra dans la police 'Book Antiqua'. Si un autre visiteur a configuré son browser pour utiliser la police Verdana, lui il verrait votre page en Verdana. Aussi, lorsque le browser ne trouve pas la police que vous avez indiquée sur le laptop (ou la tablette) à partir duquel un utilisateur consulte votre page web, le browser utilise une autre police; en principe la police par défaut. C’est pourquoi on propose plusieurs polices de caractères, dans un ordre de priorité, pour dire au programme-client d’utiliser la police suivante dans la liste dans le cas de l’inexistence de la police précédente; ainsi de suite. Capiche?
On peut aussi techniquement forcer le programme client à utiliser une police de caractères particulière en la faisant suivre de l’ordre "!important". Voici un exemple:
Outre la propriété du CSS, il existe une balise HTML pour spécifier une police de caractères dans un document web; c’est la balise <font><font> (font qui veut dire fonte ou police en anglais). C’est elle qui était beaucoup utilisée tout au début, de la façon qui suit:
C’est du HTML pur sans CSS et j’aime bien ça. Mais aujourd’hui l’élément font passe pour être obsolète.
La balise HTML <basefont></basefont> quant à elle sert à définir les valeurs par défaut de police, de taille de police d’un document web. L’idée est intéressante, cependant on nous a dit que cette balise n’est pas supportée dans la version 5 du HTML. Exit donc basefont dans les browsers les plus modernes. Mais vous voulez peut-être connaître son utilisation:
Signalons enfin que la police spécifiée est héritée par les balises-filles. Point n’est donc besoin de repréciser à chaque fois la ou les polices.
Et voilà pour ce qui est de la police de caractères. Mon opinion est que cette partie qu’on vient d’aborder est la plus exigeante et donc la plus stressante. C’est comme pour la sélection de couleurs à utiliser dans un document web. Des fois, c’est pour moi un casse-tête de choisir les polices à utiliser dans un nouveau travail. Mais une fois qu’on a sélectionné les polices, le reste suit aisément.
Et si on passait maintenant à la question de la taille de texte?
2./ Taille de texte
Pour donner un agrandissement à un texte (ou le contraire), on utilise l’attribut >size< de la balise HTML <font></font> ou la propriété >font-size< du CSS. Il va s’en dire que l’attribut size s’utilise avec l’élément font, alors que la propriété font-size s’utilise plutôt avec les autres éléments HTML; n’allez pas mélanger les choses sinon les choses aussi vont vous mélanger, lol. (Et tant mieux pour ceux qui n’aiment pas l’humour, hia hia hia. Chez moi c’est toujours tant mieux, jamais tant pis; hia hia hiaaaa...). Les exemples en HTML et HTML + CSS sont:L’abréviation px (pixel) est une unité de mesure. D’autres mesures sont: pt (point), % (pourcentage), em (taille de la lettre m dans la valeur en point), rem (root em). font-size: 80%; font-size: 8pt; font-size: 0.8em; sont des exemples valides.
La taille de police est héritée à l’intérieur du champ (scope) de la balise où elle est définie.
3./ Formatage de texte
Mise en grasPour mettre un texte en gras, on a la possibilité d’utiliser la balise HTML <b></b> (b pour bold qui signifie gras en anglais) ou la balise nouvelle <strong></strong> (strong signifiant épais). L’instruction est:
Ou bien:
On peut aussi passer par la propriété >font-weight< du CSS, comme suit:
'bolder' (plus gras) est aussi possible. Mais la valeur 'normal' est la valeur par défaut que prend font-weight. On peut toutefois l’indiquer de façon explicite si on veut, pour avoir un applicode suffisamment informatif:
Mise en italique
Pour mettre du texte en italique, on utilise la balise HTML <i></i>, ou on affecte la valeur 'italic' à la propriété >font-style< du CSS. En HTML pur, on a:
L’instruction-type en HTML + CSS est:
Note: Les balises <em></em>, <dfn></dfn>, <cite></cite> ou la propriété >text-emphasis< du CSS destinées à mettre en emphase, à faire une citation, génèrent une mise en italique; ce qui fait qu’on peut les utiliser à la place de <i></i>. Certains auteurs trouvent même qu’elles sont préférables pour mettre du texte en italique; mais c’est leur avis à eux, et c’est pas mon avis moi.
Soulignement de texte
Pour souligner un mot d’un texte ou un texte entier, on se sert de l’élément HTML 'u' (mis pour underline qui signifie souligner en anglais) dont la balise est <u></u>. Mais il est possible d’obtenir le même résultat grâce à CSS avec la propriété >text-decoration<. Cela se fait de la façon suivante pour le HTML:
Pour le HTML + CSS, on a:
Mise en lumière
La balise HTML <mark></mark> est utilisée pour marquer, surligner ou mettre en lumière un mot relevant du paradigme de la thèse discutée. Elle sert ainsi aussi au référencement, à la mise en exergue d’un mot dont le poids sémantique, pour ainsi dire, est important par rapport à l’ensemble du document web. Cette balise peut s’utiliser de la façon ci-après:
Texte barré
Lorsqu’on veut barrer du texte pour indiquer qu’il est supprimé (tout en le gardant dans le document) suite à une mise à jour ou pour montrer une correction, une révision, on a le choix entre les balises HTML que sont: <strike></strike> (strike veut dire rayer, je crois), <strikethrough></strikethrough> (rayer tout au long), <del></del> (mis pour delete c.-à-d. supprimer) ou passer par le CSS avec la propriété text-decoration à laquelle on donne la valeur 'line-through'. Exemples HTML et HTML + CSS:
Clignotement de texte
Pour faire clignoter du texte, on utilise la balise <blink></blink> (blink = clignoter) qui est passée de mode (ah bon?). C’est une balise non-standard qui n’est pas, pour cela, prise en compte dans certains browsers. Ne soyez donc pas surpris si ça ne donne rien dans votre browser. Bon, il vaut mieux, à mon avis, éviter son usage et utiliser plutôt un autre effet pour attirer l’attention de l’internaute. Mais voici son utilisation:
Note: Il y a une astuce en CSS pour réaliser le clignotement mais comme je ne recommande pas le blinking (clignotement) de texte car pouvant être agaçant (je trouve), je n’en ferai pas cas.
Forts de cette connaissance, avançons avec assurance à la partie des effets de style et d’illustration.
4./ Effets de style et d’illustration
Première lettre, premier mot, première ligne différenciésPour différencier la première lettre ou la première ligne d’un texte par rapport au reste du texte, afin de leur donner du "volume" en quelque sorte, on utilise respectivement les pseudo-sélecteurs fournis par le CSS que sont ':first-letter' et ':first-line'.
Pour réaliser cela, il faut dans le fichier CSS ou dans la zone de définition du style de la page web (section délimitée par <style></style>), écrire une instruction telle que:
Et puis après dans le fichier HTML encadrer le texte avec la balise <p></p>; and that’s all.
On pourrait pareillement mettre p:first-letter à la place de p:first-line, hein; faut pas croire. Seulement là on ciblerait une partie différente du texte qui est la première lettre.
Note: Il n’y a pas de pseudo-sélecteur pour cibler le premier mot. Pour sélectionner le premier mot, il faut passer par une astuce. En voici une, pour vous.
Dans la zone de style ou dans le fichier CSS, on écrit quelque chose comme:
Puis quelque part dans le fichier HTML on va, dans le paragraphe dont on désire que le premier mot ait l’effet escompté, encadrer le premier mot avec la balise <span></span>. Attention, la balise <span></span> du 1er mot doit être le premier élément span dans le paragraphe.
C’est pas compliqué, vous voyez? Et du coup, on se sent fier comme un pou.
Casse (MAJUSCULE ou minuscule)
Certaines personnes aiment écrire des mots ou phrases tout en majuscule, pour "hausser" le volume, le ton de leurs propos. En effet, traditionnellement en informatique, (eh oui, on peut parler de tradition informatique aujourd’hui), écrire en majuscule signifie crier et je vous assure que ce n’est pas beaucoup apprécié sur certains e-fora. Mais avouons que la majuscule ne manque pas d’avoir un certain effet stoppant sur le visiteur. Même si vous êtes pressé, quand vous tombez sur un écrit en majuscule, vous ne pouvez pas vous empêchez de faire un petit arrêt pour voir ce qui se passe… ou ce qui ne se passe pas, lol. Hé, souvent c’est le cas, hein. Rien ne se passe et les gens se mettent à crier sur le web. Pff, franchement…
Alors si vous faites partie de ces gens-là (moi, je ne vous juge pas, hein) et que vous voulez que votre texte soit rendu en majuscule, le CSS contient une propriété pour la mise en majuscule, c’est la propriété >text-transform< dont le nom n’est pas si explicite. Elle s’utilise comme suit en HTML + CSS:
Note: La valeur 'lowercase' (minuscule) attribuée à text-transform produit le contraire du résultat de la valeur 'uppercase'. Cette valeur permet de mettre un texte en minuscule.
Décoration, façon CSS
L’équipe qui a bossé ardemment sur le CSS a jugé opportun d’implémenter une propriété nommée text-decoration pour nous aider à border du texte avec des traits au-dessous, au-dessus et en travers. Hé, c’est de la décoration aussi. En tout cas au sens de CSS. On a déjà utilisé text-decoration pour souligner du texte; maintenant on va l’utiliser pour aussi tracer une ligne au dessus.
L’exemple HTML + CSS que je vous propose n’est pas la meilleure des idées, mais ça ressemble à ceci:
Bon, ce résultat peut également être obtenu avec la propriété >border< (border-top, border-bottom). Donc, finalement ce text-decoration n’apporte rien de vraiment original.
Color Me Goodd
Vous vous rappelez ce groupe de new jack swing, Color Me Badd? Avec leur tube-là? ♫Uuh uh-uh-uh, ♩I wanna♫ s*x you up♪. Hé-hé-hé; bon, enfin, passons.
Les couleurs sont certainement une manière de donner de la beauté, de l’attrait à un document web, mais il faut savoir bien choisir et combiner les couleurs. Il y a trois aspects sur lesquels le webmaster ou l’éditeur de la page web peut jouer: la couleur d’arrière-plan (>background-color<), la couleur de premier-plan ou carrément la couleur de police (>color< ou >font-color<) et la couleur de bordure de l’élément-conteneur (border(-color)).
La combinaison de couleurs d’arrière-plan et de police et tout ce qu’il y a à savoir sur les couleurs en matière de web sortent du cadre de ce document. Mais disons qu’il est recommandé de veiller à ce qu’il y ait un contraste bien prononcé entre la couleur du texte et la couleur d’arrière-plan. Donc, il faut mettre du texte clair sur un fond sombre et vice-versa. La lecture n’est par exemple pas aisée et agréable avec un texte blanc sur un arrière-plan en bleu clair.
Exemple d’utilisation:
Image(s)
Illustrer un document avec des images, c’est assez intéressant. Chaque fois que c’est possible, il ne faut pas s’en priver. Le HTML contient une balise pour inclure une image dans un document web; c’est la balise <img /> qui est auto-fermée. Elle possède l'attribut >src< (abrégé du mot source) qui prend le pointeur de l’image à afficher, sous forme du chemin d’accès au fichier image de type (et sous Windows d'extension) png, jpg, bmp, etc. L’utilisation est la suivante:
Note: Si l’image à afficher se trouve dans le même dossier que le fichier HTML, le nom du fichier image suffit. Il se peut que vous ayez besoin d’avoir vos images sur un espace de stockage enligne. Dans ce cas l’attribut src aura pour valeur le lien hypertexte de l’image à afficher.
Lien hypertexte
Puisqu’on parle de document web, on ne peut pas ne pas faire cas des liens hypertexte. Pour créer un lien hypertexte, on utilise la balise HTML <a></a>. L’utilisation la plus simple consiste à donner à l’attribut >href<, l’URL (Uniform Resource Locator) c.-à-d. le chemin d’accès à la ressource (document texte, image, vidéo). La balise <a></a> génère un objet cliquable à partir de l’élément (mot, groupe de mots, image) qu’elle encadre. Exemple:
Pas fatigué? Vous suivez bien jusqu’ici? Bon, bondissons maintenant à la partie de l’alignement et disposition de texte qui ne manque pas d’intérêt.
5./ Alignement et arrangement
Direction de texteOn peut spécifier la direction d’écriture/lecture d’un document web. Et c’est la bien nommée propriété >direction< du CSS qui permet de le faire. Elle prend la valeur 'ltr' (left to right qui veut dire de gauche à droite) pour la plupart des langues modernes (romanes, sémitiques, celtiques et que-sais-je) actuellement en cours dans le monde et la valeur 'rtl' (right to left qui signifie de droite à gauche) pour des langues qui s’écrivent et se lisent de la droite vers la gauche comme l’arabe et l’hébreu. L’utilisation en HTML + CSS est celle-ci:
Note: Comme vous le voyez dans l’exemple, on adjoint à cette propriété une autre propriété appelée >unicode-bidi< qui accepte les valeurs telles que 'normal', 'plaintext', 'bidi-override', 'embed', 'isolate' pour gérer un contenu bidirectionnel c.-à-d. un contenu ayant à la fois du texte gauche-vers-droite et droite-vers-gauche. Je vous avoue que je ne sais même pas quelle est concrètement l’incidence de ces valeurs étant donné que je n’ai jamais travaillé sur du texte bidirectionnel.
Indentation
Un article a été précédemment publié pour montrer quelques techniques de tabulation. On y revient encore ici pour dire que de manière formelle pour indenter du texte, on utilise la propriété >text-indent< (texte-indenter) du CSS. L’utilisation toute simple consiste à donner une longueur en pixel, par exemple, ou une valeur en pourcentage à cette propriété. Exemple:
Note: text-indent marche sur des conteneurs de type boîte ou bloc. Si c’est un conteneur de type inline comme span, il faut penser à lui ajouter l’instruction display: block;
Alignement à gauche
Pour aligner du texte à gauche de son conteneur (div, p, span, etc.), on affecte la valeur 'left' (gauche) à la propriété >text-align< (soit texte-aligner) du CSS. Mais on n’a pas toujours besoin de faire ça car le flow naturel est de la gauche vers la droite pour les langues autres que l’arabe et l’hébreu. L’utilisation est:
Alignement à droite
L’alignement du texte à droite du conteneur s’obtient en affectant la valeur 'right' à text-align. Exemple:
Note: Attention. Du fait que le flow naturel est de la gauche vers la droite, l’alignement à droite ne produit pas d’office un alignement du texte à droite de la page web. Pour avoir le texte aligné à droite de la page web elle-même, il faut que l’alignement à droite soit initialement appliqué à la page web au niveau de la balise <body></body>. Sinon, il faudra que le conteneur du texte soit mis à l’état flottant à droite (float: right;) en plus de l’alignement à droite du texte qu’il contient.
L’explication de la technique du flottement de conteneur HTML exige la rédaction d’un article particulièrement consacré à ce sujet qui n’existe pas encore sur ce blog. En attendant que j’aie les moyens de mettre en ligne un tel article ici, vous pouvez vous lancer dans une fouille du web. J’aurai été plus compréhensible…
Alignement au centre
D’une manière similaire à ce qui précède, pour centrer un texte dans son conteneur, il faut donner à text-align la valeur 'center'. Exemple:
Alignement justifié
Si on veut que le texte ait un alignement justifié, la valeur 'justify' est utilisée pour text-align de la façon simple suivante:
Vous pouvez aussi combiner avec la propriété >text-justify< pour un meilleur contrôle sur l’espacement entre mots. Les valeurs possibles sont 'constant', 'inter-word'.
Coupure de mot
Lorsqu’à la fin d’une ligne d’un texte on écrit un mot qui ne peut pas tenir dans l’espace restant, on procède soit à une coupure du mot ou on va carrément à la ligne pour écrire le mot. Ceci peut être réalisé dans un document web avec la propriété >word-wrap< dont les valeurs possibles sont 'break-word', 'break-all', 'no-break', 'hyphenate', 'normal'. Les différentes valeurs produisent des effets différents selon la largeur du conteneur. 'break-word' me paraît être la valeur la plus indiquée pour forcer une coupure. Je vous invite à tester toutes les valeurs dans votre travail afin de décider ce qui convient.
Vous sentez que je suis pressé là? Vous n’avez pas tort; et je veux vite en finir. Bon allez, on continue. L’instruction-type HTML + CSS est la suivante:
Note: Je profite ici pour parler de >text-overflow< relatif au débordement de texte. Cette propriété qui va avec des valeurs telles que 'clip', 'ellipsis' permet de gérer la présentation du texte lors du dépassement hors du conteneur. Avec 'clip' la partie qui dépasse est rognée et 'ellipsis' remplace la partie qui dépasse avec des suspensions.
Espacement
L’espacement est une opération qui permet une certaine aération dans la juxtaposition des lettres et mots sur une ligne. Dans ce but, le CSS met à votre disposition une propriété pour définir un espacement entre les lettres d’un mot, afin de les rendre plus ou moins rapprochées voire condensées. Cette propriété porte le nom de >letter-spacing< signifiant espacement de lettre dans la langue de Shakespeare et aussi de Charles Babbage (qui nous a poussé dans cette éprouvante et quand-même excitante aventure informatique, lol). Voici comment utiliser la propriété letter-spacing du CSS:
Tout comme pour les lettres d’un mot, le CSS a pensé pour vous à la création d’espacement entre les mots. La propriété qu’offre le CSS à cet effet est la propriété >word-spacing<. Son utilisation est de la même facilité que celle de letter-spacing:
Alignement vertical
Des fois, on a besoin de placer un mot ou un bout de texte plus en haut (puissance) ou plus en bas (indice) de la ligne principale. Il s’agit là d’un alignement vertical qui est rendu possible grâce aux balises HTML <sup></sup> et <sub></sub> ou à la propriété >vertical-align< (vertical-aligner) du CSS. Voici une manière de procéder en HTML et en HTML + CSS:
Note:Les valeurs autres que 'text-top' qu’on peut employer sont 'sup', 'middle', 'baseline', 'bottom', 'sub'.
Orientation verticale
C’est plutôt rare, mais il arrive dans certains cas qu’on ait besoin de mettre un mot ou un bout de texte dans la position verticale. En se servant de la propriété >text-orientation< en mode vertical (writing-mode: vertical-lr;), on peut réussir cette opération. Voici un exemple d’utilisation:
Note: Les autres valeurs possibles avec text-orientation sont 'glyph-orientation-vertical', 'sideways-left', 'mixed-right', 'upright', 'sideways-right'. À essayer comme exercice de maison.
Allez, progressons rapidement vers l’interlignage.
Hauteur de ligne
L’interlignage d’un document web peut être défini à loisir avec la propriété >line-height< (ligne-hauteur, soit hauteur de ligne) du CSS à laquelle on donne des valeurs numériques en pixel, point ou en pourcentage. On a ci-dessous un exemple d’utilisation en HTML + CSS:
Note: C’est dans un texte assez long qui s’étend sur plusieurs lignes qu’on peut bien apprécier l’effet de l’interlignage. Dans votre exemple à vous, il faut donc utiliser un texte de plusieurs lignes.
Retour à la ligne
Toujours dans le but d’aérer un texte, on peut avoir besoin de forcer un retour à la ligne et de laisser un peu d’espace entre paragraphes. On se sert de la balise HTML auto-fermée <br /> pour faire cela, juste en insérant bêtement cette balise à l’endroit du texte où on veut provoquer le retour à la ligne. C’est ainsi que tous les retours à la ligne de ce document ont été produits. Exemple:
Signalons qu’un <br /> correspond à un seul retour à la ligne. Pour créer assez d’espace entre deux paragraphes successifs, il faut insérer autant de <br /> que nécessaire.
Ligne horizontale
Parfois aussi, on a besoin d’avoir un trait de séparation entre paragraphes. Dans ce cas, il faut utiliser la balise HTML auto-fermée <hr /> qui crée une ligne horizontale. Comme pour le retour à la ligne, il faut juste insérer la balise <hr /> à l’endroit où on veut mettre le trait de séparation. Le trait peut occuper tout ou partie de la ligne entière en donnant à son attribut >width< une valeur en pourcentage. Et on peut combiner <br /> et <hr /> si on veut. Exemple:
Table/tableau
Quand on a des données tabulaires dans son document, on a forcément besoin de les présenter dans un tableau. La balise HTML pour créer un tableau est <table></table>. Une utilisation basique de cette balise est celle-ci:
Note: Chaque <tr></tr> correspond à une ligne de table et chaque <td></td> représente une colonne de table. La balise <th></th> sert à donner un libellé à une colonne.
Liste
Contrairement au tableau, on a d’autres fois besoin de mettre les données sous forme de listes ordonnées ou non ordonnées. Pour faire une liste, on utilise la balise HTML <ol></ol> pour une liste ordonnée et la balise HTML <ul></ul> pour une liste non-ordonnée. ol est mis pour ordered list et ul pour unordered list, respectivement liste ordonnée et liste non-ordonnée. Je vous propose un exemple de liste ordonnée:
Note: Chaque <li></li> est nécessaire pour chaque élément de liste.
Le cours approfondi concernant les listes ordonnées et non ordonnées dépasse le cadre de cet article. Il y a un article publié sur ce blog discutant de l’alignement des nombres qui montre une manière d’utiliser les listes ordonnées, si ça intéresse quelqu’un. Je reviendrai probablement encore une prochaine fois sur les listes, dans un autre article.
Texte autour d’une image
On a vu plus haut qu’on peut illustrer un texte avec une image en se servant de la balise <img />. Dans certains cas, on peut vouloir disposer un texte à côté (en regard) ou autour de l’image. C’est faisable avec l’attribut >align< ou la propriété >float< du CSS. Il s’agit de faire basculer l’image à gauche en donnant la valeur 'left' à align ou float, ou à droite avec la valeur 'right'. Ensuite, on place le texte à l’endroit opposé libéré pour recevoir du texte. La même chose peut se faire pour un tableau. Un exemple HTML + CSS:
Ça ne veut pas dire que tous les <br /> doivent avoir ce format. Si vous voulez, vous pouvez juste remplacer le <br /> de l’exemple avec ceci: <span style="clear: both;"></span> et aller à la ligne normalement avec un simple <br/>. C’est ma préférence.
On se limitera dans ce document à cet exemple rudimentaire. Un tutorial différent est requis pour discuter plus longuement du flottement et de la disposition de texte autour d’un tableau ou d’une illustration.
6./ En-têtes titrés
Je finis par les en-têtes car généralement c’est quand j’ai fini de rédiger un document que je me consacre à l’exercice de titrage des différentes parties. En HTML, il existe six (06) balises pour les titres. Ce sont les balises <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>. Le HTML a donc prévu six niveaux de titre, ce qui à mon avis est bien suffisant. Si jamais vous avez besoin d’une hiérarchisation plus longue, vous allez devoir ajouter vos propres niveaux de titre additionnels. En général, la balise <h1></h1> est réservée au titre du document. Les autres balises s’utilisent à l’intérieur du texte pour les chapitres, sections, sous-sections, paragraphes, etc. Exemple d’utilisation:Note: Il est évidemment plus sensé d’utiliser les en-têtes dans leur ordre. Utiliser h4 avant h2 dans un paragraphe de texte serait un peu tiré par les cheveux, innit? Pour d’autres informations, vous pouvez lire l’article sur les en-têtes publié sur ce blog.
Remarque générale: Je crois avoir déjà mentionné ce qui suit, ailleurs sur ce blog, mais je le rappelle. De façon générale, j’aime les technologies et produits Microsoft; vraiment. J’aime et préfère par exemple Office 2007 à Open Office et WPS; j’aime WebMatrix et IIS Express que je préfère à Apache; j’aime et préfère ASP/C# .Net à tout autre chose, etc., mais il y a principalement deux produits Microsoft que je n’apprécie pas: Windows Media Player et… Internet Explorer (un nom ringard d’ailleurs, avec un logo tout aussi ringard). Et je me demande ce qui peut pousser des gens à utiliser Internet Explorer. Je me dois donc de vous dire que, en ce qui concerne le développement web, je me soucie peu de savoir quel est le résultat dans Internet Explorer, à moins que ce soit exigé par un demandeur de service. S’il y a un exemple que vous trouvez sur ce blog qui ne marche pas dans Internet Explorer, vous m’en voyez sincèrement désolé. Use Firefox sometime!
La première fois que j’évoque une propriété ou un attribut, je la (le) place entre les signes de supériorité et d’infériorité. Les valeurs d’attribut ou de propriété quant à elles sont mises entre apostrophes. Toutes les commandes ou instructions que ce soit pour le HTML ou pour le CSS se mettent dans la balise ouvrante précédant le contenu réel à afficher. Les propriétés relevant du CSS se placent dans l’attribut >style< des balises en mode enligne comme cela a été largement fait dans ce document. Le caractère point-virgule (;) qui marque la fin d’une instruction en programmation dans beaucoup de langages marque aussi la fin d’une instruction en CSS, mais pas en HTML. Si votre applicode ne marche pas comme vous l’espérez, ce sont ces choses qu’il faut vérifier en premier. Bon succès dans votre travail!
Mot de fin
Ouf, on a fini. lolCet article vous a présenté les opérations de mise en forme d’un document web. L’article ne prétend pas faire de vous un expert du HTML et CSS. Mais le contenu constitué d’informations élémentaires, basiques et d’ordre général peut sans doute aider un débutant (et à fortiori un vétéran du web design/développement) à réussir une bonne mise en forme.
La maîtrise de beaucoup de parties exige une formation plus poussée, formelle ou en autodidacte. Je me propose, si j’en ai les moyens, de publier d’autres articles plus axés sur certains aspects du contenu du présent document.
Je vous remercie sincèrement pour votre visite et pour la lecture. Que ceux qui ont des biens de nécessité (nourriture, vêtements, matelas, livres, laptops, argent, amour, oui amour bien-sûr, etc.) en donnent un peu à ceux qui n’en ont pas. Moi, j’ai quelques petites connaissances et c’est ça que je donne à travers ce blog.
Que la Lumière Divine nous éclaire et nous apporte la compréhension pour toutes choses. United Kingdom of Love vous souhaite l’Amour et le meilleur chez vous. On se donne rendez-vous dans un autre article.
© Copyright United Kingdom of Love - Tous droits réservés.
Aucun commentaire:
La publication de nouveaux commentaires n'est pas autorisée.