listing général;

---

#01. css, html, bbcode...quoi ?
#02. le dictionnaire du codage.
#03. mettre de la musique.
#04. codes spécifiques au forum.

(c) copyright to stfu. ♥ écrit par hankey.

Citation :

l'html.
premièrement, nous avons l’hypertext markup language, généralement abrégé par html, est le format de données conçu pour représenter les pages web. c’est un langage de balisage qui permet d’écrire de l’hypertexte, d’où son nom. html permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie, et des éléments programmables tels que des applets. il permet de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l’accessibilité du web. il est souvent utilisé conjointement avec des langages de programmation javascript) et des formats de présentation (feuilles de style en cascade). html est initialement dérivé du standard generalized markup language (sgml). mais n'allons pas trop loin, ni dans le trop compliqué.

les attributs permettent de préciser les propriétés des éléments html. en tout, il y a 188 attributs. certains attributs s’appliquent à presque tous les éléments : et c'est donc ceux là qui nous intéressent. l'attribut générique class (identificateur répétable) est destiné à permettre l’application de traitements externes, tels que l’application de styles de présentation ou de manipulation de l’arbre du document via un langage de script. il s’y ajoute l’attribut style permettant de définir le style de présentation de l’élément. (généralement en css.)

< div class = "nom de la class" style = " contenu " > s'applique sur tout. < / div >
< span class = " " style = " contenu " > s'applique uniquement sur le texte. < / span >
s'applique sur le texte, modifiable uniquement en css.

d’autres attributs sont propres à un élément unique, ou des éléments similaires. par exemple, les éléments qui permettent d’inclure dans le document des ressources graphiques sont dotés d’attributs de hauteur (height) et de largeur (width), afin que le navigateur puisse anticiper la taille de la ressource à afficher avant que celle-ci n’ait été téléchargée : img, a, iframe, object etc. mais de par leur nature : l’élément ces éléments sont obligatoirement dotés d’un attribut src ou href spécifiant l’url de la ressource qu’il représente.

< a href = " lien ici " > nom du lien. < / a >
< img src= "url de limage" >< / img >

Citation :

le bbcode.
alors alors. tout d'abord, bbcode c'est l'abréviation de bulletin board code, une simplification du langage html utilisée pour mettre en forme les messages de forums de discussion. par abus de langage, les éléments du bbcode sont appelés balises. vous avez déjà des boutons d'utilisation sur le forum, mais nous allons tout de même vous expliquer les bases. le nom d'une balise est délimité par les crochets " [ " et " ] ", contrairement au html où les caractères de comparaisons " < "et " > " sont utilisés. certaines balises ont une propriété, aussi appelée attribut, dont la valeur est assignée à la balise elle-même à l'aide du symbole " = ". les balises bbcode les plus courantes sont les suivantes : (pour les utiliser, retirez les espaces.)

★ texte en gras : [ b]Texte[/b] = Texte.
★ texte en italique : [ i]Texte[/i] = Texte.
★ texte souligné : [ u]Texte[/u] = Texte.
★ texte barré : [ strike]Texte[/strike] = Texte.
★ texte coloré en rouge : [ color= firebrick]Texte[/color] = Texte.
★ lien hypertexte : [ url =URL du lien]Titre du lien[/url] ou = [url=URL du lien]Titre du lien.[/url]
★ image : [ img]URL de l'image[/img]
★ lien hypertexte et image : [ url=URL du lien][ img]Url de l'image[/img][/url]
★ texte de taille différente : [ size=9]PETIT[/size]
★ texte centré : [ center]Texte[/center]
★ texte défilant : [ scroll]Texte[/scroll]
★ texte remontant : [ updown]Texte[/updown]
★ texte avec effet miroir : [ flipv]Texte[/flipv]
★ texte avec un effet sale : [ blur]Texte[/blur]
★ texte en spoiler : [ spoiler]Texte[/spoiler]
★ texte avec un effet dégradé de couleur : [ fade]Texte[/fade]
★ liste : [ list]texte.[/list]
★ texte défilant en diagonale: [ updown][ scroll]Texte[/scroll][/updown]

Citation :

le css.
ensuite, il faut savoir que css signifie "cascading style sheets", ce qui peut se traduire par "feuilles de style en cascade" en français. il s'agit de fichiers contenant des instructions relatives à la mise en forme des pages web. il permettent de définir l'apparence d'un site internet.

comme nous l'avons vu dans cette définition du html, le html permet de structurer le contenu d'une page web en "balisant" ce dernier. par exemple, le code html < v2 >mon titre< / v2 > signifie que "mon titre" est le titre principal de la page. en revanche, cela ne dit pas au navigateur comment ce titre doit être mis en forme : taille de la police, présence d'une puce, espacement entre les caractères, marges, etc. en spécifiant, dans un fichier css, des instructions de mise en forme de "mon titre", on va ainsi expliquer au navigateur comment "mon titre" doit être affiché.

par exemple, vous désirez mettre un titre pour votre rp. vous allez dont l'inscrire de plusieurs manières possibles. soit : mon titre ou : mon titre ou encore

mon titre

... bien sûr, vu qu'il n'y a pas de css, vos codes ne servent à rien. ( pour du texte, je vous conseille span ou la balise, car ils sont prévus spécialement pour la mise en forme des textes. )

dans le css, ensuite vous devez définir vote balise. attention ! si vous avez utilisé la balise html, () elle ne fonctionnera qu'à deux condition : qu'elle soit écrite en html avec des symboles de comparaison (le bbcode ne fonctionnant pas avec le css) et surtout que dans le css, le nom de la balise ne soit pas précédé d'un point. cependant, sans le point, vous ne pourrez pas l'utiliser en div ou en span. vous l'inscrirez donc de cette manière pour utiliser la balise : NOMDELABALISE{ personnalisez ici. }

donc, revenons en au css comme si vous allez utiliser une div ou un span. créez votre balise, par exemple : ".banane" le point au début est très important. ensuite, suivez le par des " { " et " } " entre lesquels vous insèrerez des propriétés et des attributs.

h1 {font-size:16px; font-weight:bold; color:red;}

font-size, font-weight et color sont des propriétés. 16px, bold, et red sont des attributs. il existe ainsi de nombreuses propriétés CSS permettant de définir l'apparence d'un site.

Citation :

le dictionnaire.
la balise < br > ; sauts à la ligne / retours chariot.
pour forcer le retour à la ligne, nous allons utiliser une balise de type marqueur : < br >. elle signifie break row et elle provoque un retour à la ligne ainsi qu'un retour chariot.

la balise < i > ; caractères italiques
pour écrire en italique, on utilise la balise de type conteneur < i >, comme italic. le texte doit être placé entre < i > et < / i >

la balise < b > ; caractères gras.
pour écrire en caractères gras, on utilise la balise de type conteneur < b >, comme bold. le texte doit être placé entre < b > et < / b >

la balise < u > ; souligner du texte.
pour souligner, on utilise la balise de type conteneur < u >, comme underline. le texte doit être placé entre < u > et < / u >

la balise < strike > ; barrer un texte.
pour barrer du texte, on utilise la balise de type conteneur < strike >. le texte doit être placé entre < strike > et < / strike >

la balise < sup > ; mettre en exposant.
pour écrire du texte en exposant, on utilise la balise de type conteneur < sup >. le texte doit être placé entre < sup > et < / sup >

la balise < sub > ; mettre en indice.
pour écrire du texte en indice, on utilise la balise de type conteneur < sub >. le texte doit être placé entre < sub > et < / sub >

la balise < font > ; personnaliser le texte.
la balise < font > (type conteneur) permet de changer la couleur, la taille et même la police utilisée pour un texte. elle possède 3 attributs. color (couleur du texte), cet attribut permet de définir une couleur au texte compris dans la balise. size (taille du texte), l'attribut size permet de modifier la taille de la police. La valeur n'est pas en pixels. face (nom de la police), il permet d'utiliser une police particulière. si la police n'est pas installée sur la machine du visiteur, une police par défaut sera utilisée. c'est pourquoi il est conseillé d'écrire plusieurs noms de polices séparés par des virgules.

la balise < p > ; paragraphe.
la balise < p > permet de créer un paragraphe. c'est une balise de type conteneur. cette balise possède les attributs suivants. align (alignement horizontal), align permet définir l'alignement horizontal d'un paragraphe. Il admet quatre valeurs :

left : alignement à gauche
center : pour aligner au centre
right : pour aligner à droite
justify : justification du texte, c'est à dire que l'espacement entre les mots est ajusté de façon à ce qu'une ligne de texte débute de la marge gauche et finisse à la marge droite.

la balise < div > ; contenant.
la balise < div > (du type conteneur) peut inclure tous les tags html (paragraphes, tables ..., mais également d'autres divisions). elle sert à structurer le document en plusieurs sections. elle est l'alternative de la balise table pour ordonner les éléments dans une page et permet d'obtenir des présentations très intéressantes avec certains style css, en utilisant alors span ou class.

la balise < hr > ; ligne horizontale / séparation.
la balise < hr > (horizontal row) permet de tracer une ligne horizontale. on peut ainsi séparer facilement des paragraphes. c'est une balise du type marqueur.

la balise < center > ; centrer.
cette balise permet de centrer un élément. elle ne possède pas d'attribut.

la balise < blockquote > ; indentation / tabulation / alinéa.
la balise < blockuote > permet de réaliser une indentation du texte par rapport à la marge gauche et à la marge droite.

la balise < blink > ; clignotement / clignoter.
la balise < blink > permet de faire clignoter du texte. pratique au début pour attirer l'attention du lecteur sur un point important.

la balise < iframe > ; cadres intérieurs.
la balise < iframe > permet de créer un cadre dans un document ou de faire apparaître un contenu via une autre page html.

la balise < marquee > ; défilement de texte.
la balise < marquee > permet de réaliser facilement un message défilant.

Citation :

mettre de la musique.
étape n°1 : le choix de la vidéo.
en effet, bien que seule la musique qui accompagnera la vidéo compte, il ne faut pas choisir cette dernière n'importe comment. voici les cas pour lesquels la balise ne sera pas valide :
- vidéos interdites aux moins de 18 ans.
- vidéos avec bande sonore comportant des copy-right (reconnaissable par un lien vers itunes)
- vidéos ayant bloqué le partage sur d'autres sites que youtube.

étape n°2 : le lien de la vidéo.
une fois la vidéo trouvée, cliquez sur "partager" puis "intégrer". cochez la case "utiliser l'ancien mode d'intégration" et copiez le code proposé (dans un fichier bloc-notes par exemple).

Code:

<object width="425" height="349"><param name="movie" value="http://www.youtube.com/v/KGNOgoW1_wo?version=3&hl=fr_FR&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/KGNOgoW1_wo?version=3&hl=fr_FR&rel=0" type="application/x-shockwave-flash" width="425" height="349" allowscriptaccess="always" allowfullscreen="true"></embed></object>

une seule partie nous concerne dans ce méli-mélo de code.

Code:

value="http://www.youtube.com/v/KGNOgoW1_wo?version=3&hl=fr_FR&rel=0"

étape n°3 : les balises de codage.
la balise qui permet d'insérer ce type d'objet est [flash(200,25)][/flash]. "200" est le nombre de pixel en longueur et "25" le nombre de pixels en hauteur. Je vous conseille de garder ces chiffres tels quels car si vous dépassez les 25 pixels de hauteur, un bout de l'image de la vidéo apparaitra (alors que nous ne voulons garder que le son). par contre, la longueur est complètement modifiable. dans l'exemple choisi, cela nous donne :

Code:

[flash(200,25)]http://www.youtube.com/v/KGNOgoW1_wo?version=3&hl=fr_FR&rel=0[/flash]

étape n°4 : dernière ligne droite !
cette étape ne concerne que les vidéos contenant "version=3" dans leur lien. en effet, ce tout petit détail rend la musique illisible (qu'il est mignon, le petit !). c'est pourquoi nous allons nous en débarrasser. supprimez ce petit saligaud. ♥ et voilà le résultat ! ♥

Citation :

balises du forum.
voilà les quelques balises que vous ne pouvez pas personnaliser, elles sont utilisable uniquement sur ce forum. les voici : ♥

texte.

Code: <w>texte.</w>

texte.

Code: <v2>texte.</v2>

texte.

Code: <hana>texte.</hana>

texte.

Code: <hana2>texte.</hana2>

texte.

Code: <hana3>texte.</hana3>

texte.

Code: <tul>texte.</tul>

texte.

Code: <set>texte.</set>

texte.

Code: <net>texte.</net>

texte.

Code: <go>texte.</go>

texte.

Code: <v>texte.</v>

texte.

Code: <z>texte.</z>

texte.

Code: <v3>texte.</v3>

texte.

Code: <dev>texte.</dev>

texte.

Code: <daz>texte.</daz>

couleur des enamored.

Code: <en>texte.</en>

couleur des wanker.

Code: <wk>texte.</wk>

couleur des eager.

Code: <eag>texte.</eag>

couleur des troublemaker.

Code: <tm>texte.</tm>

couleur des slogger.

Code: <sl>texte.</sl>