Créer sa première page web
Projet d'initiation à la création de pages web en HTML et CSS. Les élèves conçoivent une page personnelle simple (présentation, image, lien) et la mettent en forme avec des styles de base.
Tu as sûrement déjà visité des sites web, mais sais-tu comment ils sont fabriqués ? Derrière chaque page se cache un code que tu peux toi-même écrire. Dans ce projet, tu vas créer ta propre page web, comme si tu construisais une petite vitrine sur toi ou sur un sujet qui te passionne. Tu découvriras comment structurer un texte, ajouter une image, créer un lien et donner un style à ta page, exactement comme le font les développeurs web.
Objectifs pédagogiques
- Comprendre la structure d'une page HTML (doctype, head, body, balises ouvrantes/fermantes).
- Utiliser les balises de base (h1, p, img, a) pour organiser du contenu textuel et visuel.
- Appliquer des propriétés CSS simples (couleur, taille, police, alignement) pour mettre en forme la page.
- Créer un lien hypertexte fonctionnel vers une autre page ou un site externe.
Matériel nécessaire
- Un ordinateur avec un éditeur de texte (Bloc-Notes, Notepad++, Visual Studio Code).
- Un navigateur web récent (Chrome, Firefox, Edge).
- Un dossier de travail dédié sur le bureau ou dans un espace partagé.
- Une image libre de droits (format .jpg ou .png) à intégrer dans la page.
- Un accès internet pour consulter la documentation ou des exemples.
Étapes du projet
Découverte du code HTML
Commence par ouvrir ton éditeur de texte et crée un nouveau fichier nommé index.html. Saisis la structure minimale d'une page HTML : la balise <!DOCTYPE html> pour indiquer qu'il s'agit de HTML5, puis les balises <html>, <head> et <body>. Dans <head>, ajoute <meta charset="UTF-8"> pour que les accents s'affichent correctement, et un titre avec <title>Ma première page</title>. Enregistre le fichier et ouvre-le dans le navigateur : tu verras une page blanche avec le titre dans l'onglet. Cette étape est cruciale car elle pose les fondations de toute page web.
Ajout de contenu textuel
Dans la balise <body>, écris un titre principal avec <h1>Bonjour et bienvenue !</h1> et un paragraphe de présentation avec <p>Je m'appelle [ton prénom] et j'apprends à coder.</p>. Utilise <h2> pour un sous-titre, par exemple <h2>Mes hobbies</h2>, puis un autre paragraphe pour les décrire. Chaque balise doit être correctement fermée (ex : </p>). Pourquoi ces balises ? Elles donnent une hiérarchie au texte : les titres sont plus gros et les paragraphes sont séparés, ce qui rend la page lisible. Teste dans le navigateur pour voir le rendu.
Insertion d'une image
Pour ajouter une image, utilise la balise <img> avec l'attribut src qui indique le chemin du fichier image. Par exemple : <img src="photo.jpg" alt="Description de l'image">. Place l'image dans le même dossier que index.html. L'attribut alt est obligatoire : il décrit l'image pour les personnes malvoyantes ou si l'image ne charge pas. Tu peux aussi régler la largeur avec width="300" (en pixels). Après avoir enregistré, actualise le navigateur : l'image doit apparaître. Si elle ne s'affiche pas, vérifie le nom du fichier et son emplacement.
Création d'un lien hypertexte
Pour faire un lien vers un autre site, utilise la balise <a> avec l'attribut href. Exemple : <a href="https://www.example.com">Visite ce site</a>. Tu peux aussi créer un lien vers une autre page de ton dossier, par exemple <a href="page2.html">Ma deuxième page</a>. Place le lien dans un paragraphe ou après une phrase. Pourquoi des liens ? Ils relient les pages entre elles et permettent de naviguer sur le web. Teste le lien en cliquant dessus dans le navigateur : il doit ouvrir la page cible.
Mise en forme avec CSS
Crée un nouveau fichier nommé style.css dans le même dossier. Dans index.html, ajoute <link rel="stylesheet" href="style.css"> dans la balise <head> pour lier le fichier CSS. Dans style.css, écris des règles simples : body { background-color: lightblue; font-family: Arial; } pour changer le fond et la police. Pour le titre, h1 { color: navy; text-align: center; }. Pour l'image, img { border: 2px solid black; }. Enregistre les deux fichiers et actualise le navigateur : la page change d'apparence. Le CSS permet de personnaliser l'aspect visuel sans toucher au contenu HTML.
Finalisation et test
Vérifie que tous les éléments fonctionnent : le texte s'affiche correctement, l'image est visible, le lien s'ouvre, et les styles CSS s'appliquent. Ouvre la page dans un autre navigateur pour t'assurer de la compatibilité. Corrige les éventuelles erreurs (balises mal fermées, chemins d'image incorrects). Enfin, ajoute une petite touche personnelle : change la couleur de fond, la police ou ajoute un deuxième lien. Cette étape de test est essentielle pour livrer une page web fonctionnelle et soignée.
⚠️ Points de vigilance
- ⚠️Vérifier que le fichier HTML est enregistré avec l'extension .html et non .txt.
- ⚠️S'assurer que les balises sont bien fermées dans le bon ordre (ex : <p><strong>texte</strong></p>).
- ⚠️Utiliser des noms de fichiers sans espaces ni accents (ex : photo.jpg, pas photo de vacances.jpg).
- ⚠️Placer l'image et le fichier CSS dans le même dossier que le HTML pour éviter les erreurs de chemin.
- ⚠️Tester la page dans le navigateur après chaque modification pour repérer rapidement les erreurs.
❌ Erreurs fréquentes à éviter
❌ Oubli de fermer une balise (ex : <p> sans </p>).
✅ Solution : Toujours écrire la balise fermante en même temps que la balise ouvrante, ou utiliser un éditeur qui colore les balises. Vérifier que chaque balise ouvrante a sa correspondante.
❌ L'image ne s'affiche pas (icône cassée).
✅ Solution : Vérifier le nom du fichier image (respect de la casse, extension correcte) et son emplacement (même dossier). Utiliser un chemin relatif simple comme src="photo.jpg".
❌ Le lien ne fonctionne pas (ne s'ouvre pas).
✅ Solution : Contrôler l'URL dans l'attribut href : doit commencer par http:// ou https:// pour un site externe. Pour un lien interne, vérifier que le fichier cible existe et que le chemin est correct.
❌ Les styles CSS ne s'appliquent pas.
✅ Solution : Vérifier que le fichier CSS est bien lié avec <link> dans le <head> et que le chemin est correct (relatif). S'assurer que les sélecteurs CSS (ex : h1) correspondent exactement aux balises HTML.
❌ Les accents ou caractères spéciaux s'affichent mal (ex : é devient é).
✅ Solution : Ajouter <meta charset="UTF-8"> dans le <head> du HTML. Enregistrer le fichier en UTF-8 (option dans l'éditeur de texte). Cela garantit l'affichage correct des caractères.
💡 Conseils du prof
- 💡Encourage les élèves à utiliser un éditeur de code avec coloration syntaxique (Visual Studio Code) pour repérer plus facilement les erreurs.
- 💡Fais tester la page dans plusieurs navigateurs pour montrer que le rendu peut légèrement varier.
- 💡Propose un modèle de page simple à compléter pour les élèves en difficulté, avec des commentaires dans le code.
- 💡Insiste sur l'importance de l'indentation (décalage des lignes) pour rendre le code lisible et structuré.
- 💡Organise une courte présentation orale où chaque élève montre sa page et explique un choix de style.
🚀 Pour aller plus loin
- 🚀Ajouter une deuxième page HTML et créer un menu de navigation entre les pages avec des liens.
- 🚀Utiliser des propriétés CSS avancées comme les marges (margin), les bordures arrondies (border-radius) ou les ombres (box-shadow).
- 🚀Intégrer une vidéo YouTube avec la balise <iframe> ou un fond d'écran avec une image en CSS.
