Tous les potentiels de la mise en forme d’un article
Composition d’un article

Tous les potentiels de la mise en forme d’un article

Sous-titre de l’article

Comment intégrer des titres et intertitres, une liste à puces, des photos ou des vidéos, un lien vers un site Internet ou un autre article du site, comment mettre en valeur un paragraphe spécifique... Cet article vous montre toutes les possibilités qui s’offrent à vous lors de la rédaction d’un article. Il vous donne en outre plein de conseils et astuces. En allant dans la partie administrateur, vous comprendrez l’utilisation des balises qui permettent la mise en forme des différents éléments. Merci à Jacques Pyrat d’avoir conçu en grande partie cet article

Titre du logo - © Arnaud Galy
Titre du logo
© Arnaud Galy

Le texte préexiste à la mise en page

C’est peut-être une évidence, mais pour mettre en page un texte, il faut que le texte existe.

Dans le cas de SPIP, ça veut dire qu’il vaut mieux (au moins dans un premier temps) :

  • disposer de tout le texte sans aucun raccourci typographique,
  • sauter une ligne à chaque changement d’idée (ce qui donne un changement de paragraphe, voire un titre),
  • faire un retour à la ligne avant chaque élément d’une énumération.

Ce n’est qu’ensuite que les raccourcis typographiques de SPIP pourront être appliqués avec discernement.

Distinction entre paragraphes et caractères

Certains attributs typographiques ne peuvent s’appliquer qu’à des paragraphes entiers, d’autres doivent être appliqués à des caractères dans le même paragraphe.

Dans la Barre Typographique de SPIP, les attributs de caractères forment le premier groupe sur la gauche, les attributs typographiques de paragraphes le deuxième.

Paragraphes

Un paragraphe dans SPIP est précédé d’une ligne vide et suivi d’une ligne vide [1].

Certains attributs sont un peu spéciaux :

  • Poésie <poesie>Le texte de la poésie, sur plusieurs lignes, les retour à la ligne simple étant pris en compte</poesie>
Le geai gélatineux gégnait dans le jasmin
Voici mes infins le plus beau vers de la langue française.
  • Cadre <cadre>Texte qui apparaitra dans une zone de formulaire facilitant le copier/coller [2]</cadre>

Citation

Soit à l’intérieur d’un paragraphe :<quote>Texte d’une citation</quote>

Proverbe :

C’est en patissant que l’on devient patisson.

Soit formant un bloc :

<quote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</quote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Créer des blocs dépliables et des blocs imbriqués

Conseils en lorem

Nous sommes susceptible de fournir des conseils aux petites communes ou communautés de communes, dénuées de services dédiés, sur :

  • Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Il s’agira d’un conseil de premier niveau, qui pourra déboucher ensuite sur une orientation sur des acteurs plus spécialisés, mais qui vous donnera des premiers éléments utiles à vos démarches ultérieures.

Animations

Balades thermographiques, expositions, conférences-débat, défi Familles à Énergie Positive…
Diverses formes d’interventions sont proposées pour informer vos citoyens. N’hésitez pas à faire appel aux conseillers présents sur votre territoire pour les mettre en place en partenariat.

En savoir plus

Informez largement votre population sur ce service, et le cas échéant sur une permanence décentralisée qui pourrait se situer à proximité de votre territoire.
Consultez la carteGlobale pour connaître ces permanences.

Encore plus

Informez largement votre population sur ce service, et le cas échéant sur une permanence décentralisée qui pourrait se situer à proximité de votre territoire.
Consultez la carteGlobale pour connaître ces permanences.

Conseil personnalisé décentralisée qui pourrait se situer à proximité de votre territoire

La possibilité de consulter gratuitement des professionnels indépendants sur les questions énergétique est souvent méconnue
Informez largement votre population sur ce service, et le cas échéant sur une permanence décentralisée qui pourrait se situer à proximité de votre territoire.
Consultez la carte pour connaître ces permanences.

Caractères

Les attributs de caractères doivent être ouverts et fermés à l’intérieur du même paragraphe (pas question de débuter le gras sur un premier paragraphe et de le terminer sur un deuxième).

Ils peuvent être utilisés dans tous les champs de SPIP.

Mise en forme

  • gras : {{texte en gras}} ; à utiliser pour un élément que l’on souhaite appuyer (sera prononcé plus fort dans un logiciel de lecture vocal) : texte en gras
  • italique : {italique} ; à utiliser pour une élément sur lequel on veut insister (sera prononcé avec emphase) : italique
  • mise en évidence [*texte en évidence*] : élément que l’on souhaite appuyer en attirant le regard par un changement de couleur : [*texte en évidence*]
  • mise en exposant : <sup>texte en exposant</sup> : pour l’abréviation de saint : St
  • petites capitales : <sc>texte en petite capitales</sc> : à utiliser essentiellement pour les noms propres : Charles de Gaulle
  • code : <code>du code (raccourcis typographiques, html...)</code> que l’on ne souhaite pas que SPIP interprète
  • biffé : <del>texte biffé</del> : pour indiquer qu’on avait pensé à un autre mot et que l’on a changé d’avis : SPIP, c’est bien fantastique !

Aides à la compréhension du texte

  • bulle d’aide : [GPL|Gnu Public Licence] : pour donner la signification d’un terme ou d’une abréviation : GPL
    Ce raccourcis est beaucoup moins nécessaire depuis que vous disposez de article 444 automatiques.

Liens internes et externes

  • lien : [texte du lien->http://www.spip.net/] : lien : texte du lien
    À noter qu’il est possible de faire des liens à l’intérieur du site SPIP à l’aide des numéros des éléments et de leur type (se reporter à l’aide en ligne fournie par SPIP).
  • lien avec bulle d’aide : [texte du lien|Le site officiel de SPIP->http://www.spip.net/] : texte du lien
  • lien avec langue de destination (non visible sur Internet Explorer) : [texte du lien|{fr}->http://www.spip.net/] : texte du lien
  • lien avec bulle d’aide et langue de destination : [texte du lien|Le site officiel de SPIP{fr}->http://www.spip.net/] : texte du lien
  • ancre et retour à l’ancre : [definition_ancre<-] et [retour à l'ancre->#definition_ancre] : retour à l’ancre
  • définition dans Wikipedia : [?GPL] : appelle l’encyclopédie libre Wikipedia pour obtenir la définition du mot [3] : GPL
    Avec bulle d’aide : [?GPL|Définition sur Wikipédia] : GPL
  • note de bas de page : texte[[note de bas de page]] : crée une note de bas de page avec le texte entre les doubles crochets [4]

Listes

Les listes sont à utiliser pour tout ce qui à le sens d’une énumération.

Attention : il faut entourer un bloc de listes à puces d’une ligne vide avant et après.

Listes à puces

Donnera :

  • première ligne
  • deuxième ligne
    • une sous liste à puce
  • de retour dans le niveau initial

Listes numérotées

Donnera :

  1. première ligne
  2. deuxième ligne
    1. une sous liste numérotée
  3. de retour dans le niveau initial

Tableaux

Pour être complètement accessible, un tableau dans SPIP doit avoir un titre et une description.

Ainsi :

Donnera :

Produits bio et prix
Produit Prix €
Beurre Bio 5€
Lait Bio 3€
Choux Bio 4€

Notez les doubles || [5] sur la première ligne du tableau !

Attention : les pièges classiques avec les tableaux sont :

  • ne pas avoir le même nombre de | sur une ligne
  • avoir un espace après le dernier | de la ligne (un moyen simple de vérifier : la touche fin du clavier amène à la fin de la ligne)

Tableaux avec fusion de cellules

Donnera :

Tableau avec fusion
Colonne 1 Colonne 2 Colonne 3
ligne 1 Cellule fusionnée avec la suivante
ligne 2 Cellule fusionnée

avec celle du dessous

normale
ligne 2 normale aussi

Principe :

  • |<| fusionne avec la cellule de gauche
  • |^| fusionne avec la cellule au dessus

Caractères spéciaux

  • ~ (espace insécable ou espace dur — correspond au &nbsp; du HTML) placé entre deux mots remplace l’espace en ayant l’avantage d’être insécable, c’est-à-dire, qu’il empêchera les deux mots d’être séparés par un retour à la ligne malvenu. S’utilise en particulier entre le prénom et le nom propre.
  • --> : —> (flèche vers la droite)
  • <-- : <— (flèche vers la gauche)
  • <--> : <—> (flèche vers la gauche et vers droite)
  • ==> : ==> (double flèche vers la droite)
  • <== : <== (double flèche vers la gauche)
  • <==> : <==> (double flèche vers la gauche et vers droite)
  • -- : — (tiret cadratin) à utiliser pour les incises dans un texte
  • ... : ... (3 petits points) points de suspension
  • (c) : (c) : CopyRight
  • (r) : (r) : Registered
  • (tm) : (tm) : Trade Mark

Ligne horizontale

---- : 4 signes moins en seuls sur une ligne (précédés d’une ligne vide et suivis d’une ligne vide) donneront un trait de séparation horizontal.


Éléments dangereux

Il y a deux éléments dangereux dans SPIP :

  • le retour à la ligne simple : _ (souligné espace) en début de ligne.
    Usage toléré pour donner adresse et numéro de téléphone/fax.
    Usage toléré : dans une liste à puce pour passer à la ligne sans passer à une nouvelle puce (comme ici).
    Usage [*interdit*] : pour mettre plus d’espace vertical entre deux éléments de la page.
  • le HTML pur : il est possible dans SPIP de mettre du code HTML. Le faire est fortement déconseillé :
    • parce que c’est la porte ouverte à toutes les dérives, ne serait-ce que celle de sortir de la charte graphique du site, ou celle de produire un code HTML non valide (voire non interprétable ailleurs que sur Internet Explorer
    • parce que c’est partir du postulat que votre site ne sera visité qu’en tant que site web ; il pourrait très bien être un jour disponible sous forme de fichiers PDF...

Exemples de titraille : Titre principal

{{{Exemples de titraille : Titre principal}}}


Documents joints

Un document PDF
Le descriptif PDF

<doc26|left>


Images

Pour les images et documents, reportez-vous à l’aide en ligne de SPIP. Seule contrainte pour l’accessibilité (et donc un meilleur référencement) : donnez un titre à toutes vos images décrivant le sens de chacune d’elles.

Placement des images

Le Montana sous la neige {JPEG}<img13|left>


Intellectuels serviles de Kinshasa {JPEG}
<img14|center>


Le Montana sous la neige {JPEG}
<img13|right>


Le Montana sous la neige
Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
2016

<doc13|left>


Intellectuels serviles de Kinshasa

<doc14|center>


Le Montana sous la neige
Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
2016

<doc13|right>


Le Montana sous la neige
Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
2016

<emb13|left>


Intellectuels serviles de Kinshasa

<emb14|center>


Le Montana sous la neige
Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
2016

<emb13|right>


Et vidéos

https://vimeo.com/190624542


Plus sur Service rapide


Infos pratiques

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.

[1Sauf les listes à puce et les tableaux

[2Essentiellement utilisé sur spip-contrib pour donner des exemples de code

[3Si le mot n’existe pas, vous pouvez le créer vous-même !

[4Et la note de bas de page est automatiquement numérotée, rendue clicable, pour la consulter, et pour revenir au texte l’ayant appelée

[5Le signe | se fait sous Mac avec la combinaison Maj-Alt-L et sous Windows AltGR-6.

À télécharger

À télécharger


Galerie photos ou Portfolio

carreaux.jpg
devweb6.jpg
decor04.jpg
Paysage de montagne photographe
Paysage de montagne

Description du paysage de montagne

photographe
image06.jpg
decor01-2.jpg
decor03.jpg
354.jpg
archi01.jpg