2026-02-10 08:38:10 +01:00
# 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
**Matériel** : PC + Navigateur (Firefox, Chrome) + Éditeur de code (VS Code, Notepad++)
---
2026-02-10 10:09:04 +01:00
## Partie A : Comment fonctionne le Web ?
2026-02-10 08:38:10 +01:00
### 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.
---
2026-02-10 10:09:04 +01:00
## Partie B : Structure d'une page HTML5
2026-02-10 08:38:10 +01:00
### 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 ?
---
2026-02-10 10:09:04 +01:00
## Partie C : Organiser le contenu
2026-02-10 08:38:10 +01:00
### 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.
---
2026-02-10 10:09:04 +01:00
## Partie D : Les liens
2026-02-10 08:38:10 +01:00
### 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.
---
2026-02-10 10:09:04 +01:00
## Partie E : Les images
2026-02-10 08:38:10 +01:00
### 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.
---
2026-02-10 10:09:04 +01:00
## Partie F : Les tableaux
2026-02-10 08:38:10 +01:00
### 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).
---
2026-02-10 10:09:04 +01:00
## Partie G : Balises sémantiques HTML5
2026-02-10 08:38:10 +01:00
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 |
---
2026-02-10 10:09:04 +01:00
## Projet final : Créer une page web thématique
2026-02-10 08:38:10 +01:00
### 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
2026-02-10 08:41:06 +01:00
---
## Licence
**Auteur** : Florian Mathieu
**Licence** : [CC BY-NC-SA 4.0 ](http://creativecommons.org/licenses/by-nc-sa/4.0/ )
[](http://creativecommons.org/licenses/by-nc-sa/4.0/)
Ce document est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.
