path: root/files/fr/apprendre/html/écrire_une_simple_page_html/index.html

---
title: Écrire une simple page HTML
slug: Apprendre/HTML/Écrire_une_simple_page_HTML
tags:
  - Beginner
  - CodingScripting
  - Guide
  - HTML
  - Learn
  - Web Development
translation_of: Learn/Getting_started_with_the_web
---
<div class="summary">
<p>Dans ceta rticle, vous apprendrez à créer une page web simple grâce à {{Glossary("HTML")}}.</p>
</div>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prérequis :</th>
   <td>Vous devez au préalable avoir <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">un éditeur de texte</a> et savoir <a href="/en-US/docs/Learn/Open_a_file_in_a_browser">comment ouvrir un fichier dans un navigateur</a>.</td>
  </tr>
  <tr>
   <th scope="row">Objectifs :</th>
   <td>Créer une page web que vous pourrez visualiser dans votre navigateur.</td>
  </tr>
 </tbody>
</table>

<p>La plus simple des pages web est simplement un fichier {{Glossary("HTML")}} valide. Il suffit donc d'un fichier HTML valide, d'un éditeur de texte et d'un navigateur web. Dans cet article, nous verrons comment utiliser {{Glossary("Balise","quelques balises")}} HTML et comment voir la page dans un navigateur.</p>

<h2 id="Pédagogie_active">Pédagogie active</h2>

<p>Tout d'abord, assurez-vous d'avoir un navigateur web et un éditeur de texte avec lequel vous êtes à l'aise. Pour cet article, n'importe quel éditeur de texte conviendra (que ce soit Bloc-notes pour Windows, TextEdit pour Mac ou gedit pour GNU/Linux voire un autre). Une seule remarque : assurez-vous de bien créer des fichiers textes simples, sous TextEdit notamment, vous pouvez choisir l'option « Texte simple » dans le menu « Format ».</p>

<h3 id="Première_étape_un_fichier">Première étape : un fichier</h3>

<p>Une page web est, au strict minimum, un fichier HTML. Nous commencerons donc par en créer un. Lancez votre éditeur de texte puis saisissez le texte suivant :</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Coucou&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  Cette page est une
  page toute simple
  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>Vous pouvez éditer ce fichier comme vous le souhaitez en modifiant par exemple le texte dans les balises <code>title</code> ou <code>body</code>. Lorsque vous enregistrez le fichier, assurez-vous de l'enregister avec l'extension « .html ». Par exemple, le fichier peut être intitulé  « ma_page.html ».</p>

<p>Une fois que vous avez enregistré ce fichier sur votre ordinateur, vous devriez obtenir quelque chose qui ressemble à cette capture (bien entendu, l'allure dépendra de votre système d'exploitation et de votre configuration) :</p>

<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/11729/Capture%20du%202015-10-12%2009-32-59.png" style="height: 127px; width: 273px;"></p>

<p>Si vous double-cliquez sur le fichier, celui-ci s'ouvrira dans votre navigateur. Pour ouvrir le fichier dans votre éditeur de texte afin de le modifier, vous pouvez cliquez-droit et choisir le logiciel avec lequel ouvrir le fichier (ici l'éditeur de texte) (sinon, vous pouvez glisser-déposer le fichier dans votre éditeur ou encore choisir de l'ouvrir depuis l'éditeur grâce à l'option « Ouvrir » qui se situe généralement dans le menu « Fichier »). Selon l'éditeur que vous utilisez, vous devriez avoir quelque chose qui ressemble à :</p>

<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/11731/Capture%20du%202015-10-12%2009-37-47.png" style="height: 241px; width: 517px;"></p>

<h3 id="Deuxième_étape_un_navigateur_web">Deuxième étape : un navigateur web</h3>

<p>Dans votre explorateur de fichiers (Windows Explorer sur Windows, Finder sur Mac ou Fichiers sur Ubuntu), repérez le fichier que vous avez créé et ouvrez-le dans votre navigateur web (en double-cliquant dessus ou en glissant-déposant le fichier sur l'icône du navigateur). Le navigateur affiche alors le texte du fichier HTML que vous avez créé et l'onglet affiche le titre de la page. Selon le navigateur et la plateforme que vous utilisez, cela devrait ressembler à :</p>

<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/11733/Capture%20du%202015-10-12%2009-41-27.png" style="border-style: solid; border-width: 1px; height: 111px; width: 462px;"></p>

<p>Vous pouvez voir le contenu de la page et le titre dans l'onglet. Toutefois, on voit qu'il n'y a pas de saut de ligne… intéressant.</p>

<h3 id="Troisième_étape_à_vous_de_jouer_!">Troisième étape : à vous de jouer !</h3>

<p>Essayez de manipuler le fichier HTML dans tous les sens en ajoutant du texte, en retirant des morceaux pour voir ce que ça donne. Certaines modifications n'empêcheront pas la page de s'afficher dans le navigateur, d'autres en revanche casseront la page et causeront des problèmes d'affichage. Vous verrez alors que le navigateur essaie de corriger certains problèmes.</p>

<p>La première chose que vous devriez avoir remarqué est que le texte qui est affiché à l'écran est uniquement le texte qui n'est pas contenu entre des chevrons ouvrants et fermants (« &lt; » et « &gt; »). Tout le texte contenu entre ces chevrons forme des {{Glossary("balises")}} qui représentent la structure (ou le squelette) de la page. Tout le contenu affiché est situé à l'intérieur de ces balises.</p>

<p>Dans notre page d'exemple, on a deux sections : un en-tête contenu dans le bloc {{HTMLElement("head")}} et un « corps » contenu dans le bloc {{HTMLElement("body")}}. Le corps contient le texte qui est affiché sur la page.</p>

<p>Chaque balise possède une signification particulière et doit être utilisée à bon escient. Par exemple, {{HTMLElement("title")}} est utilisé afin d'indiquer le titre d'une page (qui peut être différent du nom utilisé pour le fichier). On remarque aussi que des balises sont imbriquées dans d'autres balises : {{HTMLElement("title")}} est par exemple contenue dans {{HTMLElement("head")}}.</p>

<p>Si vous souhaitez ajouter quelque chose à votre page, une image par exemple, vous devrez ajouter une balise pour l'image :</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Coucou&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    Cette page est une
    page toute simple
    &lt;img src="licorne.png" alt="Une image de licorne :)" /&gt;
    avec une licorne
  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>Pour obtenir ce résultat, il suffit d'éditer le fichier HTML vu précédemment et d'y ajouter la ligne suivante avec {{HTMLelement("img")}} :</p>

<pre class="brush: html">&lt;img src="licorne.png" alt="Une image de licorne :)" /&gt;</pre>

<p>Cet élément peut être placé n'importe où dans l'élément {{HTMLElement("body")}}. N'oubliez pas de sauvegarder la page que vous avez modifiée !</p>

<p>Ensuite, vous devrez ajouter un fichier intitulé "licorne.png" dans le même répertoire que votre fichier HTML. Une fois que c'est fait, rafraîchissez la page dans votre navigateur web (ou réouvrez le fichier dans le navigateur. Vous devriez alors voir la page qui a changé et qui contient une image (n'oubliez pas de sauvegarder votre fichier HTML).</p>

<p><img alt="Original file for the unicorn image" src="https://mdn.mozillademos.org/files/8495/unicorn_pic.png" style="height: 300px; width: 242px;"></p>

<div class="note">
<p><strong>Note :</strong> Vous pouvez télécharger cette image depuis cette page en cliquant-droit sur l'image et en choisissant l'option « Enregistrer l'image sous » du menu contextuel.</p>
</div>

<p>Pour que cet exemple fonctionne, vous aurez besoin d'avoir les fichier organisés de cette façon sur votre ordinateur :</p>

<p><img alt="Screenshot of the explorer with 2 files : a html file and a picture file" src="https://mdn.mozillademos.org/files/11735/Capture%20du%202015-10-12%2009-56-10.png" style="height: 167px; width: 289px;"></p>

<p>La page obtenue devrait alors ressembler à :</p>

<p><img alt="Screenshot for the example with a picture" src="https://mdn.mozillademos.org/files/11737/Capture%20du%202015-10-12%2009-57-54.png" style="border-style: solid; border-width: 1px; height: 410px; width: 740px;"></p>

<p>Vous avez pu voir que l'élément{{HTMLElement("img")}} avait des <strong>{{Glossary("attribut","attributs")}}</strong> : ceux-ci permettent de fournir des informations supplémentaires afin de construire l'objet à afficher (dans ce cas, un attribut permet de connaître le nom du fichier à utiliser pour l'image et un autre permet de fournir un texte alternatif qui peut être affiché lorsque l'image ne peut être chargée).</p>

<p>Cet exemple illustre comment ajouter une image ) votre page web mais vous pouvez utiliser des techniques semblables pour ajouter des musiques, des vidéos et d'autres éléments, rien qu'en utilisant HTML.</p>

<h2 id="Aller_plus_loin">Aller plus loin</h2>

<h3 id="Ce_n'est_pas_la_plus_jolie_des_pages_web…">Ce n'est pas la plus jolie des pages web…</h3>

<p>Comme vous avez pu le voir, cette page web n'est pas non plus un canon de beauté. Cela s'explique car HTML gère uniquement le contenu et sa signification (aussi appelée « sémantique »), il ne gère pas la mise en forme (le « <em>design</em> ») de la page.</p>

<p>{{Glossary("CSS")}} permet d'enjoliver le contenu en ajoutant des couleurs, en gérant des polices, la mise en page, etc. HTML serea suffisant pour créer des pages web simples. En revanche, pour créer des pages plus complexes ou plus attractives, il faudra appeler CSS voire {{Glossary("JavaScript")}} à la rescousse. HTML permet de construire le contenu, CSS permet de le mettre en forme et JavaScript permet de le rendre dynamique.</p>

<p>Utilisons CSS pour que le texte de la page soit affiché en bleu :</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Coucou&lt;/title&gt;
        &lt;style&gt;
           body {
             color: blue;
           }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;Voici du texte bleu&lt;/p&gt;
        &lt;img alt="Une image de licorne :)" src="licorne.png"/&gt;
    &lt;/body&gt;
&lt;/html&gt;</pre>

<p>Ici, on a ajouté l'élément {{HTMLElement("style")}} à l'élément {{HTMLElement("head")}}. Celui-ci permettra de définir le CSS à appliquer au texte présent dans le corps de la page.</p>

<p>Vous aimeriez que votre texte soit souligné ? Vous pouvez ajouter la règle <code>text-decoration: underline;</code> :</p>

<pre class="brush: css">body {
  color: blue;
  text-decoration: underline;
}</pre>

<p>Si vous souhaitez que votre texte ait une taille donnée, vous pouvez ajouter <code>font-size: 42px;</code> comme ceci :</p>

<pre class="brush: css">body {
  color: blue;
  text-decoration: underline;
  font-size: 42px;
}</pre>

<p>Au final, le code obtenu ressemblera à :</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Coucou&lt;/title&gt;
        &lt;style&gt;
           body {
             color: blue;
             text-decoration: underline;
             font-size: 42px;
           }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;Voici du texte bleu&lt;/p&gt;
        &lt;img alt="Une image de licorne :)" src="licorne.png"/&gt;
    &lt;/body&gt;
&lt;/html&gt;</pre>

<p>Si vous sauvegardez la page dans votre éditeur puis que vous rafraîchissez la page dans le navigateur, vous devriez pouvoir voir quelque chose comme :</p>

<p><img alt="Screenshot of the browser with the page with some CSS" src="https://mdn.mozillademos.org/files/11739/Capture%20du%202015-10-12%2010-16-45.png" style="border-style: solid; border-width: 1px; height: 514px; width: 446px;"></p>

<h3 id="Avoir_deux_pages_web">Avoir deux pages web</h3>

<p>Lorsque vous naviguez sur le Web, vous rencontrez souvent des {{Glossary("hyperliens","liens")}}. Ceux-ci permettent de naviguer de page en page. Comme nous l'avons vu avant, HTML s'occupe principalement du contenu d'une page. Or, les liens sont une forme de contenu. Autrement dit : il est possible de créer des liens en utilisant uniquement HTML.</p>

<h4 id="Créer_un_lien_entre_deux_pages_locales">Créer un lien entre deux pages locales</h4>

<p>Dans cet exercice, nous aurons besoin de deux fichiers HTML. Nous ajouterons un lien dans chacune de ces pages afin de pouvoir passer de l'une à l'autre.</p>

<p>Dans le premier fichier, vous pouvez conserver la même structure que précédemment. Le plus important est d'ajouter une nouvelle balise {{HTMLElement("a")}} de cette façon:</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Page 1&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;Ici la page 1.
    &lt;a href="page2.html" title="Vers la page 2"&gt;Que se passe-t-il page 2 ?&lt;/a&gt;&lt;/body&gt;
&lt;/html&gt;</pre>

<p>La deuxième page, quant à elle, contient un lien vers la première :</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Page 2 :)&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;Ici la page 2.
    &lt;a href="page1.html" title="Vers la page 1"&gt;Souhaitez-vous revenir vers la page 1 ? Cliquez-ici&lt;/a&gt;&lt;/body&gt;
&lt;/html&gt;</pre>

<div class="note">
<p><strong>Note :</strong> Assurez-vous que les noms de fichiers définis dans les balises {{HTMLElement("a")}} avec les attributs <code>href</code> correspondent bien aux noms des fichiers que vous avez sur votre ordinateur.</p>
</div>

<p>Dans votre navigateur, vous pouvez alors naviguer entre les deux documents HTML. Ouvrez la première page dans le navigateur puis cliquez sur le lien pour accéder à la deuxième page et <em>vice versa</em>. Vous pouvez également utiliser le bouton « Précédent » de votre navigateur pour revenir à la page que vous consultiez précédemment.</p>

<p>Pour cet exercice, votre gestionnaire de fichiers devrait avoir deux fichiers HTML placés dans le même répertoire :</p>

<p><img alt="Screenshot of the file explorer with two HTML documents in one directory/folder" src="https://mdn.mozillademos.org/files/11741/Capture%20du%202015-10-12%2010-33-15.png" style="height: 211px; width: 288px;"></p>

<p>Dans le navigateur web, la page 1 ressemblera à  :</p>

<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/11743/Capture%20du%202015-10-12%2010-34-56.png" style="border-style: solid; border-width: 1px; height: 112px; width: 455px;"></p>

<p>Après avoir cliqué sur le lien, on arrive sur la page 2 :</p>

<p><img alt="Screenshot of the 2nd page of the 2 pages example in the browser" src="https://mdn.mozillademos.org/files/11747/Capture%20du%202015-10-12%2010-38-17.png" style="border-style: solid; border-width: 1px; height: 152px; width: 559px;"></p>

<div class="note">
<p><strong>Note :</strong> On remarque que le lien sur la page 2 est violet. De cette façon, le navigateur montre que vous avez déjà visité la page 1 (en quelque sorte, le navigateur garde en mémoire les pages et l'affiche de cette façon).</p>
</div>

<p>Si vous voulez, vous pouvez très bien continuer cet exercice avec plus de deux pages. Vous pouvez également poursuivre la lecture de cet article pour compléter ce que nous avons vu jusqu'à présent.</p>

<h4 id="Ajouter_un_lien_vers_un_autre_site_web">Ajouter un lien vers un autre site web</h4>

<p>Dans cet exercice, nous ajouterons un lien dans le fichier HTML afin que le visiteur du site puisse se rendre facilement sur une autre page web complémentaire. Il est possible d'ajouter un lien vers n'importe quelle page publique sur le Web. Pour cet exemple, nous ajouterons un lien vers Wikipédia :</p>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"/&gt;
    &lt;title&gt;Ma page&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;Il était une fois,...Les licornes sont superbes... La fin.
    &lt;a href="https://fr.wikipedia.org/wiki/Licorne" title="Page Wikipédia sur les licornes"&gt;Vous voulez en savoir plus sur les licornes ? Wikipédia est à portée de clic.&lt;/a&gt;&lt;/body&gt;
&lt;/html&gt;</pre>

<p>Dans le navigateur, cela devrait ressembler à :</p>

<p><img alt="Screenshot of the example page with a link to Wikipedia in the browser" src="https://mdn.mozillademos.org/files/11751/Capture%20du%202015-10-12%2010-53-24.png" style="height: 196px; width: 1103px;"></p>

<p>Lorsque vous passez votre souris sur le lient, vous verrez que le texte contenu dans l'attribut {{htmlattrxref("title")}} est affiché dans une <strong>bulle d'informations</strong>. Ce texte peut être utilisé afin de fournir plus d'informations sur le lien pour aider l'utilisateur à déterminer s'il est utile de cliquer sur le lien ou non.</p>

<div class="note">
<p><strong>Rappel :</strong> À chaque fois que vous modifiez la page, n'oubliez pas de sauvegarder le fichier dans votre éditeur et de rafraîchir la page dans votre navigateur afin de visualiser vos modifications.</p>
</div>

<h2 id="Prochaines_étapes">Prochaines étapes</h2>

<ul>
 <li><a href="/fr/Apprendre/HTML/Balises_HTML">Comment utiliser les balises HTML</a> : Il existe plus d'une centaine de balises HTML et nous n'en avons vu qu'une infime partie. Dans ce nouvel article vous trouverez de nouvelles ressources sur ce qu'il est possible de faire avec HTML.</li>
 <li><a href="/fr/Apprendre/Concevoir_page_web">L'anatomie d'une page web</a> : HTML doit respecter certaines règles qui permettent d'organiser une page avec beaucoup de contenu. Cet article vous aidera à déchiffrer les pages les plus complexes comme celles qui sont utilisées sur des sites connus !</li>
 <li><a href="/fr/Apprendre/Le_fonctionnement_des_liens_sur_le_Web">Comprendre le fonctionnement des liens</a> : Ici, nous avons utiliser des liens très simples, dans cet article, vous pourrez comprendre pourquoi les liens sont à l'origine de la Toile (<em>Web</em>).</li>
 <li><a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_%C3%A0_une_page_web">Utiliser des images</a> et <a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_contenu_audio_vid%C3%A9o_page_web">ajouter des fichiers audio et vidéo</a> permettent qu'une page web ne contienne pas que du texte mais aussi des éléments multimédia grâce à HTML.</li>
</ul>