Exercice 11/14

Ajoutez une seconde image au-dessous de la première. (Assurez-vous de l'ajouter avant la balise fermante </body> !).

Si vous n'avez pas d'idée, vous pouvez utiliser la photo du collègue de Tim :

https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Robert_Cailliau_On_Desk.jpg/220px-Robert_Cailliau_On_Desk.jpg

Leçon 11/14

Une page web avec des liens c'est bien, mais une page avec des images c'est encore mieux !

C'est la balise <img> qui permet d'insérer une image : mais encore faut-il lui indiquer quelle image... Pour cela cette balise admet un attribut appelé src.

De la même façon que l'attribut href contient l'adresse de la page cible du lien dans une balise <a>, la valeur donnée à l'attribut src permet de déterminer la source de l'image. On l'écrit selon ce principe :

<img src = "" />

Remarquez qu'il n'y a pas besoin de balise jumelle pour la fermer car la balise <img> ne sert pas à encadrer une portion de texte mais représente un objet. C'est pour cette raison qu'on l'appelle auto-fermante et qu'elle se termine par />. Regardez la balise <img> dans la fenêtre de droite. Elle permet de faire apparaître la photo du coupable (celui à cause de qui vous êtes en train de lire ce tutoriel, j'ai nommé Sir Tim Berners-Lee).

Entre les guillemets figure l'adresse de l'image sur le World Wide Web (son URL pour Uniform Resource Locator) : https://people.rit.edu/meb5367/105/project02/images/berners_lee_3.jpg. C'est grâce à cette adresse que votre navigateur est capable d'afficher l'image et c'est encore à cause du monsieur en photo qu'elle commence par "hachetétépéess deuxpoints slash slash ". Merci Tim.

Toutes les ressources disponibles sur internet ont une URL : pour l'obtenir, il suffit de faire clic-droit sur l'image, de choisir Copier l'adresse de l'image puis de la coller entre les guillemets de l'attribut src=""

_

C'est juste le principal inventeur du web !

_

Commentaires les mieux notés

303 Commentaires

  • mitrachealessandra-11

    mitrachealessandra-11

    Bonjour, il m'est impossible d'ajouter le lien donné dans l'exercice. Pour que mon code fonctionne correctement il faut que je laisse les deux photos de Tim Berners-Lee. Quand j'essaie de mettre différentes images (je sais qu'il en faut seulement deux), mon code est incorrect. Pourquoi ? Merci d'avance !

    le 01/02/2023 à 12h18

  • Patricio M

    Patricio M Admin

    Ton dernier code est correct

    le 01/02/2023 à 15h37

  • kitajulienne-94

    kitajulienne-94

    Il veut juste qu'il y ait 2 lignes par 3 mais c'est vrai que ce n'est pas très clair...

    le 25/03/2022 à 14h33

  • meriam

    meriam Admin

    Bonjour, il suffit d'avoir deux images.

    le 28/03/2022 à 14h22

  • kitajulienne-94

    kitajulienne-94

    Il veut juste qu'il y ait 2 lignes par 3 mais c'est vrai que ce n'est pas très clair...

    le 25/03/2022 à 14h33

  • meriam

    meriam Admin

    Bonjour, l'élément body doit contenir deux images seulement.

    le 28/03/2022 à 09h06

  • daunay.sandrine-12

    daunay.sandrine-12

    Je ne comprends la q11 il me dit que je dois avoir 2 balises?????

    le 09/03/2022 à 15h51

  • meriam

    meriam Admin

    Bonjour, il suffit d'avoir deux images dans body

    le 16/03/2022 à 13h54

  • dupin.mathieu-47

    dupin.mathieu-47

    Bonjour, rien ne se passe quand je clique sur "Soumettre". Votre site semble mal fonctionner, à plusieurs reprises j'ai des messages d'erreur lors de la soumission (avec un code correct) et je dois cliquer sur le bouton de nombreuses fois pour que mon exercice soit bien validé...

    le 24/01/2022 à 11h14

  • meriam

    meriam Admin

    Bonjour, le problme est résolu. Merci pour votre compréhension.

    le 25/01/2022 à 09h42

  • petrovpro33-26

    petrovpro33-26

    <!DOCTYPE html> <html> <head> <title></title> </head> <body> <img src=https://lofficiel.imgix.net/production/belgium/images/1605173554361458-leonardo-dicaprio-young-photos-annie-leibovitz.jpg?w=802&h=720&fit=clip&auto=%5B%22format%22%2C%20%22compress%22%5D&cs=srgb&crop=faces <img src=https://lofficiel.imgix.net/production/belgium/images/1605173554361458-leonardo-dicaprio-young-photos-annie-leibovitz.jpg?w=802&h=720&fit=clip&auto=%5B%22format%22%2C%20%22compress%22%5D&cs=srgb&crop=faces </body> </html> il ya 2 images uniquement dans la partie body ! et ils me disent ne pas modifier

    le 13/01/2022 à 12h42

  • meriam

    meriam Admin

    Bonjour, vous n'avez pas fermé la balise img.

    le 13/01/2022 à 13h19

  • severine.bruchon-46

    severine.bruchon-46

    Il y a un s en trop à l'extension de la 2eme image, au lieu de jpg il est écrit jpgs

    le 12/01/2022 à 10h46

  • meriam

    meriam Admin

    Bonjour, quelle est votre question exacetement ??

    le 12/01/2022 à 11h24

  • louisebrunet1-50

    louisebrunet1-50

    Bonjour, je ne comprends pas ce qui bloque, on m'indique "vous devez avoir deux img dans body". Il me semble l'avoir fait convenablement. Pouvez vous m'aider svp?

    le 25/11/2021 à 09h04

  • meriam

    meriam Admin

    Bonjour, l'exercice contient par défaut deux images, vous pouvez les supprimer et ajoutez les images que vous voulez.

    le 28/11/2021 à 23h19

  • jonathan-7893-71

    jonathan-7893-71

    Bonjour, j'ai le même soucis que certains, " Vous ne devez pas modifier le code de la balise <img> d'origine." alors que j'ai bien deux images et suivi l"exemple.

    le 01/11/2021 à 12h30

  • meriam

    meriam Admin

    Bonjour, supprimer l'image que vous avez ajouté, l'élément body doit contenir deux images.

    le 08/11/2021 à 00h30

  • modena59-98

    modena59-98

    bonsoir, impossible de valider l'exercice, j'ai bien insérer l'image avant la première image, ça ne marche pas (dans le code d'origine, il y a déjà 2 images)<!DOCTYPE html> <html> <head> <title></title> </head> <body> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Robert_Cailliau_On_Desk.jpg/220px-Robert_Cailliau_On_Desk.jpg"/> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Tim_Berners-Lee_closeup.jpg/800px-Tim_Berners-Lee_closeup.jpg" /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Tim_Berners-Lee_closeup.jpg/800px-Tim_Berners-Lee_closeup.jpgs" /> </body> </html>

    le 31/10/2021 à 22h30

  • meriam

    meriam Admin

    Bonjour, l'élément body doit contenir deux images uniquement.

    le 08/11/2021 à 00h09

  • modena59-98

    modena59-98

    Bonsoir, impo

    le 31/10/2021 à 22h28

  • meriam

    meriam Admin

    l'élément body doit contenir deux images uniquement.

    le 08/11/2021 à 00h03

  • youssouph82-51

    youssouph82-51

    pourquoi, on me dit que vous ne devez pas modifier la balise <img> d'origine. A quel moment l'ai-je modifié? merci

    le 27/08/2021 à 23h55

  • meriam

    meriam Admin

    Bonjour, la partie body doit contenir deux images uniquement.

    le 30/08/2021 à 00h07

  • youssouph82-51

    youssouph82-51

    Bonjour,

    le 27/08/2021 à 23h53

  • ABRILCarmen

    ABRILCarmen

    Bonjour, je ne comprends pas le problème, j'ai bien mis deux images, j'ai vérifiée mon code et tout m'a l'air correct mais le message de" vous ne devez pas modifier le code de la valise <img> d'origine " ce cesse d'apparaitre. mon code st <!DOCTYPE html> <html> <head> <title></title> </head> <body> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Robert_Cailliau_On_Desk.jpg/220px-Robert_Cailliau_On_Desk.jpg"/> <img src="https://media-cdn.holidaycheck.com/image/upload/v1519674805/forum/cul80np08t9hfbhxnswp.jpg"/> </body> </html>

    le 25/08/2021 à 05h25

  • meriam

    meriam Admin

    Bonjour, une pae html doit avoir une seule partie body qui doit contenir tous les éléments.

    le 30/08/2021 à 02h04

  • adryann.pagnymontana-36

    adryann.pagnymontana-36

    pourquoi sa valide pas mon exercice

    le 28/07/2021 à 22h53

  • meriam

    meriam Admin

    Bonjour, la partie body doit contenir deux images uniquement.

    le 29/07/2021 à 09h13

index.html
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Tim_Berners-Lee_closeup.jpg/800px-Tim_Berners-Lee_closeup.jpg" /> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Tim_Berners-Lee_closeup.jpg/800px-Tim_Berners-Lee_closeup.jpgs" /> </body> </html>