Modèle de mise en page

<h1>Titre 1 : 1er niveau de titre</h1>

Le titre de la page par défaut. Ceci est un lien vers l’accueil

<h2>Titre 2 : 1er niveau de sous-titre</h2>

<h3>Titre 3 : 3e niveau de titre</h3>

<h4>Titre 4 : résumé de la page et 4e niveau de titre</h4>

<h5>Titre 5 : 5e niveau de titre</h5>
<h6>Titre 6 : 6e niveau de titre</h6>

Modèle de page rédigée et mise en forme

>> Voir la page

Résumé (Titre 4) : La mise en forme d’une page web aide l’internaute à lire sur écran.

La hiérarchisation du contenu sur chaque page, indispensable à un bon référencement, passe par un résumé, des titres, listes à puces, texte en gras, citation, liens internes et externes…</h4

Les niveaux de titres à utiliser sur chaque page :

  • Titre 4 pour le résumé

  • Titre 2 pour la 1ère utilisation de sous-titre.

Titre 2 : 1er niveau de sous-titre

Chaque titre et portion de contenu doivent pouvoir être lus de façon autonome, indépendamment du contenu qui précède. C’est le style “Lecture rapide” ou “stabilo”. Un titre commence par une seule majuscule et n’est jamais ponctué sauf par un ! ou ?
Sélectionner avec la souris le texte à mettre en forme, puis sélectionner un style dans la liste Paragraphe ou cliquer un pictogramme.

NB : Titre 1 : ce style est déjà utilisé par défaut par le titre de la page, à ne pas utiliser.

Titre 3 : 3e niveau de sous-titre

Titre 4 : résumé de la page et 4e niveau de sous-titre

Ce texte de deux-trois lignes résume la page et signale à l’internaute en un clin d’oeil qu’il est sur la bonne page et qu’il peut y rester et la lire.

Intertitre 5 : 5e niveau de sous-titre
Intertitre 6 : 6e niveau de sous-titre

Paragraphe : texte normal

Préformaté (code informatique)
Aller sur l'onglet en haut à droite Texte et mettre le code entre balises <pre>.

Texte

Cette phrase montre du texte gras et italique, barré pour une modification de dernière minute.

Citation ou extrait pour illustrer une page en un clin d’oeil

Comme ils sont beaux les pieds du messager de la Bonne Nouvelle

Isaïe 52, 7

Listes

Liste à puces

Toute énumération est à transformer en liste à puces.

  • Premier item
    • Premier item
      • Premier item
      • Second item
    • Deuxième item
    • Troisième item T
    • Quatrième item
  • Deuxième item
  • Troisième item

Liste numérotée

  1. Premier item
    1. Premier item
      1. Premier item
      2. Second item
    2. Deuxième item
    3. Troisième item
    4. Quatrième item
  2. Deuxième item
  3. Troisième item

Augmenter l’indentation d’une liste ou paragraphe

Diminuer l’indentation

Aligner du texte

Une page web présente le texte serré à gauche par défaut (pas justifié) pour le rendre plus facile à lire à l’écran.

à gauche

centré

à droite

Faire un lien

  1. Ouvrir un nouvel onglet de votre navigateur (CTRL + N) et aller sur le site sur lequel vous voulez faire un lien
  2. Copier-coller son adresse web dans le champs url (CTRL + C)
  3. Sur votre page, taper l’intitulé de votre lien, ex : Lien vers Bonnenouvelle.fr
  4. Sélectionnez ce texte avec votre souris et cliquer le pictogramme Chaînon
  5. Collez l’adresse web copiée (CTRL + V)
  6. Validez par un clic sur la flèche bleue

Lien vers un site externe

  1. Cliquer la roue crantée
  2. Cocher Ouvrir le lien dans un nouvel onglet
  3. Cliquer Ajouter un lien

Lien vers une page interne du site (déjà créée)

  1. Cliquer la roue crantée
  2. Sélectionner la page dans la liste
  3. Cliquer Ajouter un lien

Supprimer le lien

Cliquer le pictogramme Chaînon ouvert

Annuler (ou touches CTRL + Z) / Rétablir

Mode d’écriture sans distraction

Texte

Coller en texte

Colle du texte Word sans sa mise en forme.

Nettoyer le formatage

Nettoie le code html lors d’une copie de texte déjà mis en page sur Word qui peut gêner le référencement du contenu.

Caractère spécial

Voici un indice : H2O et un exposant : E = MC2.

Ligne horizontale

Pour scinder des contenus de nature différente ou marquer le passage à une autre partie dans une page longue.


Saut de page

Scinde une page longue en plusieurs parties en ajoutant une balise !--nextpage--
  1. Insérer 
  2. Insérer la balise Lire la suite