Depuis plusieurs années maintenant le codage fait partie intégrante des forums, c'est même désormais devenu un impératif sur certains. C'est donc une pratique courante de mettre en forme ses fiches de présentation pour les forums RPG, son règlement, son contexte, ses personnages prédéfinis, etc... Cela n'est d'ailleurs pas valable uniquement pour les forums, mais pour tous les sites internet. Quand on regarde quelques années en arrière, l'apparence des pages web était assez rudimentaire.
Comme je le disais, le codage est désormais très présent sur les forums et il est parfois presque obligatoire de s'y connaître un minimum si on veut pouvoir modifier une fiche de présentation pour son personnage, créer sa fiche de lien, ou encore même sa fiche de publicité. Tant de choses qui font que ça peut vite devenir compliqué de s'y retrouver quand on n'y connaît rien ou presque.
C'est pourquoi j'ai décidé aujourd'hui de vous apprendre quelques bases de codage en HTML. Alors évidemment, des tutoriels sur les bases du codage il en existe beaucoup sur internet, mais il y a quelques subtilités à connaître quand celui-ci s'applique à nos forums et plus particulièrement à nos messages.
Alors déjà, qu'est-ce qu'une balise ? Il faut savoir qu'elle respecte une syntaxe très stricte :
Lorsque vous ouvrez une balise, il ne faut surtout pas oublier de la fermer derrière. Si vous ne le faites pas, ça va casser toute la mise en page soit de votre message soit du reste du forum sur lequel vous postez. Comme faire ? C'est très simple. Imaginons que l'on souhaite ouvrir une div. On va alors la créer sous le schéma vu ci-dessus : <div>. Nous voici donc avec une div ouverte. Pour la refermer, on va reprendre exactement le même nom de la balise créée juste avant et on va venir y ajouter un / qui indiquera que nous fermons la div ouverte précédemment. Ce qui nous donne :
<div></div>C'est très important que le nom de la balise fermante soit le même que le nom de la balise ouvrante. Autrement, elles ne sauront pas qu'elles sont liées et ne serviront à rien. Il existe d'ailleurs deux types de balise. Les balises ouvrantes et fermantes et les balises auto-fermantes.
La plupart des balises devront être fermées derrière. A l'instar de ce que nous avons vu juste au-dessus, vous pouvez y ajouter du contenu à l'intérieur (c'est surement pour ça que vous souhaitez créer une balise d'ailleurs).
<div>Contenu à l'intérieur</div>Et il existe de très nombreuses balises de ce même type. En voici quelques exemples :
<p>Contenu à l'intérieur</p><span>Contenu à l'intérieur</span><a>Contenu à l'intérieur</a>Elles ont chacune des utilités différentes que l'on verra en détail un peu plus tard. Mais bien que beaucoup de balises existent sous ce format, il y a quelques exceptions.
On vient de voir qu'une balise entourait le contenu que l'on souhaitait, avec un nom identique sur la balise ouvrante et fermante, et un slash en plus sur la balise fermante qui indique qu'elle clôture le contenu de celle-ci. Mais il existe également des balises qui se ferment toutes seules et qui sont sous un format un peu différent. Elles ont :
En voici une pour exemple qui est la plus connue je dirais :
<img src="lien_de_mon_image.jpg" />Vous l'aurez peut-être reconnue, il s'agit de la balise pour afficher une image. Elle possède donc bien un chevron ouvrant <, un nom img, un attribut qui est src="lien_de_mon_image.jpg", un slash de fermeture /, et un chevron fermant >. Cependant, vous le verrez beaucoup sur le net, mais le slash de fermeture n'est plus indispensable. Les navigateurs prennent désormais en charge la balise auto-fermante sans le slash de fin et interprètent la balise comme si elle en avait un.
Maintenant que vous en savez un peu plus sur les balises, voici quelques explications sur comment elles fonctionnent.
<div>La div est la balise la plus connue. Elle a pour élément de style par défaut un affichage block. Ce qui signifie que la div prendra toute la place sur la largeur, et passera à la ligne par rapport au contenu précédent et suivant.
Par exemple :
J'écis du contenu <div>avec un morceau au milieu</div> et une fin de phraseCe qui nous donnera le rendu suivant :
<span>La span qui est presque tout aussi connue que la div, elle a un affichage que l'on appelle inline. Ca veut dire que lorsque vous placerez un élément span dans un texte, elle ne changera pas disposition du paragraphe :
J'écris du contenu <span>avec un morceau au milieu</span> et une fin de phraseCe qui nous donnera le rendu suivant :
C'est très pratique si vous souhaitez changer la mise en forme d'un mot au milieu d'une phrase.
<a>La balise <a></a>, est celle qui permet de créer des liens hypertexte. Soit des liens vers d'autres pages, soit des liens au sein d'une même page (comme pour le sommaire au début de cet article). Pour fonctionner, elle n'a besoin que d'un seul attribut, le href. C'est le minimum syndical pour que cette balise remplisse son rôle. Dans cet attribut, vous allez devoir écrire l'url de la page vers laquelle vous voulez rediriger.
<a href="https://www.google.fr">Lien redirigeant vers la page d'accueil de Google</a>Vous pouvez ajouter d'autres attributs à cette balise. Il en existe beaucoup d'autres. Mais le seul qui peut également vous intéresser, c'est l'attribut target. C'est cet attribut qui indiquera à quel endroit le lien doit s'ouvrir. Est-ce dans la même page (dans ce cas, c'est le résultat par défaut donc inutile de rajouter quoi que ce soit), ou alors dans un nouvel onglet ? Si c'est ça, il suffit juste d'ajouter la valeur _blank à l'attribut, et le lien s'ouvrira dans un nouvel onglet.
<a target="_blank" href="https://www.google.fr">Lien redirigeant vers la page d'accueil de Google</a>Si vous êtes un peu sur les forums et qu'il vous faut parfois poster du html dans vos messages, vous devez savoir que ce n'est pas chose simple. Tout le code doit être entièrement mis à la suite parce que le moindre retour à la ligne est interprété par Forumactif. Du coup on peut vite se retrouver avec quelque chose d'assez baveux et pas très facile à comprendre. Même pour les personnes qui s'y connaissent en codage. Alors je ne vous laisse même pas imaginer comment doivent s'en sortir les personnes qui ne maîtrisent pas du tout... un enfer !
Du coup, on peut se retrouver avec ce genre de chose :
<div class="fiche__button-tabs"><div data-link="global" class="fiche__button-tab active">Titre 1</div><div data-link="stats" class="fiche__button-tab">Titre 2</div><div data-link="credit" class="fiche__button-tab">Titre 3</div><div data-link="other" class="fiche__button-tab">Titre 4</div><div data-link="other_2" class="fiche__button-tab">Titre 5</div><div data-link="other_3" class="fiche__button-tab">Titre 6</div></div><div data-content="global" class="fiche__content-wrapper active">Contenu 1 - global</div><div style="display: none" data-content="stats" class="fiche__content-wrapper">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod metus eros, quis egestas est dapibus vitae. In porta ullamcorper sem. Maecenas at cursus elit, id pharetra nunc. In vestibulum molestie felis, at molestie velit posuere lobortis. Maecenas nec lorem in velit mattis convallis. Nam laoreet a massa ut ultricies. Ut tincidunt nulla sit amet mollis pharetra. Suspendisse consectetur diam vel quam imperdiet, sit amet mattis lectus finibus. Duis sollicitudin pretium purus, nec pellentesque quam tincidunt a. Vestibulum euismod sodales odio quis varius. Maecenas malesuada tellus vel finibus porttitor. Aliquam gravida blandit faucibus. Sed a efficitur tellus. Nunc eu sem sed ex mattis elementum. Duis tortor nisl, lobortis sit amet vestibulum sit amet, interdum eu eros.<br><br>Ut elementum magna sem, a auctor mi auctor id. Sed aliquam eros et sem ullamcorper, in consectetur eros eleifend. Morbi faucibus congue tincidunt. Quisque sit amet eleifend leo. <br><br>Ut elementum magna sem, a auctor mi auctor id. Sed aliquam eros et sem ullamcorper, in consectetur eros eleifend. Morbi faucibus congue tincidunt. Quisque sit amet eleifend leo. Nunc sit amet odio metus. Ut facilisis, lacus vel hendrerit tempor, odio lacus sagittis velit, in imperdiet lacus ante sed lacus. In sodales ultrices metus. In nec nunc at lacus faucibus pulvinar ac id velit. Nulla placerat non diam vel accumsan.</div>Ce qui est absolument horrible, qu'on se le dise. Il y a quand même une solution pour faire en sorte que les codes que vous publiez dans vos messages soient plus lisibles (surtout si des personnes doivent s'en servir comme pour des fiches de personnages par exemple). La technique est simplement de rajouter des commentaires entre chaque saut de ligne. Ainsi, les commentaires masquent le caractère de retour à la ligne, FA ne peut pas les interpréter et votre code n'est pas cassé par les retours à la ligne qu'impose FA. Pour ajouter un commentaire en html, il faut procéder de la façon qui suit :
<!-- J'écris ici mon message qui ne sera pas visible -->Du coup, le code que nous avons ci-dessus, qui est sur une ligne et complétement illisible, se transformera en :
<div class="fiche__button-tabs"><!--
--><div data-link="global" class="fiche__button-tab active"><!--
-->Titre 1<!--
--></div><!--
--><div data-link="stats" class="fiche__button-tab"><!--
-->Titre 2</div><!--
--><div data-link="credit" class="fiche__button-tab"><!--
-->Titre 3<!--
--></div><!--
--></div><!--
Je peux aussi mettre un espace ici pour aérer, étant donné que ça se trouve dans un commentaire !
--><div data-content="global" class="fiche__content-wrapper active"><!--
-->Contenu 1 - global<!--
--></div><!--
--><div style="display: none" data-content="stats" class="fiche__content-wrapper"><!--
-->Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod metus eros, quis egestas est dapibus vitae. In porta ullamcorper sem. Maecenas at cursus elit, id pharetra nunc. In vestibulum molestie felis, at molestie velit posuere lobortis. Maecenas nec lorem in velit mattis convallis. Nam laoreet a massa ut ultricies. Ut tincidunt nulla sit amet mollis pharetra. Suspendisse consectetur diam vel quam imperdiet, sit amet mattis lectus finibus. Duis sollicitudin pretium purus, nec pellentesque quam tincidunt a. Vestibulum euismod sodales odio quis varius. Maecenas malesuada tellus vel finibus porttitor. Aliquam gravida blandit faucibus. Sed a efficitur tellus. Nunc eu sem sed ex mattis elementum. Duis tortor nisl, lobortis sit amet vestibulum sit amet, interdum eu eros.<!--
--><br><!--
--><br>Ut elementum magna sem, a auctor mi auctor id. Sed aliquam eros et sem ullamcorper, in consectetur eros eleifend. Morbi faucibus congue tincidunt. Quisque sit amet eleifend leo.<!--
--><br><!--
--><br>Ut elementum magna sem, a auctor mi auctor id. Sed aliquam eros et sem ullamcorper, in consectetur eros eleifend. Morbi faucibus congue tincidunt. Quisque sit amet eleifend leo. Nunc sit amet odio metus. Ut facilisis, lacus vel hendrerit tempor, odio lacus sagittis velit, in imperdiet lacus ante sed lacus. In sodales ultrices metus. In nec nunc at lacus faucibus pulvinar ac id velit. Nulla placerat non diam vel accumsan.<!--
--></div>Ainsi, vous éviterez d'avoir des codages qui sont cassés par les membres qui ne s'y connaissent pas et qui se retrouvent à devoir modifier un code beaucoup trop compliqué pour eux. Ca peut être pratique également dans le sens où il est possible d'ajouter des commentaires et donc de donner des indications sur le code à modifier.
C'est ici que s'arrête le premier tutoriel sur XOOGGE. C'est également mon tout premier, et ce n'est jamais simple d'expliquer simplement ce que l'on sait déjà ^^. J'espère en tout cas qu'il vous aura appris des choses, n'hésitez pas à me dire si vous souhaitez en savoir davantage ou si vous pensez qu'il manque des informations essentielles que j'ai oublié. Je suis dispo par message privé ou sur le serveur Discord directement.
L'article vous a plu ? N'hésitez pas à laisser un petit like ;)
