-
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 !
