On a vu comment créer une première page Web
avec plusieurs balises pour le texte et les images.
Mais il manque quelque chose : les styles, la mise en forme.
Ma page Web ressemble à celle que vous avez créée.
Texte en noir, fond blanc, même police de caractères,
chaque partie s'affichant du haut en bas.
En regardant sur le Web, vous avez vu des pages qui sont très différentes.
Regardez sur la Khan Academy,
avec des couleurs, des tailles et des polices de caractères différentes.
C'est le moment de faire ça, maintenant.
Mettez en pause cet exposé et regardez plusieurs sites Web.
Quelles sont les différences dans leur mise en forme, leur style ?
Qu'est-ce que vous aimez ou n'aimez pas dans leur style ?
Je vous attends... Allez-y.
C'est important de voir comment sont faits plusieurs site Web,
car bientôt, vous allez voir comment modifier l'apparence de votre page Web
et vous voudrez le faire à votre manière, d'une façon qui vous ressemble,
de façon à vous faire plaisir, mais aussi à faire plaisir à ceux qui vont l'utiliser.
Pour faire ça sur notre page Web,
on a besoin d'apprendre un autre langage : CSS.
Cela signifie : Feuilles de style en cascade ("Cascading Style Sheets" en anglais).
C'est un moyen de définir des styles qu'on applique aux différentes éléments de la page.
On ajoute le code CSS dans le HTML mais ce n'est pas du HTML.
C'est bien un nouveau langage à apprendre,
et il ne faut pas confondre les deux : HTML et CSS.
On verra plusieurs utilisations des CSS, comme les polices, tailles et présentations,
mais on va commencer par quelque chose de sympa : les couleurs.
Et si on voulait changer la couleur de nos titres, en "vert gazon" ?
Pour commencer, on a besoin d'ajouter une balise "style",
dans la partie "head" de notre page.
Quand le navigateur voit ça, il se dit :
"OK, tout ce qui se trouve à l'intérieur... ici... c'est du CSS".
Il va utiliser son analyseur de CSS pour le comprendre...
au lieu d'utiliser son analyseur de HTML.
A l'intérieur... ici... on va ajouter une règle de style CSS.
La règle de style est composée...
d'un sélecteur qui indique quelle partie de la page est mise en forme,
et de déclarations qui indique comment mettre en forme cette partie.
Si on veut mettre en forme tous les titre "h2" de notre page,
on va indiquer le sélecteur "h2".
Ensuite, on ajoute des accolades.
C'est bien des accolades, pas des crochets ! Sinon, ça ne marchera pas.
A l'intérieur, on ajoute nos déclarations avec des propriétés et des valeurs.
Pour changer la couleur du texte, on utilise la propriété "color".
Puis, on ajoute un deux-points ":" et on indique sa valeur.
On a besoin d'indiquer ici la couleur qu'on veut utiliser.
On peut juste indiquer "green" (c'est "vert" en anglais)
Il va comprendre ça, car c'est une couleur de base.
Mais ce n'est pas le vert que je veux.
Je veux un "vert gazon" !
Si j’écris "grassy green" ("vert gazon"), Oh, oh !
Le navigateur ne comprend pas. Du coup, il remet la couleur par défaut,
en noir, car il ne sait pas à quoi correspond ce "vert gazon".
Si on veut pouvoir choisir n'importe quelle couleur,
on a besoin d'utiliser le code RVB de la couleur.
Vous le connaissez peut être. En anglais, cela s’appelle le code "RGB"
Vous n'avez pas besoin de connaître ces codes par cœur,
car on a, ici, un outil pour choisir la couleur que l'on souhaite.
Pour l'utiliser, on a juste besoin d'indiquer la fonction : rgb().
et l'outil de choix de couleur s'affiche.
Avec votre souris, choisissez celle qui vous convient.
Vous voyez en direct ce que cela donne dans votre page.
Quand c'est ok, cliquez simplement.
Connaissez-vous ces 3 nombres qui sont apparus dans les parenthèses ?
Ce sont les composantes Rouge, Vert et Bleu qui, mélangées, forme cette couleur.
Le truc sympa de ce sélecteur CSS ("h2"),
est qu'il applique le style à TOUS les "h2" de la page.
D'un coup, on a modifié la mise en forme de tous nos titre "h2" en vert gazon,
et on garde une cohérence sur l'ensemble de notre page Web.
Grâce aux CSS, vous verrez qu'on peut les utiliser de plusieurs manières.
Par exemple, c'est possible d'appliquer un style que pour certains des "h2" de la page.
On peut vraiment faire plein de chose grâce à ces sélecteurs CSS.
Allez, créons une autre règle CSS.
On veut définir la couleur de fond en bleu ciel.
Comment indiquer la couleur de fond de la page Web ?
En fait, quelle balise représente l'ensemble de la page Web ?
Ce n'est pas le "h1", ce n'est pas le "p", ni l'image.
C'est la balise "body".
Souvenez-vous que tout ce qui est dans la balise "body" sera visible.
Donc si on veut mettre en forme toute la page Web,
on devra utiliser un sélecteur qui correspond à cette balise.
Donc, on écrit "body" et les accolades.
Et au lieu d'utiliser la propriété "color",
on va utiliser "backgroud-color" (couleur de fond), puis, rgb().
On retrouve l'outil pour choisir la couleur, et on prend un bleu...
qui me fait penser à un beau ciel bleu.
Da, Da !
Regardez ma page mise en forme !
Il existe des centaines de propriétés CSS en plus des couleurs et couleurs de fond.
Ces deux là sont sympa à utiliser au début.
A la fin de cet exposé, jouez avec les couleurs,
choisissez-en d'autres qui vous ressemble plus.
OK ? Allez, c'est à vous de jouer.