Créer un site complet - Composants

Objectifs

HTML / CSS

• Produire un site structuré, navigable, lisible et cohérent.
• Utiliser une structure sémantique simple (titres, paragraphes, listes, tableaux, sections).
• Mettre en forme avec CSS (typographie, couleurs, marges, alignements, blocs).

Contenu “composant”

• Expliquer le rôle du composant et son fonctionnement (vulgarisé, mais sérieux).
• Présenter les notions techniques clés (définitions + à quoi ça sert).
• Relier à des usages concrets (bureautique, gaming, création, serveur, etc.).
• Donner une vue assez exhaustive du marché : constructeurs majeurs + gammes.
• Comparer au moins 3 modèles (tableau + analyse).

Contraintes techniques

• Technologies : HTML + CSS uniquement
• Ressources autorisées : images, icônes (simples), polices web (ex. Google Fonts) si tu sais le faire proprement.
• Site multi-pages : minimum 4 à 5 pages
• Pas de responsive obligatoire, pas de Flexbox obligatoire (tu peux rester en mise en page simple).

Livrables attendus

• Un dossier du site contenant :

  • index.html
  • au moins 3–4 autres pages .html
  • style.css
  • un dossier img/ si tu utilises des images

• Un menu de navigation identique sur toutes les pages.

Structure minimale (recommandée)

• index.html : Accueil / résumé du composant
• fonctionnement.html : Comment ça marche (global → spécifique)
• criteres.html : Critères techniques + comment choisir
• marché.html : Constructeurs, gammes, modèles connus
• comparatif.html : Comparaison de 3 modèles (minimum)

Tu peux ajouter une page (ou plusieurs) si ton composant s’y prête :

• installation.html (montage, compatibilité, erreurs fréquentes)
• glossaire.html (définitions)
• sources.html (bibliographie / liens)

Contenu minimum par page

Accueil (index)

• Définition courte : “c’est quoi ?”
• À quoi ça sert ? (3–5 usages)
• Où il se situe dans l’ordinateur (schéma simple ou description)
• Plan du site (mini sommaire)
• Image illustrative + légende

Fonctionnement

• Explication en 2 niveaux :

  • Niveau 1 : analogie / vulgarisation (un paragraphe)
  • Niveau 2 : explication technique simple (2–4 sous-parties)

• Interaction avec d’autres composants (ex. “dépend de…”, “impacte…”)

• Une section “Ce qu’on croit souvent” (2 idées reçues + correction)

Critères techniques

• Liste structurée de 6 à 10 critères (selon composant)

• Pour chaque critère :

  • définition simple
  • unité/valeur typique
  • impact réel sur performances/usage

• Une section “Profils d’achat” :

  • “Usage bureautique”
  • “Gaming”
  • “Création”
  • “Budget serré” (et tu expliques comment le critère pèse selon le profil)

Marché

• Les acteurs principaux (constructeurs) + rôle de chacun
• Gammes / familles de produits (entrée de gamme, milieu, haut de gamme)
• Exemples de modèles connus (sans faire catalogue, mais représentatif)
• Une mini-frise “évolution” ou “tendances récentes” (2–4 points)

Comparatif

• Sélection de 3 modèles (idéalement : budget / milieu / haut de gamme)

• Un tableau comparatif avec des critères pertinents

• Une analyse rédigée :

  • forces/faiblesses de chaque modèle
  • pour quel type d’utilisateur
  • “si je devais choisir, je prends X pour tel besoin”

Évaluation (70% HTML/CSS, 30% contenu)

HTML/CSS (70%)

• Structure & sémantique (titres, sections, propreté du code) : 20%
• Navigation & cohérence multi-pages : 15%
• Lisibilité & mise en forme CSS (typographie, marges, hiérarchie visuelle) : 20%
• Qualité globale (finitions, tableau, images légendées, cohérence) : 15%

Contenu composant (30%)

• Compréhension + explication du fonctionnement : 10%
• Notions techniques clés bien expliquées : 10%
• Marché + comparaison de 3 modèles (pertinence + analyse) : 10%

Méthode de travail conseillée (simple)

• Étape 1 : plan du site + menu
• Étape 2 : contenu brut (texte) sur chaque page
• Étape 3 : CSS de base (lisibilité)
• Étape 4 : tableau comparatif + amélioration visuelle
• Étape 5 : relecture, cohérence, fautes, sources