©
. Document créé le 17 septembre 2008 , mis à jour le 6 octobre 2008.L'éternité c'est long, surtout vers la fin. Woody Allen
Accueil du site > Astuces > SPIP > Raccourcis typographiques
Voici quelques exemples qui pourront vous servir à l’occasion, voire compléter votre formation.
Si vous en avez quelques uns à proposer, le forum en bas de page est à votre disposition.
Laissez une ligne blanche entre les deux paragraphes.
Exemple :
Paragraphe #1.
Paragraphe #2.
Résultat :
Paragraphe #1.
Paragraphe #2.
Exemple :
Ligne #1.
Ligne #2.
Résultat :
Ligne #1. Ligne #2.
Pour forcer le retour à la ligne, insérez un espace sous-ligné (tiret bas) suivi d’un espace au début de la ligne :
Exemple :
Ligne #1.
_ Ligne #2.
Résultat :
Ligne #1.
Ligne #2.
Exemple :
- Premier élément ;
- Second élément.
Résultat :
Premier élément ;
Second élément.
Exemple :
-- Premier élément ;
-- Second élément.
Résultat :
— Premier élément ;
— Second élément.
Si vous êtes sensible à la conformité X-HTML et les règles d’accessibilités (WAI/WCAG), c’est cette option que vous devez préférer au deux précédentes dont le code HTML est celui d’un paragraphe au lieu d’une liste :
Exemple :
-* Premier élément ;
-* Second élément.
Résultat :
Exemple :
-* Premier élément ;
-* Deuxième élément ;
-** Premier sous-élément ;
-** Deuxième sous-élément ;
-* Troisième élément ;
Résultat :
Exemple :
-# Premier élément
-# Deuxième élément
-# Troisième élément
Résultat :
Exemple :
- Premier élément
- Deuxième élément
-## Premier sous-élément
-## Deuxième sous-élément
-## Troisième sous-élément
- Troisième élément
Résultat :
Premier élément
Deuxième élément
Visiblement, ne donne pas le résultat attendu. De toute façon, comme précisé plus haut, les listes formatées par les raccourcis SPIP tiret et double-tiret sont à éviter.
Autre exemple :
-# Premier élément
-# Deuxième élément
-## premier
-## Deuxième sous-élément
-## Troisième élément
-# Troisième élément
Résultat :
Plus propre, n’est-ce pas ?
Exemple :
Un texte {{en gras}}, un autre {en italique}.
Résultat :
Un texte en gras, un autre en italique.
Nota : la balise HTML calculée pour l’italique (i) est dépréciée [1].
Plus corsé :
Exemple :
{{ {En gras puis en italique.} }}
Notez au passage l’espace entre les deux accolades du gras et celle de l’italique.
Résultat :
En gras puis en italique.
Pour s’en convaincre, supprimons l’espace :
Exemple :
{{{En gras puis en italique.}}}
Résultat :
Et c’est un titre de niveau 3 qui apparaît. L’espace est donc très important.
Complétons par un titre de niveau 3, dont une partie est en gras, une autre en italique, et la dernière en gras italique :
Exemple :
{{{Intertitre, avec un mot en {{gras}}, un autre en {italique}, un dernier en {{ {gras italique} }} }}}
Résultat :
Pas toujours très probant. Tout dépend de votre feuille de style CSS.
Enveloppez votre titre d’une tripe-accolade.
Exemple :
{{{Intertitre}}}
Résultat :
Placez 4 tirets pour obtenir un grand trait (balise HTML HR).
Exemple :
----
Résultat :
Entre crochets avec tiret et signe supérieur (>) ;
Exemple :
[->http://www.foo.bar].
Résultat :
Exemple :
[Lien sur un site|bulle d'aide->http://www.foo.bar].
Résultat :
Exemple :
-* [->233]
-* [->art233]
-* [->art 233]
-* [->article233]
-* [->article 233]
Résultat :
Exemple :
-* [->br11]
-* [->breve 11]
-* [->brève 11]
Dans le même principe, possibilité de lier à un auteur ; un mot-clé ; une rubrique ; un site syndiqué ; un document joint ; une image :
Exemple :
[un auteur->aut1] ou [le même auteur->auteur1]
[un mot->mot32]
[une rubrique->rub64]
[un site syndiqué->site1]
[un document joint->doc17] ou [le même document->document17]
[une image->img13] ou [la même image->image13]
Résultat :
Ca ne donne rien ici. C’est normal, il n’y a pas de brève sur ce site.
Créer une ancre :
Exemple :
[ancre<-]
L’ancre est invisible à l’affichage. Vérifiez sa présence dans le code source de la page.
Et pour lier à cette ancre, dans votre texte, du même article :
[Voir plus haut->#ancre]
Résultat :
Pour les adresses mail, inutile d’ajouter « mailto: ».
Exemple :
[Contact->contact@foo.bar]
Résultat :
Si pas de texte, affiche directement l’adresse mail activée.
Exemple :
[->contact@foo.bar]
Résultat :
Vérifiez que la page existe sur Wikipedia avant de valider votre article. Placez entre crochets et placez un point d’interrogation au début du mot :
Exemple :
En savoir plus sur [?Wikipedia]
Résultat :
En savoir plus sur Wikipedia
Exemple :
Cette phrase est trop longue [[Sa note la complète]].
Résultat :
Cette phrase est trop longue [2].
Pour reprendre la même note de bas de page plus loin dans votre article, insérez entre crochets et symboles inférieur/supérieur le numéro de la note.
Exemple :
Cette phrase a besoin d'être complétée par une note présente dans l'article [[<1>]].
Résultat :
Cette phrase a besoin d’être complétée par une note présente dans l’article [1].
Si vous voulez insérer un lien dans une note de base de page, il faut corriger le code. En effet, la barre Typo (SPIP 192e) ne place pas l’espace nécessaire entre les crochets.
Exemple :
[[Note avec [lien->http://foo.bar]]].
n’interprétera pas le lien.
Sa version corrigée manuellement (un espace inséré avant les deux derniers crochets) :
[[Note avec [lien->http://foo.bar] ]].
Exemple :
|{{titre a}}|{{titre b}}|
|1a|1b|
|2a|2b|
Résultat :
titre a | titre b |
---|---|
1a | 1b |
2a | 2b |
Exemple :
||Description|tableau exemple||
|{{titre a}}|{{titre b}}|{{titre c}}|
|1a|1b1c|<|
|2a|2b|2c|
|3a|3b4b|3c|
|4a|^|4c|
Résultat :
titre a | titre b | titre c |
---|---|---|
1a | 1b1c | |
2a | 2b | 2c |
3a | 3b4b | 3c |
4a | 4c |
Exemple :
||Description|tableau exemple||
|{{titre a}}|{{titre b}}|{{titre c}}|
|1a1b|<|1c|
|2a|2b 3b 4b|2c|
|3a|^|3c|
|4a|^|4c|
|5a|5b|5c|
Résultat :
titre a | titre b | titre c |
---|---|---|
1a1b | 1c | |
2a | 2b 3b 4b | 2c |
3a | 3c | |
4a | 4c | |
5a | 5b | 5c |
Certaines balises sont acceptées et traitées par le filtre texte.
Ajouter du code HTML dans son article :
Exemple :
<code><p>Ceci est une ligne de code <strong>HTML</strong></p>
</code><
Résultat :
<p>Ceci est une ligne de code <strong>HTML</strong></p>
Vous pouvez ajouter autre chose que du HTML.
Présenter du code PHP (colorisé) dans son article :
Exemple :
<?php print("Hello World"); ?>
Résultat :
<?php print("Hello World"); ?>
Le code Javascript ne bénéficie pas de la coloration. CSS non plus.
Et si le code Javascript est préservé, le code CSS sera interprété comme texte et donc inefficace. De toute façon, l’utilisation de la balise style dans le body n’est pas conforme à la norme XHTML-strict.
Exemple :
<script type="text/javascript">
document.write("Hello World");
</script>
Résultat :
Le code Javascript n’est interprété qu’en espace public . En espace privé, il est affiché tel que sauf s’il vient d’un modèle.
Exemple, un peu de script inséré en fin de cet article afin de colorer le bord des cellules des tableaux (paragraphe des tableaux).
<script type="text/javascript">
// <![CDATA[
for(var i = 0; i < document.getElementsByTagName("td").length; i++) {
document.getElementsByTagName("td")[i].style.border = "solid #ccc 1px";
}
// ]]>
</script>
D’autres balises HTML dites de « marquage logique [3] » sont disponibles. Par exemple :
qpour une citation avec référence sur un autre site
Les balises DEL (extrait de texte supprimé) et INS (extrait de texte ajouté) sont acceptées.
Exemple [4] :
<p>Goethe est né en <del>1768</del><ins>1789</ins> et était un
<del>sportif</del> <ins>écrivain</ins> doué.</p>
Résultat :
Goethe est né en 17681789 et était un
sportif écrivain doué.
La balise H4 est nécessaire pour certains articles.
<h4>Un sous-intertitre</h4>
Insérez votre image via la boite « AJOUTER UNE IMAGE », puis après chargement, copier/coller le code HTML proposé sous l’image (ou son icone si les vignettes ne sont pas activées.
Exemple :
<img123|center>
Pour les documents, faire de même en utilisant la boite « AJOUTER UN DOCUMENT ».
Exemple :
<doc123|center>
Cas à part, le portfolio d’images. Il faut charger ses images en tant que documents. Le portfolio apparaît automatiquement en fin d’article (si vous utilisez un squelette standard) [5].
Curiosité ? Une balise non HTML.
Exemple :
<cadre><p>Texte dans un cadre</p></cadre>
Résultat :
Autre curiosité : la balise <html>
Exemple :
<html>Texte dans un bloc à ne pas interpréter (conserve le {{texte}} brut tel qu'entré dans la boite d'édition et place le tout dans un paragraphe). </html>
Résultat :
Texte dans un bloc à ne pas interpréter (conserve le {{texte}} brut tel qu'entré dans la boite d'édition et place le tout dans un paragraphe).
[1] http://www.w3.org/TR/REC-html40/pre...
[2] Sa note la complète
[3] Voir la page consacrée au marquage logique sur SELFHTML
[4] Exemple de texte issu de l’excellent site didactique SelfHTML
[5] Voir également le plugin Portfolio ImageFlow pour l’insertion de votre portfolio au coeur de l’article
Les forums sont fermés.