PARTICIPER AU SITE DE LA CAGETTE




Niveau 4 : Ecrire du HTML



Tout d'abord, il est important de rappeler qu'il existe deux types de contenu sur le site :

- Des pages Codée qui ont été crées de toute pièce, elles étaient vierge et on a écrit du code dedans pour faire apparaitre ce que l'on veut.

- Des pages Fiches qui ont été crées suite au remplissage de formulaires.

On peut donc utiliser du HTML de deux façons différentes sur le site :

  • Sur une page Codée : On edite la page et on peut ajouter des bouts de codes en HTML en prenant soin d'ajouter 2 guillemets au début et à la fin de chaque bout de code que l'on souhaite ajouter : code html

Exemple :
""<a href="https://lacagette-coop.fr/?ActualiteBlog" target="_blank">ton texte</a>""

Donne :
ton texte

  • Sur une page Fiche : Les bouts de code HTML doivent être ajouter au formulaire qui va créer la fiche. on ne peut pas ajouter du HTML à une fiche en l'éditant. Si vous editer la page, cela va vous proposer de modifier le remplissage du formulaire et non la strucutre de la page.


Rappel : sur une page Codée : Pour ajouter du code en HTML , il faut mettre 2 guillemets au début et à la fin de chaque bout de code que l'on souhaite ajouter : code html


Tout d'abord, il est important de rappeler qu'il existe deux types de contenu sur le site :

- Des pages Codée qui ont été crées de toute pièce, elles étaient vierge et on a écrit du code dedans pour faire apparaitre ce que l'on veut.

- Des pages Fiches qui ont été crées suite au remplissage de formulaires.

On peut donc utiliser du HTML de deux façons différentes sur le site :

  • Sur une page Codée : On edite la page et on peut ajouter des bouts de codes en HTML en prenant soin d'ajouter 2 guillemets au début et à la fin de chaque bout de code que l'on souhaite ajouter : code html

Exemple :
""<a href="https://lacagette-coop.fr/?ActualiteBlog" target="_blank">ton texte</a>""

Donne :
ton texte

  • Sur une page Fiche :

Pour modifier la structure ou la présentation de la page : Les bouts de code HTML doivent être ajouter au formulaire qui va créer la fiche. on ne peut pas modifier la présentation d'une Fiche avec du HTML en l'éditant.
Si vous editer la page, cela va vous proposer de modifier le remplissage du formulaire et non la structure de la page.

Par ailleurs, si vous souhaitez ajouter un élément à votre fiche nécessitant du HTML tels qu'un bouton, un iframe, un séparateur.... à une seule fiche en particulier (votre fiche de comité... ), vous pouvez utiliser les champs texte du formulaires pour intégrer votre HTML ( en mettant les 4 guillemets) Les champs texte réagissent exactement pareil qu'une page. vous pouvez donc coller les bouts de codes que vous souhaitez HTML ou YesWiki.e




Comme mentionné en intro, il y a deux façon d'intégrer du HTML à une page Fiche :

1- Mettre du HTML dans un champ texte lors du remplissage du formulaire vous permet d'intégrer des éléments à votre fiche tels que des boutons, iframe, carte, sondage.... mais vous ne pouvez pas agir sur la présentation de la fiche ni sur sa façon de se générer.

2- Mettre du HTML dans le formulaire afin d'automatiser des éléments. Les éléments intégrés se généreront à chaque fois que quelqu'un remplira un formulaire. Exemple : titre, présentation, outils....



Tout d'abord, il faut posséder un compte admin
Cela se passe dans Base de données / Formulaires

ATTENTION A NE JAMAIS SUPPRIMER UN FORMULAIRE : CELA SUPPRIMERAI TOUTE LES FICHES CREES A PARTIR DE CE FORMULAIRE
FAIRE TRES ATTENTION !!

Cliquez sur le crayon pour editer un formulaire

Pour ajouter du html et que Yeswiki l'interprète comme tels il faut mettre la balise
labelhtml*** *** *** *** *** *** *** *** *** *** ***


Le label se découpe en 12 champs séparés par trois petites étoiles à chaque fois

Vous pouvez ajouter du HTML :

- En mode Saisie : C'est à dire que le HTML que vous ajouté apparaitra seulement lors du remplissage du formulaire
- En mode Vue : C'est à dire que le HTML que vous ajouté apparaitra seulement sur la fiche crée par la formuaire

Cela dépendra de la position à laquelle vous mettez votre html sur la balise

Mode saisie = 2ème champs
Mode vue = 4ème champs

labelhtml***HTML mode saisie*** ***HTML mode vue*** *** *** *** *** *** *** ***


Vous pouvez donc choisir de mettre du HTML en mode saisie ou en mode vue ou en mode saisie et vue

Exemple 1 : Je souhaite mettre un titre lorsqu'on rempli le formulaire

Code HTML : <h2>Titre de l'article</h2>
Qui donnera
""<h2>Titre de l'article</h2>""


J'édite mon formulaire et je mets la balise :
labelhtml***<h2>Titre de l'article</h2>*** *** *** *** *** *** *** *** *** ***

Le titre sera visible lorsqu'on remplira le formulaire mais pas sur la fiche finale


Exemple 2 : je souhaite que le titre apparaisse en mode saisie et en mode vue

Code HTML : <h2>Titre de l'article</h2>
Qui donnera

Titre de l'article



J'édite mon formulaire et je mets la balise :
labelhtml***<h2>Titre de l'article</h2>*** ***<h2>Titre de l'article</h2>*** *** *** *** *** *** *** ***

Le titre sera visible lorsqu'on remplira le formulaire et également surla fiche finale


Attention à ne pas laisser trainer des espaces entre le code HTML et les petites étoiles, YEswiki risque de ne pas interpréter le code.



Exemples de HTML



Permet d'ordonner une page, de séparer du texte...

Vous pouvez adapter la barre selon vos envies en adaptant les paramètres ci-dessous :

- height: xx px : Modifie les pixels c'est à dire l'épaisseur de la barre
- color: Modifie la couleur de la barre - se référer aux couleurs définis plus haut dans la rubriques "Les Couleurs"
- width: modifie la longueur de la ligne : 100% = toute la largeur de la page

Copier le code ci-dessous et coller le dans le menu edition de votre page :
""<hr style="height: 2px; color: #A55F21; background-color: #A55F21; width: 50%; border: none;">""

Un exemple ci-dessous :





Voir sur cette même page : Niveau 2 : Personnaliser une page ou une fiche / 2 - Ajouter un iframe dans ma fiche



<h1>Très grand titre</h1>

Qui donnera

Très grand titre



<h2>Un peu moins grand titre</h2>

Qui donnera

Un peu moins grand titre



<h3>Un titre moyen</h3>

Qui donnera

Un titre moyen



<h4>Pas vraiment un titre...</h4>

Qui donnera

Pas vraiment un titre...



<h5>Du texte en mormal</h5>

Qui donnera
Du texte en mormal



Pour faire un espace dans un formulaire, il faut mettre un bout de code, sauter une ligne ne sert à rien (à part y voir plus clair dans sa page de code)

Espace en mode vue
labelhtml*** *** ***<br />***


Espace en mode saisie
labelhtml***<br />*** *** ***


Espace en mode saisie et vue
labelhtml***<br />*** ***<br />***