PhpBB Lab Académie

Construire un document HTML complet en comprenant le rôle de la déclaration de type, des éléments html, head et body, de l’encodage UTF-8 et du titre de page, puis intégrer dans cette structure le contenu créé dans les leçons précédentes.

Nous allons transformer notre fichier en véritable document HTML

Dans les leçons précédentes, vous avez :

- créé le fichier

index.html

;
- appris à l’enregistrer et à l’ouvrir dans un navigateur ;
- découvert les balises ouvrantes et fermantes ;
- utilisé un attribut ;
- appris à imbriquer correctement des éléments.

Votre fichier contient déjà du HTML, mais il ne possède pas encore toute la structure attendue d’un document HTML complet.

Nous allons maintenant construire cette structure pas à pas.

À la fin de la leçon, votre fichier ressemblera à ceci :

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Ma première page HTML</title>
</head>
<body>
    <p>Bonjour ! J’apprends HTML.</p>
</body>
</html>

Ne recopiez pas encore tout ce code.

Nous allons d’abord expliquer chaque ligne.

1. Pourquoi une structure complète ?

Jusqu’à présent, nous pouvions écrire simplement :

<p>Bonjour ! J’apprends HTML.</p>

Le navigateur est capable d’afficher ce paragraphe.

Mais un véritable document HTML contient également des informations qui permettent notamment d’indiquer :

- le type de document utilisé ;
- la langue principale de la page ;
- l’encodage des caractères ;
- le titre du document ;
- la partie qui contient le contenu visible.

Ces informations donnent au navigateur et aux autres outils un document plus clair et mieux défini.

2. La première ligne : <!doctype html>

La première ligne de notre document sera :

<!doctype html>

Cette ligne indique au navigateur que nous utilisons le HTML moderne.

On l’appelle la déclaration de type de document.

Elle n’est pas un élément HTML comme

p

.

Vous ne devez donc pas chercher une balise fermante comme :

</!doctype>

Elle n’existe pas.

Pour notre cours, retenez simplement :

<!doctype html> = indique au navigateur que le document utilise le HTML moderne

Placez cette déclaration tout en haut du fichier.

3. L’élément html contient le document

Après la déclaration de type, nous allons ouvrir l’élément :

<html>

et le fermer à la toute fin avec :

</html>

La plupart du document HTML se trouve donc à l’intérieur de cet élément :

<html>
    ...
</html>

Vous connaissez déjà le principe de l’imbrication : les éléments placés à l’intérieur doivent être terminés avant la fermeture de

html

.

4. Indiquer la langue du document

Dans la leçon précédente, vous avez découvert l’attribut :

lang="fr"

Nous allons maintenant le placer sur l’élément

html

:

<html lang="fr">

Cela indique que la langue principale du document est le français.

Cette information est utile notamment :

- aux navigateurs ;
- aux moteurs de recherche ;
- aux technologies d’assistance comme les lecteurs d’écran.

Un lecteur d’écran peut utiliser cette information pour choisir une prononciation adaptée à la langue du document.

Notre élément devient donc :

<html lang="fr">
    ...
</html>

5. Le document contient deux grandes parties

À l’intérieur de

html

, nous allons créer deux éléments importants :

head

et :

body

La structure générale est :

<html lang="fr">
    <head>
        ...
    </head>
    <body>
        ...
    </body>
</html>

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

6. Le rôle de head

L’élément :

<head>

contient des informations sur le document.

Ces informations ne constituent généralement pas le contenu principal que l’utilisateur lit dans la page.

Nous allons y placer aujourd’hui deux éléments :

- l’encodage des caractères ;
- le titre du document.

Nous aurons donc bientôt :

<head>
    <meta charset="utf-8">
    <title>Ma première page HTML</title>
</head>

Nous allons expliquer ces deux lignes avant de les utiliser.

7. Comprendre l’encodage UTF-8

Une page peut contenir de nombreux caractères :

- des lettres ;
- des chiffres ;
- des accents ;
- des signes de ponctuation ;
- des caractères provenant de différentes langues.

L’ordinateur doit savoir comment représenter correctement ces caractères.

Nous allons utiliser l’encodage :

UTF-8

Dans le document, nous l’indiquons avec :

<meta charset="utf-8">

L’attribut :

charset="utf-8"

indique l’encodage utilisé.

Pour un débutant, il suffit de retenir :

<meta charset="utf-8"> = permet de déclarer un encodage moderne adapté aux caractères de notre page

Cela nous évite notamment de voir certains caractères accentués mal interprétés.

8. Pourquoi meta n’a-t-il pas de balise fermante ?

Vous remarquez que nous écrivons :

<meta charset="utf-8">

mais pas :

</meta>

Dans la leçon précédente, nous avions annoncé que certains éléments HTML fonctionnent différemment des éléments comme

p

.

meta

en fait partie.

Il ne contient pas de texte entre une ouverture et une fermeture.

On parle d’un élément vide.

Vous rencontrerez d’autres éléments de ce type plus tard.

Pour le moment, retenez seulement que :

<meta charset="utf-8">

est complet tel quel.

9. Le titre du document

Nous allons ensuite écrire :

<title>Ma première page HTML</title>

L’élément

title

donne un titre au document.

Ce titre peut notamment apparaître :

- dans l’onglet du navigateur ;
- dans l’historique ;
- dans les favoris ;
- dans différents outils qui identifient la page.

Il est donc important de choisir un titre qui décrit la page.

Pour notre exercice :

Ma première page HTML

convient très bien.

Attention :

title

n’est pas encore le grand titre visible dans le contenu de la page.

Nous apprendrons plus tard à créer les titres visibles avec les éléments

h1

,

h2

, etc.

Retenez donc la différence :

title = titre du document, notamment visible dans l’onglet du navigateur
titre visible dans la page = notion que nous étudierons ensuite

10. Le rôle de body

Après

head

, nous ouvrons :

<body>

L’élément

body

contient le contenu principal affiché dans la page.

C’est donc ici que nous allons placer le paragraphe créé précédemment :

<body>
    <p>Bonjour ! J’apprends HTML.</p>
</body>

Retenez :

head = informations sur le document
body = contenu principal de la page

11. Assembler les différentes parties

Nous connaissons maintenant chaque élément nécessaire.

Vous pouvez remplacer le contenu actuel de

index.html

par :

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Ma première page HTML</title>
</head>
<body>
    <p>Bonjour ! J’apprends HTML.</p>
</body>
</html>

Enregistrez avec :

Ctrl + S

Puis actualisez la page dans votre navigateur.

Le paragraphe doit apparaître comme auparavant :

Bonjour ! J’apprends HTML.

Mais regardez également le titre de l’onglet du navigateur.

Vous devez pouvoir retrouver :

Ma première page HTML

12. Comprendre l’imbrication de cette structure

La structure respecte exactement la règle apprise dans la leçon précédente.

Nous ouvrons :

html

À l’intérieur, nous ouvrons puis fermons :

head

Ensuite, toujours à l’intérieur de

html

, nous ouvrons puis fermons :

body

Et seulement après, nous fermons :

html

On peut représenter cette organisation ainsi :

html
    head
        meta
        title
    body
        p

Cette représentation permet de voir quels éléments se trouvent à l’intérieur des autres.

13. Pourquoi décaler certaines lignes ?

Dans notre exemple, certaines lignes commencent avec des espaces :

<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Ma première page HTML</title>
    </head>
</html>

Ce décalage s’appelle l’indentation.

Le navigateur n’en a généralement pas besoin pour comprendre cette structure.

Nous l’utilisons pour rendre le code plus facile à lire.

Lorsqu’un élément se trouve à l’intérieur d’un autre, nous le décalons visuellement.

Ainsi, nous voyons immédiatement que

title

se trouve dans

head

.

Dans ce cours, nous utiliserons une indentation régulière dans tous les exemples.

14. Ne pas placer le contenu visible dans head

Regardez cette structure :

<head>
    <p>Bonjour !</p>
</head>

Ce n’est pas l’endroit prévu pour notre paragraphe visible.

Le contenu principal doit être placé dans :

body

Nous écrirons donc :

<body>
    <p>Bonjour !</p>
</body>

La distinction

head

/

body

deviendra très importante lorsque nos pages seront plus riches.

15. Modifier le titre du document

Pour vérifier que vous avez compris le rôle de

title

, remplacez :

<title>Ma première page HTML</title>

par :

<title>Mon apprentissage du HTML</title>

Enregistrez puis actualisez.

Le texte du paragraphe dans la page ne doit pas changer.

En revanche, le titre du document dans le navigateur doit devenir :

Mon apprentissage du HTML

Vous venez de vérifier concrètement que

title

et le contenu visible de

body

jouent deux rôles différents.

16. La structure à connaître désormais

À partir de cette leçon, nos fichiers HTML commenceront avec cette structure :

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
</head>
<body>

</body>
</html>

Vous n’avez pas besoin de la réciter mécaniquement.

L’important est de comprendre le rôle de chaque partie.

Avec la pratique, cette structure deviendra naturelle.

Avant de passer à la suite

Vous devez maintenant être capable d’expliquer :

- pourquoi

<!doctype html>

se trouve au début ;
- à quoi sert

lang="fr"

;
- pourquoi

head

et

body

sont différents ;
- pourquoi nous déclarons

utf-8

;
- à quoi sert

title

;
- où placer le contenu visible de la page.

Dans la prochaine leçon, nous allons commencer à organiser réellement le contenu visible avec des titres et des paragraphes.

Nadia reprend son fichier

index.html

.

Elle écrit :

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Le site de Nadia</title>
</head>
<body>
    <p>Bienvenue sur ma première page HTML.</p>
</body>
</html>

Elle enregistre puis actualise son navigateur.

Dans la page, elle voit :

Bienvenue sur ma première page HTML.

Dans l’onglet du navigateur, elle retrouve :

Le site de Nadia

Elle comprend donc que :

title

identifie le document, tandis que le paragraphe placé dans :

body

fait partie du contenu visible de la page.

Reprenez votre fichier

index.html

.

1. Remplacez son contenu par la structure suivante :

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Ma première page HTML</title>
</head>
<body>
    <p>Bonjour ! J’apprends HTML.</p>
</body>
</html>

2. Enregistrez le fichier.

3. Actualisez la page dans votre navigateur.

4. Vérifiez que le paragraphe apparaît.

5. Vérifiez que le titre de l’onglet correspond à :

Ma première page HTML

6. Remplacez ensuite le contenu de

title

par :

Mon apprentissage du HTML

7. Enregistrez et actualisez à nouveau.

8. Vérifiez que le texte du paragraphe reste identique mais que le titre du document change.

Pour terminer, expliquez avec vos propres mots le rôle de :

-

<!doctype html>

;
-

<html lang="fr">

;
-

head

;
-

body

;
-

meta charset="utf-8"

;
-

title

.

Un document HTML complet possède une structure générale.

La première ligne :

<!doctype html>

indique que le document utilise le HTML moderne.

L’élément :

<html lang="fr">

contient le document et précise ici que sa langue principale est le français.

À l’intérieur, nous trouvons deux grandes parties :

head

et :

body

head

contient des informations sur le document.

body

contient le contenu principal visible de la page.

La ligne :

<meta charset="utf-8">

déclare l’encodage UTF-8.

L’élément :

<title>Titre de la page</title>

donne un titre au document, notamment utilisé dans l’onglet du navigateur.

Nous indentons les éléments imbriqués afin de rendre le code plus facile à lire.

La structure de base que nous utiliserons désormais est :

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
</head>
<body>

</body>
</html>

Dans la prochaine leçon, nous allons organiser le contenu de

body

avec des titres et des paragraphes.