par Daniel Alouidor
Avec ton ordi (ou ton smartphone), je vais te montrer un outil gratuit, pour poursuivre en beauté cette magnifique aventure, au bout de laquelle tu deviendras un codeur.
Eh oui! Aujourd’hui, on fait un peu de “bricolage”. Pas avec marteau et clous, non. Mais avec ton ordi, un éditeur de code (pas aussi effrayant que ça en a l’air), et… une petite organisation de ton projet. Tu vas voir, c’est comme préparer ta trousse avant de te lancer dans un chef-d’œuvre.
Ce que tu vas apprendre aujourd’hui :
✅ Quel logiciel utiliser pour écrire du code
✅ Comment créer un dossier propre pour ton site
✅ Comment écrire ton premier fichier .html
✅ Et… l’ouvrir dans ton navigateur comme un vrai site web.
Étape 1 : Crée ton espace de travail
Avant de coder, il faut organiser ton coin web. Sur ton bureau (ou dans ton dossier “Documents”), crée un nouveau dossier. Appelle-le par exemple : MonPremierSite. Ce dossier sera ta petite planète web. Tout ce que tu crées (pages, images, style, etc.) ira là-dedans.
Astuce : Ne mets pas d’espace dans les noms de fichiers ou dossiers (utilise plutôt des tirets - ou des underscores _. On les appelle aussi des tirets bas ou soulignés bas).
Étape 2 : Quel outil pour écrire du code ?
Tu pourrais utiliser le Bloc-notes… Mais soyons honnêtes : c’est un peu comme écrire un roman avec un bâton sur le sable. Pas très pratique. Le mieux, c’est d’utiliser un éditeur de code : un logiciel super pratique qui colorie ton code, t’aide à repérer les erreurs, et te rend la vie plus facile.
Je te recommande Visual Studio Code. C’est gratuit et génial. Alors, va sur https://code.visualstudio.com (si tu est sur ton téléphone, va sur vscode.dev dans ton navigateur. Clique sur “Download” (ça télécharge vite). Installe-le (clic-clic-clic, comme n’importe quel jeu). Une fois installé, ouvre-le. Tu verras : pas de panique. Ce n’est pas un vaisseau spatial. Promis.
Tu es sur ton téléphone? C’est parfait. Alors, tu peux télécharger Acode ou Spck Editor (pour Android). Si tu disposes d’un iPhone, cherches plutôt Koder ou Textastic.
Acode est une excellente application pour coder en HTML5 sur un téléphone Android. Elle est légère, puissante, et fonctionne hors ligne.
Pour commencer, installe l’application Acode depuis le Play Store. Tape simplement « Acode – code editor » dans la barre de recherche et choisis celle développée par Foxdebug. Une fois téléchargée, ouvre l’application. Acode fonctionne sans connexion internet, ce qui est idéal pour apprendre à coder en déplacement, directement sur ton téléphone.
Étape 3 : Crée ton premier fichier HTML
Maintenant que tu te trouves dans Visual Studio Code (VS Code pour les intimes), clique sur « File » > « Open Folder », puis choisis ton dossier MonPremierSite. Clique ensuite sur le bouton “Nouveau fichier” (ou fais clic droit > “New File”). Appelle le fichier : index.htm. Tu te demandes assurément, pourquoi index.html ? C’est le nom classique qu’on donne à la page d’accueil d’un site web. C’est un peu comme appeler la première page d’un livre « Chapitre 1 ».
Sur Acode (pour téléphone), après avoir ouvert l’application, crée ton premier fichier HTML. Appuie sur le symbole “+” en bas à droite de l’écran, puis choisis « New File ». Quand on te demande de nommer le fichier, écris index.html, qui est le nom traditionnel d’une page d’accueil sur le web. Clique sur la coche (✓) pour confirmer et commencer à écrire ton code HTML.
Étape 4 : Écris ton tout premier code !
Dans ton fichier index.html, copie ce petit chef-d’œuvre et enregistre le (Ctrl + S ou Cmd + S sur Mac).
<!DOCTYPE html>
<html>
<head>
<title>Bienvenue chez moi</title>
</head>
<body>
<h1>???? Bienvenue sur le site officiel des rossignols capois !</h1>
<p>Attention : ces oiseaux sont super charmeurs... et ultra stylés.</p>
</body>
</html>Étape 5 : Ouvre ta page comme un vrai site
Va dans ton dossier MonPremierSite. Double-clique sur le fichier index.html. BOUM ???? ton navigateur s’ouvre et… tu vois TON SITE WEB ! Et si tu préfères les licornes, les dinosaures, les robots ou les loups-garous, tu peux tout personnaliser. C’est TON site !
Petit défi rigolo (facultatif mais fun) :
Essaye de changer le texte pour en faire ta page perso :
<h1>???? Bienvenue sur le site de Jordan le roi des pâtés kòde !</h1>
<p>Mes passions : coder, dormir, et engloutir des pâtés en slow motion.</p>En résumé :
Tu as créé un espace de travail propre, installé Visual Studio Code (VS Code) ou Acode, créé ton premier fichier HTML, et ouvert ta page web dans ton navigateur. Tu as vu, pas vrai? Comme je te l’avais promis, c’est fun et gratuit!
Dans le prochain article…
On va plonger dans le HTML de base : tu vas apprendre les balises les plus utilisées pour créer des titres, des textes, des images, et même des… listes de patés préférés !
Ciao, Ciao!
Daniel Alouidor
Consulter les autres leçons
Leçon 1 : Bonne nouvelle : je vais t’apprendre à créer ton site web … gratis!
Leçon 2 : Rencontre avec HTML et CSS
Leçon 4 : Les balises HTML les plus cools pour construire ta page web
Leçon 5 : Des listes et des liens – La base d’un vrai mini-site web !