🧩 Objectif
Créer une fiche de “personnage” comme dans un jeu vidéo, avec :
- une image
- un nom
- des stats (force / vitesse / intelligence / humour)
- une barre de vie stylisée
- une mise en forme simple en CSS
Tu apprends à faire :
- <html>, <head>, <body>
- <h1>, <p>, <img>
- <div> et classes
- les couleurs, bordures, marges
- une première barre de vie en CSS
Étape 1 – Créer le dossier du projet
👉 Créer un dossier sur ton ordinateur et appelle-le :
carte-personnage
👉 Télécharge l’application open-source Sublim text
👉 Ouvre l’application et crée deux fichiers que tu enregistres dans ton dossier carte-personnage
- index.html
- style.css
Bien sûr Virginie, je passe en “tu” pour toutes les explications destinées à Mano 😊
Voici donc la version en tutoiement, claire, simple et parfaite pour lui :
🎯 À quoi sert le fichier index.html ?
Le fichier index.html, c’est la page principale de ton site web.
C’est toujours la première page que ton navigateur affiche quand tu ouvres ton site.
Imagine que ton site soit une maison :
➡️ index.html, c’est la porte d’entrée.
Tu peux avoir plein de pièces (d’autres pages), mais tu entres toujours par la même porte : l’index.
🧠 Pourquoi il s’appelle index ?
Parce que le navigateur, lui, va automatiquement chercher un fichier qui s’appelle index.html.
C’est un peu comme si ton navigateur disait :
“Ok, j’ai le dossier du site… où est la page d’accueil ? Ah ! Elle s’appelle index.html. Je l’affiche.”
Si ton fichier s’appelait autre chose, par exemple accueil.html, ton navigateur ne saurait pas où commencer, à moins que tu lui donnes un chemin exact.
🔍 Exemple concret
Si ton dossier contient :
mon-site/
index.html
stats.html
inventaire.htmlQuand tu l’ouvres dans le navigateur, il affichera directement index.html, même si tu ne lui dis rien.
C’est automatique.
💡 Pourquoi on commence toujours par l’index ?
- Parce que c’est la page d’accueil
- Parce que c’est le point de départ de tout ton site
- Parce que c’est la page la plus facile à créer
- Et parce que tous les sites du monde en ont un
Même les grands sites comme Google, YouTube ou Fortnite ont un fichier d’index (parfois généré automatiquement, mais l’idée est la même).
🧑🏫 À retenir
index.html = la première page de ton site.
C’est l’entrée. Le navigateur l’affiche automatiquement.
Étape 2 – Coller ce code dans index.html
Copier et colle ce texte dans index.htlm.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Carte de Personnage - Mano</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<img src="https://picsum.photos/300/200" alt="Personnage" class="avatar">
<h1>Mano le Techno-Mage</h1>
<p class="description">Un jeune héros passionné de technologie, prêt à créer son tout premier site web !</p>
<h2>Statistiques</h2>
<ul>
<li><strong>Force :</strong> 65</li>
<li><strong>Vitesse :</strong> 72</li>
<li><strong>Intelligence :</strong> 95</li>
<li><strong>Humour :</strong> 88</li>
</ul>
<h2>Points de Vie</h2>
<div class="hp-bar">
<div class="hp-value"></div>
</div>
</div>
</body>
</html>Étape 3 – Coller ce code dans style.css
Copier et colle ce texte dans style.css
body {
font-family: Arial, sans-serif;
background: #f0f0f5;
display: flex;
justify-content: center;
padding: 30px;
}
.card {
background: white;
width: 350px;
padding: 20px;
border-radius: 15px;
box-shadow: 0 0 15px rgba(0,0,0,0.15);
}
.avatar {
width: 100%;
border-radius: 10px;
}
h1 {
text-align: center;
margin-top: 15px;
}
.description {
text-align: center;
font-style: italic;
color: #666;
}
ul {
list-style: none;
padding: 0;
}
li {
margin: 5px 0;
}
/* Barre de vie */
.hp-bar {
width: 100%;
height: 20px;
background: #ddd;
border-radius: 10px;
overflow: hidden;
margin-top: 10px;
}
.hp-value {
width: 80%; /* Valeur de HP (80%) */
height: 100%;
background: linear-gradient(90deg, #4caf50, #66ff99);
}🎉 Résultat
En ouvrant index.html, tu verras une carte stylée avec :
- une image aléatoire
- son nom
- ses stats
- une barre de vie verte remplie
🔧 Atelier en 5 mini défis
Voici les petits défis ludiques que tu vas lui donner pour apprendre naturellement :
Défi 1 : Changer l’image du personnage
→ On remplace la ligne :
<img src="https://picsum.photos/300/200">Par :
- une image choisie sur internet
- ou une image téléchargée dans son dossier
Tu apprends le chemin d’accès !
Défi 2 : Changer le nom du personnage
Modifier le <h1> en :
« Mano le Ninja du Code »
ou le texte que tu veux.
Défi 3 : Modifier les stats
Changer les valeurs dans <li>
→ Tu apprends où est le contenu textuel.
Défi 4 : Modifier la couleur de la carte
Dans style.css, changer la couleur du fond :
background: white;→ Choisir un bleu, violet, noir…
Tu apprends la manipulation des couleurs.
Défi 5 : Ajuster la barre de vie
Dans .hp-value, modifier :
width: 80%;→ Tu apprends comment le CSS contrôle la mise en forme.
