Tu aimerais faire une fiche de liens sublimissime pour épater tout le monde… mais le langage HTML te semble plus complexe que du chinois ? Voici quelques explications qui te permettront d’en comprendre les bases. Avec ça, tu devrais être ensuite plus ou moins capable de bidouiller quelque chose de sympa ;)

Travaillons sur cette mise en page:

Ton Titre
[Vous devez être inscrit et connecté pour voir cette image]
© FoX

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat..

L’intérêt du HTML est qu’il permet d’embellir les messages grâce à des propriétés qui se placent entre les balises :

Code:

 <div style="PROPRIÉTÉS">ton texte ici</div> (pour les généralités : textes, images, fonts, etc.)
<font style="PROPRIÉTÉS">ton texte ici</font> (pour les textes uniquement)

Ce que tu dois déterminer en premier… ce sont tes contours et ton fond. Disons que tu voudrais un fond blanc. Dans ce cas tu utiliseras : background-color: white; Il te faudra le coupler à d’autres codes pour le rendre plus précis et, ainsi, te rapprocher de ce que tu as en tête. Par exemple, tu peux gérer la largeur grâce à ce code : width: ...px; Étant donnée la largueur du forum, le mieux serait d’éviter de dépasser 550 pixels. Ce qui te donnera donc : width: 550px; Quant à la hauteur, il serait difficile de la déterminer dans le cas des fiches de présentation… donc soit tu mets : height: auto; pour qu’elle s’adapte à ton message, soit tu ne mets tout simplement rien.

Pour tes contours, tu ajouteras : border : …; Là tu as plusieurs choix à faire : quelle sera la largeur de ton contour ? Sa couleur ? Est-ce que tu veux une ligne pleine (solid), double (double), des points (dotted), des tirets (je m’en souviens plus ><).. ? Ton code deviendra alors :
- border: 5px solid seagreen; pour un contour de 5pixels, en ligne pleine, et de couleur seagreen;
- border: 5px dotted seagreen; pour des points de 5pixels et de couleur seagreen;
- etc.
Tu peux choisir de personnaliser ta bordure, par exemple en l’appliquant aux côtés de ton message sans rien mettre en haut et en bas. Dans ce cas tu modifies de cette façon :
border-top : 0px; border-bottom: 0px; border-left: 5px solid seagreen; border-right: 5px solid seagreen;
Une fois ces propriétés entrées dans ta balise, tu obtiens :

Code:

<center><br> (pour centrer et mettre un espace)
<div style="background-color: white; width: 550px; border-top : 0px; border-bottom: 0px; border-left: 5px solid seagreen; border-right: 5px solid seagreen;">ton texte ici</div></center>

À l’intérieur de cette première balise, tu peux en ajouter une multitude d’autres selon la même idée. Le tout est de connaître les propriétés. Tu trouveras {[Vous devez être inscrit et connecté pour voir ce lien]} un listing non exhaustif qui sera édité de temps à autres.

Voyons maintenant comment concocter un beau… titre.
Tu souhaites peut-être
Pour modifier ton écriture, tu peux utiliser les codes suivants (toutes les couleurs et les tailles sont modifiables, selon tes préférences) :
color: seagreen; pour la couleur de l’écriture
font-family: Georgia; pour le style d’écriture
font-size: …px; pour la taille d’écriture. L’intérêt, c’est qu’il est ainsi possible de dépasser la limite de 29px qu’imposent les balises

Code:

[size=…][/size]

Ce qui donne :

Code:

<font style="color: seagreen; font-family: Georgia; font-size: 40px;">Ton Titre</font>

Une fois complété, le code de tout à l’heure devient donc :

Code:

<center><br> (pour centrer et mettre un espace)
<div style="background-color: white; width: 550px; border-top : 0px; border-bottom: 0px; border-left: 5px solid seagreen; border-right: 5px solid seagreen;"> <font style="color: seagreen; font-family: Georgia; font-size: 40px;">Ton Titre</font>
[img]http://img714.imageshack.us/img714/7176/30st8.png[/img]
© FoX
</div></center>

Pourquoi ne pas rajouter une barre de défilement, à présent ? Parce que la description du personnage peut être longue…
overflow: auto; width: …px; height: …px; Comme tout à l’heure, il faut choisir une valeur pour la largeur et la hauteur. Le problème avec cette propriété est que quand le texte a une ombre, on se retrouve avec une barre de défilement horizontale en plus de la barre verticale. Pour parer au problème, tu peux imposer des marges à ton texte :
margin: …px;
padding: …px;

Ce qui donne :

Code:

<div style="overflow: auto; width: 450px; height: 200px;"><div style="padding-left: 4px; padding-right: 6px;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</div>

Et voilà le résultat de tes efforts :

Code:

 <center><br>
<div style="background-color: white; width: 550px; border-top : 0px; border-bottom: 0px; border-left: 5px solid seagreen; border-right: 5px solid seagreen;"> <font style="color: seagreen; font-family: Georgia; font-size: 50px;">Ton Titre</font>
[img]http://img714.imageshack.us/img714/7176/30st8.png[/img]
© FoX

<div style="overflow: auto; width: 450px; height: 200px;"><div style="padding-left: 4px; padding-right: 6px;">[justify] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat..[/justify]</div></div>
<br></center>

ATTENTION à toujours bien refermer toutes les balises!


Des questions ou commentaires? Si quelque chose te semble faux ou difficile à comprendre, n’hésite pas à le faire remarquer à la suite (: