Créer une Simple Page Web avec le Bloc-Notes : Guide Pas à Pas Détaillé
Vous rêvez de créer votre propre page web, mais vous êtes intimidé par les outils complexes et les logiciels coûteux ? La bonne nouvelle, c’est qu’il est tout à fait possible de créer une page web basique en utilisant simplement le Bloc-notes (Notepad sous Windows) ou un éditeur de texte similaire sur votre système d’exploitation. Dans cet article, nous allons vous guider pas à pas à travers le processus, en vous expliquant chaque étape en détail. C’est un excellent point de départ pour comprendre le fonctionnement du HTML et du CSS, les fondations du web.
Pourquoi Utiliser le Bloc-Notes pour Créer une Page Web ?
Avant de plonger dans le vif du sujet, clarifions pourquoi le Bloc-notes, un outil si simple, peut être utilisé pour créer une page web :
- Apprendre les bases : Le Bloc-notes vous oblige à écrire le code HTML (le langage qui structure le contenu web) et le CSS (le langage qui définit l’apparence du contenu) de zéro. Cela vous permet de comprendre les fondamentaux du développement web sans l’aide d’outils visuels qui masquent souvent le fonctionnement interne.
- Simplicité et accessibilité : Le Bloc-notes est installé par défaut sur tous les systèmes Windows. Il n’y a aucun logiciel à télécharger, installer ou à configurer. C’est simple, léger et rapide.
- Compréhension du code : Utiliser le Bloc-notes vous donne un contrôle total sur le code de votre page web. Vous êtes en contact direct avec la syntaxe et la structure du HTML et du CSS, ce qui est essentiel pour tout futur développeur web.
- Gratuit : C’est un outil totalement gratuit. Pas de frais de licence, pas d’abonnement, rien.
Prérequis
Avant de commencer, assurez-vous d’avoir les éléments suivants :
- Un ordinateur : Avec un système d’exploitation Windows (pour le Bloc-notes) ou un autre système avec un éditeur de texte similaire (TextEdit sur macOS, Gedit sur Linux, etc.).
- Un éditeur de texte : Le Bloc-notes sous Windows ou un éditeur de texte comparable.
- Un navigateur web : Google Chrome, Mozilla Firefox, Safari, ou tout autre navigateur.
Étape 1 : Créer le Fichier HTML
Commençons par créer un fichier HTML, le squelette de notre page web :
- Ouvrez le Bloc-notes : Recherchez “Bloc-notes” dans le menu Démarrer de Windows et ouvrez l’application.
- Saisissez le code HTML de base : Dans le Bloc-notes, tapez le code suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ma Première Page Web</title>
</head>
<body>
<h1>Bienvenue sur ma page web !</h1>
<p>Ceci est un paragraphe de texte.</p>
</body>
</html>Explication du code HTML de base :
- <!DOCTYPE html> : Déclare que le document est un document HTML5.
- <html> : La balise racine de tout document HTML.
- <head> : Contient des informations sur le document (métadonnées), comme le titre et l’encodage des caractères.
- <meta charset=”UTF-8″> : Définit l’encodage des caractères utilisé (UTF-8 est un standard pour les caractères internationaux).
- <title> : Définit le titre de la page qui apparaît dans l’onglet du navigateur.
- <body> : Contient le contenu visible de la page (textes, images, etc.).
- <h1> : Définit un titre de niveau 1 (le titre principal de la page).
- <p> : Définit un paragraphe de texte.
- Enregistrez le fichier : Cliquez sur “Fichier” puis “Enregistrer sous…”.
- Choisissez un nom de fichier et une extension : Dans la boîte de dialogue, choisissez un nom de fichier (par exemple, “index”) et ajoutez l’extension “.html” à la fin (par exemple, “index.html”).
- Choisissez le type de fichier : Dans la liste déroulante “Type”, choisissez “Tous les fichiers (*.*)”.
- Sélectionnez un emplacement : Choisissez l’emplacement où vous souhaitez enregistrer le fichier (par exemple, votre Bureau).
- Cliquez sur “Enregistrer”.
Vous venez de créer votre premier fichier HTML. C’est la base de votre page web.
Étape 2 : Visualiser votre Page Web
Maintenant, vous allez voir le résultat de votre travail :
- Ouvrez votre navigateur web : Chrome, Firefox, Safari, etc.
- Ouvrez le fichier HTML : Vous pouvez le faire de plusieurs manières :
- Glisser-déposer : Faites glisser le fichier “index.html” depuis l’endroit où vous l’avez enregistré et déposez-le dans la fenêtre de votre navigateur.
- Menu “Ouvrir” : Dans le menu de votre navigateur, choisissez “Fichier” puis “Ouvrir” et naviguez jusqu’au fichier “index.html”.
Votre page web basique devrait s’afficher dans votre navigateur avec le titre “Bienvenue sur ma page web !” en grand et le texte “Ceci est un paragraphe de texte.” en dessous. Félicitations, vous avez créé votre première page web avec le Bloc-notes !
Étape 3 : Ajouter du Contenu et Structurer la Page
Votre page est un peu vide pour l’instant. Ajoutons du contenu et structurons un peu plus :
- Rouvrez le fichier “index.html” dans le Bloc-notes.
- Modifiez le code HTML : Ajoutez les éléments suivants à l’intérieur de la balise <body> :
<h1>Mon Super Site Web</h1>
<h2>Bienvenue !</h2>
<p>Voici un paragraphe d'introduction.</p>
<ul>
<li>Élément de liste 1</li>
<li>Élément de liste 2</li>
<li>Élément de liste 3</li>
</ul>
<img src="image.jpg" alt="Description de l'image">
<a href="https://www.exemple.com">Lien vers un autre site</a>
Explication du nouveau code :
- <h2> : Définit un titre de niveau 2 (sous-titre).
- <ul> : Définit une liste non ordonnée (à puces).
- <li> : Définit un élément de liste.
- <img src=”image.jpg” alt=”Description de l’image”> : Affiche une image. `src` indique le chemin vers l’image, et `alt` fournit une description alternative si l’image ne peut pas être affichée. N’oubliez pas de remplacer “image.jpg” par le chemin réel de votre image. Pour l’instant, vous pouvez mettre une image factice comme un bloc de couleur simple dans un fichier `image.jpg` dans le même dossier.
- <a href=”https://www.exemple.com”> : Crée un lien hypertexte. `href` indique l’adresse du lien. N’oubliez pas de remplacer “https://www.exemple.com” par l’adresse de votre choix.
- Enregistrez les modifications : Cliquez sur “Fichier” puis “Enregistrer” (vous n’avez pas besoin de faire “Enregistrer sous…” cette fois).
- Actualisez la page web dans votre navigateur : Soit en cliquant sur le bouton d’actualisation, soit en appuyant sur la touche F5.
Votre page web devrait maintenant afficher un titre principal, un sous-titre, un paragraphe, une liste à puces, une image (si vous l’avez ajoutée) et un lien. N’hésitez pas à expérimenter en ajoutant du texte, des images, des liens et des listes.
Étape 4 : Appliquer du Style avec CSS (Minimal)
Maintenant, nous allons ajouter un peu de style à notre page web en utilisant le CSS. Il y a plusieurs manières d’ajouter du CSS. Nous utiliserons la méthode d’inclure le CSS directement dans le fichier HTML, via une balise <style> dans l’en-tête.
- Ouvrez le fichier “index.html” dans le Bloc-notes.
- Ajoutez le code CSS : Modifiez l’en-tête (`<head>`) de votre fichier HTML pour qu’il ressemble à ceci :
<head>
<meta charset="UTF-8">
<title>Ma Première Page Web</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 20px;
}
h1 {
color: #333;
}
h2 {
color: #666;
}
p {
line-height: 1.6;
}
ul {
list-style-type: square;
}
a{
color: blue;
text-decoration: none; /*enleve soulignement*/
}
a:hover{
text-decoration: underline;
}
img{
max-width: 200px;
}
</style>
</head>Explication du code CSS :
- <style> : Balise qui contient le code CSS.
- body : Sélecteur qui applique le style au corps de la page.
- font-family : Définit la police de caractères.
- background-color : Définit la couleur de fond.
- margin : Définit les marges autour de l’élément `body`
- h1, h2 : Sélecteurs qui appliquent le style aux titres de niveau 1 et 2 respectivement.
- color : Définit la couleur du texte.
- p : Selecteur pour les paragraphes.
- line-height : Espacement vertical entre les lignes.
- ul : Selecteur pour les listes non ordonées.
- list-style-type : Définit le type de puces (ici, carrées).
- a : Selecteur pour les liens.
- text-decoration : Définit la décoration du texte (ici, on enlève le soulignement par defaut).
- a:hover : Selecteur pour appliquer un style au lien quand on le survole.
- img : Selecteur pour les images.
- max-width : Définit la largeur maximale des images.
- Enregistrez les modifications : Cliquez sur “Fichier” puis “Enregistrer”.
- Actualisez la page web dans votre navigateur.
Vous devriez constater un changement dans l’apparence de votre page web. La police de caractères, la couleur de fond et les couleurs des titres ont changé. C’est un exemple simple de ce que le CSS peut faire.
Étape 5 : Aller plus loin
Vous avez maintenant une page web fonctionnelle, créée uniquement avec le Bloc-notes. Voici quelques idées pour aller plus loin :
- Apprendre davantage de HTML : Explorez d’autres balises comme <div>, <span>, <form>, <input>, <table>, <header>, <nav>, <footer>, et plus encore.
- Approfondir le CSS : Découvrez les sélecteurs CSS, les propriétés, les unités de mesure (pixels, em, rem), le modèle de boîtes (box model), les dispositions (flexbox, grid), les animations, etc.
- Créer des pages plus complexes : Ajoutez des formulaires, des tableaux, des galeries d’images, etc.
- Organiser votre code : Séparez votre code HTML de votre code CSS en utilisant des fichiers CSS externes (nous n’avons pas fait cela ici pour rester simple).
- Utiliser un éditeur de code : Pour faciliter le développement, vous pouvez passer à un éditeur de code tel que Visual Studio Code, Sublime Text ou Atom. Ces éditeurs offrent des fonctionnalités telles que la coloration syntaxique, l’autocomplétion, la mise en forme automatique, etc.
Conclusion
Félicitations ! Vous avez réussi à créer une simple page web avec le Bloc-notes, en utilisant uniquement du HTML et du CSS. C’est un excellent premier pas dans le monde du développement web. N’hésitez pas à expérimenter, à modifier le code, à faire des erreurs et à apprendre de celles-ci. Le développement web est un apprentissage continu, mais avec de la pratique et de la patience, vous pourrez créer des pages web de plus en plus complexes et performantes. N’oubliez pas que le web est à votre portée et que vous êtes maintenant équipé des bases pour démarrer votre aventure web!