🚀 Pas à Pas : Créer mon premier site Web
Consigne générale : Vous allez réaliser un site de 2 pages sur le thème de votre choix (passion, sport, technologie, etc.). Vos fichiers doivent être parfaitement organisés pour que le site fonctionne.
1 Préparation du dossier
Avant de coder, il faut organiser votre espace de travail :
- Créez un dossier nommé "Projet_Web_VotreNom".
- À l'intérieur, créez trois fichiers textes et renommez-les exactement ainsi :
index.html (Page d'accueil)page2.html (Deuxième page)style.css (Le design)
- Cherchez 2 images sur Internet, enregistrez-les dans ce même dossier.
2 Structure et Contenu (HTML)
Ouvrez index.html avec votre éditeur de texte. Copiez la structure de base et complétez-la :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mon Super Site</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Bienvenue sur mon site !</h1>
<!-- Ajoutez ici vos paragraphes, images et listes -->
</body>
</html>
À faire sur vos pages :
- Insérer un titre principal
<h1> et des sous-titres <h2>.
- Rédiger un paragraphe de présentation avec
<p>.
- Créer une liste à puces
<ul> contenant au moins 3 éléments <li>.
- Afficher une image avec la balise
<img src="nom_image.jpg">.
3 Navigation (Liens)
Pour que l'on puisse naviguer sur votre site, ajoutez un lien vers l'autre page :
<a href="page2.html">Consulter la page 2</a>
Faites de même sur page2.html pour revenir vers index.html.
4 Mise en forme (CSS)
Ouvrez le fichier style.css. C'est ici que vous définissez l'apparence. Essayez ces commandes :
body {
background-color: lightblue; /* Couleur de fond */
font-family: sans-serif; /* Police */
}
h1 {
color: darkblue; /* Couleur du titre */
text-align: center; /* Centrer le titre */
}
img {
width: 300px; /* Redimensionner les images */
border-radius: 15px; /* Arrondir les coins */
}
5 Vérification finale
- Est-ce que mes images s'affichent ?
- Est-ce que les liens permettent de passer d'une page à l'autre ?
- Est-ce que mes couleurs et mes titres sont bien appliqués via le CSS ?
- Ai-je bien enregistré tous mes fichiers avant d'ouvrir index.html dans le navigateur ?