---
title: Tutoriel Markpage (drane PC_elea)
author: Drane ac-clermont
date: 2025
tags:
- markpage
- tutoriel
- drane PC_elea
- apps
---
# Tutoriel MarkPage - site web *([ac-clermont](https://pedagogie.ac-clermont.fr/numerique-educatif/category/documentation-et-tutoriels/))*
<center>
</center>
:::spoiler ✴ **Contact académique :**
:::success
* Mail accompagnement Eléa sur l'académie : **accompagnement.elea@ac-clermont.fr**
:::
:::spoiler 🔍 **Documentation et tutoriels des services de “apps.education”**
:::info
* [**Documentation et tutoriels des services de “apps.education”**](https://codimd.apps.education.fr/s/swCBEVTHZ#)
:::
<center>
**NEW 03/25**💥
</center>
----
## 1️⃣ Pourquoi utiliser MarkPage
:::info
MarkPage est un outil qui permet de créer des pages web de manière simple et rapide, sans avoir besoin de connaissances techniques en développement web. Il est basé sur le principe du markdown, un langage de balisage léger et facile à utiliser.
:::
<center>
</center>
Application créée et soutenue par [**Cédric Eysette**](https://eyssette.forge.apps.education.fr/)
## 2️⃣ Comment utiliser Markpage
* [**Présentation et tutoriel Cédric Eysette**](https://markpage.forge.apps.education.fr/)
* [**Site markpage démo-tuto**](https://markpage.forge.apps.education.fr/#https://codimd.apps.education.fr/s/NIMnWbDsj) *(dans le site, lien pour accéder au CodiMD de création du site)*
<center>
</center>
### ✅ Principe de création
>Deux fenêtres du navigateur à ouvrir
1. Une pour construire le site en markdown (ici dans CodiMD)
<center>
</center>
2. Une autre pour visualiser le site (ici à l'adresse
```
https://markpage.forge.apps.education.fr/#URL du CodiMD
```
<center>
</center>
:::success
:::spoiler 1. **Lancer l'éditeur CodiMD**
1. [**Se connecter à CodiMD**](https://codimd.apps.education.fr) (avec son identifiant académique) 
2. **Créer une nouvelle note** 
3. La page est prête pour saisir du code en markdown entre autres ou Copier-coller du code.
<center>
</center>
:::
:::info
:::spoiler 2. Copier-coller l'**entête au début de la note CodiMD**
Copier-coller l'entête au début de la note CodiMD pour paramétrer la recherche, le fonctionnement...
*Entête de paramétrage non visible sur le site.*
```
---
title: site markpage demo (drane PC_elea)
author: Drane ac-clermont
date: 2025
tags:
- drane PC_elea
- apps
- markpage
- forge
maths: true
theme: colors
style: a{color:red}
recherche: true
lienPageAccueil: true
oneByOne: false
addOns: lightbox
---
```
<center>
</center>
:::
:::success
:::spoiler 3. **Structurer le site**
**Les (#), sans les parenthèses, permettent de struturer rapidement l'architecture du site.**
(#) titre de niveau 1 pour le **titre du site** sur la page d'accueil
(##) titre de niveau 2 pour les titres des **onglets**
(###) titre de niveau 3 pour les **pages**
(####) pour les **titres dans la page**
(#####) pour les sous-titres
...
```
Exemple :
# 🌐 Mon site
## ⬜ Onglet 1
### 🟠Page 1.1
#### Titre 1 page 1.1
contenu page 1.1.1
#### Titre 2 page 1.1
contenu page 1.1.2
### 🟢 Page 1.2
#### Titre 1 page 1.2
contenu page 1.2.1
## ⬛ Onglet 2
### 🟠 Page 2.1
#### Titre de page 2.1
```
<center>
</center>
:::
:::info
:::spoiler 4. **Visualiser le site**
1. Copier l'URL de la note CodiMD
2. Dans le **lien suivant** ajouter l'**URL** de votre note CodiMD
https://markpage.forge.apps.education.fr/?sec=1&subsec=1#URL
<center>
</center>
* Ou **copier l'adresse suivante** : https://markpage.forge.apps.education.fr/#URL (en remplaçant **URL** par l'URL de votre note CodiMD)
<center>
</center>
:::