TP3 : Mise en pratique du CSS et des attributs globaux

Cours HTML/CSS 2026 – Durée : 3h30 – Enseignant : Quentin Fait

Objectifs du TP

  • Utiliser les attributs globaux HTML (id, class, data-*, lang, title)

  • Appliquer des sélecteurs CSS avancés (descendant, combinaisons)

  • Créer une mise en page complète avec HTML et CSS

  • Découvrir les possibilités créatives du CSS

Consignes générales

Configuration : Créez un dossier tp3-html-css sur votre ordinateur et ouvrez-le dans votre éditeur de code.

Organisation : Pour chaque exercice, créez les fichiers demandés.

Structure de base : Chaque page HTML doit inclure :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    
</body>
</html>

Exercice 1 : Carte de profil avec attributs globaux

Fichiers : profil.html, profil.css, et photo.jpg (votre photo)

Créez une carte de profil personnelle en utilisant les attributs globaux et le CSS.

Partie 1 : Structure HTML (profil.html)

1. Conteneur principal

  • Créez une balise <main> avec :

    • Un attribut id de valeur "profile-card"

    • Un attribut class de valeur "card"

    • Un attribut data-user-id avec votre numéro d’étudiant

2. Photo de profil

  • Placez une photo de vous (nommée photo.jpg) dans le même dossier que profil.html

  • Insérez cette image avec un chemin relatif : src="photo.jpg"

  • Ajoutez un attribut alt descriptif

  • Ajoutez un attribut title avec votre nom complet

  • Ajoutez un attribut class de valeur "profile-image"

3. Informations personnelles

  • Créez une balise <section> avec class="profile-info" contenant :

    • Votre nom et prénom en <h2>

    • Votre formation en <p> avec class="subtitle"

    • Une courte bio de 2-3 lignes en <p> avec class="bio"

4. Compétences

  • Créez une balise <section> avec class="skills" contenant :

    • Un titre <h3>Compétences</h3>

    • Une liste non ordonnée avec au moins 5 compétences

    • Sur chaque élément de liste, ajoutez class="skill-item"

    • Sur vos 3 meilleures compétences, ajoutez une deuxième classe : class="skill-item advanced"

5. Citation favorite

  • Créez un <blockquote> contenant votre citation préférée

  • Si elle est en anglais, ajoutez lang="en" sur le blockquote

Partie 2 : Styles CSS (profil.css)

Étape 1 : Reset et styles de base

Créez une règle pour tous les éléments (*) qui :

  • Supprime les marges extérieures : margin: 0;

  • Supprime les marges intérieures : padding: 0;

  • Applique box-sizing: border-box; (cette propriété fait en sorte que la largeur et hauteur incluent les bordures et espacements)

Créez une règle pour l’élément body qui applique :

  • La police Arial, sans-serif

  • Une couleur de fond #f0f0f0

  • Un espacement intérieur de 50px en haut/bas et 20px à gauche/droite

Étape 2 : Carte de profil principale

Ciblez l’élément ayant l”id profile-card et appliquez :

  • Une largeur maximale de 400px

  • Un centrage automatique : margin: 0 auto; (les marges latérales auto centrent l’élément)

  • Une couleur de fond blanche

  • Des coins arrondis de 10px : border-radius: 10px; (arrondit les angles)

  • Un espacement intérieur de 30px

  • Une ombre portée : box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); (crée une ombre légère autour de l’élément)

Étape 3 : Image de profil

Ciblez les éléments ayant la classe profile-image et appliquez :

  • Une largeur et hauteur de 150px

  • Des coins arrondis à 50% (transforme le carré en cercle)

  • Un affichage en bloc : display: block;

  • Un centrage automatique avec une marge basse de 20px : margin: 0 auto 20px;

  • Une bordure de 4px, solide, de couleur #3498db

Étape 4 : Informations personnelles

Utilisez un sélecteur descendant pour cibler tous les <h2> qui se trouvent dans un élément avec la classe profile-info et appliquez :

  • Un alignement de texte centré

  • Une couleur de texte #2c3e50

  • Une marge basse de 5px

Utilisez un sélecteur descendant avec classe pour cibler les éléments ayant la classe subtitle qui se trouvent dans profile-info et appliquez :

  • Un alignement centré

  • Une couleur #7f8c8d

  • Une taille de police de 14px

  • Une marge basse de 15px

Ciblez les éléments avec la classe bio dans profile-info et appliquez :

  • Un alignement centré

  • Un interligne de 1.6

  • Une couleur #34495e

Étape 5 : Section compétences

Ciblez la classe skills et appliquez :

  • Une marge supérieure de 25px

Ciblez les <h3> dans la classe skills et appliquez :

  • Une couleur #2c3e50

  • Une marge basse de 15px

  • Une taille de police de 18px

Ciblez les <ul> dans la classe skills et supprimez les puces de liste : list-style: none;

Ciblez la classe skill-item et appliquez :

  • Un espacement intérieur de 8px en haut/bas et 12px à gauche/droite

  • Une marge basse de 8px

  • Une couleur de fond #ecf0f1

  • Une bordure gauche de 3px, solide, couleur #95a5a6

  • Des coins arrondis de 3px

Pour cibler les compétences avancées (éléments ayant les deux classes skill-item ET advanced), appliquez :

  • Une couleur de fond #d4edda

  • Une couleur de bordure gauche #28a745

  • Une graisse de police en gras

Étape 6 : Citation

Ciblez l’élément <blockquote> et appliquez :

  • Une marge supérieure de 25px

  • Un espacement intérieur de 15px

  • Une couleur de fond #f8f9fa

  • Une bordure gauche de 4px, solide, couleur #3498db

  • Un style de police italique

  • Une couleur de texte #555

Rendu attendu

Votre carte devrait ressembler à un profil moderne et épuré, avec :

  • Une photo ronde centrée

  • Des informations bien organisées

  • Des compétences mises en valeur (dont 3 plus visibles)

N’hésitez pas à personnaliser les couleurs !

Exercice 2 : Page portfolio créative

Fichiers : portfolio.html, portfolio.css, et 3 images de projets

Créez une page portfolio présentant 3 projets. Cet exercice vous montre ce qu’il est possible de réaliser avec HTML et CSS !

Préparation des images

  • Trouvez ou créez 3 images pour illustrer vos projets

  • Nommez-les projet1.jpg, projet2.jpg, et projet3.jpg

  • Placez-les dans le même dossier que portfolio.html

Partie 1 : Structure HTML (portfolio.html)

1. En-tête de la page

Créez un <header> avec class="portfolio-header" contenant :

  • Un <h1> avec votre prénom et nom

  • Un paragraphe avec class="tagline" contenant « Développeur Web Junior »

2. Section « Projets »

Créez une <section> avec id="projects" contenant :

  • Un <h2> avec « Mes Projets »

  • Une <div class="projects-grid"> qui contiendra vos 3 projets

Pour chaque projet, créez un <article> avec :

  • Un attribut class de valeur "project-card"

  • Un attribut data-tech avec une valeur différente pour chaque projet : "html-css", "javascript", ou "design"

Chaque article doit contenir :

  • Une <div class="project-image"> avec une image : <img src="projet1.jpg" alt="Description du projet">

  • Une <div class="project-content"> contenant :

    • Un <h3> avec le titre du projet

    • Un <p> avec une description de 2-3 lignes

3. Pied de page

Créez un <footer> avec id="contact" contenant :

  • Un <p> avec votre email dans un lien <a href="mailto:votre.email@exemple.com">votre.email@exemple.com</a>

Partie 2 : Styles CSS (portfolio.css)

Étape 1 : Reset et styles de base

Appliquez sur tous les éléments :

  • Suppression des marges et espacements par défaut : margin: 0; padding: 0;

  • box-sizing: border-box;

Appliquez sur l’élément body :

  • La police 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif

  • Une couleur de texte #2d3748

  • Un interligne de 1.6

Étape 2 : En-tête avec dégradé

Ciblez la classe portfolio-header et appliquez :

  • Un arrière-plan avec dégradé : background: linear-gradient(135deg, #667eea, #764ba2); (crée un dégradé du bleu au violet)

  • Une couleur de texte blanche

  • Un espacement intérieur de 80px en haut/bas et 20px à gauche/droite

  • Un alignement de texte centré

Ciblez les <h1> dans portfolio-header et appliquez :

  • Une taille de police de 48px

  • Une marge basse de 10px

Ciblez la classe tagline et appliquez :

  • Une taille de police de 20px

  • Une opacité de 0.9 : opacity: 0.9; (rend le texte légèrement transparent)

Étape 3 : Section « Projets »

Ciblez l’élément avec l’id projects et appliquez :

  • Une couleur de fond #f7fafc

  • Un espacement intérieur de 60px en haut/bas et 20px à gauche/droite

Ciblez les <h2> dans #projects et appliquez :

  • Un alignement centré

  • Une taille de police de 36px

  • Une marge basse de 50px

  • Une couleur #2c3e50

Étape 4 : Grille de projets

Ciblez la classe projects-grid et créez une grille CSS avec :

  • display: grid; (active le système de grille CSS)

  • Colonnes qui s’adaptent automatiquement : grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); (crée autant de colonnes que possible, chacune d’au moins 300px)

  • Un espacement entre les éléments de 30px : gap: 30px; (espace entre les cartes)

  • Une largeur maximale de 1200px

  • Un centrage automatique : margin: 0 auto;

Étape 5 : Cartes de projet

Ciblez la classe project-card et appliquez :

  • Une couleur de fond blanche

  • Des coins arrondis de 10px

  • overflow: hidden; (cache tout contenu qui dépasse, notamment pour que l’image respecte les coins arrondis)

  • Une ombre portée : box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  • Une transition de 0.3s sur les propriétés transform et box-shadow : transition: transform 0.3s, box-shadow 0.3s; (rend les animations fluides)

Utilisez la pseudo-classe :hover sur project-card pour appliquer au survol :

  • Une translation verticale de -5px : transform: translateY(-5px); (fait « monter » la carte)

  • Une ombre plus prononcée : box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);

Ciblez les images dans project-image et appliquez :

  • Une largeur de 100%

  • Une hauteur de 200px

  • object-fit: cover; (garde les proportions de l’image en remplissant tout l’espace)

Ciblez la classe project-content et appliquez :

  • Un espacement intérieur de 25px

Ciblez les <h3> dans project-content et appliquez :

  • Une marge basse de 10px

  • Une couleur #2d3748

Ciblez les paragraphes dans project-content et appliquez :

  • Une couleur #718096

Étape 6 : Bordures colorées selon la technologie

Utilisez des sélecteurs d’attribut pour ajouter une bordure supérieure colorée sur chaque carte :

  • Pour les éléments ayant data-tech="html-css" : bordure supérieure de 4px, solide, couleur #e44d26

  • Pour data-tech="javascript" : bordure couleur #f7df1e

  • Pour data-tech="design" : bordure couleur #ff6b6b

Étape 7 : Pied de page

Ciblez l’élément avec l’id contact et appliquez :

  • Le même dégradé que l’en-tête : background: linear-gradient(135deg, #667eea, #764ba2);

  • Une couleur de texte blanche

  • Un alignement de texte centré

  • Un espacement intérieur de 40px

Ciblez les liens (<a>) dans #contact et appliquez :

  • Une couleur blanche

  • Pas de soulignement : text-decoration: none;

  • Une bordure basse de 2px, solide, blanche

Utilisez :hover sur ces liens pour appliquer au survol :

  • Une opacité de 0.8

Livrables attendus

Un dossier tp3-html-css contenant :

  • Exercice 1 : profil.html, profil.css, et photo.jpg

  • Exercice 2 : portfolio.html, portfolio.css, projet1.jpg, projet2.jpg, et projet3.jpg

Pensez à valider votre code avec le validateur W3C : https://validator.w3.org/

Critères d’évaluation

  • Attributs globaux : utilisation correcte de id, class, data-*, lang, title

  • Sélecteurs CSS : application des sélecteurs par type, classe, id, descendant, pseudo-classes

  • Sélecteurs d’attribut : utilisation pour cibler selon data-tech

  • Balises sémantiques : utilisation appropriée de <main>, <section>, <article>, <header>

  • Validation W3C : code HTML et CSS valide

  • Respect des consignes : tous les éléments demandés sont présents