1
00:00:00,411 --> 00:00:01,835
Bienvenue sur ma page Web !

2
00:00:01,835 --> 00:00:04,059
Je sais... Elle n'est pas super intéressante !

3
00:00:04,059 --> 00:00:07,477
Elle est complètement vide, mais toutes
les pages Web commencent comme ça !

4
00:00:07,477 --> 00:00:10,166
Je vais vous montrer bientôt
comment la remplir.

5
00:00:10,275 --> 00:00:11,681
Pour commencez, passons une minute

6
00:00:11,681 --> 00:00:14,860
à regarder le squelette d'une 
page Web vide.

7
00:00:15,389 --> 00:00:16,944
Chaque page Web débute avec

8
00:00:16,944 --> 00:00:20,384
cette ligne bizarre appelée 
le DOCTYPE tout en haut.

9
00:00:20,562 --> 00:00:21,961
C'est juste une indication 
pour que le navigateur

10
00:00:21,961 --> 00:00:24,603
sache que cette page Web est 
écrite en HTML moderne, récent,

11
00:00:24,603 --> 00:00:27,530
et pas en HTML simple comme
on en faisait il y a longtemps.

12
00:00:27,931 --> 00:00:31,026
Ensuite, la première balise de la page.

13
00:00:31,026 --> 00:00:34,582
HTML est un langage de balises
("markup" en anglais).

14
00:00:34,635 --> 00:00:36,399
Une balise, c'est un de ces trucs

15
00:00:36,399 --> 00:00:38,314
qui commence avec ce crochet ouvrant

16
00:00:38,314 --> 00:00:40,684
et se termine par un autre crochet fermant.

17
00:00:40,745 --> 00:00:42,656
Si vous aimez les maths, 
ces signes sont :

18
00:00:42,656 --> 00:00:46,103
"strictement inférieur à"
et "strictement supérieur à".

19
00:00:46,474 --> 00:00:48,356
La première balise de toute les pages 
est toujours

20
00:00:48,356 --> 00:00:51,343
la balise HTML, juste après le DOCTYPE.

21
00:00:51,343 --> 00:00:53,871
Celle-là est la balise HTML de début,

22
00:00:53,871 --> 00:00:57,055
et tout en bas, on trouve 
la balise HTML de fin,

23
00:00:57,055 --> 00:00:59,729
qui lui ressemble... à part,
ce caractère "back-slash"

24
00:00:59,729 --> 00:01:01,747
... qui est, du coup, très important.

25
00:01:01,889 --> 00:01:05,147
Cette balise HTML doit contenir
toutes les autres balises...

26
00:01:05,147 --> 00:01:07,354
de votre page Web.

27
00:01:07,376 --> 00:01:11,051
C'est bien pour ça, que la balise HTML
de fin est tout à la fin.

28
00:01:11,119 --> 00:01:13,351
Beaucoup de balises ont 
cette construction par paire,

29
00:01:13,351 --> 00:01:15,099
mais pas toutes.

30
00:01:15,571 --> 00:01:19,176
OK. Sous la balise HTML, il y a 
toujours une balise HEAD.

31
00:01:19,437 --> 00:01:22,146
Cette balise contient des informations
qui aide le navigateur à afficher la page,

32
00:01:22,146 --> 00:01:25,162
mais ne contient rien qui sera affiché.

33
00:01:25,435 --> 00:01:27,885
Dans cette balise META, on donne plus
d'infos au navigateur

34
00:01:27,885 --> 00:01:30,017
sur la façon d'afficher la page.

35
00:01:30,204 --> 00:01:31,885
Par exemple, si vous utilisez des 
caractères classiques

36
00:01:31,885 --> 00:01:33,281
comme ceux de la langue anglaise
ou française,

37
00:01:33,281 --> 00:01:36,617
et pas de caractères de
l'alphabet arabe ou chinois,

38
00:01:36,628 --> 00:01:39,618
vous devez utiliser le jeu
de caractères utf-8.

39
00:01:40,100 --> 00:01:41,578
Ensuite, il y a cette balise TITLE
("titre" en anglais),

40
00:01:41,578 --> 00:01:45,009
que le navigateur utilise pour
connaître le titre de la page.

41
00:01:45,212 --> 00:01:47,623
C'est ce qui est affiché comme
titre de l'onglet,

42
00:01:47,623 --> 00:01:50,039
dans les favoris 
ou dans les résultats de recherche.

43
00:01:50,161 --> 00:01:53,430
Ici, sur la Khan Academy, le titre 
s'affiche au dessus de la page Web.

44
00:01:53,687 --> 00:01:55,544
Essayons de changer ce titre.

45
00:01:55,695 --> 00:01:59,348
Je vais créer une page sur
les lapins. Donc j’écris...


46
00:01:59,348 --> 00:02:01,914
"Tout savoir sur les lapins".

47
00:02:01,914 --> 00:02:05,343
Et vous voyez que le nom de la page,
au dessus, a changé aussi.

48
00:02:05,539 --> 00:02:08,149
Bon. OK. On a terminé avec ça.

49
00:02:08,149 --> 00:02:11,946
Donc on "ferme" la balise HEAD,
et on va regarder la balise

50
00:02:11,946 --> 00:02:14,809
qui contiendra tout le reste : 
la balise BODY.

51
00:02:14,953 --> 00:02:17,995
C'est simple : on a juste la balise
d'ouverture et celle de fin.

52
00:02:18,081 --> 00:02:19,521
Que va-t-on ajouter maintenant ?

53
00:02:19,521 --> 00:02:21,921
Je fais une page Web sur les lapins,

54
00:02:21,921 --> 00:02:25,495
donc je dois indiquer ça 
dans un gros titre tout en haut.

55
00:02:25,559 --> 00:02:28,916
Pour ajouter un titre, 
on utilise la balise H1.

56
00:02:29,354 --> 00:02:33,154
Ensuite, j'écris :
... Tout sur les lapins.

57
00:02:33,154 --> 00:02:34,772
En fait, on a 6 balises différentes
pour les titres.

58
00:02:34,772 --> 00:02:38,271
H1, H2, H3, H4, H5 et... H6 !

59
00:02:38,381 --> 00:02:41,153
La balise H1 est à utiliser 
pour les titres les plus importants.

60
00:02:41,153 --> 00:02:43,358
La balise H6... pour les titres 
les moins importants

61
00:02:43,491 --> 00:02:45,682
On va ajouter d'autres titres
pour avoir plusieurs chapitres.

62
00:02:45,696 --> 00:02:48,555
J'utilise la balise H2,

63
00:02:48,555 --> 00:02:51,647
car les chapitres sont un peu moins importants.

64
00:02:51,957 --> 00:02:55,469
J'écris : infos principales...
... chansons.

65
00:02:55,714 --> 00:02:58,240
Maintenant ajoutons du contenu.

66
00:02:58,402 --> 00:03:00,435
Pour cette page, je cible des lecteurs...

67
00:03:00,435 --> 00:03:03,934
qui sont des extra-terrestres qui
n'ont jamais vu de lapins.

68
00:03:03,934 --> 00:03:06,943
Donc je commence par une
bonne description des lapins.

69
00:03:07,100 --> 00:03:10,174
En fait, j'ai besoin d'un premier 
paragraphe avec du texte.

70
00:03:10,396 --> 00:03:13,366
Comment faire un paragraphe
en HTML ?

71
00:03:13,391 --> 00:03:16,049
Avec la balise P... bien sûr !

72
00:03:16,470 --> 00:03:20,736
On ajoute une balise P, 
et je vais copier du texte...

73
00:03:20,736 --> 00:03:25,573
que je n'ai plus qu'à coller...
pour ne pas avoir à tout écrire.

74
00:03:25,856 --> 00:03:27,116
Impeccable !

75
00:03:27,699 --> 00:03:30,901
Ensuite, les extra-terrestres 
auront besoin des paroles d'une chanson.

76
00:03:30,912 --> 00:03:33,170
donc je vais leur proposer 
une de mes chansons préférées.

77
00:03:33,170 --> 00:03:38,740
J'utilise la balise P pour ça...
et je colle les paroles.

78
00:03:39,521 --> 00:03:43,419
J'adore celle là !

79
00:03:43,572 --> 00:03:47,672
Mais... Oh, oh !
Tout est affiché sur la même ligne.

80
00:03:47,868 --> 00:03:50,315
Comment peuvent-ils savoir 
la chanter correctement ?

81
00:03:50,678 --> 00:03:54,210
Pourquoi le navigateur
n'affiche pas les sauts de lignes ?

82
00:03:54,350 --> 00:03:57,052
En fait, les navigateurs ne tiennent
pas compte des sauts de ligne,

83
00:03:57,052 --> 00:03:59,139
ni des espaces dans votre HTML.

84
00:03:59,318 --> 00:04:01,647
Si on veut qu'il passe à la ligne,

85
00:04:01,647 --> 00:04:05,022
on doit le lui dire en utilisant 
une autre balise...

86
00:04:05,022 --> 00:04:08,176
la balise BR : pour le saut de ligne.

87
00:04:08,398 --> 00:04:12,513
OK. on va l'utiliser 
pour chaque saut de ligne.

88
00:04:12,777 --> 00:04:15,365
Ça ressemble à une chanson, maintenant !

89
00:04:15,440 --> 00:04:18,890
Avez-vous remarqué un truc spécial
pour la balise BR ?

90
00:04:19,221 --> 00:04:20,851
Il n'y a pas de balise de fin.

91
00:04:20,966 --> 00:04:21,938
Et en fait, en y réfléchissant,

92
00:04:21,938 --> 00:04:23,492
un saut de ligne ne contient aucun contenu,

93
00:04:23,492 --> 00:04:25,861
donc il n'y a rien à "encadrer".

94
00:04:26,006 --> 00:04:28,886
Juste la balise ouvrante BR est suffisante.

95
00:04:29,062 --> 00:04:30,361
Et voilà notre première page.

96
00:04:30,456 --> 00:04:32,704
Les extra-terrestres vont pouvoir
en savoir un peu sur les lapins...

97
00:04:32,704 --> 00:04:35,883
et vous avez appris les bases du HTML.

98
00:04:36,044 --> 00:04:37,158
Quand j'aurais terminé,

99
00:04:37,158 --> 00:04:39,915
jouez avec ce code HTML et 
essayez de changer des trucs.

100
00:04:39,976 --> 00:04:43,658
Quand vous êtes prêts, continuez
avec votre premier défi !