Bonjour et bonne année 2016 à tout le monde !
J’ai décidé d’ouvrir ce sujet pour lister quelques aides concernant le codage sur Viki. M’étant moi-même posé des questions à mes débuts sur Viki et ayant reçu plusieurs demandes, j’espère que ceci pourra être utile à certains d’entre vous.
Ce n’est bien sûr pas une liste exhaustive, loin de là. N’hésitez pas à partager vos connaissances, je pourrai même les rassembler sur ce premier message si ça vous dit.
À noter : prenez bien soin qu’il n’y ait pas d’espace avant/après les chevrons, slash et guillemet dans le code en lui-même. Les codes ne marcheront pas, sinon.
Tout d’abord, à l’exception du code utilisé dans le point 0, tous les codes ont une balise d’ouverture et de fin : <div> blabla </div> et <span> blabla</span> par exemple.
0. Les sauts de lignes (profil et page de couverture)
Vous vous demandez pourquoi il y a un tel saut de ligne lorsque vous appuyez sur la touche Entrée alors que les autres semblent pouvoir écrire sans qu’il n’y ait un saut de ligne ? La solution est toute simple : il faut faire SHIFT + Entrée ! Dans le langage des codes, cela revient à ajouter un <br/> à la fin de votre ligne plutôt que de fermer votre paragraphe (<p> blabla </p>) et d’en rouvrir un autre.
1. Ajouter une image dans un message privé
Première astuce (concerne toutes les images) : le code <img alt=""src="lien_de_l_image">
Les images que j’envoie proviennent souvent de mon ordinateur (vu qu’elles sont personnalisées) donc deux solutions selon la taille et le format du fichier : soit on passe par un hébergeur d’image (j’ai créé un compte sur Imgur), soit on passe par l’ajout d’image sur Viki, comme sur le profil par exemple, mais on ne fait qu’envoyer l’image sur le serveur pour récupérer le lien Viki.
Deuxième astuce (seulement pour les images sur le net) : clic droit sur l’image > inspecter l’élément > copier le code HTML surligné. Avec cette astuce, il y a juste un blabla en plus pour la mise en forme de l’image, mais ça revient au final au même.
2. Mettre du texte en couleur dans un message privé
Il faut utiliser le code suivant : <span style="color:#code_couleur">Votre_texte</span>
On peut facilement trouver ces codes couleurs sur internet. Par exemple, voici le premier lien que ma recherche Google donne : http://html-color-codes.info/
Pour ma part, je me sers de ma palette Photoshop.
3. Ajouter un lien hypertexte à du texte dans un message privé
Code : <a href="lien_désiré">Texte</a>
Cela passera votre texte en bleu et souligné. Si vous désirez changer la couleur du texte, il faut utiliser le code du point 2 de part et d’autre du texte : <a href="lien_désiré "><span style="color:#code_couleur">Texte</span></a>
4. Mettre en gras, en italique dans un message privé
Pour mette en gras : <strong>Texte</strong>
Pour mettre en italique : <i>Texte</i>
5. Utiliser un conteneur
Qu’est-ce que j’entends par conteneur ? C’est une balise HTML qui va fonctionner comme un cadre dans lequel on pourra ajouter les tags que l’on voudra. Par exemple, cela permet d’ajouter un fond coloré, une bordure de texte du style et de la couleur voulue, modifier les angles etc. Voici la balise magique : <div style="mise_en_forme_voulue">Votre contenu</div>
Et maintenant, la mise en forme. À noter : tous les codes ci-dessous peuvent heureusement être combinés dans un même conteneur, il suffit de les séparer par des points-virgules ( ; ).
- Pour ajouter un fond de couleur, il faut ajouter
background:#code_couleurentre les guillemets. (<div style="background:#code_couleur">Votre contenu</div>)
Cf point 2 pour les codes couleurs. - Pour ajouter un fond imagé :
background:url(lien_de_l_image) - Pour définir la taille et la position de votre conteneur :
- Hauteur :
length:XXX px - Largeur :
width:XXX px - Si vous voulez faire un cadre déroulant (i.e. pour avoir un scroll automatique dans un cadre que l’on veut plus court que le contenu) :
overflow:auto - Pour centrer le conteneur :
margin:auto
- Pour ajouter une bordure :
border : épaisseur style #couleur
- Épaisseur :
XXpx - Style : on peut faire un cadre solide, en pointillé ou avec d’autres styles particuliers. Vous trouverez sur le site ci-contre plusieurs styles intéressants et le mot à écrire pour cela : http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=none
- Couleur : cf les codes couleurs au point 2.
- Ainsi, si je veux une bordure en pointillés noirs, épaisse de 5 pixels, j’utiliserai
border : 5px dotted #000000
- Pour changer les angles du cadre, i.e. pour avoir un cadre plus arrondi :
border-radius: XXpx
Voici un exemple de code simple complet : <div style="width:50px;border:2px solid #000000;border-radius:5px">Coucou !</div>
Cela veut dire : une conteneur de 50 pixels de large, avec une bordure noire solide de 2 pixels et des coins arrondis de 5 pixels.
Voilà pour le moment. Je rajouterai probablement d’autres points lorsqu’ils me viendront à l’esprit. N’hésitez pas si vous avez des questions, à propos de ce qu’il y a là ou d’autres curiosités.
[EDIT du 12 janv. 2016 : ajout du point 0.]
[EDIT du 13 janv. 2016 : point 5 complété.]
