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.
Une ombre portée (recherche) : donnez une ombre portée à zone1 pour la détacher du fond de page, et une ombre plus légère sur son titre pour le faire ressortir.
Des guillemets automatiques (recherche) : insérez automatiquement un guillemet ouvrant au début et un guillemet fermant à la fin de la citation, sans les écrire dans le texte : ils doivent être générés par le CSS.
Premier et dernier paragraphe (recherche) : stylisez différemment le premier et le dernier paragraphe de la citation (par exemple une couleur ou une marge particulière pour chacun).

À 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.
Une quatrième méthode : la grille (recherche) : le cours présente aussi une mise en page en grille. Refaites vos colonnes (2, 3 ou 4) avec cette approche : définissez une grille à plusieurs colonnes d'égale largeur et un espacement régulier entre elles.

Bonus — Le jeu des flexbox (Flexbox Froggy)

Pour maîtriser flexbox de façon ludique et sans écrire de page complète :

Ouvrez le jeu Flexbox Froggy dans votre navigateur.
Principe : à chaque niveau, une petite grenouille (frog) doit rejoindre un nénuphar (lily) ; il faut écrire la ou les propriétés CSS flexbox de justify-content, align-items (et leurs variantes center, flex-end, space-between, space-around… ) qui placent les grenouilles au bon endroit.
Les niveaux progressent des alignements simples (justify-content, align-items) vers des cas plus fins (flex-direction, order, flex-wrap, align-self…).
Terminez au moins la moitié des niveaux puis, selon votre aisance, poursuivez jusqu'à la fin. Notez dans vos réponses les propriétés qui vous ont posé problème et leur effet sur l'axe principal vs l'axe secondaire.
Réutilisez ensuite librement ces propriétés dans les exercices Zone 5 (colonnes) et Zone 6 (menu) du TP3.

Bonus — Le jeu de la grille (CSS Grid Garden)

Pour compléter la quatrième méthode : la grille (recherche) de la Zone 5, entraînez-vous de façon ludique :

Ouvrez le jeu CSS Grid Garden dans votre navigateur.
Principe : comme pour Flexbox Froggy, il faut faire pousser des carottes dans des parcelles (garden) en écrivant les propriétés CSS de grille qui placent correctement chaque élément (grid-column, grid-row, grid-area, grid-template-columns, …).
Les niveaux progressent des positions simples (grid-column-start, grid-column-end) vers la construction complète d'une grille (grid-template-columns, grid-template-rows, justify-items, align-items…).
Terminez au moins la moitié des niveaux puis, selon votre aisance, poursuivez jusqu'à la fin. Comparez mentalement avec Flexbox Froggy : quelles commandes vous semblent proches, lesquelles sont propres à la grille ?
Réutilisez ensuite librement ces propriétés pour généraliser la Zone 5 sur 3 ou 4 colonnes en utilisant une grille plutôt que flex.

À 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.
Des transitions au survol (recherche) : le changement de couleur au survol est brusque. Rendez-le progressif et fluide, et faites apparaître un pointeur adapté lors du survol des liens du menu.
Positionnement avancé (recherche) : faites en sorte que le menu reste fixé au haut de la fenêtre même en faisant défiler la page, puis testez la variante où l'élément « colle » au haut de l'écran dès qu'on l'atteint en défilant. Placez éventuellement un bandeau qui passe au-dessus du reste du contenu et cherchez comment contrôler l'empilement des éléments.

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.
Des unités liées à l'écran (recherche) : en plus du pourcentage, certaines unités se basent directement sur la largeur ou la hauteur de la fenêtre. Testez-les sur une de vos zones et observez le comportement quand vous redimensionnez l'écran, puis cherchez leurs variantes qui prennent la plus petite dimension.

À 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.

3.9 Complément : des zones au sens propre (recherche)

Jusqu'ici, vos zones sont toutes réalisées avec de simples <div> génériques, qui n'ont pas de signification pour le navigateur ni pour les moteurs de recherche. HTML5 fournit d'autres balises de section dotées d'un sens (elles décrivent le rôle du contenu : découper en sections, délimiter un contenu annexe, isoler le contenu principal…), autres que l'en-tête, le pied de page et la navigation déjà utilisés.

Recherchez d'autres balises de section sémantiques de HTML5 (différentes de celles déjà utilisées dans les TP et le cours) et notez le rôle de chacune.
Remplacez au moins deux de vos zones <div> par des balises sémantiques plus adaptées au contenu qu'elles contiennent.
Revalidez votre page au W3C : le rendu visuel doit rester identique (grâce à vos règles CSS via id/class), mais la structure gagne du sens.