En bref
Ce soir, tu peux avoir créé ta première page web — pour de vrai, avec deux fichiers et le navigateur que tu utilises déjà. L’atelier tient en trois temps. Un : préparer le plan de travail — un dossier, un fichier index.html, un fichier style.css, un éditeur de code gratuit, et la boucle magique du web : modifier, enregistrer, actualiser le navigateur. Deux : monter le squelette HTML — la structure minimale d’une page, puis ton contenu réel : un grand titre, des paragraphes qui te présentent, une image, des liens. Trois : habiller avec le CSS — relier la feuille de style, choisir couleurs et police, aérer et centrer la mise en page. Aucun serveur, aucune installation lourde, aucun prérequis au-delà de la curiosité : le HTML et le CSS se donnent en une soirée — et la page que tu construiras est le vrai premier pas de tout développeur web, celui dont on se souvient.
Il y a un moment fondateur dans la vie de tout développeur web : la première page à soi, ouverte dans le navigateur — imparfaite, fière, et réelle. Ce moment est à deux fichiers de toi. Créer son premier site web en HTML et CSS est un atelier pas à pas, à faire en une soirée, clavier en main — la mise en pratique directe de la carte dessinée par comment fonctionne un site web.
Étape 1 : le plan de travail en dix minutes
D’abord l’atelier. Crée un dossier — mon-premier-site — quelque part où tu le retrouveras. Installe un éditeur de code gratuit (Visual Studio Code est le choix standard, mais le bloc-notes dépannerait) : c’est ton établi — coloration, suggestions, confort. Crée deux fichiers dans le dossier : index.html (la page — index est le nom conventionnel de la page d’accueil) et style.css (ses habits). Enfin, le geste fondateur : ouvre index.html dans ton navigateur (double-clic suffit) — page blanche, évidemment : elle est vide. Garde les deux fenêtres côte à côte, éditeur et navigateur : ta boucle de travail sera modifier → enregistrer → actualiser (F5) — le cycle le plus court et le plus gratifiant de toute la programmation, celui qui rend le web si bon pour apprendre.
Un mot d’orientation avant de bâtir, pour savoir ce que tu manipules : le HTML décrit la structure par des balises — des étiquettes entre chevrons qui ouvrent et ferment autour du contenu : un titre s’écrit <h1>Bienvenue</h1>, un paragraphe <p>…</p> — c’est toute la grammaire, détaillée à loisir dans les bases du HTML ; le CSS, lui, décrit l’apparence par des règles « cible : propriétés » — on y vient à l’étape 3, guide des bases du CSS à l’appui.
Étape 2 : le squelette, puis ton contenu
Toute page HTML partage le même squelette minimal, à taper une fois pour l’apprendre (ton éditeur sait aussi le générer) : la déclaration <!DOCTYPE html> en première ligne (« ceci est du HTML moderne »), puis la balise <html> qui enveloppe deux zones — <head>, l’en-tête invisible (on y met le <title>, le nom affiché sur l’onglet — mets le tien !), et <body>, le corps : tout ce qui s’affiche vit ici. Enregistre, actualise : l’onglet porte ton titre — première victoire, la boucle fonctionne.
Remplis maintenant le corps avec une vraie page de présentation — le contenu classique du premier site : un grand titre <h1> avec ton nom ou celui de ton projet ; un sous-titre <h2> (« À propos ») ; deux ou trois paragraphes <p> qui racontent qui tu es ou ce que tu apprends ; une image — <img> avec son attribut src pointant vers une photo posée dans ton dossier, et son attribut alt qui la décrit (le réflexe d’accessibilité, dès le premier jour) ; une liste de choses que tu aimes (<ul> et ses <li>) ; et un lien — <a href= »… »> — vers un site que tu recommandes. Enregistre, actualise, contemple : c’est brut, noir sur blanc, années 90 — et c’est TA page ; la structure est là, les habits arrivent. (Les exercices HTML prolongeront ce squelette dans tous les sens.)
Étape 3 : les habits CSS — et la suite du voyage
Relie d’abord la feuille de style : dans le <head>, une ligne — <link rel= »stylesheet » href= »style.css »> — et les deux fichiers se parlent. Ouvre style.css et écris tes premières règles, en lisant chacune à voix haute : body { font-family: sans-serif; background-color: #f5f5f5; } — « le corps : police sans empattement, fond gris très clair » ; h1 { color: #2c6fbb; } — « les grands titres : bleu » ; puis le geste de mise en page qui change tout : body { max-width: 700px; margin: auto; padding: 20px; } — « largeur maxi 700 pixels, centré, avec de l’air » : enregistre, actualise — ta page vient de passer de 1996 à aujourd’hui, et tu viens de vivre le métier de designer web dans sa boucle essentielle. Continue en libre : espace les paragraphes (line-height), arrondis l’image (border-radius), colore les liens — chaque règle des exercices CSS s’essaie ici en dix secondes.
Ta page vit — voici ses trois horizons, dans l’ordre. Approfondir les deux langues : les piliers HTML et CSS t’attendent avec la suite du programme — balises sémantiques, boîtes, flexbox. La rendre belle sur téléphone : c’est le prochain guide, rendre un site responsive — indispensable, et immédiat après cet atelier. La mettre en ligne, enfin — car une page dans un dossier n’est pas encore un site : le voyage vers le monde passe par l’hébergement, raconté plus loin dans le silo. Et garde précieusement cette version d’origine : dans un an, tu la rouvriras en souriant — c’est la photo de classe du développeur, et tout le monde garde la sienne.
Questions fréquentes
Que faut-il pour créer sa première page web ?
Trois choses, toutes gratuites : un dossier avec deux fichiers (index.html pour la structure, style.css pour l’apparence), un éditeur de code comme Visual Studio Code, et ton navigateur habituel pour afficher le résultat. Aucun serveur ni installation lourde : la boucle modifier-enregistrer-actualiser suffit.
Pourquoi nommer sa page index.html ?
Par convention universelle : index est le nom que les serveurs web servent par défaut quand on visite un dossier — la page d’accueil. L’adopter dès le premier jour rend ton site directement compatible avec l’hébergement, le moment venu de le mettre en ligne.
Combien de temps pour apprendre HTML et CSS ?
Une soirée suffit pour une première page réelle — c’est l’objet de cet atelier. Compte ensuite deux à quatre semaines de pratique régulière pour être à l’aise avec les balises courantes, les boîtes et la mise en page moderne, exercices à l’appui. Ce sont les langues les plus accessibles de tout le développement.
HTML et CSS sont-ils des langages de programmation ?
Stricto sensu, non : le HTML décrit une structure et le CSS une présentation — sans variables, boucles ni conditions. C’est d’ailleurs ce qui les rend si abordables en premier. La programmation arrive avec le JavaScript, troisième langue du navigateur, qui donne le comportement — l’étape suivante naturelle.
Sources
- MDN Web Docs — les tutoriels HTML et CSS de référence, en français
- W3C — les standards du web et le validateur officiel de pages
Cet article a une vocation informative et pédagogique. Les plateformes, outils et formations éventuellement cités le sont à titre d’exemple ; compare plusieurs options avant de t’engager ou de payer.