S’équiper : éditeur, dossiers et outils du navigateur

Un menuisier prépare son établi avant de scier la première planche. Pour le web, l’établi est beaucoup plus simple : un éditeur, un dossier bien rangé et un navigateur. Dans cette leçon, vous installez votre atelier, vous adoptez les bonnes habitudes de nommage dès le début et vous découvrez les outils de développement, vos meilleurs alliés pour comprendre et déboguer.

Choisir un éditeur de code

Un fichier HTML ou CSS est un simple fichier texte. N’importe quel éditeur de texte brut pourrait l’écrire, mais un éditeur conçu pour le code vous fera gagner un temps précieux :

• la coloration syntaxique distingue balises, attributs et valeurs, et rend les erreurs visibles ;
• l’indentation automatique garde votre code lisible ;
• la complétion propose les balises et les propriétés au fur et à mesure que vous tapez ;
• la recherche et remplacement fonctionne dans tout le dossier du projet ;
• de nombreuses extensions ajoutent des fonctions utiles (aperçu en direct, vérification du code).

Plusieurs éditeurs gratuits conviennent très bien : Visual Studio Code, VSCodium, Sublime Text (version d’évaluation), Notepad++ sous Windows ou Kate sous Linux. Le choix compte moins que la régularité : prenez-en un, apprenez ses raccourcis de base et gardez-le.

Réglages utiles à faire dès maintenant

• Encodage UTF-8 : c’est le réglage par défaut des éditeurs modernes ; il garantit que les accents et les caractères spéciaux restent intacts.
• Indentation : deux espaces par niveau est un choix très répandu pour le HTML et le CSS. Peu importe le nombre, tant que vous restez cohérent.
• Retour automatique à la ligne : activez-le pour ne pas faire défiler horizontalement des lignes trop longues.
• Affichage des extensions de fichiers : dans votre explorateur, activez-le, sinon un fichier nommé index.html pourrait en réalité s’appeler index.html.txt sans que vous le sachiez.

Organiser le dossier du projet

Un site est un ensemble de fichiers qui se référencent les uns les autres par leur chemin. Un projet bien rangé évite de nombreuses erreurs. Pour le portfolio de Camille, créez la structure suivante :

camille-morel/
├── index.html
├── css/
│   └── style.css
└── images/
    └── (vos photos viendront ici)

Le dossier racine s’appelle camille-morel. Il contient la page d’accueil index.html, un dossier css pour la feuille de style et un dossier images pour les illustrations. Vous créerez le fichier style.css au chapitre 3 ; pour l’instant, le dossier peut rester vide.

Gardez tout le projet dans un seul dossier racine. Si vous déplacez plus tard ce dossier ailleurs sur votre ordinateur, tous les liens relatifs continueront à fonctionner, parce qu’ils partent de l’intérieur du dossier.

Les règles de nommage des fichiers

Les serveurs web sont souvent sensibles à la casse et n’aiment pas les caractères spéciaux. Adoptez dès maintenant quatre habitudes :

1. Minuscules uniquement : portrait.jpg et Portrait.jpg sont deux fichiers différents sur de nombreux serveurs, alors que votre ordinateur personnel les confond parfois.
2. Pas d’espaces : remplacez-les par des tirets, par exemple mon-portrait.jpg. Un espace dans une URL devient %20, peu lisible.
3. Pas d’accents ni de caractères spéciaux : écrivez galerie-ete.jpg, pas galerie-été.jpg.
4. Noms parlants : portrait-camille.jpg est préférable à IMG_4521.jpg, pour vous comme pour le référencement.

Choisissez enfin l’extension correcte : .html pour les pages, .css pour les feuilles de style, .jpg, .png, .webp ou .svg pour les images.

Le navigateur, deuxième outil de travail

Pendant le développement, vous alternez entre deux fenêtres : l’éditeur pour écrire, le navigateur pour vérifier. Pour ouvrir un fichier, double-cliquez dessus dans votre explorateur, ou glissez-le dans la fenêtre du navigateur. L’adresse affichée commence alors par file://, ce qui indique qu’il s’agit d’un fichier local.

La boucle de travail est toujours la même : modifier, enregistrer, rafraîchir (touche F5, ou Cmd/Ctrl + R), observer. Prenez l’habitude de tester après chaque petite modification : si quelque chose casse, vous saurez exactement quoi.

Testez votre travail dans au moins deux navigateurs différents lorsque c’est possible. Les navigateurs modernes appliquent les standards de façon très proche, mais de petites différences existent encore.

Les outils de développement

Tous les navigateurs actuels embarquent des outils de développement (devtools). Pour les ouvrir : clic droit sur un élément de la page puis « Inspecter », ou la touche F12, ou encore Cmd + Option + I (macOS) / Ctrl + Maj + I (Windows, Linux). Les noms des onglets varient légèrement d’un navigateur à l’autre, mais les fonctions principales sont partout présentes.

L’inspecteur d’éléments

Cet onglet affiche le HTML tel que le navigateur le comprend (le DOM), avec en parallèle les règles CSS appliquées à l’élément sélectionné. Survolez une ligne de code : l’élément correspondant se met en surbrillance dans la page. Cliquez sur une valeur CSS pour la modifier et voir l’effet en direct. Ces changements sont temporaires : ils disparaissent au rechargement et ne modifient jamais vos fichiers. C’est un bac à sable idéal pour essayer des idées.

La console

La console affiche les messages d’erreur et d’avertissement. Même sans JavaScript, elle signale par exemple qu’une ressource est introuvable (une image ou une feuille de style mal référencée). Dès qu’une image ne s’affiche pas ou qu’un style ne s’applique pas, jetez un œil à la console.

L’onglet Réseau

Il liste toutes les requêtes effectuées pour afficher la page, avec leur statut. Vous y retrouvez concrètement ce que nous avons vu dans la leçon précédente : le fichier HTML en premier, puis la feuille de style et les images, chacun avec son code 200 ou, hélas, 404. Rechargez la page avec l’onglet ouvert pour voir défiler les requêtes.

Le mode adaptatif

Un bouton en forme de téléphone et de tablette permet de simuler différentes tailles d’écran. Il vous servira intensivement au chapitre 4, pour vérifier l’affichage sur mobile.

Un pense-bête pour dépanner

Symptôme	Piste à vérifier
Mes modifications n’apparaissent pas	Fichier enregistré ? Page rafraîchie ? Bon fichier ouvert ?
Les accents s’affichent mal (é devient é)	Présence de la balise meta charset et fichier enregistré en UTF-8
Une image est absente	Chemin et nom exact du fichier, console et onglet Réseau (404)
Le style ne s’applique pas	Lien vers la feuille de style correct, fautes de frappe dans le CSS

À vous de jouer

Mettez en place votre atelier :

1. installez ou ouvrez votre éditeur de code et ouvrez-y le dossier racine du projet ;
2. créez la structure camille-morel/ avec index.html, css/ et images/ ;
3. dans un site de votre choix, ouvrez l’inspecteur, sélectionnez un titre, et changez sa couleur ou sa taille de police depuis le panneau des styles ;
4. ouvrez l’onglet Réseau, rechargez la page et repérez le nombre de requêtes et le statut de la première.

Voir une solution

Votre dossier doit ressembler à l’arborescence présentée plus haut. Pour l’inspecteur, cliquez sur l’icône en forme de flèche (ou utilisez le clic droit puis « Inspecter » sur le titre), puis modifiez par exemple la valeur de color dans le panneau de droite. Pour l’onglet Réseau, la toute première ligne est le document HTML principal ; son statut est normalement 200. Si vous rechargez la page, vous verrez que la modification faite dans l’inspecteur a disparu : elle n’était que temporaire.

Votre atelier est prêt : dans la leçon suivante, vous écrivez enfin votre première page HTML.