---
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
---
* Accès au [**Site markpage démo-tuto** ](https://markpage.forge.apps.education.fr/#https://codimd.apps.education.fr/s/NIMnWbDsj) en ligne.
#  Site markpage démo-tuto
Message initial sous le titre du site :
* Accès au [**code markdown du CodiMD de se site**](https://codimd.apps.education.fr/3-jjoYT2QtmIEWKdWuYUPQ?both) à copier comme modèle éventuellement
:::info
L'environnement [Markpage](https://markpage.forge.apps.education.fr/) permet de créer rapidement un site en ligne avec des onglets dans lesquels des pages peuvent être intégrées avec du contenu (texte, image, vidéo, H5P...).
Cet outil libre a été développé, parmi d'autres, par [Cedric Eysette](https://eyssette.forge.apps.education.fr/) dans la [forge des communs numériques](https://docs.forge.apps.education.fr/).
:::
<center>
image réduite (image.png "="x200) cliquable pour une image plein écran
</center>
Ci-dessous, la liste des onglets que l'on retrouvera en bas de page quand on se trouve dans un onglet.
 pour un retour à la page d'accueil du site
:::tip
***Etapes de construction d'un site markpage dans CodiMD :***
:::
## 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>
## 2.Entête
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>
## 3.Structure
**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>
## 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>
## 5.Texte, image-vidéo-H5P
### 📝 Textes, liens (URL, image…) ...
[Voir tutoriel CodiMD](https://codimd.apps.education.fr/s/Iv4PzwF8S#2%EF%B8%8F%E2%83%A3-Mise-en-page)
<center>
[](https://codimd.apps.education.fr/s/Iv4PzwF8S)
</center>
### 🖼 Images :
* Quand on clique sur une image, elle s'affiche en plein écran
* Copier-coller l'image, d'une capture, de l'internet *(attention aux droits)*, d'un éditeur d'images,... *(attention au poids de l'image, largeur supérieure à la taille de l'écran (~1000 à 1600 pixels) inutile)*
* Génère automatique un lien vers l'image stockée dans apps
* Ajuster l'affichage de l'image :
* **Imposer taille de l'image** :
* ++Largeur imposée++ : en fin de d'URL, ajouter =Lx *(égal largeur L en pixel suivi de x)* : exemple.png =100x : 
* ++Hauteur imposée++ : en fin d'URL, ajouter =xH *(égal hauteur H en pixel précédé de x)* : exemple.png =x20 : 
### 🎬 vidéos :
* Copier-coller le code iframe d'intégration dans les partages de la vidéo
<center>
<iframe title="H5P-image-pairing" width="560" height="315" src="https://tube-sciences-technologies.apps.education.fr/videos/embed/56e6e392-38e1-44d0-8be6-3f5cb3eaf287" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
</center>
### 🟦 Blocs couleur, escamotable (admonitions)
1. Bloc (type de bloc précédé de :::)+ titre si besoin
1. Dessous insérer le contenu (texte, image, vidéo...)
1. Terminer par ( :::)
:::info Titre du bloc bleu
Bloc bleu type "info"
:::
exemple :
```
:::info Titre du bloc bleu
Bloc bleu type "info"
:::
```
:::tip
Bloc vert type "tip"
:::
:::warning
Bloc rouge type "warning"
:::
:::collapsible
Bloc gris type "collapsible"
:::
* Pour le bloc escamotable, comme ci-dessus, mais "collapsible" inséré entre le type de bloc et le titre.
:::info collapsible détails contenu COLLAPSIBLE
contenu info collapsible titre
:::
exemple :
```
:::info collapsible détails contenu COLLAPSIBLE
contenu info collapsible titre
:::
```
###  H5P
Copier-coller le code iframe du H5P hébergé en ligne ici dans digiquiz de la digitale :
<center>
</center>
* [H5P **Aïe... c'est du lourd !**](https://ladigitale.dev/digiquiz/q/67cedfdb5b718) 
Passez en "**plein écran**" pour plus de confort et voir les images.  en bas du H5P.
"**Echap**" pour sortir du plein écran.
<iframe src="https://ladigitale.dev/digiquiz/q/67cedfdb5b718" allow="fullscreen; autoplay;" frameborder="0" width="100%" height="500"></iframe>