Créer un premier article sous SPIP

Tutoriel SPIP

Mis à jour le mercredi 28 août 2024 , par Angelina CAUSSÉ

Création d’un article

Barre d’outils

1. Intégrer un titre en intertitre

Les accolades (ouvertes et fermées symétriquement) :

 Accolades triples, pour créer un intertitre

{{{Test Spip}}}

Effet produit

Test Spip

2. Mettre en gras

Accolades doubles, pour mettre en gras

{{Test Spip}}

Effet produit

Test Spip

3. Mettre en italique

Accolades simples, pour mettre en italique

{Test Spip}

Effet produit

Test Spip

Rubriques

2. Placer l’article dans une rubrique

Cliquer sur la loupe pour déplier l’arborescence et cliquer sur les rubriques et sous-rubriques choisies :

Exemple : Former, se former > Formation au numérique > Outils logiciels

Ne pas oublier de cliquer sur "Choisir"

Intégrer un article dans une rubrique. Cliquer sur CHOISIR

Documents

3. Télécharger une image dans un article

1. Dans la zone "Ajouter une image ou un document", parcourez vos dossiers puis "choisissez" et sélectionnez le document souhaité.

Ajouter ne image ou un document
Document téléchargé

2. Cliquez ensuite sur "Modifier" pour donner un titre à votre document :

Donner un titre au document

3. Une fois le document chargé et titré, sélectionnez la zone où vous souhaitez l’intégrer en positionnant votre curseur dans le corps du texte de l’article puis cliquer sur la balise associée à l’icône du document :

Donner un titre au document
<doc410>

4. Intégrer une image

Les balises permettent de placer à gauche, au centre ou à droite :

<doc410|left>
<doc410|center>
<doc410|right>

Effet produit

Peixe


Peixe


Peixe

Liens

5. Insérer un lien

  • 1. En collant simplement un lien dans le corps du texte : le lien sera actif automatiquement

https://www.youtube.com/watch?v=yFpoG_htum4&ab_channel=VidaMaria

  • 2. En utilisant la fonction "Lien" puis en collant le lien souhaité dans le champ du formulaire.

Il est possible d’écrire le code suivant à la main :

[   ->   ]

Puis d’insérer le lien après la flèche :

[....->https://www.youtube.com/watch?v=yFpoG_htum4&ab_channel=VidaMaria]

Ce qui précèdera la flèche correspondra à la zone cliquable :

[https://www.youtube.com/watch?v=yFpoG_htum4&ab_channel=VidaMaria->https://www.youtube.com/watch?v=yFpoG_htum4&ab_channel=VidaMaria]

[ Cliquez ici ->https://www.youtube.com/watch?v=yFpoG_htum4&ab_channel=VidaMaria  ]

[Ou là...->https://www.youtube.com/watch?v=yFpoG_htum4&ab_channel=VidaMaria]

Vidéo

5. Insérer une vidéo

La plupart des sites proposant des vidéos (Tube, Youtube etc.) mettent à disposition, via le bouton "Partager", des "codes d’insertion" prêts à l’emploi.

Exemple illustré, dans YouTube :

1. Cliquer sur le bouton de partage d’une vidéo

Cliquer sur le bouton de partage d’une vidéo

2. Différentes options de partage d’une vidéo - Lien ou Code d’intégration

différentes options de partage d’une vidéo - Lien ou Code d’intégration

3. Partager le lien vers une vidéo

Partager le lien vers une vidéo

4. Copier / Coller le code d’intégration d’une vidéo

Copier / coller le code d’intégration d’une vidéo

5. Paramétrer le code d’intégration de la vidéo

Paramétrer le code d’intégration de la vidéo

1. Copier le code suivant :

<center><iframe width="560" height="315" src="https://www.youtube.com/embed/yFpoG_htum4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></center>

Modifier et personnaliser le code d’intégration

Modifier et personnaliser le code d’intégration

2. Remplacer les trois XXX (XXX), sans ajouter d’espace ni retrancher les guillemets, par le lien hypertexte voulu :

<iframe width="560" height="315" src="{{[rouge]XXX[/rouge]}}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Integrer

Comme pour l’intégration d’une vidéo, on copié le code d’intégration et on le colle à l’endroit voulu.

<iframe style="max-width:100%" src="https://wordwall.net/pt/embed/df05df2117114035896e7932e6030092?themeId=1&templateId=8&fontStackId=0" width="500" height="380" frameborder="0" allowfullscreen></iframe>

Effet produit

6. Utiliser les balises

<center>  Coller ici l'iframe </center>

Onglets

7. Insérer des onglets

Tableaux

8. Insérer un tableau

Mon premier tableau
Test
Déterminants / Articles / PronomsSubstantifs / Noms Verbes conjugués au présent Verbes à l’infinitif
a vida VIVER
a menina aprende APRENDER
Ela trabalha TRABALHAR

Blocs dépliables

8. Insérer des blocs dépliables

[fond bleu ciel]<onglets>[/fond bleu ciel]Titre 1

Placez votre texte ici

++++Titre 2

Placez votre texte ici

++++Titre 3

Placez votre texte ici

[fond bleu clair]</onglets>[/fond bleu clair]

Galerie d'images

Balise : <docXXX>

Dans la même rubrique