Séance n°3 : Notions avancées HTML5 & CSS3

Mise en situation & Objectifs

Cette troisième séance d'informatique en 3^ème SI approfondit la maîtrise des langages HTML5 et CSS3 à travers des concepts avancés de structuration et de mise en page. Elle permet de consolider l'autonomie des élèves dans l'intégration modulaire, la manipulation du flux de document, le contrôle précis des dimensions et l'application d'effets visuels modernes avant d'aborder la programmation dynamique en JavaScript.

Auto-évaluation & Prérequis

Vérifiez la maîtrise de vos prérequis en HTML5 et CSS3 avant de débuter l'étude des notions avancées de cette séance :

Question 1

Quelle est la différence fondamentale de comportement entre une balise de niveau bloc (ex. <div>, <p>) et une balise de niveau en-ligne (ex. <span>, <a>) ?

Question 2

Quelle est la différence entre l'attribut booléen hidden en HTML5 et la déclaration CSS display: none; ?

Question 3

À quoi sert l'attribut target sur un lien hypertexte <a>, et comment peut-on le relier à un <iframe> ?

Cadres intégrés : <iframe>

L'élément <iframe> (pour inline frame) permet d'incorporer une autre page HTML, un document interactif ou une ressource externe directement à l'intérieur de la page Web courante, formant ainsi une fenêtre de navigation autonome.

1. Syntaxe fondamentale

<iframe src="vision.html" name="mini_sandbox" width="800" height="400">
  Votre navigateur ne supporte pas les iframes.
</iframe>

2. Attributs essentiels

• src : spécifie l'adresse URL (absolue ou relative) du document à afficher dans le cadre.
• name : attribue un identifiant de contexte de navigation au cadre, permettant à des hyperliens de le cibler.

3. Mécanisme de ciblage avec l'attribut target

Par défaut, un lien hypertexte s'ouvre dans la fenêtre courante (target="_self") ou dans un nouvel onglet (target="_blank"). En affectant à l'attribut target d'un lien la valeur du name d'un <iframe>, le clic sur ce lien charge immédiatement le document à l'intérieur de ce cadre sans recharger la page principale.

Exemple : Manuel numérique avec sommaire interactif

Considérons un manuel de cours en ligne où une barre de navigation permet d'afficher les différents chapitres dans une zone de lecture unique :

<!-- 1. Liens du sommaire ciblant le cadre "zone_cours" -->
<nav>
  <a href="chapitre1.html" target="zone_cours">Chapitre 1 : Introduction au Web</a> |
  <a href="chapitre2.html" target="zone_cours">Chapitre 2 : Balises HTML5</a> |
  <a href="chapitre3.html" target="zone_cours">Chapitre 3 : Feuilles CSS3</a>
</nav>

<!-- 2. Cadre récepteur identifié par name="zone_cours" -->
<iframe src="chapitre1.html" name="zone_cours" width="100%" height="240">
  Votre navigateur ne supporte pas les cadres intégrés.
</iframe>

Principe d'exécution : Lorsque l'utilisateur clique sur le lien « Chapitre 2 : Balises HTML5 », le navigateur repère le cadre portant name="zone_cours" et y charge la page chapitre2.html sans jamais quitter ni rafraîchir la page principale.

Exercice 1 : Cadres intégrés

L'objectif de cet exercice pratique est de concevoir un Manuel Numérique en combinant une barre de navigation et un cadre intégré.

Travail demandé :

1. Étape 1 — Téléchargement et extraction des fichiers de base :

   Téléchargez l'archive TODO.zip via le bouton ci-dessus et décompressez-la dans votre dossier de travail.

   Vous obtiendrez les fichiers suivants :

   • chapitre1.html : Introduction au Web & Architecture Client-Serveur.
   • chapitre2.html : Balises fondamentales & Sémantique HTML5.
   • chapitre3.html : Feuilles de style & Effets visuels CSS3.
   • style.css : Feuille de styles assurant la présentation visuelle des fiches.
2. Étape 2 — Création de la page principale index.html :

   Dans le même dossier, créez le fichier index.html.

3. Étape 3 — Mise en place de la barre de navigation :

   Dans le corps de la page, ajoutez un titre principal et trois liens hypertextes <a> :

   • Lien 1 : « Chapitre 1 : Introduction » pointant le fichier chapitre1.html
   • Lien 2 : « Chapitre 2 : Balises HTML5 » pointant le fichier chapitre2.html
   • Lien 3 : « Chapitre 3 : Feuilles CSS3 » pointant le fichier chapitre3.html

   Ajoutez à chacun de ces trois liens l'attribut target afin d'indiquer que la cible d'affichage est le cadre intégré récepteur.

4. Étape 4 — Intégration et paramétrage du cadre <iframe> :

   Dans la section principale (<main>), insérez un cadre intégré avec les attributs suivants :

   • name : nom du cadre identique à la valeur detarget utilisé dans les liens.
   • src : affiche le premier chapitre dès le chargement initial de la page.
   • width et height : largeur et hauteur confortables pour la lecture (ex. width="100%" et height="500").

Règle d'or du mécanisme de ciblage :

La valeur spécifiée dans l'attribut target de chaque lien doit correspondre exactement (à la lettre près, en respectant les minuscules/majuscules) au nom défini dans l'attribut name de l'élément <iframe>.

Images adaptatives : <picture> et <source>

L'attribut media conditionne le chargement d'une ressource ou l'application d'une feuille de style selon les caractéristiques du dispositif de consultation (largeur de la fenêtre d'affichage, orientation ou résolution d'écran).

1. Images adaptatives avec <picture> et <source>

Associé à l'élément <picture> et à la balise <source>, l'attribut media permet au navigateur de sélectionner intelligemment l'image la plus appropriée :

• Sur grand écran (ordinateur de bureau, tablette en mode paysage) : le navigateur télécharge une version Haute Définition (HD) riche en détails.
• Sur petit écran (smartphone, fenêtre réduite) : le navigateur bascule automatiquement sur une version normale / standard plus légère, accélérant le chargement et économisant la bande passante.

<!-- Chargement adaptatif selon la résolution de l'écran -->
<picture>
  <!-- Image Haute Définition chargée uniquement si la largeur d'écran est >= 768px -->
  <source media="(min-width: 768px)" srcset="images/nano-banana-hd.jpg">

  <!-- Image normale / standard de repli pour les petits écrans et mobiles -->
  <img src="images/nano-banana-normal.jpg" alt="Mascotte Nano Banana" class="img-fluid rounded border shadow-sm">
</picture>

🍌 Démonstration en direct de l'image adaptative (Nano Banana) :

Redimensionnez la largeur de votre fenêtre pour observer le basculement automatique entre la version Haute Définition (≥ 768px) et la version Normale (< 768px) :

1. Version Haute Définition (HD)

Ciblée par media="(min-width: 768px)"

2. Version Normale / Standard

Définie sur la balise de repli <img>

2. Feuilles de style conditionnelles avec <link> ou <style>

L'attribut media peut également être employé sur les balises <link> ou <style> (ex. media="screen") pour restreindre l'application d'une feuille de style aux caractéristiques de l'écran.

Exercice 2 : Conception Responsive

Mettez en pratique vos compétences sur la balise <picture>, les éléments <source> et l'attribut media en réalisant une interface web adaptative capable de charger dynamiquement les images en fonction de la résolution et de l'orientation de l'écran.

Travail demandé :

1. Étape 1 — Téléchargement et extraction des fichiers de base :

   Téléchargez puis décompressez l'archive TODO.zip via le bouton ci-dessus. Vous obtiendrez les éléments suivants :

   • index.html : le fichier HTML d'exercice à compléter.
   • style.css : la feuille de styles intégrant la mise en page responsive et l'indicateur de largeur en direct.
   • images/ : le dossier contenant les visuels optimisés pour chaque résolution et format d'affichage.
2. Étape 2 — Direction artistique par largeur d'écran (Paysage de montagne) :

   Dans la première section de index.html, complétez le conteneur <picture> pour charger l'image adaptée à la largeur de la fenêtre :

   • Sur grand écran (largeur ≥ 1024px) : charger images/banner-desktop.jpg (1200×500 px).
   • Sur écran moyen (largeur ≥ 768px) : charger images/banner-tablet.jpg (800×450 px).
   • Par défaut et sur smartphone (< 768px) : afficher images/banner-mobile.jpg via la balise <img>.
   💡 Ordre d'évaluation des règles media :

   Le navigateur évalue les balises <source> de haut en bas et retient la première condition vérifiée. Il faut donc toujours ordonner les règles min-width de la plus grande à la plus petite (ex. 1024px avant 768px).

   

3. Étape 3 — Adaptation d'un poste de travail informatique (Thème STI) :

   Dans la deuxième section, configurez le chargement adaptatif pour le thème technologique :

   • Grand écran (≥ 1024px) : images/tech-desktop.jpg
   • Écran moyen (≥ 768px) : images/tech-tablet.jpg
   • Mobile (< 768px) : images/tech-mobile.jpg (balise <img> de repli).
4. Étape 4 — Détection de l'orientation de l'écran :

   Dans la troisième section, utilisez le critère d'orientation :

   • En mode paysage (largeur > hauteur) : condition media="(orientation: landscape)" pour charger images/paysage.jpg.
   • En mode portrait (vertical) : balise de repli <img src="images/portrait.jpg" ...>.
5. Étape 5 — Test et validation dans le navigateur :

   Ouvrez votre fichier index.html dans un navigateur. Redimensionnez horizontalement la fenêtre et observez :

   • L'indicateur interactif en haut de page affiche en temps réel la largeur en pixels et le palier actif (Desktop, Tablette ou Mobile).
   • L'image bascule automatiquement avec le badge correspondant incrusté dans le visuel.

Abréviations : <abbr>

En HTML5, la balise sémantique <abbr> (pour abbreviation) est utilisée pour représenter une abréviation, un sigle ou un acronyme (ex. IA, HTML, CSS).

1. Rôle et utilisation de l'attribut title

Pour expliciter le sens d'un terme abrégé, on lui associe systématiquement l'attribut title, qui contient la description ou le développement complet du sigle :

<p>
  Le standard <abbr title="HyperText Markup Language">HTML5</abbr>
  est maintenu par le <abbr title="World Wide Web Consortium">W3C</abbr>.
</p>

2. Atouts ergonomiques et accessibilité

• Infobulle native (tooltip) : Le navigateur affiche automatiquement une infobulle explicative lorsque l'internaute survole l'élément avec le pointeur de la souris.
• Accessibilité (A11y) : Les lecteurs d'écran utilisés par les personnes malvoyantes peuvent énoncer le développement complet du terme au lieu de simplement épeler les lettres.
• Rendu visuel par défaut : La plupart des navigateurs soulignent le texte délimité par <abbr> d'une fine ligne pointillée discrète (dotted underline) pour inciter au survol.

Code HTML de la démonstration :

<p>
  Un modèle d'<abbr title="Intelligence Artificielle">IA</abbr> applique un algorithme de
  <abbr title="Mécanisme d'ajustement automatique des poids du réseau neuronal">rétropropagation</abbr>
  sur un processeur <abbr title="Graphics Processing Unit - Processeur graphique hautement parallélisé">GPU</abbr>
  pour minimiser l'<abbr title="Écart mesuré entre la prédiction mathématique et la valeur réelle">erreur quadratique</abbr>.
</p>

Éléments invisibles

HTML5 fournit l'attribut booléen global hidden pour indiquer qu'un élément n'est pas ou n'est plus pertinent pour l'affichage courant.

1. Comportement de l'attribut hidden

Lorsqu'un élément possède l'attribut hidden, le navigateur le retire totalement de l'affichage visuel et libère immédiatement l'espace qu'il aurait dû occuper dans le flux de la page :

<!-- Paragraphe confidentiel masqué de l'affichage -->
<p hidden>Données de diagnostic interne réservées aux administrateurs.</p>

<!-- Bloc de calcul masqué à l'état initial -->
<div id="bloc-formule" hidden>
  <h4>Formule mathématique</h4>
  <p>y = 0.5 * x + 2.0</p>
</div>

2. Comparaison avec les règles de visibilité CSS

3. Démonstration des trois méthodes de masquage

Pour observer concrètement la différence d'occupation spatiale entre ces trois techniques, considérons une rangée composée de trois éléments consécutifs : Bloc 1, Bloc 2 (l'élément soumis au masquage) et Bloc 3.

Code source HTML & CSS des trois méthodes :

<!-- 1. État initial de référence (les 3 blocs sont visibles) -->
<div class="conteneur">
  <div class="bloc bloc-1">Bloc 1</div>
  <div class="bloc bloc-2">Bloc 2 (Visible)</div>
  <div class="bloc bloc-3">Bloc 3</div>
</div>

<!-- 2. Méthode 1 : Attribut HTML5 hidden -->
<div class="conteneur">
  <div class="bloc bloc-1">Bloc 1</div>
  <div class="bloc bloc-2" hidden>Bloc 2 (hidden)</div>
  <div class="bloc bloc-3">Bloc 3</div>
</div>

<!-- 3. Méthode 2 : Règle CSS display: none -->
<div class="conteneur">
  <div class="bloc bloc-1">Bloc 1</div>
  <div class="bloc bloc-2" style="display: none;">Bloc 2 (display: none)</div>
  <div class="bloc bloc-3">Bloc 3</div>
</div>

<!-- 4. Méthode 3 : Règle CSS visibility: hidden -->
<div class="conteneur">
  <div class="bloc bloc-1">Bloc 1</div>
  <div class="bloc bloc-2" style="visibility: hidden;">Bloc 2 (visibility: hidden)</div>
  <div class="bloc bloc-3">Bloc 3</div>
</div>

Comparatif visuel du rendu dans le navigateur :

Exercice 3 : Abréviations et Éléments invisibles

Mettez en application la balise sémantique <abbr> (avec son attribut title) ainsi que les différentes techniques de masquage d'éléments (l'attribut natif HTML5 hidden, et les propriétés CSS display: none et visibility: hidden) en complétant une fiche technique de diagnostic système.

Travail demandé :

1. Étape 1 — Téléchargement et extraction des fichiers :

   Téléchargez puis décompressez l'archive TODO.zip. Vous obtiendrez les éléments suivants :

   • index.html : la page de spécifications et de diagnostic à compléter.
   • style.css : la feuille de styles définissant la présentation des cartes.
2. Étape 2 — Balisage sémantique des acronymes du texte :

   Dans le premier paragraphe de index.html, encadrez les abréviations suivantes avec la balise <abbr> et son attribut title :

   • IA : « Intelligence Artificielle »
   • IoT : « Internet of Things - Internet des Objets connectés »
   • W3C : « World Wide Web Consortium - Organisme de standardisation du Web »
   • HTML5 : « HyperText Markup Language - Version 5 »
   • CSS3 : « Cascading Style Sheets - Feuilles de style en cascade »
   • URL : « Uniform Resource Locator - Adresse Web normalisée »
3. Étape 3 — Fiches de spécifications matérielles :

   Dans la grille des spécifications (.specs-grid), appliquez la balise <abbr title="..."> aux quatre composants matériels :

   • CPU : « Central Processing Unit - Processeur principal à 16 cœurs »
   • GPU : « Graphics Processing Unit - Processeur graphique dédié au calcul intensif »
   • RAM : « Random Access Memory - Mémoire vive volatile haute vitesse DDR5 »
   • SSD : « Solid State Drive - Disque à mémoire flash ultra-rapide NVMe »
4. Étape 4 — Masquage sécurisé du journal avec l'attribut hidden :

   Le conteneur #diagnostic-box contient des données confidentielles (journal d'audit, clés SHA256) qui doivent être totalement masquées à l'affichage :

   • Ajoutez l'attribut booléen hidden à la balise <div id="diagnostic-box" class="confidential-box">.
   • Vérifiez dans votre navigateur que le bloc n'est plus visible et qu'aucun espace blanc n'est laissé dans la page.
5. Étape 5 — Implémentation des 3 techniques de masquage (HTML & CSS) :

   Dans la section 3 (Comparatif) de index.html, complétez le balisage des cartes pour appliquer vous-même chaque technique sur le Nœud Bêta (2) :

   • Cas 2 — Attribut HTML5 hidden : ajoutez l'attribut booléen hidden sur le Nœud Bêta :
     <div class="node-box target" hidden>Nœud Bêta (hidden)</div>.
   • Cas 3 — Règle CSS display: none; : appliquez le style en ligne style="display: none;" sur le Nœud Bêta :
     <div class="node-box target" style="display: none;">Nœud Bêta (display: none)</div>.
   • Cas 4 — Règle CSS visibility: hidden; : appliquez le style en ligne style="visibility: hidden;" sur le Nœud Bêta :
     <div class="node-box target" style="visibility: hidden;">Nœud Bêta (visibility: hidden)</div>.

   Actualisez votre fichier dans un navigateur pour observer simultanément la différence d'occupation spatiale :

   • Dans les cas 2 (hidden) et 3 (display: none) : le Nœud Bêta a disparu et son espace est libéré (le Nœud Gamma se colle contre le Nœud Alpha).
   • Dans le cas 4 (visibility: hidden) : le Nœud Bêta est invisible, mais son espace physique reste réservé (un trou blanc est visible entre Alpha et Gamma).

Sélecteurs combinés : element.class

Le sélecteur combiné element.classe cible uniquement une balise HTML précise portant une classe déterminée, sans espace entre le nom de la balise et le point de la classe.

1. Utilité et intérêt pédagogique

Contrairement à un sélecteur de classe simple (.classe) qui s'applique indistinctement à n'importe quel élément, le sélecteur combiné renforce la précision sémantique du style et évite d'impacter par erreur d'autres balises partageant le même nom de classe :

/* Cible uniquement les balises <table> ayant la classe benchmark-table */
table.benchmark-table {
  width: 100%;
  border-collapse: collapse;
}

/* Cible uniquement les balises <img> ayant la classe filter-preview */
img.filter-preview {
  width: 100%;
  display: block;
  border-radius: 8px;
  max-width: 100%;
  height: auto;
}

/* Cible uniquement les balises <figure> ayant la classe carte-filtre */
figure.carte-filtre {
  clear: both;
  text-align: center;
}

/* Cible uniquement les balises <span> ayant la classe result-display */
span.result-display {
  font-weight: bold;
  color: #4f46e5;
}

2. Code source et démonstration pratique

Considérons trois balises HTML différentes (<button>, <a> et <div>) qui partagent la même classe action-element :

<!-- Même classe action-element, mais balises distinctes -->
<button type="button" class="action-element">Bouton Action</button>
<a href="#" class="action-element">Lien Action</a>
<div class="action-element">Bloc d'information Action</div>

/* Stylise UNIQUEMENT le bouton */
button.action-element {
  background: #4f46e5;
  color: #ffffff;
  border: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
}

/* Stylise UNIQUEMENT le lien */
a.action-element {
  color: #06b6d4;
  text-decoration: underline;
  font-weight: 600;
  padding: 6px 14px;
}

/* Stylise UNIQUEMENT le bloc conteneur */
div.action-element {
  background: #f8fafc;
  border-left: 4px solid #4f46e5;
  padding: 6px 14px;
}

Type d'affichage : display

La propriété display définit le comportement de la boîte générée par un élément dans le flux du document et détermine la façon dont il s'insère par rapport aux éléments voisins :

Code source et démonstration comparative des modes display

<!-- 1. Éléments de type block (empilement vertical pleine largeur) -->
<div class="demo-item-block">Bloc 1 (display: block)</div>
<div class="demo-item-block">Bloc 2 (display: block)</div>

<!-- 2. Éléments de type inline (dans le texte, dimensions ignorées) -->
<span class="demo-item-inline">Inline A</span>
<span class="demo-item-inline">Inline B</span>

<!-- 3. Éléments de type inline-block (côte à côte avec dimensions respectées) -->
<div class="demo-item-inline-block">Inline-Block 1</div>
<div class="demo-item-inline-block">Inline-Block 2</div>

Positionnement flottant : float

La propriété float détache temporairement un élément du flux normal pour le placer à gauche (float: left;) ou à droite (float: right;) de son conteneur, permettant au texte suivant de s'enrouler autour de lui (effet d'habillage).

1. Code source de l'habillage et du rétablissement du flux

<div class="conteneur-flottant">
  <!-- Image de bloc alignée à gauche avec float: left -->
  <img src="images/miniprojet-20.svg" alt="IA" class="img-flottante">
  
  <!-- Texte qui s'enroule autour de l'image -->
  <p>L'apprentissage automatique permet aux ordinateurs d'apprendre à partir de données...</p>
  
  <!-- Séparateur rétablissant le flux sous l'image flottante -->
  <div class="clear-line"></div>
  <p>Ce paragraphe démarre proprement sous l'image grâce à clear: both.</p>
</div>

img.img-flottante {
  display: block;
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 1.25rem;
  margin-bottom: 0.5rem;
  border-radius: 8px;
}

/* Annule l'effet flottant et force le contenu suivant à passer dessous */
.clear-line {
  clear: both;
}

2. Démonstration visuelle de float et clear

⚡ Habillage de texte autour d'une image flottante (float: left) :

L'apprentissage automatique (ML) permet aux ordinateurs d'apprendre à partir de données sans être explicitement programmés pour chaque cas de figure. Le texte s'enroule naturellement autour de l'image grâce à la règle float: left; margin-right: 1.25rem;.

✓ Ligne démarrant sous l'élément flottant (clear: both)

Gestion du débordement : overflow

La propriété overflow détermine le comportement du contenu lorsqu'il dépasse les dimensions fixées (largeur ou hauteur) de sa boîte conteneur :

Code source et comparatif visuel des modes overflow

/* Conteneurs de hauteur fixe limitée à 80px */
.box-hidden { height: 80px; overflow: hidden; }
.box-scroll { height: 80px; overflow: scroll; }
.box-auto   { height: 80px; overflow: auto; }

Transparence et opacité : opacity

La propriété opacity applique un degré d'opacité (ou de transparence) global à un élément et à tout son contenu (textes, bordures et images enfants).

1. Échelle de valeurs

Sa valeur est un nombre décimal compris entre 0 et 1 :

• opacity: 1; : élément 100% opaque (valeur par défaut, aucune transparence).
• opacity: 0.5; : élément semi-transparent à 50%.
• opacity: 0; : élément totalement transparent (invisible, mais son espace reste réservé dans la page).

2. Code source et démonstration d'opacité

/* Règle d'opacité statique */
.carte-semi-transparente {
  opacity: 0.7;
}

/* Règle d'opacité interactive avec survol (:hover) */
.carte-interactive {
  opacity: 0.45;
  transition: opacity 0.3s ease;
}
.carte-interactive:hover {
  opacity: 1; /* Retour à 100% au survol */
}

Ombres portées : box-shadow

La propriété box-shadow projette une ombre portée autour du cadre d'un élément, créant une impression de relief et de profondeur visuelle.

1. Syntaxe de la propriété

box-shadow: decalage-x decalage-y flou [etalement] couleur;

• décalage-x : déplacement horizontal de l'ombre (positif vers la droite, négatif vers la gauche).
• décalage-y : déplacement vertical de l'ombre (positif vers le bas, négatif vers le haut).
• flou (blur) : rayon de diffusion du flou gaussien (0 = contour net).
• étalement (spread, optionnel) : accroissement ou réduction de la taille de l'ombre.
• couleur : couleur de l'ombre, souvent exprimée en rgba() pour doser la transparence.

2. Code source des différents styles d'ombres

/* 1. Ombre douce d'interface */
.ombre-douce {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* 2. Ombre d'élévation prononcée */
.ombre-elevee {
  box-shadow: 0 12px 24px -4px rgba(15, 23, 42, 0.22);
}

/* 3. Halo lumineux d'accentuation */
.ombre-halo {
  box-shadow: 0 0 18px rgba(6, 182, 212, 0.55);
}

Transformation de texte : text-transform

La propriété text-transform contrôle la casse des caractères d'un texte sans modifier le contenu d'origine dans le code HTML :

Code source et démonstration sur un même texte

<!-- Code HTML d'origine : "réseau de neurones profonds" -->
<p style="text-transform: uppercase;">réseau de neurones profonds</p>
<p style="text-transform: lowercase;">RÉSEAU DE NEURONES PROFONDS</p>
<p style="text-transform: capitalize;">réseau de neurones profonds</p>
<p style="text-transform: none;">réseau de neurones profonds</p>

Filtres graphiques : filter

La propriété filter applique des traitements graphiques et des effets visuels directement sur les éléments (notamment les images <img>) au niveau du navigateur :

Code HTML et CSS de la galerie de filtres

<!-- Application des filtres graphiques sur l'image source -->
<img src="images/miniprojet-20.svg" style="filter: none;" alt="Original">
<img src="images/miniprojet-20.svg" style="filter: grayscale(100%);" alt="Niveaux de gris">
<img src="images/miniprojet-20.svg" style="filter: contrast(200%);" alt="Contraste élevé">
<img src="images/miniprojet-20.svg" style="filter: blur(3px);" alt="Flou gaussien">

🖼️ Démonstration des filtres CSS sur une image :

1. Normal (none)

2. Gris (100%)

3. Contraste (200%)

4. Flou (3px)

Transitions fluides : transition

La propriété transition permet d'animer progressivement le changement d'une ou plusieurs propriétés CSS d'un état initial vers un nouvel état (notamment lors du survol avec la pseudo-classe :hover).

1. Propriétés détaillées et syntaxe raccourcie

• transition-property : nom de la propriété CSS à animer (ex. top, box-shadow, opacity ou all).
• transition-duration : durée de l'animation en secondes (ex. 0.3s) ou millisecondes (ex. 300ms).
• transition-timing-function : rythme de l'animation (ex. ease, linear, ease-in-out).
• transition-delay : délai d'attente avant le début de l'animation (optionnel).

2. Code source de l'animation au survol

/* Syntaxe : transition: propriété durée timing; */
button.btn-anime {
  background-color: #4f46e5;
  color: #ffffff;
  padding: 10px 22px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25);
  /* Animation progressive et fluide sur 3 propriétés en 0.3s */
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

button.btn-anime:hover {
  background-color: #06b6d4;                      /* Transition vers le cyan */
  transform: translateY(-4px) scale(1.04);        /* Légère élévation */
  box-shadow: 0 10px 20px rgba(6, 182, 212, 0.4); /* Accentuation de l'ombre */
}

Bordures de tableaux : border-collapse

La propriété border-collapse définit la manière dont le navigateur gère les bordures entre les cellules d'un tableau HTML (<table>).

Code HTML et CSS des deux modes de bordures

/* Cas 1 : Bordures séparées avec espacement visible */
table.table-separate {
  border-collapse: separate;
  border-spacing: 5px;
}

/* Cas 2 : Bordures fusionnées en une ligne fine et nette */
table.table-collapse {
  border-collapse: collapse;
}

Disposition des colonnes : table-layout

La propriété table-layout détermine l'algorithme employé par le navigateur pour calculer la largeur des colonnes et la mise en page d'un tableau.

Code HTML et CSS d'un tableau à disposition fixe

<table class="tableau-benchmark">
  <thead>
    <tr>
      <th class="col-arch">Architecture (25%)</th>
      <th class="col-usage">Usage principal (45%)</th>
      <th class="col-acc">Précision (15%)</th>
      <th class="col-lat">Latence (15%)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ResNet-50</td>
      <td>Reconnaissance d'images et vision artificielle</td>
      <td>94.8%</td>
      <td>12 ms</td>
    </tr>
  </tbody>
</table>

table.tableau-benchmark {
  width: 100%;
  table-layout: fixed;        /* Largeurs fixes imposées dès la 1ère ligne */
  border-collapse: collapse; /* Bordures fusionnées */
}

table.tableau-benchmark th.col-arch  { width: 25%; }
table.tableau-benchmark th.col-usage { width: 45%; }
table.tableau-benchmark th.col-acc   { width: 15%; }
table.tableau-benchmark th.col-lat   { width: 15%; }

table.tableau-benchmark th,
table.tableau-benchmark td {
  border: 1px solid #cbd5e1;
  padding: 8px 12px;
  overflow: hidden;
}

Application 1 : Plateforme « IA Décodée »

Architecture des fichiers du projet

Le projet est structuré en 4 pages interconnectées et une feuille de style partagée :

TODO/
├── index.html           # Hub principal : anatomie du neurone et cadre <iframe>
├── vision.html          # Atelier Vision : galerie des 4 filtres graphiques CSS
├── regression.html      # Atelier Régression : indicateur flottant et attribut hidden
├── performances.html    # Atelier Benchmark : tableau table-layout: fixed et terminal logs
├── style.css            # Feuille de style globale (charte graphique moderne, vive & attractive)
└── images/
    ├── neurone-hd.svg       # Schéma HD pour grands écrans (<source media="...">)
    ├── neurone-mobile.svg   # Schéma compact pour mobiles (<img>)
    └── vision-test.svg      # Image de test pour les filtres graphiques

Travail à faire

Pour réaliser l'atelier, l'élève travaille dans le dossier TODO/ et complète les consignes signalées par les commentaires TODO :

1. Dans index.html (Hub principal) :
   • TODO 1 : Configurer l'attribut media="(min-width: 800px)" sur la balise <source> pour l'image adaptative.
   • TODO 2 : Déclarer les infobulles explicatives sur les termes techniques avec <abbr title="...">.
   • TODO 3 : Associer l'attribut target="mini_sandbox" aux liens de la barre d'outils pour piloter le cadre.
   • TODO 4 : Intégrer le cadre d'affichage <iframe src="vision.html" name="mini_sandbox">.
2. Dans vision.html (Atelier Vision) :
   • TODO 1 : Rédiger le code HTML complet des 4 figures sémantiques <figure class="carte-filtre">, avec leurs balises <img> (classes filter-normal, filter-grayscale, filter-contrast, filter-blur) et leurs légendes <figcaption>.
3. Dans regression.html (Atelier Régression) :
   • TODO 1 : Déclarer le conteneur du résultat <span id="temps_predit" class="result-display">50 min</span>.
   • TODO 2 : Ajouter l'attribut global booléen hidden pour masquer la note interne de calcul.
4. Dans performances.html (Atelier Benchmark) :
   • TODO 1 : Déclarer les classes de dimensionnement fixe des colonnes sur les en-têtes <th> (col-arch, col-usage, col-acc, col-lat).
   • TODO 2 : Encadrer les lignes de logs brutes avec la balise <pre class="terminal-logs"> pour activer le défilement contrôlé.
5. Dans style.css (Feuille de styles partagée) :
   • Compléter les règles CSS fondamentales : overflow: hidden, float: left, float: right sur un élément display: block, position: relative avec transition, text-transform: uppercase, opacity, filtres filter et table-layout: fixed avec border-collapse: collapse.

Application 2 : Graphic cards

1. Télécharger l'archive de l'application :
   📥 Télécharger l'archive de l'application (TODO.zip)
2. Créer la page index.html qui ressemble à l'aperçu suivant :

   

3. Créer la page effets.html qui ressemble à l'aperçu suivant :

   

Application 3 : Association « Sport Pour Tous »

Aperçus des maquettes à réaliser

Les captures d'écran ci-dessous présentent le rendu visuel attendu pour chacune des quatre pages :

1. Page principale : index.html

Cette page constitue le cadre récepteur du site. Elle intègre l'en-tête, la navigation à trois liens, le cadre iframe affichant par défaut la page d'accueil, et le pied de page :

2. Page d'accueil intégrée : accueil.html

Affichée par défaut dans l'iframe, elle présente le visuel principal et la mission de l'association :

3. Page des activités : activite.html

Contient un accordéon dépliable, le tableau des disciplines sportives avec fusion de cellules, la liste du matériel et une galerie de 3 images :

4. Page de contact : contact.html

Affiche les coordonnées officielles, les permanences du secrétariat dans un encadré périphérique et une citation :

Guide de réalisation pas à pas

Application 4 : Disposition d'une salle de classe (« Classe »)

Aperçu du résultat final à reproduire

Observez attentivement la capture d'écran ci-dessous pour identifier l'agencement, les dimensions relatives, les bordures et les couleurs :

Cahier des charges & Spécifications techniques

Application 5 : Page institutionnelle du Lycée Hammam-Sousse (« LSHS »)

Architecture des fichiers du dossier TODO

TODO/
├── info.html         # Page HTML5 complète et structurée (textes, balises, classes et identifiants)
├── labo-info.jpg     # Photographie du laboratoire informatique du lycée
├── lshs.jpg          # Photographie de la façade du Lycée Hammam-Sousse
├── resultat.png      # Capture d'écran de référence du résultat final attendu
└── style.css         # Feuille de style CSS3 à créer et développer par l'élève

Aperçu de la maquette de référence

Le document ci-dessous illustre le rendu visuel complet à reproduire dans votre navigateur :

Spécifications techniques & Guide de stylisation