334 lines
8.9 KiB
Markdown
334 lines
8.9 KiB
Markdown
# 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>.
|