mettre en forme un article

METTRE EN FORME UN ARTICLE
Il y a trois méthodes pour mettre en valeur le contenu d’un article :
 Soit avec la barre typographique.
 Soit avec des raccourcis clavier.
 Soit avec des balises html.
1ère méthode : Avec la barre typographique de SPIP
L’interface d'édition de SPIP propose un accès direct à quelques fonctions de formatage de texte, mise en
page ou saisie : la barre typographique.
Survoler chaque icône : une info-bulle vous indique la fonction correspondante et en fonction secondaire
d’autres icônes dont la fonction est obtenue par leur survol à la souris.
Attention : Pour mettre en forme un texte, il faut d’abord le sélectionner.
Intertitre de niveaux 1 ou 2 ou 3
Cadre de texte
Zone de saisie
de texte
Aligner à droite
Mettre en gras
Mettre en italique
Mettre en petite majuscule
Colorer le texte
Colorer le fond du texte
Gras
Mise en évidence
d’un paragraphe
Indice
Exposant
Barré
Code informatique
Souligner le texte
Mettre en petite majuscule
sélectionné
Clignotement du texte le texte
Trait au dessus
Barré
Surlignage « fluo »
Surlignage gris
Liste à puces
Numérotation
Désindenter une liste
Indenter une liste
Mode « citation »
Mode « Poésie »
Transformer le texte sélectionné en lien hypertexte (voir leçon sur ce sujet)
Transformer le texte sélectionné en note de bas de page (voir leçon sur ce sujet)
Insérer un tableau (voir leçon sur ce sujet)
Mettre le texte entre guillemets
Insérer des caractères spéciaux
Insérer un séparateur de pages
Créer une page avec des onglets
Insérer un filet de séparation
de différents styles.
(Survoler les icônes pour choisir le
style souhaité)
Insérer des logos sur différents thèmes (Survoler les icônes pour choisir le logo souhaité)
Matériel
Consignes
Numération
Support d’écriture
Numérotation Conscience phonologique
Insérer une binette (Survoler l’icône pour choisir la binette souhaitée)
2ème méthode : Avec des raccourcis claviers
Insérer un espace insécable
L’espace insécable permet d’éviter qu’un mot ou une ponctuation soit rejeté et isolé en début de ligne. Il
permet aussi et par "détournement" de créer des espaces supplémentaires entre les blocs texte.
Pour cela on utilise le caractère tilde ~ placé avant le mot ou la ponctuation.
Exemple : pour éviter qu’un guillemet de fermeture soit rejeté à la ligne suivante on saisira ~ »
Aller à la ligne sans insérer de ligne vide
Un appui sur la touche Entrée du clavier ne donne pas un saut de ligne.
Exemple : Première ligne Entrée Deuxième ligne donnera
Première ligne Deuxième ligne
La solution est d’utiliser la combinaison des touches Shift et Entrée du clavier
Exemple : Première ligne + Entrée Deuxième ligne donnera
Première ligne
Deuxième ligne
Attention : à ne pas utiliser dans les cellules d’un tableau réalisé avec SPIP avant d’avoir écrit la 1ère
ligne de la cellule. Dans ce cas utiliser une balise HTML (voir après)
Insérer un saut de paragraphe ou sauter une ligne
 1ère solution : deux appuis successifs sur la touche Entrée du clavier.
Exemple : Première ligne Entrée Entrée Deuxième ligne donnera
Première ligne
Deuxième ligne
Remarque : plusieurs appuis successifs sur la touche « Entrée » ne permettra pas de sauter plusieurs
lignes.
Attention : à ne pas utiliser dans les cellules d’un tableau réalisé avec SPIP avant d’avoir écrit la 1ère
ligne de la cellule. Dans ce cas utiliser une balise HTML (voir après)
 2ème solution : Shift
maintenu enfoncé suivis de deux appuis successifs sur la touche
Entrée du clavier.
Exemple : Première ligne
Entrée Entrée Deuxième ligne donnera
Première ligne
Deuxième ligne
Remarque : plusieurs appuis successifs sur la combinaison de touches « Shift » + « Entrée » permettra
de sauter plusieurs lignes
Attention : à ne pas utiliser dans les cellules d’un tableau réalisé avec SPIP avant d’avoir écrit la 1ère
ligne de la cellule. Dans ce cas utiliser une balise HTML (voir après)
Placer un filet de séparation entre deux paragraphes
 1ère solution : La barre typographique (voir plus haut)
 2ème solution : tapez 4 tirets en suivant
Exemple :
Texte placé au-dessus+ touche entrée
---- + touche entrée
Texte placé en dessous + touche entrée
 3ème solution : taper du code html (voir après)
Texte placé au-dessus
donnera
Texte placé en dessous
3ème méthode : Avec du code html
La barre typographique n’est pas utilisable dans le descriptif ou le chapeau d’un article mais seulement
dans le corps de l’article ou ne permet pas d’écrire un texte aligné à droite ou justifié ou peut poser des
problèmes dans un tableau.... L’insertion de balises html permet de contourner de nombreux obstacles.
Insérer un espace insécable
Pour cela on utilise soit le code html de l’espace insécable qui est &nbsp (en anglais « no break space »)
Exemple : pour éviter qu’un guillemet de fermeture soit rejeté à la ligne suivante on saisira &nbsp »
Aller à la ligne sans insérer de ligne vide
La solution est alors d’insérer le code html <br> pour aller à la ligne
Exemple : Première ligne <br> Deuxième ligne donnera
Première ligne
Deuxième ligne
Insérer un saut de paragraphe ou sauter une ligne
 1ère solution : La solution est d’insérer deux fois le code html <br>.
Exemple : Première ligne<br><br>Deuxième ligne donnera
Première ligne
Deuxième ligne
 2ème solution : Utiliser le code html <p> et </p>
Exemple : Première ligne<p></p>Deuxième ligne donnera
Première ligne
Deuxième ligne
Remarque : pour sauter plusieurs lignes, écrire autant de fois le code que de sauts de lignes souhaités.
Attributs de caractères : police, taille, souligné, indice, exposant.
 Police des caractères:
On utilise les balises <font face=" "> et </font>
Exemples :
1. <font face="Times New Roman, Times, serif">Ceci est un texte en Times New
Roman, Times, serif</font>
2. <font face="Helvetica, Arial, sans-serif">Ceci est un texte en Helvetica-Arial-sansserif</font>
3. <font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">ceci est un texte en
Arial, Helvetica, Geneva, Swiss, SunSans-Regular</font>
4. <font face="Geneva">ceci est un texte en Geneva</font>
5. <font face="SunSans-Regular">ceci est un texte en SunSans-Regular</font>
6. <font face="Courier New, Courier, monospace">Ceci est un texte en Courier New,
Courier, monospace</font>
Donne :
1.
Ceci est un texte en Times New Roman, Times, serif
2.
Ceci est un texte en Helvetica-Arial-sans-serif
3.
ceci est un texte en Arial, Helvetica, Geneva, Swiss, SunSans-Regular
4.
ceci est un texte en Geneva
5.
ceci est un texte en SunSans-Regular
6.
Ceci est un texte en Courier New, Courier, monospace
 Taille de la police des caractères
Dans SPIP la taille de la police est définie par défaut.
La solution est d’utiliser le code html <font size=" "> et </font> (en anglais « en-dessous »)
Exemple : <font size="4">Bonjour</font> donne
Bonjour
<font size="6">Bonjour</font> donne
Bonjour
 Indice
La solution est d’utiliser le code html <sub> et </sub> (en anglais « en-dessous »)
Exemple : H<sub>2</sub>O donne H2O
 Exposant
La solution est d’utiliser le code html <sup> et </sup> (en anglais « en-dessous »)
Exemple : 3<sup>2</sup>2 donne 32
Mise en forme du texte
 Mettre du texte en italique
La solution est d’utiliser le code html <i> et </i>
Exemple : Ceci <i>est</i> un essai donnera
Ceci est un essai
 Mettre du texte en gras
La solution est d’utiliser le code html <b> et </b> (en anglais gras se dit bold) ou <strong> et </strong>
Exemple : Ceci <b>est</b> un essai donnera
Ceci <strong>est</strong> un essai donnera
Ceci est un essai
Ceci est un essai
 Souligner du texte
La solution est d’utiliser le code html <u> et </u> (en anglais souligné se dit underline)
Exemple : Ceci <u>est</u> un essai donnera
Ceci est un essai
 Encadrer du texte
Pour isoler un morceau de texte on peut le placer entre les balises <cadre></cadre>.
Exemple : <cadre> Ceci est un essai </cadre> donnera
Ceci est un essai

Aligner du texte
Pour aligner du texte on peut le placer entre les balises <p align=" "> et </p>.
Exemples :
1. <p align="left">Ceci est du texte aligné à gauche</p>
2. <p align="center">Ceci est du texte aligné au centre</p>
3. <p align="right">Ceci est du texte aligné à droite</p>
4. <p align="justify">Ceci est du texte aligné justifié Ceci est du texte aligné justifié Ceci
est du texte aligné justifié Ceci est du texte aligné justifié Ceci est du texte aligné justifié
Ceci est du texte aligné justifié Ceci est du texte aligné justifié Ceci est du texte aligné
justifié Ceci est du texte aligné justifié Ceci est du texte aligné justifié</p>
Donne :
1. Ceci est du texte aligné à gauche
2. Ceci est du texte aligné au centre
3. Ceci est du texte aligné à droite
4. Ceci est du texte aligné justifié Ceci est du texte aligné justifié Ceci est du texte aligné justifié
Ceci est du texte aligné justifié Ceci est du texte aligné justifié Ceci est du texte aligné justifié
Ceci est du texte aligné justifié Ceci est du texte aligné justifié Ceci est du texte aligné justifié
Placer un filet de séparation entre deux paragraphes
Pour placer un filet de séparation entre deux paragraphes on utilise la balise <hr size=" " witdth=" ">
Exemples :

<hr size="4" width="100%"> donne :

<hr size="2" width="40%" align="center"> donne :

<hr size = "1" width="40%" align="left"> donne :

<hr size = "1" width="40%" align="center"> donne :

<hr size = "1" width="40%" align="right"> donne :

<hr noshade size="2" width="100%"> donne :
Aligner un objet (image, document, ...)
Il peut arriver que l’affichage des images ou des icônes des fichiers joints ne soit pas satisfaisant au niveau
de l’alignement.
La solution est là aussi d’utiliser le code html
 Pour centrer un objet on utilisera les balises <center> et </center>
Remplacer alors <imgXXX|center> par <center>docXXX</center>
 Pour aligner l’objet à droite on utilisera <right> et </right>
 Pour aligner l’objet à gauche on utilisera <left> et </left>