L'éditeur de texte ®Phœnix Code
1 - Les éditeurs de textes orientés pour le code
Pour créer nos fichiers HTML, nous avons utilisé en cours l'éditeur de texte ®Phœnix Code que vous pouvez installer sur votre ordinateur en suivant ce lien : download Phoenix Code.
Vous pourriez faire appel à d'autres éditeurs de texte (gratuits ou payants) selon votre convenance, car tous les fichiers que vous allez créer n'ont pas de format propriétaire, c'est-à-dire que vous ne rencontrerez jamais de problème de compatibilité avec ces fichiers. À ce titre, vous pourriez travailler sur un même fichier en l'ouvrant simultanément sur plusieurs éditeurs de texte (ce que personnellement je fais assez souvent).
Voici quelques autres éditeurs de texte gratuits que vous pourriez installer sur votre ordinateur :
- Sublime Text
- Visual Studio Code
- Notepad++ (uniquement pour Windows)
Si vous rencontrez des difficultés pour installer ®Phœnix Code (par exemple, si votre système d'exploitation est trop ancien), vous pouvez installer Brackets qui est l'ancien nom de ®Phœnix Code :
2 - Ajouter des extensions
®Phœnix Code, comme tous les éditeurs de texte orientés pour le code, offre la possibilité d'installer des extensions qui apportent des fonctionnalités supplémentaires.
Je vous conseille d'installer l'extension Emmet avant de commencer à travailler en suivant le pas-à-pas suivant :
Pour accéder aux extensions, cliquer sur l'icône ressemblant à un domino.
La boite de dialogue de recherche d'extension s'affiche :
Si l'extension Emmet a bien été installée, un nouveau menu Emmet apparaît dans Phoenix Code.
3 - Préparation du projet de site
Depuis ®Phœnix Code, vous pouvez ouvrir un dossier présent sur votre disque dur dans lequel vous placerez vos fichiers et dossiers qui constitueront votre site web.
Pour rappel, le dossier racine d'un site web qui contient tous les fichiers et dossiers utiles à son fonctionnement est nommé par convention : www.
Vous trouverez ci-dessous quelques étapes pour créer un nouveau projet de site web.
3.1 - Création du dossier de projet de site web
Pour démarrer un projet, vous pouvez commencer par créer sur votre disque dur un dossier dans lequel vous placerez :
- Le dossier racine www qui regroupera uniquement les fichiers et dossiers responsables de l'affichage des pages de votre site et de leur contenu.
- Éventuellement, un dossier contenant un ensemble de fichiers annexes qui vous seront utiles pour alimenter le contenu de vos pages web, comme des fichiers de texte brut, des maquettes pour le design, etc.
Dans notre exemple, nous commençons par créer sur le disque dur le dossier suivant : cours-html-eric-neme :
À partir de maintenant, nous pouvons ouvrir ce dossier depuis ®Phœnix Code :
Menu Fichier => Ouvrir un dossier…
Dans la boite de dialogue qui s'affiche, rechercher et sélectionner le dossier à ouvrir.
Une fois le dossier repéré, sélectionnez-le et cliquez sur le bouton Open de la fenêtre (l'appellation du bouton peut changer si vous êtes sur Windows).
Une fois le dossier ouvert, son nom apparaît dans la fenêtre de ®Phœnix Code :
3.2 - Création du dossier racine www
Pour créer depuis ®Phœnix Code le dossier www, il suffit de faire un clic droit dans la colonne grise pour faire apparaître un menu contextuel contenant la possibilité de créer un nouveau dossier. Bien entendu, il sera créé dans le dossier cours-html-eric-neme.
On constate que la création de ce nouveau dossier apparaît également dans l'explorateur de Windows ou le finder du mac.
3.3 — De l’explorateur ou du finder vers Phoenix Code
Inversement, tout dossier ou fichier rajouté dans le dossier cours-html-eric-neme depuis l'explorateur ou le finder apparaîtra dans ®Phœnix Code.
Dans l'exemple ci-dessous, on a rajouté :
- Un dossier annexes qui contient un fichier de texte brut. En tant qu'annexe, ce dossier est en dehors du dossier racine www
- Un dossier img contenant les fichiers des images destinées à être affichées dans nos pages, dont certains ont été regroupés dans un dossier pas-a-pas
4 - Détail du menu contextuel de ®Phœnix Code
Depuis ®Phœnix Code, en faisant un clic droit dans la zone grise, vous pouvez effectuer toutes les actions que vous offre l'explorateur ou le finder, à savoir :
- Créer un dossier ou un fichier
- Renommer un fichier ou un dossier
- Supprimer un dossier ou un fichier
- Ouvrir un fichier dans une autre application (explorateur ou finder, navigateur, etc.)
- Couper un dossier ou un fichier
- Coller un dossier ou un fichier
- Dupliquer un dossier ou un fichier
- Supprimer un dossier ou un fichier
- etc.
De plus, vous pouvez déplacer les dossiers et les fichiers par simple cliquer - glisser - déposer.
5 - Création des fichiers HTML
Pour créer un fichier HTML depuis ®Phœnix Code, il suffit d'utiliser le clic droit pour faire apparaître le menu contextuel et choisir : Nouveau fichier.
Attention, quand vous saisissez le nom de votre fichier n'oubliez pas de rajouter l'extension.
Par exemple, pour créer la page d'accueil, il faut créer un nouveau fichier dans le dossier www et le nommer index.html.
Lors de la création de ce fichier et, si vous l’avez correctement nommé avec l’extension .html, Phoenix Code écrit un peu de contenu : la structure HTML de base de toute page web.
