HTML : ta première page web

Avant de commencer

Pourquoi commencer par HTML

Quand tu ouvres un site, ton navigateur reçoit un fichier HTML et l'affiche. C'est le squelette de toute page web : le texte, les titres, les images, les liens. Avant les jolis designs (CSS, prochaine séance) et l'interactivité (JavaScript), il y a toujours HTML. C'est la première brique du métier de développeur — et tu vas la poser toi-même.

Ce que tu sauras faire à la fin

0. C'est quoi une page web ?

Une page web est un simple fichier texte portant l'extension .html. Ce fichier contient le contenu (textes, liens, images) entouré de balises qui disent au navigateur comment l'interpréter. Le navigateur lit le HTML et l'affiche joliment.

1. Ton premier fichier HTML

Étape 1 — Créer le fichier

1. Ouvre VS Code.
2. Menu Fichier → Ouvrir le dossier…, crée un dossier mon-site et ouvre-le.
3. Dans VS Code, clique sur l'icône « Nouveau fichier » et nomme-le index.html.

Étape 2 — Écrire une première ligne

<h1>Bonjour le web !</h1>

Étape 3 — Voir le résultat (deux façons)

Enregistre d'abord avec Ctrl+S. Ensuite, tu as le choix :

2. La structure d'une page

Une ligne, c'est un début, mais une vraie page HTML a un squelette standard. Le voici, à recopier et comprendre.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ma page</title>
  </head>
  <body>
    <h1>Bonjour le web !</h1>
  </body>
</html>

Tout vit dans <html>, qui se divise en deux : <head> (coulisses) et <body> (la scène visible).

3. Les balises : la règle du jeu

Tout HTML fonctionne avec des balises. Comprendre leur logique, c'est comprendre tout le reste.

Une balise s'ouvre, contient quelque chose, et se ferme (avec un /). La plupart vont par paires.

4. Du code lisible : indentation & commentaires

Un code qui marche, c'est bien. Un code lisible, c'est mieux : tu te reliras plus tard, et tes profs (et collègues) liront ton code. Deux outils pour ça : l'indentation et les commentaires.

L'indentation (décaler ce qui est « à l'intérieur »)

Quand une balise est à l'intérieur d'une autre, on la décale de 2 espaces vers la droite. Compare :

<body>
<header>
<h1>Titre</h1>
</header>
</body>

Sans indentation : difficile de voir qui contient quoi.

<body>
  <header>
    <h1>Titre</h1>
  </header>
</body>

Avec indentation : on voit que h1 est dans header, dans body.

Les commentaires (des notes invisibles)

<!-- Ceci est un commentaire : il n'apparaît pas dans la page -->
<h1>Bonjour</h1>

5. Les titres

HTML a 6 niveaux de titres, du plus grand (h1) au plus petit (h6). Ils structurent le contenu comme les titres d'un document.

<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-sous-titre</h3>

6. Paragraphes & mise en valeur

Les paragraphes

<p>Je m'appelle Marc et je suis en BTS SIO.</p>
<p>J'aime le développement et le réseau.</p>

Mettre en valeur

<p>C'est <strong>important</strong> et <em>à noter</em>.<br>
Et ça, c'est à la ligne.</p>

Le cas de <span>

<p>Mon pseudo est <span>DevMarc</span> sur le forum.</p>

Les caractères spéciaux

Certains caractères sont « réservés » par HTML : le < et le > servent aux balises, le & sert justement à écrire ces caractères. Pour les afficher comme du texte normal, on utilise des codes appelés entités.

<p>En C#, on écrit if (age &lt; 18).</p>
<p>© 2026 — Tom &amp; Marc</p>

7. Les listes

Liste à puces (non ordonnée)

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>SQL</li>
</ul>

Liste numérotée (ordonnée)

<ol>
  <li>Allumer le PC</li>
  <li>Se connecter</li>
</ol>

8. Les liens

Le lien (« hyperlien ») est ce qui fait le web : cliquer pour aller ailleurs.

<a href="https://example.fr">Le site de mon école</a>

9. Les images

Pour afficher une image, on utilise <img> — une balise auto-fermante (pas de contenu, donc pas de balise fermante).

<img src="photo.jpg" alt="Ma photo de profil">

10. Les chemins : où sont mes fichiers ?

Quand tu écris src="photo.jpg" ou href="contact.html", tu donnes un chemin : tu dis au navigateur où aller chercher le fichier, en partant de la page actuelle. Bien ranger ses fichiers, c'est la moitié du métier.

Organiser son dossier

Range tes images dans un sous-dossier images/. Ton dossier ressemble alors à ça :

mon-site/
├── index.html      <-- ta page d'accueil
├── contact.html    <-- une autre page
└── images/
    └── photo.jpg   <-- tes images

Les trois cas à connaître

11. Structurer la page

Pour organiser le contenu, on le regroupe dans des conteneurs. Le plus simple est <div> ; les balises sémantiques disent en plus à quoi sert chaque zone.

<header>
  <h1>Mon portfolio</h1>
</header>
<main>
  <p>Le contenu principal de la page.</p>
</main>
<footer>
  <p>© 2026 - Marc</p>
</footer>

Le menu de navigation

Quand ton site a plusieurs pages, on regroupe les liens de navigation dans un <nav>, souvent placé dans le <header>.

<nav>
  <a href="index.html">Accueil</a>
  <a href="contact.html">Contact</a>
</nav>

Section et article — quand les utiliser ?

Sur une vraie page structurée, <section> et <article> remplacent les <div> quand le contenu a un sens propre.

<main>
  <section>
    <h2>À propos</h2>
    <p>Je m'appelle Marc, je suis en BTS SIO.</p>
  </section>

  <section>
    <h2>Mes projets</h2>
    <article>
      <h3>GSB Ordonnances</h3>
      <p>Application C# de gestion des ordonnances médicales.</p>
    </article>
    <article>
      <h3>Portfolio Web</h3>
      <p>Ce site que tu consultes en ce moment.</p>
    </article>
  </section>
</main>

12. Les tableaux

Un tableau présente des données en lignes et colonnes (un planning, une liste de logiciels…). Il s'assemble avec quatre balises.

<table>
  <tr>
    <th>Logiciel</th>
    <th>Usage</th>
  </tr>
  <tr>
    <td>VS Code</td>
    <td>Écrire du code</td>
  </tr>
  <tr>
    <td>Firefox</td>
    <td>Tester la page</td>
  </tr>
</table>

13. Espionner le HTML d'un vrai site

Toutes les pages que tu visites sont du HTML, comme la tienne. Le navigateur a un outil pour le voir en direct : l'inspecteur.

Ouvrir l'inspecteur

1. Va sur un site que tu connais (par ex. https://wikipedia.org ou un autre).
2. Appuie sur F12 (ou clic droit sur un élément → Inspecter).
3. Un panneau s'ouvre : à gauche/au-dessus la page, dans l'onglet Éléments (ou Inspecteur) le code HTML de la page.

Les autres onglets de l'inspecteur — détail pro

L'onglet Éléments n'est que le premier. L'inspecteur contient aussi :

14. Une page complète, commentée

Avant de te lancer, voici une page entière qui réunit tout ce que tu as appris : un modèle de référence. Lis-la en repérant chaque balise — tu dois maintenant toutes les reconnaître.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Léa Martin — Portfolio BTS SIO</title>
  </head>
  <body>
    <!-- bandeau du haut -->
    <header>
      <h1>Léa Martin</h1>
      <nav>
        <a href="index.html">Accueil</a>
        <a href="contact.html">Contact</a>
      </nav>
    </header>

    <!-- contenu principal -->
    <main>
      <section>
        <h2>À propos</h2>
        <p>Je suis <strong>étudiante</strong> en BTS SIO,
           passionnée de <em>développement web</em>.</p>
        <img src="images/lea.jpg" alt="Portrait de Léa Martin, étudiante en BTS SIO"
             width="200" height="200">
      </section>

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

      <p>Mon site préféré :
         <a href="https://developer.mozilla.org" target="_blank"
            rel="noopener noreferrer">MDN Web Docs</a></p>
    </main>

    <!-- pied de page -->
    <footer>
      <p>&copy; 2026 — Léa Martin</p>
    </footer>
  </body>
</html>

15. Mini-projet : ta page de présentation

On assemble tout : une vraie page perso, première pierre de ton futur portfolio (qu'on enrichira puis qu'on déploiera en ligne dans les prochaines séances).

Le cahier des charges

1. Le squelette HTML complet (doctype, head avec title + charset, body), indenté et avec au moins un commentaire.
2. Un <header> avec ton nom en <h1>.
3. Un <main> avec : un <h2> « À propos » + 2 paragraphes (dont du <strong>/<em>) ; un <h2> « Compétences » + une liste ; ta photo rangée dans images/ (<img> avec alt et le bon chemin) ; un lien externe.
4. Un <footer> avec ton nom et l'année.

Pour finir

Ton antisèche — balises + bonne pratique

Vérifie tes acquis

Glossaire