HTML/CSSDébutant

HTML & CSS : ta première page web

18 mars 2026 8 min HTML/CSS
HTML & CSS : ta premiere page web

Introduction : HTML et CSS, les fondations du Web

Toutes les pages web que tu visites (Google, YouTube, Facebook, etc.) reposent sur HTML et CSS. HTML (HyperText Markup Language) structure le contenu, CSS (Cascading Style Sheets) le met en forme. Ensemble, ils forment le squelette et l’apparence de tout site internet.

Anecdote perso : La première page web que j’ai créée, c’était en 2016 pour un projet d’école. Un CV en ligne moche avec des couleurs fluo et du Comic Sans partout. J’ai mis 3 jours à comprendre pourquoi mon CSS ne marchait pas. Le problème ? J’avais oublié de lier le fichier CSS dans le <head>. Depuis, je vérifie TOUJOURS le <link rel="stylesheet"> en premier.

Dans ce tutoriel, tu vas créer ta toute première page web from scratch : un CV en ligne simple mais élégant. Tu apprendras les balises HTML essentielles, comment appliquer des styles CSS, et comment ouvrir ta page dans un navigateur.

Prérequis

  • Un éditeur de texte (VS Code, Sublime Text, Notepad++, ou même Bloc-notes)
  • Un navigateur web (Chrome, Firefox, Safari, Edge)
  • Aucune connaissance préalable requise !

Mon conseil : Installe VS Code. C’est gratuit, rapide, et tu vas l’utiliser pour tous tes projets web plus tard. Notepad++, c’est bien pour débuter, mais VS Code a l’autocomplétion et la coloration syntaxique qui te sauveront la vie.

Étape 1 : Créer le fichier HTML

Crée un dossier sur ton Bureau nommé mon-cv. À l’intérieur, crée un fichier index.html et ouvre-le avec ton éditeur.

Copie ce code de base :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mon CV en ligne</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Jean Dupont</h1>
    <p>Développeur Web Junior</p>
  </header>

  <section>
    <h2>À propos</h2>
    <p>Passionné de code et de nouvelles technologies. Je crée des sites web modernes et responsive.</p>
  </section>

  <section>
    <h2>Compétences</h2>
    <ul>
      <li>HTML & CSS</li>
      <li>JavaScript</li>
      <li>React</li>
    </ul>
  </section>

  <section>
    <h2>Contact</h2>
    <p>Email : jean.dupont@example.com</p>
  </section>
</body>
</html>

Explication des balises

  • <!DOCTYPE html> : déclare que c’est un document HTML5
  • <html lang="fr"> : élément racine, langue française
  • <head> : métadonnées invisibles (titre, charset, CSS)
  • <body> : contenu visible de la page
  • <header> : en-tête du document
  • <h1>, <h2> : titres (h1 = plus important, h6 = moins important)
  • <p> : paragraphe de texte
  • <section> : section thématique
  • <ul> + <li> : liste à puces

Erreur classique : Oublier de fermer une balise. J’ai passé 20 minutes à comprendre pourquoi mon contenu ne s’affichait pas. En fait, j’avais oublié le </section> de fermeture. Maintenant, je ferme chaque balise immédiatement après l’avoir ouverte.

Étape 2 : Ouvrir ta page dans un navigateur

Double-clique sur index.html. La page s’ouvre dans ton navigateur par défaut. Tu devrais voir un texte brut, non stylisé : c’est normal, nous n’avons pas encore ajouté de CSS !

Étape 3 : Créer le fichier CSS

Dans le même dossier mon-cv, crée un fichier style.css et ajoute ce code :

/* Reset de base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  line-height: 1.6;
  background-color: #f4f4f4;
  color: #333;
}

header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
  padding: 2rem;
}

header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

section {
  background: white;
  margin: 2rem auto;
  padding: 2rem;
  max-width: 800px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h2 {
  color: #667eea;
  margin-bottom: 1rem;
  border-bottom: 2px solid #f4f4f4;
  padding-bottom: 0.5rem;
}

ul {
  margin-left: 2rem;
}

li {
  margin-bottom: 0.5rem;
}

Explication des styles

  • * : sélecteur universel (réinitialise les marges et padding)
  • body : applique une police, couleur de fond, couleur de texte
  • header : fond dégradé violet, texte centré, padding
  • section : boîte blanche avec bordure arrondie et ombre
  • max-width: 800px : limite la largeur pour la lisibilité
  • border-radius : coins arrondis
  • box-shadow : ombre portée

Opinion tranchée : Le reset CSS (* { margin: 0; padding: 0; }), c’est obligatoire. Chaque navigateur a ses propres styles par défaut. Sans reset, ton site va être différent sur Chrome, Firefox, Safari. Prends l’habitude de le mettre dès le début.

Étape 4 : Rafraîchir la page

Retourne dans ton navigateur et appuie sur F5 (ou Ctrl+R / Cmd+R). Ton CV devrait maintenant être coloré, avec un en-tête violet dégradé et des sections bien espacées.

Piège classique : Le CSS ne s’applique pas ? Vérifie que <link rel="stylesheet" href="style.css"> est bien dans le <head> et que style.css est dans le même dossier que index.html. J’ai oublié ça au moins 10 fois.

Étape 5 : Personnaliser ton CV

Maintenant que la structure fonctionne, personnalise-la :

  • Change le nom, le titre, les compétences
  • Ajoute une photo : <img src="photo.jpg" alt="Ma photo">
  • Modifie les couleurs dans style.css
  • Ajoute une section « Expérience » ou « Formation »

Exemple : Ajouter une photo

Dans index.html, ajoute après le <header> :

<div style="text-align: center; margin-top: -50px;">
  <img src="photo.jpg" alt="Jean Dupont" style="width: 150px; height: 150px; border-radius: 50%; border: 5px solid white; box-shadow: 0 2px 10px rgba(0,0,0,0.2);">
</div>

(Remplace photo.jpg par le chemin de ton image.)

Conseil d’Alex : Évite le style inline (style="...") dans le HTML. C’est acceptable pour un tutoriel, mais en vrai projet, tout doit être dans le CSS. Sinon, ton code devient vite ingérable.

Erreurs courantes

❌ Le CSS ne s’applique pas

Cause : Le fichier style.css n’est pas dans le même dossier que index.html, ou le lien est mal écrit.

Solution : Vérifie que <link rel="stylesheet" href="style.css"> est dans le <head> et que les fichiers sont côte à côte.

Mon expérience : J’ai passé 1h à debugger ça une fois. En fait, j’avais écrit styles.css au lieu de style.css. Les typos, c’est le pire ennemi du débutant.

❌ Les balises s’affichent comme du texte

Cause : Tu as oublié de fermer une balise ou mal écrit < ou >.

Solution : Vérifie que chaque balise ouvrante <h1> a sa balise fermante </h1>.

❌ L’image ne s’affiche pas

Cause : Le chemin de l’image est incorrect.

Solution : Assure-toi que photo.jpg est dans le même dossier que index.html. Ou utilise un chemin absolu.

Résultat attendu

À la fin de ce tutoriel, tu as :

  • ✅ Créé ta première page HTML structurée
  • ✅ Appliqué des styles CSS pour la rendre attractive
  • ✅ Compris les balises essentielles (header, section, h1, p, ul)
  • ✅ Personnalisé le contenu et les couleurs

Prochaines étapes

  1. Rendre le CV responsive : ajoute des media queries pour mobile
  2. Ajouter de l’interactivité : JavaScript pour un formulaire de contact
  3. Héberger en ligne : GitHub Pages, Netlify, Vercel (gratuit)
  4. Apprendre Flexbox et Grid : layouts modernes en CSS

Mon conseil : Apprends Flexbox MAINTENANT. C’est la base du layout moderne. Oublie les float et les position: absolute de 2005. Flexbox et Grid, c’est tout ce dont tu as besoin pour 95% des layouts.

Ressources gratuites

  • MDN Web Docs : developer.mozilla.org
  • FreeCodeCamp : cours gratuits HTML/CSS interactifs
  • CSS Tricks : guides et astuces CSS
  • Can I Use : compatibilité des propriétés CSS entre navigateurs

Opinion tranchée : MDN, c’est LA référence. Oublie W3Schools, c’est obsolète. MDN est maintenu par Mozilla et la communauté, c’est à jour et précis.

Conclusion

Tu viens de créer une page web from scratch ! HTML et CSS sont les briques fondamentales du web. Tous les sites, même les plus complexes (Netflix, Twitter, Airbnb), reposent sur ces mêmes technologies. Continue à pratiquer, clone des designs existants, expérimente avec de nouvelles propriétés CSS. Le web design n’a pas de limites, seulement ta créativité ! 🎨

— Alex Moreau, développeur web freelance. Mon premier site était moche, mais il marchait. Aujourd’hui, je crée des interfaces propres et responsive. Si tu suis ce tuto, tu es sur la bonne voie. Code un peu tous les jours, et dans 6 mois, tu seras surpris de tes progrès.