Suppression des durées estimées dans les TPs
This commit is contained in:
@@ -6,10 +6,10 @@ Ce dossier contient les travaux pratiques pour apprendre HTML et CSS.
|
|||||||
|
|
||||||
## Liste des TPs
|
## Liste des TPs
|
||||||
|
|
||||||
| TP | Fichier | Thème | Durée | Prérequis |
|
| TP | Fichier | Thème | Prérequis |
|
||||||
|----|---------|-------|-------|-----------|
|
|----|---------|-------|-----------|
|
||||||
| TP 1 | [TP_HTML.md](TP_HTML.md) | Introduction au HTML5 | 2h | Aucun |
|
| 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 | 3h | TP 1 |
|
| TP 2 | [TP_CSS.md](TP_CSS.md) | CSS et mise en page | TP 1 |
|
||||||
|
|
||||||
---------
|
---------
|
||||||
|
|
||||||
|
|||||||
@@ -11,13 +11,11 @@
|
|||||||
- Utiliser les balises sémantiques HTML5 pour structurer une page
|
- Utiliser les balises sémantiques HTML5 pour structurer une page
|
||||||
- Créer une mise en page complète avec CSS
|
- Créer une mise en page complète avec CSS
|
||||||
|
|
||||||
**Durée estimée** : 3h
|
|
||||||
|
|
||||||
**Prérequis** : TP HTML terminé
|
**Prérequis** : TP HTML terminé
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Partie A : Introduction au CSS (20 min)
|
## Partie A : Introduction au CSS
|
||||||
|
|
||||||
### A.1 Le rôle du CSS
|
### A.1 Le rôle du CSS
|
||||||
|
|
||||||
@@ -66,7 +64,7 @@ p {
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Partie B : Les sélecteurs CSS (30 min)
|
## Partie B : Les sélecteurs CSS
|
||||||
|
|
||||||
### B.1 Sélecteurs de base
|
### B.1 Sélecteurs de base
|
||||||
|
|
||||||
@@ -98,7 +96,7 @@ Objectif : atteindre au moins le niveau 15.
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Partie C : Propriétés CSS essentielles (20 min)
|
## Partie C : Propriétés CSS essentielles
|
||||||
|
|
||||||
### C.1 Texte
|
### C.1 Texte
|
||||||
|
|
||||||
@@ -170,7 +168,7 @@ div {
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Partie D : Les balises sémantiques HTML5 (15 min)
|
## Partie D : Les balises sémantiques HTML5
|
||||||
|
|
||||||
### D.1 Structure d'une page moderne
|
### D.1 Structure d'une page moderne
|
||||||
|
|
||||||
@@ -209,7 +207,7 @@ div {
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Partie E : Mise en page avec Flexbox (30 min)
|
## Partie E : Mise en page avec Flexbox
|
||||||
|
|
||||||
### E.1 Introduction à Flexbox
|
### E.1 Introduction à Flexbox
|
||||||
|
|
||||||
@@ -264,7 +262,7 @@ Objectif : terminer tous les niveaux !
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Partie F : Projet - Site "Pastor" (1h30)
|
## Partie F : Projet - Site "Pastor"
|
||||||
|
|
||||||
Vous allez créer un site de blog culinaire avec une mise en page complète.
|
Vous allez créer un site de blog culinaire avec une mise en page complète.
|
||||||
|
|
||||||
|
|||||||
@@ -11,13 +11,11 @@
|
|||||||
- Maîtriser les balises HTML essentielles
|
- Maîtriser les balises HTML essentielles
|
||||||
- Créer une page web complète
|
- Créer une page web complète
|
||||||
|
|
||||||
**Durée estimée** : 2h
|
|
||||||
|
|
||||||
**Matériel** : PC + Navigateur (Firefox, Chrome) + Éditeur de code (VS Code, Notepad++)
|
**Matériel** : PC + Navigateur (Firefox, Chrome) + Éditeur de code (VS Code, Notepad++)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Partie A : Comment fonctionne le Web ? (20 min)
|
## Partie A : Comment fonctionne le Web ?
|
||||||
|
|
||||||
### A.1 L'architecture client-serveur
|
### A.1 L'architecture client-serveur
|
||||||
|
|
||||||
@@ -59,7 +57,7 @@ protocole serveur chemin
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Partie B : Structure d'une page HTML5 (30 min)
|
## Partie B : Structure d'une page HTML5
|
||||||
|
|
||||||
### B.1 Les balises
|
### B.1 Les balises
|
||||||
|
|
||||||
@@ -121,7 +119,7 @@ Créez un fichier `page.html` avec le code suivant :
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Partie C : Organiser le contenu (40 min)
|
## Partie C : Organiser le contenu
|
||||||
|
|
||||||
### C.1 Les paragraphes
|
### C.1 Les paragraphes
|
||||||
|
|
||||||
@@ -186,7 +184,7 @@ HTML propose 6 niveaux de titres, de `<h1>` (le plus important) à `<h6>` :
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Partie D : Les liens (20 min)
|
## Partie D : Les liens
|
||||||
|
|
||||||
### D.1 Lien vers un autre site (lien absolu)
|
### D.1 Lien vers un autre site (lien absolu)
|
||||||
|
|
||||||
@@ -227,7 +225,7 @@ Pour créer un sommaire cliquable sur une longue page :
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Partie E : Les images (15 min)
|
## Partie E : Les images
|
||||||
|
|
||||||
### E.1 Insérer une image
|
### E.1 Insérer une image
|
||||||
|
|
||||||
@@ -264,7 +262,7 @@ Pour créer un sommaire cliquable sur une longue page :
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Partie F : Les tableaux (25 min)
|
## Partie F : Les tableaux
|
||||||
|
|
||||||
### F.1 Structure de base
|
### F.1 Structure de base
|
||||||
|
|
||||||
@@ -328,7 +326,7 @@ Pour créer un sommaire cliquable sur une longue page :
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Partie G : Balises sémantiques HTML5 (10 min)
|
## Partie G : Balises sémantiques HTML5
|
||||||
|
|
||||||
HTML5 introduit des balises pour structurer une page de manière sémantique :
|
HTML5 introduit des balises pour structurer une page de manière sémantique :
|
||||||
|
|
||||||
@@ -357,7 +355,7 @@ HTML5 introduit des balises pour structurer une page de manière sémantique :
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Projet final : Créer une page web thématique (30 min)
|
## Projet final : Créer une page web thématique
|
||||||
|
|
||||||
### Consignes
|
### Consignes
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user