0:00:00.411,0:00:01.835
Bienvenue sur ma page Web !

0:00:01.835,0:00:04.059
Je sais... Elle n'est pas super intéressante !

0:00:04.059,0:00:07.477
Elle est complètement vide, mais toutes[br]les pages Web commencent comme ça !

0:00:07.477,0:00:10.166
Je vais vous montrer bientôt[br]comment la remplir.

0:00:10.275,0:00:11.681
Pour commencez, passons une minute

0:00:11.681,0:00:14.860
à regarder le squelette d'une [br]page Web vide.

0:00:15.389,0:00:16.944
Chaque page Web débute avec

0:00:16.944,0:00:20.384
cette ligne bizarre appelée [br]le DOCTYPE tout en haut.

0:00:20.562,0:00:21.961
C'est juste une indication [br]pour que le navigateur

0:00:21.961,0:00:24.603
sache que cette page Web est [br]écrite en HTML moderne, récent,

0:00:24.603,0:00:27.530
et pas en HTML simple comme[br]on en faisait il y a longtemps.

0:00:27.931,0:00:31.026
Ensuite, la première balise de la page.

0:00:31.026,0:00:34.582
HTML est un langage de balises[br]("markup" en anglais).

0:00:34.635,0:00:36.399
Une balise, c'est un de ces trucs

0:00:36.399,0:00:38.314
qui commence avec ce crochet ouvrant

0:00:38.314,0:00:40.684
et se termine par un autre crochet fermant.

0:00:40.745,0:00:42.656
Si vous aimez les maths, [br]ces signes sont :

0:00:42.656,0:00:46.103
"strictement inférieur à"[br]et "strictement supérieur à".

0:00:46.474,0:00:48.356
La première balise de toute les pages [br]est toujours

0:00:48.356,0:00:51.343
la balise HTML, juste après le DOCTYPE.

0:00:51.343,0:00:53.871
Celle-là est la balise HTML de début,

0:00:53.871,0:00:57.055
et tout en bas, on trouve [br]la balise HTML de fin,

0:00:57.055,0:00:59.729
qui lui ressemble... à part,[br]ce caractère "back-slash"

0:00:59.729,0:01:01.747
... qui est, du coup, très important.

0:01:01.889,0:01:05.147
Cette balise HTML doit contenir[br]toutes les autres balises...

0:01:05.147,0:01:07.354
de votre page Web.

0:01:07.376,0:01:11.051
C'est bien pour ça, que la balise HTML[br]de fin est tout à la fin.

0:01:11.119,0:01:13.351
Beaucoup de balises ont [br]cette construction par paire,

0:01:13.351,0:01:15.099
mais pas toutes.

0:01:15.571,0:01:19.176
OK. Sous la balise HTML, il y a [br]toujours une balise HEAD.

0:01:19.437,0:01:22.146
Cette balise contient des informations[br]qui aide le navigateur à afficher la page,

0:01:22.146,0:01:25.162
mais ne contient rien qui sera affiché.

0:01:25.435,0:01:27.885
Dans cette balise META, on donne plus[br]d'infos au navigateur

0:01:27.885,0:01:30.017
sur la façon d'afficher la page.

0:01:30.204,0:01:31.885
Par exemple, si vous utilisez des [br]caractères classiques

0:01:31.885,0:01:33.281
comme ceux de la langue anglaise[br]ou française,

0:01:33.281,0:01:36.617
et pas de caractères de[br]l'alphabet arabe ou chinois,

0:01:36.628,0:01:39.618
vous devez utiliser le jeu[br]de caractères utf-8.

0:01:40.100,0:01:41.578
Ensuite, il y a cette balise TITLE[br]("titre" en anglais),

0:01:41.578,0:01:45.009
que le navigateur utilise pour[br]connaître le titre de la page.

0:01:45.212,0:01:47.623
C'est ce qui est affiché comme[br]titre de l'onglet,

0:01:47.623,0:01:50.039
dans les favoris [br]ou dans les résultats de recherche.

0:01:50.161,0:01:53.430
Ici, sur la Khan Academy, le titre [br]s'affiche au dessus de la page Web.

0:01:53.687,0:01:55.544
Essayons de changer ce titre.

0:01:55.695,0:01:59.348
Je vais créer une page sur[br]les lapins. Donc j’écris...[br]

0:01:59.348,0:02:01.914
"Tout savoir sur les lapins".

0:02:01.914,0:02:05.343
Et vous voyez que le nom de la page,[br]au dessus, a changé aussi.

0:02:05.539,0:02:08.149
Bon. OK. On a terminé avec ça.

0:02:08.149,0:02:11.946
Donc on "ferme" la balise HEAD,[br]et on va regarder la balise

0:02:11.946,0:02:14.809
qui contiendra tout le reste : [br]la balise BODY.

0:02:14.953,0:02:17.995
C'est simple : on a juste la balise[br]d'ouverture et celle de fin.

0:02:18.081,0:02:19.521
Que va-t-on ajouter maintenant ?

0:02:19.521,0:02:21.921
Je fais une page Web sur les lapins,

0:02:21.921,0:02:25.495
donc je dois indiquer ça [br]dans un gros titre tout en haut.

0:02:25.559,0:02:28.916
Pour ajouter un titre, [br]on utilise la balise H1.

0:02:29.354,0:02:33.154
Ensuite, j'écris :[br]... Tout sur les lapins.

0:02:33.154,0:02:34.772
En fait, on a 6 balises différentes[br]pour les titres.

0:02:34.772,0:02:38.271
H1, H2, H3, H4, H5 et... H6 !

0:02:38.381,0:02:41.153
La balise H1 est à utiliser [br]pour les titres les plus importants.

0:02:41.153,0:02:43.358
La balise H6... pour les titres [br]les moins importants

0:02:43.491,0:02:45.682
On va ajouter d'autres titres[br]pour avoir plusieurs chapitres.

0:02:45.696,0:02:48.555
J'utilise la balise H2,

0:02:48.555,0:02:51.647
car les chapitres sont un peu moins importants.

0:02:51.957,0:02:55.469
J'écris : infos principales...[br]... chansons.

0:02:55.714,0:02:58.240
Maintenant ajoutons du contenu.

0:02:58.402,0:03:00.435
Pour cette page, je cible des lecteurs...

0:03:00.435,0:03:03.934
qui sont des extra-terrestres qui[br]n'ont jamais vu de lapins.

0:03:03.934,0:03:06.943
Donc je commence par une[br]bonne description des lapins.

0:03:07.100,0:03:10.174
En fait, j'ai besoin d'un premier [br]paragraphe avec du texte.

0:03:10.396,0:03:13.366
Comment faire un paragraphe[br]en HTML ?

0:03:13.391,0:03:16.049
Avec la balise P... bien sûr !

0:03:16.470,0:03:20.736
On ajoute une balise P, [br]et je vais copier du texte...

0:03:20.736,0:03:25.573
que je n'ai plus qu'à coller...[br]pour ne pas avoir à tout écrire.

0:03:25.856,0:03:27.116
Impeccable !

0:03:27.699,0:03:30.901
Ensuite, les extra-terrestres [br]auront besoin des paroles d'une chanson.

0:03:30.912,0:03:33.170
donc je vais leur proposer [br]une de mes chansons préférées.

0:03:33.170,0:03:38.740
J'utilise la balise P pour ça...[br]et je colle les paroles.

0:03:39.521,0:03:43.419
J'adore celle là !

0:03:43.572,0:03:47.672
Mais... Oh, oh ![br]Tout est affiché sur la même ligne.

0:03:47.868,0:03:50.315
Comment peuvent-ils savoir [br]la chanter correctement ?

0:03:50.678,0:03:54.210
Pourquoi le navigateur[br]n'affiche pas les sauts de lignes ?

0:03:54.350,0:03:57.052
En fait, les navigateurs ne tiennent[br]pas compte des sauts de ligne,

0:03:57.052,0:03:59.139
ni des espaces dans votre HTML.

0:03:59.318,0:04:01.647
Si on veut qu'il passe à la ligne,

0:04:01.647,0:04:05.022
on doit le lui dire en utilisant [br]une autre balise...

0:04:05.022,0:04:08.176
la balise BR : pour le saut de ligne.

0:04:08.398,0:04:12.513
OK. on va l'utiliser [br]pour chaque saut de ligne.

0:04:12.777,0:04:15.365
Ça ressemble à une chanson, maintenant !

0:04:15.440,0:04:18.890
Avez-vous remarqué un truc spécial[br]pour la balise BR ?

0:04:19.221,0:04:20.851
Il n'y a pas de balise de fin.

0:04:20.966,0:04:21.938
Et en fait, en y réfléchissant,

0:04:21.938,0:04:23.492
un saut de ligne ne contient aucun contenu,

0:04:23.492,0:04:25.861
donc il n'y a rien à "encadrer".

0:04:26.006,0:04:28.886
Juste la balise ouvrante BR est suffisante.

0:04:29.062,0:04:30.361
Et voilà notre première page.

0:04:30.456,0:04:32.704
Les extra-terrestres vont pouvoir[br]en savoir un peu sur les lapins...

0:04:32.704,0:04:35.883
et vous avez appris les bases du HTML.

0:04:36.044,0:04:37.158
Quand j'aurais terminé,

0:04:37.158,0:04:39.915
jouez avec ce code HTML et [br]essayez de changer des trucs.

0:04:39.976,0:04:43.658
Quand vous êtes prêts, continuez[br]avec votre premier défi !