Commençons petit, pour atteindre des sommets.

Aujourd'hui, nous allons voir comment réaliser une simple petite bulle de texte. Voici le résultat que l'on souhaite atteindre :

Le but de cette bulle de texte ? A ma connaissance, elle n'en a aucun. Mais elle est jolie. 

Aller ma petite loutre des mers, au travail ! ♥ ~

I/ Rappel rapide

Comme nous l'avions déjà vu, le HTML repose sur des balises. Nous allons utiliser la première balise que je vous avais présenté dans cet article, le "div".

Pour rappel, voici comme une balise HTML se présente :

<div style="propriété: valeur;">Texte dans la balise.</div> Texte hors de balise.

II/ Présentation du code

Nous arrivons au point que vous attendez tous : à quoi ressemble le code ?

Le voici :

<div style="background: cyan; border: 2px solid #000; height: 25px; width: 150px; padding: 6px; text-align: center; color: #000; border-radius: 30px; margin-left: 280px; margin-right: 280px; margin-bottom: 5px;">
<p>Bulle de texte.</p>
</div>

Pour le moment, ce n'est pas forcément très clair, bien que certains de ces points aient été déjà vu, mais on va revenir dessus. C'est l'heure de décortiquer ce beau monde coloré.

III/ Analyse des composants

En bleu clair et en bleu foncé, on retrouve les balises. La balise <p> est celle qui forme le texte, mais j'en parlerais plus tard, dans un sujet forum. 

1. background: cyan; Aka Background → Fond, cette propriété permet d'affecter un fond de couleur à l'objet souhaité. Sans cette propriété, vous auriez par défaut le fond de votre page. Ici un blanc qui va légèrement sur du bleu.
   Voyons ce que donnerais notre bulle de texte sans cette propriété :
   
   

   Bulle de texte.

   
   On applique ensuite la valeur à Background. Ici j'ai choisi "Cyan". Parce que j'avais la flemme de me creuser la tête pour trouver un code de couleur, même si c'est moins précis.
   
   
2. border: 2px solid #000 Aka Border → Bordure. C'est ce qui permet de créer la petite bordure de la bulle de texte, qui créer la séparation entre le bouton et la page du blog.
   
   

   Bulle de texte.

   Moins fluide et moins joli hein ?
   
   OK, passons aux valeurs associées à cette propriété :
   
   border: 2px solid #000 → C'est la taille de la bordure. Généralement, 2px, c'est bien, pas trop fin, et pas trop voyant, mais vous pouvez faire variez la taille à envie.
   border: 2px solid #000 → C'est le style de trait affecter à cette bordure. La valeur "solid" affecte un trait continu à la dite bordure.
   
   Mais il en existe d'autres ! Un petit tour → par ici ← t'apprendra tout dessus ♥~
   
   border: 2px solid #000 → C'est la couleur de la bordure. Ici le #000 est le code pour la couleur noire, mais tu peux bien sûr remplacer ce dernier par n'importe quel code couleur ou par n'importe quel nom de couleur tant qu'il est en anglais.
   
   
3. height: 25px; width: 150px; Aka Height & Width, que l'on va traiter ensemble parce que.. bah c'est pareil. Ou presque. Tendis que Height va gérer la hauteur de votre objet, Width gèrera sa largeur. Ici nous avons donc une bulle d'aide de 25px de hauteur et 150 px de largeur, à changer en fonction de la taille maximale de votre texte, parce que si la phrase est trop grande ça donne ça :
   
   

   Et avouons-le, c'est vraiment pas joli !

   
   Mais il suffit d'adapter soit la hauteur, sois la largeur pour que tout rentre dans l'ordre ;p
   Cela dit... y a un truc ! Eh oui, parce qu'on ne va pas s'embêter à changer la hauteur ou la largeur de nos objets à chaque fois que ça ne va plus quand même ! Pour cela il suffit d'affecter la valeur "auto" à la place du nombre de pixels. Exemple : height: auto; width: 150px;
   
   

   Et avouons-le, c'est vraiment plus joli !

   Tour de magie, la taille s'adapte automatiquement ! En revanche, dans le cas de ce bouton, ça ne marche pas pour Width
   
   

   Et avouons-le, c'est vraiment pas joli !

   
   
   Pourquoi ? Eh bien disons simplement que
   
   
   Nan en vrai il y a une raison, et une très bonne, on la verra un peu plus bas. Pour le moment, comprenez que cette règle est réciproque mais que dans le cas de cette bulle d'aide, c'est mieux de le faire avec la hauteur, on verra pourquoi à la fin.
   
   
4. Allez hop on enchaine ! padding: 6px; Aka Padding. Le padding, c'est la marge interne de l'objet, c'est grosso modo ce qui permet au texte de ne pas être coller au bords à l'intérieur de la bulle, voici ce que donne d'ailleurs cette dernière, si on enlève cette propriété :
   
   

   Bulle de texte.

   
   Ici, notre texte n'est pas complètement collé au reste, c'est grâce aux propriétés "height" et "width" qui donne une taille définie de l'objet, mais sans le padding, notre bulle de texte est moins aérée.
   
   
5. text-align:center; Aka text-align. Cette petite propriété nous permet d'aligner le texte de la bulle comme nous le souhaitons. Par défaut, le texte sera toujours à gauche, aussi si on souhaite le formater autrement, il faut le préciser dans le code. Il existe plusieurs formes de textes différentes :
   - Justify
   - Left (gauche)
   - Right (droite)
   - Center (centre)
   
   
6. color: #000; Aka Color. Ce petit point décide de la couleur du texte. Il suffit de remplacer ce qui est après le hashtag par le code couleur de votre choix ♥
   
   
7. border-radius: 30px; Aka Border-radius. Ce point de code là définie la rondeur des bords de votre bulle de texte, plus le px est élever, plus la bulle de texte est ronde. Sans cette propriété, notre bulle de texte serait en réalité un rectangle de texte.
   
   

   Rectangle de texte.

   
   
   
8. Finalement, il ne reste que margin-left: 280px; margin-right: 280px; margin-bottom: 5px; Aka Margin. Margin sert à poser des marges entre l'objets et les autres éléments de la page. On peux utiliser une commande générale : margin: 10px, l'objet seras alors à 10px du reste de la page :
   
   

   Bulle de texte.

   
   On peut alors décider de conditionner les marges point par point. La marge de gauche margin-left, la marge de droite margin-right, ces deux-là me permettent de centrer mon objet sur la page si je le désire, ou au moins de l'éloigner du bord. La marge de haut margin-height et la marge du bas margin-bottom me permettent d'éloigner ma bulle de texte du reste.. du texte. Voici ce que donnerais ma bulle sans ces marges du bas :
   
   

   Bulle de texte.

   Ma bulle de texte est collé à cette phrase, c'est pas esthétique.
   
   Bien. Ceci pour expliquer l'utilité des marges. Mais cela dit, il faut faire attention aux marges choisies ! Ici, mes marges m'empêche de définir une largeur automatique à ma bulle de texte. Parce qu'elle est automatiquement à 280 de la gauche et de la froite, la valeur "width: auto;" n'a pas d'effet. Si je ne met pas de marge en revanche, ma valeur fonction très bien :
   
   

   Et pour preuve, voici une longue phrase

   
   Vous verrez que le soucis de mettre la largeur en taille automatique, c'est que la taille de la bulle s'adapte en fonction de votre page et non pas de votre texte.

Et voilà on à fait le tour de toutes les propriétés qui nous permettent de créer cette petit bulle de texte ! Je ne vous est pas perdu en chemin ? J'espère bien que non. En tout cas, si tu as réussi à suivre, c'est que je suis pas trop mauvaise pour expliquer et que l'on pourra donc passer à des principes plus compliqués.

Bien sûr, je pourrais simplement donner des codes en pagailles et vous les utiliseriez alors comme vous le voulez, mais c'est quand même plus drôle de savoir faire par soi-même, non ?

IV/ Essayer vous même ♥

Il ne vous reste plus qu'une chose à faire : essayer de faire votre propre bulle de texte avec les valeurs de vos rêves.

J'espère que ce tutoriel vous aura été utile, ou vous aura au moins mis plus à l'aise dans le monde du HTML. N'hésitez pas à me faire des retours, surtout s'il faut que j'adapte mes explications. Sur ce, je vous dit à la prochaine ♥~