Tuto mise en page #5 - Comment ajouter des liens & images cliquables dans son article [Markdown] ?

La force du web c'est de pouvoir passer d'une page à l'autre en un seul clic... un mécanisme assez simple me direz-vous mais tellement puissant!

Aujourd'hui je vous montre comment ajouter un lien en markdown sur un bout de texte ou sur une image.

C'est quoi une URL ?

Hier dans l'article sur les images j'ai mentionné les URLs, mais qu'est-ce que c'est exactement ?

Il s'agit littéralement de l'Uniform Resource Locator (localisateur uniforme de ressource en français), il s'agit d'une chaine de catacrères qui identifie une ressource unique sur internet. Son usage le plus connu sont les hyperliens, justement ces liens entre les pages dont je parlais en introduction.

http://www.gooogle.com/ est une URL, tout comme https://steemit.com/created/fr.

Ajouter un lien dans du texte

En markdown, les liens sont ajouté au sein du texte. Le format est le suivant :

... [Texte cliquable](URL) ...

Ce qui donne ce résultat :

... Texte cliquable ...

Si vous cliquez dessus, vous serez redirigé vers http://url qui n'existe pas, essayez de remplacer URL dans l'exemple par http://www.google.com ca ira beaucoup mieux.

Bon, ça c'est le cas de base. Mais vous allez surement vouloir faire quelques chose d'un peu plus complex, non ?
Voyons comment ca fonctionne pour utiliser une image plutôt que du texte.

Ajouter un lien sur une image

Le même mécanisme peut-être mis en oeuvre pour les images. Vous vous souvenez de la syntaxe pour ajouter une image ?
Et bien vous pouvez vous en servir à l'intérieur des crochets qui servaient à placer du texte dans l'exemple précédent :

Image : ![penguin.png](![penguin.png](https://steemitimages.com/DQmTYYh52jVvruczKnhfiEjvpke6SXRVKv8pWpc4v8HVBSt/penguin.png))
Image cliquable : [![shark.png](https://steemitimages.com/DQmXsUhr1QvYsmUWjN3oDgfoMGp3zJzE8Wahq4s1PgdcUMg/shark.png)](https://commons.wikimedia.org/wiki/Category:Creative_Tail_Round_Animal_Icons)

En passant votre curseur de souris sur les deux images vous verrez directement la différence.

Résultat

Image :
Image cliquable :

En cliquant sur le requin vous vous retrouverez sur le site qui propose ces belles illustrations, pratique non ?

Astuce

En fait il n'y a pas de limite à ce que vous pouvez mettre dans la première partie de l'expression (entre crochets []) qui sert a determiner ce qui sera cliquable. Pour ce qui se trouve entre parenthèses (()) par contre, il faut bien vérifier qu'il s'agit d'une URL bien formée, elle peux servir à renvoyer vers une page web ou n'importe quelle autre ressource valide.

Note: l'éditeur de Steemit.com semble empêcher certains format d'URL, vérifier que vos liens fonctionnent avant de publier. Le moyen le plus simple de vérifier, c'est d'ouvrir le lien dans une nouvel onglet (click droit > nouvel onglet) pour ne pas perdre son travail en cours) ;-).

Image + texte cliquable : 
[
<center>
   ![](https://upload.wikimedia.org/wikipedia/commons/7/7f/Green-talk-icon.png)
   <br/>
   Me contacter
</center>
](https://steemit.chat/direct/Roxane)

Vous l'avez peut-être remarqué, il y a un intrus dans ce bout de code.
Nous n'avions pas encore parlé sur tag <br/>, la raison est qu'il s'agit en fait d'une balise du langage HTML, lui aussi supporté sur Steemit.com. Fort pratique, puisqu'il s'agit d'une simple fonctionnalité: il passe à la ligne. Que je sache il n'y a pas d'équivalent en Markdown.

Résultat final

Image + texte cliquable :

Me contacter

---

Retrouve mes articles précédents sur #comprendre-steem !

• Nouveaux sur Steemit ?
  #1 | #2 | #3 | #4 | #5 | #6 | #7 | #8 | #9 | #10| #11| #12 | #13

• Comment mettre ses articles en forme ? #1 | #2 | #3 | #4

Cet article a été co-écrit avec @oroger, mon amoureux.

👉 Si tu aimes cet article, n'hésite pas à upvoter / commenter / resteemer.