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

in fr •  11 months ago

FOLLOW.png
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 : penguin.png
Image cliquable : shark.png

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 :


chat-icon.png

Me contacter



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

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

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

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Encore merci pour ce super article !

·

Merci !

Merci Roxane pour tout ses petits tutos...

·

:-) Thanks

Coucou @roxanne,

Et voilà, si j'avais regardé ton tuto avant ça m'aurait évité de galérer pour insérer mon mot croisé pour le concours de @cryptobref.
Merci pour tout ce que tu fais.

Christel @corsica

·

Ohhh Christel !!!! C'est toi qui a fait le Mot Croisé pour Crypto Bref !!! Mon amoureux m'en a parlé en disant que c'était génial comme idée :-))) Je n'ai pas encore eu l'occasion d'aller voir mais je n'y manquerai pas !
N'hésite pas à venir jeter un oeil tous les jours, normalement je sors un article / une vidéo par jour :-)
Bonne journée !

·
·

Coucou Roxanne,
Merci à ton homme et à toi. Ça me fait trop trop plaisir.
Cela m'a permis d'enrichir mon vocabulaire.
Je ne manque pas d'aller jeter un coup d’œil tous les jours même si je t'avoue que je n'ai pas encore tout lu.
Bonne aprem.

Christel

·
·
·
·
·
·
·

Tu as vu j'ai gagné le lot de consolation.😉😉😉

·
·
·
·
·

Haaa noon ! Je n'ai pas encore vu tout ça !!! ^^ C'est déjà très bien ! haha :-))

·
·
·
·
·

J'en ai gagné un aussi !!!!!!!!!!!!!!!!!!!

·
·
·
·
·
·

oui j'ai vu

·
·
·
·
·
·
·

:-D J'adore gagner des cadeaux !!!! HAHAHA

6 mois plus tard...ton article est toujours utile :)