[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.41,0:00:01.84,Default,,0000,0000,0000,,Bienvenue sur ma page Web !
Dialogue: 0,0:00:01.84,0:00:04.06,Default,,0000,0000,0000,,Je sais... Elle n'est pas super intéressante !
Dialogue: 0,0:00:04.06,0:00:07.48,Default,,0000,0000,0000,,Elle est complètement vide, mais toutes\Nles pages Web commencent comme ça !
Dialogue: 0,0:00:07.48,0:00:10.17,Default,,0000,0000,0000,,Je vais vous montrer bientôt\Ncomment la remplir.
Dialogue: 0,0:00:10.28,0:00:11.68,Default,,0000,0000,0000,,Pour commencez, passons une minute
Dialogue: 0,0:00:11.68,0:00:14.86,Default,,0000,0000,0000,,à regarder le squelette d'une \Npage Web vide.
Dialogue: 0,0:00:15.39,0:00:16.94,Default,,0000,0000,0000,,Chaque page Web débute avec
Dialogue: 0,0:00:16.94,0:00:20.38,Default,,0000,0000,0000,,cette ligne bizarre appelée \Nle DOCTYPE tout en haut.
Dialogue: 0,0:00:20.56,0:00:21.96,Default,,0000,0000,0000,,C'est juste une indication \Npour que le navigateur
Dialogue: 0,0:00:21.96,0:00:24.60,Default,,0000,0000,0000,,sache que cette page Web est \Nécrite en HTML moderne, récent,
Dialogue: 0,0:00:24.60,0:00:27.53,Default,,0000,0000,0000,,et pas en HTML simple comme\Non en faisait il y a longtemps.
Dialogue: 0,0:00:27.93,0:00:31.03,Default,,0000,0000,0000,,Ensuite, la première balise de la page.
Dialogue: 0,0:00:31.03,0:00:34.58,Default,,0000,0000,0000,,HTML est un langage de balises\N("markup" en anglais).
Dialogue: 0,0:00:34.64,0:00:36.40,Default,,0000,0000,0000,,Une balise, c'est un de ces trucs
Dialogue: 0,0:00:36.40,0:00:38.31,Default,,0000,0000,0000,,qui commence avec ce crochet ouvrant
Dialogue: 0,0:00:38.31,0:00:40.68,Default,,0000,0000,0000,,et se termine par un autre crochet fermant.
Dialogue: 0,0:00:40.74,0:00:42.66,Default,,0000,0000,0000,,Si vous aimez les maths, \Nces signes sont :
Dialogue: 0,0:00:42.66,0:00:46.10,Default,,0000,0000,0000,,"strictement inférieur à"\Net "strictement supérieur à".
Dialogue: 0,0:00:46.47,0:00:48.36,Default,,0000,0000,0000,,La première balise de toute les pages \Nest toujours
Dialogue: 0,0:00:48.36,0:00:51.34,Default,,0000,0000,0000,,la balise HTML, juste après le DOCTYPE.
Dialogue: 0,0:00:51.34,0:00:53.87,Default,,0000,0000,0000,,Celle-là est la balise HTML de début,
Dialogue: 0,0:00:53.87,0:00:57.06,Default,,0000,0000,0000,,et tout en bas, on trouve \Nla balise HTML de fin,
Dialogue: 0,0:00:57.06,0:00:59.73,Default,,0000,0000,0000,,qui lui ressemble... à part,\Nce caractère "back-slash"
Dialogue: 0,0:00:59.73,0:01:01.75,Default,,0000,0000,0000,,... qui est, du coup, très important.
Dialogue: 0,0:01:01.89,0:01:05.15,Default,,0000,0000,0000,,Cette balise HTML doit contenir\Ntoutes les autres balises...
Dialogue: 0,0:01:05.15,0:01:07.35,Default,,0000,0000,0000,,de votre page Web.
Dialogue: 0,0:01:07.38,0:01:11.05,Default,,0000,0000,0000,,C'est bien pour ça, que la balise HTML\Nde fin est tout à la fin.
Dialogue: 0,0:01:11.12,0:01:13.35,Default,,0000,0000,0000,,Beaucoup de balises ont \Ncette construction par paire,
Dialogue: 0,0:01:13.35,0:01:15.10,Default,,0000,0000,0000,,mais pas toutes.
Dialogue: 0,0:01:15.57,0:01:19.18,Default,,0000,0000,0000,,OK. Sous la balise HTML, il y a \Ntoujours une balise HEAD.
Dialogue: 0,0:01:19.44,0:01:22.15,Default,,0000,0000,0000,,Cette balise contient des informations\Nqui aide le navigateur à afficher la page,
Dialogue: 0,0:01:22.15,0:01:25.16,Default,,0000,0000,0000,,mais ne contient rien qui sera affiché.
Dialogue: 0,0:01:25.44,0:01:27.88,Default,,0000,0000,0000,,Dans cette balise META, on donne plus\Nd'infos au navigateur
Dialogue: 0,0:01:27.88,0:01:30.02,Default,,0000,0000,0000,,sur la façon d'afficher la page.
Dialogue: 0,0:01:30.20,0:01:31.88,Default,,0000,0000,0000,,Par exemple, si vous utilisez des \Ncaractères classiques
Dialogue: 0,0:01:31.88,0:01:33.28,Default,,0000,0000,0000,,comme ceux de la langue anglaise\Nou française,
Dialogue: 0,0:01:33.28,0:01:36.62,Default,,0000,0000,0000,,et pas de caractères de\Nl'alphabet arabe ou chinois,
Dialogue: 0,0:01:36.63,0:01:39.62,Default,,0000,0000,0000,,vous devez utiliser le jeu\Nde caractères utf-8.
Dialogue: 0,0:01:40.10,0:01:41.58,Default,,0000,0000,0000,,Ensuite, il y a cette balise TITLE\N("titre" en anglais),
Dialogue: 0,0:01:41.58,0:01:45.01,Default,,0000,0000,0000,,que le navigateur utilise pour\Nconnaître le titre de la page.
Dialogue: 0,0:01:45.21,0:01:47.62,Default,,0000,0000,0000,,C'est ce qui est affiché comme\Ntitre de l'onglet,
Dialogue: 0,0:01:47.62,0:01:50.04,Default,,0000,0000,0000,,dans les favoris \Nou dans les résultats de recherche.
Dialogue: 0,0:01:50.16,0:01:53.43,Default,,0000,0000,0000,,Ici, sur la Khan Academy, le titre \Ns'affiche au dessus de la page Web.
Dialogue: 0,0:01:53.69,0:01:55.54,Default,,0000,0000,0000,,Essayons de changer ce titre.
Dialogue: 0,0:01:55.70,0:01:59.35,Default,,0000,0000,0000,,Je vais créer une page sur\Nles lapins. Donc j’écris...\N
Dialogue: 0,0:01:59.35,0:02:01.91,Default,,0000,0000,0000,,"Tout savoir sur les lapins".
Dialogue: 0,0:02:01.91,0:02:05.34,Default,,0000,0000,0000,,Et vous voyez que le nom de la page,\Nau dessus, a changé aussi.
Dialogue: 0,0:02:05.54,0:02:08.15,Default,,0000,0000,0000,,Bon. OK. On a terminé avec ça.
Dialogue: 0,0:02:08.15,0:02:11.95,Default,,0000,0000,0000,,Donc on "ferme" la balise HEAD,\Net on va regarder la balise
Dialogue: 0,0:02:11.95,0:02:14.81,Default,,0000,0000,0000,,qui contiendra tout le reste : \Nla balise BODY.
Dialogue: 0,0:02:14.95,0:02:17.100,Default,,0000,0000,0000,,C'est simple : on a juste la balise\Nd'ouverture et celle de fin.
Dialogue: 0,0:02:18.08,0:02:19.52,Default,,0000,0000,0000,,Que va-t-on ajouter maintenant ?
Dialogue: 0,0:02:19.52,0:02:21.92,Default,,0000,0000,0000,,Je fais une page Web sur les lapins,
Dialogue: 0,0:02:21.92,0:02:25.50,Default,,0000,0000,0000,,donc je dois indiquer ça \Ndans un gros titre tout en haut.
Dialogue: 0,0:02:25.56,0:02:28.92,Default,,0000,0000,0000,,Pour ajouter un titre, \Non utilise la balise H1.
Dialogue: 0,0:02:29.35,0:02:33.15,Default,,0000,0000,0000,,Ensuite, j'écris :\N... Tout sur les lapins.
Dialogue: 0,0:02:33.15,0:02:34.77,Default,,0000,0000,0000,,En fait, on a 6 balises différentes\Npour les titres.
Dialogue: 0,0:02:34.77,0:02:38.27,Default,,0000,0000,0000,,H1, H2, H3, H4, H5 et... H6 !
Dialogue: 0,0:02:38.38,0:02:41.15,Default,,0000,0000,0000,,La balise H1 est à utiliser \Npour les titres les plus importants.
Dialogue: 0,0:02:41.15,0:02:43.36,Default,,0000,0000,0000,,La balise H6... pour les titres \Nles moins importants
Dialogue: 0,0:02:43.49,0:02:45.68,Default,,0000,0000,0000,,On va ajouter d'autres titres\Npour avoir plusieurs chapitres.
Dialogue: 0,0:02:45.70,0:02:48.56,Default,,0000,0000,0000,,J'utilise la balise H2,
Dialogue: 0,0:02:48.56,0:02:51.65,Default,,0000,0000,0000,,car les chapitres sont un peu moins importants.
Dialogue: 0,0:02:51.96,0:02:55.47,Default,,0000,0000,0000,,J'écris : infos principales...\N... chansons.
Dialogue: 0,0:02:55.71,0:02:58.24,Default,,0000,0000,0000,,Maintenant ajoutons du contenu.
Dialogue: 0,0:02:58.40,0:03:00.44,Default,,0000,0000,0000,,Pour cette page, je cible des lecteurs...
Dialogue: 0,0:03:00.44,0:03:03.93,Default,,0000,0000,0000,,qui sont des extra-terrestres qui\Nn'ont jamais vu de lapins.
Dialogue: 0,0:03:03.93,0:03:06.94,Default,,0000,0000,0000,,Donc je commence par une\Nbonne description des lapins.
Dialogue: 0,0:03:07.10,0:03:10.17,Default,,0000,0000,0000,,En fait, j'ai besoin d'un premier \Nparagraphe avec du texte.
Dialogue: 0,0:03:10.40,0:03:13.37,Default,,0000,0000,0000,,Comment faire un paragraphe\Nen HTML ?
Dialogue: 0,0:03:13.39,0:03:16.05,Default,,0000,0000,0000,,Avec la balise P... bien sûr !
Dialogue: 0,0:03:16.47,0:03:20.74,Default,,0000,0000,0000,,On ajoute une balise P, \Net je vais copier du texte...
Dialogue: 0,0:03:20.74,0:03:25.57,Default,,0000,0000,0000,,que je n'ai plus qu'à coller...\Npour ne pas avoir à tout écrire.
Dialogue: 0,0:03:25.86,0:03:27.12,Default,,0000,0000,0000,,Impeccable !
Dialogue: 0,0:03:27.70,0:03:30.90,Default,,0000,0000,0000,,Ensuite, les extra-terrestres \Nauront besoin des paroles d'une chanson.
Dialogue: 0,0:03:30.91,0:03:33.17,Default,,0000,0000,0000,,donc je vais leur proposer \Nune de mes chansons préférées.
Dialogue: 0,0:03:33.17,0:03:38.74,Default,,0000,0000,0000,,J'utilise la balise P pour ça...\Net je colle les paroles.
Dialogue: 0,0:03:39.52,0:03:43.42,Default,,0000,0000,0000,,J'adore celle là !
Dialogue: 0,0:03:43.57,0:03:47.67,Default,,0000,0000,0000,,Mais... Oh, oh !\NTout est affiché sur la même ligne.
Dialogue: 0,0:03:47.87,0:03:50.32,Default,,0000,0000,0000,,Comment peuvent-ils savoir \Nla chanter correctement ?
Dialogue: 0,0:03:50.68,0:03:54.21,Default,,0000,0000,0000,,Pourquoi le navigateur\Nn'affiche pas les sauts de lignes ?
Dialogue: 0,0:03:54.35,0:03:57.05,Default,,0000,0000,0000,,En fait, les navigateurs ne tiennent\Npas compte des sauts de ligne,
Dialogue: 0,0:03:57.05,0:03:59.14,Default,,0000,0000,0000,,ni des espaces dans votre HTML.
Dialogue: 0,0:03:59.32,0:04:01.65,Default,,0000,0000,0000,,Si on veut qu'il passe à la ligne,
Dialogue: 0,0:04:01.65,0:04:05.02,Default,,0000,0000,0000,,on doit le lui dire en utilisant \Nune autre balise...
Dialogue: 0,0:04:05.02,0:04:08.18,Default,,0000,0000,0000,,la balise BR : pour le saut de ligne.
Dialogue: 0,0:04:08.40,0:04:12.51,Default,,0000,0000,0000,,OK. on va l'utiliser \Npour chaque saut de ligne.
Dialogue: 0,0:04:12.78,0:04:15.36,Default,,0000,0000,0000,,Ça ressemble à une chanson, maintenant !
Dialogue: 0,0:04:15.44,0:04:18.89,Default,,0000,0000,0000,,Avez-vous remarqué un truc spécial\Npour la balise BR ?
Dialogue: 0,0:04:19.22,0:04:20.85,Default,,0000,0000,0000,,Il n'y a pas de balise de fin.
Dialogue: 0,0:04:20.97,0:04:21.94,Default,,0000,0000,0000,,Et en fait, en y réfléchissant,
Dialogue: 0,0:04:21.94,0:04:23.49,Default,,0000,0000,0000,,un saut de ligne ne contient aucun contenu,
Dialogue: 0,0:04:23.49,0:04:25.86,Default,,0000,0000,0000,,donc il n'y a rien à "encadrer".
Dialogue: 0,0:04:26.01,0:04:28.89,Default,,0000,0000,0000,,Juste la balise ouvrante BR est suffisante.
Dialogue: 0,0:04:29.06,0:04:30.36,Default,,0000,0000,0000,,Et voilà notre première page.
Dialogue: 0,0:04:30.46,0:04:32.70,Default,,0000,0000,0000,,Les extra-terrestres vont pouvoir\Nen savoir un peu sur les lapins...
Dialogue: 0,0:04:32.70,0:04:35.88,Default,,0000,0000,0000,,et vous avez appris les bases du HTML.
Dialogue: 0,0:04:36.04,0:04:37.16,Default,,0000,0000,0000,,Quand j'aurais terminé,
Dialogue: 0,0:04:37.16,0:04:39.92,Default,,0000,0000,0000,,jouez avec ce code HTML et \Nessayez de changer des trucs.
Dialogue: 0,0:04:39.98,0:04:43.66,Default,,0000,0000,0000,,Quand vous êtes prêts, continuez\Navec votre premier défi !