Comment créer un site web en HTML et CSS (de A à Z) | We.Inc
Créez un site complet d'une page en HTML et CSS : squelette, en-tête, hero, sections, formulaire de contact, pied de page, mise en page responsive et publication, avec un aperçu en direct.
Comment créer un site web en HTML et CSS
Créez un dossier contenant deux fichiers texte simples : index.html pour le contenu et styles.css pour l'apparence. Commencez index.html par le squelette standard (doctype, html, head, body), liez la feuille de style dans le head, ajoutez un en-tête, les sections principales et un pied de page, puis ouvrez le fichier dans un navigateur. Envoyez le dossier sur n'importe quel hébergeur statique pour le publier.
Le projet complet en six étapes
Étape
Fichier
Ce que vous ajoutez
1. Squelette
doctype, html lang, head avec charset, viewport et title
2. Structure
header, nav, main avec des sections, footer
3. Contenu
Titres, paragraphes, une image avec texte alternatif, un formulaire
4. Style
Police, couleurs, espacements, une largeur de contenu centrée
5. Mise en page
Flexbox pour l'en-tête, grid pour les cartes, une media query
6. Publication
Les deux
Envoyer le dossier sur un hébergeur statique
Voici le projet complet, pas seulement le premier fichier. Vous allez écrire la page d'une petite entreprise, d'un dossier vide jusqu'à une mise en page responsive, et le générateur ci-dessous vous permet de saisir votre nom et vos informations pour voir la page finale se mettre à jour. Chaque extrait est complet : vous pouvez copier les deux fichiers finaux et les ouvrir immédiatement.
Créez un nouveau dossier sur votre ordinateur et, à l'intérieur, les fichiers index.html et styles.css avec n'importe quel éditeur de texte brut.
Remplissez les champs du générateur ci-dessous pour façonner la page, puis copiez les deux fichiers générés dans votre dossier.
Double-cliquez sur index.html pour l'ouvrir dans votre navigateur. Modifiez, enregistrez et actualisez pour voir chaque changement.
Lisez les sections de chaque étape pour comprendre le rôle de chaque partie du code, afin de pouvoir la modifier en toute confiance.
Quand le résultat vous plaît, publiez le dossier avec l'une des options d'hébergement présentées à la fin.
Utilisez un éditeur de code comme VS Code plutôt qu'un traitement de texte, qui ajoute une mise en forme que les navigateurs ne savent pas lire.
Nommez la page d'accueil index.html. La plupart des hébergeurs servent ce fichier automatiquement quand quelqu'un visite l'adresse du dossier.
Écrivez les noms de fichiers en minuscules et sans espaces, par exemple about-us.html, car de nombreux serveurs sont sensibles à la casse.
Vérifiez votre travail dans la barre d'outils d'appareils des outils de développement du navigateur, à une largeur de téléphone étroite, avant de publier.
Passez la page dans un validateur HTML. Il détecte les balises non fermées que les navigateurs corrigent silencieusement.
Questions fréquentes
Faut-il payer quoi que ce soit pour créer un site en HTML ?
Non. Écrire les fichiers ne demande qu'un éditeur de texte et un navigateur, tous deux gratuits. Plusieurs hébergeurs statiques proposent des offres gratuites pour les petits sites ; un nom de domaine personnalisé est généralement le seul coût, si vous en voulez un.
Pourquoi ai-je besoin de la balise meta viewport ?
Sans elle, les navigateurs mobiles affichent la page à une largeur de bureau puis la réduisent, et le texte devient minuscule. width=device-width leur indique d'utiliser la vraie largeur de l'écran, ce qui permet aux media queries de fonctionner correctement.
Un site uniquement en HTML peut-il avoir un formulaire de contact ?
Le HTML dessine le formulaire, mais il faut quelque chose pour recevoir l'envoi. Sur un hébergeur statique, faites pointer l'attribut action du formulaire vers un service de traitement de formulaires ou vers la fonction de formulaires intégrée de votre hébergeur. Un lien mailto: est la solution de repli la plus simple.
Comment ajouter d'autres pages ?
Créez un autre fichier, par exemple about.html, avec le même en-tête et le même pied de page, faites un lien vers lui avec <a href="about.html">About</a>, et partagez le même styles.css entre les pages. Chaque page doit avoir son propre title et son propre h1.
Vaut-il mieux utiliser un framework ?
Pas pour un premier site. Le HTML et le CSS simples se chargent vite, ne demandent aucune étape de build et vous apprennent ce que tout framework produit en coulisses. Passez à un framework quand vous avez besoin de composants partagés sur de nombreuses pages ou d'un comportement proche d'une application.
Les balises sémantiques ont un vrai rôle
header, nav, main, section et footer ne sont pas de simples noms plus propres pour div. Les lecteurs d'écran les présentent comme des repères entre lesquels on peut naviguer, et les moteurs de recherche s'en servent pour distinguer le contenu principal des menus répétés.
Utilisez un seul h1 pour le sujet de la page et un h2 pour chaque section. Listé seul, le plan des titres doit se lire comme une table des matières.
Une mise en page pensée d'abord pour le téléphone
Écrivez la mise en page mobile sur une colonne comme comportement par défaut, puisque les blocs s'empilent déjà verticalement. Ajoutez ensuite une seule media query avec min-width pour activer les colonnes quand il y a de la place.
Limitez la largeur de lecture avec max-width sur un conteneur et centrez-le avec margin-inline: auto. Les lignes restent confortables sur les grands écrans sans aucune règle supplémentaire.
Publier votre dossier
Un hébergeur statique sert vos fichiers tels quels, et c'est tout ce dont un site HTML et CSS a besoin. Les options courantes vous permettent de glisser le dossier dans un tableau de bord ou de connecter un dépôt Git pour que chaque push mette à jour le site en ligne.
Après l'envoi, ouvrez l'adresse en ligne sur votre téléphone, cliquez sur chaque lien et envoyez le formulaire une fois pour vérifier qu'il vous parvient.
Étape 1 : le squelette de la page
Toute page HTML commence par les mêmes quelques lignes. Le doctype maintient les navigateurs en mode standard, lang indique aux lecteurs d'écran dans quelle langue parler, et la balise viewport fait utiliser aux téléphones leur vraie largeur.
Point de départ de index.html
Enregistrez ce fichier, ouvrez-le dans un navigateur, et vous avez déjà une page valide avec un titre d'onglet.
Étapes 2 et 3 : structure et contenu
Dans body, un header contient le nom et le menu, main contient les sections, et un footer termine la page. Le résultat en direct ci-dessous n'a encore aucun style, ce qui montre à quel point un bon HTML est lisible à lui seul.
En-tête, hero, cartes, formulaire de contact et pied de page
Modifiez le texte et le résultat se met à jour. Observez les labels du formulaire : cliquer sur un label place le focus sur son champ.
Placez ceci dans styles.css, à côté de index.html. Le fichier définit une typographie lisible, une colonne centrée, un en-tête en flex et une grille de cartes qui passe à trois colonnes sur les écrans plus larges.
La feuille de style complète
Enveloppez l'intérieur de header, main et footer dans <div class="wrap"> pour centrer le contenu, comme le fait le code produit par le générateur.
Étape 6 : publier
Façons de mettre un dossier statique en ligne
Méthode
Idéal pour
Ce que vous faites
Hébergeur statique par glisser-déposer
Votre premier site
Envoyer le dossier depuis le tableau de bord de l'hébergeur
Hébergeur statique connecté à Git
Les sites que vous continuerez à modifier
Faire un push vers un dépôt ; l'hébergeur redéploie
Hébergement web mutualisé
Les sites qui ont aussi besoin d'e-mail ou de PHP
Envoyer les fichiers avec le gestionnaire de fichiers ou en SFTP dans le dossier public
Un créateur de site web
Se passer complètement de code
Décrire le site et le modifier visuellement
Boulangerie du Port
Pain au levain frais, cuit avant l'aube.
Levain de campagne
Seigle aux graines
Viennoiseries du week-end
Créez votre page
Saisissez le nom de votre entreprise, votre slogan et trois offres. L'aperçu et les deux fichiers se mettent à jour pendant la saisie, prêts à être copiés.