Utiliser les raccourcis

Cours précédent :Choisir la rubrique << Le programme >> Cours suivant :Les espaces et le code HTML

 Le cours

Un article peut être mis en forme grâce au porte-plume. Cet outil qui permet d’enrichir et de structurer le texte (intertitre, gras, listes, ...) est un plugin (les cours n°30 et 31 entreront un peu plus dans les détails). Il permet l’affichage d’une barre d’outils spécifique à l’édition.

Pour utiliser cette barre, commencer par sélectionner le texte à mettre en forme puis cliquer sur l’un des boutons de la barre : italique, gras, titre, lien hypertexte...). Un code est alors affiché autour du texte sélectionné (qui n’est plus sélectionné d’ailleurs).

Voici un exemple : dans le texte saisi, l’expression "coreg   Centre-Val de Loire" a été sélectionné puis mise en gras [1]. Le code obtenu affiche des doubles accolades encadrant l’expression. Les raccourcis clavier de la plupart des traitements de texte fonctionnent aussi. Rappel : pour mettre en gras, [Ctrl]+ [B] après sélection.

Texte sélectionné, la souris survole le bouton "{gras}".

Le résultat (code)

Il est possible d’utiliser l’onglet "voir" pour apercevoir l’aspect qu’aura le texte une fois publié.

Le résultat qui sera affiché sur le site public.

Une fois publié, le texte sera présenté selon la charte graphique du site public.

A gauche, le texte codé ; à droite dans l’éditeur de l’espace privé), le texte affiché dans l’espace public.

C’est ce code qui est un raccourci de mise en forme. Il est possible de taper directement le code quand on le connaît mais les boutons du porte-plume sont bien pratiques.

 Notes :

• Attention : les codes utilisent quelquefois les mêmes caractères. L’exemple le plus significatif est la création des titres de paragraphes, code "{{{" et "}}}", la mis en gras, code "{{" et "}}", et la mise en italique, code "{" et "}". Pour les distinguer, il est important d’ajouter une espace : code gras et italique "{{ {" et "} }}" mais dans ce cas, il faut bien s’assurer que l’un (l’italique ici) est bien à l’intérieur de l’autre (le gras ici). C’est là que l’outil du porte-plume est utile parce qu’il fait ça tout seul, " comme un grand " [2].
• Ce sont les administrateurs qui gèrent la charte graphique (généralement, seulement le web-master qui peut échanger avec les autres administrateurs).
• La charte graphique définit la présentation générique du site : c’est ce qui fait qu’un site est immédiatement reconnaissable (si sa charte graphique est stable : c’est le cas du site du coreg   Centre-Val de Loire).

Le cours n°34 (Liste des raccourcis typographiques, le dernier cours) est un memo présentant les raccourcis typographiques disponibles

Complément d’informations : SPIP   ne propose pas d’éditeur WYSIWYG qui permet au rédacteur, comme dans un traitement de texte, de choisir sa police, sa taille... et de voir immédiatement le résultat. L’objectif est de préserver la cohérence entre tous les articles. Comme dans un journal papier, les articles ne changent pas de police ou de couleur d’un article à l’autre. SPIP   préserve ainsi le texte pour optimiser sa présentation (généralement affichable sur n’importe quel support) et sa pérennité (on peut modifier la présentation de tout le site sans reprendre tout les contenus, ce qui serait très fastidieux [3]).

 Références

• Exemple d’usage des raccourcis typographiques (article un peu "vieux" -2002- et pédagogiquement pas très facile à lire).

 Exercices

• dans le bac à sable, créer un article, taper du texte et utiliser les boutons de mise en forme.
• Reproduire dans un article, le texte suivant : "Maintenant, je sais écrire en italique et en gras. Je sais aussi écrire un mot en rouge et un autre sur fond bleu clair. Je sais même écrire une expression en italique contenant des mots en gras et d’autres en rouge !"

 Auto-évaluation

Quel est le code obtenu pour mettre un mot ou une expression en gras avec Spip ?
Quel est le code obtenu pour mettre une phrase en italique avec Spip ?

Cours précédent :Choisir la rubrique << Le programme >> Cours suivant :Les espaces et le code HTML