WEBVTT

00:00:01.130 --> 00:00:04.520
Dans cette vidéo, nous allons 
apprendre les balises autofermantes.

00:00:04.520 --> 00:00:08.360
Jusqu’à aujourd’hui, nous avons utilisé 
des balises qui ont une ouverture,

00:00:08.360 --> 00:00:11.750
puis une fermeture avec une 
barre oblique, un slash.

00:00:12.650 --> 00:00:14.870
Il y a quelques éléments 
qui n’ont pas cette syntaxe,

00:00:14.870 --> 00:00:18.890
mais qui ont ce que l’on appelle 
des « balises auto-fermantes ».

00:00:18.890 --> 00:00:21.530
Disons qu’ici, entre le vert et le rouge,

00:00:21.530 --> 00:00:27.170
nous voulons faire un petit saut de ligne. Pour 
cela, nous pouvons utiliser une balise « br ».

00:00:32.820 --> 00:00:37.110
Si l’on sauvegarde et que l’on rafraichit, nous 
pouvons voir qu’il y a un petit saut de ligne.

00:00:38.100 --> 00:00:42.180
Et nous avons aussi la balise « hr 
» qui génère une ligne horizontale.

00:00:44.310 --> 00:00:49.240
On rafraichit et vous pouvez voir la 
ligne horizontale apparaitre juste ici.

00:00:49.980 --> 00:00:54.540
Pour résumer rapidement, « hr » et « br » sont 
des éléments qui se ferment automatiquement.

00:00:56.070 --> 00:00:59.700
Il est évident que les pages Web 
contiennent des images. Ce serait

00:00:59.700 --> 00:01:04.640
bien s’il y avait une belle image de 
poivron vert ici. Comment faire cela ?

00:01:04.640 --> 00:01:08.720
Voyons le problème de manière critique. Si 
nous voulons mettre une balise d’image dans

00:01:08.720 --> 00:01:12.800
notre HTML et que l’on ne sait pas comment 
s’y prendre, le bon réflexe à avoir est de

00:01:12.800 --> 00:01:19.000
taper sur Google « html image tag ». Nous 
vous conseillons de faire vos recherches en

00:01:19.000 --> 00:01:23.740
anglais pour avoir plus de résultats pertinents. 
Cliquons sur le premier lien qui nous renvoie

00:01:23.740 --> 00:01:29.740
chez notre copain w3school.com. Il vous montrera 
exactement comment fonctionne une balise d’image.

00:01:30.440 --> 00:01:33.950
Si l’on clique sur « try it yourself 
», on peut encore une fois, voire

00:01:33.950 --> 00:01:37.700
le code en action. Vous pouvez vous 
amuser pour vous familiariser avec.

00:01:37.700 --> 00:01:41.630
Vous pouvez voir ici que la balise 
image est une balise qui se ferme

00:01:41.630 --> 00:01:45.470
toute seule. Il n’y a pas de balise 
image fermante, juste une seule balise.

00:01:50.740 --> 00:01:58.810
Si nous faisons image «
quelque chose appelé source « src » ici. Ceci est

00:01:58.810 --> 00:02:04.390
appelé un attribut. Certaines balises HTML peuvent 
avoir ce que l’ont appel des « attributs », qui

00:02:04.390 --> 00:02:09.130
ajoutent des propriétés spéciales à la 
balise. Ainsi, un attribut a toujours

00:02:09.130 --> 00:02:13.660
une valeur qui lui est attachée. La source de 
l’image nous indique d’où provient l’image.

00:02:13.660 --> 00:02:17.590
Trouvons donc l’image d’un poivron 
vert en allant sur google images.

00:02:22.530 --> 00:02:23.550
Celle-ci semble parfaite.

00:02:24.480 --> 00:02:27.690
Faisons un clic droit et « 
copier l’adresse de l’image ».

00:02:30.020 --> 00:02:33.530
Nous allons juste le coller dans la 
source de notre élément « image ».

00:02:38.610 --> 00:02:39.840
Revenons à notre exemple.

00:02:43.060 --> 00:02:46.960
Ici, nous pouvons voir qu’il y a quelques 
attributs en plus que nous pouvons ajouter à

00:02:46.960 --> 00:02:51.520
une balise d’image. Mais pour l’instant, nous 
pouvons nous en passer et fermer la balise.

00:02:54.460 --> 00:02:58.730
Vous pouvez voir à nouveau que Sublime Text nous a 
proposé un joli complément de couleur. Maintenant,

00:03:01.280 --> 00:03:04.340
sauvegardons notre fichier, retournons sur 
notre site Web et cliquons sur rafraichir. Nous

00:03:05.420 --> 00:03:08.990
obtenons cet énorme poivron vert, 
et évidemment c’est bien trop gros,

00:03:08.990 --> 00:03:13.580
ça ne rentrera jamais dans la gamelle.
Nous pourrions idéalement le

00:03:13.580 --> 00:03:16.910
rendre un peu plus petit.
Si nous revenons à l’exemple,

00:03:16.910 --> 00:03:21.560
vous verrez qu’il y a une largeur appelée « width 
» et une hauteur appelée « height ». Nous pouvons

00:03:23.870 --> 00:03:27.410
donc simplement copier ces données 
et les ajouter aux attributs afin de

00:03:27.410 --> 00:03:29.930
spécifier la largeur et la hauteur en pixels [px].

00:03:34.720 --> 00:03:38.480
On sauvegarde tout ça et l’on 
rafraichit. On voit que la

00:03:38.480 --> 00:03:42.860
taille a diminué, mais c’est toujours 
trop grand. Donc nous allons simplement

00:03:42.860 --> 00:03:47.270
diminuer la valeur de la largeur et 
de la hauteur par « 76 » par exemple,

00:03:51.680 --> 00:03:54.260
puisenregistrer et rafraichir 
la page. Nous pouvons

00:03:55.070 --> 00:03:58.580
voir maintenant que nous avons un 
joli poivron vert à la taille idéale.

00:03:58.580 --> 00:04:02.740
Ajoutons également l’image du poivron 
rouge. Nous allons faire ça rapidement.

00:04:02.740 --> 00:04:07.690
Copions simplement l’élément et collons 
le juste en dessous. Et encore une fois,

00:04:07.690 --> 00:04:10.120
nous voulons qu’elle ait la 
même taille que la précédente,

00:04:10.120 --> 00:04:15.760
donc nous allons laisser la largeur et la hauteur 
identiques. Trouvons l’image d’un poivron rouge.

00:04:15.760 --> 00:04:18.550
Retournons sur Google et tapons « poivron rouge ».

00:04:23.880 --> 00:04:26.060
Ce poivron la a le même style que le précédent,

00:04:26.060 --> 00:04:30.888
c’est important de rester harmonieux. 
Copions le lien et collons-le ici.

00:04:30.888 --> 00:04:31.880
Après avoir sauvegardé, 
retournons sur notre site Web,

00:04:43.910 --> 00:04:48.320
on rafraichit la page, et regardez 
ça. Nous avons nos jolis poivrons.

00:04:48.320 --> 00:04:51.650
Vous pouvez voir que les balises 
d’image sont vraiment très utiles.

00:04:54.300 --> 00:04:58.140
Vous vous demandez peut-être ce que 
signifie l’attribut « alt ». En fait,

00:04:58.140 --> 00:05:03.110
c’est quelque chose que vous pouvez lire. 
Si vous faites défiler la page vers le bas,

00:05:06.720 --> 00:05:11.310
vous verrez que l’attribut « alt » désigne 
un texte ALTernatif qui décrit une image.

00:05:11.310 --> 00:05:16.380
Encore une fois, c’est quelque chose qui peut 
être utilisé par les lecteurs d’écran pour les

00:05:16.380 --> 00:05:24.050
mal voyants par exemple et vous pouvez définir ce 
que représente l’image. Donc, ici, le « alt » est

00:05:24.050 --> 00:05:29.570
« Girl in a jacket » (Fille en veste en français). 
Ainsi, lorsqu’un lecteur d’écran passera par cette

00:05:29.570 --> 00:05:33.980
image, il dira : « Ah, dans cette partie du site 
Web, il y a une fille qui porte une veste ! ».

00:05:36.780 --> 00:05:41.040
Pour résumer, nous avons appris ce que sont 
les balises autofermantes. Nous avons vu

00:05:41.040 --> 00:05:43.950
qu’elles ne nécessitent pas d’en avoir 
deux, elles n’ont pas besoin d’avoir une

00:05:43.950 --> 00:05:47.970
balise ouvrante et une balise fermante avec 
un slash, que nous avons vu précédemment.

00:05:47.970 --> 00:05:52.350
Ici, il en suffit d’une seule. Nous avons 
vu « br » pour les sauts de ligne et nous

00:05:52.350 --> 00:05:56.610
avons utilisé « hr » pour ajouter une 
ligne horizontale dans notre page.

00:05:56.610 --> 00:06:00.180
Ensuite, nous avons vu la balise 
image qui doit également avoir

00:06:00.180 --> 00:06:04.400
quelques attributs : une source qui 
nous indique où prendre l’image,

00:06:04.400 --> 00:06:09.830
un attribut de largeur avec une valeur de 500 
pixels et un attribut de hauteur de 600 pixels.

00:06:13.100 --> 00:06:16.190
Très bien, on se voit dans la 
prochaine vidéo où nous allons

00:06:16.190 --> 00:06:18.680
découvrir les balises d’encrages, à tout de suite.