WEBVTT

00:00:01.210 --> 00:00:06.910
Dans la dernière section, nous avons parlé 
du World Wide Web. Nous vous avons également

00:00:06.910 --> 00:00:10.960
dit que nous allions parler du 
HTML, du CSS et du JavaScript.

00:00:10.960 --> 00:00:14.830
Nous en avons un peu fait référence 
en vous disant simplement qu’il

00:00:14.830 --> 00:00:19.540
s’agissait de simples fichiers texte pour 
l’instant. Mais que sont-ils exactement ?

00:00:19.540 --> 00:00:24.310
Au départ, si vous vous souvenez 
bien, nous avions Tim Berners-Lee,

00:00:24.310 --> 00:00:30.040
qui a développé le tout premier site Web. 
Ce site utilise le HTML. C’est le premier

00:00:30.040 --> 00:00:34.660
fichier juste ici. C’est un moyen pour 
nous d’écrire du texte sur les sites Web.

00:00:34.660 --> 00:00:38.290
Ces textes sur les sites Web 
peuvent aussi avoir des fonctions

00:00:38.290 --> 00:00:43.720
appelées « hyperliens » ou « lien hypertexte » qui 
peuvent renvoyer à d’autres parties du site Web.

00:00:43.720 --> 00:00:46.720
C’est ce qui s’est passé en 1991.

00:00:46.720 --> 00:00:53.230
En 1991, nous avions un moyen de partager 
des documents. Et ce lien peut, par exemple,

00:00:53.230 --> 00:00:57.940
renvoyer vers un autre site Web, un autre 
fichier ou un autre document de recherche.

00:00:57.940 --> 00:01:03.610
Comme vous pouvez le voir, ce n’était pas 
très beau, c’est pour cette raison qu’en 1996,

00:01:03.610 --> 00:01:09.980
deux technologies ont vu le jour, l’une 
était CSS, et l’autre, JavaScript.

00:01:09.980 --> 00:01:16.130
Qu’est-ce qu’elles vous permettent de faire ? Eh 
bien CSS a résolu le problème du : « C’est bien,

00:01:16.130 --> 00:01:20.780
mais est-ce que ce ne serait pas possible 
de rendre les pages plus jolies ? » et

00:01:20.780 --> 00:01:23.930
maintenant avec le JavaScript nous 
pouvons avoir quelque chose comme

00:01:23.930 --> 00:01:26.064
ce site. Avec ce code nous avons la fonction 
cliquer ici, nous pouvons avoir la fonction :

00:01:26.064 --> 00:01:30.110
« Acheter maintenant », nous pouvons mettre 
notre carte de crédit, et obtenir ces crocs. Nous

00:01:30.110 --> 00:01:34.610
pouvons faire toutes ces choses interactives 
avec notre site Web codé en JavaScript.

00:01:34.610 --> 00:01:38.150
Alors, jouons avec ça et essayons d’incorporer

00:01:38.150 --> 00:01:43.160
à partir de ce fichier HTML de base, 
du CSS et du JavaScript à cette page.

00:01:43.940 --> 00:01:47.090
Pour ce faire, nous allons cliquer sur 
le bouton droit de la souris sur la page

00:01:48.690 --> 00:01:50.640
et cliquer sur « inspecter ».

00:01:52.980 --> 00:01:54.600
Une fois que vous aurez cliqué dessus,

00:01:54.600 --> 00:01:59.340
vous obtiendrez cette fenêtre à droite 
de l’écran. Pour certains d’entre vous,

00:01:59.340 --> 00:02:05.860
cela peut être du côté gauche ou bas comme sur 
Mozilla Firefox, mais cela n’a pas d’importance.

00:02:05.860 --> 00:02:11.050
Nous avons déjà vu ça auparavant, si vous 
regardez en haut, ici, il est écrit « HTML ».

00:02:11.940 --> 00:02:12.750
Et c’est tout.

00:02:12.750 --> 00:02:17.070
HTML c’est ça, c’est ce fichier 
qui a cette syntaxe qui décrit

00:02:17.070 --> 00:02:19.380
comment cette page Web doit se présenter en texte.

00:02:20.340 --> 00:02:24.570
Comme vous pouvez le voir ici, 
c’est écrit « The World Wide Web ».

00:02:24.570 --> 00:02:26.010
Ce n’est que du texte.

00:02:27.910 --> 00:02:34.150
En bas de la fenêtre de l’outil de développement, 
ici, vous verrez quelque chose appelé styles.

00:02:34.150 --> 00:02:37.510
Les styles vous permettent 
d’ajouter des styles au site Web,

00:02:37.510 --> 00:02:41.260
comme son nom l’indique. C’est 
ce que sont les fichiers CSS.

00:02:43.390 --> 00:02:45.190
Si nous cliquons sur « body »

00:02:48.380 --> 00:02:52.380
sans connaitre le CSS ou quoi que ce soit 
d’autre, si nous définissons quelque chose

00:02:52.380 --> 00:03:00.270
comme : « color », « deux points », et ensuite « 
red » cela change la couleur du texte en rouge.

00:03:00.270 --> 00:03:05.670
Chrome nous permet de jouer avec les sites 
Web et d’injecter du CSS dans ce HTML.

00:03:07.920 --> 00:03:12.210
Sans connaitre le CSS, on peut 
jouer un peu, taper une lettre,

00:03:12.210 --> 00:03:14.970
la lettre « b » par exemple et 
il y aura une liste déroulante.

00:03:14.970 --> 00:03:20.580
Puis choisissons « background-color » qui 
veut dire « couleur de fond » en anglais,

00:03:20.580 --> 00:03:27.850
le CSS est assez explicite, ensuite appuyons 
sur « tab » pour ajouter une couleur de fond,

00:03:27.850 --> 00:03:32.080
et tapez ce que vous voulez, 
nous, nous allons taper « black ».

00:03:36.390 --> 00:03:38.990
Alors on est tous d’accord sur le 
fait que ce n’est pas très beau.

00:03:38.990 --> 00:03:42.500
Nous venons d’ajouter du CSS à ce site de base.

00:03:42.500 --> 00:03:46.340
Désactivons cette couleur 
noire, car elle n’est pas jolie.

00:03:50.010 --> 00:03:53.370
Maintenant, comment pouvons-nous 
ajouter du JavaScript ? Rappelez-vous,

00:03:53.370 --> 00:03:55.320
nous avons trois fichiers ici.

00:03:57.200 --> 00:04:00.440
Vous savez, nous avons ces beaux sites 
de texte qui renvoient à d’autres pages,

00:04:00.440 --> 00:04:04.280
et nous avons le CSS qui peut 
ajouter beaucoup de design aux sites.

00:04:04.280 --> 00:04:08.960
Mais ce serait bien d’avoir un peu plus 
de possibilités d’animation. D’avoir des

00:04:08.960 --> 00:04:13.100
menus déroulants, de rendre les sites Web 
comme ils le sont maintenant : interactifs.

00:04:13.100 --> 00:04:15.980
Nous pouvons le faire avec 
l’outil de développement.

00:04:17.180 --> 00:04:21.620
Cliquez sur « Console » en haut de la fenêtre 
de votre outil de développement, juste ici.

00:04:22.290 --> 00:04:26.520
Sans connaitre la moindre notion de JavaScript, 
nous allons quand même pouvoir jouer un peu avec

00:04:26.520 --> 00:04:32.310
une simple ligne de code. Nous allons taper 
« alert », ouvrir des parenthèses et taper à

00:04:32.310 --> 00:04:39.260
l’intérieur de ces parenthèses Salut ! Entre 
guillemets, il est très important de respecter

00:04:39.260 --> 00:04:44.980
la syntaxe lorsque vous tapez du code, si vous 
avez une erreur, vérifier que le code est écrit

00:04:44.980 --> 00:04:52.320
comme celui que vous voyez à l’écran. Une fois 
le code tapé, appuyez sur entrée et regardez ça.

00:04:52.320 --> 00:04:57.420
Nous venons de modifier le tout premier site Web, 
nous l’avons rendu interactif avec JavaScript.

00:04:57.420 --> 00:05:02.010
Maintenant, évidemment, cela ne fait pas 
grand-chose. Mais on espère que cela vous

00:05:02.010 --> 00:05:06.480
a permis de comprendre où nous en étions 
en 1991 et où nous en sommes maintenant.

00:05:06.480 --> 00:05:12.480
Des sites Web interactifs, pleins de 
JavaScript, de CSS et bien sûr de HTML.

00:05:14.000 --> 00:05:15.680
À tout de suite dans la prochaine vidéo.