422 lines
11 KiB
Markdown
422 lines
11 KiB
Markdown
# 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++)
|
|
|
|
---
|
|
|
|
## Partie A : Comment fonctionne le Web ?
|
|
|
|
### 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
|
|
|
|
### 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
|
|
|
|
### 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
|
|
|
|
### 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
|
|
|
|
### 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
|
|
|
|
### 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
|
|
|
|
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
|
|
|
|
### 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
|
|
|
|
---
|
|
|
|
## 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.
|