Qu’est-ce que HTML et comment fonctionne une page web ?
Objectif de la leçon
Comprendre ce qu’est HTML, à quoi il sert dans une page web et ce qui se passe lorsqu’un navigateur ouvre une page HTML.
Explications
Avant de commencer
Vous allez apprendre à créer des pages web.
Mais avant d’écrire votre première ligne de HTML, il est important de comprendre ce que vous allez réellement utiliser.
Dans cette première leçon, vous n’avez encore aucun fichier à créer et aucun code à mémoriser.
Nous allons simplement répondre à trois questions :
- Qu’est-ce qu’une page web ?
- Qu’est-ce que HTML ?
- Que fait le navigateur lorsqu’il ouvre une page ?
À la fin de cette leçon, vous devrez comprendre le rôle de HTML sans encore avoir besoin de connaître ses différentes balises.
1. Qu’est-ce qu’une page web ?
Lorsque vous consultez un site dans votre navigateur, ce que vous voyez à l’écran est une page web.
Une page peut contenir par exemple :
- un titre ;
- du texte ;
- des liens ;
- des images ;
- des listes ;
- des formulaires.
La page d’accueil d’un site est une page web.
Une page de contact est une autre page web.
Un article est généralement affiché dans une autre page.
Un site web peut donc être constitué de plusieurs pages reliées entre elles.
Retenez cette première distinction :
Page web = une page précise
Site web = ensemble de pages et de ressources
2. Qu’est-ce que HTML ?
HTML est le langage utilisé pour décrire et organiser le contenu d’une page web.
Son nom complet est :
HyperText Markup Language
Vous n’avez pas besoin de mémoriser immédiatement cette expression anglaise.
Retenez surtout ceci :
HTML = structure et contenu d’une page web
Avec HTML, on peut indiquer qu’un contenu représente par exemple :
- le titre principal de la page ;
- un paragraphe ;
- une liste ;
- un lien ;
- une image ;
- une partie de navigation ;
- un formulaire.
HTML permet donc au navigateur de comprendre le rôle des différents contenus.
3. HTML n’est pas un langage de programmation
Vous entendrez souvent parler de HTML en même temps que de langages de programmation.
Mais HTML n’est pas, à proprement parler, un langage de programmation.
Un langage de programmation permet notamment de créer des traitements, prendre des décisions ou effectuer des calculs.
HTML sert principalement à décrire la structure et le sens du contenu.
Plus tard dans le parcours, PHP permettra de réaliser de véritables traitements.
Pour le moment :
HTML = structure de la page
4. Le navigateur
Pour consulter une page web, vous utilisez un programme appelé navigateur.
Par exemple :
Google Chrome
Mozilla Firefox
Microsoft Edge
Safari
Le navigateur reçoit ou ouvre un document HTML, l’analyse, puis construit la page que vous pouvez consulter.
Il ne vous montre généralement pas directement le texte HTML contenu dans le fichier.
Il interprète ce document pour présenter la page sous une forme utilisable.
5. Le fichier HTML et la page affichée sont liés
Imaginons un fichier appelé :
index.html
Ce fichier contient les instructions HTML décrivant la page.
Lorsque le navigateur ouvre ce fichier, il lit son contenu et construit la page correspondante.
Nous pouvons donc distinguer :
Fichier HTML = document contenant la structure
Navigateur = logiciel qui interprète ce document
Page web = résultat présenté à l’utilisateur
Dans la prochaine leçon, vous créerez réellement votre premier fichier HTML.
6. Que signifie l’extension .html ?
Les fichiers possèdent souvent une extension.
Par exemple :
photo.jpg
document.pdf
notes.txt
Un document HTML utilise généralement l’extension :
.html
Ainsi :
index.html
est un fichier HTML.
Le mot
index est le nom du fichier.
La partie
.html indique qu’il s’agit d’un document HTML.
Nous créerons ce fichier ensemble dans la prochaine leçon.
7. Une page HTML peut fonctionner sans Internet
Une idée importante pour les exercices du cours : vous n’avez pas besoin d’un site déjà publié sur Internet pour commencer.
Un fichier HTML peut être enregistré directement sur votre ordinateur puis ouvert dans votre navigateur.
Vous pourrez donc apprendre et expérimenter localement avant de penser à un hébergement.
Pour commencer, le fonctionnement sera simplement :
Vous créez un fichier HTML
-> vous l’enregistrez sur votre ordinateur
-> vous l’ouvrez dans le navigateur
-> le navigateur affiche la page
8. HTML décrit le contenu, pas son apparence complète
HTML permet de dire :
Ceci est un titre.
Ceci est un paragraphe.
Ceci est un lien.
Ceci est une image.
Mais il n’est pas destiné à décider entièrement de l’apparence visuelle.
Par exemple, la couleur, certaines dimensions ou la disposition précise des éléments seront principalement gérées plus tard avec CSS.
Pour notre parcours :
HTML = structure et contenu
CSS = présentation visuelle
PHP = traitements dynamiques
Nous apprendrons ces technologies séparément.
Dans ce premier cours, nous restons uniquement sur HTML.
9. Pourquoi la structure est-elle importante ?
Une bonne structure HTML ne sert pas uniquement à obtenir quelque chose qui s’affiche dans le navigateur.
Elle aide également :
- les navigateurs à comprendre la page ;
- les moteurs de recherche à comprendre le contenu ;
- les technologies d’assistance, comme les lecteurs d’écran, à présenter correctement les informations ;
- les développeurs à comprendre et maintenir le document.
C’est pourquoi nous chercherons dès le début à écrire un HTML qui a du sens, et pas simplement du code qui « fonctionne visuellement ».
10. Ce qu’il faut comprendre avant la prochaine leçon
Vous n’avez encore aucun code HTML à apprendre par cœur.
Retenez simplement le fonctionnement général :
HTML décrit la page.
Le fichier possède généralement l’extension .html.
Le navigateur lit le fichier HTML.
Le navigateur construit et affiche la page web.
Dans la prochaine leçon, vous allez créer votre premier véritable fichier HTML et l’ouvrir dans votre navigateur.
Exemple commenté
Imaginez que Léa souhaite créer une petite page présentant son association.
Elle prépare un document HTML qui indique qu’elle souhaite avoir :
- un titre pour le nom de l’association ;
- un paragraphe de présentation ;
- un lien vers une page de contact.
Elle enregistre ce document sous le nom :
index.html
Lorsqu’elle ouvre ce fichier dans son navigateur, celui-ci lit le document HTML et affiche la page.
Nous avons donc :
index.html
-> document HTML
-> ouvert par le navigateur
-> affiché sous forme de page web
Léa n’a encore besoin ni d’un hébergement ni d’une connexion à un serveur pour effectuer cet essai sur son ordinateur.
Exercice à réaliser
Pour cette première leçon, aucun code n’est encore demandé.
Répondez avec vos propres mots aux questions suivantes.
1. À quoi sert HTML dans une page web ?
2. Quel est le rôle du navigateur ?
3. Quelle extension utilise généralement un fichier HTML ?
4. Quelle est la différence entre une page web et un site web ?
5. Avez-vous besoin de publier immédiatement votre fichier sur Internet pour pouvoir l’ouvrir dans un navigateur ?
Correction et résultat attendu
1. À quoi sert HTML ?
HTML sert à décrire et organiser la structure et le contenu d’une page web.
Une réponse simple peut être :
HTML indique au navigateur quels sont les différents contenus de la page et quel rôle ils jouent.
2. Quel est le rôle du navigateur ?
Le navigateur lit le document HTML, l’interprète et construit la page que l’utilisateur peut consulter.
3. Quelle extension utilise un fichier HTML ?
L’extension utilisée est généralement :
.html
Par exemple :
index.html
4. Quelle différence entre une page web et un site web ?
Une page web représente un document ou un écran précis.
Un site web peut être composé de plusieurs pages reliées entre elles.
5. Faut-il publier immédiatement le fichier sur Internet ?
Non.
Un fichier HTML peut être enregistré sur votre ordinateur puis ouvert directement dans votre navigateur.
Nous utiliserons cette méthode pour les premiers exercices.
À retenir
HTML est le langage utilisé pour structurer et décrire le contenu d’une page web.
HTML n’est pas un langage de programmation : il sert principalement à donner une structure et un sens au contenu.
Un document HTML est généralement enregistré dans un fichier portant l’extension :
.html
Par exemple :
index.html
Le navigateur lit ce document HTML, l’interprète puis affiche la page correspondante.
Un site web peut contenir plusieurs pages web.
Vous pouvez créer et ouvrir une page HTML directement sur votre ordinateur sans disposer d’un hébergement web.
Dans la prochaine leçon, vous allez créer votre premier fichier HTML.
Seuil de réussite, en pourcentage : 100 %. QCM obligatoire pour terminer le cours.