Alors un tuto bien pratique quand on commence en codage et que, en ouvrant la page pour regarder ce que c'est, on la referme de désespoir avec le fameux :
<< C'est du chinois ce truc...>>

Alors, vous pouvez maintenant le bannir, l'avilir, le huer, le lyncher, le ... BREF. On va l'oublier et on va faire nos gros malins. Vous allez devenir des as en moins de deux avec trois fois trois codes pas trop dur.

Oui, je fais une intro. Mais vous allez bientôt comprendre pourquoi.
Pour faire du codage, il faut intégrer un début très important :

Code:

<div style="Exemple;"></div>

Ceci est le corps de base du code. A l'intérieur, vous définissez le codage en lui même. Avec la taille, la longueur, si il y a une barre de défilement (scrollbar), le fond, etc...
Pour le moment je vais vous apprendre à définir la taille de votre post. Sinon, passons à la pratique en déterminant la taille de la partie de message.

Le width correspond à la largeur. Le height à la hauteur.  Il faut savoir que l'espace des messages du forum n’excède pas 700 de large donc évitez de passer au-dessus.  Il est possible de ne pas s'embêter avec les détails ci-dessus :

Code:

<div style="width: 200px; height: 150px; overflow: auto;"></div>

Il suffit de remplacer la valeur 200px par auto. A ce moment là, le post se redimensionnera tout seul sans que vous n'ayez rien à faire. Cependant, si vous créez un post comme précédemment fait dans le code, si votre message dépasse la longueur définie, il vous créer une scrollbar :

On the other hand, we denounce.On the other hand, we denounce with righteous indignation and dislike men who are so beguiled. On the other hand, we denounce.On the other hand, we denounce with righteous indignation and dislike men who are so beguiled.

On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.

Pour donner un fond à votre post, on procède ainsi :

Code:

<div style="width: 200px; height: 150px; overflow: auto; background-color: #000000;"></div>

Mais rien ne vous empêche de mettre non pas un fond de couleur mais une image. Le code devient alors :

Code: <div style="width: 200px; height: 150px; overflow: auto; background-image:url(Lien de l'image);"><br></div>

Je profite de la fin de l'intro pour insister sur un point dans le code :
Si vous ne séparez pas les différents traits définis (le width et le height par exemple) par un ";" le code sera nul. De même si vous laissez un espace de trop. Ces petites bêtes sont fragiles et facilement contrariées pour un rien.

Cela, c'était l'intro qui vous servira toujours. Avec ça, vous avez 25% du codage. Le reste, c'est du bonus de décoration.

Il y a 8 types de bordures existantes. ça va des pointillés en passant par le double trait plein avant de repartir vers les cadres comme on a chez nous vous savez ? Enfin bref. Je vais vous montrer le rendu avant de vous expliquer comment on fait.

○ Nom ○ Exemple ○ Dotted Exemple Dashed Exemple Solid Exemple Double Exemple Groove Exemple Ridge Exemple Inset Exemple Outset Exemple

Pour le code en lui même, c'est plutôt simple. Par exemple, si je me sers de l'un de ceux que j'ai mis dans le tableau à gauche : Code: <div style="width: 150px; border: 5px outset grey; align-text: center;">Exemple</div> Ici, ce qui nous intéresse, c'est la partie border. Code: border: 5px outset grey; Le 5px correspond à la largeur/épaisseur de la bordure. En gros, plus le chiffre sera important, plus la bordure sera épaisse. Si, en petit malin que vous êtes, vous essayez d'enlever le < px > vous verrez que le code ne fonctionne plus. De même que si l'un de vos espaces est trop important, cela enlèvera le code automatiquement. Jusque là, rien de compliqué non ?

La partie centrale, donc le outset ici en l’occurrence, peut être remplacée par tous les noms donnés dans le tableau au-dessus suivant ce que vous souhaitez obtenir. Pour la couleur, vous devriez descendre la molette. C'est la catégorie suivante !

Petit détail subsidiaire pour les membres qui souhaiteraient la bordure seulement en-dessus ou seulement au-dessus comme j'ai fait ici. On va prendre le code pour l'exemple.

Code:

<div style="font-family:Rye; font-size:20px; width:500px; text-align:center; border-bottom:1px solid #424242;">Exemple</div>

Ici, tout le détail réside dans le border qui est suivi par le nom de la partie qu'on souhaite souligner. Il y a 4 façons de le faire :

○ Nom ○ Exemple ○ Top Exemple Bottom Exemple Left Exemple Right Exemple

Pour le coup, si vous procédez de cette manière, vous avez la possibilité de définir le style (pointillés, cadre, double, etc ...) pour chaque bordure sans tenir compte de la précédente. Pour être précis, vous pouvez définir la bordure de droite en solide et celle de gauche en pointillés. Code: <div style="width: 150px; border-right: 5px solid grey; border-left: 5px dashed grey; align-text: center;">Exemple</div> Exemple

Si on veut s'amuser, on peut également donner des bordures rondes à nos codes :

Code:

border-radius: 10px 0px 0px 10px ;

Ainsi on obtient ceci en l'intégrant au code :

Code: <div style="width: 150px; border-radius: 0px 0px 0px 0px ; border-right: 5px solid grey; border-left: 5px dashed grey; align-text: center;">Exemple</div>

Exemple

Vous pouvez changer les données chiffrées pour obtenir différents effets. Ça peut parfois être assez sympa pour varier du carré non ? ♪

Alors pour les couleurs, nous les utilisons dans beaucoup de choses. Par exemple les polices, un codage que tous le monde connaît :

Code:

[color=red]Exemple[/color]

On les utilise souvent n'est-ce pas ? Hé bien pour le coup, si vous souhaitez mettre une couleur existante dans le panel ci-dessous :



Ici sont réunies toutes les couleurs HTML (comme dans le code au-dessus). Ainsi, vous pouvez varier vos plaisir et sortir du bleu ou rouge routinier. ♥
Sinon, si on se sert des deux sites présents sous le titre, le code devient ainsi :

Code:

[color=#000000]Exemple[/color]

Ici pour le coup, c'est l'espèce de code bizarroïde que vous verrez dans les générateurs. Ce genre de code sert à donner la couleur à des Background, Bordure et police par extension ou même encore les ombres qu'on donne aux posts.

Pour l'intégrer dans un code comme celui qui a servi à construire le post ici, on fait comme ceci :

Code: <div style="width: 150px; border: 5px solid grey; background-color: #FFFFFF;">Exemple</div>

Exemple

Vous devez tenir compte de votre balise Background pour choisir la couleur de fond de votre post. Ainsi, ici, le code couleur est :

Code:

background-color: #FFFFFF;

Ensuite, vous pouvez définir l'ombre sur un post en lui donnant la couleur qui vous chante.

Code: <div style="background-color: whitesmoke; width: 300px; border: 5px solid grey; box-shadow: 0px 0px 3px #4E4E4E;"><br></div>

Dans le cas ci dessus, la balise à définir est celle-ci :

Code:

box-shadow: 0px 0px 3px #4E4E4E;

Les px correspondent à l'étendue de l'ombre. En l'état sur le code actuel, ça fera un halo de couleur. Si vous modifiez une des parties en mettant par exemple :

Code: box-shadow: 10px 0px 3px #4E4E4E;

ça donnera ça

C'est un peu plus complexe, je vous l'accorde. Mais si vous y allez pas à pas pendant la construction de votre code, vous verrez que c'est moins dur que ça ne le parait. Alors ? Pas trop mal à la tête ? On peut passer aux polices ? Chouette ! En route alors ~ ♫

Nos merveilleuses polices de forum sont parfois insuffisantes quand on souhaite personnaliser nos posts. Je vais vous expliquer comment en intégrer une nouvelle sans forcément passer par le staff pour l'installer sur le forum.

Je vous invite donc à cliquer sur le lien Google font pour faire vos petites courses avant d'apprendre comment l'intégrer à votre mise en page.

Pour obtenir le code à intégrer, vous devez cliquer sur le joli icône bleu "Add to Collection" (Ajouter dans la collection pour les non anglophones). Il va vous faire monter une espèce de petite fenêtre où vous verrez trôner votre police. Si vous souhaitez en prendre une deuxième, vous répétez l'opération et ainsi de suite.

Une fois ceci fait, la fenêtre grise propose trois boutons :

• Choose qui est l'onglet par défaut où se tiennent vos chères polices prêtes à l'utilisation.
  
• Review qui sert à obtenir un agrandissement et un visuel de Choose
  
• Use où vous allez arriver sur une autre fenêtre. C'est justement celle-ci qui nous intéresse le plus.
  

Il vous montrera une nouvelle fois vos choix mais ne vous attardez pas sur ce menu détail. Faites chauffer la roulette et descendez sur la page. Vous arriverez à un encadré gris pompeusement nommez "3. Add this code to your website:". Copiez son contenu. Vous obtiendrez un code similaire à ceci :

Code:

<link href='http://fonts.googleapis.com/css?family=Caesar+Dressing|Autour+One' rel='stylesheet' type='text/css'>
Les polices prises ici sont : Caesar Dressing et Autour One

Conservez le précieusement car de lui dépend la réussite de votre entreprise. Collez le au début/fin de votre post. Vous avez à présent fait le plus simple. Non, ce n'est pas une blague.
Maintenant, nous allons les intégrer dans le code.

Code: font-family: Nom de la police.;

La police utilisée ici est Caesar Dressing.

Petit détail notable : Si vous n'enlevez pas le "+" entre le Caesar et le Dressing, le code plante.

Aussi, si vous souhaitez définir la taille de la police, vous emploierez le code :

Code: font-size:20px;

La taille est définie par le chiffre précédent le px. C'est l'équivalent de la balise : Code: [size=20]Exemple[/size]

Je ne sais pas si vous avez fait attention, mais j'ai précédemment mentionné les couleurs sans vous montrer comment l'appliquer sur une police. Si c'est le cas, bravo, ça veut dire que vous suivez. Sinon tant pis, vous allez le voir maintenant pour conclure cette charmante partie.

Code: color: #B51313;

Comme vous l'avez deviné, le #4C577F définit la couleur de cette police.

Pour les images, on connait tous le bon vieux code

Code:

[img]Lien de l'image[/img]

Il nous a dépannés plus d'une fois. Il mérite donc bien sa retraite vous ne croyez pas ?

Saviez vous qu'avec un code, on peut définir la taille de l'image, si elle possède une bordure ou une ombre ? Je vous présente donc ce code miracle :

Code: <img src="http://img11.hostingpics.net/pics/770208tumblrmmeu30nwaU1rtr9j6o1250.gif" style="width:155px;border:2px solid #D8B6CE;">

Oui, j'emprunte cette charmante Maevis pour l'exemple. Mais là n'est pas la question. Je suis là pour vous montrer comment ça marche, pas pour faire les commentaires.

Code: <img src="LIEN DE L'IMAGE" style="width:155px;border:2px solid #D8B6CE;"> Le texte entre guillemets correspond à l'adresse de votre image. Normalement, vous ne devriez avoir aucun mal à l'apercevoir. Intéressons nous plutôt au contenu du Style.

Code: width:155px;border:2px solid #D8B6CE; Ici, le width correspond à la taille de l'image. Si vous augmentez ou diminuez les proportions, votre image en sera affectée. J'ajoute qu'elle est automatiquement recadrée. Comme ça, pas de prise de tête avec Gimp ou Photophiltre, suffit de mettre le lien et paf ça marche. La seconde partie est, oh surprise, un border. Vous vous souvenez donc qu'il sert à mettre la bordure sur cette image et que ce que je vous ai expliqué dans la partie du même nom prend effet sur la dite balise.

Courage les gars, on arrive au bout. Maintenant on va apprendre à centrer/justifier/mettre à droite/gauche un texte. Mais aussi définir une marge pour avoir des jolis posts bien organisés.

On va commencer par le plus simple, l'alignement de texte. Vous vous rappelez des traditionnels ?

Code:

[center]Exemple[/center]

[justify]Exemple[/justify]

[right]Exemple[/right]

[left]Exemple[/left]

Maintenant que vous les avez vu, on va passer à leur petits frères.

Code: <div style="text-align:right">Exemple</div>

Code: text-align:right

La fonction ici est right. Si vous voulez justifier, vous changez le mot et ainsi de suite. On obtient alors en résultat :

○ Nom	○ Exemple ○
Center	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus ornare libero, a lacinia est suscipit vel. Duis pellentesque semper mi quis suscipit. Etiam porttitor facilisis mauris sit amet congue. Mauris scelerisque arcu sit amet risus rhoncus non facilisis arcu mattis. Maecenas posuere sapien in purus laoreet vehicula. Vivamus placerat sem quis nisl condimentum molestie. Nullam ultrices, ligula ac tempor ullamcorper, nibh felis cursus justo, quis elementum nunc dolor ac mi.
Justify	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus ornare libero, a lacinia est suscipit vel. Duis pellentesque semper mi quis suscipit. Etiam porttitor facilisis mauris sit amet congue. Mauris scelerisque arcu sit amet risus rhoncus non facilisis arcu mattis. Maecenas posuere sapien in purus laoreet vehicula. Vivamus placerat sem quis nisl condimentum molestie. Nullam ultrices, ligula ac tempor ullamcorper, nibh felis cursus justo, quis elementum nunc dolor ac mi.
Left	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus ornare libero, a lacinia est suscipit vel. Duis pellentesque semper mi quis suscipit. Etiam porttitor facilisis mauris sit amet congue. Mauris scelerisque arcu sit amet risus rhoncus non facilisis arcu mattis. Maecenas posuere sapien in purus laoreet vehicula. Vivamus placerat sem quis nisl condimentum molestie. Nullam ultrices, ligula ac tempor ullamcorper, nibh felis cursus justo, quis elementum nunc dolor ac mi.
Right	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus ornare libero, a lacinia est suscipit vel. Duis pellentesque semper mi quis suscipit. Etiam porttitor facilisis mauris sit amet congue. Mauris scelerisque arcu sit amet risus rhoncus non facilisis arcu mattis. Maecenas posuere sapien in purus laoreet vehicula. Vivamus placerat sem quis nisl condimentum molestie. Nullam ultrices, ligula ac tempor ullamcorper, nibh felis cursus justo, quis elementum nunc dolor ac mi.

Ensuite, vous saurez qu'il existe des moyens simple pour faire une mise en forme des alignements, on peut ajouter une marge.

○ Nom	○ Exemple ○
Left	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus ornare libero, a lacinia est suscipit vel. Duis pellentesque semper mi quis suscipit. Etiam porttitor facilisis mauris sit amet congue.
Right	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus ornare libero, a lacinia est suscipit vel. Duis pellentesque semper mi quis suscipit. Etiam porttitor facilisis mauris sit amet congue.
Bottom	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus ornare libero, a lacinia est suscipit vel. Duis pellentesque semper mi quis suscipit. Etiam porttitor facilisis mauris sit amet congue.
Top	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus ornare libero, a lacinia est suscipit vel. Duis pellentesque semper mi quis suscipit. Etiam porttitor facilisis mauris sit amet congue.

Code:

<div style="margin-top:25px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus ornare libero, a lacinia est suscipit vel. Duis pellentesque semper mi quis suscipit. Etiam porttitor facilisis mauris sit amet congue.</div>

Le code est alors définit par le sens et l'épaisseur est choisie grâce à la valeur précédent le "px"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus ornare libero, a lacinia est suscipit vel. Duis pellentesque semper mi quis suscipit. Etiam porttitor facilisis mauris sit amet congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus ornare libero, a lacinia est suscipit vel. Duis pellentesque semper mi quis suscipit. Etiam porttitor facilisis mauris sit amet congue.

Mais, ce qui est plutôt sympa, maintenant que nous avons vu toutes les balises, je vais vous donner l'astuce que nous aimons tous : La vraie astuce du fainéant pour ne pas avoir besoin de faire les marges et l'alignement de texte. Attention attention :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus ornare libero, a lacinia est suscipit vel. Duis pellentesque semper mi quis suscipit. Etiam porttitor facilisis mauris sit amet congue. Mauris scelerisque arcu sit amet risus rhoncus non facilisis arcu mattis. Maecenas posuere sapien in purus laoreet vehicula. Vivamus placerat sem quis nisl condimentum molestie. Nullam ultrices, ligula ac tempor ullamcorper, nibh felis cursus justo, quis elementum nunc dolor ac mi.

Code: <blockquote>Exemple</blockquote>

Les codes musicaux

Comme vous le savez, on peut intégrer des vidéos dans les messages. Le code d'intégration est le suivant :

Code:

<embed width="560" height="25" scale="exactfit" quality="high" wmode="transparent" type="application/x-shockwave-flash" &theme="dark"" src=http://www.youtube.com/v/9ovcRloWGC8?version=2&hl=fr_FR&rel=0&autohide=0" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>

Pour obtenir le lien qui s'intègre dans le code, vous prenez votre lien youtube :

https://www.youtube.com/watch?v=aoiuUJ6JqWQ

Vous enlevez le "watch?" et remplacez le "=" par "/". Ce qui donne :

https://www.youtube.com/v/aoiuUJ6JqWQ

Une fois ceci obtenu, vous remplacez la partie :

Code:

" src=http://www.youtube.com/v/9ovcRloWGC8?version=2&hl=fr_FR&rel=0&autohide=0"

Nous obtenons ainsi ceci :