1
00:00:00,335 --> 00:00:03,143
On a vu comment créer 
une première page Web

2
00:00:03,143 --> 00:00:05,579
avec plusieurs balises pour
le texte et les images.

3
00:00:05,579 --> 00:00:08,069
Mais il manque quelque chose : 
les styles, la mise en forme.

4
00:00:08,069 --> 00:00:10,960
Ma page Web ressemble à celle
que vous avez créée.

5
00:00:10,982 --> 00:00:13,686
Texte en noir, fond blanc, même
police de caractères,

6
00:00:13,686 --> 00:00:15,851
chaque partie s'affichant du haut en bas.

7
00:00:15,851 --> 00:00:20,099
En regardant sur le Web, vous avez vu 
des pages qui sont très différentes.

8
00:00:20,229 --> 00:00:21,609
Regardez sur la Khan Academy,

9
00:00:21,609 --> 00:00:24,652
avec des couleurs, des tailles et des
polices de caractères différentes.

10
00:00:24,652 --> 00:00:26,819
C'est le moment de faire ça, maintenant.

11
00:00:26,819 --> 00:00:29,895
Mettez en pause cet exposé et 
regardez plusieurs sites Web.

12
00:00:29,895 --> 00:00:32,755
Quelles sont les différences 
dans leur mise en forme, leur style ?

13
00:00:32,755 --> 00:00:35,742
Qu'est-ce que vous aimez 
ou n'aimez pas dans leur style ?

14
00:00:35,742 --> 00:00:37,834
Je vous attends... Allez-y.

15
00:00:38,051 --> 00:00:40,750
C'est important de voir comment
sont faits plusieurs site Web,

16
00:00:40,750 --> 00:00:43,529
car bientôt, vous allez voir comment 
modifier l'apparence de votre page Web

17
00:00:43,529 --> 00:00:46,962
et vous voudrez le faire à votre manière,
d'une façon qui vous ressemble,

18
00:00:46,962 --> 00:00:51,198
de façon à vous faire plaisir, mais aussi
à faire plaisir à ceux qui vont l'utiliser.

19
00:00:51,198 --> 00:00:53,001
Pour faire ça sur notre page Web,

20
00:00:53,001 --> 00:00:55,455
on a besoin d'apprendre 
un autre langage : CSS.

21
00:00:55,455 --> 00:00:57,878
Cela signifie : Feuilles de style en cascade
("Cascading Style Sheets" en anglais).

22
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.

23
00:01:01,735 --> 00:01:05,896
On ajoute le code CSS dans le HTML
mais ce n'est pas du HTML.

24
00:01:05,896 --> 00:01:08,025
C'est bien un nouveau langage à apprendre,

25
00:01:08,025 --> 00:01:11,165
et il ne faut pas confondre les deux : HTML et CSS.

26
00:01:11,165 --> 00:01:16,557
On verra plusieurs utilisations des CSS,
comme les polices, tailles et présentations,

27
00:01:16,696 --> 00:01:20,548
mais on va commencer par quelque chose
de sympa : les couleurs.

28
00:01:20,548 --> 00:01:25,024
Et si on voulait changer la couleur de
nos titres, en "vert gazon" ?

29
00:01:25,311 --> 00:01:28,404
Pour commencer, on a besoin
d'ajouter une balise "style",

30
00:01:28,404 --> 00:01:31,743
dans la partie "head" de notre page.

31
00:01:31,845 --> 00:01:33,841
Quand le navigateur voit ça, 
il se dit :

32
00:01:33,841 --> 00:01:37,068
"OK, tout ce qui se trouve à 
l'intérieur... ici... c'est du CSS".

33
00:01:37,068 --> 00:01:40,061
Il va utiliser son analyseur de CSS
pour le comprendre...

34
00:01:40,061 --> 00:01:43,675
au lieu d'utiliser son analyseur de HTML.

35
00:01:43,675 --> 00:01:47,912
A l'intérieur... ici... on va ajouter une
règle de style CSS.

36
00:01:47,912 --> 00:01:49,619
La règle de style est composée...

37
00:01:49,619 --> 00:01:52,696
d'un sélecteur qui indique quelle partie
de la page est mise en forme,

38
00:01:52,696 --> 00:01:56,413
et de déclarations qui indique comment
mettre en forme cette partie.

39
00:01:56,413 --> 00:02:00,041
Si on veut mettre en forme tous 
les titre "h2" de notre page,

40
00:02:00,041 --> 00:02:02,626
on va indiquer le sélecteur "h2".

41
00:02:02,626 --> 00:02:05,295
Ensuite, on ajoute des accolades.

42
00:02:05,295 --> 00:02:09,180
C'est bien des accolades, pas des crochets !
Sinon, ça ne marchera pas.

43
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.

44
00:02:13,611 --> 00:02:17,732
Pour changer la couleur du texte, 
on utilise la propriété "color".

45
00:02:17,732 --> 00:02:21,480
Puis, on ajoute un deux-points ":"
et on indique sa valeur.

46
00:02:21,480 --> 00:02:24,951
On a besoin d'indiquer ici la couleur
qu'on veut utiliser.

47
00:02:24,951 --> 00:02:27,517
On peut juste indiquer "green" 
(c'est "vert" en anglais)

48
00:02:27,517 --> 00:02:31,256
Il va comprendre ça, car c'est 
une couleur de base.

49
00:02:31,256 --> 00:02:33,667
Mais ce n'est pas le vert que je veux.

50
00:02:33,667 --> 00:02:35,203
Je veux un "vert gazon" !

51
00:02:35,203 --> 00:02:39,150
Si j’écris "grassy green" ("vert gazon"),
Oh, oh !

52
00:02:39,150 --> 00:02:41,802
Le navigateur ne comprend pas. Du coup,
il remet la couleur par défaut,

53
00:02:41,802 --> 00:02:44,721
en noir, car il ne sait pas à quoi
correspond ce "vert gazon".

54
00:02:44,721 --> 00:02:47,786
Si on veut pouvoir choisir n'importe
quelle couleur,

55
00:02:47,786 --> 00:02:50,726
on a besoin d'utiliser le code RVB
de la couleur.

56
00:02:50,726 --> 00:02:53,318
Vous le connaissez peut être.
En anglais, cela s’appelle le code "RGB"

57
00:02:53,318 --> 00:02:55,860
Vous n'avez pas besoin de connaître
ces codes par cœur,

58
00:02:55,860 --> 00:02:58,346
car on a, ici, un outil pour choisir
la couleur que l'on souhaite.

59
00:02:58,346 --> 00:03:03,306
Pour l'utiliser, on a juste besoin
d'indiquer la fonction : rgb().

60
00:03:03,306 --> 00:03:05,896
et l'outil de choix de couleur s'affiche.

61
00:03:05,896 --> 00:03:08,689
Avec votre souris, choisissez celle 
qui vous convient.

62
00:03:08,709 --> 00:03:11,480
Vous voyez en direct ce que cela
donne dans votre page.

63
00:03:11,480 --> 00:03:14,555
Quand c'est ok, cliquez simplement.

64
00:03:14,555 --> 00:03:20,164
Connaissez-vous ces 3 nombres 
qui sont apparus dans les parenthèses ?

65
00:03:20,164 --> 00:03:24,877
Ce sont les composantes Rouge, Vert et Bleu
qui, mélangées, forme cette couleur.

66
00:03:24,877 --> 00:03:29,458
Le truc sympa de ce sélecteur CSS ("h2"),

67
00:03:29,458 --> 00:03:33,328
est qu'il applique le style à TOUS les
"h2" de la page.

68
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,

69
00:03:37,940 --> 00:03:42,790
et on garde une cohérence sur l'ensemble
de notre page Web.

70
00:03:42,790 --> 00:03:47,154
Grâce aux CSS, vous verrez qu'on peut
les utiliser de plusieurs manières.

71
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.

72
00:03:50,902 --> 00:03:54,280
On peut vraiment faire plein de chose
grâce à ces sélecteurs CSS.

73
00:03:54,408 --> 00:03:56,458
Allez, créons une autre règle CSS.

74
00:03:56,458 --> 00:03:59,213
On veut définir la couleur de fond
en bleu ciel.

75
00:03:59,213 --> 00:04:02,056
Comment indiquer la couleur de fond
de la page Web ?

76
00:04:02,056 --> 00:04:05,811
En fait, quelle balise représente 
l'ensemble de la page Web ?

77
00:04:05,811 --> 00:04:10,384
Ce n'est pas le "h1", 
ce n'est pas le "p", ni l'image.

78
00:04:10,421 --> 00:04:12,128
C'est la balise "body".

79
00:04:12,128 --> 00:04:16,071
Souvenez-vous que tout ce qui est
dans la balise "body" sera visible.

80
00:04:16,071 --> 00:04:18,380
Donc si on veut mettre en forme 
toute la page Web,

81
00:04:18,380 --> 00:04:22,617
on devra utiliser un sélecteur qui
correspond à cette balise.

82
00:04:22,617 --> 00:04:26,792
Donc, on écrit "body" 
et les accolades.

83
00:04:26,905 --> 00:04:29,428
Et au lieu d'utiliser 
la propriété "color",

84
00:04:29,428 --> 00:04:35,899
on va utiliser "backgroud-color"
(couleur de fond), puis, rgb().

85
00:04:35,899 --> 00:04:41,049
On retrouve l'outil pour choisir la couleur,
et on prend un bleu...

86
00:04:41,049 --> 00:04:45,646
qui me fait penser à un beau ciel bleu.

87
00:04:45,646 --> 00:04:46,661
Da, Da !

88
00:04:46,661 --> 00:04:49,370
Regardez ma page mise en forme !

89
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.

90
00:04:54,184 --> 00:04:56,743
Ces deux là sont sympa à utiliser au début.

91
00:04:56,758 --> 00:05:00,207
A la fin de cet exposé, jouez avec 
les couleurs,

92
00:05:00,207 --> 00:05:04,054
choisissez-en d'autres
qui vous ressemble plus.

93
00:05:04,054 --> 00:05:06,489
OK ? Allez, c'est à vous de jouer.