< Return to Video

HTML Images (Video Version)

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

more » « less
Video Language:
English
Duration:
04:45
Christophe Noblanc edited French subtitles for HTML Images (Video Version)
Christophe Noblanc edited French subtitles for HTML Images (Video Version)
Christophe Noblanc edited French subtitles for HTML Images (Video Version)
Christophe Noblanc edited French subtitles for HTML Images (Video Version)
Christophe Noblanc edited French subtitles for HTML Images (Video Version)

French subtitles

Revisions