modifications des tp, exercices, ajouts d'indications en JS, d'exemples en gloutons, 3 semaines de boulot enfin voilà
This commit is contained in:
333
web/html/CORRECTION.md
Normal file
333
web/html/CORRECTION.md
Normal file
@@ -0,0 +1,333 @@
|
||||
# Correction des exercices - HTML
|
||||
|
||||
---------
|
||||
|
||||
## Exercice 1 : Structure de base
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Ma première page</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Bienvenue</h1>
|
||||
|
||||
<p>
|
||||
Bonjour et bienvenue sur ma première page web !
|
||||
Je suis en train d'apprendre le HTML en cours de NSI.
|
||||
</p>
|
||||
|
||||
<a href="https://www.google.fr">Aller sur Google</a>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**Points importants :**
|
||||
- Le `<!DOCTYPE html>` indique qu'il s'agit d'HTML5
|
||||
- L'attribut `lang="fr"` précise la langue du document
|
||||
- Le `charset="UTF-8"` permet d'afficher les accents
|
||||
- Le `<title>` apparaît dans l'onglet du navigateur
|
||||
- Le contenu visible est dans le `<body>`
|
||||
|
||||
---------
|
||||
|
||||
## Exercice 2 : Les listes
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Mes listes</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Mes films préférés</h1>
|
||||
|
||||
<ul>
|
||||
<li>Inception</li>
|
||||
<li>Interstellar</li>
|
||||
<li>Le Seigneur des Anneaux</li>
|
||||
<li>Matrix</li>
|
||||
<li>Retour vers le Futur</li>
|
||||
</ul>
|
||||
|
||||
<h1>Comment faire des pâtes</h1>
|
||||
|
||||
<ol>
|
||||
<li>Faire bouillir de l'eau dans une grande casserole</li>
|
||||
<li>Ajouter du sel dans l'eau bouillante</li>
|
||||
<li>Verser les pâtes dans l'eau</li>
|
||||
<li>Laisser cuire selon le temps indiqué sur le paquet</li>
|
||||
<li>Égoutter les pâtes</li>
|
||||
<li>Ajouter la sauce de votre choix</li>
|
||||
<li>Servir et déguster !</li>
|
||||
</ol>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**Points importants :**
|
||||
- `<ul>` pour une liste non ordonnée (puces)
|
||||
- `<ol>` pour une liste ordonnée (numérotée)
|
||||
- Chaque élément de liste est dans une balise `<li>`
|
||||
|
||||
---------
|
||||
|
||||
## Exercice 3 : Images et liens
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Images et liens</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Ma page avec images et liens</h1>
|
||||
|
||||
<!-- Image simple -->
|
||||
<img src="paysage.jpg" alt="Un magnifique paysage de montagne">
|
||||
|
||||
<!-- Lien vers Wikipédia dans un nouvel onglet -->
|
||||
<p>
|
||||
<a href="https://fr.wikipedia.org" target="_blank">
|
||||
Visiter Wikipédia (nouvel onglet)
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<!-- Image cliquable -->
|
||||
<p>
|
||||
<a href="https://unsplash.com">
|
||||
<img src="paysage.jpg" alt="Cliquez pour voir la source de l'image">
|
||||
</a>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**Points importants :**
|
||||
- L'attribut `alt` est obligatoire pour l'accessibilité
|
||||
- `target="_blank"` ouvre le lien dans un nouvel onglet
|
||||
- Pour rendre une image cliquable, on l'entoure d'une balise `<a>`
|
||||
|
||||
---------
|
||||
|
||||
## Exercice 4 : Tableau
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Mes notes</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Bulletin de notes</h1>
|
||||
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Matière</th>
|
||||
<th>Coefficient</th>
|
||||
<th>Moyenne</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Maths</td>
|
||||
<td>4</td>
|
||||
<td>14</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>NSI</td>
|
||||
<td>4</td>
|
||||
<td>16</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Français</td>
|
||||
<td>3</td>
|
||||
<td>12</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**Points importants :**
|
||||
- `<thead>` contient l'en-tête du tableau
|
||||
- `<tbody>` contient le corps du tableau
|
||||
- `<tr>` définit une ligne (table row)
|
||||
- `<th>` définit une cellule d'en-tête (table header)
|
||||
- `<td>` définit une cellule de données (table data)
|
||||
- L'attribut `border="1"` ajoute une bordure (en pratique, on utilise le CSS)
|
||||
|
||||
---------
|
||||
|
||||
## Exercice 5 : Formulaire
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Inscription</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Formulaire d'inscription</h1>
|
||||
|
||||
<form action="traitement.php" method="post">
|
||||
<p>
|
||||
<label for="nom">Nom :</label>
|
||||
<input type="text" id="nom" name="nom" required>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="email">Email :</label>
|
||||
<input type="email" id="email" name="email" required>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="mdp">Mot de passe :</label>
|
||||
<input type="password" id="mdp" name="mdp">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<input type="checkbox" id="cgu" name="cgu" required>
|
||||
<label for="cgu">J'accepte les conditions générales d'utilisation</label>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button type="submit">S'inscrire</button>
|
||||
</p>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**Points importants :**
|
||||
- L'attribut `required` rend le champ obligatoire
|
||||
- `type="email"` vérifie automatiquement le format de l'email
|
||||
- `type="password"` masque la saisie
|
||||
- Le `for` du label doit correspondre à l'`id` du champ
|
||||
- `type="checkbox"` crée une case à cocher
|
||||
|
||||
---------
|
||||
|
||||
## Exercice 6 : Page complète
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Le Python - Langage de programmation</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Le Python</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#introduction">Introduction</a></li>
|
||||
<li><a href="#historique">Historique</a></li>
|
||||
<li><a href="#utilisations">Utilisations</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h2 id="introduction">Introduction au Python</h2>
|
||||
|
||||
<p>
|
||||
Python est un langage de programmation interprété, multiparadigme
|
||||
et multiplateformes. Il favorise la programmation impérative structurée,
|
||||
fonctionnelle et orientée objet.
|
||||
</p>
|
||||
|
||||
<img src="python-logo.png" alt="Logo du langage Python">
|
||||
|
||||
<p>
|
||||
Python est apprécié par les débutants pour sa syntaxe claire et lisible,
|
||||
qui utilise l'indentation pour délimiter les blocs de code.
|
||||
</p>
|
||||
|
||||
<h2 id="historique">Historique</h2>
|
||||
|
||||
<p>
|
||||
Python a été créé par Guido van Rossum et la première version
|
||||
a été publiée en 1991. Le nom "Python" fait référence aux
|
||||
Monty Python, groupe d'humoristes britanniques.
|
||||
</p>
|
||||
|
||||
<h2 id="utilisations">Utilisations</h2>
|
||||
|
||||
<p>Python est utilisé dans de nombreux domaines :</p>
|
||||
|
||||
<table border="1">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Domaine</th>
|
||||
<th>Exemples</th>
|
||||
<th>Bibliothèques</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Data Science</td>
|
||||
<td>Analyse de données</td>
|
||||
<td>Pandas, NumPy</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Intelligence Artificielle</td>
|
||||
<td>Machine Learning</td>
|
||||
<td>TensorFlow, PyTorch</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Web</td>
|
||||
<td>Sites web</td>
|
||||
<td>Django, Flask</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Automatisation</td>
|
||||
<td>Scripts</td>
|
||||
<td>Selenium, Beautiful Soup</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<aside>
|
||||
<h3>Ressources utiles</h3>
|
||||
<ul>
|
||||
<li><a href="https://www.python.org" target="_blank">Site officiel</a></li>
|
||||
<li><a href="https://docs.python.org/fr/" target="_blank">Documentation</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<footer>
|
||||
<p>© 2024 - Page créée dans le cadre du cours de NSI</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
**Points importants :**
|
||||
- Structure sémantique avec `<header>`, `<nav>`, `<main>`, `<article>`, `<aside>`, `<footer>`
|
||||
- Navigation avec des ancres (`#introduction`, `#historique`, `#utilisations`)
|
||||
- Les `id` sur les titres permettent de créer des liens internes
|
||||
- `©` affiche le symbole copyright ©
|
||||
- `target="_blank"` pour les liens externes
|
||||
|
||||
---------
|
||||
|
||||
Auteur : Florian Mathieu
|
||||
|
||||
Licence CC BY NC
|
||||
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a> <br />Ce cours est mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International</a>.
|
||||
579
web/html/README.md
Normal file
579
web/html/README.md
Normal file
@@ -0,0 +1,579 @@
|
||||
# Le HTML
|
||||
|
||||
> Le HTML (HyperText Markup Language) est le langage de balisage utilisé pour structurer le contenu des pages web. Il définit ce que contient une page : texte, images, liens, etc.
|
||||
|
||||
---------
|
||||
|
||||
## Qu'est-ce que le HTML ?
|
||||
|
||||
Le HTML n'est **pas un langage de programmation** : c'est un **langage de description** (ou de balisage). Il ne permet pas de faire des calculs, des boucles ou des conditions comme Python. Son rôle est de **structurer** le contenu d'une page web.
|
||||
|
||||
### Principe des balises
|
||||
|
||||
Le HTML fonctionne avec des **balises** (tags en anglais). Une balise est un mot-clé entouré de chevrons `< >`.
|
||||
|
||||
La plupart des balises fonctionnent **par paires** :
|
||||
- Une balise **ouvrante** : `<balise>`
|
||||
- Une balise **fermante** : `</balise>` (avec un slash `/`)
|
||||
|
||||
```html
|
||||
<p>Ceci est un paragraphe</p>
|
||||
```
|
||||
|
||||
Certaines balises sont **auto-fermantes** (elles n'ont pas de contenu) :
|
||||
```html
|
||||
<br> <!-- Retour à la ligne -->
|
||||
<hr> <!-- Ligne horizontale -->
|
||||
<img> <!-- Image -->
|
||||
```
|
||||
|
||||
### Les attributs
|
||||
|
||||
Les balises peuvent avoir des **attributs** qui apportent des informations supplémentaires :
|
||||
|
||||
```html
|
||||
<balise attribut="valeur">Contenu</balise>
|
||||
```
|
||||
|
||||
Exemples :
|
||||
```html
|
||||
<a href="https://www.google.fr">Lien vers Google</a>
|
||||
<img src="photo.jpg" alt="Description de l'image">
|
||||
```
|
||||
|
||||
---------
|
||||
|
||||
## Structure d'une page HTML5
|
||||
|
||||
Toute page HTML5 doit respecter une structure minimale :
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Titre de ma page</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Le contenu visible de la page -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Explication de chaque élément
|
||||
|
||||
| Élément | Rôle |
|
||||
|---------|------|
|
||||
| `<!DOCTYPE html>` | Indique au navigateur qu'il s'agit d'un document HTML5 |
|
||||
| `<html lang="fr">` | Élément racine, contient toute la page. L'attribut `lang` précise la langue |
|
||||
| `<head>` | En-tête du document (métadonnées, titre, liens CSS...). **Non visible** |
|
||||
| `<meta charset="UTF-8">` | Définit l'encodage des caractères (UTF-8 pour les accents) |
|
||||
| `<title>` | Titre affiché dans l'onglet du navigateur |
|
||||
| `<body>` | Corps du document. **Contenu visible** de la page |
|
||||
|
||||
### Arborescence HTML
|
||||
|
||||
Une page HTML forme une **arborescence** (structure en arbre) :
|
||||
|
||||
```
|
||||
html
|
||||
├── head
|
||||
│ ├── meta
|
||||
│ └── title
|
||||
└── body
|
||||
├── h1
|
||||
├── p
|
||||
└── ...
|
||||
```
|
||||
|
||||
Les éléments à l'intérieur d'autres éléments sont appelés **enfants**. L'élément qui les contient est leur **parent**.
|
||||
|
||||
---------
|
||||
|
||||
## Les balises de texte
|
||||
|
||||
### Titres
|
||||
|
||||
HTML propose 6 niveaux de titres, de `<h1>` (le plus important) à `<h6>` (le moins important) :
|
||||
|
||||
```html
|
||||
<h1>Titre principal</h1>
|
||||
<h2>Titre de section</h2>
|
||||
<h3>Sous-titre</h3>
|
||||
<h4>Titre de niveau 4</h4>
|
||||
<h5>Titre de niveau 5</h5>
|
||||
<h6>Titre de niveau 6</h6>
|
||||
```
|
||||
|
||||
> **Bonne pratique** : Une page ne devrait avoir qu'un seul `<h1>`. Les titres doivent être hiérarchiques (pas de `<h3>` après un `<h1>` sans `<h2>` entre les deux).
|
||||
|
||||
### Paragraphes et mise en forme
|
||||
|
||||
```html
|
||||
<p>Un paragraphe de texte.</p>
|
||||
|
||||
<strong>Texte important (gras)</strong>
|
||||
<em>Texte mis en emphase (italique)</em>
|
||||
<mark>Texte surligné</mark>
|
||||
<del>Texte barré</del>
|
||||
<sub>Texte en indice</sub> (comme H<sub>2</sub>O)
|
||||
<sup>Texte en exposant</sup> (comme 2<sup>3</sup>)
|
||||
```
|
||||
|
||||
### Retour à la ligne et séparation
|
||||
|
||||
```html
|
||||
<br> <!-- Retour à la ligne simple -->
|
||||
<hr> <!-- Ligne de séparation horizontale -->
|
||||
```
|
||||
|
||||
---------
|
||||
|
||||
## Les liens hypertextes
|
||||
|
||||
Les liens sont créés avec la balise `<a>` (anchor = ancre) :
|
||||
|
||||
```html
|
||||
<a href="https://www.exemple.fr">Texte du lien</a>
|
||||
```
|
||||
|
||||
### Attributs importants
|
||||
|
||||
| Attribut | Rôle |
|
||||
|----------|------|
|
||||
| `href` | URL de destination (obligatoire) |
|
||||
| `target="_blank"` | Ouvre le lien dans un nouvel onglet |
|
||||
| `title` | Info-bulle au survol |
|
||||
|
||||
### Types de liens
|
||||
|
||||
```html
|
||||
<!-- Lien externe (vers un autre site) -->
|
||||
<a href="https://www.google.fr">Google</a>
|
||||
|
||||
<!-- Lien interne (vers une autre page du site) -->
|
||||
<a href="contact.html">Page contact</a>
|
||||
|
||||
<!-- Lien vers un fichier -->
|
||||
<a href="documents/rapport.pdf">Télécharger le PDF</a>
|
||||
|
||||
<!-- Lien vers une ancre (même page) -->
|
||||
<a href="#section2">Aller à la section 2</a>
|
||||
|
||||
<!-- Lien email -->
|
||||
<a href="mailto:contact@exemple.fr">Envoyer un email</a>
|
||||
```
|
||||
|
||||
### Créer une ancre
|
||||
|
||||
Pour créer un point d'ancrage dans la page :
|
||||
|
||||
```html
|
||||
<h2 id="section2">Section 2</h2>
|
||||
```
|
||||
|
||||
Le lien `<a href="#section2">` amènera directement à cet élément.
|
||||
|
||||
---------
|
||||
|
||||
## Les images
|
||||
|
||||
Les images sont insérées avec la balise `<img>` (auto-fermante) :
|
||||
|
||||
```html
|
||||
<img src="chemin/vers/image.jpg" alt="Description de l'image">
|
||||
```
|
||||
|
||||
### Attributs obligatoires
|
||||
|
||||
| Attribut | Rôle |
|
||||
|----------|------|
|
||||
| `src` | Chemin vers l'image (obligatoire) |
|
||||
| `alt` | Texte alternatif si l'image ne charge pas (obligatoire pour l'accessibilité) |
|
||||
|
||||
### Attributs optionnels
|
||||
|
||||
```html
|
||||
<img src="photo.jpg" alt="Photo de vacances" width="400" height="300">
|
||||
```
|
||||
|
||||
### Formats d'images courants
|
||||
|
||||
| Format | Extension | Utilisation |
|
||||
|--------|-----------|-------------|
|
||||
| JPEG | .jpg, .jpeg | Photos |
|
||||
| PNG | .png | Images avec transparence |
|
||||
| GIF | .gif | Animations simples |
|
||||
| SVG | .svg | Images vectorielles |
|
||||
| WebP | .webp | Format moderne (compression optimisée) |
|
||||
|
||||
### Image cliquable (lien)
|
||||
|
||||
```html
|
||||
<a href="https://www.exemple.fr">
|
||||
<img src="logo.png" alt="Logo">
|
||||
</a>
|
||||
```
|
||||
|
||||
---------
|
||||
|
||||
## 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>
|
||||
```
|
||||
|
||||
Rendu :
|
||||
- Premier élément
|
||||
- Deuxième élément
|
||||
- Troisième élément
|
||||
|
||||
### Liste ordonnée (numérotée)
|
||||
|
||||
```html
|
||||
<ol>
|
||||
<li>Premier élément</li>
|
||||
<li>Deuxième élément</li>
|
||||
<li>Troisième élément</li>
|
||||
</ol>
|
||||
```
|
||||
|
||||
Rendu :
|
||||
1. Premier élément
|
||||
2. Deuxième élément
|
||||
3. Troisième élément
|
||||
|
||||
### Liste de définitions
|
||||
|
||||
```html
|
||||
<dl>
|
||||
<dt>HTML</dt>
|
||||
<dd>HyperText Markup Language</dd>
|
||||
<dt>CSS</dt>
|
||||
<dd>Cascading Style Sheets</dd>
|
||||
</dl>
|
||||
```
|
||||
|
||||
### Listes imbriquées
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li>Fruits
|
||||
<ul>
|
||||
<li>Pomme</li>
|
||||
<li>Banane</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Légumes</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
---------
|
||||
|
||||
## Les tableaux
|
||||
|
||||
Les tableaux servent à présenter des données tabulaires (et non pour la mise en page !).
|
||||
|
||||
```html
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nom</th>
|
||||
<th>Prénom</th>
|
||||
<th>Âge</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Dupont</td>
|
||||
<td>Jean</td>
|
||||
<td>25</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Martin</td>
|
||||
<td>Marie</td>
|
||||
<td>30</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
```
|
||||
|
||||
### Structure d'un tableau
|
||||
|
||||
| Balise | Rôle |
|
||||
|--------|------|
|
||||
| `<table>` | Conteneur du tableau |
|
||||
| `<thead>` | En-tête du tableau |
|
||||
| `<tbody>` | Corps du tableau |
|
||||
| `<tfoot>` | Pied du tableau (optionnel) |
|
||||
| `<tr>` | Ligne (table row) |
|
||||
| `<th>` | Cellule d'en-tête (table header) |
|
||||
| `<td>` | Cellule de données (table data) |
|
||||
|
||||
### Fusionner des cellules
|
||||
|
||||
```html
|
||||
<!-- Fusionner 2 colonnes -->
|
||||
<td colspan="2">Cellule sur 2 colonnes</td>
|
||||
|
||||
<!-- Fusionner 3 lignes -->
|
||||
<td rowspan="3">Cellule sur 3 lignes</td>
|
||||
```
|
||||
|
||||
---------
|
||||
|
||||
## Les balises sémantiques HTML5
|
||||
|
||||
HTML5 introduit des balises **sémantiques** qui donnent du sens à la structure :
|
||||
|
||||
```html
|
||||
<header> <!-- En-tête de page ou de section -->
|
||||
<nav> <!-- Menu de navigation -->
|
||||
<main> <!-- Contenu principal (unique par page) -->
|
||||
<article> <!-- Contenu autonome (article, post...) -->
|
||||
<section> <!-- Section thématique -->
|
||||
<aside> <!-- Contenu annexe (barre latérale) -->
|
||||
<footer> <!-- Pied de page ou de section -->
|
||||
```
|
||||
|
||||
### Exemple de structure sémantique
|
||||
|
||||
```html
|
||||
<body>
|
||||
<header>
|
||||
<h1>Mon Site</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="index.html">Accueil</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<article>
|
||||
<h2>Mon premier article</h2>
|
||||
<p>Contenu de l'article...</p>
|
||||
</article>
|
||||
</main>
|
||||
|
||||
<aside>
|
||||
<h3>À propos</h3>
|
||||
<p>Informations complémentaires</p>
|
||||
</aside>
|
||||
|
||||
<footer>
|
||||
<p>© 2024 - Mon Site</p>
|
||||
</footer>
|
||||
</body>
|
||||
```
|
||||
|
||||
### Pourquoi utiliser les balises sémantiques ?
|
||||
|
||||
1. **Accessibilité** : Les lecteurs d'écran comprennent mieux la structure
|
||||
2. **SEO** : Les moteurs de recherche indexent mieux le contenu
|
||||
3. **Maintenabilité** : Le code est plus lisible et compréhensible
|
||||
|
||||
---------
|
||||
|
||||
## Les formulaires
|
||||
|
||||
Les formulaires permettent de collecter des informations auprès de l'utilisateur.
|
||||
|
||||
### Structure de base
|
||||
|
||||
```html
|
||||
<form action="traitement.php" method="post">
|
||||
<!-- Champs du formulaire -->
|
||||
<button type="submit">Envoyer</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
| Attribut | Rôle |
|
||||
|----------|------|
|
||||
| `action` | URL vers laquelle les données seront envoyées |
|
||||
| `method` | Méthode HTTP (`get` ou `post`) |
|
||||
|
||||
### Les champs de saisie
|
||||
|
||||
```html
|
||||
<!-- Champ texte -->
|
||||
<input type="text" name="nom" placeholder="Votre nom">
|
||||
|
||||
<!-- Email -->
|
||||
<input type="email" name="email" placeholder="votre@email.fr">
|
||||
|
||||
<!-- Mot de passe -->
|
||||
<input type="password" name="mdp">
|
||||
|
||||
<!-- Nombre -->
|
||||
<input type="number" name="age" min="0" max="120">
|
||||
|
||||
<!-- Date -->
|
||||
<input type="date" name="naissance">
|
||||
|
||||
<!-- Case à cocher -->
|
||||
<input type="checkbox" name="newsletter" id="news">
|
||||
<label for="news">S'inscrire à la newsletter</label>
|
||||
|
||||
<!-- Bouton radio -->
|
||||
<input type="radio" name="genre" value="homme" id="h">
|
||||
<label for="h">Homme</label>
|
||||
<input type="radio" name="genre" value="femme" id="f">
|
||||
<label for="f">Femme</label>
|
||||
|
||||
<!-- Zone de texte multiligne -->
|
||||
<textarea name="message" rows="5" cols="30"></textarea>
|
||||
|
||||
<!-- Liste déroulante -->
|
||||
<select name="pays">
|
||||
<option value="fr">France</option>
|
||||
<option value="be">Belgique</option>
|
||||
<option value="ch">Suisse</option>
|
||||
</select>
|
||||
```
|
||||
|
||||
### Les labels
|
||||
|
||||
Les `<label>` améliorent l'accessibilité et l'ergonomie :
|
||||
|
||||
```html
|
||||
<label for="prenom">Prénom :</label>
|
||||
<input type="text" id="prenom" name="prenom">
|
||||
```
|
||||
|
||||
L'attribut `for` du label doit correspondre à l'`id` du champ.
|
||||
|
||||
### Attributs utiles des inputs
|
||||
|
||||
| Attribut | Rôle |
|
||||
|----------|------|
|
||||
| `required` | Champ obligatoire |
|
||||
| `placeholder` | Texte d'indication (grisé) |
|
||||
| `value` | Valeur par défaut |
|
||||
| `disabled` | Champ désactivé |
|
||||
| `readonly` | Champ en lecture seule |
|
||||
| `maxlength` | Nombre max de caractères |
|
||||
|
||||
---------
|
||||
|
||||
## Les commentaires
|
||||
|
||||
Les commentaires ne sont pas affichés par le navigateur :
|
||||
|
||||
```html
|
||||
<!-- Ceci est un commentaire -->
|
||||
|
||||
<!--
|
||||
Commentaire
|
||||
sur plusieurs
|
||||
lignes
|
||||
-->
|
||||
```
|
||||
|
||||
> **Utilité** : Documenter le code, désactiver temporairement du code, organiser les sections.
|
||||
|
||||
---------
|
||||
|
||||
## Les caractères spéciaux
|
||||
|
||||
Certains caractères doivent être encodés en HTML :
|
||||
|
||||
| Caractère | Code HTML | Nom |
|
||||
|-----------|-----------|-----|
|
||||
| `<` | `<` | Less than |
|
||||
| `>` | `>` | Greater than |
|
||||
| `&` | `&` | Ampersand |
|
||||
| `"` | `"` | Quote |
|
||||
| ` ` (espace insécable) | ` ` | Non-breaking space |
|
||||
| `©` | `©` | Copyright |
|
||||
| `€` | `€` | Euro |
|
||||
|
||||
---------
|
||||
|
||||
## Bonnes pratiques
|
||||
|
||||
1. **Toujours indenter** le code pour une meilleure lisibilité
|
||||
2. **Utiliser des noms de fichiers** en minuscules, sans accents ni espaces
|
||||
3. **Valider son code** avec le validateur W3C : https://validator.w3.org/
|
||||
4. **Utiliser les balises sémantiques** plutôt que des `<div>` partout
|
||||
5. **Toujours mettre un `alt`** sur les images
|
||||
6. **Séparer structure (HTML) et présentation (CSS)**
|
||||
|
||||
---------
|
||||
|
||||
## Exercices
|
||||
|
||||
### Exercice 1 : Structure de base
|
||||
|
||||
Créez une page HTML5 valide contenant :
|
||||
- Un titre de page "Ma première page"
|
||||
- Un titre principal `<h1>` "Bienvenue"
|
||||
- Un paragraphe de présentation
|
||||
- Un lien vers Google
|
||||
|
||||
### Exercice 2 : Les listes
|
||||
|
||||
Créez une page présentant :
|
||||
- Une liste non ordonnée de vos 5 films préférés
|
||||
- Une liste ordonnée des étapes pour faire des pâtes
|
||||
|
||||
### Exercice 3 : Images et liens
|
||||
|
||||
Créez une page contenant :
|
||||
- Une image de votre choix avec un texte alternatif approprié
|
||||
- Un lien vers Wikipédia qui s'ouvre dans un nouvel onglet
|
||||
- L'image doit être cliquable et mener vers la source de l'image
|
||||
|
||||
### Exercice 4 : Tableau
|
||||
|
||||
Créez un tableau HTML présentant les informations suivantes :
|
||||
|
||||
| Matière | Coefficient | Moyenne |
|
||||
|---------|-------------|---------|
|
||||
| Maths | 4 | 14 |
|
||||
| NSI | 4 | 16 |
|
||||
| Français | 3 | 12 |
|
||||
|
||||
### Exercice 5 : Formulaire
|
||||
|
||||
Créez un formulaire d'inscription contenant :
|
||||
- Un champ pour le nom (obligatoire)
|
||||
- Un champ pour l'email (obligatoire)
|
||||
- Un champ pour le mot de passe
|
||||
- Une case à cocher pour accepter les CGU
|
||||
- Un bouton d'envoi
|
||||
|
||||
### Exercice 6 : Page complète
|
||||
|
||||
Créez une page web complète sur un sujet de votre choix avec :
|
||||
- Une structure sémantique (header, nav, main, footer)
|
||||
- Un menu de navigation avec au moins 3 liens
|
||||
- Un article avec titre, paragraphes et une image
|
||||
- Un tableau récapitulatif
|
||||
- Un pied de page avec copyright
|
||||
|
||||
> **[Voir la correction](./CORRECTION.md)**
|
||||
|
||||
---------
|
||||
|
||||
## Ressources
|
||||
|
||||
- [MDN - HTML](https://developer.mozilla.org/fr/docs/Web/HTML) : Documentation complète
|
||||
- [W3Schools - HTML](https://www.w3schools.com/html/) : Tutoriels et exemples
|
||||
- [Validateur W3C](https://validator.w3.org/) : Vérifier la validité du code
|
||||
|
||||
---------
|
||||
|
||||
Auteur : Florian Mathieu
|
||||
|
||||
Licence CC BY NC
|
||||
|
||||
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a> <br />Ce cours est mis à disposition selon les termes de la <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International</a>.
|
||||
Reference in New Issue
Block a user