WEBVTT

00:00:00.335 --> 00:00:03.143
On a vu comment créer 
une première page Web

00:00:03.143 --> 00:00:05.579
avec plusieurs balises pour
le texte et les images.

00:00:05.579 --> 00:00:08.069
Mais il manque quelque chose : 
les styles, la mise en forme.

00:00:08.069 --> 00:00:10.960
Ma page Web ressemble à celle
que vous avez créée.

00:00:10.982 --> 00:00:13.686
Texte en noir, fond blanc, même
police de caractères,

00:00:13.686 --> 00:00:15.851
chaque partie s'affichant du haut en bas.

00:00:15.851 --> 00:00:20.099
En regardant sur le Web, vous avez vu 
des pages qui sont très différentes.

00:00:20.229 --> 00:00:21.609
Regardez sur la Khan Academy,

00:00:21.609 --> 00:00:24.652
avec des couleurs, des tailles et des
polices de caractères différentes.

00:00:24.652 --> 00:00:26.819
C'est le moment de faire ça, maintenant.

00:00:26.819 --> 00:00:29.895
Mettez en pause cet exposé et 
regardez plusieurs sites Web.

00:00:29.895 --> 00:00:32.755
Quelles sont les différences 
dans leur mise en forme, leur style ?

00:00:32.755 --> 00:00:35.742
Qu'est-ce que vous aimez 
ou n'aimez pas dans leur style ?

00:00:35.742 --> 00:00:37.834
Je vous attends... Allez-y.

00:00:38.051 --> 00:00:40.750
C'est important de voir comment
sont faits plusieurs site Web,

00:00:40.750 --> 00:00:43.529
car bientôt, vous allez voir comment 
modifier l'apparence de votre page Web

00:00:43.529 --> 00:00:46.962
et vous voudrez le faire à votre manière,
d'une façon qui vous ressemble,

00:00:46.962 --> 00:00:51.198
de façon à vous faire plaisir, mais aussi
à faire plaisir à ceux qui vont l'utiliser.

00:00:51.198 --> 00:00:53.001
Pour faire ça sur notre page Web,

00:00:53.001 --> 00:00:55.455
on a besoin d'apprendre 
un autre langage : CSS.

00:00:55.455 --> 00:00:57.878
Cela signifie : Feuilles de style en cascade
("Cascading Style Sheets" en anglais).

00:00:57.878 --> 00:01:01.659
C'est un moyen de définir des styles qu'on
applique aux différentes éléments de la page.

00:01:01.735 --> 00:01:05.896
On ajoute le code CSS dans le HTML
mais ce n'est pas du HTML.

00:01:05.896 --> 00:01:08.025
C'est bien un nouveau langage à apprendre,

00:01:08.025 --> 00:01:11.165
et il ne faut pas confondre les deux : HTML et CSS.

00:01:11.165 --> 00:01:16.557
On verra plusieurs utilisations des CSS,
comme les polices, tailles et présentations,

00:01:16.696 --> 00:01:20.548
mais on va commencer par quelque chose
de sympa : les couleurs.

00:01:20.548 --> 00:01:25.024
Et si on voulait changer la couleur de
nos titres, en "vert gazon" ?

00:01:25.311 --> 00:01:28.404
Pour commencer, on a besoin
d'ajouter une balise "style",

00:01:28.404 --> 00:01:31.743
dans la partie "head" de notre page.

00:01:31.845 --> 00:01:33.841
Quand le navigateur voit ça, 
il se dit :

00:01:33.841 --> 00:01:37.068
"OK, tout ce qui se trouve à 
l'intérieur... ici... c'est du CSS".

00:01:37.068 --> 00:01:40.061
Il va utiliser son analyseur de CSS
pour le comprendre...

00:01:40.061 --> 00:01:43.675
au lieu d'utiliser son analyseur de HTML.

00:01:43.675 --> 00:01:47.912
A l'intérieur... ici... on va ajouter une
règle de style CSS.

00:01:47.912 --> 00:01:49.619
La règle de style est composée...

00:01:49.619 --> 00:01:52.696
d'un sélecteur qui indique quelle partie
de la page est mise en forme,

00:01:52.696 --> 00:01:56.413
et de déclarations qui indique comment
mettre en forme cette partie.

00:01:56.413 --> 00:02:00.041
Si on veut mettre en forme tous 
les titre "h2" de notre page,

00:02:00.041 --> 00:02:02.626
on va indiquer le sélecteur "h2".

00:02:02.626 --> 00:02:05.295
Ensuite, on ajoute des accolades.

00:02:05.295 --> 00:02:09.180
C'est bien des accolades, pas des crochets !
Sinon, ça ne marchera pas.

00:02:09.180 --> 00:02:13.611
A l'intérieur, on ajoute nos déclarations
avec des propriétés et des valeurs.

00:02:13.611 --> 00:02:17.732
Pour changer la couleur du texte, 
on utilise la propriété "color".

00:02:17.732 --> 00:02:21.480
Puis, on ajoute un deux-points ":"
et on indique sa valeur.

00:02:21.480 --> 00:02:24.951
On a besoin d'indiquer ici la couleur
qu'on veut utiliser.

00:02:24.951 --> 00:02:27.517
On peut juste indiquer "green" 
(c'est "vert" en anglais)

00:02:27.517 --> 00:02:31.256
Il va comprendre ça, car c'est 
une couleur de base.

00:02:31.256 --> 00:02:33.667
Mais ce n'est pas le vert que je veux.

00:02:33.667 --> 00:02:35.203
Je veux un "vert gazon" !

00:02:35.203 --> 00:02:39.150
Si j’écris "grassy green" ("vert gazon"),
Oh, oh !

00:02:39.150 --> 00:02:41.802
Le navigateur ne comprend pas. Du coup,
il remet la couleur par défaut,

00:02:41.802 --> 00:02:44.721
en noir, car il ne sait pas à quoi
correspond ce "vert gazon".

00:02:44.721 --> 00:02:47.786
Si on veut pouvoir choisir n'importe
quelle couleur,

00:02:47.786 --> 00:02:50.726
on a besoin d'utiliser le code RVB
de la couleur.

00:02:50.726 --> 00:02:53.318
Vous le connaissez peut être.
En anglais, cela s’appelle le code "RGB"

00:02:53.318 --> 00:02:55.860
Vous n'avez pas besoin de connaître
ces codes par cœur,

00:02:55.860 --> 00:02:58.346
car on a, ici, un outil pour choisir
la couleur que l'on souhaite.

00:02:58.346 --> 00:03:03.306
Pour l'utiliser, on a juste besoin
d'indiquer la fonction : rgb().

00:03:03.306 --> 00:03:05.896
et l'outil de choix de couleur s'affiche.

00:03:05.896 --> 00:03:08.689
Avec votre souris, choisissez celle 
qui vous convient.

00:03:08.709 --> 00:03:11.480
Vous voyez en direct ce que cela
donne dans votre page.

00:03:11.480 --> 00:03:14.555
Quand c'est ok, cliquez simplement.

00:03:14.555 --> 00:03:20.164
Connaissez-vous ces 3 nombres 
qui sont apparus dans les parenthèses ?

00:03:20.164 --> 00:03:24.877
Ce sont les composantes Rouge, Vert et Bleu
qui, mélangées, forme cette couleur.

00:03:24.877 --> 00:03:29.458
Le truc sympa de ce sélecteur CSS ("h2"),

00:03:29.458 --> 00:03:33.328
est qu'il applique le style à TOUS les
"h2" de la page.

00:03:33.328 --> 00:03:37.940
D'un coup, on a modifié la mise en forme 
de tous nos titre "h2" en vert gazon,

00:03:37.940 --> 00:03:42.790
et on garde une cohérence sur l'ensemble
de notre page Web.

00:03:42.790 --> 00:03:47.154
Grâce aux CSS, vous verrez qu'on peut
les utiliser de plusieurs manières.

00:03:47.154 --> 00:03:50.902
Par exemple, c'est possible d'appliquer
un style que pour certains des "h2" de la page.

00:03:50.902 --> 00:03:54.280
On peut vraiment faire plein de chose
grâce à ces sélecteurs CSS.

00:03:54.408 --> 00:03:56.458
Allez, créons une autre règle CSS.

00:03:56.458 --> 00:03:59.213
On veut définir la couleur de fond
en bleu ciel.

00:03:59.213 --> 00:04:02.056
Comment indiquer la couleur de fond
de la page Web ?

00:04:02.056 --> 00:04:05.811
En fait, quelle balise représente 
l'ensemble de la page Web ?

00:04:05.811 --> 00:04:10.384
Ce n'est pas le "h1", 
ce n'est pas le "p", ni l'image.

00:04:10.421 --> 00:04:12.128
C'est la balise "body".

00:04:12.128 --> 00:04:16.071
Souvenez-vous que tout ce qui est
dans la balise "body" sera visible.

00:04:16.071 --> 00:04:18.380
Donc si on veut mettre en forme 
toute la page Web,

00:04:18.380 --> 00:04:22.617
on devra utiliser un sélecteur qui
correspond à cette balise.

00:04:22.617 --> 00:04:26.792
Donc, on écrit "body" 
et les accolades.

00:04:26.905 --> 00:04:29.428
Et au lieu d'utiliser 
la propriété "color",

00:04:29.428 --> 00:04:35.899
on va utiliser "backgroud-color"
(couleur de fond), puis, rgb().

00:04:35.899 --> 00:04:41.049
On retrouve l'outil pour choisir la couleur,
et on prend un bleu...

00:04:41.049 --> 00:04:45.646
qui me fait penser à un beau ciel bleu.

00:04:45.646 --> 00:04:46.661
Da, Da !

00:04:46.661 --> 00:04:49.370
Regardez ma page mise en forme !

00:04:49.370 --> 00:04:54.184
Il existe des centaines de propriétés CSS
en plus des couleurs et couleurs de fond.

00:04:54.184 --> 00:04:56.743
Ces deux là sont sympa à utiliser au début.

00:04:56.758 --> 00:05:00.207
A la fin de cet exposé, jouez avec 
les couleurs,

00:05:00.207 --> 00:05:04.054
choisissez-en d'autres
qui vous ressemble plus.

00:05:04.054 --> 00:05:06.489
OK ? Allez, c'est à vous de jouer.