Un site pour ton club
Un club du lycée veut un site : qui nous sommes, quand on se voit, comment s'inscrire.
Tu connais déjà les trois outils : le HTML pour la structure, le CSS pour l'allure, le JavaScript pour que la page réagisse.
Ici, tu les assembles pour construire un vrai petit site. Mais d'abord, tu fais un plan.
Mots-clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| Plan du site | Un dessin des pages et de ce qu'elles contiennent. | Présentation, horaires, inscription |
| Maquette | Un dessin rapide de la page, avant le code. | Un croquis sur papier |
| Validation | Vérifier ce que le visiteur a tapé, avant de l'accepter. | Un âge entre 14 et 20 ans |
| Message d'erreur | Une phrase qui dit ce qu'il faut corriger. | Le prénom est trop court. |
| Accessibilité | Faire un site utilisable par tout le monde. | Un texte à la place d'une image |
| Liste de contrôle | Une liste de choses à vérifier une par une. | Le menu mène-t-il aux bonnes sections ? |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
À toi : lire le plan
À toi de jouer
À toi : lire le plan
3 questionsTes réponses sont corrigées ici et ne sont pas conservées. Un compte garde tes résultats.
Exemple travaillé : le plan du projet
| Étape | Ce que tu fais | Tu as fini quand | Où |
|---|---|---|---|
| 1 | La page en HTML et CSS | Le menu mène aux trois sections | Tâche web |
| 2 | Les règles du formulaire en Python | Les tests cachés sont verts | Tâche Python |
| 3 | Les mêmes règles en JavaScript | Un message apparaît selon les valeurs | Rendu écrit |
| 4 | La liste de contrôle | Chaque ligne est cochée ou expliquée | Rendu écrit |
| 5 | Le rapport | Quelqu'un d'autre le comprend | Rendu écrit |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Pourquoi écrire les règles en Python ?
Un formulaire doit refuser un âge de 200 ans ou une adresse sans @. C'est la validation, vue dans « Les formulaires ».
Une règle de validation se teste mieux dans une fonction que dans une page. En Python, tes tests cachés la vérifient tout de suite.
Quand elle marche, tu la recopies en JavaScript. Les mots changent, l'idée reste la même.
À toi : un formulaire qui vérifie
<form id="formulaire">
<label>Prénom <input id="prenom"></label>
<label>Âge <input id="age" type="number"></label>
<button type="submit">Je m'inscris</button>
</form>
<p id="message"></p>La vérification dans la page ne suffit pas
Attention
Un visiteur peut contourner ton JavaScript. Il aide le visiteur honnête, mais il ne te protège pas. Un vrai site vérifie aussi chez lui, sur le serveur : voir « Un site, des dangers ».