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

Créer sa première page web

Apprends les bases du HTML et CSS en créant ta propre page de présentation personnelle. Un projet idéal pour découvrir le développement web !

2 heures
Débutant
Thème : Le Web

Objectifs pédagogiques

  • Comprendre la structure d'une page HTML (doctype, head, body)
  • Utiliser les balises HTML essentielles (titres, paragraphes, images, liens)
  • Styliser une page avec CSS (couleurs, polices, marges)
  • Créer une mise en page simple et esthétique
  • Tester et valider sa page dans un navigateur

Prérequis

  • Un ordinateur avec un navigateur web (Chrome, Firefox, Edge...)
  • Un éditeur de texte (Notepad++, VS Code, ou même le Bloc-notes)
  • Aucune connaissance préalable en programmation requise !

Les étapes du projet

1

Créer le fichier HTML

Commence par créer un nouveau fichier texte et enregistre-le avec l'extension .html. Par exemple : ma-page.html

index.html
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma Page de Présentation</title>
</head>
<body>
    <!-- Le contenu de ta page ira ici -->
</body>
</html>

Astuce : Le <!DOCTYPE html> indique au navigateur qu'il s'agit d'une page HTML5. Le <head> contient les informations sur la page, le <body> contient ce qui sera affiché.

2

Ajouter le contenu de base

Maintenant, ajoute un titre, une photo et un paragraphe de présentation dans le <body>.

Contenu du body
<body>
    <header>
        <h1>Bienvenue sur ma page !</h1>
        <p>Je suis élève en Seconde au lycée.</p>
    </header>

    <main>
        <section>
            <h2>À propos de moi</h2>
            <img src="photo.jpg" alt="Ma photo" width="200">
            <p>
                Je m'appelle [Ton prénom] et je suis passionné(e) par
                [tes centres d'intérêt]. J'aime [activité 1],
                [activité 2] et [activité 3].
            </p>
        </section>

        <section>
            <h2>Mes matières préférées</h2>
            <ul>
                <li>Mathématiques</li>
                <li>SNT</li>
                <li>Anglais</li>
            </ul>
        </section>

        <section>
            <h2>Me contacter</h2>
            <p>Email : <a href="mailto:ton@email.com">ton@email.com</a></p>
        </section>
    </main>

    <footer>
        <p>Page créée en SNT - 2024</p>
    </footer>
</body>
Balises utilisées :
  • <h1> à <h6> : Titres (h1 = le plus important)
  • <p> : Paragraphe de texte
  • <img> : Image (avec src pour le chemin et alt pour la description)
  • <ul> et <li> : Liste à puces
  • <a> : Lien hypertexte
3

Ajouter du style avec CSS

Créons un fichier CSS pour rendre notre page plus jolie. Crée un fichier style.cssdans le même dossier que ton fichier HTML.

style.css
/* Style général de la page */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

/* En-tête */
header {
    background-color: #3498db;
    color: white;
    text-align: center;
    padding: 40px 20px;
}

header h1 {
    margin: 0;
    font-size: 2.5em;
}

/* Contenu principal */
main {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

section {
    background-color: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

h2 {
    color: #3498db;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}

/* Image */
img {
    border-radius: 50%;
    border: 4px solid #3498db;
    display: block;
    margin: 20px auto;
}

/* Liste */
ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    padding: 10px;
    background-color: #ecf0f1;
    margin-bottom: 5px;
    border-radius: 5px;
}

/* Liens */
a {
    color: #e74c3c;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Pied de page */
footer {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 40px;
}

N'oublie pas de lier le fichier CSS à ta page HTML. Ajoute cette ligne dans le <head> :

<link rel="stylesheet" href="style.css">
4

Tester ta page

Double-clique sur ton fichier HTML pour l'ouvrir dans ton navigateur. Tu devrais voir ta page avec le style appliqué !

Vérifier :
  • - Les textes s'affichent correctement
  • - Les couleurs sont bien appliquées
  • - L'image apparaît (si tu en as ajouté une)
  • - Les liens fonctionnent
Problèmes courants :
  • - CSS non appliqué ? Vérifie le chemin du fichier
  • - Image absente ? Vérifie le nom du fichier
  • - Accents bizarres ? Ajoute charset UTF-8
5

Personnaliser et améliorer

Maintenant, c'est à toi de personnaliser ta page ! Voici quelques idées :

  • Change les couleurs (utilise des codes hexadécimaux comme #ff6b6b)
  • Ajoute plus de sections (hobbies, projets, musique préférée...)
  • Essaie différentes polices (Google Fonts)
  • Ajoute des effets au survol des éléments (hover)

Code complet à télécharger

Voici le code complet du projet. Tu peux le copier comme base de départ :

index.html (complet)
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma Page de Présentation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Bienvenue sur ma page !</h1>
        <p>Je suis élève en Seconde au lycée.</p>
    </header>

    <main>
        <section>
            <h2>À propos de moi</h2>
            <img src="photo.jpg" alt="Ma photo" width="200">
            <p>
                Je m'appelle [Ton prénom] et je suis passionné(e) par
                le numérique. J'aime les jeux vidéo, la musique
                et la programmation.
            </p>
        </section>

        <section>
            <h2>Mes matières préférées</h2>
            <ul>
                <li>Mathématiques</li>
                <li>SNT</li>
                <li>Anglais</li>
            </ul>
        </section>

        <section>
            <h2>Me contacter</h2>
            <p>Email : <a href="mailto:ton@email.com">ton@email.com</a></p>
        </section>
    </main>

    <footer>
        <p>Page créée en SNT - 2024</p>
    </footer>
</body>
</html>

Critères d'évaluation

CritèrePoints
Structure HTML correcte (doctype, head, body)3 pts
Utilisation des balises sémantiques (header, main, section, footer)3 pts
Présence d'au moins 3 sections de contenu3 pts
Fichier CSS externe correctement lié2 pts
Style CSS cohérent et esthétique4 pts
Personnalisation (au-delà du modèle de base)3 pts
Page fonctionnelle dans le navigateur2 pts
Total20 pts

Pour aller plus loin

Variante 1 : Portfolio

Transforme ta page en portfolio avec une galerie de tes réalisations (dessins, photos, projets...).

Variante 2 : Page responsive

Utilise les media queries CSS pour adapter ta page aux écrans mobiles.

Variante 3 : Animations

Ajoute des animations CSS (transitions, keyframes) pour rendre ta page plus dynamique.

Variante 4 : Mode sombre

Crée deux thèmes (clair et sombre) avec un bouton pour basculer entre les deux.

Tous les projetsProjet suivant : Site web complet
Pixel