TP HTML & CSS #2

S1 2026-2027 - IUT - Université de Lille, BUT2 SD

TP 2 — CSS : première approche

Objectif : séparer le fond (HTML) de la forme (CSS), comprendre les trois manières d'ajouter du style et mettre en forme texte et tableaux.

2.1 Les trois manières d'ajouter du style

Créez le dossier code/tp2, et dedans les dossiers exemple, exercice1, exercice2.

Dans le dossier exemple, testez les trois manières de mettre en forme une page :

1. Style en ligne — CSS mélangé au HTML :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Style en ligne</title>
  </head>
  <body>
    <h1 style="font-weight:bold;color:red">Mon premier heading</h1>
  </body>
</html>

2. Style interne — feuille de style dans le <head> :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Style interne</title>
    <style type="text/css">
      h1 { font-weight: bold; color: red; }
    </style>
  </head>
  <body>
    <h1>Mon premier heading</h1>
  </body>
</html>

3. Style externe — fichier CSS séparé :

style.css :

h1 {
  font-weight: bold;
  color: red;
}

index.html :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Style externe</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Mon premier heading</h1>
  </body>
</html>

Créez les trois fichiers et visualisez le rendu de chacun.
Notez les inconvénients des deux premières méthodes (recherche : rel est-il obligatoire ? que signifie-t-il ?).

À retenir : on sépare le contenu (HTML) de la présentation (CSS). rel="stylesheet" (obligatoire) indique la nature du lien, href le chemin vers la ressource. On peut lier plusieurs feuilles : en cas de conflit, la dernière chargée gagne.

2.2 L'inspecteur, votre meilleur ami

Les outils de développement du navigateur (touche F12, ou clic droit → Inspecter) permettent de :

naviguer dans l'arbre HTML ;
voir les règles CSS qui s'appliquent à chaque élément ;
modifier dynamiquement le HTML et le CSS sans toucher au fichier.
Sur n'importe quel élément de votre page, faites un clic droit → Inspecter.
Modifiez en direct la couleur d'un titre dans l'onglet Styles : l'affichage change immédiatement, mais votre fichier n'est pas modifié.

2.3 CSS interne sur un site existant

Dans exercice1, copiez le dossier site1 du TP1.
Ajoutez un CSS interne à index.html : un bloc <style> placé dans le <head>, qui définit des couleurs, textes et fonds différents pour body, h1, h2 et h3. Choisissez vos propres valeurs.
Visualisez et notez que le style s'applique à toute la page, quels que soient les éléments ciblés.

2.4 Exercice 2 : une page HTML sans style

Dans exercice2, copiez index.html. Créez une page exo2.html contenant :

<h1>Ceci est mon premier titre</h1>
<h2>Mon sous-titre</h2>
<p>
  Et ceci mon premier <strong>paragraphe</strong>. Et ceci est la
  dernière phrase du paragraphe 1.
</p>
<ol>
  <li>point <strong>numéro 1</strong></li>
  <li>point numéro 2</li>
  <li>point numéro 3</li>
</ol>
<ul>
  <li>Une chose</li>
  <li>Encore <strong>une chose</strong></li>
</ul>
<h2>D'autres paragraphes</h2>
<p>Texte long au choix sur plusieurs lignes</p>
<p>Un autre long paragraphe sur plusieurs lignes</p>

Insérez le tableau suivant et complétez les cellules :

Nom de la balise utilisée	Pour définir	Balise auto-fermante
`p`	un paragraphe	non
`img`
`ol`
`ul`
`li`
`h1`
`a`
`br`
`strong`

Insérez à la suite un lien vers la page d'accueil : « mon 1er site ».

2.5 La mise en forme du texte

Écrivez un fichier style2.css qui modifie l'apparence de exo2.html :
- body : fond de couleur claire, texte sombre ;
- h1 : rouge et italique ;
- h2 : bleu ;
- p : texte justifié (text-align: justify) ;
- ul : sans puces (list-style-type: none) ;
- li : gris.
Reliez style2.css à exo2.html et visualisez.
Complétez la feuille avec :
- les liens (a) de couleur verte ;
- les strong de couleur rouge ;
- les strong contenus dans une liste : italique, gras et bleu.
Vérifiez la différence entre strong seul (rouge) et strong dans une liste (bleu, italique, gras).

À retenir : text-align: justify justifie, list-style-type: none supprime les puces, et les sélecteurs combinés (li strong) ciblent précisément des éléments.

2.6 Les boîtes : marges, fond et centrage

Ajoutez pour body : des marges extérieures de 10 px partout (margin) et une police Calibri (ou une famille sans-serif).
Mettez en forme h1 : fond bleu foncé, texte blanc, une largeur (width), la boîte centrée dans son conteneur (margin-left: auto; margin-right: auto) et le texte centré dans la boîte (text-align: center).
Ajoutez au début de la page un paragraphe spécial (avec une classe, par exemple .paragraphe-special) contenant une dizaine de lignes de texte, sur lequelles appliquer : une largeur de 90 %, une hauteur de 100 px, la boîte centrée, un texte justifié de couleur lime, une police monospace ('Courier New' ou similaire), une image de fond et un padding de 10 px.
Ajustez les marges intérieures (padding) et extérieures (margin) pour une meilleure présentation.

À retenir : tout élément HTML est une boîte : contenu → padding (espace intérieur) → border → margin (espace extérieur). margin-left/right: auto + width centrent une boîte ; text-align: center centre le texte.

2.7 Les tableaux en CSS

Sur les éléments d'une table on peut définir toutes les propriétés des boîtes. Deux propriétés utiles :

border-collapse: collapse pour que les bordures de la table et des cellules soient confondues (pas doubles) ;
caption-side: top | bottom pour positionner la légende.

Dans exo2.html, complétez votre tableau avec la structure suivante : une légende (<caption>) résumant le contenu, un <thead> (ligne d'en-tête avec des <th>), un <tbody> (les lignes de données) et un <tfoot> contenant « liste non exhaustive » s'étendant sur les trois colonnes (avec colspan).
Définissez les règles CSS du tableau : une largeur, la table centrée, une police Calibri, des bordures, un fond clair, border-collapse: collapse. Mettez aussi en forme caption (position avec caption-side, centrage, italique), thead, tr, td/th (avec padding), et prévoyez un changement d'apparence au survol : un surlignage des lignes (tbody tr:hover) et un pied de tableau (tfoot) au texte italique et centré devenant gras au survol.
Survolez les lignes : la couleur de fond change. Survolez le pied de tableau : le texte devient gras.
Testez caption-side: bottom.

À retenir : <thead>, <tbody>, <tfoot> structurent la table. border-collapse: collapse fusionne les bordures, :hover applique un style au survol, tbody tr:hover permet de surligner une ligne.