Mise en forme du texte

La mise en forme du texte apporte de la clarté
et de la lisibilité dans les présentations.

Les titres

On peut intégrer jusqu’à 6 niveaux de titres sur une page. Le titre de type « h1 » est le plus important : c’est le titre de la page (Il n’y en a qu’un par page). Pour le référencement, il est primordial de garder une arborescence logique des titres : un « h3 » doit être placé sous un « h2 » par exemple.

Titre de niveau h1

Titre de niveau h2

Titre de niveau h3

Titre de niveau h4

Titre de niveau h5
Titre de niveau h6

Les paragraphes

Les paragraphes de textes peuvent avoir des tailles de texte différentes selon l’importance qu’on veut leur donner visuellement. En terme de « référencement » le fait d’avoir 2 paragraphes différents (avec une taille de caractère plus grande par exemple) ne change rien : un paragraphe reste un paragraphe.

Paragraphe classique

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at magna ipsum. Sed sed pharetra urna. Proin dapibus exemple de lien efficitur erat.  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nibh leo luctus sed quam in porttitor sodales elit.

Bloc sur fond de couleur

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at magna ipsum. Sed sed pharetra urna. Proin exemple de lien dapibus efficitur erat.  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nibh leo luctus sed quam in, porttitor sodales elit.

Les listes

Une liste non-ordonnée est une liste d’éléments qui sont généralement affichés après une puce (par défaut ronde mais personnalisable).
Une liste ordonnée est une liste d’éléments précédés d’un indicateur ordinal (un nombre ou une lettre).

Liste non ordonnée

  • Et prima post quam ut dictum estab,
  • Inter has ruinarum varietates,
  • Et quoniam mirari posse peregrinos,
  • Quibus ita sceleste patratis cruore,
  • Sed quid est quod causa maxime homines.

Liste ordonnée

  1. Et prima post quam ut dictum estab,
  2. Inter has ruinarum varietates,
  3. Et quoniam mirari posse peregrinos,
  4. Quibus ita sceleste patratis cruore,
  5. Sed quid est quod causa maxime homines.

Bloc sur fond clair

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at magna ipsum. Sed sed pharetra urna. Proin dapibus efficitur exemple de lien erat.  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nibh leo, luctus sed quam in, porttitor sodales elit.

Bloc sur fond sombre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at magna ipsum. Sed sed pharetra urna. Proin dapibus efficitur erat.  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus exemple de lien mus. Mauris nibh leo, luctus sed quam in, porttitor sodales elit.

Bloc avec un contour

Lorem ipsum dolor sit amet consectetur adipiscing elit. Aenean at magna ipsum. Sed sed pharetra urna. Proin dapibus efficitur erat.  Cum sociis natoque penatibus et magnis dis parturient montes,exemple de lien nascetur ridiculus mus. Mauris nibh leo, luctus sed quam in, porttitor sodales elit.

Intégration des images

2 possibilités pour présenter des images : l’image fixe ou le slider.

Les images fixes

Dans les exemples suivants, la même image s’adapte à la largeur de la colonne dans laquelle elle est intégrée.

Slider

Exemple de slider avec effet “pulse”

Un slider est un élément graphique permettant le défilement de plusieurs images. Le slider est aussi appelé diaporama ou carrousel.  Il convient de respecter deux règles essentielles afin que le message véhiculé par le slider soit suffisamment clair pour le visiteur :

Ne pas faire défiler les images trop rapidement. Les visiteurs doivent avoir le temps de bien visualiser l’image et de lire le texte qui y est associé.
Ne faire passer qu’un seul message par image.