Code:

<blockquote><blockquote><div style="width: 350px; text-align: justify; font-size: 11px;"><center><img src="http://img4.hostingpics.net/pics/394908ArukaKiruaLien.png" width="250"><br/><iframe title="YouTube video player" width="250" height="25" src="http://www.youtube.com/embed/tcBBNB5JTOQ" frameborder="0" allowfullscreen></iframe></center><br/>[b]<div style="font-size: 22px; font-family: Georgia MT Light; font-style: bold; color: #33D5F0; letter-spacing: -1pt; text-transform: lowercase; text-shadow: 0px 0px 2px #000; margin-top:-10px; ">[size=24]Pseudo ou autre ici [/size][/b]</div>[i][font=Georgia]« Citation ici. ~ Auxerunt haec vulgi sordidioris audaciam, quod cum ingravesceret penuria commeatuum, famis et furoris inpulsu Eubuli cuiusdam inter suos clari domum ambitiosam ignibus subditis inflammavit. »  [/font][/i]
</div></div></blockquote></blockquote>

Pour ce code, on ira réellement étape par étape parce qu'il est assez simple, mais il y a beaucoup d'élément. Comme il est assez vieux, il y a quelques traces de BBCode, dans les prochains, j'essayerai de mettre vraiment que du html ^^.

Donc comme d'habitude, on commence avec l'image !

Code:

<center><img src="http://img4.hostingpics.net/pics/394908ArukaKiruaLien.png" width="250"><br/>

Sur ce code, il n'y a que le src="...." et le width="...px" d'intéressant. Comme pour les codes précédents, il faut mettre le lien de l'image entre les guillemets du src="...", et le width sert uniquement à choisir une taille pour la largeur de l'image. Dans l'exemple, elle mesure 250px. Je trouve que c'est la bonne taille et que ça donne un aspect très mignon quand c'est assez petit. ^^

Ensuite, on a le code de la vidéo qui sert aussi de lecteur de musique puisqu'il est à peine assez grand pour qu'on puisse distinguer une image :

Code:

<iframe title="YouTube video player" width="250" height="25" src="http://www.youtube.com/embed/tcBBNB5JTOQ" frameborder="0" allowfullscreen></iframe>

Ce code fonctionne à peu près comme celui qu'a posté Hisakki mais il est légèrement plus compliqué et moins beau peut-être... Je n'ai pas essayé de le remplacer par le sien, mais si vous le voulez vous pouvez trouver son code [Seuls les administrateurs ont le droit de voir ce lien], je me permets de dire que je trouve qu'il a super bien expliqué, en plus ^^. Demandez lui juste la permission avant de changer, parce que c'est pas forcément très gentil de faire ça =3.
Mais pour en revenir à notre pas-à-pas, cette partie du code est ce qu'on appelle un iframe, une jolie petite chose qui simplifie beaucoup la vie et qu'on étudiera plus en profondeur avec le prochain pas-à-pas parce qu'il n'est pas très intéressant ici. A nouveau, le width="...px" sert à définir une largueur, le mieux, c'est de mettre exactement là même que pour l'image, et le height="...px" sert à définir la hauteur. Très honnêtement, je vous conseille de laisser le 25px, sinon la vidéo sera trop grande et elle apparaitra complètement.

"tcBBNB5JTOQ" est la partie du lien qui mène vers la vidéo, ici c'est Deeper Deeper du groupe One Ok Rock ( parce que j'adore cette chanson ) pour changer le lien de la vidéo, dans le code, repérez "/embed/tcBBNB5JTOQ" et changez tous ce qui est après "/embed/"
et avant la fermeture des guillemets. C'est à dire, sur youtube, de prendre ce qui est ici "watch?v=tcBBNB5JTOQ" et de ne garder que ce qui est après le "v=" ^^.

Nous passons donc au texte :

Code:

<div style="width: 350px; text-align: justify; font-size: 11px;"><div style="font-size: 22px; font-family: Georgia MT Light; font-style: bold; color: #33D5F0; letter-spacing: -1pt; text-transform: lowercase; text-shadow: 0px 0px 2px #000; margin-top:-10px; ">[b][size=24]Pseudo ou autre ici [/size][/b]</div>[i][font=Georgia]« Citation ici. ~ Auxerunt haec vulgi sordidioris audaciam, quod cum ingravesceret penuria commeatuum, famis et furoris inpulsu Eubuli cuiusdam inter suos clari domum ambitiosam ignibus subditis inflammavit. »  [/font][/i]
</div></div>

" div style="width: 350px; text-align: justify; font-size: 11px;" " qui est en réalité au tout début du code, c'est tout simplement la formatation du texte. le width impose au texte de ne pas être sur une ligne plus large que la valeur entrée, le 'text-align: justify' impose au texte de rester justifier, ce qui rend forcément plus jolie que quand il ne l'est pas et enfin le "font-size:...px" sert à donné la taille du texte.
"div style="font-size: 22px; font-family: Georgia MT Light; font-style: bold; color: #33D5F0; letter-spacing: -1pt; text-transform: lowercase; text-shadow: 0px 0px 2px #000; margin-top:-10px;" Même combat, le font-size sert à donner une taille au texte alors que le font-family est la police utilisée. font-style: blod sert à mettre le texte en gras et color:#... sert à donné une couleur à votre texte. text-shadow: 0px 0px 2px #000 sert à mettre une ombre à votre texte, choisir son épaisseur et sa couleur. Cette partie du code concerne le pseudo. :3
Pour la suite, c'est simplement du BBCode, je pense que vous savez déjà vous en servir, mais si besoin, n'hésitez pas à me le dire !