mettre en forme un article
Transcription
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   (en anglais « no break space ») Exemple : pour éviter qu’un guillemet de fermeture soit rejeté à la ligne suivante on saisira   » 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>