Cette vidéo, du cours HTML CSS gratuit, présente la manière de mettre en forme le texte. Nous verrons donc comment aligner du texte, le mettre en caractères gras ou italiques…
Bonjour à tous et bienvenue dans cette vidéo dans laquelle nous allons voir comment mettre en forme du texte avec des propriétés CSS. Et j’ai déjà préparé un autre page HTML que j’ai nommé ici 08-style-texte.html et son fichier CSS du même nom avec l’extension CSS. Et j’ai bien mes deux onglets d’ouverts dans Visual Studio Code.
Donc si vous ne savez pas comment faire cette étape je vous renvoie au cours précédent puisque j’avais fait les étapes pas à pas. Bon maintenant comme on sait le faire j’ai été un petit peu plus vite pour démarrer le cours actuel. Donc je vais quand même lier la page CSS à ma page HTML avec la balise link.
Et ici je vais supprimer le nom du fichier et je vais aller dans le dossier CSS. Et ici je vais sélectionner ma feuille de style du cours actuel donc le 08-style-texte.css. Voilà donc je vais commencer à mettre un petit peu de contenu au niveau du body. Donc on va mettre un titre h1 donc les propriétés de mise en forme du texte.
Ensuite on va mettre quelques paragraphes. LOREM, voilà, encore un autre. LOREM 50. Et puis on va mettre un titre de niveau 2. Et puis on va mettre encore un paragraphe. Voilà. Donc j’enregistre tout ça.
On va voir déjà au niveau du navigateur ce que ça donne. Voilà donc on a bien un titre de niveau 1, des paragraphes, titre de niveau 2, un paragraphe. Alors maintenant on va pouvoir mettre un petit peu en forme tout ça.
Et puis je vais aller pour cela dans ma feuille de style. La première propriété qu’on va voir, ça va être la propriété font-family. En fait dans cette propriété font-family je vais pouvoir préciser le type de police que je souhaite intégrer dans ma page HTML.
Donc généralement ce qu’on peut faire, plutôt que de mettre pour une balise h2, h1, paragraphe, etc, de préciser une police, ce qu’on fait généralement c’est dans le body, puisque c’est la balise de premier niveau. Et c’est au niveau du body qu’on va pouvoir mettre une famille de police, avec la propriété font-family. Donc ici j’ai déjà un ensemble de choses que me propose Visual Studio Code, et je vais prendre celle-ci.
Je vais prendre de l’Arial, Helvetica et Sans Serif. Donc là en fait ce qu’il va se passer c’est que la propriété fonds de family, au moment d’afficher la page, le navigateur va vérifier s’il y a la police d’Arial installée sur le système, si ce n’est pas le cas il prendra la Helvetica, et si ce n’est pas le cas il prendra une police générique Sans Serif. Alors pour ça je vais faire une petite parenthèse, pour vous montrer aussi sur le site de W3school, la propriété font-family. Donc ça nous explique ici qu’on a un ensemble de familles génériques de police, donc Serif, Sans Serif, Monospace, Cursive et Fantasy. Là on nous montre un petit peu la différence entre une police Sans Serif et Serif. On voit que les police Serif ont un empattement qu’il n’y a pas sur les police Sans Serif.
Et on nous dit d’ailleurs que les police Sans Serif sont mieux adaptées pour une lecture à l’écran. Donc on pourra éventuellement plutôt installer des police Sans Serif. Donc là on a les fameuses familles de police génériques avec quelques exemples de noms de police.
Donc pour la famille Serif on retrouve la Times New Roman, Georgia et Guillermonde. Pour les familles Sans Serif on retrouve Arial, Verdana, Helvetica, etc. Donc voilà, ça c’était pour la petite parenthèse pour que vous puissiez bien comprendre un petit peu les types de familles de police.
Et je rappelle, si on peut installer des police présentes sur le système, si on ne les trouve pas, on mettra toujours une police générique. Pour être sûr d’avoir un affichage correct par rapport à une charte graphique. Donc je vais déjà tester ça, voir si ça change au niveau du navigateur.
Donc on voit qu’on a déjà maintenant une police de type Arial. Et puis, pourquoi pas, je vais rajouter une nouvelle famille au niveau de mes titres. Donc au niveau de mon titre H1, et bien pourquoi pas, on va faire un test avec un autre type de famille.
Et puis cette fois je vais mettre, pourquoi pas, pour les titres, comme les titres sont plus gros, on pourra s’accorder une police de type Serif. Donc avec la Times New Roman. Donc je vérifie à nouveau dans le navigateur, et j’ai bien ma police ici qui a changé.
Le titre de niveau 2 est resté en Arial. Donc ce que je peux faire, c’est aussi mettre le titre de niveau 2 en Times New Roman. Donc je vais rajouter H2, avec des accolades, pardon.
Et même chose pour les H2, j’aimerais mettre une font de famille de type Times New Roman. Voilà, donc cette fois j’ai bien mon titre 1 et mon titre 2 en Times New Roman, et mes paragraphes sont restés en Arial. Alors j’en profite pour ouvrir une autre parenthèse en vous disant que quand on fait du code, on évite un petit peu les répétitions.
Là on se rend compte que j’ai mis finalement la propriété font de famille dans ma balise H1, et je l’ai mis également dans ma balise H2. Ça pourrait être judicieux par exemple de créer une classe si on le souhaitait, pour après en fonction des besoins de rajouter au niveau de la balise une classe pour la police Times New Roman par exemple. Mais là ce que je peux faire aussi c’est d’enlever ça, et puis ici de mettre une virgule et de séparer comme ça les différentes balises qui auront la possibilité de mettre cette police Times New Roman.
Donc comme j’ai mis H1, H2, je peux même mettre H3 si des fois j’étais amené à faire des titres de niveau 3 ou 4. On peut faire ça comme ça, et maintenant si j’enregistre, j’ai bien mon titre de niveau 1 et mon titre de niveau 2 qui possèdent une police Times New Roman. Donc ça c’était une petite parenthèse pour commencer à aborder ce genre de syntaxe qui permet de mettre plusieurs types d’éléments HTML à la suite, qui possèdent en fait les mêmes propriétés CSS, ceci afin d’éviter les répétitions. Puisqu’on verra que dans le code il faut essayer de toujours optimiser.
Un fichier CSS qui est assez lourd et volumineux, ça va être un petit peu plus long à charger, et un site qui est un peu plus long à charger pourrait être un petit peu pénalisé par rapport au référencement Google. Donc pensez toujours à optimiser le code pour que votre site s’affiche rapidement. Donc voici, c’était pour les propriétés font-family.
Alors maintenant on va revenir un petit peu sur le font-size qu’on a déjà vu. Donc je vais mettre une balise P et puis on va lui mettre une font-size, comme on avait vu, à 20 pixels. J’exagère un petit peu, je crois que par défaut ça doit être 16 pixels.
Donc là j’ai grossi un petit peu plus le corps de mon texte. D’ailleurs je vais remettre peut-être un zoom normal. Et puis ici, je crois qu’on avait… Alors, on peut mettre un petit commentaire, je voudrais juste désactiver cette propriété, je peux faire contrôle de point, et on s’aperçoit qu’en CSS pour faire un commentaire, on peut faire un //, ça met la ligne en commentaire, ce qui veut dire que cette ligne ne sera pas interprétée, ne sera pas exécutée.
Et ce qui fait que là, si j’enregistre, je vais avoir mes paragraphes avec une taille de police normale, par défaut. Je peux refaire contrôle de point pour désactiver mon commentaire, et si je mets ici 16, il me semble que ça doit être la valeur par défaut. Donc on a vu qu’on pouvait mettre des tailles en pixels, donc là on a une taille fixe, ce qui pourrait être intéressant aussi pour le plus tard, parce qu’on parlera aussi de responsive design, donc de mise en page adaptative, le site va pouvoir s’adapter en fonction des plateformes, que ce soit sur ordinateur ou les plateformes mobiles, et il pourrait être plus judicieux d’employer une autre unité, qui sera EM.
Donc on mettra ici un EM. Donc un EM va récupérer la taille par défaut, soit les 16 pixels, en quelque sorte. Néanmoins, si je veux un petit peu grossir ce texte, je vais pouvoir mettre 1.2, et comme ça je vais augmenter de 20% la taille de ma police.
Donc si là je regarde, maintenant j’ai une police qui est un peu plus grande, et on va pouvoir jouer comme ça avec des valeurs, donc un nombre décimal exprimé en EM, qui permet finalement d’augmenter en pourcentage la taille de la police. Et ça, ça sera mieux, parce que ça s’adaptera mieux par rapport aux différentes plateformes, que ce soit sur l’écran d’ordinateur, smartphone, tablette, etc. Donc voilà un petit peu pour les fonts size, taille de la police.
Maintenant on va pouvoir un petit peu aussi regarder au niveau des fonts style. Font style qui par défaut est à normal, ça on ne le met pas puisque c’est le style par défaut normal. Maintenant on pourra rajouter italic, et maintenant je vais avoir des paragraphes en italic.
Donc je vais l’enlever, ou je le remets en commentaire, pour que vous puissiez le garder en tête. Après on a le font white, qui va jouer cette fois sur la graisse de la police, qui peut s’exprimer soit entre 100 et 900, par défaut on va avoir la valeur 400, et 100 ça va être une police très fine, et puis 900 ça va être une police grasse, avec un bold. D’ailleurs on pourra aussi mettre bold, lighter, etc, on peut jouer sur différentes valeurs.
Donc si je mets maintenant bold, je vais avoir une police en caractère gras. Après on peut l’exprimer comme je disais en unité, 100, 200, etc, mais là ça dépendra un petit peu de la police, ce qu’elle prévoit comme type de graisse. Toutes les polices ne vont pas prévoir tout cet échantillon de graisse de 100 à 900, il y en aura qui auront simplement une police de niveau 400, dite régulière, et il y en a d’autres qui pourront jouer sur une police fine à 100, 400 et 900.
Il n’y aura pas forcément des valeurs intermédiaires, là il faudra voir un petit peu ce que peuvent accepter les polices comme type de graisse au niveau de l’affichage. Donc là d’ailleurs je pense que même 100 n’existe pas pour la réale, puisque ça reste à 400 je pense, la police par défaut, la graisse par défaut. Voilà, 400, on a la même chose.
Donc ça c’était pour le type de graisse, font-weight, après on va avoir tout ce qui est alignement de texte, donc là je vais plutôt faire ça au niveau des titres, et on va pouvoir jouer sur les propriétés texte align, texte align, on va pouvoir mettre centré, calé à droite, calé à gauche, donc par défaut évidemment c’est calé à gauche, et on va pouvoir mettre center si on souhaite avoir des titres centrés dans la page, comme c’est le cas ici. Alors ce qu’on peut faire aussi au niveau du texte, au niveau des paragraphes, et généralement on aime bien aussi qu’il soit justifié, on va faire un justify ici, donc là on ne va peut-être pas forcément voir bien, puisqu’on n’a pas beaucoup de texte, mais si j’augmente un petit peu le contenu au niveau du html, si je fais encore du dorem, ou si je fais un gros paragraphe, et que je regarde, donc là on a le texte est vraiment justifié, qu’il est bien calé, que si j’enlève ma justification à ce niveau là, je mets ça en commentaire, et je regarde maintenant la part, le mot qui ne s’y rentre pas, il va aller à la ligne, ce qui fait que ce n’est pas très joli comme ça visuellement, donc personnellement j’aime bien que le texte soit justifié, comme ça c’est plus carré, c’est plus joli. Donc ça c’était la propriété texte align, on pourra aussi voir la dernière petite propriété, qui est texte transform, donc là je vais faire ça sur attitre aussi, texte transform, et là on va pouvoir mettre soit tout en minuscules, avec ici lowercase qui va tout mettre en minuscules, peu importe si le texte il est saisi en minuscules, majuscules dans le HTML, là ça va tout convertir en minuscules, et uppercase à l’inverse ça va tout mettre en majuscules, donc si on fait ça, je vais faire un petit test sur les titres, donc si je fais un texte transform uppercase, je vais avoir donc mes titres en majuscules.
Si maintenant je fais un capitalize, je devrais avoir chaque mot qui commence par une lettre capitale, comme c’est le cas, comme ceci, et puis si je mettais, comme je le disais, uppercase, donc je vais tout avoir en minuscules, euh pardon, en uppercase, lowercase pardon, cette fois tout est en minuscules, même si j’avais mis une majuscule au premier mot au début de phrase, maintenant tout est en minuscules. Donc voilà, c’est des petites propriétés qui permettent de jouer aussi sur les caractères, pour afficher des titres en capitales ou pas, etc. Donc voilà pour ces petites propriétés, alors après on a les propriétés couleur, sur lesquelles on a déjà un petit peu agi, je vais faire une vidéo pour parler des couleurs plus en détail, je vous expliquerai un certain nombre de choses, et pour ça je vous donne rendez-vous à une prochaine vidéo, où je parlerai essentiellement des couleurs.
Et bien à bientôt !
