Travaux Pratiques - Web

Ce dossier contient les travaux pratiques pour apprendre HTML et CSS.

Liste des TPs

TP	Fichier	Thème	Prérequis
TP 1	TP_HTML.md	Introduction au HTML5	Aucun
TP 2	TP_CSS.md	CSS et mise en page	TP 1

Progression recommandée

TP 1 : HTML5
  - Architecture client-serveur
  - Structure d'une page HTML
  - Balises essentielles (texte, listes, liens, images, tableaux)
  - Balises sémantiques
  - Projet : page web thématique
    ↓
TP 2 : CSS
  - Syntaxe CSS et sélecteurs
  - Propriétés (texte, couleurs, box model)
  - Balises sémantiques HTML5
  - Flexbox
  - Projet : site "Pastor"

Exercices interactifs recommandés

CSS Diner : Maîtriser les sélecteurs CSS (à faire pendant le TP 2)
Flexbox Froggy : Apprendre Flexbox (à faire pendant le TP 2)
Grid Garden : apprendre Grid CSS
Flexbox Defense Le tower defense CSS !

Ressources pour les TPs

Dossier images

Le dossier images/ contient les fichiers nécessaires pour certains TPs : - Photos d'exemple - Icônes - Éléments graphiques

Le fichier images.zip contient une archive de toutes les images.

Aide-mémoires

Consultez le dossier ressources pour les mémentos HTML et CSS.

Conseils pour réussir les TPs

Lisez l'énoncé en entier avant de commencer
Testez régulièrement votre code dans le navigateur
Utilisez les outils de développement (F12) pour débugger
Consultez les mémentos en cas de doute sur une balise ou propriété
Indentez votre code pour une meilleure lisibilité
Validez votre HTML sur validator.w3.org

Structure d'un projet web

Pour vos TPs, organisez vos fichiers ainsi :

mon_projet/
├── index.html
├── style.css
├── images/
│   ├── logo.png
│   └── photo.jpg
└── pages/
    ├── contact.html
    └── about.html

Auteur : Florian Mathieu

Licence CC BY NC