0:00:00.271,0:00:01.900
On a beaucoup écrit sur les lapins,

0:00:01.900,0:00:05.800
pour l'instant, grâce aux [br]paragraphes, aux listes.

0:00:05.800,0:00:09.228
On pourrait ajouter une image[br]dans notre page Web

0:00:09.228,0:00:12.060
pour montrer à quoi ressemble[br]un lapin.

0:00:12.400,0:00:16.149
Pour ajouter une image à notre [br]page Web, on utilise la balise ,

0:00:16.149,0:00:19.466
qui correspond aux premières [br]lettres de "image".

0:00:19.466,0:00:22.700
En écrivant la balise, on ne voit rien.

0:00:22.700,0:00:23.966
Pourquoi ?

0:00:23.966,0:00:27.141
En fait, on n'indique pas au [br]navigateur quelle image afficher.

0:00:27.141,0:00:29.284
Il y a des millions d'images sur Internet.

0:00:29.284,0:00:32.059
Et on veut surtout pas qu'il en prenne[br]une au hasard

0:00:32.059,0:00:34.480
car il peut tomber sur une image[br]que l'on ne veut pas

0:00:34.699,0:00:37.766
ou qui ne correspond pas à[br]ce dont on a besoin.

0:00:37.766,0:00:40.925
On a besoin de lui indiquer l'URL[br]de l'image.

0:00:40.939,0:00:44.703
L'URL est ce qui est affiché en haut [br]du navigateur, dans la barre d'adresse.

0:00:44.770,0:00:46.874
C'est exactement ça : une adresse.

0:00:46.874,0:00:50.381
C'est une façon de trouver une [br]ressource sur le Web.

0:00:50.485,0:00:52.413
Cela veut dire aussi qu'on [br]ne peut afficher une image...

0:00:52.413,0:00:54.552
que si elle est déjà sur Internet quelque part.

0:00:54.552,0:00:58.052
On ne pourra pas afficher une image[br]qui se trouve sur notre ordinateur.

0:00:58.233,0:01:00.772
Il y a plusieurs façon de trouver [br]des images sur Internet,

0:01:00.772,0:01:03.137
mais on va vous faciliter la vie, ici,

0:01:03.137,0:01:06.037
en vous proposant un outil de[br]sélection d'image.

0:01:06.246,0:01:10.547
Pour afficher cet outil, on doit ajouter[br]un attribut à notre balise .

0:01:10.735,0:01:14.620
Un attribut est une information[br]supplémentaire sur la balise.

0:01:14.772,0:01:17.686
C'est le premier attribut que [br]l'on voit ensemble !

0:01:17.736,0:01:19.714
Donc, pour indiquer l'URL,

0:01:19.714,0:01:27.215
on va ajouter un attribut nommé[br]"source" : un espace et "src".

0:01:27.437,0:01:32.166
"src" correspond à "source", mais c'est [br]important de l'écrire correctement

0:01:32.243,0:01:35.333
car sinon, le navigateur ne le comprendra pas.

0:01:35.733,0:01:41.200
Ensuite, on écrit un signe égal ("=") pour[br]donner une valeur à l'attribut.

0:01:41.200,0:01:47.125
Enfin, on ajoute un guillemet "[br]et l'éditeur de code ajoute le second tout seul.

0:01:47.286,0:01:51.843
Les valeurs d'attributs sont encadrés [br]par deux guillemets.

0:01:51.843,0:01:55.833
Habituellement, c'est là qu'on écrit l'URL,

0:01:55.833,0:02:00.190
mais, ici, à la Khan Academy, c'est l'endroit[br]où l'outil de sélection de l'image apparaît.

0:02:00.190,0:02:04.024
On va choisir une image, et j'en veux une [br]avec un lapin.

0:02:04.024,0:02:06.630
Donc, je clic sur l'onglet avec les animaux,

0:02:06.630,0:02:10.181
je choisi cet lapin adorable, puis OK.

0:02:10.238,0:02:13.089
Regardez... il y a l'URL de l'image maintenant[br]entre les guillemets.

0:02:13.089,0:02:16.300
Et vous voyez l'URL commence par "http".

0:02:16.300,0:02:19.666
Cela indique que c'est une adresse [br]qui correspond à un endroit sur Internet.

0:02:19.666,0:02:23.194
Hey, regardez ! Il y a un lapin sur ma page,

0:02:23.226,0:02:26.233
Que se passe-t-il si le serveur qui héberge[br]mon image ne fonctionne plus ?

0:02:26.233,0:02:28.133
Le navigateur ne pourra pas charger l'image.

0:02:28.133,0:02:31.092
Comment le navigateur saura que l'image[br]n'est pas disponible ?

0:02:31.092,0:02:35.711
Les utilisateurs ne verront pas l'image[br]et se demanderont ce qu'ils ont raté !

0:02:35.867,0:02:39.433
C'est pour ça que la balise  possède un[br]autre attribut : "alt".

0:02:39.433,0:02:44.006
On s'en sert pour indiquer au navigateur[br]quel texte "alternatif" afficher à la place de l'image.

0:02:44.108,0:02:49.369
Pour mettre un autre attribut, on ajoute[br]un espace après le dernier guillemet.

0:02:49.510,0:02:53.635
Et ensuite, on écrit : alt=""

0:02:53.635,0:02:58.880
Et entre les guillemets, on indique[br]un texte qui décrit l'image.

0:02:58.922,0:03:04.846
Comme par exemple, [br]"lapin avec de grandes oreilles"

0:03:04.858,0:03:07.200
Cela aide également les personnes [br]qui naviguent sur le Web,

0:03:07.200,0:03:09.805
mais sans voir le contenu,[br]comme les aveugles.

0:03:09.805,0:03:13.576
Ils utilisent un logiciel qui va leur lire[br]le contenu de la page Web,

0:03:13.613,0:03:15.701
en décrivant chaque balise.

0:03:15.701,0:03:18.478
En arrivant sur la balise "image", [br]il va lire le contenu de l'attribut "alt".

0:03:18.478,0:03:21.335
Puisque les aveugles ne peuvent voir l'image,

0:03:21.335,0:03:25.067
vous devez TOUJOURS utiliser l'attribut "alt"

0:03:25.067,0:03:28.736
pour que le monde entier puisse profiter[br]de votre page Web.

0:03:28.900,0:03:31.233
OK. Revenons à l'image qu'on voit.

0:03:31.233,0:03:34.233
Elle est un peu trop grande.[br]On va la réduire un peu.

0:03:34.263,0:03:39.226
On peut faire ça avec d'autres attributs :[br]"width" (largeur) et "height" (hauteur).

0:03:39.226,0:03:47.069
Disons que : width="100".[br]OK. La largeur est de 100 pixels.

0:03:47.171,0:03:49.423
C'est un peu trop petit.

0:03:49.423,0:03:53.987
En mettant la souris sur le nombre,[br]on peut utiliser l'outil pour changer la valeur.

0:03:54.023,0:03:56.572
OK. C'est mieux.

0:03:56.572,0:04:00.913
Maintenant, indiquons une hauteur.[br]Disons : height="50".

0:04:00.945,0:04:05.338
Oh, oh ! J'ai déformé mon lapin ![br]Pauvre lapin !

0:04:05.401,0:04:08.764
Regardez, c'est pour ça qu'on ne devrait [br]forcer que la largeur OU la hauteur...

0:04:08.764,0:04:10.969
mais pas les deux en même temps.

0:04:10.969,0:04:13.273
Car sinon, vous risquez de ne pas [br]garder les mêmes proportions.

0:04:13.273,0:04:20.340
Donc je préfère indiquer qu'une dimension[br]et je laisse le navigateur calculer l'autre.

0:04:20.404,0:04:22.500
Je supprime l'attribut pour la hauteur.

0:04:22.500,0:04:25.266
Maintenant que vous savez [br]ajouter des images,

0:04:25.266,0:04:27.971
Commencez à imaginer comment[br]utiliser tout ce que vous connaissez :

0:04:27.971,0:04:32.971
des listes, des images, des paragraphes,[br]le top 10 des animaux les plus fous.

0:04:33.301,0:04:35.833
N'ajoutez pas trop d'images quand même !

0:04:35.833,0:04:37.576
Car la personne qui voudra lire[br]votre page Web,

0:04:37.576,0:04:40.006
devra récupérer toutes [br]les images de la page.

0:04:40.006,0:04:42.938
Allez... Amusez-vous !