Tutoriel MarkForm — De zéro à votre première page web

Pour qui : ce tutoriel est écrit pour les personnes qui savent allumer leur ordinateur et utiliser un navigateur, mais qui n'ont jamais créé de page web ni écrit en Markdown. Aucune connaissance technique préalable n'est nécessaire.

Durée : entre 30 et 45 minutes pour faire l'ensemble du tutoriel.

Version de MarkForm utilisée : v1.1.1

Avant de commencer

À quoi sert MarkForm ?

MarkForm transforme du texte simple en page web jolie. Vous écrivez votre contenu (un cours, une liste de liens, une organisation de tâches…) avec quelques symboles très simples, et MarkForm vous fabrique automatiquement une page web partageable.

Trois exemples concrets

• Une fiche de cours que vous voulez partager avec vos élèves : MarkForm la transforme en site web avec menu et navigation.
• Une page d'accueil personnelle avec tous vos liens utiles (Pronote, ENT, mails) : MarkForm en fait un portail propre avec recherche.
• Une liste de choses à faire avec « à faire / en cours / terminé » : MarkForm en fait un tableau Kanban avec des cartes que vous pouvez déplacer.

Le vocabulaire essentiel

Avant de plonger, un petit lexique des mots qui reviendront souvent :

• Markdown : une façon d'écrire du texte avec des symboles simples pour le mettre en forme. Par exemple, **important** deviendra automatiquement important en gras.
• Pad : un document texte en ligne, partageable, qu'on peut éditer à plusieurs en même temps. Pensez à un Google Docs en plus simple.
• Lien partageable : une adresse internet (URL) qui contient toute votre page. Quand quelqu'un clique dessus, il voit votre création. Vous pouvez l'envoyer par mail, le coller dans un cahier de textes, etc.

Étape 1 — Découvrir l'application

Ouvrir MarkForm

1. Ouvrez votre navigateur (Firefox, Chrome, Edge, peu importe).
2. Allez à l'adresse de MarkForm que vous a fournie votre administrateur, par exemple https://heroldemmanuel.forge.apps.education.fr/markform/
3. La page se charge.

Ce que vous voyez

L'écran est divisé en deux grandes parties :

• À gauche : « 📄 Source du Markdown » — c'est là que vous écrirez votre texte. C'est votre brouillon.
• À droite : « 🎨 Mise en forme » — c'est le panneau de personnalisation (couleurs, police, etc.). On y reviendra plus tard.

En bas se trouvent deux boutons importants :

• 🔗 Générer le lien partageable : crée l'adresse internet de votre page.
• 👁️ Aperçu : montre à quoi ressemble votre page sans la générer.

💡 Astuce : ne touchez à rien pour l'instant. On va y aller doucement.

Étape 2 — Votre première page (mode Site)

On commence par le plus simple : créer une petite page de cours.

Préparer la zone de texte

1. Dans la grande zone de texte à gauche (sous « ou coller le Markdown »), effacez tout ce qui s'y trouve s'il y a déjà du texte.
2. La zone doit être totalement vide.

Coller votre premier contenu

Copiez le texte ci-dessous exactement comme il est écrit, retours à la ligne compris, et collez-le dans la zone de texte vide :

---
mode: site
---

## Bienvenue dans la classe

Bonjour à toutes et à tous ! Cette page rassemble les informations importantes pour cette semaine.

Vous y trouverez le programme, les devoirs et quelques rappels.

## Le programme de la semaine

Voici ce qui est prévu :

- Lundi : mathématiques et lecture
- Mardi : sciences et sport
- Jeudi : histoire et arts plastiques
- Vendredi : évaluation de mathématiques

## Les devoirs

Pour mardi, apprendre la poésie « Le Cancre ».

Pour jeudi, terminer l'exercice 4 page 32.

## Un petit mot

N'hésitez pas à me poser des questions si vous bloquez sur un exercice. Bon courage !

Générer la page

1. Cliquez sur le bouton 🔗 Générer le lien partageable (en bas).
2. Une fenêtre apparaît avec une longue adresse (URL).
3. Une nouvelle page s'ouvre automatiquement : votre page web est créée !

Ce que vous devriez voir

Une page avec :

• Une barre latérale à gauche listant les 4 sections (Bienvenue, Programme, Devoirs, Petit mot).
• Le contenu principal au centre.
• Des boutons Précédent / Suivant en bas pour passer d'une section à l'autre.

🎉 Bravo, vous venez de créer votre première page web avec MarkForm.

Revenir au panneau de configuration

Pour modifier votre page, cliquez sur le bouton ← Modifier en haut à gauche de la page générée. Vous revenez à l'écran de départ avec votre texte.

Étape 3 — Comprendre le Markdown

Vous venez d'utiliser le Markdown sans le savoir ! Maintenant, voyons à quoi correspond chaque symbole.

Les titres avec ##

Dans le texte que vous avez collé, vous avez vu plusieurs lignes commençant par ## :

## Bienvenue dans la classe
## Le programme de la semaine
## Les devoirs

Chaque ## crée une nouvelle page (en mode Site). C'est la règle d'or de MarkForm. Si vous voulez 5 sections, vous écrivez 5 ##.

⚠️ Important : il faut bien deux dièses (##), pas un seul. Et il faut un espace après les dièses.

Les listes avec -

Vous avez aussi vu :

- Lundi : mathématiques et lecture
- Mardi : sciences et sport

Chaque ligne commençant par - (un tiret + un espace) devient un élément de liste à puces dans la page finale.

Le bloc YAML au début

Tout en haut, il y avait :

---
mode: site
---

Ce petit bloc, encadré par deux lignes de trois tirets, sert à dire à MarkForm comment afficher la page. Ici, mode: site lui dit « fais-moi un site avec un menu ». On y reviendra à l'étape 4.

Faisons un essai : modifier le titre

1. Revenez au panneau de configuration (bouton ← Modifier).
2. Dans la zone de texte, trouvez la ligne ## Bienvenue dans la classe.
3. Remplacez-la par ## Page d'accueil de ma classe.
4. Cliquez sur 👁️ Aperçu pour voir le résultat.
5. Le titre dans la barre latérale a changé !

Faisons un autre essai : ajouter une section

1. Toujours dans la zone de texte, descendez tout en bas, après le « Un petit mot ».
2. Sautez une ligne, puis ajoutez :

## Les anniversaires du mois

- Léa, le 12
- Tom, le 18
- Inès, le 25

3. Cliquez sur 👁️ Aperçu.
4. Une nouvelle entrée « Les anniversaires du mois » est apparue dans la barre latérale, avec une liste à puces.

Les autres symboles utiles

Voici les symboles Markdown les plus courants. Vous pouvez les essayer en les ajoutant à votre page :

Faisons un essai : ajouter un lien et du gras

Dans votre section « Les devoirs », remplacez le texte par :

Pour mardi, apprendre la poésie **Le Cancre** de Jacques Prévert.

Vous pouvez la retrouver sur [ce site](https://www.poetica.fr/poeme-1373/jacques-prevert-le-cancre/).

Pour jeudi, terminer l'exercice 4 page 32.

Cliquez sur 👁️ Aperçu : « Le Cancre » apparaît en gras, et « ce site » est un lien cliquable bleu.

Étape 4 — Personnaliser l'apparence

Votre page fonctionne, mais elle est un peu fade. Personnalisons-la.

Le panneau « 🎨 Mise en forme »

Revenez au panneau de configuration. À droite, vous avez plusieurs catégories de réglages :

• MODE DE RENDU : Site, Pad ou Liens (on y revient).
• COULEURS : couleurs du fond, des cartes, du texte, des titres, etc.
• TYPOGRAPHIE : choix de la police d'écriture.
• MISE EN PAGE : nombre de colonnes, largeur, espacement, arrondi.

Changer une couleur

1. Cliquez sur le petit carré coloré à côté de Titres.
2. Une palette de couleurs apparaît.
3. Choisissez par exemple un beau bleu.
4. Cliquez sur 👁️ Aperçu : les titres et la barre latérale ont pris cette nouvelle couleur.

Changer la police

1. Dans la section TYPOGRAPHIE, cliquez sur Police.
2. Essayez Luciole (police pensée pour la lisibilité, conçue pour les enfants malvoyants).
3. Aperçu : tout le texte change de police.

Activer le mode dyslexique

Si vous travaillez avec des élèves dyslexiques, ce mode est précieux :

1. Cherchez le bouton Aa Dyslexique dans le panneau.
2. Cliquez dessus pour l'activer.
3. La police change pour OpenDyslexic, l'espacement augmente, la lecture devient plus accessible.
4. Recliquez pour désactiver.

Le secret du panneau

Quand vous changez un réglage avec les boutons à droite, MarkForm modifie automatiquement le bloc YAML en haut de votre texte, à gauche. Regardez : votre texte commence maintenant par quelque chose comme :

---
mode: site
titres: #2563eb
police: Luciole
---

Ces lignes disent à MarkForm comment afficher la page. Vous pouvez les écrire à la main si vous préférez, mais utiliser les boutons est plus simple.

💡 Astuce : pour réinitialiser tous les réglages, effacez tout le bloc YAML (entre les deux lignes ---) et remettez juste mode: site.

Étape 5 — Le mode Liens (votre page d'accueil)

Le mode Liens transforme votre texte en portail de liens : pratique pour faire une page d'accueil personnelle ou un annuaire de ressources pour vos élèves.

Effacer et recommencer

1. Effacez tout le contenu de la zone de texte.
2. Collez ceci :

---
mode: liens
colonnes: 3
---

# Mes liens utiles
### Tous mes outils du quotidien

## Outils de l'école
- [iProf](https://iprof.education.gouv.fr) Mon espace de gestion personnelle
- [Webmail académique](https://webmail.ac-paris.fr) Mes mails professionnels
- [Pronote](https://pronote.toutalamaison.fr) Cahier de textes et notes

## Ressources pédagogiques
- [Lumni](https://www.lumni.fr) Vidéos éducatives
- [Éduscol](https://eduscol.education.fr) Programmes officiels
- [Wikipédia](https://fr.wikipedia.org) Encyclopédie en ligne

## Utilitaires
- [Météo](https://www.meteo-paris.com) Prévisions
- [Le Monde](https://www.lemonde.fr) Actualités
- [Wiktionnaire](https://fr.wiktionary.org) Dictionnaire en ligne

3. Cliquez sur 🔗 Générer le lien partageable.

Ce que vous voyez

Une magnifique page d'accueil avec :

• Un grand titre « Mes liens utiles » au centre.
• Une barre de recherche automatique (tapez « lumni » et seul Lumni apparaît).
• Des filtres pour afficher seulement une catégorie.
• Trois colonnes de liens, chacun avec son titre et une description courte.

Comprendre la syntaxe Liens

Dans le mode Liens, on a quelques règles supplémentaires :

• # Titre (un seul #) : le grand titre de la page (en haut).
• ### Sous-titre (trois #) : le sous-titre affiché en italique sous le grand titre.
• ## Catégorie (deux #) : crée une catégorie de liens.
• - [Nom](adresse) Description : un lien, suivi d'une description courte (facultative).

Personnaliser

Dans le panneau de droite, essayez :

• Changer le nombre de colonnes (1, 2, 3 ou 4).
• Activer le thème sombre (bouton « Dark »).
• Masquer la barre de recherche si vous avez peu de liens.

Étape 6 — Le mode Pad (tableau de tâches)

Le mode Pad fabrique un tableau Kanban : trois colonnes (À faire, En cours, Terminé) avec des cartes que vous pouvez déplacer à la souris.

Effacer et coller

1. Effacez tout.
2. Collez ceci :

---
mode: pad
---

## À faire
### Préparer la rencontre parents-profs
Date : mardi soir, 18h. Préparer le diaporama et les fiches élèves.
### Corriger les évaluations de maths
30 copies à corriger pour vendredi.
### Acheter les cahiers
Pour la rentrée des vacances : 25 cahiers grand format.

## En cours
### Séquence sur les fractions
Semaine 3 sur 5. Continuer avec les fractions équivalentes.
### Écrire le projet d'école
Rendu attendu fin du mois.

## Terminé
### Sortie au musée
Effectuée le 10 mars. Très réussie, à refaire l'an prochain.
### Conseil de classe trimestriel
Compte-rendu envoyé aux parents.

3. Cliquez sur 🔗 Générer le lien partageable.

Ce que vous voyez

Trois colonnes côte à côte (« À faire », « En cours », « Terminé »), chacune contenant des cartes avec un titre et un petit texte.

Le bonus : déplacer les cartes

1. Cliquez sur une carte, maintenez le clic enfoncé, et déplacez-la dans une autre colonne.
2. Relâchez : la carte est maintenant dans la nouvelle colonne.

⚠️ À savoir : le déplacement n'est pas sauvegardé. Si vous rafraîchissez la page, les cartes reviennent à leur position d'origine. Pour des modifications permanentes, il faut éditer le texte source.

Comprendre la syntaxe Pad

• ## Nom de la colonne : crée une colonne (À faire, En cours, etc.).
• ### Titre de la carte : crée une carte dans la colonne en cours.
• Le texte sous le ### devient le contenu de la carte.

Étape 7 — Partager votre création

Maintenant que vous savez créer des pages, voyons comment les partager.

Le bouton « 🔗 Générer le lien partageable »

Quand vous cliquez sur ce bouton :

1. MarkForm fabrique une adresse internet (URL) qui contient toute votre page compressée.
2. Cette adresse s'affiche dans une fenêtre avec un bouton 📋 Copier.
3. Cliquez sur 📋 Copier : l'adresse est copiée dans le presse-papier.

Comment partager

Vous pouvez maintenant coller cette adresse où vous voulez :

• Dans un mail à vos collègues ou aux parents.
• Dans le cahier de textes numérique de votre école.
• Sur votre blog ou votre site.
• En message sur l'ENT.

Quand quelqu'un clique sur le lien, il voit votre page. Aucune installation, aucun compte, ça marche directement.

Une particularité importante

L'adresse est très longue parce qu'elle contient tout votre contenu. Plus votre texte est long, plus l'adresse est longue. Pour la plupart des messageries, c'est largement suffisant. Mais si votre contenu fait plusieurs dizaines de pages, il vaut mieux utiliser un pad — voir l'étape suivante.

Important à comprendre

• Aucun serveur ne stocke vos données. Tout est dans le lien lui-même.
• Cela signifie que si vous perdez le lien, vous perdez votre page. Pensez à le sauvegarder (mail à vous-même, dans vos favoris…).
• Cela signifie aussi que vos données restent privées : aucune entreprise ne peut les lire.

Étape 8 — Pour aller plus loin : utiliser un pad

Avec ce que vous avez vu jusqu'ici, vous pouvez créer toutes les pages que vous voulez. Mais il y a une limite : si vous voulez modifier votre page après l'avoir partagée, vous devez regénérer un nouveau lien et le redistribuer à tout le monde. Pas pratique.

La solution : utiliser un pad (un document en ligne).

Pourquoi un pad ?

Avec un pad :

• Vous écrivez votre Markdown dans le pad, pas dans MarkForm.
• Le lien partageable de MarkForm pointe vers votre pad.
• Quand vous modifiez le pad, la page MarkForm change automatiquement pour tous ceux qui ont le lien.
• Plus besoin de redistribuer le lien à chaque modification.

Quel pad utiliser ?

Plusieurs services sont compatibles avec MarkForm :

• CodiMD apps.education.fr : si vous êtes enseignant en France, c'est l'option la plus simple. Vous vous connectez avec vos identifiants académiques.
• HedgeDoc : si votre école ou vous-même avez votre propre serveur (par exemple via YunoHost).
• Framapad : un service gratuit de l'association Framasoft, sans inscription.

Avec CodiMD apps.education.fr

1. Allez sur https://codimd.apps.education.fr.
2. Cliquez sur Se connecter et utilisez vos identifiants académiques.
3. Cliquez sur « Nouveau pad » ou « New note ».
4. Une page d'écriture s'ouvre.
5. Copiez votre Markdown (depuis MarkForm, prenez tout le texte de la zone à gauche) et collez-le dans le pad.
6. Copiez l'adresse du pad dans la barre d'adresse de votre navigateur (par exemple https://codimd.apps.education.fr/AbCdEf123).
7. Retournez dans MarkForm.
8. Dans le champ « Lien CodiMD, HedgeDoc, Framapad… », collez l'adresse de votre pad.
9. Cliquez sur 📥 Charger. Le contenu du pad apparaît dans la zone de texte.
10. Cliquez sur 🔗 Générer le lien partageable : le lien généré pointera vers votre pad.

Avec Framapad

1. Allez sur https://framapad.org.
2. Choisissez la durée de conservation (par exemple « 2 mois »).
3. Donnez un nom à votre pad.
4. Cliquez sur « Créer un pad ».
5. Une page s'ouvre — c'est votre pad. Collez votre Markdown dedans.
6. Copiez l'adresse dans la barre du navigateur (par exemple https://hebdo.framapad.org/p/votre-pad).
7. Retournez dans MarkForm, collez cette adresse dans le champ « Lien CodiMD, HedgeDoc, Framapad… ».
8. Cliquez sur 📥 Charger, puis sur 🔗 Générer le lien partageable.

Le grand avantage du pad

Maintenant, quand vous modifiez votre pad (vous ajoutez un devoir, vous changez un horaire…), la page MarkForm change automatiquement pour vos élèves, parents ou collègues. Vous ne renvoyez jamais de nouveau lien.

💡 Astuce : enregistrez l'adresse de votre pad dans un endroit sûr (favoris du navigateur, fichier texte sur votre ordinateur). C'est là que vous irez pour modifier votre contenu.

Une particularité à connaître

Les réglages d'apparence (couleurs, police…) sont stockés dans le bloc YAML en haut de votre pad. Si vous changez un réglage dans MarkForm après avoir chargé le pad, pensez à recopier le bloc YAML mis à jour dans votre pad pour que les changements soient permanents.

En cas de problème

Mon texte ne s'affiche pas comme je veux

Vérifiez :

• Y a-t-il bien un espace après les ## ? (## Titre et non ##Titre)
• Y a-t-il bien deux dièses pour les titres de section ? (## et non #)
• Le bloc YAML en haut est-il bien encadré par deux lignes de trois tirets ? (---)
• Avez-vous sauté une ligne entre deux paragraphes ?

Le bouton « Charger » télécharge un fichier au lieu de l'afficher

C'est normal pour certains pads. Cela signifie que le service n'est pas totalement compatible. Dans ce cas :

1. Le navigateur ouvre un nouvel onglet vers votre pad.
2. Dans cet onglet, faites Ctrl+A (sélectionner tout) puis Ctrl+C (copier).
3. Revenez dans MarkForm et collez (Ctrl+V) dans la grande zone de texte.
4. Continuez normalement.

J'ai perdu mon lien partageable

Malheureusement, MarkForm ne stocke rien : si vous perdez le lien, le contenu est perdu. Toujours sauvegarder le lien quelque part :

• Envoyez-le-vous par mail.
• Mettez-le dans vos favoris.
• Collez-le dans un fichier texte sur votre ordinateur.

Ma page ne s'ouvre pas chez les autres

Le lien doit être copié en entier. Il est très long, donc on l'oublie parfois en partie. Vérifiez que vous avez bien tout collé.

Je veux recommencer à zéro

1. Effacez tout le contenu de la zone de texte.
2. Cliquez sur les boutons « Réinitialiser » ou recommencez avec un exemple simple.
3. Au pire, fermez l'onglet et rouvrez MarkForm.

Mémo des symboles Markdown

À garder sous le coude :

Structure

Mise en forme du texte

Listes

Liens et médias

Bloc YAML (réglages, en haut)

Pour récapituler

Vous savez maintenant :

• ✅ Ouvrir et utiliser MarkForm.
• ✅ Écrire en Markdown (titres, listes, gras, liens).
• ✅ Créer trois types de pages (Site, Liens, Pad).
• ✅ Personnaliser les couleurs et la police.
• ✅ Générer un lien partageable et le distribuer.
• ✅ Utiliser un pad pour des mises à jour automatiques.

Bravo ! Vous êtes désormais autonome pour créer toutes les pages web que vous voulez avec MarkForm.

💬 Une dernière chose : MarkForm est un logiciel libre (licence GPL v3). Vous pouvez l'utiliser, le copier, le modifier librement. Si vous trouvez un bug ou voulez suggérer une amélioration, contactez l'auteur du projet.

Tutoriel rédigé pour MarkForm v1.1.1 — Avril 2026.

Emmanuel H.