Les intelligences artificielles génératives (IAG) peuvent produire des pages web 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 web, 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.

Partager le fichier avec vos élèves