Bonjour, dans la conférence d'aujourd'hui, nous allons parler de style de votre texte sur vos pages Web. L' une des façons les plus simples et les plus faciles de rendre votre page un peu différente de la valeur par défaut standard est de réfléchir à la façon dont vous pourriez vouloir styler votre texte pour avoir un impact maximal. Tant d'options et nous allons en parler aujourd'hui. Une de ces options est de penser essentiellement à votre police. Certains des éléments que vous pouvez styliser sont la famille de polices, le style de police, la variante de police et la taille de police. Nous pouvons également penser à coiffer la couleur et l'arrière-plan de votre police. On peut aussi parler d'alignement. Et enfin, nous allons parler très brièvement de la hauteur de la ligne. Ce sont les quatre choses que vous pouvez faire pour juste vraiment mettre en évidence ou souligner les différentes choses que vous aimeriez que votre style apporte. Donc, d'abord, parlons de la famille de polices. Les familles de polices ne sont que des types de texte différents. Donc, si vous avez déjà utilisé Word, vous êtes allé à la famille de polices et vous pouvez choisir Arial ou Wingdings ou tous ces différents types de polices. Vous pouvez faire les mêmes choses sur votre page Web. Donc j'ai quelques exemples pour vous de ce qui est plus commun. Vous avez Helvetica, Courrier, Courier Nouveau, Comic Sans, cursive ou Verdana. J' ai essayé de mettre le type de police ici dans la diapositive, mais il pourrait être difficile pour vous de le voir. Et je l'ai fait exprès, parce que ce qui vous semble évident quand vous concevez ne semble pas toujours évident pour les gens qui regardent votre page. J' ai aussi choisi ces particuliers parce que je voulais vous montrer que certains sont un seul mot, comme Helvetica. Mais Comic Sans MS est plusieurs mots, donc j'ai dû le mettre entre guillemets. D' accord. Donc, comment cela fonctionne est, encore une fois, vous utilisez votre règle de syntaxe. Vous avez votre sélecteur, votre propriété, puis votre valeur. Donc, dans ce cas, j'ai dit que chaque fois que vous voyez un en-tête h1, n'utilisez pas l'en-tête par défaut du navigateur, à la place, je veux que vous utilisiez la police Arial. Donc, il change légèrement la police pour ressembler à cet exemple ici. Maintenant, chaque navigateur ne supporte pas tout. Nous avons vu cela même avec HTML 5. Certains navigateurs prennent en charge du texte, d'autres pas. De la même manière, certains navigateurs supportent certaines polices et d'autres ne le font pas aussi bien. Donc, ce que vous pouvez faire, c'est vous pouvez fournir des alternatives. Dans cet exemple, j'ai donné au navigateur trois alternatives différentes à utiliser. Je dis en gros, chaque fois que vous arrivez à un tag h1, je veux vraiment que vous utilisiez la police Courier. Mais si vous n'avez pas la police Courier, allez-y et utilisez la police Impact. Si vous n'avez pas celle-là, allez-y et utilisez Arial. Maintenant, une des questions que vous pourriez vous poser est, et si elle n'a pas trois de ces polices ? Il n'a pas Courier, Impact, ou Arial. Eh bien, si vous vous souvenez, quand nous avons parlé de feuilles de style en cascade, nous avons dit que si vous lui donnez une règle et qu'il ne peut pas la supporter, il reviendra toujours à la valeur par défaut du navigateur. Donc, vous n'avez pas besoin de vous soucier de la disparition de la police parce que vous lui avez donné une mauvaise famille de polices. Ça passera toujours. Donc, quand vous choisissez vos familles de polices, il y a quelques choses que vous devriez penser. Le premier est peut-être le plus important, c'est que certaines polices sont beaucoup plus conviviales que d'autres. Il y a essentiellement deux catégories. Vous avez des polices serif et des polices sans empattement. Les polices de serif sont celles qui ont le genre de bords fantaisie le long du côté que vous avez utilisé lorsque vous appreniez la calligraphie ou des choses différentes comme ça. Les polices sans empattement sont très propres, il n'y a pas de liste déroulante ou quelque chose comme ça. Donc quand vient le temps pour quelqu'un de faire sauter ta page, j'essaie de penser au bon mot, quand ils veulent entrer, et qu'ils veulent que ça paraisse plus grand. Les polices de serif peuvent vraiment devenir désordonnées, alors évitez ces polices chaque fois que possible. Personnellement, je n'utilise pas de polices personnalisées moi-même, mais je n'ai jamais été un type de personne artistique. Donc, si vous décidez que vous voulez avoir votre propre police, ou une sorte de police personnalisée sécurisée pour le Web, vous devez utiliser quelque chose de spécial ici appelé une règle de police. Et ce que nous faisons, c'est que vous pouvez voir dans le premier exemple, vous dites, hé, je vais définir ma propre police. Je vais l'appeler MySpecialFont. Vous pouvez l'appeler tout ce que vous voulez l'appeler, puis vous devez lui donner une source. Donc cette source, c'est une nouvelle que vous n'avez pas vu auparavant. Nous n'utilisons pas href, nous n'utilisons pas source, nous utilisons url. Et l'url dit que c'est là que vous pouvez trouver le fichier qui définit ma police spéciale. Et une fois que vous faites cela, une fois que vous avez écrit la règle de police une fois, tout au long de votre feuille de style, vous pouvez aller de l'avant et la référencer. Maintenant, à chaque fois que j'utilise une police h1, vous allez utiliser MySpecialFont. Parlons maintenant du style de police. C' est un mot beaucoup plus fantaisiste que vous pourriez vous attendre, mais nous parlons simplement de voulez-vous que votre police soit normale, ce qui est la valeur par défaut, ou voulez-vous qu'elle soit italique ? Ou voulez-vous qu'il soit oblique, ce qui est fondamentalement juste un type spécial d'italique. Donc, la police normale se produira peu importe si c'est exactement comme ça. Si quelqu'un d'autre a écrit une feuille de style et qu'il a tout fait italique, c'est là que vous voudrez peut-être dire, non, non, je vais l'écraser et le rendre normal. Italic est toujours un certain type de maigre, fondamentalement, à votre police. Un oblique est quand vous voulez vraiment être extra spécial et définir exactement l'angle vers lequel vous voulez que votre texte se penche. La variante de police, nous n'avons vraiment que deux options ici. Nous avons la normale et nous avons des petites capitalisations. Les gens l'utilisent un peu quand ils essaient de faire très cohérent et pourtant un peu fantaisie regarder vers elle. Donc ici, j'ai dit à nouveau, en utilisant toujours h1, je veux que ma variante de police soit en petites majuscules. Alors maintenant, quand vous regardez mon texte, mon texte h1 vers le bas, j'ai écrit la <h1>variation en petites majuscules. Mais quand le navigateur l'affiche, il va l'afficher en petites majuscules. Cela vous empêche donc d'avoir à aller et venir à vous rappeler de changer tout votre texte en majuscules ou en minuscules. Peu importe comment vous l'écrivez, le navigateur le montrera toujours en majuscules. Maintenant, la taille de la police est quelque chose dont nous parlerons à peu près tout au long de ce cours et dans d'autres cours que nous allons faire aussi, comme le design responsive, parce que c'est vraiment beaucoup de façons différentes de le faire. Commençons donc par le plus basique. Vos options sont, vous pouvez utiliser une taille de police égale à extra-extra-petit, extra-petit, petit et plus petit. Je n'aime pas vraiment ça, parce que ça ne me donne pas vraiment un cadre de référence. Vous pouvez avoir moyen, vous pouvez avoir grand, extra-grand, XX-grand, et plus grand. Très peu de gens utilisent ces options, mais ils sont là, donc je voulais vous dire ce qu'ils étaient. Au lieu de cela, ce que beaucoup de gens utilisent c'est qu'ils utilisent des pixels. Donc, je vais inclure sur le site ce joli genre de tableau pour vous qui rapporte combien de pixels à un pouce, combien de pixels à picos, afin que vous puissiez avoir une idée de cela. Mais la plupart des gens font quelque chose sur les lignes de 20 pixels, 35 pixels, 80 pixels. Et c'est un aspect très cohérent et c'est quelque chose que les gens peuvent ressentir à quoi ça devrait ressembler. Cependant, j'ai tendance à utiliser des pourcentages à la place. Les pourcentages vont nous permettre de changer la taille de la police car nous redimensionnons l'écran beaucoup plus facilement. Donc, si vous deviez dire utiliser 100%, ce sera la taille par défaut. Si vous dites utiliser 110%, il sera légèrement plus grand. Si tu utilisais 75 %, ce serait les trois quarts de la taille. Ensuite, parlons de couleur et de couleur d'arrière-plan. L' attribut color est la couleur du premier plan, qui est le mot fantaisie pour le texte lui-même. D' accord. La couleur de fond est la couleur de l'arrière-plan derrière la police que nous examinons. Et selon le type de texte que vous coiffez, il peut sembler très différent. Donc, ici, j'ai fait une règle, et vous ne l'avez jamais vu avant. Je vais aller de l'avant et styliser deux sélecteurs différents. Je vais style h1 et span. Donc, si vous mettez une virgule juste là, je l'ai juste ici, entre le h1 et la plage, vous pouvez mettre autant de virgules que vous voulez, et écrire autant de sélecteurs que vous voulez. Dans ce cas, j'ai dit, hé, je veux que ma couleur soit bleue, et je veux que ma couleur de fond soit grise. Et si vous n'êtes pas sûr d'où viennent ces chiffres étranges, allez regarder la vidéo des couleurs. Ça vous expliquera tout. Donc maintenant je suis entré, et dans mon HTML, j'ai des couleurs dans une balise h1, et j'ai le mot en ligne dans une balise span. Et ce que je veux que vous remarquiez, c'est que pour le h1, l'élément bloc, la couleur de fond couvre toute la largeur de la page. Mais pour span, pour les éléments en ligne, la couleur d'arrière-plan ne tourne que autour de l'élément et du texte lui-même. Parlons ensuite de l'alignement du texte. L' alignement du texte est simple. C' est probablement l'une des choses les plus faciles que vous pouvez faire en HTML. Et tu seras vraiment heureuse. Parce que plus tard, quand vous décidez d'aligner d'autres choses, c'est tellement dur et vous allez juste vouloir tout mettre dans le texte. Donc, vos options sont lorsque vous utilisez l'alignement de texte, vous pouvez utiliser à gauche, ce qui signifie juste aligner le texte vers la gauche. C' est ce qu'on fait déjà. Vous pouvez avoir droit, ce qui signifie aligner tout sur la droite, le centre et justifier. Centrez tout autant que vous, au milieu de cette division. Justify essaie de l'étaler pour utiliser autant d'espace que possible. Laissez-moi vous montrer quelques exemples car c'est vraiment la meilleure façon de comprendre ce qui se passe ici. Ici, j'ai un alignement à gauche. Tout s'alignera le long du côté gauche de l'écran. Le suivant que j'ai utilisé du texte dans la ligne est égal à droite. Et vous pouvez voir que tout est aligné vers la droite. Ça a l'air vraiment bizarre. Il y a très peu de raisons que tu utilises ça. A moins que tu n'aies quelque chose d'autre dans le côté au milieu ici. La prochaine que nous allons faire est au centre. Les gens utilisent le centre un peu. Ils l'utilisent presque trop, mais c'est une belle façon de briser votre texte et de le faire paraître un peu différent. Donc, justifier est vraiment difficile à expliquer, et même quand vous le regardez pour la première fois, vous pourriez ne pas remarquer ce qui se passe. Mais avec justification, le navigateur met en petits morceaux d'espace supplémentaire pour vous aider à l'étaler de sorte qu'il a exactement la même largeur tout le long. Donc je vais te montrer le justifié avec la gauche. Et je pense que c'est la meilleure façon de voir la différence, c'est que vous n'avez pas l'espace vide ici. Ils l'ont étalé ici, donc personne n'a trop d'espace vide. Ensuite, nous allons parler de hauteur de ligne, et la hauteur de ligne est vraiment différente parce que cela n'affecte pas la police elle-même. Ça n'affecte pas votre texte. Cela affecte la quantité d'espace autour de votre texte. Certains d'entre vous ont peut-être utilisé Word auparavant, et vous pouvez aller et juste combien d'espace il y a entre les lignes. Peut-être que vous voulez que ce soit une ligne, une ligne et demie, double espacement. C' est de ça qu'on parle ici. Donc mon premier exemple, j'ai dit la hauteur de la ligne égale 50%. Et la suivante, j'ai dit que la hauteur de la ligne est égale à 200%. Donc, dans la première règle, c'est une règle bizarre à écrire parce que je dis que je veux que les choses se chevauchent. Dans la deuxième règle, je dis que je veux que tu t'étales vraiment loin. Oops, d'accord, je vais aller de l'avant et mettre un exemple plus tard en ligne où je peux vous montrer exactement à quoi ressembleraient ces choses. Ou encore mieux, je vais simplement transformer cela en un moment enseignable et vous faire entrer et taper vous-même et regarder comment ces deux règles différentes affectent le texte. Alors passons en revue. Je sais que j'ai passé beaucoup de choses, et ça peut être écrasant. Donc, l'une des choses les plus importantes est avec tout ce que nous faisons dans ce cours, c'est de prendre cinq, dix minutes, de taper des trucs, de jeter un oeil et de voir ce qui se passe. Faites autant d'erreurs que vous pouvez, parce que c'est le moment de faire des erreurs, quand vous avez moi et le reste de la foule ici pour répondre aux questions sur les différents tableaux. Pratique sur les problèmes de jouets. Ne faites pas une énorme page Web et essayez de le styliser. Créez une page avec trois ou quatre paragraphes, quelques liens, et pratiquez-vous sur ceux-ci, parce que peu importe, vous n'avez pas besoin de pratiquer sur une grande page, vous pouvez vous entraîner sur les petits problèmes et cela fait vraiment une grande différence. Enfin, si vous décidez que vous êtes prêt à coder et que vous êtes prêt à faire ce grand projet, assurez-vous d'abord de concevoir vos grands projets sur papier. Je ne peux pas insister assez sur le fait que si vous commencez à coder et à coiffer sans vraiment avoir un plan clair, vous allez juste être très frustré et j'espère, pas j'espère, vous serez très frustré et vous arrêterez. Et je ne veux pas que tu fasses ça. Alors planifiez d'abord tous vos projets sur papier. Si vous suivez ces suggestions, si vous pratiquez, pratiquez, si vous faites des problèmes de jouets, si avant de sauter dans de gros problèmes, vous esquissez d'abord, je pense que vous allez vous amuser beaucoup, et vous allez avoir une très bonne page dont vous serez fier.