7.1 Premier document html
Faisons notre premier document html (fichier html). Habituellement, le fichier html principal d'un projet web s'appelle index.html : Je propose de ne pas déroger à cette belle tradition. Pour cela, clique droit sur le dossier web-storm-10:
Et entre le nom du fichier :
WebStorm créera le fichier pour toi et l'ouvrira directement :
En fait, c'est un document html vide. Tout ce que tu vois ici — c'est de l'info technique.
Toutes les données réelles seront placées à l'intérieur des balises <body> et
</body>. Qu’est-ce que les balises, tu en sauras plus dans le prochain cours.
Écrivons un message intéressant et pompeux à l'intérieur de ces balises. Par exemple :
Chemin de 10 000 miles commence par un pas!
Tu peux simplement le copier et le coller à la ligne 8 (à l'intérieur des balises <body>).
Habitue-toi à copier des textes — il y a moins d'erreurs et de fautes de frappe. Voici à quoi ressemble mon document :
Si ma version du texte n'est pas assez sombre et pompeuse pour toi, choisis la tienne — c'est quand même ton premier projet Web. Je propose encore 3 options :
- "Le côté obscur m'offre ce que la Lumière ne peut pas me donner : la vraie liberté."
- "Le côté obscur est le chemin vers une puissance sans limites."
- "Je choisis mon destin, et il est dans l'obscurité."
7.2 Lancement du premier projet
Maintenant, lançons notre projet et voyons comment le navigateur affichera notre fichier html.
Pour lancer le projet, il faut cliquer sur le triangle vert dans le menu du haut. À gauche, est écrit le nom du fichier qui va commencer à s'exécuter :
Tu peux aussi exécuter ton fichier en appuyant sur Shift+F10.
Faisons-le, et tu verras comment le navigateur affichera ton premier fichier html. Voilà ce que le mien affiche :
En orange, il y a le host dans l'url — serveur web de notre projet, démarré par WebStorm.
En vert, c'est le chemin dans l'url — chemin vers index.html depuis la racine de notre projet.
En bleu — info technique pour WebStorm.
En rouge, c'est le texte, que le navigateur a affiché sur la base de notre document html.
7.3 Correction des erreurs
Et si on faisait une erreur ? Comment le navigateur et WebStorm réagiraient-ils ?
Supprimons le premier caractère de la ligne 9 et voyons la réaction de WebStorm. Voici ce que j'ai obtenu :
Ce qu'on voit ici :
- Le mot de la ligne 9 cesse d'être une balise, donc WebStorm l'écrit maintenant en gris, pas en jaune.
- À la ligne 10, tu as une balise fermante
<html>, bien que la balise<body>devrait apparaître avant la balise fermante<html>. Donc WebStorm voit une erreur ici. - Le nombre d'erreurs dans le document est affiché en haut à droite – une pour nous.
- L'endroit de l'erreur est aussi affiché sur la barre de défilement — en bas à droite. Très pratique pour les documents longs.
Maintenant, lançons ce fichier et voyons comment le navigateur réagit à l'erreur :
Le navigateur pense aussi qu'une balise <body> incomplète — c'est juste du texte, donc il l'affiche comme un texte ordinaire.
L'absence de la balise fermante <body> ne le dérange pas non plus : il y a des problèmes
de balises bien pires. Globalement, c'est assez correct.
GO TO FULL VERSION