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.