1. TP1 – Étape 2 et+

TP1 – À la manière de. Amélioration progressive et balisage sémantique.

Le TP1 « À la manière de » consiste à intégrer une page Web complète en suivant l'approche de l'amélioration progressive : balisage HTML sémantique d'abord, puis styles CSS. Avant de poursuivre, assurez-vous d'avoir lu et complété l'Étape 1 – Balisage HTML sémantique présentée au cours 3.

Correction des fichiers images

Une erreur s'est glissée dans les fichiers images distribués sur GitHub. L'image de texture a été modifiée dans la nouvelle maquette. Téléchargez le fichier corrigé ci-dessous et remplacez-le dans votre dossier images/ et retirez moroccan-flower.png

Télécharger texture.jpg (remplace moroccan-flower.png)

Stratégie d'intégration - Remise obligatoire

Contrairement à ce qui a été mentionné au dernier cours, vous devez remettre votre stratégie d'intégration! Eexportez votre stratégie d'intégration au format PDF et déposez dans le dossier `images/` de votre TP1. Cette remise est obligatoire et fait partie de la grille de correction.

Étape 2 – Débuter les CSS (charte typographique réactive)

2.1 – Relier les feuilles de styles

  • Dans le <head> de index.html, ajouter deux balises <link> pour :
    • normalize.css
    • style.css
  • Dans la section Charte typographique du style.css fourni : copier le contenu de la charte typographique comme base.
  • Dans la section Utilitaires du style.css fourni : copier le contenu suivant pour harmoniser les modèles de boîte :
/*
 * Harmoniser le modèle de boîte avec Box-Sizing
 * Nous réviserons les modèles de boîte (box models)
 * dans les cours qui suivent.
 * 
 * https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Styling_basics/Box_model
 */
html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

2.2 – Comprendre l'unité rem

Avant d'aborder la charte typographique, il est essentiel de comprendre l'unité rem (root em).

L'unité rem est relative à la taille de police de l'élément racine (<html>). Si la taille de base est de 16px (valeur par défaut des navigateurs), alors :

Valeur rem Équivalent en pixels
1rem 16px
0.875rem 14px
1.125rem 18px
1.5rem 24px
2rem 32px
2.25rem 36px

Pourquoi utiliser les rem plutôt que les pixels ?

  • Accessibilité : les utilisateurs qui modifient la taille de police par défaut dans les paramètres de leur navigateur (chrome://settings/?search=font+size dans Chrome ou via une feuille de style personnalisée dans Safari et Firefox) verront l'ensemble du site s'adapter proportionnellement. C'est différent du zoom (Ctrl/Cmd + ou -) qui agrandit tout le contenu, y compris les images.
  • Cohérence : toutes les tailles sont proportionnelles à une valeur de référence unique.
  • Maintenabilité : changer la taille de base ajuste automatiquement toutes les tailles du site.

Comment les utilisateurs modifient-ils la taille du texte ?

Les navigateurs offrent deux mécanismes distincts :

Méthode Description Impact sur les rem
Paramètres de police Dans Chrome : Paramètres > Apparence > Taille de la police. L'utilisateur choisit entre Très petite, Petite, Moyenne, Grande ou Très grande. Les rem s'adaptent car ils sont relatifs à cette taille de base.
Zoom de page Raccourci Ctrl/Cmd + ou -. Agrandit tout le contenu (texte, images, mise en page). Affecte tout, pas seulement le texte.

Les personnes malvoyantes utilisent souvent les paramètres de taille de police pour agrandir uniquement le texte sans affecter la mise en page. Si votre site utilise des pixels fixes, ces paramètres n'auront aucun effet — le texte restera illisible pour ces utilisateurs. C'est pourquoi les WCAG (Web Content Accessibility Guidelines) exigent que le texte puisse être redimensionné jusqu'à 200% sans perte de fonctionnalité.

Pour faciliter les calculs, une astuce courante consiste à définir la taille de base à 62.5% (soit 10px), ce qui rend les conversions plus simples (1rem = 10px). Cependant, cette approche peut compliquer l'accessibilité si elle n'est pas bien gérée. Dans ce TP, on conserve la base de 16px.

Agrandir le texte dans Chrome
Modifier la taille de police dans les paramètres de Chrome.
Agrandir le texte avec feuille de style personnalisée dans Safari
Utiliser une feuille de style personnalisée pour agrandir le texte dans Safari.
Agrandir le texte dans Firefox
Augmenter la taille de texte dans les paramètres d’accessibilité de Firefox.

2.3 – Charte typographique

  • Importer les Google Fonts : Roboto Condensed (300, 700) et News Cycle (400).

Impact de l'utilisation de Google Fonts

Lorsque vous utilisez Google Fonts via leur CDN (ex. fonts.googleapis.com), le navigateur doit :

  1. Établir une connexion vers un domaine externe — cela ajoute du temps de latence (DNS lookup, connexion TLS).
  2. Télécharger les fichiers de police depuis les serveurs de Google.

Cette approche présente plusieurs inconvénients :

Aspect Impact
Performance Requêtes HTTP supplémentaires vers un domaine tiers. Le navigateur doit attendre la police avant d'afficher le texte (ou afficher une police de substitution temporaire, causant un « flash » de texte — FOUT).
Vie privée Google reçoit l'adresse IP de chaque visiteur, le referer (URL de votre page) et d'autres métadonnées. Cela constitue une forme de pistage tiers.
Conformité RGPD En Europe, plusieurs décisions de tribunaux ont jugé que l'utilisation de Google Fonts sans consentement préalable viole le RGPD, car des données personnelles (IP) sont transmises à Google sans base légale.
Fiabilité Votre site dépend d'un service externe. Si Google Fonts est lent ou indisponible, l'affichage de votre site en souffre.

L'alternative : l'auto-hébergement

Pour un site en production, il peut être préférable de télécharger les fichiers de police et de les héberger sur le même domaine que votre site :

@font-face {
    font-family: 'Roboto Condensed';
    src: url('/fonts/roboto-condensed-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

Avantages :

  • Aucune requête externe — tout est chargé depuis votre serveur.
  • Pas de pistage tiers — conforme au RGPD par défaut.
  • Contrôle total — vous décidez des formats et des variantes à inclure.
  • Mise en cache optimale — les polices sont mises en cache avec vos autres ressources.

Des outils comme google-webfonts-helper facilitent le téléchargement des polices Google avec le CSS @font-face prêt à l'emploi.

Pour ce TP

L'utilisation de Google Fonts via leur CDN est acceptée pour simplifier la mise en place. Dans un contexte professionnel, privilégiez l'auto-hébergement des polices.

Attention au poids de police

News Cycle n'existe qu'en poids 400. Si vous spécifiez 300, le navigateur simulera un poids plus léger, ce qui peut dégrader le rendu.

  • Polices à utiliser :
Contexte Police
Corps du texte Roboto Condensed, weight 300
H1–H6 Roboto Condensed, weight 700
Navigation News Cycle, weight 400
  • Tailles de polices (charte responsive en rem) :

La charte ci-dessous utilise une approche mobile-first : on définit d'abord les styles pour les petits écrans, puis on les enrichit pour les écrans plus larges via des media queries.

Élément Mobile (base) Paysage (≥40rem) Desktop (≥64rem)
Body 1rem (16px) 1rem 1rem
H1 2rem (32px) 2.5rem (40px) 3rem (48px)
H2 1.5rem (24px) 2rem (32px) 2.25rem (36px)
H3 1.125rem (18px) 1.5rem (24px) 1.875rem (30px)
H4 1rem (16px) 1.125rem (18px) 1.375rem (22px)
Figcaption 0.75rem 0.875rem 0.875rem
Texte introduction 1rem 1.125rem 1.125rem

Majuscules en CSS, pas en HTML

Vous remarquerez que certains titres sont en majuscules dans la maquette. Il faut mettre les majuscules en CSS avec text-transform: uppercase et non pas en les ajoutant manuellement en majuscule dans le HTML!

2.4 – Media queries : approche mobile-first

L'approche mobile-first consiste à écrire d'abord les styles pour les petits écrans, puis à ajouter des règles pour les écrans plus larges avec min-width. Cette méthode est plus performante car les appareils mobiles n'ont pas à télécharger puis ignorer des styles qui ne les concernent pas.

Syntaxe classique

/* Styles de base (mobile) : 1rem est 16 pixels par défaut */
body {
    font-size: 1rem;
}

/* 640px (40rem) - Téléphones en mode paysage */
@media (min-width: 40rem) {
    body {
        font-size: 1rem;
    }
}

/* 1024px (64rem) - Petits ordinateurs portables, tablettes paysage */
@media (min-width: 64rem) {
    body {
        /* Même taille, mais on pourrait ajuster d'autres propriétés */
    }
}

Nouvelle syntaxe avec opérateurs de comparaison

Depuis 2022-2023, les navigateurs supportent une syntaxe plus intuitive utilisant des opérateurs mathématiques :

Ancienne syntaxe Nouvelle syntaxe
(min-width: 40rem) (width >= 40rem)
(max-width: 39.99rem) (width < 40rem)
(min-width: 40rem) and (max-width: 63.99rem) (40rem <= width < 64rem) 
/* Nouvelle syntaxe – plus lisible */
@media (width >= 40rem) {
    h1 {
        font-size: 2.5rem;
    }
}

@media (width >= 64rem) {
    h1 {
        font-size: 3rem;
    }
}

Compatibilité navigateurs :

Navigateur Version minimale Date
Chrome 104 Août 2022
Firefox 102 Juin 2022
Safari 16.4 Mars 2023
Edge 104 Août 2022

En janvier 2026, cette syntaxe est supportée par plus de 95% des navigateurs utilisés. Pour les projets devant supporter d'anciens navigateurs, un préprocesseur comme PostCSS peut convertir automatiquement vers l'ancienne syntaxe.

2.5 – Images

  • Ajouter une balise <picture> dans le header avec deux sources :
Contexte Attribut media Fichier
Écran étroit (width < 40rem) photo-montage_600.jpg
Écran large (width >= 40rem) photo-montage_1000.jpg

Vous pouvez aussi utiliser la syntaxe classique max-width: 39.99rem / min-width: 40rem si vous préférez.

  • Lier toutes les images fournies à leurs emplacements. En dehors du bandeau d'entête, une seule source par image suffit (pas de <picture> obligatoire).
  • Dans la section Utilitaires : définir max-width: 100% pour toutes les images (images fluides).

2.6 – Techniques de centrage CSS

Le centrage horizontal d'un conteneur peut se faire de plusieurs façons. Voici les approches les plus courantes, de la plus simple à la plus flexible.

Technique 1 : margin auto (classique)

La méthode historique pour centrer un élément bloc ayant une largeur définie :

.layout-page {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    /* ou plus court : margin-inline: auto; */
}

Technique 2 : Flexbox

Pour centrer le contenu à l'intérieur d'un conteneur flex :

.conteneur {
    display: flex;
    justify-content: center; /* centrage horizontal */
    align-items: center; /* centrage vertical si hauteur définie */
}

Technique 3 : Grid

CSS Grid offre la syntaxe la plus courte pour centrer un élément :

.conteneur {
    display: grid;
    place-content: center; /* centrage horizontal et vertical */
}

Pour uniquement centrer horizontalement une grille avec une colonne de largeur limitée :

body {
    display: grid;
    grid-template-columns: min(1000px, 100% - 2rem);
    justify-content: center;
}

Quelle technique choisir ?

Situation Technique recommandée
Un seul élément bloc à centrer margin-inline: auto
Plusieurs éléments à centrer dans un conteneur Flexbox
Centrage vertical et horizontal Grid avec place-content: center
Mise en page complexe avec alignements multiples Grid

2.7 – Marges et conteneur

  • Le H2 de la première section doit être presque collé sur le H1. Réduisez le margin-top du H2 ou le margin-bottom du H1.
  • Les <figure> ont des marges par défaut (environ 40px) : les redéfinir à 0 avec margin: 0.
  • Contrôler les marges selon la largeur d'écran :
    • Ajouter dans le <body> un <div> avec la classe layout-page (juste après l'ouverture de <body>, fermé juste avant </body>).
    • Sur écran étroit : petites marges internes latérales avec padding-inline.
    • Sur écran large : max-width: 1000px et centrage.

Exemple avec l'approche mobile-first :

/* Base : padding sur mobile */
.layout-page {
    padding-inline: 1rem;
}

/* 640px (40rem) - Téléphones en mode paysage et plus : centrage */
@media (width >= 40rem) {
    .layout-page {
        max-width: 1000px;
        margin-inline: auto;
        padding-inline: 2rem;
    }
}

Vous pouvez aussi utiliser la syntaxe classique si vous préférez :

@media (min-width: 40rem) {
    .layout-page {
        max-width: 1000px;
        margin-inline: auto;
    }
}

Étape 3 – Stratégie d'intégration

Qu'est-ce qu'une stratégie d'intégration ?

La stratégie d'intégration est une étape de planification où l'on annote directement la maquette pour identifier la structure HTML avant d'écrire du code. Concrètement, on « dessine » sur la maquette (dans Figma, Photoshop, ou tout autre logiciel de votre choix) pour repérer :

  • Les rangées horizontales (conteneurs flex ou grid)
  • Les colonnes/blocs à l'intérieur de chaque rangée
  • Les éléments HTML sémantiques correspondants (header, nav, section, article, aside, footer, etc.)
  • Les noms de classes CSS à utiliser

Cette étape vous fait gagner du temps : en planifiant la structure avant de coder, vous évitez les allers-retours et les restructurations coûteuses.

La remise de l'exportation en PDF de votre stratégie d'intégration dans le dossier images/ vaut pour 1 point.

3.1 – Identifier les rangées et blocs

Référez-vous à la maquette écran large et aux exemples ci-dessous pour cette étape.

  1. Rangées : tracez des cadres horizontaux (ex. en rouge) autour de chaque rangée distincte de la maquette.
  2. Blocs : à l'intérieur de chaque rangée, tracez des cadres (ex. en bleu) autour des blocs/colonnes.
  3. Annotations : ajoutez le nom des balises HTML et des classes CSS directement sur la maquette.
  4. Export : exportez le tout en PDF dans le dossier images/ de votre projet.

Énoncé TP1 – Annexes (identification des rangées et blocs)

Pour les rangées avec plusieurs blocs (#1, #4, #5), prévoir un lien parent–enfants pour le conteneur flex et les items flex.

Rangée Élément HTML Classe Nombre de blocs Enfants
#1 nav nav--header 2 a + ul
#2 picture — 1 —
#3 ? introduction 1 —
#4 ? descriptions 3 section × 3
#5 ? encadres 2 section + aside
#6 nav nav--footer 1 —
#7 section credits 1 —
#8 p copyright 1 —

3.2 – Défi responsive

Le principal défi concerne la navigation dans le bandeau d'entête et dans le pied de page. Sur mobile, les éléments s'empilent verticalement ; sur desktop, ils s'alignent horizontalement. Flexbox avec flex-wrap ou un changement de flex-direction selon le breakpoint permet de gérer cette transition.

Énoncé TP1 – Stratégie d'intégration (rangées et blocs)

Étape 4 – Implémenter la stratégie d'intégration

Cette étape met en pratique votre planification. Procédez méthodiquement :

  1. Utiliser les guides visuels fournis à l'étape 2.
  2. Implémenter les flexbox des rangées 4 et 5 (voir annexe 2 pour la numérotation).
  3. Travailler la navigation du header et du footer après les avoir décommentées (sans s'occuper tout de suite du logo).
  4. Terminer avec les variantes du bandeau d'entête.

Testez régulièrement votre travail en redimensionnant la fenêtre du navigateur. Les outils de développement (F12) permettent de simuler différentes tailles d'écran.

Étape 5 – Mise en ligne via GitHub Pages

  1. Dans le dépôt tp1, ouvrir Settings puis l'onglet Pages.
  2. Choisir comme Source la branche main.
  3. Sauvegarder.

Énoncé TP1 – Remise via Github Pages)

L'URL attendue est du type : https://votre-utilisateur.github.io/tp1/

Le déploiement prend généralement quelques minutes. Actualisez la page si le site n'apparaît pas immédiatement.

Étape 6 – Compléter le README

Un bon README aide les autres (et vous-même dans quelques mois) à comprendre le projet :

  • Adapter le fichier README-template pour documenter votre réalisation.
  • Renommer ce fichier en README.md après avoir supprimé le README initial.
  • Inclure au minimum : une description du projet, les technologies utilisées et le lien vers le site déployé.

Grille de correction (sur 10)

Critère Points
Balisage sémantique et structurel 2
Stratégie d'intégration complétée 1
Styles CSS (base) – charte typo responsive, rangées 3-4-5-7-8 2
Styles CSS (header/footer) – rangées 1-2-6 2
Versionnage (commits réguliers avec messages clairs) 1
Complétion du README selon README-template 1
Mise en ligne sur GitHub Pages 1

(Référence des rangées : annexe 2 de l'énoncé.)

Modalités de remise

  • Versionnage : Vous remettez via des commits et en faisant un push sur votre dépôt GitHub (VSCode ou GitHub Desktop).
  • Mise en ligne sur GitHub Pages : URL du type https://votre-utilisateur.github.io/tp1/.
  • Date limite : Avant votre cours du 9 février.