Créer son premier site web ne demande ni logiciel coûteux ni connaissances avancées : un éditeur de texte, un navigateur et un peu de méthode suffisent. Dans ce guide, nous allons construire pas à pas une page simple mais propre, en HTML pour le contenu et en CSS pour la mise en forme, puis voir comment la mettre en ligne. Chaque bloc de code peut être copié tel quel et testé immédiatement sur votre ordinateur.

## Préparer son environnement de travail

### Les outils nécessaires

Pour commencer, il vous faut seulement :

- **un éditeur de code** : n'importe quel éditeur gratuit fait l'affaire, à condition qu'il propose la coloration syntaxique (évitez les traitements de texte, qui ajoutent une mise en forme invisible) ;
- **un navigateur web** récent, avec ses outils de développement (touche F12 sur la plupart des navigateurs) ;
- **un dossier de projet**, par exemple `mon-site`, dans lequel vous rangerez tous vos fichiers.

### L'organisation des fichiers

Adoptez dès le départ une structure claire :

```text
mon-site/
├── index.html
├── css/
│   └── style.css
└── images/
```

Le fichier `index.html` est la page d'accueil : la plupart des hébergeurs l'affichent automatiquement lorsqu'on visite la racine du site. Utilisez des noms de fichiers en minuscules, sans espaces ni accents, pour éviter les problèmes une fois en ligne.

## La structure d'une page HTML

HTML (HyperText Markup Language) décrit le **contenu** et sa **signification** : titres, paragraphes, liens, images. Voici le squelette minimal d'une page moderne :

```html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mon premier site</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>Bonjour le monde</h1>
  <p>Ceci est ma première page web.</p>
</body>
</html>
```

### Le rôle de chaque ligne

- `<!DOCTYPE html>` indique au navigateur qu'il s'agit d'un document HTML moderne.
- `<html lang="fr">` est l'élément racine ; l'attribut `lang` aide les lecteurs d'écran et les moteurs de recherche.
- `<head>` contient les informations sur la page, qui ne s'affichent pas directement.
- `<meta charset="UTF-8">` garantit l'affichage correct des accents.
- `<meta name="viewport">` est indispensable pour un affichage correct sur mobile.
- `<title>` définit le texte affiché dans l'onglet du navigateur.
- `<link rel="stylesheet">` relie la feuille de style CSS.
- `<body>` contient tout ce qui est visible.

Enregistrez ce fichier sous `index.html`, puis ouvrez-le par un double-clic : il s'affiche dans votre navigateur.

## Utiliser les balises sémantiques

Les balises sémantiques décrivent le rôle de chaque zone de la page. Elles améliorent l'accessibilité, facilitent la lecture du code et aident les moteurs de recherche à comprendre votre contenu.

| Balise | Usage |
|---|---|
| `<header>` | En-tête de la page ou d'une section (logo, titre) |
| `<nav>` | Bloc de navigation principal |
| `<main>` | Contenu principal, unique dans la page |
| `<section>` | Regroupement thématique de contenu, généralement avec un titre |
| `<article>` | Contenu autonome (billet, fiche, carte) |
| `<aside>` | Contenu complémentaire (encadré, liens annexes) |
| `<footer>` | Pied de page ou de section |

Voici le corps complet de notre page, à placer entre les balises `<body>` et `</body>` :

```html
<header class="site-header">
  <p class="logo">Mon site</p>
  <nav>
    <ul class="menu">
      <li><a href="index.html">Accueil</a></li>
      <li><a href="#services">Services</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <section class="hero">
    <h1>Bienvenue sur mon premier site</h1>
    <p>Une page simple, construite en HTML et CSS.</p>
  </section>

  <section id="services" class="cartes">
    <article class="carte">
      <h2>Conception</h2>
      <p>Organiser le contenu avant de le mettre en forme.</p>
    </article>
    <article class="carte">
      <h2>Intégration</h2>
      <p>Traduire une maquette en HTML et CSS.</p>
    </article>
    <article class="carte">
      <h2>Mise en ligne</h2>
      <p>Publier le site pour qu'il soit accessible à tous.</p>
    </article>
  </section>
</main>

<footer id="contact" class="site-footer">
  <p>Contact : <a href="mailto:contact@example.com">contact@example.com</a></p>
</footer>
```

### Quelques règles de bonne pratique

- Un seul `<h1>` par page, puis des `<h2>`, `<h3>` dans l'ordre logique, sans sauter de niveau.
- Toujours renseigner l'attribut `alt` des images : `<img src="images/photo.jpg" alt="Description de la photo">`.
- Choisir une balise pour son sens, jamais pour son apparence : c'est le rôle du CSS.

## Mettre en forme avec CSS

CSS (Cascading Style Sheets) gère l'**apparence** : couleurs, typographie, espacements, disposition. Créez le fichier `css/style.css` et ajoutez une base :

```css
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  color: #222;
  background-color: #fafafa;
}

a {
  color: #0b5cad;
}

h1,
h2 {
  line-height: 1.2;
}
```

La règle `box-sizing: border-box` fait en sorte que la largeur d'un élément inclue ses marges intérieures (`padding`) et ses bordures, ce qui simplifie beaucoup les calculs de mise en page.

### Comprendre les sélecteurs

- `body` cible un **élément** par son nom de balise ;
- `.carte` cible une **classe** (attribut `class="carte"`), réutilisable à volonté ;
- `#contact` cible un **identifiant**, unique dans la page ;
- `.menu a` cible les liens situés **à l'intérieur** de `.menu`.

Privilégiez les classes pour la mise en forme : elles sont plus souples et évitent les conflits de priorité.

## Une mise en page responsive avec Flexbox

Flexbox permet d'aligner des éléments sur une ligne ou une colonne et de répartir l'espace disponible. Ajoutez ces règles à la suite de votre fichier CSS :

```css
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem 2rem;
  background-color: #1f2937;
  color: #fff;
}

.logo {
  margin: 0;
  font-weight: bold;
}

.menu {
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu a {
  color: #fff;
  text-decoration: none;
}

.menu a:hover,
.menu a:focus {
  text-decoration: underline;
}

.hero {
  padding: 3rem 2rem;
  text-align: center;
}

.cartes {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem 3rem;
}

.carte {
  flex: 1 1 250px;
  padding: 1.5rem;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.site-footer {
  padding: 1.5rem 2rem;
  text-align: center;
  background-color: #f3f4f6;
}
```

### Ce que font ces propriétés

- `display: flex` transforme le conteneur en conteneur flexible : ses enfants directs s'alignent sur une ligne.
- `justify-content: space-between` repousse le logo à gauche et le menu à droite.
- `align-items: center` centre verticalement les éléments.
- `gap` définit l'espacement entre les éléments.
- `flex-wrap: wrap` autorise le passage à la ligne quand la place manque.
- `flex: 1 1 250px` signifie : chaque carte peut grandir, peut rétrécir, et part d'une largeur de base de 250 pixels.

Grâce à cette combinaison, les trois cartes s'affichent côte à côte sur un grand écran et s'empilent automatiquement sur un téléphone, sans écrire une seule requête média.

### Ajuster avec une requête média

Pour des réglages plus fins sur petit écran, utilisez une requête média :

```css
@media (max-width: 600px) {
  .site-header {
    flex-direction: column;
    text-align: center;
  }

  .hero {
    padding: 2rem 1rem;
  }
}
```

Testez le résultat en réduisant la fenêtre ou en activant le mode « appareil mobile » des outils de développement de votre navigateur.

## Publier son site

Un site composé uniquement de fichiers HTML, CSS et images est un **site statique** : il n'a besoin ni de base de données ni de langage serveur. Plusieurs options s'offrent à vous :

- **Les plateformes d'hébergement statique** : de nombreux services proposent une offre gratuite où il suffit de glisser-déposer son dossier ou de connecter un dépôt Git pour obtenir une adresse publique.
- **Les pages associées aux forges de code** : si votre projet est versionné avec Git et hébergé sur une forge en ligne, celle-ci propose souvent un service de publication de pages statiques.
- **Un hébergement mutualisé classique** : vous transférez vos fichiers par FTP ou SFTP dans le dossier public de l'hébergement, et vous pouvez y associer votre propre nom de domaine.

Avant de publier, vérifiez que :

- tous les chemins sont **relatifs** (`css/style.css` et non `C:\Users\...`) ;
- la casse des noms de fichiers correspond exactement aux liens, car la plupart des serveurs distinguent majuscules et minuscules ;
- la page passe sans erreur dans un validateur HTML.

## En résumé

- Une page web repose sur deux langages complémentaires : **HTML** pour le contenu et sa structure, **CSS** pour l'apparence.
- Le squelette HTML comprend le `doctype`, la balise `<html lang="fr">`, un `<head>` avec `charset`, `viewport` et `title`, puis un `<body>`.
- Les balises sémantiques (`header`, `nav`, `main`, `section`, `article`, `footer`) rendent la page plus claire et plus accessible.
- **Flexbox**, avec `flex-wrap` et `gap`, suffit à créer une mise en page qui s'adapte aux mobiles.
- Un site statique se publie facilement, gratuitement ou presque, en veillant aux chemins relatifs et à la casse des fichiers.

Une fois cette base maîtrisée, vous pourrez explorer CSS Grid pour des mises en page plus complexes, puis JavaScript pour ajouter de l'interactivité.