← Retour aux tutoriels

Introduction au développement web avec HTML et CSS (débutants)

htmlcssdéveloppement webdébutantscréation de sitefront-end

Introduction au développement web avec HTML et CSS (débutants)

Ce tutoriel explique pas à pas comment créer une page web simple et propre en HTML (structure) et CSS (mise en forme). L’objectif est de comprendre les bases solides : comment un navigateur lit vos fichiers, comment organiser votre projet, comment écrire du HTML sémantique, comment cibler des éléments en CSS, comment gérer les tailles, les espacements, les polices, les couleurs, la mise en page (Flexbox), et comment vérifier/diagnostiquer avec les outils de développement.

1) Prérequis et outils

Ce dont vous avez besoin

Installer Visual Studio Code (optionnel mais recommandé)

Téléchargez-le depuis le site officiel, puis installez-le.

Extensions utiles (dans VS Code) :

Comprendre ce que fait le navigateur

Quand vous ouvrez un fichier .html, le navigateur :

  1. Lit le HTML et construit une représentation interne appelée DOM (Document Object Model).
  2. Lit les CSS (fichiers .css, balises <style>, etc.) et calcule les styles de chaque élément.
  3. Affiche le résultat à l’écran.

Le HTML décrit ce que c’est (un titre, un paragraphe, une navigation), le CSS décrit à quoi ça ressemble (couleur, taille, position).

2) Créer un projet et la structure de fichiers

Créez un dossier de projet, par exemple mon-site/, avec cette structure :

mon-site/
├─ index.html
└─ styles/
   └─ style.css

Commandes réelles (terminal)

Sur macOS / Linux

mkdir -p mon-site/styles
cd mon-site
touch index.html styles/style.css

Sur Windows (PowerShell)

mkdir mon-site
mkdir mon-site\styles
cd mon-site
ni index.html
ni styles\style.css

Lancer un serveur local (fortement recommandé)

Pourquoi ? Certains comportements (chemins, polices, images, cache) sont plus fiables via HTTP qu’en ouvrant un fichier directement.

Option A : avec VS Code + Live Server

Option B : avec Python (si installé)

Depuis le dossier mon-site :

python -m http.server 8000

Puis ouvrez :

3) Écrire votre première page HTML

Ouvrez index.html et ajoutez :

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Mon premier site</title>
    <link rel="stylesheet" href="styles/style.css" />
  </head>

  <body>
    <header>
      <h1>Bienvenue sur mon site</h1>
      <p>Une page simple pour apprendre HTML et CSS.</p>
    </header>

    <main>
      <section>
        <h2>À propos</h2>
        <p>
          Le HTML structure le contenu. Le CSS améliore la présentation. Ensemble, ils
          permettent de créer des pages web claires et agréables.
        </p>
      </section>

      <section>
        <h2>Contact</h2>
        <p>
          Écrivez-moi à <a href="mailto:exemple@domaine.fr">exemple@domaine.fr</a>.
        </p>
      </section>
    </main>

    <footer>
      <p>© 2026 — Mon premier site</p>
    </footer>
  </body>
</html>

Explication approfondie des éléments importants

4) Les bases du HTML : contenu et sémantique

Titres et hiérarchie

Les titres vont de <h1> à <h6>. Une bonne pratique :

Exemple :

<h1>Mon site</h1>
<section>
  <h2>Blog</h2>
  <article>
    <h3>Mon premier article</h3>
    <p>Contenu...</p>
  </article>
</section>

Paragraphes, listes, liens

Exemple :

<h2>Ressources</h2>
<ul>
  <li><a href="https://developer.mozilla.org/fr/" target="_blank" rel="noopener">MDN Web Docs</a></li>
  <li><a href="https://www.w3.org/" target="_blank" rel="noopener">W3C</a></li>
</ul>

Pourquoi rel="noopener" ?
Quand vous utilisez target="_blank", cette option améliore la sécurité et les performances en empêchant la page ouverte d’accéder à certaines informations de la page d’origine.

Images

Une image se met avec <img>. L’attribut alt est obligatoire en pratique : il décrit l’image pour l’accessibilité et en cas de chargement impossible.

<img src="images/paysage.jpg" alt="Un paysage de montagne au coucher du soleil" />

Formulaires (aperçu)

Les formulaires permettent de récupérer des données utilisateur :

<form action="/inscription" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required />

  <button type="submit">S’inscrire</button>
</form>

Même si vous ne faites pas encore de serveur, comprendre la structure est utile.

5) Les bases du CSS : relier, cibler, styliser

Ouvrez styles/style.css et ajoutez :

/* 1) Un petit "reset" pour partir sur une base cohérente */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.5;
  color: #1a1a1a;
  background: #f6f7fb;
}

/* 2) Mise en page générale */
header,
main,
footer {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
}

header {
  padding-top: 32px;
  padding-bottom: 24px;
}

header h1 {
  margin: 0 0 8px;
}

section {
  background: white;
  border: 1px solid #e6e6ef;
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0;
}

/* 3) Liens */
a {
  color: #2b59ff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

footer {
  padding-bottom: 40px;
  color: #555;
}

Comprendre le ciblage (sélecteurs)

Le CSS fonctionne par règles :

Exemple :

p {
  font-size: 18px;
}

La cascade, la spécificité, et l’ordre

CSS signifie « feuilles de style en cascade ». Cela implique :

Exemple :

p { color: red; }
section p { color: blue; }

Dans une section, le paragraphe sera bleu, car section p est plus spécifique.

6) Le modèle de boîte (box model) : la base de la mise en page

Chaque élément HTML est une « boîte » composée de :

Exemple :

section {
  padding: 16px;     /* espace entre le contenu et la bordure */
  border: 1px solid #ddd;
  margin: 12px 0;    /* espace entre cette section et les autres */
}

box-sizing: border-box;

Par défaut, la largeur/hauteur en CSS peut être déroutante. Avec border-box, la largeur inclut padding + border, ce qui simplifie énormément la mise en page.

C’est pourquoi on met souvent :

* { box-sizing: border-box; }

7) Un exemple complet : page avec navigation et cartes

Améliorons le HTML pour inclure une navigation et une grille de cartes. Remplacez le contenu de <body> par :

<body>
  <header class="site-header">
    <div class="brand">
      <h1>Mon premier site</h1>
      <p class="tagline">Apprendre HTML + CSS en construisant.</p>
    </div>

    <nav class="site-nav" aria-label="Navigation principale">
      <a href="#apropos">À propos</a>
      <a href="#projets">Projets</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <section id="apropos" class="card">
      <h2>À propos</h2>
      <p>
        Cette page montre une structure sémantique, une navigation, et une mise en page
        moderne avec Flexbox. Le but est de comprendre comment assembler des blocs.
      </p>
      <p>
        Astuce : utilisez les outils de développement du navigateur pour inspecter le DOM
        et les styles appliqués.
      </p>
    </section>

    <section id="projets" class="card">
      <h2>Projets</h2>

      <div class="grid">
        <article class="project">
          <h3>Page profil</h3>
          <p>Une page avec photo, bio, liens et sections.</p>
          <a class="button" href="#">Voir</a>
        </article>

        <article class="project">
          <h3>Landing page</h3>
          <p>Une page marketing simple avec un appel à l’action.</p>
          <a class="button" href="#">Voir</a>
        </article>

        <article class="project">
          <h3>Portfolio</h3>
          <p>Une grille de projets avec filtres (plus tard avec JavaScript).</p>
          <a class="button" href="#">Voir</a>
        </article>
      </div>
    </section>

    <section id="contact" class="card">
      <h2>Contact</h2>
      <form class="contact-form" action="#" method="post">
        <div class="field">
          <label for="nom">Nom</label>
          <input id="nom" name="nom" type="text" placeholder="Votre nom" required />
        </div>

        <div class="field">
          <label for="email">Email</label>
          <input id="email" name="email" type="email" placeholder="vous@exemple.fr" required />
        </div>

        <div class="field">
          <label for="message">Message</label>
          <textarea id="message" name="message" rows="5" placeholder="Votre message..."></textarea>
        </div>

        <button class="button" type="submit">Envoyer</button>
      </form>
    </section>
  </main>

  <footer class="site-footer">
    <p>© 2026 — Fait pour apprendre les bases du web</p>
  </footer>
</body>

Maintenant, remplacez styles/style.css par une version plus complète :

/* Base */
* {
  box-sizing: border-box;
}

:root {
  --bg: #f6f7fb;
  --text: #1a1a1a;
  --muted: #555;
  --card: #ffffff;
  --border: #e6e6ef;
  --primary: #2b59ff;
  --primary-dark: #1f3fb8;
  --radius: 14px;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}

/* Layout global */
.site-header,
main,
.site-footer {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px;
}

.site-header {
  padding-top: 28px;
  padding-bottom: 16px;
  display: flex;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
}

.brand h1 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.02em;
}

.tagline {
  margin: 6px 0 0;
  color: var(--muted);
}

/* Navigation */
.site-nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.site-nav a {
  color: var(--text);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
}

.site-nav a:hover {
  border-color: var(--border);
  background: #fff;
}

/* Cartes */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin: 14px 0;
}

.card h2 {
  margin-top: 0;
}

/* Grille de projets */
.grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.project {
  flex: 1 1 220px; /* grandit, rétrécit, base */
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: #fbfbff;
}

.project h3 {
  margin: 0 0 6px;
}

.project p {
  margin: 0 0 12px;
  color: var(--muted);
}

/* Boutons */
.button {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  text-decoration: none;
  border: 0;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 600;
  cursor: pointer;
}

.button:hover {
  background: var(--primary-dark);
}

/* Formulaire */
.contact-form {
  display: grid;
  gap: 12px;
}

.field {
  display: grid;
  gap: 6px;
}

label {
  font-weight: 600;
}

input,
textarea {
  font: inherit;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
}

input:focus,
textarea:focus {
  outline: 3px solid rgba(43, 89, 255, 0.25);
  border-color: rgba(43, 89, 255, 0.4);
}

/* Pied de page */
.site-footer {
  padding-bottom: 40px;
  color: var(--muted);
}

/* Responsive simple */
@media (max-width: 700px) {
  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

Explications : pourquoi Flexbox ici ?

Résultat : sur grand écran, vous aurez plusieurs cartes par ligne ; sur petit écran, elles se mettront naturellement en colonne.

8) Comprendre les unités CSS (px, %, em, rem, vh, vw)

Exemple pratique :

html { font-size: 16px; }

h1 { font-size: 2rem; } /* 32px */
p  { font-size: 1rem; } /* 16px */

Pourquoi rem est pratique ?
Si vous changez la taille de base, tout s’adapte de manière cohérente.

9) Couleurs, contrastes et accessibilité

Bonnes pratiques de base

Exemple : améliorer la lisibilité

Si un texte est trop clair :

.tagline { color: #9aa; }

Remplacez par une couleur plus lisible :

.tagline { color: #555; }

10) Outils de développement du navigateur (indispensable)

Dans votre navigateur :

Diagnostiquer un CSS qui ne s’applique pas

Vérifiez :

  1. Le chemin dans <link rel="stylesheet" href="styles/style.css">
  2. Que le serveur local est lancé et que le fichier existe
  3. Que vous n’avez pas une erreur de syntaxe CSS (une accolade manquante peut casser la suite)

11) Erreurs fréquentes chez les débutants

1) Oublier de relier le CSS

Sans la ligne :

<link rel="stylesheet" href="styles/style.css" />

Votre CSS ne sera jamais chargé.

2) Confondre class et id

3) Mettre des marges partout sans stratégie

Les marges s’additionnent parfois de manière inattendue. Une approche simple :

4) Ne pas utiliser de balises sémantiques

Évitez de tout mettre dans des <div> sans raison. Les balises sémantiques rendent votre page plus claire.

12) Aller plus loin (prochaines étapes)

Après ce tutoriel, vous pouvez :

Exemple : créer une deuxième page

Créez projets.html :

touch projets.html

Puis mettez un squelette :

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Projets</title>
    <link rel="stylesheet" href="styles/style.css" />
  </head>
  <body>
    <header class="site-header">
      <div class="brand">
        <h1>Projets</h1>
        <p class="tagline">Une page dédiée à mes réalisations.</p>
      </div>
      <nav class="site-nav" aria-label="Navigation principale">
        <a href="index.html">Accueil</a>
        <a href="projets.html">Projets</a>
      </nav>
    </header>

    <main>
      <section class="card">
        <h2>Mes projets</h2>
        <p>Vous pouvez réutiliser la grille et les cartes de la page d’accueil.</p>
      </section>
    </main>

    <footer class="site-footer">
      <p>© 2026</p>
    </footer>
  </body>
</html>

13) Récapitulatif

Vous avez appris à :

Si vous souhaitez, je peux proposer un exercice guidé (avec consignes) et une correction : par exemple reproduire une maquette simple, ajouter une barre de navigation fixe, ou créer une grille responsive plus avancée.

Tutoriels associés

Analyse de données avec Pandas en Python : guide intermédiaire Comprendre CSS Flexbox pour un design responsive Bien démarrer avec Docker : guide pour débutants