ajout tp css et html au format markdown. Suppression de balises desuetes, ajout partie client - serveur
This commit is contained in:
412
web/tp/TP_HTML.md
Normal file
412
web/tp/TP_HTML.md
Normal file
@@ -0,0 +1,412 @@
|
||||
# TP Introduction au langage HTML5
|
||||
|
||||
**Spécialité NSI - Première**
|
||||
|
||||
---
|
||||
|
||||
## Objectifs du TP
|
||||
|
||||
- Comprendre l'architecture client-serveur et le protocole HTTP
|
||||
- Découvrir la structure d'une page HTML5
|
||||
- Maîtriser les balises HTML essentielles
|
||||
- Créer une page web complète
|
||||
|
||||
**Durée estimée** : 2h
|
||||
|
||||
**Matériel** : PC + Navigateur (Firefox, Chrome) + Éditeur de code (VS Code, Notepad++)
|
||||
|
||||
---
|
||||
|
||||
## Partie A : Comment fonctionne le Web ? (20 min)
|
||||
|
||||
### A.1 L'architecture client-serveur
|
||||
|
||||
Quand vous tapez une adresse web dans votre navigateur, que se passe-t-il ?
|
||||
|
||||
```
|
||||
┌─────────────┐ ┌─────────────┐
|
||||
│ │ (1) Requête HTTP │ │
|
||||
│ NAVIGATEUR │ ─────────────────────────► │ SERVEUR │
|
||||
│ (Client) │ │ WEB │
|
||||
│ │ ◄───────────────────────── │ │
|
||||
│ │ (2) Réponse (code HTML) │ │
|
||||
└─────────────┘ └─────────────┘
|
||||
```
|
||||
|
||||
1. **Le client (navigateur)** envoie une **requête HTTP** au serveur
|
||||
2. **Le serveur** renvoie le **code HTML** de la page demandée
|
||||
3. **Le navigateur interprète** le code et affiche la page
|
||||
|
||||
### A.2 Le protocole HTTP
|
||||
|
||||
**HTTP** (*HyperText Transfer Protocol*) est le protocole utilisé sur Internet depuis 1990 pour transférer des pages web.
|
||||
|
||||
Une **URL** (*Uniform Resource Locator*) est l'adresse d'une ressource sur le web :
|
||||
|
||||
```
|
||||
https://www.wikipedia.org/wiki/HTML
|
||||
└─┬─┘ └──────┬──────┘ └────┬────┘
|
||||
protocole serveur chemin
|
||||
```
|
||||
|
||||
### A.3 Le HTML
|
||||
|
||||
**HTML** (*HyperText Markup Language*) est un langage de **balisage** qui permet de structurer le contenu d'une page web : texte, images, liens...
|
||||
|
||||
> **Important** : HTML structure le contenu (le fond), CSS gère l'apparence (la forme).
|
||||
|
||||
**Exercice A.1** : Ouvrez n'importe quelle page web, faites un clic droit → "Afficher le code source". Observez la structure du code HTML.
|
||||
|
||||
---
|
||||
|
||||
## Partie B : Structure d'une page HTML5 (30 min)
|
||||
|
||||
### B.1 Les balises
|
||||
|
||||
Les pages HTML sont composées de **balises** entourées de chevrons `< >`.
|
||||
|
||||
Il existe deux types de balises :
|
||||
|
||||
**Balises en paires** (ouvrante + fermante) :
|
||||
```html
|
||||
<titre>Ceci est un titre</titre>
|
||||
```
|
||||
|
||||
**Balises orphelines** (auto-fermantes) :
|
||||
```html
|
||||
<image />
|
||||
```
|
||||
|
||||
### B.2 Les attributs
|
||||
|
||||
Les attributs complètent les balises avec des informations supplémentaires :
|
||||
|
||||
```html
|
||||
<balise attribut="valeur">Contenu</balise>
|
||||
```
|
||||
|
||||
Exemple :
|
||||
```html
|
||||
<image source="photo.jpg" />
|
||||
```
|
||||
|
||||
### B.3 Structure de base d'une page HTML5
|
||||
|
||||
Créez un fichier `page.html` avec le code suivant :
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Ma première page</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Le contenu visible ici -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
| Élément | Rôle |
|
||||
|---------|------|
|
||||
| `<!DOCTYPE html>` | Indique qu'il s'agit d'une page HTML5 |
|
||||
| `<html>` | Balise racine, englobe tout le contenu |
|
||||
| `<head>` | En-tête (métadonnées, titre, liens CSS) |
|
||||
| `<meta charset="utf-8">` | Encodage des caractères (accents) |
|
||||
| `<title>` | Titre affiché dans l'onglet du navigateur |
|
||||
| `<body>` | Corps de la page (contenu visible) |
|
||||
| `<!-- ... -->` | Commentaire (non affiché) |
|
||||
|
||||
**Exercice B.1** : Créez le fichier `page.html`, ouvrez-le dans votre navigateur. Que voyez-vous ?
|
||||
|
||||
---
|
||||
|
||||
## Partie C : Organiser le contenu (40 min)
|
||||
|
||||
### C.1 Les paragraphes
|
||||
|
||||
```html
|
||||
<p>Ceci est un paragraphe.</p>
|
||||
<p>Ceci est un autre paragraphe.</p>
|
||||
```
|
||||
|
||||
Pour un simple retour à la ligne dans un paragraphe : `<br />`
|
||||
|
||||
### C.2 Les titres
|
||||
|
||||
HTML propose 6 niveaux de titres, de `<h1>` (le plus important) à `<h6>` :
|
||||
|
||||
```html
|
||||
<h1>Titre principal</h1>
|
||||
<h2>Sous-titre</h2>
|
||||
<h3>Sous-sous-titre</h3>
|
||||
```
|
||||
|
||||
> **Attention** : Ne confondez pas `<title>` (titre de l'onglet) et `<h1>` (titre dans la page).
|
||||
|
||||
**Exercice C.1** : Dans votre fichier, ajoutez un titre `<h1>` et deux paragraphes dans le `<body>`.
|
||||
|
||||
### C.3 Mettre en valeur le texte
|
||||
|
||||
```html
|
||||
<p>Ce mot est <strong>important</strong>.</p>
|
||||
<p>Ce mot est <em>mis en valeur</em>.</p>
|
||||
<p>Ce mot est <mark>surligné</mark>.</p>
|
||||
```
|
||||
|
||||
| Balise | Signification | Rendu par défaut |
|
||||
|--------|---------------|------------------|
|
||||
| `<strong>` | Important | **gras** |
|
||||
| `<em>` | Emphase | *italique* |
|
||||
| `<mark>` | Marqué | surligné |
|
||||
|
||||
> **Note** : Ces balises indiquent le **sens** du texte, pas son apparence. L'apparence peut être modifiée en CSS.
|
||||
|
||||
### C.4 Les listes
|
||||
|
||||
**Liste non ordonnée** (à puces) :
|
||||
```html
|
||||
<ul>
|
||||
<li>Premier élément</li>
|
||||
<li>Deuxième élément</li>
|
||||
<li>Troisième élément</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
**Liste ordonnée** (numérotée) :
|
||||
```html
|
||||
<ol>
|
||||
<li>Première étape</li>
|
||||
<li>Deuxième étape</li>
|
||||
<li>Troisième étape</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
**Exercice C.2** : Ajoutez une liste de vos 3 langages de programmation préférés.
|
||||
|
||||
---
|
||||
|
||||
## Partie D : Les liens (20 min)
|
||||
|
||||
### D.1 Lien vers un autre site (lien absolu)
|
||||
|
||||
```html
|
||||
<p>Visitez <a href="https://www.python.org">le site Python</a> !</p>
|
||||
```
|
||||
|
||||
### D.2 Lien vers une page de votre site (lien relatif)
|
||||
|
||||
Si `page2.html` est dans le même dossier :
|
||||
```html
|
||||
<a href="page2.html">Aller à la page 2</a>
|
||||
```
|
||||
|
||||
Si `page2.html` est dans un sous-dossier `pages/` :
|
||||
```html
|
||||
<a href="pages/page2.html">Aller à la page 2</a>
|
||||
```
|
||||
|
||||
Si `page2.html` est dans le dossier parent :
|
||||
```html
|
||||
<a href="../page2.html">Aller à la page 2</a>
|
||||
```
|
||||
|
||||
### D.3 Lien vers une ancre (même page)
|
||||
|
||||
Pour créer un sommaire cliquable sur une longue page :
|
||||
|
||||
```html
|
||||
<!-- Le lien -->
|
||||
<a href="#section2">Aller à la section 2</a>
|
||||
|
||||
<!-- La cible (plus bas dans la page) -->
|
||||
<h2 id="section2">Section 2</h2>
|
||||
```
|
||||
|
||||
**Exercice D.1** : Créez deux fichiers HTML qui se lient mutuellement.
|
||||
|
||||
---
|
||||
|
||||
## Partie E : Les images (15 min)
|
||||
|
||||
### E.1 Insérer une image
|
||||
|
||||
```html
|
||||
<img src="images/photo.jpg" alt="Description de l'image" />
|
||||
```
|
||||
|
||||
| Attribut | Rôle | Obligatoire |
|
||||
|----------|------|-------------|
|
||||
| `src` | Chemin vers l'image | Oui |
|
||||
| `alt` | Texte alternatif (accessibilité) | Oui |
|
||||
| `width` | Largeur en pixels | Non |
|
||||
| `height` | Hauteur en pixels | Non |
|
||||
|
||||
### E.2 Formats d'images pour le web
|
||||
|
||||
| Format | Usage |
|
||||
|--------|-------|
|
||||
| **JPEG** (.jpg) | Photos |
|
||||
| **PNG** (.png) | Illustrations, logos, transparence |
|
||||
| **GIF** (.gif) | Animations simples |
|
||||
| **SVG** (.svg) | Icônes, logos vectoriels |
|
||||
| **WebP** (.webp) | Format moderne, bonne compression |
|
||||
|
||||
### E.3 Image cliquable
|
||||
|
||||
```html
|
||||
<a href="grande_image.jpg">
|
||||
<img src="miniature.jpg" alt="Cliquez pour agrandir" />
|
||||
</a>
|
||||
```
|
||||
|
||||
**Exercice E.1** : Téléchargez une image, placez-la dans un dossier `images/` et insérez-la dans votre page.
|
||||
|
||||
---
|
||||
|
||||
## Partie F : Les tableaux (25 min)
|
||||
|
||||
### F.1 Structure de base
|
||||
|
||||
```html
|
||||
<table>
|
||||
<tr>
|
||||
<td>Ligne 1, Cellule 1</td>
|
||||
<td>Ligne 1, Cellule 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Ligne 2, Cellule 1</td>
|
||||
<td>Ligne 2, Cellule 2</td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
| Balise | Rôle |
|
||||
|--------|------|
|
||||
| `<table>` | Définit le tableau |
|
||||
| `<tr>` | Définit une ligne (*table row*) |
|
||||
| `<td>` | Définit une cellule (*table data*) |
|
||||
| `<th>` | Définit une cellule d'en-tête (*table header*) |
|
||||
| `<caption>` | Titre du tableau |
|
||||
|
||||
### F.2 Tableau avec en-tête
|
||||
|
||||
```html
|
||||
<table>
|
||||
<caption>Liste des élèves</caption>
|
||||
<tr>
|
||||
<th>Nom</th>
|
||||
<th>Prénom</th>
|
||||
<th>Classe</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Dupont</td>
|
||||
<td>Marie</td>
|
||||
<td>1ère NSI</td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
### F.3 Fusion de cellules
|
||||
|
||||
- `colspan="2"` : fusionne 2 cellules horizontalement
|
||||
- `rowspan="2"` : fusionne 2 cellules verticalement
|
||||
|
||||
```html
|
||||
<table>
|
||||
<tr>
|
||||
<td colspan="2">Cette cellule occupe 2 colonnes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cellule 1</td>
|
||||
<td>Cellule 2</td>
|
||||
</tr>
|
||||
</table>
|
||||
```
|
||||
|
||||
**Exercice F.1** : Créez un tableau de votre emploi du temps (une journée).
|
||||
|
||||
---
|
||||
|
||||
## Partie G : Balises sémantiques HTML5 (10 min)
|
||||
|
||||
HTML5 introduit des balises pour structurer une page de manière sémantique :
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ <header> │
|
||||
├─────────┬───────────────────────────┤
|
||||
│ │ <section> │
|
||||
│ <nav> │ ┌─────────┬─────────┐ │
|
||||
│ │ │<article>│ <aside> │ │
|
||||
│ │ └─────────┴─────────┘ │
|
||||
├─────────┴───────────────────────────┤
|
||||
│ <footer> │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
| Balise | Usage |
|
||||
|--------|-------|
|
||||
| `<header>` | En-tête de page ou de section |
|
||||
| `<nav>` | Menu de navigation |
|
||||
| `<main>` | Contenu principal |
|
||||
| `<section>` | Section thématique |
|
||||
| `<article>` | Contenu autonome (article, post) |
|
||||
| `<aside>` | Contenu complémentaire (sidebar) |
|
||||
| `<footer>` | Pied de page |
|
||||
|
||||
---
|
||||
|
||||
## Projet final : Créer une page web thématique (30 min)
|
||||
|
||||
### Consignes
|
||||
|
||||
Réalisez une page web sur un thème de votre choix (film, jeu vidéo, sport, artiste...).
|
||||
|
||||
**Éléments obligatoires** :
|
||||
- [ ] Structure HTML5 valide
|
||||
- [ ] Un titre principal `<h1>` et au moins un sous-titre `<h2>`
|
||||
- [ ] Au moins 3 paragraphes de texte
|
||||
- [ ] Au moins 2 images
|
||||
- [ ] Une liste (ordonnée ou non)
|
||||
- [ ] Un tableau
|
||||
- [ ] Au moins un lien externe
|
||||
|
||||
**Bonus** :
|
||||
- [ ] Utilisation des balises sémantiques (`<header>`, `<main>`, `<footer>`)
|
||||
- [ ] Un menu de navigation avec ancres
|
||||
- [ ] Plusieurs pages liées entre elles
|
||||
|
||||
### Organisation des fichiers
|
||||
|
||||
```
|
||||
mon_site/
|
||||
├── index.html
|
||||
├── page2.html
|
||||
└── images/
|
||||
├── image1.jpg
|
||||
└── image2.png
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Résumé des balises essentielles
|
||||
|
||||
| Catégorie | Balises |
|
||||
|-----------|---------|
|
||||
| **Structure** | `<!DOCTYPE>`, `<html>`, `<head>`, `<body>` |
|
||||
| **Métadonnées** | `<meta>`, `<title>` |
|
||||
| **Texte** | `<p>`, `<br>`, `<h1>`-`<h6>`, `<strong>`, `<em>` |
|
||||
| **Listes** | `<ul>`, `<ol>`, `<li>` |
|
||||
| **Liens** | `<a href="">` |
|
||||
| **Images** | `<img src="" alt="">` |
|
||||
| **Tableaux** | `<table>`, `<tr>`, `<td>`, `<th>` |
|
||||
| **Sémantique** | `<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, `<footer>` |
|
||||
|
||||
---
|
||||
|
||||
## Pour aller plus loin
|
||||
|
||||
- **CSS Diner** : [flukeout.github.io](https://flukeout.github.io) - Apprendre les sélecteurs CSS
|
||||
- **Flexbox Froggy** : [flexboxfroggy.com](https://flexboxfroggy.com) - Apprendre Flexbox
|
||||
- **MDN Web Docs** : [developer.mozilla.org](https://developer.mozilla.org/fr/docs/Web/HTML) - Documentation de référence
|
||||
Reference in New Issue
Block a user