Base du codage et mise en page de vos textes.

Bonjour à tous, j'ouvre ce sujet pour donner quelques petites astuces au niveau du codage sur le forum. Je vais surtout rester sur le domaine de la mise en page et peut-être, plus tard, parler des signatures codées ou d'autre chose. Beaucoup d'entre-vous connaîtrons sûrement déjà ces astuces, mais c'est toujours utile pour les néophytes et pour ceux qui veulent se rafraîchir la mémoire. Si jamais vous avez des questions ou si vous désirez que je traite un sujet en particulier, vous pouvez m'envoyer un mp.  Allez, on commence de suite.

ATTENTION: Veillez à toujours bien fermer vos balises. Surtout dans le cas de l'html. Ne pas le faire équivaudra à entrer en conflit avec le code du forum et pourra mettre un sacré bordel. Retenez donc ça, on ouvre quand on arrive et on ferme derrière soi avant de partir. Il faut autant de balises de fermeture qu'il y en a d'ouverture. Dans le doute, vérifiez bien avant de poster, la prévisualisation peut être pratique.

Le BBCode:

Alors le BBCode, c'est quoi ? Le BBCode, ce sont des balises que l'on insère dans son texte. Elles prennent cette forme :


Je vais ne vais pas faire le listing exhaustif des balises. Je vais plutôt mettre celles que vous utiliserez le plus souvent. Le code sera à placer en début et fin du texte à modifier. (je mets uniquement les balises de fermeture pour n'entre pas en conflit avec le reste du sujet.)



Vous avez donc de quoi faire pour modifier vos textes. Ce sont les bases à avoir, le BBCode se veut simple pour une utilisation par tous.

Les balises couleur donc. Il y en a deux type :




Ces balises modifient donc la couleur de votre texte. Dans cet exemple, c'est la même couleur, le rouge. La première version est pratique pour une bonne raison. Il est plus simple de se rappeler d'une couleur via son nom anglais plutôt que par son code hexadecimal. Pour trouver les noms des couleurs, je vous recommande le sujet de Mila : BBCodes – couleurs.

La deuxième façon peut être pratique pour ceux qui ont une idée précise de la couleur qu'ils veulent et la nuance. Vous pouvez retrouver le code hexadecimal sur photoshop par exemple ou encore sur ce site : code-couleur.com. Page très utile ! /!\ N'oubliez pas le # après le signe égal/!\

_

Les balises url maintenant. Très simple, je ne vais pas m'éterniser dessus.



Donnera : Kingdom Hearts Kanak

Le lien se met dans la balise d'ouverture et le texte entre les balises. Voilà.

_

Les balises de police.



Donnera : Texte

Encore une fois, c'est simple. Seul souci, si ceux qui lisent votre texte n'ont pas la même police, ils verront le texte avec la police de base du forum. Donc contentez-vous surtout de celles de base.

Dernière édition par Konan le Jeu 13 Mar 2014 - 20:19, édité 2 fois

Le Padding-left :

Alors le padding-left, c'est quoi ? C'est très simple, c'est la marge qui se trouvera à gauche de votre texte. Avant, on pouvait utiliser la balise [list] simple et rapide à mettre en place. Il y a cependant deux défauts. Le premier, on ne peut pas choisir la marge, elle est prédéfinie. Le second, depuis quelques temps, forumactif rencontre un problème avec cette balise. De fait, à l'édition du sujet, la balise part et détruit toute votre mise en page. C'est assez obscur, sur l'une de mes fiches, ça enlevait quelques images, mais pas toutes. Du coup, c'est là qu'arrive le padding-left.

Exemple :





Donnera ceci :



On constate donc que ce n'est plus du BBcode, mais dans le principe, c'est la même chose. Un texte entouré de deux balises. Une qui défini à partir de quand le code va prendre effet et l'autre pour fermer. Suivant la taille que vous voulez pour votre marge, il suffit de changer la valeur 40 en autre chose, comme 60 par exemple. Le texte peut être édité sans aucun problème, contrairement à la balise [list]. Notez que vous pouvez également ajouter une marge à droite avec padding-right.

Mettre une musique dans son sujet :

C'est une question qui revient régulièrement et souvent, les sujets explicatifs finissent noyés avec les autres. Ici, ce sera plus clair.

Il y a deux moyens de mettre une musique sur son post. Le premier directement avec youtube, le second via un hébergeur.

Youtube :

C'est très simple, vous vous rendez sur la vidéo de votre choix, vous cliquez sur « partager » puis sur « Intégrer ». Vous obtiendrez donc un code comme celui-ci :




Avant de le placer dans votre texte, il faudra modifier deux valeurs. Width, qui désigne la largeur ainsi que height qui désigne donc la hauteur. Les valeurs sont données en pixel. Dans le cas présent, nous avons : width="560" height="315".Mettez le width a 250 et le height à 25 et vous aurez :





Ce qui donnera :

Hébergeur :

Je vais parler d'un seul hébergeur car dans ce domaine, je ne connais que celui-là et ça fait plus de trois ans que je m'en sers. Archive-host est un hébergeur pour tout type de fichier. Vous pouvez y mettre des images, comme de la vidéo ou même de la musique. Il est facile d'utilisation et il est gratuit. Il faut quand même s'y inscrire pour avoir son compte. Ils vous donneront alors 500Mo d'espace rien que pour vous. C'est plus que suffisant.

Une fois inscrit, rendez-vous sur l'onglet « Musiques ». Vous cliquez sur « ajoutez des fichiers », vous glissez le fichier sur la petite fenêtre qui s'ouvre puis vous cliquez sur « Démarrer l'envoi. » Maintenant que c'est uploadé, vous pouvez voir votre fichier dans la liste. Lorsque vous passez la souris dessus, une petite flèche apparaît. Cliquez dessus et apparaîtra alors une liste d'options. Celle qui nous intéresse aujourd'hui est celle des « Lecteurs Musique ». Pareil on clique encore dessus.

Vous aurez le choix entre 6 différents types de lecteurs en fonction de l'apparence que vous souhaitez. Certains affichent le titre, d'autres non. Je vous conseille de choisir un lecteur qui permet de choisir la hauteur du son par celui qui écoute. Vous verrez également deux options supplémentaires. L'une qui permet de démarrer automatique la chanson. Je vous déconseille de le faire. C'est souvent mal perçu de se faire « agresser » comme ça lorsque l'on ne s'y attend pas. De plus, si la personne veut l'écouter, il le fera, pas besoin de le forcer. La deuxième option est très simple, elle permet de lire en boucle le morceau.

La mise en place maintenant. C'est très simple, sous le lecteur que cous aurez choisi, vous cliquez sur « obtenir le code » et il apparaîtra. Il suffira simplement de le copier/coller dans votre texte.

Exemple avec le 2ème lecteur :


Donnera :

Il n'y aura rien à modifier, tout est prêt à être utilisé.

Le cadre :

Ici on va apprendre comment on encadre un texte. C'est assez simple en soi. On va prendre la couleur steel blue et il suffit d'utiliser ce code :


Ce qui donne :

On remarque cependant qu'il n'y a aucun espace entre le texte et les limites du cadre, on va ajouter une autre propriété à la balise div. Ce sera la padding. Sans suffixe comme left ou right, tous les côtés du cadre auront une marge avec le texte. Exemple :


Donnera :

On a donc bien des marges tout autour. Lorsque vous mettez plusieurs propriétés à la même balise, faites attention à la syntaxe. Il n'y a pas d'espace avant un « deux-points » ni avant un point-virgule.
Envie d'ajouter une bordure, très simple, on utilise la propriété border ! Le code ressemblera donc à ceci :


Ce qui donne :

Il y a trois choses à prendre en compte cette fois-ci. La taille en pixel, ici 5. Le type de bordure, ici « solid ». Pour finir, la couleur de la bordure, #4C1B1B dans notre cas. Vous pouvez modifier cela comme bon vous semble. Pour les types de bordures, je vais citer les trois autres que l'on voit le plus souvent. Le « dotted » qui fait des pointillés. Le « dashed » qui fait des traits et le « double » qui fait une double rayure. Je vous laisse essayer vous-même.
Vous pouvez aussi choisir de mettre une bordure pour un seul côté du cadre ou même pour deux seulement, ou trois. Il suffit de changer « border » par « border-top » pour haut, « border-bottom » pour le bas, etc. Si vous décidez de mettre le haut et le bas, mais pas les côté, il faudra mettre deux propriétés à la balise, le border-top et le border-bottom.

Dernière étape pour la personnalisation du cadre, les coins. Il est possible d'y ajouter un arrondi. Encore une fois, on ajoute une propriété qui est le « border-radius ». On reprend notre code et on le modifie pour obtenir :


Ce qui donne :

Ici la valeur en pixel est de 10, il peut être modifié également. On peut pousser le vice en arrondissant seulement un des coins. Il suffit de remplacer « border-radius » par « border-top-right-radius » pour le coin en haut à droite. Pour le reste, c'est comme précédemment. Voilà, vous savez maintenant faire vos propres cadres.