I - Mise en forme du texte
A) Les différents effets réalisables
B) Comment disposer votre texte?
II - Images, vidéos, son et liens
III - Création de messages avancés
A) Réalisation de balises multiples
B) Les tableaux
C) Le code du tutorial déchiffré
IV - Comment se servir du site et bien rédiger un message? -Dunkio.
Avant de commencer la lecture, voici un lexique des termes employés (qu'il est fortement conseillé de connaitre):
- Code et BBCode: Language informatique permettant à l'ordinateur de faire tout ce qu'il est censé faire. En l'occurrence pour ce tutorial le language BBCode est utilisé et permet la mise en forme d'un texte/message sur un forum.
- Balise: Nom utilisé pour désigner de manière générale le format d'un code sur Internet. Par exemple, pour le BBCode, une balise est notée avec des crochets [ ]. De plus, pour que le code prenne effet, il faut la présence de deux balises (d'où ce terme "baliser"): [BALISE "CHANGEMENT DE COULEUR] Ce texte va changer de couleur [/BALISE CHANGEMENT DE COULEUR]. La balise avec le / sert à indiquer que le code doit prendre fin.
Autre exemple, le language Internet php propose des balises du type < script> < /script>.
- Topic: Terme pour désigner un sujet sur forum. Par exemple sur Hooper.fr, le jeu "L'expression du Hooper" est un topic.
- Section: Il s'agit d'un endroit sur le forum où l'on regroupe plusieurs topics d'un même thème. Par exemple le topic du jeu "L'expression du Hooper" se situe dans la section "Freestyle".
- URL: Adresse Internet d'un site, ou "lien". Par exemple "www.google.com".
- Mettre en gras
- Mettre en italique
- Souligner le texte
- Barrer le texte
- Taille du texte
- Colorer le texte
- Police du texte
B) Comment disposer votre texte?
- Centrer le texte
- Texte à gauche
- Texte à droite
- Justifier le texte
- Citer un texte
- Cacher un texte
A) Les différents effets réalisables
chaque section du forum
permettant la création de topic
chaque topic permettant d'écrire
un commentaire dans celui-ci
Vous vous retrouvez donc dans l'éditeur de texte après avoir cliqué sur l'un des deux boutons (ci dessus), et différents outils s'offrent à vous:
NB: Une multitude de couleurs peut être utilisée. Evidemment, le titre de la couleur ou le code avec dièse doit être écrit sans faute pour que l'effet s'applique sur le texte.
Comme pour les couleurs, de nombreuses polices d'écriture peuvent être utilisées:
B) Comment disposer votre texte?
Résultat:
NB: Comment obtenir le lien direct d'une image?
Comment ajouter une image contenue dans votre ordinateur?
A) Réalisation de balises multiples
B) Les tableaux
NB: Comme expliqué plus haut, on peut disposer n'importe quoi entre chaque balise "td" (soit dans chaque cellule). vous pouvez y rajouter des images (avec les balises "img"), des liens ("url"), des vidéos, etc... Attention toutefois à ne pas vous perdre dans toutes ces balises "tr" et "td". C'est pourquoi, lorsqu'on code un très grand tableau, il est primordial de bien disposer son texte (comme avec l'exemple ci-dessus).
C) Le code du tutorial déchiffré
Premièrement, le sommaire doit être centré. Nous rajoutons donc tout simplement les balises "center" en rouge en début et fin de code (pour englober la totalité du sommaire). Ensuite, afin de rendre le sommaire plus appréciable à l'oeil, on peut rajouter deux barres horizontales pour l'encadrer. La balise permettant cela, est la balise "hr" en vert. Attention, une seule balise suffit à créer une barre horizontale! Maintenant, il faut créer les titres et sous-titres. Pour distinguer les deux, la taille des titres est augmentée à l'aide des balises "size" en jaune et les sous-titres sont mis en italique.
Enfin, il ne reste plus qu'à rediriger le lecteur vers les différentes parties avec des liens, à l'aide des balises "url" en bleu. Pour réaliser cela, il faut récupérer l'adresse (ou URL) des messages correspondants. Elles sont disponibles en cliquant sur leur numéro ici:
Une fois ce bouton pressé, l'URL du message apparaît dans la barre de navigation de votre navigateur. Copiez/collez ce lien dans les balises "url" et votre sommaire est opérationnel!
Comment mettre tout cela en forme?
Ce que l'on peut déjà remarquer, ce sont les deux images qui englobent le morceau principal (la première d'une taille égale à 10x10 et la seconde de 10x80). A quoi servent-elles? Ce sont en fait des images transparentes au format .gif (que l'on pourrait décrire comme vides) qui servent à créer un espace entre chaque bloc. En variant la hauteur de celles-ci, on peut ainsi configurer l'espacement entre chaque objet. Cette technique peut être utilisée pour contrer de nombreux autres problèmes (comme les alinéas par exemple).
La création du bloc commence alors avec un tableau (balises "table" en rouge). A quoi ce tableau sert-il? Il sert à afficher le logo ainsi que le titre ("Mettre en gras"). Nous n'avons donc besoin que d'une seule ligne pour cela (d'où l'unique paire de balise "tr" en jaune). Le logo et le titre seront donc placés dans une cellule ("td" en bleu) chacun. Pourtant, si on observe attentivement, on remarque qu'il existe une troisième cellule (une troisième paire de balises "td"). Cette dernière cellule contient la troisième image du bloc, au format .gif. Il s'agit une nouvelle fois d'une image transparente qui a pour but de décaler les deux premières cellules (le logo et le titre) vers la gauche. Sans cette troisième cellule, les deux premières auraient été placées au centre du message, ce que nous ne voulons pas. Une petite balise "hr" est placée dans la seconde cellule afin de mettre en évidence le titre.
A la suite de la description de l'outil (texte simple sans effet particulier), une balise "code" en vert est positionnée. Ce nouveau code permet l'encadrement d'un passage, du même style que les balises "quote". En théorie, ces balises ("code") devrait permettent l'affichage de BBcode sans que celui-ci prenne effet (au lieu d'avoir un texte en gras par exemple, on aurait ça). Que contiennent ces balises "code"? Elles contiennent tout simplement une quatrième image (celle-ci) ainsi que l'affichage du résultat. Parfois, les balises "code" peuvent ne pas marcher et ne pas afficher d'encadrement gris. Pour résoudre le problème, essayez de placer la balise fermante "/code" seule sur une ligne.