1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
|
---
title: Créer un document HTML simple
slug: conflicting/Learn/HTML/Introduction_to_HTML/Getting_started
tags:
- Beginner
- Guide
- HTML
- Learn
translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
translation_of_original: Learn/HTML/Howto/Create_a_basic_HTML_document
original_slug: Apprendre/HTML/Comment/Créer_un_document_HTML_simple
---
<p class="summary">Pour créer un site web, on commence par rédiger un document HTML. Les navigateurs actuels sont plutôt tolérants mais pour éviter quelques maux de tête, mieux vaut l'assembler correctement dès le début.</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Prérequis :</th>
<td>Vous devriez avoir <a href="/en-US/Learn/Choose,_Install_and_set_up_a_text_editor">installé un éditeur de texte</a> et connaître <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">quelques rudiments de HTML</a>.</td>
</tr>
<tr>
<th scope="row">Objectifs :</th>
<td>Apprendre à mettre en place un document HTML vierge tout en comprenant le rôle de chaque composant du squelette obtenu.</td>
</tr>
</tbody>
</table>
<p>Chaque document HTML partage la même structure. Cet article décrira chacune des parties de cette structure. Une fois n'est pas coutume, commençons par la fin en regardant la structure complète, avant de la décomposer :</p>
<pre class="brush: html"><!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Inscrire un titre ici</title>
<!-- On peut avoir d'autres méta-données ici -->
</head>
<body>
<!-- Ici, on placera tout le contenu à destination
de l'utilisateur -->
</body>
</html></pre>
<p>Dans la suite de cet article, nous verrons les raisons d'être de chacun des morceaux de cet exemple. En attendant, vous pouvez copier/coller cette exemple dans votre éditeur de texte pour avoir un squelette de base, réutilisable pour vos différents documents.</p>
<h2 id="Qu'est-ce_qu'un_document_HTML">Qu'est-ce qu'un document HTML ?</h2>
<p>Un document HTML ou <a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche">une page web</a> est simplement composé de texte structuré au sein de balise (une balise étant un mot-clé encadré par des chevrons ("<>"), par exemple, dans l'exemple précédent <code><html></code> et <code><body></code> sont deux des éléments qui sont utilisés). La plupart des balises fonctionnent par paires (on a alors une balise ouvrante <code><body></code> et une balise fermante correspondante : <code></body></code>). Un <strong><dfn>{{Glossary('élément')}}</dfn></strong> est une chaîne de texte entre deux balises.</p>
<p>La plupart des programmes (le plus souvent des {{glossary("navigateur","navigateurs")}}) traitent ces balises pour générer (ou « rendre ») le site que l'utilisateur peut voir, écouter ou ressentir.</p>
<p>Étant donné que HTML est un format textuel, il est possible d'écrire des fichiers HTML avec n'importe quel <a href="/fr/Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte">éditeur de texte</a>. Ajouter des balises HTML au texte est très simple et se fait en un rien de temps. Pour choisir les meilleurs outils, mieux vaut comprendre les balises et {{Glossary("Attribut","attributs")}} les plus communs. C'est le but de la <a href="/fr/Apprendre">zone d'apprentissage de MDN</a>.</p>
<p>Dans la suite de cet article, nous expliquerons les différents fragments de l'exemple précédent :</p>
<ul>
<li>ce qu'est un {{glossary("doctype")}} et pourquoi c'est important</li>
<li>l'élément racine : {{htmlelement("html")}}</li>
<li>la différence entre les éléments placés dans {{htmlelement("head")}} et dans {{htmlelement("body")}}</li>
<li>l'importance de l'élément {{htmlelement("title")}}.</li>
<li>la définition du jeu de caractères à utiliser pour le document avec l'élément {{htmlelement("meta")}}.</li>
</ul>
<h2 id="Le_doctype">Le <em>doctype</em></h2>
<p>La chaîne de texte suivante est appelée {{Glossary("doctype")}} (qui est la contraction, anglaise, de « document » et « type »).</p>
<pre class="brush: html"><!DOCTYPE html></pre>
<p>En ce qui concerne HTML, le <em>doctype</em> est un reliquat historique. Pourquoi est-il alors toujours présent ?</p>
<p>Si vous ne commencez pas votre document par <code><!DOCTYPE html></code>, les navigateurs afficheront votre document en <a href="/fr/docs/Mode_quirks_de_Mozilla"><em>mode quirks</em></a>. Le mode <em>quirks</em> est le mode utilisé par le navigateur pour afficher les documents anciens ou malformés, écrits dans les années 1990 lorsque HTML était peu (voire pas du tout) standardisé et que chaque navigateur gérait HTML à sa façon.</p>
<p>Le <em>doctype</em> déclenche l'utilisation du mode <em>standard</em>. Cela fait que la page sera affichée de façon prévisible et cohérente par rapport aux standards définis par le {{glossary("W3C")}} et le {{glossary("WHATWG")}}. Cela signifie également que les navigateurs gèrent les erreurs de façon standard, prévisible et homogène.</p>
<div class="warning">
<p><strong>Attention :</strong> Le <em>doctype</em> doit commencer le document HTML avant toute autre chose (pas de commentaires HTML, pas de sauts de ligne, pas de blancs). Certains navigateurs historiques seront très pointilleux à ce sujet et mieux vaut donc respecter cette règle.</p>
</div>
<h2 id="L'élément_<html>">L'élément <code><html></code></h2>
<p>Tout le document (en dehors du <em>doctype</em>) est contenu entre les balises <code><html></code> et <code></html></code>. Il ne peut y avoir qu'un seul élément {{HTMLElement('html')}} par document.</p>
<div class="note">
<p>Il est possible d'oublier <code><html></code> et le navigateur le comprendra de façon implicite. Cependant, afin de pouvoir manipuler le document dans son ensemble, <code><html></code> sera nécessaire. Par exemple, on utilise <code><html lang="fr"></code> pour indiquer que le document entier est écrit en français. De la même façon, <code><html></code> permettra d'appliquer une mise en forme sur tout le document grâce à CSS.</p>
</div>
<h2 id="Les_éléments_<head>_et_<body>">Les éléments <code><head></code> et <code><body></code></h2>
<p>Au sein de l'élément <code><html></code>, le document aura une « tête » (<em>head</em> en anglais) située entre les balises <code><head></code> et <code></head></code> et un « corps » (<em>body</em> en anglais) situé entre les balises <code><body></code> et <code></body></code>.</p>
<p>La tête de la page contient les méta-données (c'est-à-dire les données qui décrivent le document) mais pas le contenu principal affiché pour l'utilisateur. Ces méta-données peuvent être utilisées par les moteurs de recherches, pour ajouter des liens vers des feuilles de style CSS, etc. Dans la section qui suit, nous verrons les contenus les plus importants pour cet élément : le titre et la déclaration du jeu de caractères.</p>
<p>Le corps contient le contenu affiché pour l'utilisateur. C'est donc sur cet élément qu'on s'attardera le plus.</p>
<div class="note">
<p>HTML est très souple à propos de la structure du document, si vous oubliez les éléments <code><head></code> et <code><body></code>, ils seront implicitement ajoutés. Voici un document sans <code><html></code> ni <code><head></code> ni <code><body></code> :</p>
<pre class="brush: html"><!DOCTYPE html>
<title>Ceci est un document HTML</title>
Coucou monde ! (<i>Hello world!</i>)
</pre>
<p>Le navigateur s'occupera de tout :</p>
<p><img alt="[Screenshot of the browser making its best guess]" src="https://mdn.mozillademos.org/files/11675/Capture%20du%202015-10-04%2017-23-03.png" style="height: 254px; width: 873px;"></p>
<p>Même si le navigateur prend soin d'ajouter les balises qui manquent : c'est une mauvaise idée de les oublier. Si vous continuez sur cette voie et que votre contenu devient plus complexe, vous devrez faire confiance au navigateur pour déterminer ce qui est la tête et ce qui est le corps. En explicitant où est <code><head></code> et où est <code><body></code>, vous gagnerez plus de temps.</p>
</div>
<h2 id="L'élément_<title>_le_titre_du_document">L'élément <code><title></code> : le titre du document</h2>
<p>Dans la tête du document, on écrira un titre concis et équivoque qui décrit le document. Il faut que le titre ait du sens sans autre contexte. Récapitulons, voici où va le titre :</p>
<pre class="brush: html"><!DOCTYPE html>
<html>
<head>
<title>Mon fabuleux exemple HTML</title>
...
</head>
<body>
...
</body>
</html></pre>
<p>Le titre ne doit contenir que du texte (aucun élément ne sera interprété dans <code><title></code>).</p>
<div class="note">
<p>Là encore, libre à vous de ne pas indiquer le titre et d'en subir les conséquences. Le titre d'un document est notamment utilisé dans les résultats des moteurs de recherche et pour indiquer le propos du document. De plus, les navigateurs graphiques utiliseront les titres pour les libellés des onglets.</p>
<p>S'il n'y a pas de titre, les navigateurs et les moteurs de recherches construiront eux-mêmes le texte, ce qui ne sera pas très parlant :</p>
<pre class="brush: html"><!DOCTYPE html>
<!-- Pas de titre ici -->
Hello world!
</pre>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Chrome</th>
<td><img alt="[Screenshot of a Chrome tab labeled ''index.html'']" src="https://mdn.mozillademos.org/files/10887/index-ch.png" style="height: 147px; width: 400px;"></td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="col">Firefox</th>
<td><img alt="[Screenshot of a Firefox tab labeled with the HTML document's entire path and filename]" src="https://mdn.mozillademos.org/files/11143/index-ff.png"></td>
</tr>
</tbody>
</table>
</div>
<dl>
<dt>
<h2 id="Définir_le_jeu_de_caractères_utilisé">Définir le jeu de caractères utilisé</h2>
</dt>
</dl>
<p>Les ordinateurs enregistrent toutes les informations sous forme de zéros et de uns. Tous les nombres sont, au final, exprimé en base 2 (c'est-à-dire au format binaire). Pour exprimer d'autres valeurs, il est nécessaire de s'accorder sur un format de représentation qui définit la correspondance entre telle valeur binaire et telle valeur à représenter.</p>
<p>Heureusement, lorsqu'il s'agit de représenter des chaînes de caractères, il existe un standard appelé {{glossary("UTF-8")}} qui permet d'associer des nombres binaires à l'ensemble des glyphes contenus dans les différents langages humains. On peut donc dire, sans ambiguité, que "A" sera stocké avec la valeur "65", ce qui correspond, en écriture binaire, au nombre "01000001". </p>
<p>D'autres formes d'encodage sont encore utilisées par ailleurs, aussi, pour garantir le résultat obtenu, on déclare explicitement qu'on utilise UTF-8 dans le fichier HTML. C'est pour cette raison que nous avons ajouté <code><meta charset="utf-8"></code> dans l'exemple ci-avant.</p>
<div class="note">
<p><strong>Note :</strong> En plus de cette déclaration, il faut également enregistrer le fichier HTML avec l'encodage UTF-8. Généralememnt, vous trouverez une option dans le menu « Enregistrer sous… » qui permet de définir l'encodage à utiliser lors de l'enregistrement.</p>
<p>Voici ce qui se produit si on utilise un document HTML encodé en ISO-8859-1 et non en UTF-8. Le navigateur affichera � à la place des lettres accentuées :</p>
<p><img alt="[Screenshot showing the browser displaying ''Les Fran?ais utilisent des lettres accentu?es'']" src="https://mdn.mozillademos.org/files/10907/index-encoding.png" style="height: 132px; width: 335px;"></p>
</div>
<h2 id="Modèles_et_gabarits">Modèles et gabarits</h2>
<p>Au fur et à mesure que vous créerez vos document HTML, vous remarquerez que la même structure revient encore et toujours… et que c'est pénible de la saisir à chaque fois. Pour épargner du temps, vous pouvez sauvegarder ce code dans un fichier modèle que vous pourrez utiliser à chaque fois que vous aurez besoin d'une nouvelle page HTML (pour laquelle il suffira de copier le modèle plutôt que de retaper le code correspondant).</p>
<p>Vous pouvez mettre en place des modèles personnalisés pour les différents projets que vous avez. Cela vous permettra d'éviter d'écrire à chaque fois la même chose pour les barres de navigation, les liens vers les feuilles de styles ou du code qui est réutilisé pour chaque page d'un site (certaines sociétés travaillent même à créer, fournir et vendre des modèles de fichiers HTML).</p>
<div class="note">
<p><strong>Astuce :</strong> Si votre éditeur de texte permet de gérer les <em>snippets</em> (fragments de code), vous pouvez placer votre modèle dans un <em>snippet</em> pour l'invoquer rapidement et générer un début de document à la vitesse de la lumière.</p>
</div>
<div class="note">
<p><strong>Astuce :</strong> À un certain moment, vous serez devenu-e très familier-e avec HTML. Lorsque ce sera le cas, n'hésitez pas à consulter le projet <a href="https://html5boilerplate.com/">HTML5 Boilerplate</a>. Celui-ci décrit des <em>templates</em> (modèles) avancés de documents HTML, construits avec les meilleures pratiques du développement web.</p>
</div>
<h2 id="Exercices">Exercices</h2>
<p>À construire, <a href="/fr/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">n'hésitez pas à contribuer !</a></p>
|
