Les intelligences artificielles génératives (IAG) peuvent produire des pages HTML interactives complètes sous forme de code HTML. Ce tutoriel vous explique comment récupérer ce code, le transformer en fichier utilisable et le distribuer à vos élèves, sans aucun logiciel complexe.

Étapes pour utiliser le code HTML

Copier le code HTML produit par l'IAG

Lorsque vous demandez à une IAG (comme Copilot pou Gemini) de créer une page HTML, elle vous retourne un bloc de code. Sélectionnez l'entièreté du code, du premier <!DOCTYPE html> jusqu'à la dernière balise </html>, puis copiez-le.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <title>Mon jeu d'évasion</title>
    <style>
      body { background-color: #222; color: white; }
    </style>
  </head>
  <body>
    <h1>Bienvenue dans le jeu !</h1>
    <p>Répondez aux questions pour vous évader...</p>
  </body>
</html>

Conseil

La plupart des interfaces IAG affichent un bouton « Copier » directement dans le bloc de code. Utilisez-le pour éviter les erreurs de sélection.

Ouvrir un éditeur de texte

Vous avez besoin d'un éditeur de texte simple pour coller le code. Voici les options selon votre système d'exploitation.

Windows
  • Bloc-notes (inclus)
  • Notepad++ (recommandé)
Mac ou Linux
  • CotEditor (Mac)
  • VS Code (tous systèmes)

À noter

N'utilisez pas un traitement de texte comme Word ou LibreOffice, car ils ajoutent du formatage qui briserait le code.

Coller le code et enregistrer en .html

Dans l'éditeur de texte ouvert, collez le code copié, puis enregistrez le fichier en suivant ces étapes importantes.

  • Cliquez sur Fichier > Enregistrer sous...
  • Dans le champ « Type de fichier », choisissez Tous les fichiers (*.*) (sinon, le fichier sera sauvegardé en .txt).
  • Nommez votre fichier avec l'extension .html, par exemple : activite-fractions.html
  • Évitez les espaces et les accents dans le nom du fichier.

Bonne pratique

Utilisez des noms courts et descriptifs, comme jeu-ecosystemes.html ou quiz-electricite.html. Cela facilite le repérage et le partage.

Ouvrir le fichier dans le navigateur

Rendez-vous dans le dossier où vous avez enregistré le fichier. Double-cliquez sur le fichier .html : il s'ouvrira automatiquement dans votre navigateur web (Chrome, Edge, Firefox, Safari) et sera prêt à être utilisé.

Le fichier fonctionne sans connexion Internet, directement depuis votre ordinateur. Aucune installation requise.

Téléverser dans Teams ou SharePoint (visionneuse « sinple » intégrée)

Si votre milieu utilise Microsoft 365 Éducation, une mise à jour récente d'OneDrive et de SharePoint permet d'ouvrir un fichier .html directement dans le navigateur, mise en forme et interactivité comprises (le document HTML ne doit pas contenir de ressources externes comme des images ou des CDN, ni de liens vers l'externe de la page), sans téléchargement ni logiciel tiers. Vous pouvez donc téléverser le fichier créé à l'étape 3 dans les documents d'une équipe Teams ou d'un site SharePoint pour le rendre accessible d'un simple clic à vos élèves.

  • Dans Teams, ouvrez l'onglet Documents du canal visé (ou, dans SharePoint, la bibliothèque de documents du site).
  • Cliquez sur Charger (ou Téléverser), puis sélectionnez le fichier .html enregistré à l'étape 3.
  • Une fois le fichier dans la liste, cliquez directement sur son nom : il s'ouvre dans la visionneuse intégrée de Microsoft, à même le navigateur.
  • Partagez le lien du fichier à vos élèves (clic droit sur le fichier, puis Partager ou Copier le lien) : ils y accèdent avec leur compte scolaire, sans rien installer.

Bonne pratique

Ce comportement dépend de la version de Microsoft 365 déployée dans votre centre de services scolaire. Avant d'utiliser cette méthode en classe, testez l'ouverture du fichier avec un compte élève (ou un compte test) pour confirmer que l'activité s'affiche et fonctionne correctement.

Vos élèves accèdent à l'activité interactive directement dans l'interface Microsoft qu'ils utilisent déjà, sans passer par un fichier à télécharger.

Partager le fichier avec vos élèves

Une fois votre fichier HTML créé, plusieurs options s'offrent à vous pour le distribuer à vos élèves. Consultez les tutoriels vidéo ci-dessous.

Partager le fichier
Envoyer directement le fichier HTML à vos élèves via courriel ou espace de classe.
Utiliser Google Sites
Intégrer la page HTML dans un site Google pour un accès facile par URL.
Forcer un téléchargement depuis Google Drive
Créer un lien qui déclenche automatiquement le téléchargement du fichier HTML.
Publier avec GitHub Pages
Héberger votre fichier HTML en ligne gratuitement et le rendre accessible par URL à vos élèves.

Pour le tutoriel sur le téléchargement forcé, vous pouvez également utiliser le générateur de lien de téléchargement du RÉCIT MST.

Autres tutoriels — RÉCIT SED