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

  • PDM-85

    PDM-85

    merci :-)

    le 28/11/2018 à 20h26

  • diaz.jessy1010-34

    diaz.jessy1010-34

    <!DOCTYPE html> <html> <head> <title>noel</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.enfant.com/assets/posts/1000/1257-noel-dossier.jpg"> </a> </body> </html> tout marche mais ça m'écrit un message d'erreur..

    le 05/12/2019 à 15h49

  • caroline_guillen-60

    caroline_guillen-60

    Non mais des heures que je cherche et mon seul soucis c'est que je suis revenue à la ligne entre le site internet et l'image ! Sérieux c'est à hurler. Bon étape suivante !

    le 28/02/2019 à 14h44

  • karimelgammaltsolakis-20

    karimelgammaltsolakis-20

    j'ai super bien réussi mon exo mais impossible de passer au niveau suivant. on me dis "avez-vous bien placé la balise <img> à l'intérieur de la balise <body> ?" oui oui cest bien ce que j'ai fait mais je reste quand meme bloqué

    le 27/12/2019 à 22h24

  • meriam

    meriam Admin

    votre dernier code est correct.

    le 06/01/2020 à 23h39

  • manox

    manox

    ajouter tous simplement une un site web aléatoire puis entre entre vos balises ouvrante et fermante, mettre une nouvelle balise <image>

    le 02/02/2020 à 20h18

20 Commentaires

  • tara_jami-22

    tara_jami-22

    ca beugggg

    le 02/09/2020 à 18h37

  • meriam

    meriam Admin

    Bonjour, ne touchez pas l'image initial, il faut ajouter une nouvelle image et rendez la cliquable.

    le 03/09/2020 à 14h02

  • etiennefabris07-10

    etiennefabris07-10

    Bonjour je ne comprends pas pourquoi dès que je rends l'image cliquable elle me met l'adresse de google comme je lui ai dit de faire mais après l'adresse met 22 pourcent en gros ça donne ça https://www.google.fr%22/

    le 29/08/2020 à 05h00

  • meriam

    meriam Admin

    Bonjour, votre code est correct.

    le 31/08/2020 à 12h12

  • myamandry-26

    myamandry-26

    Bonjour,je ne comprends pas pourquoi ce n'est pas accepté et qu'il me demande toujours si l'image est dans la balise body?

    le 24/08/2020 à 15h43

  • meriam

    meriam Admin

    Bonjour, ne touchez pas le code initial, il faut insérer une nouvelle image et rendez la cliquable.

    le 24/08/2020 à 15h49

  • chandra010296-30

    chandra010296-30

    Bonjour j'ai fait ce qu'il fallait l'image est cliquable et aboutit au site souhaitez mais quand je soumet le bot me dit que j'ai faux

    le 14/07/2020 à 18h07

  • meriam

    meriam Admin

    Bonjour, ne touchez l'image initiale, il faut ajouter une 2 ème image et rendez la cliquable.

    le 15/07/2020 à 11h02

  • milou1937-61

    milou1937-61

    <!DOCTYPE html> <html> <head> <title></title> </head> <body> <a href ="https://3wa.fr"> <img src= "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Robert_Cailliau_On_Desk.jpg/220px-Robert_Cailliau_On_Desk.jpg" /> </a> </body> </html>

    le 10/07/2020 à 19h16

  • meriam

    meriam Admin

    Bonjour, il faut insérer une nouvelle image comme indiqué et rendez la cliquable.

    le 11/07/2020 à 01h39

  • erb.emmanuel-73

    erb.emmanuel-73

    Bonjour, quelque chose coince dans mon code...

    le 03/07/2020 à 11h19

  • meriam

    meriam Admin

    Bonjour, il faut insérer une nouvelle image et rendez la cliquable.

    le 03/07/2020 à 12h50

  • dautun.charlene-86

    dautun.charlene-86

    Bonsoir... Rien à faire message d'erreur qui me dit que ma balise <img> apparemment n'est pas dans le <body>...

    le 01/07/2020 à 23h02

  • meriam

    meriam Admin

    Bonjour, Votre dernier code est correct.

    le 02/07/2020 à 14h20

  • erb.emmanuel-73

    erb.emmanuel-73

    Bonjour, quelque chose coince dans mon code...

    le 01/07/2020 à 21h22

  • meriam

    meriam Admin

    Bonjour, ne touchez pas l'image initiale, ajoutez une autre image et rendez la cliquable.

    le 02/07/2020 à 14h18

  • couronneeg-46

    couronneeg-46

    <!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.howtogeek.com/wp-content/uploads/2018/06/shutterstock_1006988770.png" /> </a> </body> </html>

    le 01/07/2020 à 17h50

  • meriam

    meriam Admin

    Bonjour, une seule image doit être cliquable.

    le 01/07/2020 à 18h33

  • romanpache-7

    romanpache-7

    Hum, j'ai beau chercher masi mon code ne semble pas être validé... Pourtant, lorsque je clique sur l'iamge, le lien vers le site du code fonctionne ^^

    le 26/06/2020 à 14h48

  • meriam

    meriam Admin

    Bonjour, relisez bien l'énoncé il faut insérer une nouvelle image et rendez la cliquable

    le 26/06/2020 à 17h20

  • carline78-20

    carline78-20

    Bonjour pourquoi ne peut on utiliser que vos lien d'image? si jen prend une sur google, ca passe pas, ca me met une croix d'erreur

    le 24/06/2020 à 14h36

  • meriam

    meriam Admin

    oui bien vous pouvez impoter un autre lien sur google

    le 25/06/2020 à 00h04

  • kamasun-15

    kamasun-15

    ahhh j'avais pas lu les consignes, il faut ajouter une "img "

    le 22/06/2020 à 21h33

  • ersox240-7

    ersox240-7

    aidez moi ca marche pas !

    le 20/06/2020 à 21h37

  • meriam

    meriam Admin

    Bonsoir, ce que vous avez ajouté c'est pas une image.

    le 22/06/2020 à 00h28

  • giesbertaurelien-74

    giesbertaurelien-74

    au secours,

    le 03/06/2020 à 19h51

  • meriam

    meriam Admin

    Bonjour, dans le body, vous devez avoir deux images (l'image initiale et la nouvelle image que devez insérer).

    le 04/06/2020 à 12h45

  • merlegwenaelle026-34

    merlegwenaelle026-34

    Bonjour, exactement la même chose

    le 26/04/2020 à 20h12

  • meriam

    meriam Admin

    Bonjour, il faut insérer une nouvelle image et rendez la cliquable. Ne touchez pas le code de départ.

    le 27/04/2020 à 14h42

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>