92 lines
2.2 KiB
Markdown
92 lines
2.2 KiB
Markdown
# 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)
|
|
- **[Grid Garden](https://cssgridgarden.com/#fr)** : apprendre Grid CSS
|
|
- **[Flexbox Defense](http://www.flexboxdefense.com)** 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](../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
|