2026-01-15 18:32:27 +01:00
# 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
2026-08-11 23:29:03 +02:00
Licence CC BY-SA
2026-01-15 18:32:27 +01:00
2026-08-11 23:29:03 +02:00
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-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-sa/4.0/">Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 4.0 International</a>.
