Grand titre
Titre moyen
Petit titre
Une question que peut se poser le lecteur, ou plus générale, qui amène l'explication qui suivra.
- Code:
<div class="question"><span class="icone_question"></span>Contenu</div>
Une information complémentaire importante pour la suite, une précision, le signalement d'une donnée à retenir.
- Code:
<div class="information"><span class="icone_information"></span>Contenu</div>
Le signalement de quelque chose de très important, une donnée dont il faut se méfier, une erreur courante, une erreur à éviter à tout prix, un avertissement...
- Code:
<div class="attention"><span class="icone_attention"></span>Contenu</div>
Le résumé des points importants qui ont été vu précédemment, ce qu'il y a à retenir, ou la conclusion.
- Code:
<div class="resume"><span class="icone_resume"></span>Résumé / conclusion.</div>
Ceci est un paragraphe de cours (cursus, tutoriel...) normal, le bloc de lien ci-contre indique des sujets ou des sites complémentaires, utiles (ressources ou autres) ou simplement conseillés pour aller plus loin dans le domaine abordé. Ce code de liens utiles doit se placer juste avant le paragraphe concerné, il flottera à sa droite. Le paragraphe l'accompagnant doit être assez conséquent pour que le cadre ne déborde pas sur ce qui suit, mais vous pouvez aussi ajouter des sauts de ligne ou mettre un "clear: both" (pour les codeurs) à la fin du paragraphe.
- Code:
<div class="bloc_liens"><span class="icone_liens"></span>
<a href="#">Lien utile 1</a><a href="#">Lien utile 2</a><a href="#">Lien utile 3</a>
</div>
Ce cadre contient les explications de l'élément abordé juste avant. Généralement, il sera utilisé après un bloc "code" classique (balises bbcode) pour en détailler/expliquer certains points. Il peut cependant être utilisé pour autre chose, une manipulation en graphisme par exemple...
- Code:
<div class="explication_code"><span class="icone_explication"></span>Contenu.</div>
Cadre d'exemple, utilisé donc pour donner un exemple ou une illustration des propos donnés plus haut. Il peut s'agir de n'importe quel domaine.
- Code:
<div class="exemple">Ceci est un exemple illustrant les propos donnés.</div>
Image petite flottant à droite : class="illu_droite"
Image petite flottant à gauche : class="illu_gauche"
Image moyenne centrée : "illustration"
Précédent
Suivant
- Code:
<a href="#" class="paginleft">Précédent</a>
<a href="#" class="paginright">Suivant</a>