On a beaucoup écrit sur les lapins, pour l'instant, grâce aux paragraphes, aux listes. On pourrait ajouter une image dans notre page Web pour montrer à quoi ressemble un lapin. Pour ajouter une image à notre page Web, on utilise la balise , qui correspond aux premières lettres de "image". En écrivant la balise, on ne voit rien. Pourquoi ? En fait, on n'indique pas au navigateur quelle image afficher. Il y a des millions d'images sur Internet. Et on veut surtout pas qu'il en prenne une au hasard car il peut tomber sur une image que l'on ne veut pas ou qui ne correspond pas à ce dont on a besoin. On a besoin de lui indiquer l'URL de l'image. L'URL est ce qui est affiché en haut du navigateur, dans la barre d'adresse. C'est exactement ça : une adresse. C'est une façon de trouver une ressource sur le Web. Cela veut dire aussi qu'on ne peut afficher une image... que si elle est déjà sur Internet quelque part. On ne pourra pas afficher une image qui se trouve sur notre ordinateur. Il y a plusieurs façon de trouver des images sur Internet, mais on va vous faciliter la vie, ici, en vous proposant un outil de sélection d'image. Pour afficher cet outil, on doit ajouter un attribut à notre balise . Un attribut est une information supplémentaire sur la balise. C'est le premier attribut que l'on voit ensemble ! Donc, pour indiquer l'URL, on va ajouter un attribut nommé "source" : un espace et "src". "src" correspond à "source", mais c'est important de l'écrire correctement car sinon, le navigateur ne le comprendra pas. Ensuite, on écrit un signe égal ("=") pour donner une valeur à l'attribut. Enfin, on ajoute un guillemet " et l'éditeur de code ajoute le second tout seul. Les valeurs d'attributs sont encadrés par deux guillemets. Habituellement, c'est là qu'on écrit l'URL, mais, ici, à la Khan Academy, c'est l'endroit où l'outil de sélection de l'image apparaît. On va choisir une image, et j'en veux une avec un lapin. Donc, je clic sur l'onglet avec les animaux, je choisi cet lapin adorable, puis OK. Regardez... il y a l'URL de l'image maintenant entre les guillemets. Et vous voyez l'URL commence par "http". Cela indique que c'est une adresse qui correspond à un endroit sur Internet. Hey, regardez ! Il y a un lapin sur ma page, Que se passe-t-il si le serveur qui héberge mon image ne fonctionne plus ? Le navigateur ne pourra pas charger l'image. Comment le navigateur saura que l'image n'est pas disponible ? Les utilisateurs ne verront pas l'image et se demanderont ce qu'ils ont raté ! C'est pour ça que la balise possède un autre attribut : "alt". On s'en sert pour indiquer au navigateur quel texte "alternatif" afficher à la place de l'image. Pour mettre un autre attribut, on ajoute un espace après le dernier guillemet. Et ensuite, on écrit : alt="" Et entre les guillemets, on indique un texte qui décrit l'image. Comme par exemple, "lapin avec de grandes oreilles" Cela aide également les personnes qui naviguent sur le Web, mais sans voir le contenu, comme les aveugles. Ils utilisent un logiciel qui va leur lire le contenu de la page Web, en décrivant chaque balise. En arrivant sur la balise "image", il va lire le contenu de l'attribut "alt". Puisque les aveugles ne peuvent voir l'image, vous devez TOUJOURS utiliser l'attribut "alt" pour que le monde entier puisse profiter de votre page Web. OK. Revenons à l'image qu'on voit. Elle est un peu trop grande. On va la réduire un peu. On peut faire ça avec d'autres attributs : "width" (largeur) et "height" (hauteur). Disons que : width="100". OK. La largeur est de 100 pixels. C'est un peu trop petit. En mettant la souris sur le nombre, on peut utiliser l'outil pour changer la valeur. OK. C'est mieux. Maintenant, indiquons une hauteur. Disons : height="50". Oh, oh ! J'ai déformé mon lapin ! Pauvre lapin ! Regardez, c'est pour ça qu'on ne devrait forcer que la largeur OU la hauteur... mais pas les deux en même temps. Car sinon, vous risquez de ne pas garder les mêmes proportions. Donc je préfère indiquer qu'une dimension et je laisse le navigateur calculer l'autre. Je supprime l'attribut pour la hauteur. Maintenant que vous savez ajouter des images, Commencez à imaginer comment utiliser tout ce que vous connaissez : des listes, des images, des paragraphes, le top 10 des animaux les plus fous. N'ajoutez pas trop d'images quand même ! Car la personne qui voudra lire votre page Web, devra récupérer toutes les images de la page. Allez... Amusez-vous !