Exercice 6/7

Entourez vos balises <img> avec les balises <a></a>, comme dans l'exemple dans la partie "Leçon".

Vous pourriez parfaitement mettre la même valeur dans l' attribut src de <img> et dans l'attribut href de <a> puisque les 2 attributs sont des URL. Observez le résultat dans ce cas.

Leçon 6/7

Votre galerie de photos prendrait une autre allure si elle était cliquable. Pour cela, vous allez transformer chaque <img> en un lien en l'imbriquant dans des <a></a> :

<a href="https://3wa.fr">
  <img src="https://3wa.fr/wp-content/themes/3wa2015/img/logos/big.png">
</a>

Vous pouvez donner la valeur de votre choix à l' attribut href de chaque ` ! Lisez l'astuce si nécessaire.

20 Commentaires

index.html
stylesheet.css
<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title>Ma galerie de photos</title> </head> <body> <table> <thead> <tr> <th colspan=3>En-tete</th> </tr> </thead> <tbody> <tr> <td> <img src="http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-9/96/pCalc-icon.png" /> </td> <td> <img src="http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-9/96/Slack-icon.png" /> </td> <td> <img src="http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-9/96/LeageofLegends-icon.png" /> </td> </tr> <tr> <td> <img src="http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-9/96/MacMiner-icon.png" /> </td> <td> <img src="http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-9/96/iStat-icon.png" /> </td> <td> <img src="http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-9/96/Boom-icon.png" /> </td> </tr> <tr> <td> <img src="http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-9/96/Anatomy-icon.png" /> </td> <td> <img src="http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-9/96/GeekTool-icon.png" /> </td> <td> <img src="http://icons.iconarchive.com/icons/blackvariant/button-ui-requests-9/96/CyberGhost-icon.png" /> </td> </tr> </tbody> </table> </body> </html>
img { width:100px; height:100px; } table, td { border: 2px #70a6ff dashed; }