WEBVTT

00:00:00.411 --> 00:00:01.835
Bienvenue sur ma page Web !

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

00:00:04.059 --> 00:00:07.477
Elle est complètement vide, mais toutes
les pages Web commencent comme ça !

00:00:07.477 --> 00:00:10.166
Je vais vous montrer bientôt
comment la remplir.

00:00:10.275 --> 00:00:11.681
Pour commencez, passons une minute

00:00:11.681 --> 00:00:14.860
à regarder le squelette d'une 
page Web vide.

00:00:15.389 --> 00:00:16.944
Chaque page Web débute avec

00:00:16.944 --> 00:00:20.384
cette ligne bizarre appelée 
le DOCTYPE tout en haut.

00:00:20.562 --> 00:00:21.961
C'est juste une indication 
pour que le navigateur

00:00:21.961 --> 00:00:24.603
sache que cette page Web est 
écrite en HTML moderne, récent,

00:00:24.603 --> 00:00:27.530
et pas en HTML simple comme
on en faisait il y a longtemps.

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

00:00:31.026 --> 00:00:34.582
HTML est un langage de balises
("markup" en anglais).

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

00:00:36.399 --> 00:00:38.314
qui commence avec ce crochet ouvrant

00:00:38.314 --> 00:00:40.684
et se termine par un autre crochet fermant.

00:00:40.745 --> 00:00:42.656
Si vous aimez les maths, 
ces signes sont :

00:00:42.656 --> 00:00:46.103
"strictement inférieur à"
et "strictement supérieur à".

00:00:46.474 --> 00:00:48.356
La première balise de toute les pages 
est toujours

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

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

00:00:53.871 --> 00:00:57.055
et tout en bas, on trouve 
la balise HTML de fin,

00:00:57.055 --> 00:00:59.729
qui lui ressemble... à part,
ce caractère "back-slash"

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

00:01:01.889 --> 00:01:05.147
Cette balise HTML doit contenir
toutes les autres balises...

00:01:05.147 --> 00:01:07.354
de votre page Web.

00:01:07.376 --> 00:01:11.051
C'est bien pour ça, que la balise HTML
de fin est tout à la fin.

00:01:11.119 --> 00:01:13.351
Beaucoup de balises ont 
cette construction par paire,

00:01:13.351 --> 00:01:15.099
mais pas toutes.

00:01:15.571 --> 00:01:19.176
OK. Sous la balise HTML, il y a 
toujours une balise HEAD.

00:01:19.437 --> 00:01:22.146
Cette balise contient des informations
qui aide le navigateur à afficher la page,

00:01:22.146 --> 00:01:25.162
mais ne contient rien qui sera affiché.

00:01:25.435 --> 00:01:27.885
Dans cette balise META, on donne plus
d'infos au navigateur

00:01:27.885 --> 00:01:30.017
sur la façon d'afficher la page.

00:01:30.204 --> 00:01:31.885
Par exemple, si vous utilisez des 
caractères classiques

00:01:31.885 --> 00:01:33.281
comme ceux de la langue anglaise
ou française,

00:01:33.281 --> 00:01:36.617
et pas de caractères de
l'alphabet arabe ou chinois,

00:01:36.628 --> 00:01:39.618
vous devez utiliser le jeu
de caractères utf-8.

00:01:40.100 --> 00:01:41.578
Ensuite, il y a cette balise TITLE
("titre" en anglais),

00:01:41.578 --> 00:01:45.009
que le navigateur utilise pour
connaître le titre de la page.

00:01:45.212 --> 00:01:47.623
C'est ce qui est affiché comme
titre de l'onglet,

00:01:47.623 --> 00:01:50.039
dans les favoris 
ou dans les résultats de recherche.

00:01:50.161 --> 00:01:53.430
Ici, sur la Khan Academy, le titre 
s'affiche au dessus de la page Web.

00:01:53.687 --> 00:01:55.544
Essayons de changer ce titre.

00:01:55.695 --> 00:01:59.348
Je vais créer une page sur
les lapins. Donc j’écris...


00:01:59.348 --> 00:02:01.914
"Tout savoir sur les lapins".

00:02:01.914 --> 00:02:05.343
Et vous voyez que le nom de la page,
au dessus, a changé aussi.

00:02:05.539 --> 00:02:08.149
Bon. OK. On a terminé avec ça.

00:02:08.149 --> 00:02:11.946
Donc on "ferme" la balise HEAD,
et on va regarder la balise

00:02:11.946 --> 00:02:14.809
qui contiendra tout le reste : 
la balise BODY.

00:02:14.953 --> 00:02:17.995
C'est simple : on a juste la balise
d'ouverture et celle de fin.

00:02:18.081 --> 00:02:19.521
Que va-t-on ajouter maintenant ?

00:02:19.521 --> 00:02:21.921
Je fais une page Web sur les lapins,

00:02:21.921 --> 00:02:25.495
donc je dois indiquer ça 
dans un gros titre tout en haut.

00:02:25.559 --> 00:02:28.916
Pour ajouter un titre, 
on utilise la balise H1.

00:02:29.354 --> 00:02:33.154
Ensuite, j'écris :
... Tout sur les lapins.

00:02:33.154 --> 00:02:34.772
En fait, on a 6 balises différentes
pour les titres.

00:02:34.772 --> 00:02:38.271
H1, H2, H3, H4, H5 et... H6 !

00:02:38.381 --> 00:02:41.153
La balise H1 est à utiliser 
pour les titres les plus importants.

00:02:41.153 --> 00:02:43.358
La balise H6... pour les titres 
les moins importants

00:02:43.491 --> 00:02:45.682
On va ajouter d'autres titres
pour avoir plusieurs chapitres.

00:02:45.696 --> 00:02:48.555
J'utilise la balise H2,

00:02:48.555 --> 00:02:51.647
car les chapitres sont un peu moins importants.

00:02:51.957 --> 00:02:55.469
J'écris : infos principales...
... chansons.

00:02:55.714 --> 00:02:58.240
Maintenant ajoutons du contenu.

00:02:58.402 --> 00:03:00.435
Pour cette page, je cible des lecteurs...

00:03:00.435 --> 00:03:03.934
qui sont des extra-terrestres qui
n'ont jamais vu de lapins.

00:03:03.934 --> 00:03:06.943
Donc je commence par une
bonne description des lapins.

00:03:07.100 --> 00:03:10.174
En fait, j'ai besoin d'un premier 
paragraphe avec du texte.

00:03:10.396 --> 00:03:13.366
Comment faire un paragraphe
en HTML ?

00:03:13.391 --> 00:03:16.049
Avec la balise P... bien sûr !

00:03:16.470 --> 00:03:20.736
On ajoute une balise P, 
et je vais copier du texte...

00:03:20.736 --> 00:03:25.573
que je n'ai plus qu'à coller...
pour ne pas avoir à tout écrire.

00:03:25.856 --> 00:03:27.116
Impeccable !

00:03:27.699 --> 00:03:30.901
Ensuite, les extra-terrestres 
auront besoin des paroles d'une chanson.

00:03:30.912 --> 00:03:33.170
donc je vais leur proposer 
une de mes chansons préférées.

00:03:33.170 --> 00:03:38.740
J'utilise la balise P pour ça...
et je colle les paroles.

00:03:39.521 --> 00:03:43.419
J'adore celle là !

00:03:43.572 --> 00:03:47.672
Mais... Oh, oh !
Tout est affiché sur la même ligne.

00:03:47.868 --> 00:03:50.315
Comment peuvent-ils savoir 
la chanter correctement ?

00:03:50.678 --> 00:03:54.210
Pourquoi le navigateur
n'affiche pas les sauts de lignes ?

00:03:54.350 --> 00:03:57.052
En fait, les navigateurs ne tiennent
pas compte des sauts de ligne,

00:03:57.052 --> 00:03:59.139
ni des espaces dans votre HTML.

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

00:04:01.647 --> 00:04:05.022
on doit le lui dire en utilisant 
une autre balise...

00:04:05.022 --> 00:04:08.176
la balise BR : pour le saut de ligne.

00:04:08.398 --> 00:04:12.513
OK. on va l'utiliser 
pour chaque saut de ligne.

00:04:12.777 --> 00:04:15.365
Ça ressemble à une chanson, maintenant !

00:04:15.440 --> 00:04:18.890
Avez-vous remarqué un truc spécial
pour la balise BR ?

00:04:19.221 --> 00:04:20.851
Il n'y a pas de balise de fin.

00:04:20.966 --> 00:04:21.938
Et en fait, en y réfléchissant,

00:04:21.938 --> 00:04:23.492
un saut de ligne ne contient aucun contenu,

00:04:23.492 --> 00:04:25.861
donc il n'y a rien à "encadrer".

00:04:26.006 --> 00:04:28.886
Juste la balise ouvrante BR est suffisante.

00:04:29.062 --> 00:04:30.361
Et voilà notre première page.

00:04:30.456 --> 00:04:32.704
Les extra-terrestres vont pouvoir
en savoir un peu sur les lapins...

00:04:32.704 --> 00:04:35.883
et vous avez appris les bases du HTML.

00:04:36.044 --> 00:04:37.158
Quand j'aurais terminé,

00:04:37.158 --> 00:04:39.915
jouez avec ce code HTML et 
essayez de changer des trucs.

00:04:39.976 --> 00:04:43.658
Quand vous êtes prêts, continuez
avec votre premier défi !