Personnalisez votre carte en ajoutant du code HTML dans vos repères

Astuces - 22 juin 2015

Dans l’éditeur Click2Map, si vous ne le saviez pas encore, il est possible d’ajouter des onglets supplémentaires à vos repères : des onglets Texte, Photo et Code.

Vous pouvez créer autant d’onglets que vous le souhaitez et y ajouter autant de contenus que vous le voulez, seul l’onglet Photo ne peut contenir plus d’une photo.

Ainsi, l’onglet Code existe dans le but d’enrichir votre repère de multiples contenus, images ou vidéos. Il permet d’intégrer toute sorte de code HTML. Ajouter des images, un diaporama, une vidéo,... tout est possible !

 

Reprenons du début. Le HTML c’est quoi ?

L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage permettant d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie, et des programmes informatiques.

(- Définition Wikipédia)

Sans être un expert, insérer quelques lignes de code dans vos pages web et notamment dans vos repères devient tout à fait réalisable.

 

Coder en HTML pour les nuls...

Pour les plus novices d’entre vous, voici quelques bases de code HTML afin de mettre en forme un texte, insérer un lien ou encore une image.

1/ Mise en forme d’un paragraphe

  • Alignement du texte

Pour aligner votre texte, il suffit de placer votre paragraphe entre les deux balises <p align="…">.

  • Alignement à gauche
<p align="left">Le texte est aligné à gauche.</p>

Résultat :

Le texte est aligné à gauche.

  • Alignement à droite

<p align="right">Le texte est aligné à droite.</p>

Résultat :

Le texte est aligné à droite.

  • Alignement centré

<p align="center">Le texte est centré.</p>

Résultat :

Le texte est centré.

  • Texte justifié

<p align="justify">Dans cet exemple, le texte est justifié. Cela requiert deux lignes afin de constater le résultat. Dans cet exemple, le texte est justifié. Cela requiert deux lignes afin de constater le résultat. Dans cet exemple, le texte est justifié. Cela requiert deux lignes afin de constater le résultat.</p>

Résultat :

Dans cet exemple, le texte est justifié. Cela requiert deux lignes afin de constater le résultat. Dans cet exemple, le texte est justifié. Cela requiert deux lignes afin de constater le résultat. Dans cet exemple, le texte est justifié. Cela requiert deux lignes afin de constater le résultat.

 

  • Retour à la ligne

Pour forcer un retour à la ligne dans un texte, il suffit de placer la balise <br>.

Vous souhaitez un saut de ligne à cet endroit <br>pour mettre en forme votre paragraphe.

Résultat :

Vous souhaitez un saut de ligne à cet endroit
pour mettre en forme votre paragraphe.

 

2/ Insertion d’un lien

Pour insérer un lien dans un texte, il suffit de placer la phrase correspondante entre les balises : <a href="…">…</a>.

  • Mettre un lien vers une de vos pages
<a href="/fr/blog/publier-sa-carte-sur-blog-et-page-facebook">Exemple d'un post de blog</a>

Résultat :

Exemple d'un post de blog

 

  • Ouvrir un lien dans une autre fenêtre du navigateur
<a href="/fr/blog/publier-sa-carte-sur-blog-et-page-facebook" target="_blank" >Exemple d'un post de blog</a>

Résultat :

Exemple d'un post de blog

 

  • Mettre un lien vers un autre site www.
<a href="https://www.click2map.com/" target="_blank">Le site web de Click2Map</a>

Résultat :

Le site web de Click2Map

 

  • Mettre un lien vers un e-mail
<a href="mailto:support@click2map.com">Support Click2Map</a>

Résultat :

Support Click2Map

 

3/ Insertion d’une image

Afin d’insérer une image dans un texte, il suffit de placer le lien de l’image concernée dans la balise <img src="...">.

 

  • Définir le chemin de l'image
<img src="/sites/default/files/field/image/logo_0.png">

Résultat :

 

  • Ajouter un cadre à l'image
<img src="/sites/default/files/field/image/logo_0.png" border="1">

Résultat :

 

<img src="/sites/default/files/field/image/logo_0.png" border="3">

Résultat :

 

  • Aligner une image

Pour aligner votre image, il suffit d’ajouter align=”...” dans votre balise HTML.

  • Alignement à gauche
<img src="/sites/default/files/field/image/logo_0.png" align="left">

Résultat :

 

 

 

 

 

  • Alignement à droite
<img src="/sites/default/files/field/image/logo_0.png" align="right">

Résultat :

 

 

 

 

 

  • Alignement centré
<img src="/sites/default/files/field/image/logo_0.png" align="center">

Résultat :

 

Exemple : insertion d’une image avec un lien url en légende

Ouvrez l’éditeur.

Rendez vous dans le repère concerné et cliquez sur Onglets supp.

Cliquez sur le bouton Code.

Et insérez le code suivant dans l’encadré :

<p style="text-align:center;"><img src="http://photography.nationalgeographic.com/u/TvyamNb-BivtNwcoxtkc5xGBuGkIMh_nj4UJHQKuoX2rna57S8CtE_U7WKzmc4f-eAd31BSwgaUGOw/" alt="Image" width="260px"/>
<br/><a href="http://photography.nationalgeographic.com/photography/photo-contest/2014" target="_blank" title="Source National Geographic">Source National Geographic</a></p>

Résultat :

Cliquez sur l’image ou sur ce lien pour consulter la carte interactive.

Et si vous essayiez ?

Il existe un site efficace où vous pouvez faire vos tests de code avec une visualisation directe du résultat. Pratique avant de vous lancer directement dans le codage de vos pages web ou vos repères !

Tryit Editor

Il ne vous reste plus qu’à tester quelques lignes de codes pour les insérer dans les onglets Code de vos repères.

 

Et si vous bloquez, n’hésitez pas à nous contacter à support@click2map.com

N'attendez pas !

Enregistrez-vous maintenant