Gros probléme d'emails avec Yahoo

Yahoo refuse tous les emails du site. Si vous avez une adresse chez un autre prestataire, c'est le moment de l'utiliser ;)

En cas de soucis, n'hésitez pas à aller faire un tour sur la page de contact en bas de page.

par skywodd, le

Topic "Le guide complet sur la syntaxe BBCode"

Flux RSS des posts récents dans ce topic ( Flux Atom)

Photo de profil de skywodd

skywodd

Membre

Membre du staff

#9 | Signaler ce message

Bonjour à toutes et à tous !

Vous êtes nombreux à avoir remarqué cette ligne en bas de certaines zones de texte : "Vous pouvez utiliser la syntaxe BBCode dans ce champ".

Cette ligne vous indique que le champ en question supporte la syntaxe BBCode. Qu'est-ce donc que la syntaxe BBCode me direz vous ? Ce topic est là pour répondre à cette question.

La syntaxe BBCode est une syntaxe légère permettant d'écrire des textes riches à la main. La syntaxe BBCode utilisée sur CDM est bien plus évoluée que celle d'un forum classique. Tout le site utilise un même moteur de rendu de texte. Vous avez donc accès aux mêmes outils d'écritures sur le forum que les rédacteurs sur le site pour les articles (avec cependant quelques limitations).

Dans ce message, je vais essayer de vous présenter toutes les balises BBCode disponibles sur CDM et leurs utilités respectives.

N.B. L'administrateur du site peut débloquer certaines fonctionnalités au cas par cas si besoin. Si vous prévoyez de faire une série de tutoriels sur le forum par exemple, n'hésitez pas à demander l'accès aux fonctionnalités avancées pour pouvoir faire de vos tutoriels de vrais chefs-d'œuvre ;)

* Le déblocage est soumis à plusieurs règles de conduite et est réservé en priorité aux utilisateurs réguliers du site.

La syntaxe de base

Un morceau de texte BBCode est constitué de texte, de retour à la ligne, et de "balises" BBCode permettant de définir la mise en forme du texte. L'utilisation des balises BBCode est parfaitement optionnelle. Vous pouvez écrire votre texte sans aucune balise BBcode, cela est parfaitement valide.

Une "balise" BBCode n'est — dans sa forme la plus simpliste — rien de plus qu'un crochet ouvrant, un nom de balise et un crochet fermant.

Exemple : [toto]

Certaines balises comme url sont en deux parties : une balise ouvrante et une balise fermante. La syntaxe de la balise fermante est identique à celle de la balise ouvrante, avec simplement un slash devant le nom de la balise.

Exemple : [toto]...[/toto]

Certaines balises comme code acceptent des attributs au niveau de la balise ouvrante. Ces attributs sont sous la forme clef=valeur et sont séparés les uns des autres par des espaces.

Exemple : [toto foo=bar bar=foo]

La valeur peut être mise entre simples ou doubles quotes si celle-ci contient des espaces ou des crochets :

Exemple : [toto foo='bar bar']

Exemple : [toto foo="bar bar"]

Pour rendre les choses plus compliquées simples, certaines balises acceptent un raccourci permettant d'assigner une valeur directement avec le nom de la balise .

Exemple : [toto=valeur]

N.B. Les balises fermantes ne peuvent pas avoir d'attributs.

PS Si vous souhaitez vous faire la main, sachez que le TamiaLab propose un bac à sable pour le moteur de rendu du site.

La gestion des paragraphes

Le moteur de rendu PySkCode qui gère toute la syntaxe BBCode sur CDM, fonctionne sur un principe de paragraphes (comme Markdown, pour les connaisseurs).

Cela signifie que plusieurs lignes de texte à la suite, sans ligne vide entre elles, seront regroupées dans un même paragraphe.

Par exemple : 

1
2
3
4
5
6
7
Ceci est une ligne du 1er paragraphe.
Ceci est une ligne du 1er paragraphe. 
Ceci est une ligne du 1er paragraphe.

Ceci est une ligne du 2e paragraphe.
Ceci est une ligne du 2e paragraphe. 
Ceci est une ligne du 2e paragraphe.

Donne ceci :

Ceci est une ligne du 1er paragraphe. Ceci est une ligne du 1er paragraphe. Ceci est une ligne du 1er paragraphe.

Ceci est une ligne du 2e paragraphe. Ceci est une ligne du 2e paragraphe. Ceci est une ligne du 2e paragraphe.

Pour insérer un retour ligne au milieu d'un paragraphe, il convient d'utiliser la balise [br] à l'endroit souhaité du retour ligne.

Exemple : 

1
2
3
Ceci est une ligne.
Ceci est une ligne. [br]
Ceci est une ligne.

Ceci est une ligne. Ceci est une ligne.
Ceci est une ligne.

Edit : n'utilisez pas la balise [br] à chaque fin de ligne ! La balise [br] existe uniquement pour résoudre des cas d'usage très particulier. Découpez votre texte en paragraphes (en fonction du contexte et du sujet) et laissez le site afficher vos paragraphes sous forme de texte justifié.

Pour faciliter l'écriture depuis un navigateur web, un simple retour ligne seul ne génère pas un nouveau paragraphe. Dans un traitement de texte classique, un retour ligne génère un nouveau paragraphe et une interligne. Ce n'est pas possible avec un navigateur web. Il faut donc faire un double retour à ligne (= ligne vide) pour avoir un nouveau paragraphe. La ligne vide ainsi obtient fait office d'interligne lors de l'écriture.

Je suis parfaitement conscient que l'affichage en texte justifié par défaut est assez perturbant. Il est très commun sur le web d'avoir du texte en aligné à gauche par défaut, mais c'est contre-productif. En mode justifié, le texte prend toute la largeur d'écran disponible, que vous soyez sur PC ou smartphone. Imaginez vous en train de lire un livre imprimé en aligné à gauche, ce serait horrible à lire !

Pour vous donner un exemple, voici le texte source de cet edit : 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
[b]Edit : n'utilisez pas la balise [icode][br][/icode] à chaque fin de ligne ![/b]
La balise [icode][br][/icode] existe uniquement pour résoudre des cas d'usage très particulier.
Découpez votre texte en paragraphes (en fonction du contexte et du sujet) et laissez le site afficher vos paragraphes sous forme de texte justifié.

Pour faciliter l'écriture depuis un navigateur web, un simple retour ligne seul ne génère pas un nouveau paragraphe.
Dans un traitement de texte classique, un retour ligne génère un nouveau paragraphe et une interligne. 
Ce n'est pas possible avec un navigateur web.
Il faut donc faire un double retour à ligne (= ligne vide) pour avoir un nouveau paragraphe.
La ligne vide ainsi obtient fait office d'interligne lors de l'écriture.

Je suis parfaitement conscient que l'affichage en texte justifié par défaut est assez perturbant.
Il est très commun sur le web d'avoir du texte en aligné à gauche par défaut, mais c'est contre-productif.
En mode justifié, le texte prend toute la largeur d'écran disponible, que vous soyez sur PC ou smartphone.
Imaginez vous en train de lire un livre imprimé en aligné à gauche, ce serait horrible à lire !

Les titres

Les titres permettent de structurer un message en le découpant en sous-parties. À noter que l'ajout de titres déclenche la génération d'un sommaire en début de message.

N.B. Cette fonctionnalité est bloquée par défaut sur le forum pour éviter les abus.

Six niveaux de titres sont disponibles via les six balises suivantes: [h1], [h2], [h3], [h4], [h5], [h6]

Chacune de ces balises supporte un attribut optionnel id, permettant de spécifier un identifiant (permalien) au titre. La syntaxe raccourcie peut être utilisée pour spécifier l'identifiant.

Exemples :

[h1]Mon titre de premier niveau[/h1]

[h1 id="intro_starwars"]In a galaxy far far away ...[/h1]

[h1="intro_starwars"]In a galaxy far far away ...[/h1]

Les blocs de code

Les blocs de code permettent d'inclure des extraits de code dans un message.

Pour créer un bloc de code, il convient d'utiliser la balise [code]...[/code].

La balise code accepte plusieurs attributs optionnels :

  • language qui une fois défini, active la coloration syntaxique pour le langage de programmation spécifié. Cet attribut peut être défini en utilisant la syntaxe raccourcie [code=language].

  • hl_lines qui permet de mettre en surbrillance certaines lignes de code. Si utilisé, cet attribut doit contenir une liste de numéros de lignes séparées par des virgules.

  • linenostart qui permet de définir le numéro de la première ligne (1 par défaut).

  • filename qui permet de définir le nom du fichier lié à cet extrait.

  • src qui permet d'ajouter un lien vers la source de cet extait.

  • id qui permet d'ajouter des permaliens à chaque ligne de code.

Des raccourcis pour divers langages de programmation sont disponibles :

  • [python]...[/python]

  • [cpp]...[/cpp]

  • [java]...[/java]

  • [html]...[/html]

  • [php]...[/php]

Ces raccourcis acceptent tous les attributs optionnels de la balise code de base.

Les boites d'avertissements

Les boites d'avertissements permettent de mettre en avant une information en l'encadrant dans une boite de couleur, avec un titre.

N.B. Cette fonctionnalité est bloquée par défaut sur l'ensemble du site pour éviter les abus.

Pour créer une boite d'avertissement, il convient d'utiliser la balise [alert]...[/alert].

La balise alert accepte plusieurs attributs :

  • title qui contient le titre de la boite d'avertissement. Cet attribut peut être défini en utilisant la syntaxe raccourcie [alert=title].

  • type qui contient le type de la boite d'avertissement. Les valeurs possibles sont : error danger warning info success note question.

Exemple : [alert title="Oups" type="error"]J'ai fait une bêtise.[/alert]

Des raccourcis pour les différents types de boites d'avertissement sont disponibles.

Exemple pour le type error : [error title="Oups"]J'ai fait une bêtise.[/error]

Mise en forme du texte

Dans ce chapitre, on va voir ensemble toutes les balises de mise en forme de texte.

Gras

[b]Le texte en gras.[/b]

Sont aussi acceptés les alias : [bold] et [strong].

Italique

[i]Le texte en italique.[/i]

Sont aussi acceptés les alias : [italic] et [em].

Barré

[s]Le texte barré.[/s]

Sont aussi acceptés les alias : [strike] et [del].

Souligné

[u]Le texte souligné.[/u]

Sont aussi acceptés les alias : [underline] et [ins].

Surligné (notation électronique NOT)

[not]Le texte surligné[/not]

Exposant

[sup]Le texte en exposant.[/sup]

Indice

[sub]Le texte en indice.[/sub]

Texte brut

[pre]Le texte brut.[/pre]

N.B. Le texte peut contenir d'autres balises. Cette balise se contente d'afficher le texte final avec une police Monospace, sans ignorer les retours lignes.

Code (inline)

[icode]un petit morceau de code[/icode]

Cette balise est la version "inline" (pouvant être incluse dans du texte) de la balise code classique.

N.B. Cette balise ne permet pas de faire de coloration syntaxique, contrairement à la balise code classique.

Spoiler (inline)

[ispoiler]Harry Potter meurt à la fin du dernier film.[/ispoiler]

Cette balise est la version "inline" (pouvant être incluse dans du texte) de la balise spoiler classique.

Raccourci clavier

[kbd]CTRL + F[/kbd]

Est aussi accepté l'alias : [keyboard].

Surbrillance

[mark]Le texte en subrbrillance.[/mark]

Sont aussi acceptés les alias : [highlight] et [glow].

Texte en petite taille

[small]En acceptant d'utiliser cette balise, vous offrez votre âme à l'administrateur du site.[/small]

Référence

[cite]Roméo et Juliette[/cite]

Alignement du texte

Dans ce chapitre, on va voir ensemble toutes les balises d'alignement de texte.

Centré

[center]Le texte centré.[/center]

Droite

[right]Le texte à droite.[/right]

Gauche

[left]Le texte à gauche.[/left]

Direction du texte

Pour changer la direction d'un bloc de texte, il convient d'utiliser la balise [bdo]...[/bdo].

Cette balise nécessite la direction du texte via l'attribut dir ou via la syntaxe raccourcie [bdo=dir]. La direction du texte peut être au choix : ltr pour du texte de gauche à droite, ou rtl pour du texte de droite à gauche.

Des raccourcis existent pour les deux options :

[ltr]Le texte de gauche à droite.[/ltr]

[rtl]Le texte de droite à gauche.[/rtl]

Modification d'affichage du texte

Dans ce chapitre, on va voir ensemble toutes les balises de modification d'affichage de texte.

Minuscule

[lowercase]J'AIME PAS LES MINUSCULES ![/lowercase]

Majuscule

[uppercase]du calme ![/uppercase]

Majuscule, minuscules

[capitalize]j'écris du texte sans majuscule au début.[/capitalize]

Couleur du texte

Pour changer la couleur d'un bloc de texte, il convient d'utiliser la balise [color]...[/color].

N.B. Cette fonctionnalité est bloquée par défaut sur l'ensemble du site pour éviter les abus.

La balise color accepte en attribut, via la syntaxe raccourcie, la couleur du texte à afficher. La couleur peut être donnée au format HEX RGB ou en anglais, suivant les spécifications de la norme CSS.

Exemple : [color=red]J'aime le rouge ![/color]

Exemple (en hexadécimal) : [color=#FF0000]J'aime le rouge ![/color]

Spoiler

Si vous avez des choses à cacher, la balise [spoiler]...[/spoiler] permet de cacher du texte derrière un bouton.

Exemple : [spoiler]Harry Potter meurt à la fin du dernier film.[/spoiler]

Les figures et légendes

Pour déclarer une figure, avec sa légende, il convient d'utiliser la balise [figure]...[/figure], avec la balise [figcaption]...[/figcaption] à l'intérieur de la balise figure.

Exemple : 

1
2
3
4
[figure]
Le contenu de la figure ici.
[figcaption]La légende ici.[/figcaption]
[/figure]

Les listes de choses à faire

Pour déclarer une liste de choses à faire, il convient d'utiliser la balise [todolist]...[/todolist], avec une ou plusieurs balises [task]...[/task] à l'intérieur de la balise todolist.

Exemple : 

1
2
3
4
5
6
[todolist]
[task]Manger une pomme[/task]
[task]Manger une poire[/task]
[task]Manger une banane[/task]
[task]Maudir l'inventeur des "cinq fruits et légumes par jour".[/task]
[/todolist]

Pour déclarer une tâche terminée, il suffit d'ajouter l'attribut done à la balise task.

Exemple : [task done]Manger une pomme[/task]

Exemple (alternative) : [task=done]Manger une pomme[/task]

Les listes de définitions

Pour créer une liste de définitions, il convient d'utiliser la balise [dl]...[/dl] pour créer la liste, puis la balise [dt]...[/dt] pour déclarer un terme et enfin la balise [dd]...[/dd] pour déclarer une définition.

Exemple : 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
[dl]
[dt]Firefox[/dt]
[dd]Un navigateur web open source.[/dd]

[dt]Chrome[/dt]
[dd]Un navigateur web pas open source.[/dd]

[dt]Opera[/dt]
[dd]Une copie de Chrome, mais sans aucune fonctionnalité.[/dd]

[dt]Internet Explorer[/dt]
[dd]Un outil permettant de télécharger Chrome ou Firfox.[/dd]
[/dl]

N.B. Plusieurs définitions peuvent suivre une même déclaration de terme.

Les listes

La déclaration d'une liste générique se fait au moyen de la balise [list]...[/list].

La balise list accepte un attribut nommé type permettant de choisir le type de list à afficher.

L'attribut type peut prendre comme valeur :

  • 1 pour une liste numérique.

  • a pour une liste ordonnée via des caractères minuscules.

  • A pour une liste ordonnée via des caractères majuscules.

  • i pour une liste ordonnée via des chiffres romains minuscules.

  • I pour une liste ordonnée via des chiffres romains majuscules.

Si l'attribut type n'est pas spécifié, la liste s'affiche comme une liste non ordonnée (simple liste de points).

Afin de faciliter le travail des rédacteurs, deux balises supplémentaires permettent de faire des listes d'un type précis rapidement.

  • La balise [ol]...[/ol] permet ainsi de faire des listes ordonnées, par défaut numérique (l'attribut type permet de changer l'affichage).

  • La balise [ul]...[/ul] permet ainsi de faire des listes non ordonnées.

Qu'importe le type de liste choisi, l'ajout d'un élément dans la liste se fait via la balise [li]...[/li].

Exemple : 

1
2
3
4
5
6
[ul]
[li]Rouge[/li]
[li]Vert[/li]
[li]Bleu[/li]
[li]Jaune[/li]
[/ul]

Les tableaux

Pour créer un tableau, il convient d'utiliser la balise [table]...[/table] pour créer le tableau, puis la balise [tr]...[/tr] pour déclarer une ligne du tableau et enfin la balise [td]...[/td] pour déclarer une cellule du tableau (ou [th]...[/th] pour déclarer une cellule d'entête).

Exemple : 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
[table]
[tr]
[th]Colonne 1[/th]
[th]Colonne 2[/th]
[th]Colonne 3[/th]
[/tr]

[tr]
[td]Ligne 1 colonne 1[/td]
[td]Ligne 1 colonne 2[/td]
[td]Ligne 1 colonne 3[/td]
[/tr]

[tr]
[td]Ligne 2 colonne 1[/td]
[td]Ligne 2 colonne 2[/td]
[td]Ligne 2 colonne 3[/td]
[/tr]

[tr]
[td]Ligne 3 colonne 1[/td]
[td]Ligne 3 colonne 2[/td]
[td]Ligne 3 colonne 3[/td]
[/tr]
[/table]

Les citations

Pour faire une citation, il convient d'utiliser la balise [quote]...[/quote], ou son alias [blockquote]...[/blockquote].

La balise quote accepte plusieurs attributs optionnels :

  • author qui permet de définir le nom de l'auteur de la citation. L'auteur peut être défini via la syntaxe raccourcie [quote=author].

  • link qui permet de définir la source de la citation.

  • date qui permet de définir la date de la citation. Si utilisée, la date doit être au format Timestamp UNIX UTC.

Exemple : [quote author=Skywodd]Jaime le rouge ![/quote]

Les notes de bas de page

Pour faire une note de bas de page, il convient d'utiliser la balise [footnote]...[/footnote], ou son alias [fn]...[/fn].

L'identifiant de la note de bas de page doit être fourni via l'attribut id. Si aucun identifiant n'est fourni, la note de bas de page sera indexée au moyen d'un compteur.

Exemple : [footnote id="maNote"]Ceci est le texte de la note de bas de page.[/footnote]

N.B. L'identifiant de la note de bas de page est affiché au niveau de la déclaration de celle-ci.

Pour faire une référence vers une note de bas de page existante, il convient d'utiliser la balise [fnref]...[/fnref].

L'identifiant de la note cible doit être fourni entre les deux balises.

Exemple : Voir la note de bas de page[fnref]maNote[/fnref] pour plus d'informations.

Les acronymes

Pour déclarer un acronyme, il convient d'utiliser la balise [acronym]...[/acronym], ou son alias [abbr]...[/abbr].

Le titre de l'acronyme doit être spécifié via l'attribut title ou via la syntaxe raccourcie [acronym=title].

Exemple : Faire ceci [acronym title="As Soon As Possible"]ASAP[/acronym].

Exemple : Faire ceci [acronym="As Soon As Possible"]ASAP[/acronym].

Les liens et ancres

Les liens et emails

Un lien se déclare au moyen de la balise [url]...[/url], ou de son alias [link]...[/link].

Lors de la déclaration d'un lien, deux choix sont possibles : faire un lien simple, ou un lien avec du texte.

Pour faire un lien simple, il suffit de mettre le lien entre les deux balises url : [url]http://tamialab.fr[/url]

Pour faire un lien avec du texte, il convient de définir l'attribut url de la balise ouvrante, via la syntaxe raccourcie, puis de mettre le texte du lien entre les deux balises url : [url=http://tamialab.fr]L'entreprise la plus sympa du monde ![/url]

N.B. Par mesure de sécurité et pour éviter le spam, les liens sont par défaut définis avec l'attribut HTML rel=nofollow. Cet attribut indique aux moteurs de recherche comme Google ne pas suivre le lien en question. Inutile donc de coller l'adresse de votre site web dans chaque message, les moteurs de recherches ne suivront pas vos liens. Cette mesure de sécurité pourra être débloquée pour les utilisateurs réguliers sur décision de l'administrateur du site.

La balise [email]...[/email] fonctionne sur le même principe que la balise url, mais créé automatiquement un lien mailto: avec l'adresse email fournie.

Exemple : [email]john.doe@example.com[/email]

Les ancres

Pour créer une ancre au sein d'un message, il convient d'utiliser la balise [anchor]...[/anchor].

L'identifiant de l'ancre doit être spécifié entre les deux balises.

Exemple : "I want to play a game."[anchor]citation-saw[/anchor]

Pour plus tard faire un lien vers cette ancre, il suffit d'utiliser la balise [goto]...[/goto].

L'identifiant de l'ancre cible doit être fourni via l'attribut id ou via la syntaxe raccourcie [goto=id].

Le texte à afficher devra quant à lui se trouver entre les deux balises.

Exemple : Comme la [goto="citation-saw"]célèbre phrase du film Saw vu précédement[/goto].

Les images et medias

Les images

Pour insérer une image dans un message, il convient d'utiliser la balise [img]...[/img].

La balise img accepte divers attributs :

  • alt qui permet de fournir une description textuelle du contenu de l'image.

    Il est vivement recommandé de fournir cette description pour les personnes malvoyantes qui souhaiteraient elles aussi pouvoir profiter de vos messages ;)

  • width qui permet de spécifier la largeur de l'image.

  • height qui permet de spécifier la hauteur de l'image.

Le lien vers l'image doit se trouver entre les deux balises.

Exemple : [img alt="Image d'exemple sans intérêt"]http://example.com/image.jpg[/img]

Les média (vidéos YouTube par exemple)

Pour insérer une vidéo YouTube dans un message, il suffit de placer l'adresse de la vidéo dans une balise [youtube]...[/youtube].

Les extra pour le web ou à usage spécial

En plus de toutes les balises ci-dessus, plusieurs balises "bonus" sont disponibles.

[hr] permets d'ajouter une ligne horizontale au milieu d'un message.

[noparse]...[/noparse] et [nobbc]...[/nobbc] permettent d'insérer du texte brut, contenant ou non des balises BBCode au sein d'un message.

Derniére modification le par skywodd

Photo de profil de skywodd

skywodd

Membre

Membre du staff

#10 | Signaler ce message

A noter que plusieurs bugs du moteur de rendu sont connus au moment de la rédaction de ce message :

  • Les balises d'alignement de texte n'ont pas d'effet (problème de CSS).

  • Les figures et tableaux n'ont pas de contours (CSS manquant).

  • La balise email ajoute deux slashs en début d'adresse alors que ça ne devrait pas être le cas.

Edit : Corrections de bug effectués.

Derniére modification le par skywodd

Cliquez ici pour ajouter une réponse.