PhpBB Lab Académie

Créer un premier fichier HTML sur son ordinateur, comprendre l’importance de l’extension .html, l’ouvrir dans un navigateur et vérifier qu’une modification enregistrée apparaît après actualisation de la page.

Nous allons enfin créer notre première page

Dans la leçon précédente, vous avez découvert le rôle de HTML.

Vous savez maintenant qu’un document HTML peut être enregistré dans un fichier portant l’extension :

.html

Nous allons aujourd’hui créer ce fichier pour de vrai.

À la fin de cette leçon, vous aurez sur votre ordinateur :

mon-premier-site

    index.html

Vous pourrez ouvrir

index.html

dans votre navigateur et voir le contenu que vous avez vous-même écrit.

Nous n’utiliserons pas encore de balises HTML.

La prochaine leçon sera consacrée aux balises, aux attributs et à l’imbrication. Aujourd’hui, notre objectif est d’abord de comprendre comment créer, enregistrer, ouvrir et modifier un fichier HTML.

1. Créer un dossier pour notre site

Un site peut rapidement contenir plusieurs fichiers.

Il est donc préférable de les ranger dès le début dans un dossier réservé au projet.

Dans un emplacement facile à retrouver, par exemple dans vos Documents, créez un nouveau dossier appelé :

mon-premier-site

Pourquoi utilisons-nous ce nom ?

Pour les noms de fichiers et de dossiers destinés au web, nous prendrons progressivement de bonnes habitudes :

- utiliser des lettres minuscules ;

- éviter les espaces ;

- éviter les caractères accentués lorsque ce n’est pas nécessaire ;

- utiliser un tiret pour séparer plusieurs mots.

Ainsi :

mon-premier-site

est préférable à :

Mon premier site

Ce n’est pas encore une règle à apprendre par cœur. Nous l’appliquerons simplement dans nos exercices.

2. Qu’est-ce qu’un éditeur de texte ?

Pour créer un fichier HTML, nous avons besoin d’un programme permettant d’écrire du texte brut.

On appelle ce type de programme un éditeur de texte ou un éditeur de code.

Vous pouvez utiliser par exemple :

Visual Studio Code

ou un autre éditeur capable d’enregistrer un simple fichier texte.

En revanche, un traitement de texte comme Microsoft Word n’est pas adapté pour écrire du HTML.

Pourquoi ?

Parce qu’un traitement de texte peut ajouter des informations de mise en forme qui ne correspondent pas au contenu brut attendu dans un fichier HTML.

Pour ce cours, retenez simplement :

Éditeur de texte ou de code = adapté

Traitement de texte comme Word = à éviter

3. Créer le fichier index.html

Ouvrez votre éditeur.

Créez un nouveau fichier vide.

Enregistrez-le dans le dossier :

mon-premier-site

avec le nom exact :

index.html

Nous avons donc maintenant :

mon-premier-site

    index.html

Le nom du fichier est :

index

et son extension est :

.html

4. Pourquoi utiliser le nom index.html ?

Le nom

index.html

est très courant pour la page principale d’un site.

Lorsque des pages seront plus tard placées sur un serveur web, le serveur cherchera souvent automatiquement un fichier portant un nom comme

index.html

pour afficher la page d’accueil d’un dossier.

Pour nos exercices locaux, nous pourrions techniquement choisir un autre nom.

Mais utiliser

index.html

dès maintenant nous permet de prendre une habitude courante dans le développement web.

Retenez simplement :

index.html = nom fréquemment utilisé pour la page principale d’un site

5. Attention à index.html.txt

Sous Windows, les extensions de fichiers peuvent parfois être masquées.

Vous pourriez penser avoir créé :

index.html

alors que le véritable nom du fichier serait :

index.html.txt

Dans ce cas, Windows considère encore le fichier comme un fichier texte ordinaire.

Si votre éditeur affiche clairement le nom complet du fichier, vérifiez qu’il se termine bien par :

.html

et non par :

.html.txt

Si nécessaire, vous pouvez demander à Windows d’afficher les extensions de noms de fichiers dans l’Explorateur.

Le point important est que le nom réel doit être :

index.html

6. Écrire notre premier contenu

Dans le fichier

index.html

, écrivez simplement :

Bonjour, ceci est ma première page web.

Puis enregistrez le fichier.

Vous pouvez généralement enregistrer avec :

Ctrl + S

À ce stade, nous n’avons encore utilisé aucune balise HTML.

C’est volontaire.

Le navigateur est capable d’afficher ce texte, mais notre document n’est pas encore correctement structuré comme une véritable page HTML.

Nous apprendrons à le structurer dès la prochaine leçon.

7. Ouvrir le fichier dans le navigateur

Ouvrez le dossier :

mon-premier-site

Repérez :

index.html

Ouvrez ce fichier avec votre navigateur.

Le navigateur doit afficher :

Bonjour, ceci est ma première page web.

Vous venez de créer et d’ouvrir votre première page.

Elle se trouve uniquement sur votre ordinateur.

Vous n’avez utilisé :

- aucun hébergement ;

- aucun serveur web ;

- aucune base de données.

8. Comprendre l’adresse affichée dans le navigateur

Lorsque vous ouvrez directement un fichier enregistré sur votre ordinateur, l’adresse du navigateur peut commencer par quelque chose comme :

file:///

Cela signifie que le navigateur consulte un fichier local.

Vous ne voyez donc pas encore une adresse comme :

https://www.exemple.com

C’est normal.

Nous travaillons actuellement avec un fichier enregistré sur votre propre ordinateur.

9. Modifier la page

Revenez dans votre éditeur.

Remplacez la phrase précédente par :

Bonjour ! J’apprends à créer mes premières pages web.

Enregistrez à nouveau avec :

Ctrl + S

Revenez ensuite dans votre navigateur.

La page peut encore afficher l’ancien texte.

Pourquoi ?

Parce que le navigateur doit relire le fichier modifié.

Actualisez la page.

Vous pouvez généralement utiliser :

Ctrl + R

Le nouveau texte doit maintenant apparaître.

Vous venez de découvrir un fonctionnement que vous utiliserez constamment pendant votre apprentissage :

Modifier le fichier

-> enregistrer

-> revenir dans le navigateur

-> actualiser

-> observer le résultat

10. Faire la différence entre enregistrer et actualiser

Ces deux actions n’ont pas le même rôle.

Enregistrer concerne le fichier dans votre éditeur.

Lorsque vous utilisez :

Ctrl + S

vous enregistrez vos modifications sur le disque.

Actualiser concerne la page dans le navigateur.

Lorsque vous actualisez, le navigateur relit le fichier afin d’afficher sa version actuelle.

Retenez :

Ctrl + S = enregistrer le fichier

Ctrl + R = actualiser la page dans le navigateur

11. Si la modification n’apparaît pas

Si le navigateur continue d’afficher l’ancien texte, vérifiez dans cet ordre :

1. avez-vous enregistré le fichier ?

2. avez-vous actualisé la page ?

3. modifiez-vous bien le même fichier que celui ouvert dans le navigateur ?

4. le fichier porte-t-il réellement le nom

index.html

?

Ne recréez pas immédiatement tout le dossier.

Commencez par vérifier ces quatre points simples.

12. Ce que nous avons volontairement évité aujourd’hui

Vous pourriez vous demander pourquoi notre fichier contient seulement une phrase alors qu’il s’agit d’un fichier HTML.

C’est volontaire.

Je ne veux pas vous demander d’écrire quelque chose comme :

<h1>Bonjour</h1>

avant de vous avoir expliqué ce que signifient les caractères

<

et

>

, ce qu’est une balise et pourquoi certaines balises s’ouvrent et se ferment.

Nous verrons tout cela dans la prochaine leçon.

Pour le moment, votre objectif était de maîtriser le chemin entre votre éditeur et votre navigateur.

Avant de passer à la suite

Vous devez maintenant savoir :

- créer un dossier pour un petit projet web ;

- créer un fichier nommé

index.html

;

- comprendre ce que représente l’extension

.html

;

- saisir du contenu dans ce fichier ;

- enregistrer une modification ;

- ouvrir le fichier dans un navigateur ;

- actualiser la page pour voir une modification.

Dans la prochaine leçon, nous allons découvrir les véritables éléments qui permettent de structurer HTML : les balises.

Nadia crée dans ses Documents un dossier appelé :

mon-premier-site

Dans son éditeur, elle crée ensuite :

index.html

Elle écrit :

Bonjour, ceci est ma première page web.

Elle enregistre avec :

Ctrl + S

Puis elle ouvre

index.html

dans son navigateur.

La phrase apparaît.

Nadia revient ensuite dans son éditeur et écrit :

Bonjour ! J’apprends à créer mes premières pages web.

Elle enregistre à nouveau.

De retour dans le navigateur, elle actualise la page.

Le nouveau texte apparaît.

Nadia a donc compris le cycle de travail de base :

Modifier -> Enregistrer -> Actualiser -> Vérifier

Créez maintenant votre première page sur votre ordinateur.

1. Créez un dossier nommé :

mon-premier-site

2. Ouvrez votre éditeur de texte ou de code.

3. Créez dans ce dossier un fichier nommé exactement :

index.html

4. Vérifiez que son nom ne se termine pas par :

.html.txt

5. Dans le fichier, écrivez :

Bonjour, ceci est ma première page web.

6. Enregistrez le fichier.

7. Ouvrez

index.html

dans votre navigateur.

8. Vérifiez que la phrase apparaît.

9. Revenez dans votre éditeur et remplacez-la par :

Bonjour ! J’apprends HTML.

10. Enregistrez.

11. Revenez dans le navigateur et actualisez la page.

12. Vérifiez que le nouveau texte apparaît.

Pour terminer, expliquez avec vos propres mots la différence entre enregistrer le fichier et actualiser la page.

Un projet web peut être rangé dans un dossier dédié, par exemple :

mon-premier-site

Notre première page est enregistrée dans :

index.html

L’extension

.html

indique qu’il s’agit d’un document HTML.

Le nom

index.html

est couramment utilisé pour la page principale d’un site.

Un fichier HTML peut être ouvert directement dans un navigateur sans hébergement.

Pendant le développement, vous utiliserez très souvent ce cycle :

Modifier

-> Enregistrer

-> Actualiser

-> Vérifier

Ctrl + S

permet généralement d’enregistrer le fichier.

Ctrl + R

permet généralement d’actualiser la page dans le navigateur.

Dans la prochaine leçon, vous apprendrez ce qu’est une balise HTML et commencerez à structurer réellement votre document.