[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.34,0:00:03.14,Default,,0000,0000,0000,,On a vu comment créer \Nune première page Web
Dialogue: 0,0:00:03.14,0:00:05.58,Default,,0000,0000,0000,,avec plusieurs balises pour\Nle texte et les images.
Dialogue: 0,0:00:05.58,0:00:08.07,Default,,0000,0000,0000,,Mais il manque quelque chose : \Nles styles, la mise en forme.
Dialogue: 0,0:00:08.07,0:00:10.96,Default,,0000,0000,0000,,Ma page Web ressemble à celle\Nque vous avez créée.
Dialogue: 0,0:00:10.98,0:00:13.69,Default,,0000,0000,0000,,Texte en noir, fond blanc, même\Npolice de caractères,
Dialogue: 0,0:00:13.69,0:00:15.85,Default,,0000,0000,0000,,chaque partie s'affichant du haut en bas.
Dialogue: 0,0:00:15.85,0:00:20.10,Default,,0000,0000,0000,,En regardant sur le Web, vous avez vu \Ndes pages qui sont très différentes.
Dialogue: 0,0:00:20.23,0:00:21.61,Default,,0000,0000,0000,,Regardez sur la Khan Academy,
Dialogue: 0,0:00:21.61,0:00:24.65,Default,,0000,0000,0000,,avec des couleurs, des tailles et des\Npolices de caractères différentes.
Dialogue: 0,0:00:24.65,0:00:26.82,Default,,0000,0000,0000,,C'est le moment de faire ça, maintenant.
Dialogue: 0,0:00:26.82,0:00:29.90,Default,,0000,0000,0000,,Mettez en pause cet exposé et \Nregardez plusieurs sites Web.
Dialogue: 0,0:00:29.90,0:00:32.76,Default,,0000,0000,0000,,Quelles sont les différences \Ndans leur mise en forme, leur style ?
Dialogue: 0,0:00:32.76,0:00:35.74,Default,,0000,0000,0000,,Qu'est-ce que vous aimez \Nou n'aimez pas dans leur style ?
Dialogue: 0,0:00:35.74,0:00:37.83,Default,,0000,0000,0000,,Je vous attends... Allez-y.
Dialogue: 0,0:00:38.05,0:00:40.75,Default,,0000,0000,0000,,C'est important de voir comment\Nsont faits plusieurs site Web,
Dialogue: 0,0:00:40.75,0:00:43.53,Default,,0000,0000,0000,,car bientôt, vous allez voir comment \Nmodifier l'apparence de votre page Web
Dialogue: 0,0:00:43.53,0:00:46.96,Default,,0000,0000,0000,,et vous voudrez le faire à votre manière,\Nd'une façon qui vous ressemble,
Dialogue: 0,0:00:46.96,0:00:51.20,Default,,0000,0000,0000,,de façon à vous faire plaisir, mais aussi\Nà faire plaisir à ceux qui vont l'utiliser.
Dialogue: 0,0:00:51.20,0:00:53.00,Default,,0000,0000,0000,,Pour faire ça sur notre page Web,
Dialogue: 0,0:00:53.00,0:00:55.46,Default,,0000,0000,0000,,on a besoin d'apprendre \Nun autre langage : CSS.
Dialogue: 0,0:00:55.46,0:00:57.88,Default,,0000,0000,0000,,Cela signifie : Feuilles de style en cascade\N("Cascading Style Sheets" en anglais).
Dialogue: 0,0:00:57.88,0:01:01.66,Default,,0000,0000,0000,,C'est un moyen de définir des styles qu'on\Napplique aux différentes éléments de la page.
Dialogue: 0,0:01:01.74,0:01:05.90,Default,,0000,0000,0000,,On ajoute le code CSS dans le HTML\Nmais ce n'est pas du HTML.
Dialogue: 0,0:01:05.90,0:01:08.02,Default,,0000,0000,0000,,C'est bien un nouveau langage à apprendre,
Dialogue: 0,0:01:08.02,0:01:11.16,Default,,0000,0000,0000,,et il ne faut pas confondre les deux : HTML et CSS.
Dialogue: 0,0:01:11.16,0:01:16.56,Default,,0000,0000,0000,,On verra plusieurs utilisations des CSS,\Ncomme les polices, tailles et présentations,
Dialogue: 0,0:01:16.70,0:01:20.55,Default,,0000,0000,0000,,mais on va commencer par quelque chose\Nde sympa : les couleurs.
Dialogue: 0,0:01:20.55,0:01:25.02,Default,,0000,0000,0000,,Et si on voulait changer la couleur de\Nnos titres, en "vert gazon" ?
Dialogue: 0,0:01:25.31,0:01:28.40,Default,,0000,0000,0000,,Pour commencer, on a besoin\Nd'ajouter une balise "style",
Dialogue: 0,0:01:28.40,0:01:31.74,Default,,0000,0000,0000,,dans la partie "head" de notre page.
Dialogue: 0,0:01:31.84,0:01:33.84,Default,,0000,0000,0000,,Quand le navigateur voit ça, \Nil se dit :
Dialogue: 0,0:01:33.84,0:01:37.07,Default,,0000,0000,0000,,"OK, tout ce qui se trouve à \Nl'intérieur... ici... c'est du CSS".
Dialogue: 0,0:01:37.07,0:01:40.06,Default,,0000,0000,0000,,Il va utiliser son analyseur de CSS\Npour le comprendre...
Dialogue: 0,0:01:40.06,0:01:43.68,Default,,0000,0000,0000,,au lieu d'utiliser son analyseur de HTML.
Dialogue: 0,0:01:43.68,0:01:47.91,Default,,0000,0000,0000,,A l'intérieur... ici... on va ajouter une\Nrègle de style CSS.
Dialogue: 0,0:01:47.91,0:01:49.62,Default,,0000,0000,0000,,La règle de style est composée...
Dialogue: 0,0:01:49.62,0:01:52.70,Default,,0000,0000,0000,,d'un sélecteur qui indique quelle partie\Nde la page est mise en forme,
Dialogue: 0,0:01:52.70,0:01:56.41,Default,,0000,0000,0000,,et de déclarations qui indique comment\Nmettre en forme cette partie.
Dialogue: 0,0:01:56.41,0:02:00.04,Default,,0000,0000,0000,,Si on veut mettre en forme tous \Nles titre "h2" de notre page,
Dialogue: 0,0:02:00.04,0:02:02.63,Default,,0000,0000,0000,,on va indiquer le sélecteur "h2".
Dialogue: 0,0:02:02.63,0:02:05.30,Default,,0000,0000,0000,,Ensuite, on ajoute des accolades.
Dialogue: 0,0:02:05.30,0:02:09.18,Default,,0000,0000,0000,,C'est bien des accolades, pas des crochets !\NSinon, ça ne marchera pas.
Dialogue: 0,0:02:09.18,0:02:13.61,Default,,0000,0000,0000,,A l'intérieur, on ajoute nos déclarations\Navec des propriétés et des valeurs.
Dialogue: 0,0:02:13.61,0:02:17.73,Default,,0000,0000,0000,,Pour changer la couleur du texte, \Non utilise la propriété "color".
Dialogue: 0,0:02:17.73,0:02:21.48,Default,,0000,0000,0000,,Puis, on ajoute un deux-points ":"\Net on indique sa valeur.
Dialogue: 0,0:02:21.48,0:02:24.95,Default,,0000,0000,0000,,On a besoin d'indiquer ici la couleur\Nqu'on veut utiliser.
Dialogue: 0,0:02:24.95,0:02:27.52,Default,,0000,0000,0000,,On peut juste indiquer "green" \N(c'est "vert" en anglais)
Dialogue: 0,0:02:27.52,0:02:31.26,Default,,0000,0000,0000,,Il va comprendre ça, car c'est \Nune couleur de base.
Dialogue: 0,0:02:31.26,0:02:33.67,Default,,0000,0000,0000,,Mais ce n'est pas le vert que je veux.
Dialogue: 0,0:02:33.67,0:02:35.20,Default,,0000,0000,0000,,Je veux un "vert gazon" !
Dialogue: 0,0:02:35.20,0:02:39.15,Default,,0000,0000,0000,,Si j’écris "grassy green" ("vert gazon"),\NOh, oh !
Dialogue: 0,0:02:39.15,0:02:41.80,Default,,0000,0000,0000,,Le navigateur ne comprend pas. Du coup,\Nil remet la couleur par défaut,
Dialogue: 0,0:02:41.80,0:02:44.72,Default,,0000,0000,0000,,en noir, car il ne sait pas à quoi\Ncorrespond ce "vert gazon".
Dialogue: 0,0:02:44.72,0:02:47.79,Default,,0000,0000,0000,,Si on veut pouvoir choisir n'importe\Nquelle couleur,
Dialogue: 0,0:02:47.79,0:02:50.73,Default,,0000,0000,0000,,on a besoin d'utiliser le code RVB\Nde la couleur.
Dialogue: 0,0:02:50.73,0:02:53.32,Default,,0000,0000,0000,,Vous le connaissez peut être.\NEn anglais, cela s’appelle le code "RGB"
Dialogue: 0,0:02:53.32,0:02:55.86,Default,,0000,0000,0000,,Vous n'avez pas besoin de connaître\Nces codes par cœur,
Dialogue: 0,0:02:55.86,0:02:58.35,Default,,0000,0000,0000,,car on a, ici, un outil pour choisir\Nla couleur que l'on souhaite.
Dialogue: 0,0:02:58.35,0:03:03.31,Default,,0000,0000,0000,,Pour l'utiliser, on a juste besoin\Nd'indiquer la fonction : rgb().
Dialogue: 0,0:03:03.31,0:03:05.90,Default,,0000,0000,0000,,et l'outil de choix de couleur s'affiche.
Dialogue: 0,0:03:05.90,0:03:08.69,Default,,0000,0000,0000,,Avec votre souris, choisissez celle \Nqui vous convient.
Dialogue: 0,0:03:08.71,0:03:11.48,Default,,0000,0000,0000,,Vous voyez en direct ce que cela\Ndonne dans votre page.
Dialogue: 0,0:03:11.48,0:03:14.56,Default,,0000,0000,0000,,Quand c'est ok, cliquez simplement.
Dialogue: 0,0:03:14.56,0:03:20.16,Default,,0000,0000,0000,,Connaissez-vous ces 3 nombres \Nqui sont apparus dans les parenthèses ?
Dialogue: 0,0:03:20.16,0:03:24.88,Default,,0000,0000,0000,,Ce sont les composantes Rouge, Vert et Bleu\Nqui, mélangées, forme cette couleur.
Dialogue: 0,0:03:24.88,0:03:29.46,Default,,0000,0000,0000,,Le truc sympa de ce sélecteur CSS ("h2"),
Dialogue: 0,0:03:29.46,0:03:33.33,Default,,0000,0000,0000,,est qu'il applique le style à TOUS les\N"h2" de la page.
Dialogue: 0,0:03:33.33,0:03:37.94,Default,,0000,0000,0000,,D'un coup, on a modifié la mise en forme \Nde tous nos titre "h2" en vert gazon,
Dialogue: 0,0:03:37.94,0:03:42.79,Default,,0000,0000,0000,,et on garde une cohérence sur l'ensemble\Nde notre page Web.
Dialogue: 0,0:03:42.79,0:03:47.15,Default,,0000,0000,0000,,Grâce aux CSS, vous verrez qu'on peut\Nles utiliser de plusieurs manières.
Dialogue: 0,0:03:47.15,0:03:50.90,Default,,0000,0000,0000,,Par exemple, c'est possible d'appliquer\Nun style que pour certains des "h2" de la page.
Dialogue: 0,0:03:50.90,0:03:54.28,Default,,0000,0000,0000,,On peut vraiment faire plein de chose\Ngrâce à ces sélecteurs CSS.
Dialogue: 0,0:03:54.41,0:03:56.46,Default,,0000,0000,0000,,Allez, créons une autre règle CSS.
Dialogue: 0,0:03:56.46,0:03:59.21,Default,,0000,0000,0000,,On veut définir la couleur de fond\Nen bleu ciel.
Dialogue: 0,0:03:59.21,0:04:02.06,Default,,0000,0000,0000,,Comment indiquer la couleur de fond\Nde la page Web ?
Dialogue: 0,0:04:02.06,0:04:05.81,Default,,0000,0000,0000,,En fait, quelle balise représente \Nl'ensemble de la page Web ?
Dialogue: 0,0:04:05.81,0:04:10.38,Default,,0000,0000,0000,,Ce n'est pas le "h1", \Nce n'est pas le "p", ni l'image.
Dialogue: 0,0:04:10.42,0:04:12.13,Default,,0000,0000,0000,,C'est la balise "body".
Dialogue: 0,0:04:12.13,0:04:16.07,Default,,0000,0000,0000,,Souvenez-vous que tout ce qui est\Ndans la balise "body" sera visible.
Dialogue: 0,0:04:16.07,0:04:18.38,Default,,0000,0000,0000,,Donc si on veut mettre en forme \Ntoute la page Web,
Dialogue: 0,0:04:18.38,0:04:22.62,Default,,0000,0000,0000,,on devra utiliser un sélecteur qui\Ncorrespond à cette balise.
Dialogue: 0,0:04:22.62,0:04:26.79,Default,,0000,0000,0000,,Donc, on écrit "body" \Net les accolades.
Dialogue: 0,0:04:26.90,0:04:29.43,Default,,0000,0000,0000,,Et au lieu d'utiliser \Nla propriété "color",
Dialogue: 0,0:04:29.43,0:04:35.90,Default,,0000,0000,0000,,on va utiliser "backgroud-color"\N(couleur de fond), puis, rgb().
Dialogue: 0,0:04:35.90,0:04:41.05,Default,,0000,0000,0000,,On retrouve l'outil pour choisir la couleur,\Net on prend un bleu...
Dialogue: 0,0:04:41.05,0:04:45.65,Default,,0000,0000,0000,,qui me fait penser à un beau ciel bleu.
Dialogue: 0,0:04:45.65,0:04:46.66,Default,,0000,0000,0000,,Da, Da !
Dialogue: 0,0:04:46.66,0:04:49.37,Default,,0000,0000,0000,,Regardez ma page mise en forme !
Dialogue: 0,0:04:49.37,0:04:54.18,Default,,0000,0000,0000,,Il existe des centaines de propriétés CSS\Nen plus des couleurs et couleurs de fond.
Dialogue: 0,0:04:54.18,0:04:56.74,Default,,0000,0000,0000,,Ces deux là sont sympa à utiliser au début.
Dialogue: 0,0:04:56.76,0:05:00.21,Default,,0000,0000,0000,,A la fin de cet exposé, jouez avec \Nles couleurs,
Dialogue: 0,0:05:00.21,0:05:04.05,Default,,0000,0000,0000,,choisissez-en d'autres\Nqui vous ressemble plus.
Dialogue: 0,0:05:04.05,0:05:06.49,Default,,0000,0000,0000,,OK ? Allez, c'est à vous de jouer.