ALLO SNT
ÉLÈVES, PARENTS & PROFS
Connexion
Retour aux projets
Projet SNT - Le Web

Site Web Complet Multi-Pages

Crée un site web professionnel avec plusieurs pages, navigation, images et formulaire de contact. Projet avancé pour maîtriser HTML et CSS.

3-4 heures
Niveau avancé
+200 XP

Objectifs du projet

  • Créer un site multi-pages avec navigation cohérente
  • Maîtriser les structures HTML5 sémantiques
  • Utiliser Flexbox pour la mise en page
  • Créer un formulaire de contact avec validation
  • Intégrer des images de manière responsive

Prérequis

  • Avoir suivi le cours "Bases du HTML"
  • Avoir suivi le cours "Bases du CSS"
  • Un éditeur de code (VS Code recommandé)

Guide pas à pas

1

Structure du projet

30 min

Tâches à réaliser :

  • Créer un dossier pour le projet
  • Créer les fichiers : index.html, about.html, contact.html, style.css
  • Créer un dossier 'images' pour les médias
mon-site/
├── index.html      (page d'accueil)
├── about.html      (page À propos)
├── contact.html    (page Contact)
├── style.css       (styles communs)
└── images/
    ├── logo.png
    └── photo.jpg
2

Page d'accueil (index.html)

45 min

Tâches à réaliser :

  • Structure HTML5 complète
  • Header avec logo et navigation
  • Section héro avec titre et description
  • Footer avec liens
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mon Super Site</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <nav>
      <a href="index.html" class="logo">MonSite</a>
      <ul>
        <li><a href="index.html" class="active">Accueil</a></li>
        <li><a href="about.html">À propos</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section class="hero">
      <h1>Bienvenue sur mon site</h1>
      <p>Un site créé dans le cadre du cours de SNT</p>
      <a href="about.html" class="btn">En savoir plus</a>
    </section>
  </main>

  <footer>
    <p>&copy; 2024 - Projet SNT</p>
  </footer>
</body>
</html>
3

Styles CSS

1h

Tâches à réaliser :

  • Reset CSS et variables de couleurs
  • Styles de navigation responsive
  • Mise en page avec Flexbox
  • Styles pour boutons et liens
/* Variables et reset */
:root {
  --primary: #3b82f6;
  --dark: #1e293b;
  --light: #f8fafc;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.6;
  color: var(--dark);
}

/* Navigation */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: var(--dark);
}

nav .logo {
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 2rem;
}

nav a {
  color: white;
  text-decoration: none;
}

nav a:hover, nav a.active {
  color: var(--primary);
}

/* Hero section */
.hero {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  background: linear-gradient(135deg, var(--dark), #334155);
  color: white;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  background: var(--primary);
  color: white;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 1rem;
}

.btn:hover {
  background: #2563eb;
}

/* Footer */
footer {
  background: var(--dark);
  color: white;
  text-align: center;
  padding: 1rem;
}
4

Page À propos

30 min

Tâches à réaliser :

  • Copier la structure de base
  • Ajouter une section de présentation
  • Intégrer une image
  • Mettre à jour la navigation
<main>
  <section class="about">
    <div class="about-content">
      <h1>À propos</h1>
      <img src="images/photo.jpg" alt="Ma photo" class="profile-img">
      <p>
        Je suis élève en classe de Seconde et ce site est mon projet SNT.
        J'ai appris le HTML et le CSS pour créer ces pages.
      </p>
      <h2>Ce que j'ai appris</h2>
      <ul>
        <li>Structure d'une page HTML</li>
        <li>Mise en forme avec CSS</li>
        <li>Navigation entre pages</li>
        <li>Intégration d'images</li>
      </ul>
    </div>
  </section>
</main>
5

Page Contact avec formulaire

45 min

Tâches à réaliser :

  • Créer un formulaire HTML
  • Ajouter les champs : nom, email, message
  • Styliser le formulaire
  • Ajouter la validation HTML5
<main>
  <section class="contact">
    <h1>Contact</h1>
    <form action="#" method="POST">
      <div class="form-group">
        <label for="name">Nom</label>
        <input type="text" id="name" name="name" required>
      </div>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" id="email" name="email" required>
      </div>
      <div class="form-group">
        <label for="message">Message</label>
        <textarea id="message" name="message" rows="5" required></textarea>
      </div>
      <button type="submit" class="btn">Envoyer</button>
    </form>
  </section>
</main>

/* Styles formulaire dans style.css */
.contact {
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
}

Pour aller plus loin

  • Ajouter des animations CSS (transitions, hover effects)
  • Créer une galerie d'images responsive
  • Rendre le site 100% responsive (mobile-first)
  • Ajouter des liens vers tes réseaux sociaux
Pixel