RL RanceLee Tutorials
← Retour aux tutoriels

Créez une page HTML gratuite en cinq minutes avec l'IA

Pourquoi ce chapitre existe : les ¥50 qui ont failli me donner une crise cardiaque

La raison pour laquelle j’écris ce chapitre est simple : un ami a dépensé 50 yuans pour faire créer une simple page web de roue de loterie.

Quand j’ai entendu ça, j’ai failli avoir une crise cardiaque.

Ce n’est pas que 50 yuans soient chers, mais cette chose peut être faite en 5 minutes avec une IA gratuite !

Sérieusement, si vous avez ce besoin, même si vous me donnez directement 50 yuans et que je vous apprenne pas à pas, c’est mieux que de payer ces services. Au moins, mes tutoriels sont gratuits, et j’explique chaque étape clairement.

Donc ce chapitre est un ajout spécial, qui vous apprend spécifiquement : comment utiliser une IA gratuite pour créer une page HTML simple mais pratique.

Rappel important : maîtrisez d’abord la version web gratuite

Avant de plonger, je veux souligner une chose :

Les versions web actuelles de l’IA sont déjà très puissantes. Pas besoin de connaissances en programmation, ni d’installation de logiciel, il suffit d’ouvrir un navigateur et d’utiliser.

Que peut faire la version web de l’IA ?

  • Discuter avec vous et répondre à vos questions
  • Reconnaître des images et analyser leur contenu
  • Écrire du code et créer des pages web
  • Créer des présentations et des rapports
  • Traduire et résumer des documents
  • Et bien plus encore…

Mon conseil : les débutants devraient d’abord se familiariser avec l’IA web gratuite avant d’envisager des outils avancés comme les API.

Pourquoi ? Parce que la version web :

  1. Est complètement gratuite (ou dispose de quotas gratuits généreux)
  2. Est simple à utiliser, sans courbe d’apprentissage
  3. Est déjà suffisamment puissante
  4. Vous permet de demander directement à l’IA si vous rencontrez des problèmes

Commençons maintenant le sujet principal : Utiliser l’IA pour créer une page web de roue de loterie.

Utiliser AI Studio pour créer une page HTML

Étape 1 : Accédez à Google AI Studio

Nous utilisons Google AI Studio, la plateforme IA gratuite officielle de Google.

Pourquoi la choisir ?

  • Complètement gratuite
  • Gemini 3 Pro est puissant
  • Adaptée aux tâches complexes comme la création de pages web

Étapes :

  1. Ouvrez https://aistudio.google.com
  2. Connectez-vous avec votre compte Google (nécessite un VPN/proxy)
  3. Entrez dans l’interface principale

Étape 2 : Sélectionnez Playground et le modèle

Après vous être connecté, vous verrez l’interface principale d’AI Studio.

Étapes :

  1. Cliquez sur “Playground” dans le menu de gauche
  2. Dans le sélecteur de modèle en haut à droite, choisissez Gemini 3 Pro
    • Ne choisissez pas Flash ; Pro est plus performant
    • Surtout pour des tâches complexes comme l’écriture de code
  3. Confirmez que la partie gauche est l’interface de chat avec une zone de saisie en bas Vous êtes maintenant prêt à discuter avec l’IA.

Étape 3 : Saisissez un prompt pour que l’IA génère la page web

Cette étape est cruciale : vous devez dire clairement à l’IA ce que vous voulez.

Plus c’est détaillé, mieux c’est ! Ne dites pas simplement “Aide-moi à créer une page de loterie”, soyez précis sur :

  • Son apparence
  • Ses fonctionnalités
  • Son utilisation
  • Son style

Exemple de prompt complet

Copiez le texte ci-dessous et collez-le dans la zone de saisie d’AI Studio :

Please help me generate a lottery wheel webpage.

If no prizes are specified, use default prizes: Grand Prize, First Prize, Second Prize, Third Prize, Lucky Prize, Try Again.

Functional requirements:
- Beautiful wheel design, supporting 6-8 sectors
- A "Start Lottery" button in the center
- Click the button to spin the wheel
- The spin should have acceleration and deceleration effects for realism
- After stopping, a popup shows the result
- Click the popup to close and spin again

Design requirements:
- Festive and grand style (mainly red and gold)
- The wheel border should have texture
- Each sector should have alternating colors
- A pointer indicating the current position
- Responsive for mobile and desktop

After completion, please explain:
1. How to open and use it
2. How to modify the prize names
3. How to adjust the winning probability

Use example prizes: iPhone 16, AirPods, 100 yuan red envelope, 50 yuan red envelope, Try Again

Étapes :

  1. Copiez et collez le prompt ci-dessus dans la zone de saisie
  2. Cliquez sur le bouton “Exécuter” ou appuyez sur Entrée
  3. Attendez que l’IA génère (généralement 10 à 30 secondes)

Étape 4 : L’IA renvoie le code HTML complet

Une fois que l’IA a fini de générer, vous verrez un gros bloc de code.

La réponse de l’IA comprend généralement :

  1. Code HTML : un fichier de page web complet
  2. Instructions d’utilisation : comment ouvrir et modifier
  3. Guide de personnalisation : comment changer les prix et ajuster les probabilités

Le code ressemble à ceci :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lottery Wheel</title>
    <style>
        /* Style code here */
    </style>
</head>
<body>
    <!-- Webpage content here -->
    <script>
        // Function code here
    </script>
</body>
</html>

N’ayez pas peur ! La page web peut déjà être exécutée maintenant ! Suivez simplement les captures d’écran et cliquez.

Étape 5 : Modifier le contenu de la page web (changer les prix, ajuster les probabilités)

La page web générée par l’IA est généralement assez complète, mais vous voudrez peut-être :

  • Changer les noms des prix
  • Ajuster les probabilités de gain
  • Changer les couleurs

Ne vous inquiétez pas, vous n’avez pas besoin de comprendre le code. Continuez simplement à demander à l’IA !

Continuez la conversation, laissez l’IA vous aider à modifier

Étapes :

  1. Ne fermez pas la fenêtre de chat d’AI Studio
    • L’IA se souvient de votre conversation précédente
    • Vous pouvez continuer à poser des questions en dessous
  2. Saisissez votre demande de modification

Exemple 1 : Changer les noms des prix

Saisissez dans la zone de saisie :

Add a settings interface to this webpage to set the probabilities and specific prizes for different awards.

Itérez jusqu’à ce que vous soyez satisfait

C’est le processus central de la création avec l’IA :

  1. Exprimez clairement ce que vous voulez
  2. L’IA génère la première version
  3. Essayez-la, trouvez des problèmes
  4. Dites le problème à l’IA, laissez-la le corriger
  5. Répétez les étapes 3 et 4 jusqu’à la perfection

Points clés :

  • N’ayez pas peur de vous embêter, essayez plusieurs fois
  • Ne modifiez qu’une chose à la fois pour un contrôle facile
  • Si l’IA modifie quelque chose de travers, dites “Non, reviens à la version précédente”

Étape 6 : Téléchargez la page web finale

Maintenant vous avez une page web de roue de loterie parfaite, comment la télécharger ?

Cliquez simplement sur le bouton de téléchargement, elle sera téléchargée sur votre machine locale, et vous pourrez l’ouvrir pour l’utiliser !

Que peuvent faire les pages HTML ? 10 recommandations de mini-outils pratiques

À ce stade, vous vous demandez peut-être : à part la loterie, quelles autres pages web puis-je créer avec l’IA ?

La réponse est : presque n’importe quel mini-outil simple !

Voici 10 exemples pratiques que vous pouvez directement demander à l’IA de créer :

1. Outil de traduction en ligne

Prompt :

Make an online translation webpage that supports Chinese-English translation with a clean interface.

2. Reconnaissance de texte dans les images (OCR)

Prompt :

Make a webpage that can upload an image, recognize text in the image, and allow copying.

3. Liste de tâches

Prompt :

Make a to-do list webpage that can add, delete, and mark tasks as complete, with data saved in the browser.

4. Compte à rebours / Minuteur

Prompt :

Make a multi-functional timer webpage: countdown, Pomodoro timer, stopwatch.

5. Générateur de mots de passe aléatoires

Prompt :

Make a password generator that can set length and complexity, with one-click copy.

6. Calculateur d’IMC

Prompt :

Make a BMI health calculator that inputs height and weight and displays health advice.

7. Générateur de code QR

Prompt :

Make a QR code generation webpage that inputs text or URL, generates a QR code, and allows download.

8. Sélecteur de couleurs

Prompt :

Make a color tool that can select colors, display RGB/HEX values, and provide color scheme suggestions.

9. Éditeur Markdown

Prompt :

Make a simple Markdown editor with input on the left and real-time preview on the right.

10. Suivi de dépenses

Prompt :

Make a simple expense tracking webpage that can record income and expenses and display statistical charts.

Caractéristiques communes de ces outils :

  • Ce sont tous des fichiers HTML uniques
  • Aucun serveur requis
  • Il suffit de les ouvrir dans un navigateur
  • Complètement gratuits

Questions fréquentes

Q1 : Je ne comprends rien au code, puis-je vraiment le faire ?

R : Oui, vous le pouvez ! Tout ce que vous devez savoir c’est :

  1. Copier et coller
  2. Enregistrer un fichier
  3. Ouvrir un fichier avec un navigateur

Juste ces trois étapes, même un enfant peut le faire.

Q2 : Que faire si le code généré par l’IA n’est pas parfait ?

R : C’est normal ! Continuez la conversation avec l’IA :

  • “Il y a un bug ici, cliquer sur le bouton ne fait rien”
  • “Cette couleur est moche, change-la pour quelque chose de joli”
  • “Peux-tu ajouter un effet sonore ?”

L’IA continuera à s’améliorer en fonction de vos retours.

Q3 : Puis-je utiliser les pages web créées par l’IA à des fins commerciales ?

R : Techniquement oui, mais notez :

  • Le code généré par l’IA n’a généralement pas de restrictions de droits d’auteur
  • Mais si c’est pour un projet client, testez-le minutieusement
  • Pour des projets commerciaux complexes, il est toujours recommandé d’embaucher un développeur professionnel

Q4 : Pourquoi mon fichier HTML ne s’ouvre-t-il pas ?

R : Raisons courantes :

  1. Extension de fichier incorrecte : assurez-vous que c’est .html, pas .html.txt
  2. Code incomplet : assurez-vous d’avoir copié tout le code
  3. Problème de navigateur : essayez un autre navigateur

Q5 : Puis-je l’utiliser sur mobile ?

R : Oui ! Deux méthodes :

  1. Transférez le fichier HTML sur votre téléphone et ouvrez-le avec un navigateur mobile
  2. Téléchargez-le sur des plateformes comme Netlify et accédez-y via une URL (recommandé)

Q6 : Je veux modifier le code mais je ne sais pas comment ?

R : Ne le modifiez pas vous-même ! Demandez à l’IA :

  • “Je veux changer la couleur de fond en bleu”
  • “Je veux agrandir la police du titre”
  • “Je veux ajouter une musique de fond”

Laissez l’IA le modifier pour vous, puis copiez le nouveau code.

Résumé

Aujourd’hui vous avez appris :

  1. Comment utiliser Google AI Studio pour générer une page HTML
  2. Comment écrire des prompts clairs pour dire à l’IA vos besoins
  3. Comment enregistrer le fichier HTML et l’ouvrir dans un navigateur
  4. Comment améliorer continuellement la page web via la conversation
  5. Comment partager ou déployer votre page web

Idée centrale :

  • Pas besoin de connaissances en programmation
  • Pas besoin d’argent
  • Juste besoin de savoir communiquer avec l’IA
  • Créez un outil pratique en 5 minutes

La prochaine fois que quelqu’un vous demande de créer une page web simple, vous pourrez :

  1. Utiliser l’IA pour le faire en 5 minutes
  2. Lui facturer ces 50 yuans (je plaisante)
  3. Ou lui apprendre à le faire lui-même

Sérieusement, arrêtez de gaspiller de l’argent !