Code accompagné : créer une page web simple
Suivez des instructions étape par étape pour créer une page amusante
Code accompagné : créer une page web simple est une leçon HTML for Kids gratuite sur CoddyKit. Ceci est la leçon 1 sur 2. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML for Kids, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML for Kids comprend 2 leçons au total.
Créer votre première page web
Codons ensemble : créer une page web simple
Bienvenue dans votre premier projet de programmation ! Dans cette leçon, nous allons créer pas à pas une page web simple. Suivez les étapes pour voir comment les éléments du HTML, du CSS et du design de base s’assemblent.
Objectif : Créer une page de profil personnelle.
Configurer votre fichier
Étape 1 : configurer votre fichier
Commençons par créer un dossier pour votre projet et y ajouter un fichier HTML :
- Créez un nouveau dossier sur votre ordinateur appelé MyWebPage.
- Dans ce dossier, créez un fichier nommé
index.html. - Ouvrez le fichier dans votre éditeur de code (par exemple, Visual Studio Code).
Conseil : Le nom de fichier index.html est couramment utilisé pour la page principale d’un site web.
Ajouter la structure de base
Étape 2 : ajouter la structure de base
Ajoutez maintenant la structure HTML de base à votre fichier. Elle comprend les balises <!DOCTYPE html>, <html>, <head> et <body>.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>My Profile Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is my personal profile page.</p>
</body>
</html>
Ajouter une section de profil
Étape 3 : ajouter une section de profil
Ajoutons une section pour afficher votre nom et une brève description.
Exemple :
<body>
<h1>Welcome to My Page</h1>
<p>This is my personal profile page.</p>
<!-- Profile Section -->
<h2>About Me</h2>
<p>Hi, I’m [Your Name]. I’m learning web development, and this is my first project!</p>
</body>
Ajouter une image
Étape 4 : ajouter une image
Ajoutons ensuite une photo de profil à l’aide de la balise <img>. Enregistrez une image dans le dossier du projet et liez-la à votre fichier HTML.
Exemple :
<!-- Profile Picture -->
<img src="profile.jpg" alt="My Profile Picture" width="200" />
Ajouter une liste de loisirs
Étape 5 : ajouter une liste de loisirs
Créez une liste non ordonnée de vos loisirs à l’aide des balises <ul> et <li>.
Exemple :
<!-- Hobbies Section -->
<h2>My Hobbies</h2>
<ul>
<li>Reading books</li>
<li>Playing video games</li>
<li>Coding projects</li>
</ul>
Ajouter un lien
Étape 6 : ajouter un lien
Ajoutez un lien vers votre site web préféré à l’aide de la balise <a>.
Exemple :
<!-- Favorite Website -->
<h2>My Favorite Website</h2>
<p>Check out my favorite website: <a href="https://example.com" target="_blank">Example</a>.</p>
Ajouter des styles intégrés
Étape 7 : ajouter des styles intégrés
Ajoutons quelques styles de base directement dans votre HTML à l’aide de l’attribut style.
Exemple :
<h1 style="color: blue; text-align: center;">Welcome to My Page</h1>
<p style="font-size: 16px; color: gray;">This is my personal profile page.</p>
Récapitulatif du projet de page web
Excellent travail !
Félicitations ! Vous avez créé votre première page web étape par étape. Dans ce projet, vous avez appris à structurer votre HTML, à ajouter du contenu et à le styliser avec des styles intégrés. Continuez à expérimenter et à ajouter de nouvelles sections à votre page !
Conseil : Essayez d’héberger votre page sur GitHub Pages pour la partager avec vos amis !
Questions Fréquemment Posées
La leçon « Code accompagné : créer une page web simple » est-elle gratuite ?
Oui — le texte complet de « Code accompagné : créer une page web simple » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML for Kids, passe à CoddyKit PRO. Le cours HTML for Kids comprend 2 leçons au total.
Qu'est-ce que j'apprendrai dans « Code accompagné : créer une page web simple » ?
Suivez des instructions étape par étape pour créer une page amusante Tu pratiques HTML for Kids avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML for Kids ?
Aucune expérience préalable n'est requise. HTML for Kids sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 2.
Combien de temps prend la leçon « Code accompagné : créer une page web simple » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML for Kids ?
Oui. Chaque leçon HTML for Kids inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Code accompagné : créer une page web simple
- Chasse au trésor HTML