Exercice 12/14

  • Dans la section <body>, ouvrez une balise <a>.

  • Ajoutez l'adresse du site internet de votre choix après href (comme dans <a href="https://3wa.fr">.

  • Insérez une nouvelle balise <img> entre vos balises ouvrante <a> et fermante </a>. N'oubliez pas l'attribut src !

  • Fermez votre balise </a>

Leçon 12/14

Bien entendu, il n'est pas interdit de rendre une image cliquable, comme vous l'avez fait pour le texte.

Il suffit pour cela de mettre votre balise <img> entre les 2 balises <a> comme ceci :

<a href="https://3wa.fr/">
    <img src="https://people.rit.edu/meb5367/105/project02/images/berners_lee_3.jpg" />
</a>

En cliquant sur la photo du génial inventeur, vous serez ainsi redirigé vers un site ... tout aussi génial. C'est cohérent. On appelle cela l'imbrication de balises HTML mais ce n'est pas nouveau : c'est bien ce que vous avez fait en mettant <body> à l'intérieur de <html></html> ou encore votre code à l'intérieur de <body></body>, n'est-ce pas ?

Vérifiez que vous avez bien inséré entre guillemets une adresse web complète, de la forme "http://www.google.fr" !

Votre code doit ressembler à cela :

<a href="URL du LIEN">
    <img src="URL de l'IMAGE" />
</a>

Essayez de transformer une image en lien vers "https://3wa.fr" puis cliquez dessus pour voir le lien en action. Si vous utilisez une autre URL, il est possible que cela ne fonctionne pas à cause des règles de sécurité du site !

Commentaires les mieux notés

659 Commentaires

  • stephanie.civel-5

    stephanie.civel-5

    <!DOCTYPE html> <html> <head> <title></title> </head> <body> <a href="https://3wa.fr"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Tim_Berners-Lee_closeup.jpg/160px-Tim_Berners-Lee_closeup.jpg" /> <img src="https://www.referenseo.com/wp-content/uploads/2019/03/image-attractive-960x540.jpg" /> </a> </body> </html> je ne vois pas ou est mon erreur j'ai bien 2 images diférente quand je clic sur les images je vais directement sur le site internet mais quand je clic sur soumettre ça me met ça Avez-vous bien placé la balise <img> à l'intérieur de la balise <body> ?

    le 06/03/2023 à 08h36

  • Patricio M

    Patricio M Admin

    lis bien la consigne...

    le 07/03/2023 à 08h23

  • lesguer.mikael-21

    lesguer.mikael-21

    je ne vois pas l'erreur que je peut commettre car l'intitulé est plutôt simple ils faut bien mettre une image en deux les <a> </a>

    le 15/02/2023 à 16h53

  • Patricio M

    Patricio M Admin

    Insérez une NOUVELLE balise <img>, donc 2 images

    le 16/02/2023 à 10h41

  • hadjerbenhadid86-74

    hadjerbenhadid86-74

    bonjour, je comprends pas l'erreur ici !!

    le 08/02/2023 à 04h03

  • Patricio M

    Patricio M Admin

    lis bien la consigne. L'exo te demande 2 images

    le 08/02/2023 à 08h19

  • mohamed.ghani572-52

    mohamed.ghani572-52

    Bonjour, j'y arrive pas du tout non plus, si quelqu'un de l'équipe pourrait m'aider svp

    le 04/02/2023 à 15h49

  • Patricio M

    Patricio M Admin

    Dernier correct est très bien

    le 06/02/2023 à 15h23

  • arno.pimenta-93

    arno.pimenta-93

    Bonjour, pouvez-vous me dire où est l'erreur dans mon code ?

    le 31/01/2023 à 17h04

  • Patricio M

    Patricio M Admin

    LIs bien la consigne

    le 01/02/2023 à 15h39

  • helenebernard0707-52

    helenebernard0707-52

    Bonjour. Je ne comprends pas où est mon erreur. Merci d'avance pour votre aide.

    le 26/01/2023 à 16h28

  • Patricio M

    Patricio M Admin

    Lis bien la consigne

    le 27/01/2023 à 08h44

  • domy.b42-39

    domy.b42-39

    J'ai un problème avec exercice 12 leçon 1 HTML. Lorsque je soumets : erreur avez-vous bien mis <img> à l'intérieur du <body> (il faut aussi qu'il soit dans <a>. Or j'ai mis <body> <a href="site internet"> <img src="source image" /> </a> </body> donc mon image est bien à l'intérieur de l'attribut et du corps ? merci

    le 24/01/2023 à 14h44

  • Patricio M

    Patricio M Admin

    lis bien la consigne!

    le 25/01/2023 à 11h04

  • arnaudclavet-64

    arnaudclavet-64

    bonsoir, quand je clique sur mon image 4a fonctionne bien en direction du site que j'ai choisie mais le bouton soumettre ne me valide pas l'exercice

    le 23/01/2023 à 18h06

  • Patricio M

    Patricio M Admin

    Arnaud, lis bien la consigne, tu as besoin de 2 images

    le 24/01/2023 à 08h29

  • danard.shanna-86

    danard.shanna-86

    Bonjour, je ne comprend pas pourquoi ca ne fonctionne pas. <!DOCTYPE html> <html> <head> <title></title> </head> <body> <a href="https://3wa.fr"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Tim_Berners-Lee_closeup.jpg/160px-Tim_Berners-Lee_closeup.jpg" /> <img src="https://3wa.fr/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2020/01/cropped-big.png.webp" /> </a> </body> </html>

    le 24/10/2022 à 19h54

  • Patricio M

    Patricio M Admin

    lis bien la consigne...

    le 25/10/2022 à 08h18

  • sharontzidikmann-54

    sharontzidikmann-54

    il faut bien mettre 2 liens différents avec une image chacuns. Dit comme ça c'est nettement plus simple.

    le 22/10/2022 à 10h48

  • Patricio M

    Patricio M Admin

    Oui, ton code est bon

    le 24/10/2022 à 09h09

  • judithblot-93

    judithblot-93

    Bonjour, je ne sais pas où ça bloque, voilà mon code : <title>Tim Berners</title> </head> <body> <a href="http//branchez-vous.com/" </a> <img src='https://branchez-vous.com/wp-content/uploads/2016/04/timbernerslee-1000x562.webp'/></img> <ahref ="https://3wa.fr/"> <img src=" https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Tim_Berners-Lee_closeup.jpg/160px-Tim_Berners-Lee_closeup.jpg"/> </img> </a> </body> </html>

    le 17/09/2022 à 08h55

  • Patricio M

    Patricio M Admin

    ça bloque, car tu dois ajouter une autre image, tu dois avoir 2 <img>

    le 19/09/2022 à 09h20

  • dydygoy-66

    dydygoy-66

    bonjours , je ne comprend absolument pas ou ca coince , si vous pouvez m'aidez ...merci

    le 21/07/2022 à 15h33

  • meriam

    meriam Admin

    Bonjour, le code initial contient une image et vous devez ajouter une nouvelle image et rendez la cliquable.

    le 21/07/2022 à 22h42

  • Sami

    Sami

    Bonjour je n'arrive pas a trouver le problème dans mon code <!DOCTYPE html> <html> <head> <title></title> </head> <body> <a href="https://3wa.fr/"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Tim_Berners-Lee_closeup.jpg/160px-Tim_Berners-Lee_closeup.jpg" /> </a> </body> </html>

    le 17/06/2022 à 21h31

  • meriam

    meriam Admin

    Bonjour Sami, le body doit contenir deux images : une image cliquable et une autre non cliquable.

    le 20/06/2022 à 10h14

  • Sami

    Sami

    Bonjour je n'arrive pas a trouver le problème dans mon code

    le 17/06/2022 à 21h31

  • meriam

    meriam Admin

    Bonjour, il faut pas toucher l'image initiale, il faut ajouter une nouvelle image et rendez al cliquable.

    le 20/06/2022 à 10h17

  • Marie

    Marie

    J'ai changé de site et d'image, mon image est cliquable mais on me dit encore que c'est raté : <!DOCTYPE html> <html> <head><title>inventeur du web</title></head> <body> <a href="https://fr.wikipedia.org/wiki/G-Dragon"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/G-Dragon_Infinite_Challenge_2015.jpg/220px-G-Dragon_Infinite_Challenge_2015.jpg"/> </a> </body> </html>

    le 23/05/2022 à 10h24

  • meriam

    meriam Admin

    Bonjour, vous devez avoir deux images :une image cliquable et une autre non cliquable.

    le 23/05/2022 à 23h58

Pour publier un commentaire, vous devez vous connecter.
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/160px-Tim_Berners-Lee_closeup.jpg" /> </body> </html>
http://localhost:8080