# 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](TP_HTML.md) | Introduction au HTML5 | Aucun |
| TP 2 | [TP_CSS.md](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](https://flukeout.github.io)** : Maîtriser les sélecteurs CSS (à faire pendant le TP 2)
- **[Flexbox Froggy](https://flexboxfroggy.com)** : Apprendre Flexbox (à faire pendant le TP 2)

---------

## 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](../ressources/) pour les mémentos HTML et CSS.

---------

## Conseils pour réussir les TPs

1. **Lisez l'énoncé en entier** avant de commencer
2. **Testez régulièrement** votre code dans le navigateur
3. **Utilisez les outils de développement** (F12) pour débugger
4. **Consultez les mémentos** en cas de doute sur une balise ou propriété
5. **Indentez votre code** pour une meilleure lisibilité
6. **Validez votre HTML** sur [validator.w3.org](https://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