Ta première page web

Avant de commencer

C'est quoi HTML ?

HTML est le langage des pages web. Il ne « programme » pas : il décrit le contenu (un titre, un paragraphe, une image, un lien…) avec des balises. Le navigateur lit ces balises et affiche la page.

Une balise, comment ça s'écrit

<titre>Mon contenu</titre>

Créer ton fichier & l'ouvrir

1. Le squelette d'une page

Toute page HTML a la même ossature. Tape ceci dans index.html :

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Ma première page</title>
  </head>
  <body>
    Bonjour le web !
  </body>
</html>

Q1. Où écris-tu le contenu visible d'une page : dans <head> ou dans <body> ?

Q2. À quoi sert la balise <title> ? Où voit-on son effet ?

2. Titres & paragraphes

Dans le <body>, remplace « Bonjour le web ! » par :

<h1>Mon site à moi</h1>
<h2>Qui suis-je ?</h2>
<p>Je suis étudiant en BTS SIO, et voici ma première page web.</p>
<p>J'adore l'informatique, la musique et le sport.</p>

Q1. Combien de niveaux de titres existe-t-il ? De ___ à ___.

Q2. À ton avis, pourquoi ne met-on qu'un seul <h1> par page ?

3. Mettre le texte en valeur

<p>J'aime <strong>vraiment</strong> l'informatique,
et <em>surtout</em> le développement web.</p>
<hr>
<p>Première ligne.<br>Deuxième ligne juste en dessous.</p>

Q1. Quelle balise met en gras ? En italique ?

Q2. <br> se ferme-t-il avec </br> ? (à ton avis) Oui / Non

4. Les listes

<h2>Mes langages préférés</h2>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<h2>Mon top 3 des jeux</h2>
<ol>
  <li>Le premier</li>
  <li>Le deuxième</li>
</ol>

Q1. Quelle balise pour une liste à puces ? Pour une liste numérotée ?

Q2. Que veut dire <li> ? À l'intérieur de quelle balise doit-il toujours être ?

5. Les liens

<p>Mon lycée : <a href="https://example.fr">Mon lycée</a></p>
<p><a href="https://developer.mozilla.org" target="_blank">
  La doc HTML (nouvel onglet)</a></p>

Q1. Quel attribut d'un lien contient l'adresse où il mène ? → __________

Q2. Que fait target="_blank" ?

Q3. Dans <a href="...">Mon lycée</a>, qu'est-ce qui est cliquable à l'écran ?

6. Les images

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

Q1. Quel attribut donne le chemin de l'image ? → __________

Q2. À quoi sert l'attribut alt ? (cite 2 raisons)

7. Structurer la page

Une vraie page est découpée en zones. Ces balises n'affichent rien de spécial, mais elles organisent :

<body>
  <header>
    <h1>Mon site</h1>
  </header>

  <main>
    <section>
      <h2>À propos</h2>
      <p>…</p>
    </section>
  </main>

  <footer>
    <p>Page réalisée en cours — 2026</p>
  </footer>
</body>

Q1. Quelle balise pour le bas de page ? Pour le contenu principal ?

Q2. Ces balises changent-elles l'apparence, ou surtout l'organisation du code ?

8. Un tableau

<table>
  <tr>
    <th>Matière</th>
    <th>Note</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>18</td>
  </tr>
</table>

Q1. <tr> = une ______________ ; <td> = une ______________ .

Q2. Quelle différence entre <th> et <td> ?

9. Un peu de couleur (bonus style)

Le HTML décrit le contenu ; le style le décore. Un avant-goût, avec une balise <style> dans le <head> :

<head>
  <meta charset="utf-8">
  <title>Ma page</title>
  <style>
    body { background: #f4f0ff; font-family: sans-serif; }
    h1   { color: #6a2d9c; }
  </style>
</head>

Q1. Quelle propriété change la couleur du texte ? Le fond ?

Projet — ta page « à propos de moi »

Assemble tout ce que tu as appris en une seule page propre. Voici le cahier des charges : ta page doit contenir au moins :

Grand défi — pour les plus rapides

Bilan — ce que je retiens

B1. Dans quelle balise se trouve le contenu visible d'une page ?

B2. Quelle balise pour un lien ? Pour une image ?

B3. Une balise qui ne se ferme pas (balise seule) que tu as croisée aujourd'hui :

Glossaire & compétences

Glossaire

Compétences mobilisées (référentiel BTS SIO)