Comment intégrer un visuel à l'aide de BOOTSTRAP
| Site: | Plateforme MM25 |
| Cours: | Bac à sable - Moodle Anthology : les meilleures pratiques des ingénieurs pédagogiques |
| Livre: | Comment intégrer un visuel à l'aide de BOOTSTRAP |
| Imprimé par: | Visiteur anonyme |
| Date: | lundi 19 janvier 2026, 19:49 |
Description
Vous êtes dans une ressource de type "Livre". Vous avez plusieurs pages à consulter.
Dans le bloc de droite, vous voyez les pages du livre.
Vous pouvez passer à la page suivante en cliquant sur l'icône 
(en haut à droite de la page)
Revenez à la page précédente avec le bouton à gauche de la page.
Bonne lecture
1. introduction
BOOTSTRAP fournit du code HTML intégrable dans tout éditeur de texte de MOODLE.
Ce code HTML crée des éléments WEB ( bouton , bandeau , mise en page, ... ) Ce code est particulièrement adapté au thème "BOOST" de MOODLE puisque ce thème utilise BOOTSTRAP. Avec un autre thème, il est possible d'avoir des différences.)
Il suffira d'aller chercher ce bout de code sur le site de Bootstrap et de le copier-coller dans l'éditeur de texte (après avoir cliqué sur l'icone 
du menu "outils").
Pour finir , il convient d'inclure (= remplacer le texte exemple de Bootstrap) le texte que l'on souhaite faire apparaître dans l'élément.
Il est fortement conseillé d'avoir des notions en HTML pour ne pas faire de "bêtises". (Une alternative est proposé en page de conclusion.)
C'est parti !
2. Le site à consulter
Aller sur le site suivant :
Dans le menu de gauche, choisissez les éléments que vous aimeriez utiliser dans votre cours MOODLE.
Le menu de gauche classe les éléments par thème. En cliquant sur le nom d'un élément, un visuel est présenté avec son code HTML dessous. Copiez ce code.
3. Dans le cours MOODLE
Dans un espace de cours MOODLE, l'élément Zone de texte et média vous permet d'intégrer du texte , des images, des vidéos mais aussi n'importe quel élément d'une page web.
Une page web transmise par un serveur à votre navigateur est transmise sous format texte : du code HTML. C'est votre navigateur qui lit ce code HTML et il le traduit en image à l'écran. On appelle aussi ce code HTML : "code source de la page". Les éléments du code sont encadrés des caractères "<" et ">" d'où le symbole "<>" des icônes que l'on retrouve partout dans les logiciels et qui indiquent que l'on peut insérer ce type de code HTML.
Partout où vous avez un éditeur de texte MOODLE, vous pouvez y insérer du code HTML à condition de cliquer au préalable sur l'icône 
(Code source) du menu "outils" (de l'éditeur de texte TinyMCE) .
- Ajoutez une Zone de texte et média (ou une ressource de type Page) à votre cours
- Cliquez sur le menu "Outils" et choisissez "Code source"
- Collez le code HTML que vous avez copié sur le site Bootstrap (voir la page précédente de ce livre)
- cliquez de nouveau sur "Code source" pour voir le résultat
- Remplacez le texte exemple par votre texte ( Il est souvent préférable de remplacer le texte directement dans le code source affiché)
- Enregistrez vos modifications.
4. Le résultat obtenu
Ci-dessous, nous avons collé le code HTML suivant (après avoir affiché le code source de l'éditeur de texte)
Ce code correspond à "Jumbotron" du menu "Components" du site Bootstrap dont le lien figure en page 2.
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>Le résultat à l'affichage est celui ci-dessous :
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
Répété et modifié par mon texte cela donne :
Bienvenue dans le livre sur BOOTSTRAP,
Ou comment intégrer facilement des éléments web dans son espace de cours MOODLE.
Nous allons voir ici comment aller récupérer le code HTML et l'insérer dans un éditeur de texte ; éditeur présent partout dans une plateforme de type MOODLE.
5. Conclusion
Ce livre vous a montré comment intégrer toute sorte de code HTML dans votre cours. En maîtrisant l'HTML, vous pouvez créer tous (ou presque) les visuels que vous voyez sur n'importe quel site web.
Un " widgetHub component" peut être installé sur votre éditeur TinyMCE. Il pourrait vous faciliter grandement la vie et vous affranchir du code. Il reste cependant limité à ses propositions.
Puisque vous avez gouté aux possibilités infinies du code HTML et qu'on ne peut plus vous arrêter, le site suivant va vous fournir tout le code que vous souhaitez ; du plus simple au (un peu) plus compliqué.
Il y a même un onglet "BOOTSTRAP" !!
https://www.w3schools.com/ (lien cliquable , ouverture dans un nouvel onglet)
Merci d'avoir suivi ce tutoriel. Il est maintenant terminé.
- Florence Barrière
- Chantal Couture
- Florence Rouillé
- Gilles Tartare ( gilles.tartare@lacatholille.fr )