Comment créer un site web simple avec seulement un éditeur de texte

Apprenez à créer votre premier site web en famille avec les outils de base de votre ordinateur.

Préparer l'espace de travail. Ouvrez l'éditeur de texte de votre ordinateur (Bloc-notes sur Windows, TextEdit sur Mac). Créez un nouveau dossier sur votre bureau que vous appellerez 'mon-site-web'. C'est là que vous allez sauvegarder tous vos fichiers. Assurez-vous que l'éditeur de texte est configuré en mode 'texte brut' et non pas en mode de traitement de texte enrichi.
Écrire la structure de base. Commencez par taper cette structure dans votre éditeur : <!DOCTYPE html> suivi de <html>, puis <head> et </head>, ensuite <body> et </body>, et enfin </html>. Chaque balise qui s'ouvre doit se fermer. Entre les balises <head>, ajoutez <title>Mon premier site</title>. C'est le titre qui apparaîtra dans l'onglet du navigateur. Entre les balises <body>, vous écrirez le contenu visible de votre page.
Ajouter du contenu. Dans la section <body>, commencez par un titre principal avec <h1>Bienvenue sur mon site</h1>. Ajoutez ensuite un paragraphe avec <p>Voici mon premier site web créé en famille !</p>. Vous pouvez ajouter d'autres titres avec <h2> ou <h3>, faire des listes avec <ul> et <li>, ou créer des liens avec <a href='adresse'>texte du lien</a>. N'hésitez pas à expérimenter avec ces éléments de base.
Sauvegarder et tester. Sauvegardez votre fichier avec l'extension .html, par exemple 'index.html', dans le dossier que vous avez créé. Attention à bien choisir 'Tous les fichiers' dans le menu déroulant du type de fichier. Double-cliquez ensuite sur votre fichier pour l'ouvrir dans votre navigateur web. Vous verrez votre site prendre vie ! Pour modifier votre site, retournez dans l'éditeur de texte, faites vos changements, sauvegardez, puis actualisez la page dans votre navigateur.
Personnaliser avec du style simple. Pour rendre votre site plus joli, ajoutez une section <style> dans la partie <head> de votre document. Entre les balises <style> et </style>, vous pouvez écrire des règles comme 'body { font-family: Arial; background-color: lightblue; }' pour changer la police et la couleur de fond. Ou 'h1 { color: red; text-align: center; }' pour centrer et colorer vos titres. Expérimentez avec différentes couleurs et tailles.