Tu n'as pas besoin de savoir coder. Dans ce guide, c'est l'IA qui écrit ta page, et toi tu la guides avec des mots. À la fin, tu auras un vrai site en ligne, avec une adresse à partager et, si tu le veux, un code d'accès.
On suit Sophie et sa boutique de savons artisanaux comme exemple, mais la méthode fonctionne pour n'importe quel projet : un voyage, une marque, un portfolio, un événement. On y va, une étape à la fois.
Avant de commencer
C'est quoi un site web, en deux minutes
Quatre idées simples qui rendent tout limpide.
- Une page web, c'est un fichier. Un fichier HTML, c'est la page elle-même. Il s'ouvre dans n'importe quel navigateur.
- Un site, c'est un dossier. Une ou plusieurs pages rangées dans un dossier chez un hébergeur, une entreprise qui garde ton dossier accessible en tout temps.
- L'adresse mène au dossier. L'adresse web, l'URL, c'est le chemin qui conduit les visiteurs jusqu'à ta page.
- Un code, c'est un verrou. Tu peux protéger ton dossier pour que seules les personnes invitées puissent voir la page.
Le bon outil
ChatGPT ou Claude, lequel choisir
Les deux génèrent ta page. Prends celui où tu es déjà à l'aise, la méthode reste la même.
Claude
Il affiche ta page dans un panneau d'aperçu que tu vois se construire et que tu ajustes en direct. Très à l'aise avec le code, parfait pour peaufiner le visuel.
ChatGPT
Il écrit ta page dans son espace de travail, le canevas, ou te remet le fichier complet. Pratique si tu y passes déjà tes journées.
Étapes 1 et 2
Décrire ton site, puis générer ta page
Plus ta description est claire, plus ta page sera réussie du premier coup. Décris le but, le public, les sections, le ton et les couleurs.
Prompt de cadrage
Je veux créer une page web simple pour [ton projet]. Public visé : [qui]. But de la page : [quoi]. Sections souhaitées : [par exemple accueil, à propos, produits, contact]. Ton et style : [par exemple chaleureux et épuré]. Couleurs : [par exemple crème et vert sauge]. Avant de commencer, pose-moi les questions qui te manquent.
Une fois ton brief prêt, demande une seule page complète, en un seul fichier.
Prompt maître
À partir de mon brief, crée une page web complète en un seul fichier HTML autonome, sans dépendance externe. Rends-la responsive pour téléphone et ordinateur, agréable à lire. Inclus ces sections : [ta liste]. Utilise les couleurs [tes couleurs] et un ton [ton]. Ajoute un titre clair, une courte introduction et une section de contact. Donne-moi le fichier complet, prêt à télécharger.
Étape 3
Ajuster, une étape à la fois
Ta première version est un point de départ. On l'améliore une demande à la fois, et tu valides à chaque étape.
- Ajuster les couleurs : « Change la palette pour [tes couleurs] et garde tout le reste identique. »
- Retravailler un texte : « Réécris l'introduction pour qu'elle soit plus chaleureuse, en deux phrases. »
- Ajouter une section : « Ajoute une section [nom] qui contient [ce que tu veux]. »
- Ajouter un menu : « Ajoute en haut un menu avec un lien vers chaque section. »
- Soigner le mobile : « Vérifie que la page s'affiche bien sur téléphone et corrige ce qui déborde. »
Étape 4
Ajouter tes images
Deux options : tes propres photos, ou des images créées par l'IA.
Tes photos. Demande à l'IA de les intégrer directement dans le fichier pour qu'il reste autonome.
Images générées. Dans l'outil qui le permet, décris l'image voulue, puis demande de l'insérer dans la page.
Générer une image
Crée une image [description, style, couleurs] pour l'en-tête de ma page.
Insérer l'image
Intègre cette image en haut de ma page, en gardant le fichier autonome.
Étape 5
Récupérer et vérifier ton fichier
Il te faut maintenant le fichier sur ton appareil.
- Demande le fichier complet, ou copie tout le code HTML que l'outil affiche.
- Colle-le dans un éditeur de texte simple, Bloc-notes sur PC ou TextEdit en format brut sur Mac, et enregistre sous le nom index.html.
- Ouvre ce fichier : il s'affiche dans ton navigateur. C'est ta page.
Étape 6
Mettre ta page en ligne
Une page web, c'est un fichier déposé dans un dossier chez un hébergeur. Voici comment faire, avec GoDaddy en exemple.
- Connecte-toi à GoDaddy, va à la page des produits, et sous Hébergement Web choisis Gérer, puis ouvre le Gestionnaire de fichiers.
- Ouvre le dossier public_html, ou crée un sous-dossier, par exemple boutique, pour ranger ta page.
- Choisis Téléverser et dépose ton fichier index.html.
- Ouvre ton adresse dans le navigateur, par exemple tonsite.com/boutique. Ta page est en ligne.
Étape 7, facultative
Poser un code d'accès
Pour réserver ta page à certaines personnes, protège le dossier.
- Dans cPanel, section Fichiers, ouvre Confidentialité du répertoire.
- Choisis ton dossier, coche Protéger ce répertoire par mot de passe, donne-lui un nom, puis Enregistrer.
- Dans Créer un utilisateur, choisis un identifiant et un mot de passe, puis Enregistrer. C'est ton code d'accès.
- Teste : ouvre le lien, une fenêtre demande l'identifiant et le mot de passe.
Étape 8, et au-delà
Mettre à jour ton site, et aller plus loin
Ta page n'est jamais figée. Quand quelque chose change, retourne dans ton outil, demande la mise à jour, récupère le nouveau fichier index.html, puis téléverse-le par-dessus l'ancien dans le Gestionnaire de fichiers. Ta page se met à jour aussitôt.
Plusieurs pages
Crée d'autres fichiers, par exemple produits.html, et demande à l'IA d'ajouter des liens entre les pages.
Ton propre nom de domaine
Un domaine personnalisé, par exemple tamarque.com, se rattache à ton hébergement pour une adresse à ton image.
Un formulaire de contact
Une page seule ne peut pas envoyer de courriel toute seule, alors demande à l'IA l'option la plus simple pour recevoir les messages.
Ta petite fiche
À retenir
- Un seul fichier autonome, un seul dossier : tu t'y retrouves toujours.
- Nomme ta page index.html.
- Une demande à la fois quand tu ajustes, et tu valides à chaque étape.
- Vérifie ta page toi-même avant de la partager.
- Rien de sensible sur une page publique, et garde tes mots de passe en lieu sûr.
Pour continuer
Créer un site web avec ChatGPT ou Claude, le guide complet
La méthode en huit étapes détaillée, tous les prompts prêts à copier, un vrai contrôle d'accès et un bonus album de voyage.
La suite de ton cap
Tu sais maintenant transformer une idée en site web. Le guide complet t'amène plus loin, avec la méthode entière et tous les prompts.