TP HTML & CSS #3

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

TP 3 — CSS : suite

Objectif : zones personnalisées, tableaux élaborés, flottement, menus horizontaux, colonnes avec flex et positionnement.

3.1 Préparation

Créez le dossier code/tp3, et dedans les dossiers img et css.
Copiez la page exo2.html et son style style2.css sous les noms page.html et style.css.
Cette page contient déjà un unique <h1> : n'en ajoutez pas d'autre, utilisez des <h2> et <h3> pour le reste du document.
Ajoutez dans la page des titres de niveau 3 : par exemple « Exercice 2 du TP 2 – Partie 1 ».
Donnez une couleur purple aux titres h3 de la page (ajoutez la règle dans style.css).
Récupérez le texte d'un poème et une image de portrait de l'auteur ; placez-les dans le dossier approprié.

3.2 Zone 1 : création d'une zone avec citation

Ajoutez un <h3> « Zone 1 : création zone », suivi d'une zone bloc <div> nommée zone1. Choix : id ou class ? (indice : un seul usage → id).
Copiez le poème sous forme de longue citation <blockquote> composée de cinq paragraphes.
Ajoutez au début de zone1 un titre <h3> (par exemple le titre du poème).

<h3>Zone 1 : création zone</h3>
<div id="zone1">
  <h3>Titre du poème</h3>
  <blockquote>
    <p>Premier paragraphe du poème…</p>
    <p>Second paragraphe…</p>
    <p>…</p>
  </blockquote>
</div>

Définissez dans style.css les règles CSS de zone1 : une zone de largeur 600 px, sur fond gris, décalée de 50 px à gauche ; le h3 de la zone en couleur lime, sans marge et avec un padding de 10 px ; les paragraphes du blockquote d'une largeur de 350 px, décalés de 20 px et indentés de 1 em (text-indent).
La première lettre de chaque paragraphe en police fantasy, taille double (::first-letter) et couleur lime.
Ajoutez une image de fond (le portrait) qui se répète sur l'axe Y (background-repeat: repeat-y). Le portrait ne doit pas être coupé ; ajustez les marges si besoin.
Entourez la fin du dernier paragraphe (« … heureux ! ») d'une balise en ligne de votre choix, par exemple <span class="fin">…</span>, puis stylisez-la en italique, couleur lime et indentée de 1 em.

À retenir : #zone1 h3 ne cible que les h3 à l'intérieur de la zone. text-indent indente la première ligne. Les pseudo-éléments ::first-letter, ::first-line affinent le style. background-repeat: repeat-y répète l'image verticalement.

3.3 Zone 2 : table et listes

Ajoutez un <h3> « Zone 2 : Tables et listes », suivi d'une zone bloc zone2.
Ajoutez au début de zone2 un titre <h3> « Autres Poèmes », suivi du tableau :

Poème	Auteur	Année	Recueil
Demain, dès l'aube...	Victor HUGO	1802-1885	Les contemplations
Il pleure dans mon cœur	Paul VERLAINE	1844-1896	Romances sans paroles
Le dormeur du val	Arthur RIMBAUD	1854-1891	Poésies

Ajoutez à la suite une liste ordonnée imbriquée à trois niveaux :

<ol>
  <li>Semaine du 20 mars
    <ol>
      <li>Baudelaire
        <ol>
          <li>Correspondances</li>
          <li>Harmonie du soir</li>
          <li>L'homme de la mer</li>
        </ol>
      </li>
      <li>Prévert</li>
      <li>Hugo</li>
      <li>Apollinaire</li>
    </ol>
  </li>
</ol>

Définissez dans style.css les règles CSS de zone2 : une zone de largeur 600 px, sur fond clair (#E5FBE2), décalée de 50 px à gauche avec une marge haute de 20 px ; le tableau sur 70 % de large avec border-collapse: collapse, des bordures fines et un padding sur th/td ; les lignes paires en blanc (tr:nth-child(even)) ; au survol d'une ligne, le texte passe en gras et grossit légèrement ; la dernière colonne (td:last-child) en vert.
Numérotez les listes ordonnées (list-style-type) : 1er niveau en upper-alpha (A, B…), 2e niveau en lower-alpha (a, b…), 3e niveau en lower-roman (i, ii…).

À retenir : tr:nth-child(even) cible les lignes paires, td:last-child la dernière colonne, :hover gère le survol. Les listes imbriquées se numérotent à chaque niveau avec list-style-type.

3.4 Zone 3 : le texte entoure une image (float)

Ajoutez un <h3> « Zone 3 : Image entourée de texte », suivi d'un bloc zone3 contenant la photo du portrait suivie d'un paragraphe de biographie :

<div id="zone3">
  <h3>Zone 3 : Image entourée de texte</h3>
  <img src="img/portrait.png" alt="Portrait">
  <p>Long texte de biographie… sur plusieurs paragraphes.</p>
</div>

Définissez les règles CSS (fond #F9F8DB, mêmes propriétés de zone que zone2, texte justifié) : faites flotter l'image à gauche (float: left) avec une marge droite, pour que le texte l'entoure.
Testez float: right à la place de float: left, puis ajoutez une règle pour que le flottement soit arrêté après la zone (#zone3 { overflow: auto; } ou un élément clear: both).

À retenir : float sort l'élément du flux et fait couler le texte autour. On l'arrête avec clear ou overflow: auto sur le conteneur.

Ajoutez un <h3> « Zone 4 : Menu horizontale ». Le h3 sert aussi à arrêter le flottement de la zone précédente (clear: both).
Créez une section <nav> avec les rubriques sous forme de liste non ordonnée :

<h3 style="clear: both;">Zone 4 : Menu horizontale</h3>
<nav>
  <ul>
    <li><a href="#">Biographie</a></li>
    <li><a href="#">Poèmes</a></li>
    <li><a href="#">Galerie</a></li>
    <li><a href="#">Ressources</a></li>
    <li><a href="#">Contacts</a></li>
  </ul>
</nav>

# : lien vide pour tester. Il pourra être remplacé par une URL réelle.

Définissez les règles CSS du menu : le nav sur 700 px, centré ; la liste sans puces (list-style-type: none) et sans padding ; les li mis en ligne (display: inline-block), de largeur 100 px, sur fond noir avec une bordure bleue et un texte centré ; les liens en blanc, sans soulignement (text-decoration: none).
Au survol d'un item (nav li:hover), le fond passe de noir à bleu.
(Optionnel) Remplaçons les couleurs de fond par des (background-image) : choisissez une image pour l'état normal et une autre pour le survol (créez ou récupérez deux petites images de votre choix).

À retenir : un menu se construit avec <nav> + <ul> + <li>. list-style-type: none supprime les puces, display: inline-block met les items en ligne, text-decoration: none retire le soulignement des liens.

3.6 Zone 5 : contenu sur deux colonnes

Ajoutez un <h3> « Zone 5 : Contenu sur deux colonnes », suivi d'un bloc zone5 contenant deux paragraphes avec le même long texte (la biographie, par exemple).
Réalisez les deux colonnes par flexbox (le plus simple) : le conteneur #zone5 en display: flex avec un clear: both et un espacement (gap: 20px), chaque paragraphe en flex: 1 et texte justifié.
Testez les deux autres méthodes :
- float : deux paragraphes avec float: left; width: 48%; ;
- position : deux paragraphes en position: absolute;, l'un avec left: 0;, l'autre avec left: 50%; (n'oubliez pas de fixer une largeur, ex. width: 48%, sinon les deux colonnes se chevauchent).
Généralisez le principe sur plusieurs colonnes (3 ou 4) et testez.

À retenir : display: flex dispose les enfants en ligne et est la méthode la plus simple pour créer des colonnes. gap espace les éléments.

Créez un autre menu en travaillant le positionnement des items avec flex :

<nav class="menu-flex">
  <ul>
    <li><a href="#">Accueil</a></li>
    <li><a href="#">Bio</a></li>
    <li><a href="#">Galerie</a></li>
  </ul>
</nav>

Testez : les items s'étirent de façon égale sur toute la largeur. Supprimez flex: 1 et observez.
Définissez en CSS (classe .menu-flex) : la liste en display: flex, sans puces et avec un gap de 10 px ; chaque li en flex: 1, sur fond bleu, texte centré ; les liens en blanc, sans soulignement, en display: block avec un padding de 10 px ; au survol des liens, un fond plus clair.

3.8 Pour aller plus loin : rendre la page adaptative

Les sites se consultent sur écran très variés (ordinateur, tablette, smartphone). Le Responsive Web Design adapte l'affichage à l'appareil.

Ajoutez dans le <head> de page.html la balise viewport :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Ajoutez en fin de style.css une règle @media only screen and (max-width: 480px) dans laquelle vous adaptez la mise en page : les zones 1 à 3 passent à 100 % de largeur sans marge gauche, le nav à 100 %, la zone 5 en une seule colonne (flex-direction: column), et les images rétrécissent à 100 % de la largeur (« max-width: 100%, height: auto »).
Redimensionnez la fenêtre du navigateur (ou utilisez le mode responsive de F12) : passez sous 480 px et observez la mise en page qui change.
Testez l'import conditionnel de feuilles de style selon l'appareil. Créez bureau.css et smartphone.css en copiant style.css puis en changeant seulement quelques propriétés (par exemple la couleur des h3 ou la largeur des zones), et ajoutez dans page.html :

<link rel="stylesheet" media="only screen and (min-width: 480px)" href="bureau.css">
<link rel="stylesheet" media="only screen and (max-width: 480px)" href="smartphone.css">

Redimensionnez la fenêtre de part et d'autre de 480 px et observez quelle feuille s'applique selon l'appareil.

À retenir : les règles @media appliquent des styles selon la taille de l'écran. La balise <meta name="viewport"> est indispensable au rendu mobile. flex-direction: column empile les colonnes sur petit écran.