Code HTML pour site web
À l'issue de cette leçon, le stagiaire génère une page web fonctionnelle à partir d'un cahier des charges textuel, et sait l'itérer jusqu'à un livrable publiable.
Décrire son besoin précisément
La qualité de la page générée dépend presque entièrement de la qualité de la description initiale. Vague génère vague. Précis génère précis.
Une description utile couvre : la fonction (page d'accueil, formulaire de contact, landing produit), les sections (header, hero, services, témoignages, contact), le contenu réel (textes, noms, chiffres — ou des placeholders explicites), l'esthétique (sobre, magazine, tech, artisanal), et les contraintes techniques (autonome, responsive, sans dépendance externe).
Structure attendue
Pour un usage professionnel, demandez systématiquement : HTML autonome single-file (un seul fichier, CSS dans <style>, JS dans <script>), responsive, et sans dépendance sauf Google Fonts en CDN si vous voulez une typographie soignée.
Cette discipline produit des fichiers que vous pouvez ouvrir hors-ligne, héberger n'importe où (Vercel, Netlify, simple FTP), et reprendre dans deux ans sans risque de dépendance cassée.
Itérer sur le rendu
La première version n'est presque jamais la bonne. Itérez par petits incréments :
« La hero section est trop vide, ajoute une illustration en SVG. »
« Les boutons sont trop grands sur mobile, réduis-les. »
« Change la palette pour un beige doux et un brun chocolat. »
« Ajoute une section témoignages avec trois cartes. »
Chaque demande est traitée et l'artefact se met à jour. Quand vous êtes satisfait, téléchargez la version finale.
Exporter et publier
Trois chemins pour mettre la page en ligne :
Publier depuis Claude (bouton Publish dans le panneau d'artefact). Génère un lien claude.site/... partageable. Pratique pour démos, mais l'URL n'est pas personnalisable et le service est lié à votre compte.
Vercel ou Netlify (gratuits pour usage personnel). Téléchargez le HTML, créez un compte, déposez le fichier, vous obtenez une URL personnalisable. La leçon 36 traite Vercel en détail.
Hébergement classique (FTP vers votre serveur). Pour les sites professionnels avec nom de domaine établi.
Générer une landing page complète
L'exercice consiste à générer une page d'accueil pour une activité fictive ou réelle. Comptez vingt minutes.
-
Rédiger un prompt qui couvre les cinq points : fonction, sections, contenu, esthétique, contraintes techniques. Plus c'est précis, mieux c'est.
-
Lancer la génération. Ouvrir l'artefact dans le panneau. Examiner le rendu desktop puis mobile (l'aperçu Claude permet de basculer).
-
Itérer trois à cinq fois sur des points précis : palette, typographie, espacement, contenu d'une section. Une demande à la fois.
-
Télécharger le fichier HTML.
macOS Le fichier arrive dans~/Downloads. Double-clic pour l'ouvrir dans le navigateur par défaut.Windows Le fichier arrive dansC:\Users\<vous>\Downloads. Clic droit → Ouvrir avec → Edge ou Chrome. -
Vérifier le rendu hors-ligne. Si la page utilise Google Fonts, elle continue de fonctionner en ligne mais affichera des polices système hors-ligne. C'est attendu.
Mini-landing page de votre activité
Générez une landing page d'une seule section qui présente votre activité (consultant, formateur, indépendant, dirigeant). Hero avec accroche, trois points-clés, formulaire de contact (factice, pas besoin qu'il envoie réellement). Téléchargez-la et conservez-la comme référence pour les leçons suivantes.
- docs.claude.com guide de génération d'artefacts HTML
- fonts.google.com typographies disponibles via CDN
Vous savez générer une page HTML autonome et la publier ?