ajout fiche aide tp
This commit is contained in:
362
web/tp/fiche_exercices_html.md
Normal file
362
web/tp/fiche_exercices_html.md
Normal file
@@ -0,0 +1,362 @@
|
||||
# Fiche d'exercices - TP HTML5
|
||||
|
||||
## Consignes generales
|
||||
|
||||
- Travaillez dans un dossier `mon_site` sur votre espace personnel
|
||||
- Utilisez Notepad++ (ou VS Code) pour editer vos fichiers
|
||||
- Testez regulierement dans votre navigateur (double-clic sur le fichier .html)
|
||||
- Encodage : UTF-8 (Menu Encodage > Encoder en UTF-8)
|
||||
- Appelez le professeur si vous etes bloque plus de 5 minutes
|
||||
|
||||
---
|
||||
|
||||
## Seance 1 : Structure de base et texte
|
||||
|
||||
**Objectif :** Creer sa premiere page web avec du texte structure
|
||||
|
||||
### Exercice 1.1 - Ma premiere page
|
||||
|
||||
1. Creez un dossier `mon_site` dans votre espace personnel
|
||||
2. Creez un fichier `index.html` dans ce dossier
|
||||
3. Ecrivez la structure de base d'une page HTML5 :
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Ma page</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
4. Ouvrez le fichier dans votre navigateur
|
||||
|
||||
**Checkpoint 1.1 :** L'onglet du navigateur affiche "Ma page"
|
||||
|
||||
---
|
||||
|
||||
### Exercice 1.2 - Titre et paragraphes
|
||||
|
||||
Dans le `<body>`, ajoutez :
|
||||
|
||||
1. Un titre principal `<h1>` avec votre prenom
|
||||
2. Un paragraphe `<p>` de presentation (2-3 phrases)
|
||||
3. Un sous-titre `<h2>` "Mes passions"
|
||||
4. Un paragraphe decrivant une de vos passions
|
||||
5. Utilisez `<br />` pour faire un retour a la ligne dans un paragraphe
|
||||
|
||||
**Checkpoint 1.2 :** Votre page affiche un gros titre, un titre moyen, et deux paragraphes
|
||||
|
||||
---
|
||||
|
||||
### Exercice 1.3 - Mise en valeur
|
||||
|
||||
1. Mettez un mot en italique avec `<em>...</em>`
|
||||
2. Mettez un mot en gras avec `<strong>...</strong>`
|
||||
3. Surlignez un mot avec `<mark>...</mark>`
|
||||
|
||||
**Checkpoint 1.3 :** Trois mots sont mis en evidence differemment
|
||||
|
||||
---
|
||||
|
||||
### Exercice 1.4 - Les listes
|
||||
|
||||
Ajoutez sous vos paragraphes :
|
||||
|
||||
1. Un titre `<h2>` "Mes 3 films preferes"
|
||||
2. Une liste ordonnee `<ol>` avec 3 films (utilisez `<li>` pour chaque film)
|
||||
3. Un titre `<h2>` "Ce que j'aime manger"
|
||||
4. Une liste a puces `<ul>` avec 4 aliments
|
||||
|
||||
**Checkpoint 1.4 :** Vous avez une liste numerotee (1, 2, 3) et une liste a puces
|
||||
|
||||
---
|
||||
|
||||
## Seance 2 : Les liens
|
||||
|
||||
**Objectif :** Creer plusieurs pages et les relier entre elles
|
||||
|
||||
### Exercice 2.1 - Lien vers un site externe
|
||||
|
||||
1. Ajoutez un paragraphe : "Visitez mon site prefere :"
|
||||
2. Creez un lien vers un site de votre choix :
|
||||
|
||||
```html
|
||||
<a href="https://www.exemple.com">Texte du lien</a>
|
||||
```
|
||||
|
||||
3. Testez en cliquant sur le lien
|
||||
|
||||
**Checkpoint 2.1 :** Le clic ouvre le site externe
|
||||
|
||||
---
|
||||
|
||||
### Exercice 2.2 - Deuxieme page
|
||||
|
||||
1. Creez un fichier `hobbies.html` dans le meme dossier
|
||||
2. Copiez la structure de base HTML5
|
||||
3. Changez le titre en "Mes hobbies"
|
||||
4. Ajoutez un `<h1>` et un paragraphe de contenu
|
||||
|
||||
**Checkpoint 2.2 :** Vous avez 2 fichiers .html dans votre dossier
|
||||
|
||||
---
|
||||
|
||||
### Exercice 2.3 - Liens entre pages
|
||||
|
||||
1. Dans `index.html`, ajoutez un lien vers `hobbies.html` :
|
||||
|
||||
```html
|
||||
<a href="hobbies.html">Voir mes hobbies</a>
|
||||
```
|
||||
|
||||
2. Dans `hobbies.html`, ajoutez un lien pour revenir a `index.html` :
|
||||
|
||||
```html
|
||||
<a href="index.html">Retour a l'accueil</a>
|
||||
```
|
||||
|
||||
3. Testez la navigation entre les deux pages
|
||||
|
||||
**Checkpoint 2.3 :** Vous pouvez naviguer de index vers hobbies et revenir
|
||||
|
||||
---
|
||||
|
||||
### Exercice 2.4 - Les ancres
|
||||
|
||||
1. Dans `index.html`, ajoutez beaucoup de contenu (copiez-collez des paragraphes)
|
||||
2. Ajoutez un `id` a l'un de vos titres : `<h2 id="films">Mes films</h2>`
|
||||
3. En haut de page, creez un lien vers cette ancre :
|
||||
|
||||
```html
|
||||
<a href="#films">Aller a mes films</a>
|
||||
```
|
||||
|
||||
4. Testez : le clic doit faire defiler la page
|
||||
|
||||
**Checkpoint 2.4 :** Le clic sur le lien fait defiler jusqu'au titre "Mes films"
|
||||
|
||||
---
|
||||
|
||||
## Seance 3 : Les images
|
||||
|
||||
**Objectif :** Inserer et organiser des images
|
||||
|
||||
### Exercice 3.1 - Preparation
|
||||
|
||||
1. Creez un sous-dossier `images` dans `mon_site`
|
||||
2. Telechargez ou copiez 2-3 images (format .jpg ou .png)
|
||||
3. Renommez-les sans espaces ni accents (ex: `photo1.jpg`)
|
||||
|
||||
**Checkpoint 3.1 :** Vous avez un dossier `images` avec des fichiers dedans
|
||||
|
||||
---
|
||||
|
||||
### Exercice 3.2 - Inserer une image
|
||||
|
||||
Dans `index.html`, ajoutez une image :
|
||||
|
||||
```html
|
||||
<p>
|
||||
Voici ma photo :
|
||||
<img src="images/photo1.jpg" alt="Description de l'image" />
|
||||
</p>
|
||||
```
|
||||
|
||||
**Important :**
|
||||
- `src` = chemin vers l'image
|
||||
- `alt` = description textuelle (obligatoire)
|
||||
|
||||
**Checkpoint 3.2 :** L'image s'affiche sur votre page
|
||||
|
||||
---
|
||||
|
||||
### Exercice 3.3 - Image cliquable
|
||||
|
||||
Transformez votre image en lien vers votre page hobbies :
|
||||
|
||||
```html
|
||||
<a href="hobbies.html">
|
||||
<img src="images/photo1.jpg" alt="Description" />
|
||||
</a>
|
||||
```
|
||||
|
||||
**Checkpoint 3.3 :** Cliquer sur l'image amene vers hobbies.html
|
||||
|
||||
---
|
||||
|
||||
## Seance 4 : Les tableaux
|
||||
|
||||
**Objectif :** Creer et structurer un tableau
|
||||
|
||||
### Exercice 4.1 - Tableau simple
|
||||
|
||||
Creez un fichier `planning.html` et ajoutez un tableau de votre emploi du temps :
|
||||
|
||||
```html
|
||||
<table>
|
||||
<tr>
|
||||
<th>Jour</th>
|
||||
<th>8h-9h</th>
|
||||
<th>9h-10h</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lundi</td>
|
||||
<td>Maths</td>
|
||||
<td>NSI</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mardi</td>
|
||||
<td>Francais</td>
|
||||
<td>Anglais</td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
**Checkpoint 4.1 :** Le tableau s'affiche (sans bordures pour l'instant)
|
||||
|
||||
---
|
||||
|
||||
### Exercice 4.2 - Ajouter des bordures (CSS)
|
||||
|
||||
Dans le `<head>`, ajoutez :
|
||||
|
||||
```html
|
||||
<style>
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
td, th {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
**Checkpoint 4.2 :** Le tableau a des bordures visibles
|
||||
|
||||
---
|
||||
|
||||
### Exercice 4.3 - Titre et structure
|
||||
|
||||
1. Ajoutez un titre au tableau avec `<caption>Mon emploi du temps</caption>` (juste apres `<table>`)
|
||||
2. Ajoutez au moins 3 lignes supplementaires
|
||||
|
||||
**Checkpoint 4.3 :** Le tableau a un titre au-dessus et au moins 5 lignes
|
||||
|
||||
---
|
||||
|
||||
## Seance 5 : Structure avancee
|
||||
|
||||
**Objectif :** Organiser sa page avec les balises semantiques HTML5
|
||||
|
||||
### Exercice 5.1 - Structure semantique
|
||||
|
||||
Reorganisez votre `index.html` avec les balises suivantes :
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Mon site</h1>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="hobbies.html">Hobbies</a></li>
|
||||
<li><a href="planning.html">Planning</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section>
|
||||
<h2>Bienvenue</h2>
|
||||
<p>Contenu principal...</p>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<p>Site cree par [Votre nom] - 2026</p>
|
||||
</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
**Checkpoint 5.1 :** Votre page a un en-tete, un menu, une section et un pied de page
|
||||
|
||||
---
|
||||
|
||||
### Exercice 5.2 - Menu de navigation
|
||||
|
||||
1. Ajoutez le meme bloc `<nav>` sur toutes vos pages
|
||||
2. Verifiez que tous les liens fonctionnent
|
||||
|
||||
**Checkpoint 5.2 :** On peut naviguer entre toutes les pages depuis n'importe quelle page
|
||||
|
||||
---
|
||||
|
||||
## Projet final
|
||||
|
||||
**Objectif :** Creer un mini-site personnel complet
|
||||
|
||||
### Cahier des charges
|
||||
|
||||
Votre site doit contenir **au minimum** :
|
||||
|
||||
- [ ] 3 pages HTML liees entre elles
|
||||
- [ ] Un menu de navigation present sur chaque page
|
||||
- [ ] Au moins 2 images
|
||||
- [ ] Au moins 1 tableau
|
||||
- [ ] Au moins 1 liste (ordonnee ou non)
|
||||
- [ ] Des titres de differents niveaux (h1, h2, h3)
|
||||
- [ ] Une structure semantique (header, nav, section, footer)
|
||||
- [ ] Un lien vers un site externe
|
||||
- [ ] Un lien avec ancre (vers une partie de la meme page)
|
||||
|
||||
### Bareme
|
||||
|
||||
| Critere | Points |
|
||||
|---------|--------|
|
||||
| Structure HTML valide | /4 |
|
||||
| Navigation fonctionnelle | /3 |
|
||||
| Images correctement inserees | /2 |
|
||||
| Tableau structure | /2 |
|
||||
| Listes | /2 |
|
||||
| Structure semantique HTML5 | /3 |
|
||||
| Originalite et contenu | /4 |
|
||||
| **Total** | **/20** |
|
||||
|
||||
---
|
||||
|
||||
## Aide-memoire
|
||||
|
||||
### Balises principales
|
||||
|
||||
| Balise | Role |
|
||||
|--------|------|
|
||||
| `<h1>` a `<h6>` | Titres (h1 = plus important) |
|
||||
| `<p>` | Paragraphe |
|
||||
| `<br />` | Retour a la ligne |
|
||||
| `<strong>` | Texte important (gras) |
|
||||
| `<em>` | Texte en emphase (italique) |
|
||||
| `<ul>` | Liste a puces |
|
||||
| `<ol>` | Liste numerotee |
|
||||
| `<li>` | Element de liste |
|
||||
| `<a href="...">` | Lien |
|
||||
| `<img src="..." alt="..." />` | Image |
|
||||
| `<table>`, `<tr>`, `<td>`, `<th>` | Tableau |
|
||||
| `<header>` | En-tete |
|
||||
| `<nav>` | Navigation |
|
||||
| `<section>` | Section |
|
||||
| `<footer>` | Pied de page |
|
||||
|
||||
### Erreurs frequentes
|
||||
|
||||
1. **L'image ne s'affiche pas** : Verifiez le chemin (`src`) et le nom du fichier (pas d'espaces, pas d'accents)
|
||||
2. **Les accents sont bizarres** : Verifiez l'encodage UTF-8
|
||||
3. **Le lien ne marche pas** : Verifiez que le fichier cible existe et que le nom est correct
|
||||
4. **Le tableau n'a pas de bordures** : Ajoutez le CSS pour les bordures
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user