Comment modifier le HTML généré par ChatGPT

ChatGPT vient de te tendre une page HTML complète — en-tête, hero, une rangée de cartes, un pied de page. Elle est bien. Bien à quatre-vingt-quinze pour cent. Mais un bouton affiche Commencor, et ta main file déjà vers la zone de chat pour taper corrige la faute et régénère.

Ne fais pas ça.

Voici le chemin plus rapide. Pour modifier le HTML que ChatGPT a écrit, tu ne reprompte pas pour les broutilles — tu enregistres son code en fichier .html et tu ouvres ce fichier dans un éditeur visuel, où tu changes le texte et le code directement. La faute, un lien erroné, une couleur à côté — corrige ça dans le fichier et laisse les 95 % restants tranquilles.

Le reste, c'est le pas-à-pas concret, plus les deux ou trois endroits où les gens dérapent.

demande toute la page en un seul fichier

Avant d'enregistrer quoi que ce soit, une chose compte plus qu'elle n'en a l'air. Demande à ChatGPT de garder la page entière dans un seul fichier — le HTML, le style, et le moindre bout de JavaScript, tout en inline, tout dans un même bloc.

Pourquoi s'embêter ? Parce qu'un fichier unique, c'est une chose que tu peux ouvrir et tenir. Un .html, une page, terminé. À la seconde où ChatGPT le découpe en un styles.css, un script.js et un dossier de morceaux, tu n'édites plus une page — tu jongles avec un petit projet, et ça réclame une config de code dont cet article ne parle pas.

Alors quand tu prompte, dis-le clairement. Un truc comme mets tout le CSS et le JS en inline dans un seul fichier HTML, aucun fichier externe. Tu récupères un seul bloc de code. C'est la forme que tu veux.

sors-le du chat et pose-le sur ton disque

Le code posé dans la fenêtre de chat n'est pas encore un fichier. C'est du texte qui parle d'un fichier.

Copie le bloc entier — il y a une icône de copie dans son coin. Ouvre n'importe quel éditeur de texte brut, colle, et enregistre sous page.html. Le nom n'a aucune importance. Le .html à la fin, si.

Un piège sous Windows. Certains éditeurs glissent un .txt sans rien te dire, et tu te retrouves avec page.html.txt, qui n'est pas une page web — c'est un document texte déguisé. Active l'affichage des extensions dans ton explorateur et vérifie. Si ChatGPT a construit la page dans son canvas plutôt que dans un bloc de chat, saute tout ça et utilise simplement son bouton de téléchargement.

ouvre-le là où tu peux vraiment le voir

Maintenant, double-clique sur le fichier. Il s'ouvre dans ton navigateur et voilà ta page, faute du bouton comprise.

Voici le piège qui attrape tout le monde une fois. Cette vue du navigateur est en lecture seule. Tu peux regarder, pas toucher. Pour changer quoi que ce soit, il faut ouvrir le fichier dans un éditeur, pas juste l'afficher.

Tu as deux genres. Un éditeur de code te montre les balises brutes, très bien si lire du HTML t'amuse. Un éditeur visuel te montre la page elle-même et te laisse cliquer dessus — ce que la plupart des gens veulent vraiment. HTML Tweak est du genre visuel. Il ouvre ton fichier .html directement dans le navigateur, affiche la vraie page, et garde le code synchronisé à côté. C'est gratuit, sans inscription, et il ouvre un fichier à la fois — ce qui, pour une page que ChatGPT vient de faire, tombe pile à la taille du problème.

clique les mots et tape par-dessus

C'est là que vivent la plupart des « corrections », et c'est la vérité plate que personne ne te dit quand on te vend des sites bâtis par IA. Les modifs dont tu as besoin ne sont presque jamais structurelles. C'est un mot. Un numéro de téléphone. Un lien qui pointe vers example.com parce que ChatGPT ne connaissait pas ta vraie adresse.

Dans un éditeur visuel, tu cliques le bouton qui dit Commencor, et tu tapes Commencer. C'est tout. Clique le titre, réécris-le. Clique un paragraphe, resserre-le. Fais pointer un lien vers quelque chose de réel. Remplace l'image d'attente par la tienne.

Et si tu confies cette page à quelqu'un qui panique à la vue du code, il y a un mode texte seul qui verrouille la mise en page pendant l'édition. Tu peux réécrire chaque mot de la page sans pouvoir, physiquement, tordre le design. J'ai construit ce mode parce que je voyais sans arrêt des non-codeurs « corriger une faute » et supprimer au passage une balise fermante.

quand cliquer ne suffit pas, ouvre le code

Parfois, ce que tu veux changer n'est pas du texte.

La couleur d'accent tire un peu trop sur le bleu. L'espace sous le hero est à l'étroit. ChatGPT a laissé une balise à moitié ouverte et une section a l'air cassée. Pour ça, tu passes en vue code, tu trouves la ligne, et tu la changes — une valeur hexa, un peu de padding, un > manquant.

Tu n'as pas besoin de comprendre tout le fichier. Il te faut la seule bonne ligne. Dans un éditeur à double sens, tu cliques l'élément sur la page et son code s'allume à gauche, donc tu ne fais pas défiler 400 lignes à la recherche du bon <div>. Change la ligne, regarde la page se mettre à jour, passe à la suite.

enregistre — et le seul piège du navigateur

Tu as fait tes changements. Enregistre-les.

Un point à signaler ici, parce que la façon d'enregistrer dépend de ton navigateur. Sous Chrome et Edge, HTML Tweak peut réécrire les changements directement dans le fichier que tu as ouvert — tu choisis le fichier une fois, et ça enregistre sur place ensuite. Sous Firefox, Safari et les autres, il télécharge plutôt une copie modifiée, et tu gardes cette copie. Un peu moins pratique, même résultat. Rien n'est envoyé où que ce soit dans les deux cas ; le fichier reste sur ta machine du début à la fin.

regarde-la avant tout le monde

Rouvre le fichier enregistré dans ton navigateur une dernière fois et lis-le comme le ferait un inconnu. C'est l'étape que les gens sautent, avant de découvrir que la faute survit dans la version qu'ils ont envoyée par mail.

« Publier » n'a rien de sorcier. Ton fichier est déjà une vraie page .html. Glisse-la sur ton hébergeur, joins-la à un mail, dépose-la dans un dossier partagé — pour ce à quoi la page devait servir. Elle se comporte comme n'importe quelle page web désormais, parce que c'en est une.

là où ça a tendance à foirer

Quelques schémas, parce que j'ai fait la plupart moi-même.

Reprompter pour une correction d'un mot. Tu demandes à ChatGPT de « corriger la faute » et il régénère toute la page — une formulation neuve que tu n'as pas demandée, un ajustement de mise en page dont tu ne voulais pas, et te voilà à comparer deux versions pour repérer ce qui a bougé. Pour les retouches de dernière minute, le fichier gagne. Il y a un article compagnon sur modifier une page HTML générée par IA sans tout recommencer si tu veux l'argumentaire complet.

Demander un « site web » et récupérer un projet. Dis « fais-moi un site web » et ChatGPT peut te tendre un échafaudage React ou Next étalé sur une douzaine de fichiers. C'est une vraie chose, mais ce n'est pas une page que tu ouvres et cliques pour éditer. Si tu veux le déroulé mono-fichier, demande le fichier unique, à voix haute.

Éditer l'onglet du navigateur en s'attendant à ce que ça tienne. Afficher un fichier, ce n'est pas l'éditer. Les changements que tu crois faire dans un simple aperçu de navigateur ne vont nulle part. Ouvre-le dans un vrai éditeur.

Des images qui n'existaient que dans le chat. Parfois la page pointe vers une image dont ChatGPT a inventé l'URL, ou une qui vivait dans la conversation. Elle s'affichera cassée. Fais pointer ces balises <img> vers de vrais fichiers que tu as.

Aucune sauvegarde avant une grosse édition. Si tu t'apprêtes à retravailler la moitié de la page, duplique le fichier d'abord. Ça te coûte deux secondes et t'épargne un après-midi gâché.

---

Copie le code de ChatGPT dans un fichier, ouvre-le dans HTML Tweak, et corrige la seule chose qui cloche vraiment. Les 95 % restants n'ont pas besoin d'être au courant.