diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-11-14 14:30:47 +0100 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-15 07:48:59 +0100 |
| commit | faa96e657621455284245018b8a3b5050b613e6b (patch) | |
| tree | a307a407e4b101b688fee89af9959001a9aae187 /files/fr/learn/html/introduction_to_html | |
| parent | e26d24940b2234a1a5e63b19d19d298bf36354e2 (diff) | |
| download | translated-content-faa96e657621455284245018b8a3b5050b613e6b.tar.gz translated-content-faa96e657621455284245018b8a3b5050b613e6b.tar.bz2 translated-content-faa96e657621455284245018b8a3b5050b613e6b.zip | |
convert content to md
Diffstat (limited to 'files/fr/learn/html/introduction_to_html')
10 files changed, 1867 insertions, 1772 deletions
diff --git a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md index d3602ccd19..b2b2eb37ee 100644 --- a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md +++ b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md @@ -15,99 +15,112 @@ tags: translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting original_slug: Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}} -<div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}</div> - -<p>Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article<a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals"> Les concepts fondamentaux du HTML liés au texte</a>. Les éléments abordés ici sont moins connus mais tout aussi utiles (et ce n'est aucunement une liste complète). Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.</p> +Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article[ Les concepts fondamentaux du HTML liés au texte](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals). Les éléments abordés ici sont moins connus mais tout aussi utiles (et ce n'est aucunement une liste complète). Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Être familiarisé avec les bases du HTML, traitées à la page <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a> et du formatage de texte HTML, décrit dans les <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a>.</td> - </tr> - <tr> - <th scope="row">Objectifs :</th> - <td>Apprendre comment utiliser des éléments HTML moins connus pour baliser des fonctions sémantiques avancées.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Être familiarisé avec les bases du HTML, traitées à la page + <a + href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started" + >Commencer avec le HTML</a + > + et du formatage de texte HTML, décrit dans les + <a + href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals" + >Fondamentaux du texte HTML</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td> + Apprendre comment utiliser des éléments HTML moins connus pour baliser + des fonctions sémantiques avancées. + </td> + </tr> + </tbody> </table> -<h2 id="Listes_descriptives">Listes descriptives</h2> +## Listes descriptives + +Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser [des listes simples en HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#lists), mais sans mentionner le troisième type de liste que vous rencontrerez à l'occasion — **les listes descriptives**. L'objectif de ces listes est de marquer une série d'éléments et leurs descriptions associées, comme termes et définition, ou bien questions et réponse. Voici l'exemple d'un ensemble de termes et leur définitions : -<p>Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#lists">des listes simples en HTML</a>, mais sans mentionner le troisième type de liste que vous rencontrerez à l'occasion — <strong>les listes descriptives</strong>. L'objectif de ces listes est de marquer une série d'éléments et leurs descriptions associées, comme termes et définition, ou bien questions et réponse. Voici l'exemple d'un ensemble de termes et leur définitions :</p> + soliloque + Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce). + monologue + Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents. + aparté + Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte. -<pre>soliloque -Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce). -monologue -Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents. -aparté -Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</pre> +Les listes descriptives utilisent une enveloppe de balisage différente de celle des autres types de listes — {{htmlelement("dl")}} ; chaque terme est en plus entouré d'un élément {{htmlelement("dt")}} (**d**escription **t**erm) et chaque description d'un élément {{htmlelement("dd")}} (**d**escription **d**efinition). Terminons en balisant l'exemple ci‑dessus : + +```html +<dl> + <dt>soliloque</dt> + <dd>Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).</dd> + <dt>monologue</dt> + <dd>Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.</dd> + <dt>aparté</dt> + <dd>Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</dd> +</dl> +``` -<p>Les listes descriptives utilisent une enveloppe de balisage différente de celle des autres types de listes — {{htmlelement("dl")}} ; chaque terme est en plus entouré d'un élément {{htmlelement("dt")}} (<strong>d</strong>escription <strong>t</strong>erm) et chaque description d'un élément {{htmlelement("dd")}} (<strong>d</strong>escription <strong>d</strong>efinition). Terminons en balisant l'exemple ci‑dessus :</p> +Les styles par défaut du navigateur vont afficher les listes de définition avec des descriptions indentées par rapport aux termes. les styles de MDN suivent de très près cette convention, mais soulignent davantage les définitions en les mettant en gras. -<pre class="brush: html"><dl> - <dt>soliloque</dt> - <dd>Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).</dd> - <dt>monologue</dt> - <dd>Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.</dd> - <dt>aparté</dt> - <dd>Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</dd> -</dl></pre> +- soliloque + - : Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce). +- monologue + - : Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents. +- aparté + - : Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte. -<p>Les styles par défaut du navigateur vont afficher les listes de définition avec des descriptions indentées par rapport aux termes. les styles de MDN suivent de très près cette convention, mais soulignent davantage les définitions en les mettant en gras.</p> +Notez qu'il est autorisé d'avoir un terme seul avec de multiples descriptions, par exemple : +```html <dl> - <dt>soliloque</dt> - <dd>Dans une pièce de théâtre, action d'un acteur adressant à lui-même ses pensées ou sentiments intimes et, de la sorte, les faisant partager à son auditoire (mais pas aux autres personnages de la pièce).</dd> - <dt>monologue</dt> - <dd>Dans une pièce de théâtre, action d'un acteur partageant ses pensées à haute voix avec le public et tous les personnages présents.</dd> <dt>aparté</dt> <dd>Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</dd> + <dd>En écriture, une partie de contenu relative au sujet en cours, mais qui, ne s'inscrivant pas dans le flux principal du contenu, est donc présentée à part (souvent dans un encadré sur le côté).</dd> </dl> +``` -<p>Notez qu'il est autorisé d'avoir un terme seul avec de multiples descriptions, par exemple :</p> - -<pre class="brush: html"> -<dl> - <dt>aparté</dt> - <dd>Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte.</dd> - <dd>En écriture, une partie de contenu relative au sujet en cours, mais qui, ne s'inscrivant pas dans le flux principal du contenu, est donc présentée à part (souvent dans un encadré sur le côté).</dd> -</dl> -</pre> +### Apprentissage interactif : balisez une série de définitions -<h3 id="Apprentissage_interactif_balisez_une_série_de_définitions">Apprentissage interactif : balisez une série de définitions</h3> +Il est temps de se faire la main sur les listes de définitions ; ajoutez les élements au texte brut dans le champ _Code modifiable_ pour que faire apparaître une liste de définitions dans la _Zone de rendu_. Vous pouvez essayer en utilisant vos propes termes et définitions si vous le souhaitez. -<p>Il est temps de se faire la main sur les listes de définitions ; ajoutez les élements au texte brut dans le champ<em> Code modifiable</em> pour que faire apparaître une liste de définitions dans la <em>Zone de rendu</em>. Vous pouvez essayer en utilisant vos propes termes et définitions si vous le souhaitez.</p> +Si vous faites une erreur, vous pouvez toujours réinitialiser grace au bouton _Réinitialiser_. Si vous êtes vraiment bloqué, cliquez sur _Voir la solution_. -<p>Si vous faites une erreur, vous pouvez toujours réinitialiser grace au bouton <em>Réinitialiser</em>. Si vous êtes vraiment bloqué, cliquez sur<em> Voir la solution</em>.</p> +```html hidden +<h2>Zone de rendu</h2> -<pre class="brush: html hidden"><h2>Zone de rendu</h2> - -<div class="output" style="min-height: 50px;"> -</div> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> -<textarea id="code" class="input" style="min-height: 100px; width: 95%"> +<textarea id="code" class="input" style="min-height: 100px; width: 95%"> Bacon Le ciment qui unit le monde. Œufs Le liant des gâteaux. Café La boisson qui fait courir le monde le matin. -Une couleur brun léger.</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Voir la solution"> -</div></pre> - +Une couleur brun léger.</textarea> +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -125,11 +138,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> - - +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -159,7 +172,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<dl>\n <dt>Bacon</dt>\n <dd>Le ciment qui unit le monde.</dd>\n <dt>Œufs</dt>\n <dd>Le liant des gâteaux.</dd>\n <dt>Café</dt>\n <dd>La boisson qui fait courir le monde le matin.</dd>\n <dd>Une couleur brun léger.</dd>\n</dl>'; +var htmlSolution = '<dl>\n <dt>Bacon</dt>\n <dd>Le ciment qui unit le monde.</dd>\n <dt>Œufs</dt>\n <dd>Le liant des gâteaux.</dd>\n <dt>Café</dt>\n <dd>La boisson qui fait courir le monde le matin.</dd>\n <dd>Une couleur brun léger.</dd>\n</dl>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -205,104 +218,112 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> +}; +``` -<p>{{ EmbedLiveSample('Apprentissage_interactif_balisez_une_série_de_définitions', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p> +{{ EmbedLiveSample('Apprentissage_interactif_balisez_une_série_de_définitions', 700, 350, "", "", "hide-codepen-jsfiddle") }} -<h2 id="Citations">Citations</h2> +## Citations -<p>Le HTML possède également des fonctionnalités pour marquer les citations. Le choix de l'élément à utiliser dépend du type de citation : en ligne ou par bloc.</p> +Le HTML possède également des fonctionnalités pour marquer les citations. Le choix de l'élément à utiliser dépend du type de citation : en ligne ou par bloc. -<h3 id="Blocs_de_citation">Blocs de citation</h3> +### Blocs de citation -<p>Si une section ou un contenu de niveau bloc (que ce soit un paragraphe, de multiples paragraphes, une liste, etc.) est cité depuis une autre origine, vous pouvez le signaler en le mettant dans un élément {{htmlelement("blockquote")}} et en incluant une URL qui pointe vers la source de la citation dans un attribut {{htmlattrxref("cite","blockquote")}}. Par exemple, le balisage suivant provient de la page MDN pour l'élément <code><blockquote></code> :</p> +Si une section ou un contenu de niveau bloc (que ce soit un paragraphe, de multiples paragraphes, une liste, etc.) est cité depuis une autre origine, vous pouvez le signaler en le mettant dans un élément {{htmlelement("blockquote")}} et en incluant une URL qui pointe vers la source de la citation dans un attribut {{htmlattrxref("cite","blockquote")}}. Par exemple, le balisage suivant provient de la page MDN pour l'élément `<blockquote>` : -<pre class="brush: html"><p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc -de citation</em>) indique que le bloc de texte inclus est une citation étendue.</p></pre> +```html +<p>L'<strong>Élément HTML <code><blockquote></code></strong> (ou <em>Élément HTML bloc +de citation</em>) indique que le bloc de texte inclus est une citation étendue.</p> +``` -<h4>Exemple de bloc de citation</h4> -<p>Pour le changer en bloc de citation, on ferait simplement ceci :</p> +#### Exemple de bloc de citation -<pre class="brush: html"><blockquote cite="/fr/docs/Web/HTML/Element/blockquote"> - <p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc de citation</em>) - indique que le bloc de texte inclus est une citation étendue.</p> -</blockquote></pre> +Pour le changer en bloc de citation, on ferait simplement ceci : -<p>Le navigateur l'affichera par défaut sous forme d'un paragraphe indenté, avec l'indication qu'il s'agit d'une citation ; MDN agit de même et y ajoute un style personnalisé :</p> -<p>{{EmbedLiveSample("Blocs_de_citation")}}</p> +```html +<blockquote cite="/fr/docs/Web/HTML/Element/blockquote"> + <p>L'<strong>Élément HTML <code><blockquote></code></strong> (ou <em>Élément HTML bloc de citation</em>) + indique que le bloc de texte inclus est une citation étendue.</p> +</blockquote> +``` -<h3 id="Citations_en_ligne">Citations en ligne</h3> +Le navigateur l'affichera par défaut sous forme d'un paragraphe indenté, avec l'indication qu'il s'agit d'une citation ; MDN agit de même et y ajoute un style personnalisé : -<p>Les citations en ligne fonctionnent exactement de la même manière, sauf que l'on utilise l'élément {{htmlelement("q")}}. Par exemple, le balisage suivant contient une citation de la page MDN <code><q></code> :</p> +{{EmbedLiveSample("Blocs_de_citation")}} -<h4>Exemple de citation en ligne</h4> +### Citations en ligne -<pre class="brush: html"><p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="/fr/docs/Web/HTML/Element/q">prévu -pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p></pre> +Les citations en ligne fonctionnent exactement de la même manière, sauf que l'on utilise l'élément {{htmlelement("q")}}. Par exemple, le balisage suivant contient une citation de la page MDN `<q>` : -<p>Le navigateur l'affichera par défaut comme du texte normal entre guillemets pour indiquer une citation, comme ceci :</p> +#### Exemple de citation en ligne -<p>{{EmbedLiveSample("Exemple_de_citation_en_ligne")}}</p> +```html +<p>L'élément citation — <code><q></code> — est <q cite="/fr/docs/Web/HTML/Element/q">prévu +pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p> +``` -<h3 id="Citations_2">Citations</h3> +Le navigateur l'affichera par défaut comme du texte normal entre guillemets pour indiquer une citation, comme ceci : -<p>Le contenu de l'attribut {{htmlattrxref("cite","blockquote")}} semble utile, malheureusement les navigateurs, lecteurs d'écran, etc. n'en font pas grand chose. Il n'y a pas possibilité de faire afficher différemment au navigateur le contenu d'un <code>cite</code> sans utiliser votre propre JavaScript ou style CSS. Si vous souhaitez rendre disponible la source de la citation sur votre page, la meilleure façon de le faire est d'inclure l'élément {{htmlelement("cite")}} à coté de l'élément citation. Cet élément est vraiment destiné à contenir le nom de la source de la citation — c'est-à-dire le nom du livre ou de la personne auteur de la citation — mais il n'y a aucune raison pour laquelle vous n'avez pas pu lier le texte à l'intérieur de <code><cite></code> à la source de la citation d'une manière ou d'une autre :</p> +{{EmbedLiveSample("Exemple_de_citation_en_ligne")}} -<pre class="brush: html"><p>Selon la <a href="/fr/docs/Web/HTML/Element/blockquote"> -<cite>page blockquote du MDN</cite></a>: -</p> +### Citations -<p>L'<strong>Élément HTML <code>&lt;blockquote&gt;</code></strong> (ou <em>Élément HTML bloc de citation</em>) - indique que le bloc de texte inclus est une citation étendue.</p> +Le contenu de l'attribut {{htmlattrxref("cite","blockquote")}} semble utile, malheureusement les navigateurs, lecteurs d'écran, etc. n'en font pas grand chose. Il n'y a pas possibilité de faire afficher différemment au navigateur le contenu d'un `cite` sans utiliser votre propre JavaScript ou style CSS. Si vous souhaitez rendre disponible la source de la citation sur votre page, la meilleure façon de le faire est d'inclure l'élément {{htmlelement("cite")}} à coté de l'élément citation. Cet élément est vraiment destiné à contenir le nom de la source de la citation — c'est-à-dire le nom du livre ou de la personne auteur de la citation — mais il n'y a aucune raison pour laquelle vous n'avez pas pu lier le texte à l'intérieur de `<cite>` à la source de la citation d'une manière ou d'une autre : -<p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="/fr/docs/Web/HTML/Element/q">prévu - pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p> - — <a href="/fr/docs/Web/HTML/Element/q"> -<cite>page q du MDN</cite></a>.</p></pre> +```html +<p>Selon la <a href="/fr/docs/Web/HTML/Element/blockquote"> +<cite>page blockquote du MDN</cite></a>: +</p> -<p>Les citations sont affichées avec un police italique par défaut. Vous pouvez voir l'affichage de ce code dans l'exemple <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html">quotations.html</a>.</p> +<p>L'<strong>Élément HTML <code><blockquote></code></strong> (ou <em>Élément HTML bloc de citation</em>) + indique que le bloc de texte inclus est une citation étendue.</p> +<p>L'élément citation — <code><q></code> — est <q cite="/fr/docs/Web/HTML/Element/q">prévu + pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p> + — <a href="/fr/docs/Web/HTML/Element/q"> +<cite>page q du MDN</cite></a>.</p> +``` +Les citations sont affichées avec un police italique par défaut. Vous pouvez voir l'affichage de ce code dans l'exemple [quotations.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html). -<h3 id="Apprentissage_actif_Qui_a_dit_quoi">Apprentissage actif : Qui a dit quoi ?</h3> +### Apprentissage actif : Qui a dit quoi ? -<p>Il est temps de faire un autre apprentissage actif ! Dans cet exemple, nous souhaiterions que :</p> +Il est temps de faire un autre apprentissage actif ! Dans cet exemple, nous souhaiterions que : -<ol> - <li>vous marquiez le paragraphe central comme étant une citation comprenant un attribut <code>cite</code>.</li> - <li>une partie du troisième paragraphe soit balisée en tant que citation en ligne, comprenant aussi un attribut <code>cite</code>.</li> - <li>vous incorporiez un élément <code><cite></code> pour chaque citation</li> -</ol> +1. vous marquiez le paragraphe central comme étant une citation comprenant un attribut `cite`. +2. une partie du troisième paragraphe soit balisée en tant que citation en ligne, comprenant aussi un attribut `cite`. +3. vous incorporiez un élément `<cite>` pour chaque citation -<p>L'origine des citations dont vous aurez besoin se trouvent aux pages :</p> +L'origine des citations dont vous aurez besoin se trouvent aux pages : -<ul> - <li>http://www.brainyquote.com/quotes/authors/c/confucius.html pour la citation de Confucius,</li> - <li>http://www.affirmationsforpositivethinking.com/index.html pour « The Need To Eliminate Negative Self Talk » (<em>De la nécessité d'éliminer un discours négatif sur soi‑même</em>).</li> -</ul> +- http\://www\.brainyquote.com/quotes/authors/c/confucius.html pour la citation de Confucius, +- http\://www\.affirmationsforpositivethinking.com/index.html pour « The Need To Eliminate Negative Self Talk » (_De la nécessité d'éliminer un discours négatif sur soi‑même_). -<p>Si vous faites une erreur, vous pourrez toujours tout réinitialiser en pressant le bouton de même nom. Si vous êtes vraiment bloqué, pressez le bouton <em>Voir la solution</em> pour obtenir la réponse.</p> +Si vous faites une erreur, vous pourrez toujours tout réinitialiser en pressant le bouton de même nom. Si vous êtes vraiment bloqué, pressez le bouton _Voir la solution_ pour obtenir la réponse. -<pre class="brush: html hidden"><h2>Zone de rendu</h2> +```html hidden +<h2>Zone de rendu</h2> -<div class="output" style="min-height: 50px;"> -</div> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> -<textarea id="code" class="input" style="min-height: 150px; width: 95%"> -<p>Salut et bienvenue sur ma page de motivation. Comme Confucius a dit en son temps :</p> -<p>La lenteur avec laquelle vous allez n'a pas d'importance tant que vous ne vous arrêtez pas.</p> -<p>J'aime aussi ce concept de pensée positive « Il est nécessaire d'éliminer le discours négatif sur soi-même » (comme dit dans « Affirmations for Positive Thinking ».)</p> -</textarea> +<textarea id="code" class="input" style="min-height: 150px; width: 95%"> +<p>Salut et bienvenue sur ma page de motivation. Comme Confucius a dit en son temps :</p> +<p>La lenteur avec laquelle vous allez n'a pas d'importance tant que vous ne vous arrêtez pas.</p> +<p>J'aime aussi ce concept de pensée positive « Il est nécessaire d'éliminer le discours négatif sur soi-même » (comme dit dans « Affirmations for Positive Thinking ».)</p> +</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Voir la solution"> -</div></pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -320,9 +341,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -352,7 +375,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<p>Salut et bienvenue sur ma page de motivation. Comme <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius</cite></a> a dit en son temps :</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>La lenteur avec laquelle vous allez n\'a pas d\'importance tant que vous ne vous arrêtez pas.</p>\n</blockquote>\n\n<p>J\'aime aussi le concept de pensée positive <q cite="http://www.affirmationsforpositivethinking.com/index.htm"> Il est nécessaire d\'éliminer le discours négatif sur soi-même </q> (comme dit dans <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a>.)</p>'; +var htmlSolution = '<p>Salut et bienvenue sur ma page de motivation. Comme <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius</cite></a> a dit en son temps :</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>La lenteur avec laquelle vous allez n\'a pas d\'importance tant que vous ne vous arrêtez pas.</p>\n</blockquote>\n\n<p>J\'aime aussi le concept de pensée positive <q cite="http://www.affirmationsforpositivethinking.com/index.htm"> Il est nécessaire d\'éliminer le discours négatif sur soi-même </q> (comme dit dans <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a>.)</p>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -398,52 +421,52 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> - -<p>{{ EmbedLiveSample('Apprentissage_actif_Qui_a_dit_quoi', 700, 450, "", "", "hide-codepen-jsfiddle") }}</p> - -<h2 id="Abréviations">Abréviations</h2> +}; +``` -<p>Un autre élément assez commun rencontré en se promenant dans le Web est l'élément {{htmlelement("abbr")}}}}. Il s'utilise pour entourer une abréviation ou un acronyme et donner le développement complet du terme (inclus dans un attribut {{htmlattrxref("title")}}}. Voyons quelques exemples :</p> +{{ EmbedLiveSample('Apprentissage_actif_Qui_a_dit_quoi', 700, 450, "", "", "hide-codepen-jsfiddle") }} -<pre><p>Nous utilisons l'<abbr title="Hypertext Markup Language">HTML</abbr> pour structurer nos documents web.</p> +## Abréviations -<p>Je pense que le <abbr title="Révérend">R.</abbr> Green l'a fait dans la cuisine avec une tronçonneuse.</p></pre> +Un autre élément assez commun rencontré en se promenant dans le Web est l'élément {{htmlelement("abbr")}}}}. Il s'utilise pour entourer une abréviation ou un acronyme et donner le développement complet du terme (inclus dans un attribut {{htmlattrxref("title")}}}. Voyons quelques exemples : + <p>Nous utilisons l'<abbr title="Hypertext Markup Language">HTML</abbr> pour structurer nos documents web.</p> + <p>Je pense que le <abbr title="Révérend">R.</abbr> Green l'a fait dans la cuisine avec une tronçonneuse.</p> -<p>Leur affichage correspond aux deux phrases suivantes (le développement de l'abréviation apparaît dans une infobulle quand le pointeur de souris passe sur le terme) :</p> +Leur affichage correspond aux deux phrases suivantes (le développement de l'abréviation apparaît dans une infobulle quand le pointeur de souris passe sur le terme) : -<p>Nous utilisons l'<abbr title="Hypertext Markup Language">HTML</abbr> pour structurer nos documents web.</p> +Nous utilisons l'HTML pour structurer nos documents web. -<p>Je pense que le <abbr title="Révérend">R.</abbr> Green l'a fait dans la cuisine avec une tronçonneuse.</p> +Je pense que le R. Green l'a fait dans la cuisine avec une tronçonneuse. -<div class="note"> -<p><strong>Note :</strong> Il existe un autre élément, {{htmlelement("acronym")}}, faisant fondamentalement la même chose que <code><abbr></code>, destiné spécifiquement aux acronymes plutôt qu'aux abréviations. Il est cependant tombé en désuétude — il n'était pas aussi bien pris en charge dans les navigateurs que <abbr> et sa fonction était si ressemblante qu'on a considéré inutile d'avoir les deux. Il suffit d'utiliser <abbr> à la place.</p> -</div> +> **Note :** Il existe un autre élément, {{htmlelement("acronym")}}, faisant fondamentalement la même chose que `<abbr>`, destiné spécifiquement aux acronymes plutôt qu'aux abréviations. Il est cependant tombé en désuétude — il n'était pas aussi bien pris en charge dans les navigateurs que \<abbr> et sa fonction était si ressemblante qu'on a considéré inutile d'avoir les deux. Il suffit d'utiliser \<abbr> à la place. -<h3 id="Apprentissage_actif_marquer_une_abréviation">Apprentissage actif : marquer une abréviation</h3> +### Apprentissage actif : marquer une abréviation -<p>Pour cet apprentissage actif, nous aimerions que vous balisiez simplement une abréviation. Vous pouvez utiliser notre élément ci-après ou le remplacer par un de votre cru.</p> +Pour cet apprentissage actif, nous aimerions que vous balisiez simplement une abréviation. Vous pouvez utiliser notre élément ci-après ou le remplacer par un de votre cru. -<pre class="brush: html hidden"><h2>Zone de rendu</h2> +```html hidden +<h2>Zone de rendu</h2> -<div class="output" style="min-height: 50px;"> -</div> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> -<textarea id="code" class="input" style="min-height: 50px; width: 95%"> -<p>La NASA fait assurément des tâches passionnantes.</p> -</textarea> +<textarea id="code" class="input" style="min-height: 50px; width: 95%"> +<p>La NASA fait assurément des tâches passionnantes.</p> +</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Voir la solution"> -</div></pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -461,9 +484,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -493,7 +518,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<p>La <abbr title="National Aeronautics and Space Administration">NASA</abbr> fait assurément des tâches passionnantes.</p>'; +var htmlSolution = '<p>La <abbr title="National Aeronautics and Space Administration">NASA</abbr> fait assurément des tâches passionnantes.</p>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -539,135 +564,139 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> +}; +``` -<div>{{ EmbedLiveSample('Apprentissage_actif_marquer_une_abréviation', 700, 300, "", "", "hide-codepen-jsfiddle") }}</div> +{{ EmbedLiveSample('Apprentissage_actif_marquer_une_abréviation', 700, 300, "", "", "hide-codepen-jsfiddle") }} -<h2 id="Balisage_des_détails_de_contact">Balisage des détails de contact</h2> +## Balisage des détails de contact -<p>HTML possède l'élément {{htmlelement("address")}} pour baliser des détails de contact. Enveloppez simplement vos coordonnées, par exemple :</p> +HTML possède l'élément {{htmlelement("address")}} pour baliser des détails de contact. Enveloppez simplement vos coordonnées, par exemple : -<pre class="brush: html"><address> - <p>Chris Mills, Manchester, The Grim North, UK</p> -</address></pre> +```html +<address> + <p>Chris Mills, Manchester, The Grim North, UK</p> +</address> +``` -<p>Une chose à retenir cependant : l'élément {{htmlelement("address")}} est destiné à marquer les coordonnées de la personne ayant écrit le document HTML et non pas <em>n'importe quelle</em> adresse. Donc, ce qui précède ne serait acceptable que si Chris avait écrit le document sur lequel ce balisage apparaît. Notez que serait également acceptable ce qui suit :</p> +Une chose à retenir cependant : l'élément {{htmlelement("address")}} est destiné à marquer les coordonnées de la personne ayant écrit le document HTML et non pas _n'importe quelle_ adresse. Donc, ce qui précède ne serait acceptable que si Chris avait écrit le document sur lequel ce balisage apparaît. Notez que serait également acceptable ce qui suit : -<pre class="brush: html"><address> - <p>Page écrite par <a href="../authors/chris-mills/">Chris Mills</a>.</p> -</address></pre> +```html +<address> + <p>Page écrite par <a href="../authors/chris-mills/">Chris Mills</a>.</p> +</address> +``` -<h2 id="Exposants_et_indices">Exposants et indices</h2> +## Exposants et indices -<p>Vous devrez parfois utiliser exposants et indices pour marquer des éléments comme dates, formules chimiques et équations mathématiques de façon à ce qu'ils aient une bonne signification. On effectue ce travail à l'aide des éléments {{htmlelement("sup")}} et {{htmlelement("sub")}}. Par exemple :</p> +Vous devrez parfois utiliser exposants et indices pour marquer des éléments comme dates, formules chimiques et équations mathématiques de façon à ce qu'ils aient une bonne signification. On effectue ce travail à l'aide des éléments {{htmlelement("sup")}} et {{htmlelement("sub")}}. Par exemple : -<pre class="brush: html"><p>Ma date de naissance est le 1<sup>er</sup> mai 2001.</p> -<p>La formule chimique de la caféine est C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> -<p>Si x<sup>2</sup> égale 9, x doit valoir 3 ou -3.</p></pre> +```html +<p>Ma date de naissance est le 1<sup>er</sup> mai 2001.</p> +<p>La formule chimique de la caféine est C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> +<p>Si x<sup>2</sup> égale 9, x doit valoir 3 ou -3.</p> +``` -<p>Les sorties produites par ces lignes de code se présentent comme suit :</p> +Les sorties produites par ces lignes de code se présentent comme suit : -<p>Ma date de naissance est le 1<sup>er</sup> mai 2001.</p> +Ma date de naissance est le 1<sup>er</sup> mai 2001. -<p>La formule chimique de la caféine est C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> +La formule chimique de la caféine est C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>. -<p>Si x^2 égale 9, x doit valoir 3 ou -3.</p> +Si x^2 égale 9, x doit valoir 3 ou -3. -<h2 id="Représentation_du_code_informatique">Représentation du code informatique</h2> +## Représentation du code informatique -<p>HTML met à votre dispositon un certain nombre d'éléments pour marquer du code informatique :</p> +HTML met à votre dispositon un certain nombre d'éléments pour marquer du code informatique : -<ul> - <li>{{htmlelement("code")}} : pour marquer des parties génériques de code.</li> - <li>{{htmlelement("pre")}} : pour conserver les blancs (généralement dans les blocs de code) — si vous indentez ou mettez des blancs en excès dans votre texte, les navigateurs les ignoreront et vous ne les verrez plus dans le rendu de la page. Par contre si vous enveloppez le texte dans des balises <pre></pre>, les blancs seront rendus tels qu'il se présentent dans votre éditeur de texte.</li> - <li>{{htmlelement("var")}} : pour marquer spécifiquement les noms de variables.</li> - <li>{{htmlelement("kbd")}} : pour marquer les touches de clavier (et autres types d'entrées) à presser sur l'ordinateur.</li> - <li>{{htmlelement("samp")}} : pour marquer une sortie de programme.</li> -</ul> +- {{htmlelement("code")}} : pour marquer des parties génériques de code. +- {{htmlelement("pre")}} : pour conserver les blancs (généralement dans les blocs de code) — si vous indentez ou mettez des blancs en excès dans votre texte, les navigateurs les ignoreront et vous ne les verrez plus dans le rendu de la page. Par contre si vous enveloppez le texte dans des balises \<pre>\</pre>, les blancs seront rendus tels qu'il se présentent dans votre éditeur de texte. +- {{htmlelement("var")}} : pour marquer spécifiquement les noms de variables. +- {{htmlelement("kbd")}} : pour marquer les touches de clavier (et autres types d'entrées) à presser sur l'ordinateur. +- {{htmlelement("samp")}} : pour marquer une sortie de programme. -<p>Voyons quelques exemples. Essayez de jouer avec cela (faites une copie de notre fichier exemple <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a>) :</p> +Voyons quelques exemples. Essayez de jouer avec cela (faites une copie de notre fichier exemple [other-semantics.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html)) : -<pre class="brush: html"><pre><code>var para = document.querySelector('p'); +```html +<pre><code>var para = document.querySelector('p'); para.onclick = function() { alert('Owww, arrête de me toucher !'); -}</code></pre> - -<p>N'utilisez pas d'éléments de présentation comme <code>&lt;font&gt;</code> et <code>&lt;center&gt;</code>.</p> - -<p>Dans l'exemple JavaScript ci‑dessus, <var>para</var> représente un élément paragraphe.</p> +}</code></pre> +<p>N'utilisez pas d'éléments de présentation comme <code><font></code> et <code><center></code>.</p> -<p>Sélectionnez la totalité du texte avec <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p> +<p>Dans l'exemple JavaScript ci‑dessus, <var>para</var> représente un élément paragraphe.</p> -<pre>$ <kbd>ping mozilla.org</kbd> -<samp>PING mozilla.org (63.245.208.195) 56(84) bytes of data. -64 bytes from mozilla.org (63.245.208.195): icmp_seq=1 ttl=46 time=191 ms</samp></pre> -</pre> -<p>Ce code se présente ainsi :</p> +<p>Sélectionnez la totalité du texte avec <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p> -<p>{{ EmbedLiveSample('Représentation_du_code_informatique','100%',300) }}</p> +<pre>$ <kbd>ping mozilla.org</kbd> +<samp>PING mozilla.org (63.245.208.195) 56(84) bytes of data. +64 bytes from mozilla.org (63.245.208.195): icmp_seq=1 ttl=46 time=191 ms</samp></pre> +``` -<h2 id="Balisage_des_heures_et_dates">Balisage des heures et dates</h2> +Ce code se présente ainsi : -<p>HTML fournit également l'élément {{htmlelement("time")}}} pour marquer les heures et les dates dans un format lisible par machine. Par exemple :</p> +{{ EmbedLiveSample('Représentation_du_code_informatique','100%',300) }} -<pre class="brush: html"><time datetime="2016-01-20">20 janvier 2016</time></pre> +## Balisage des heures et dates -<p>En quoi est-ce utile ? Eh bien, il y a beaucoup de façons différentes dont les humains écrivent les dates. La date ci-dessus pourrait s'écrire comme suit :</p> +HTML fournit également l'élément {{htmlelement("time")}}} pour marquer les heures et les dates dans un format lisible par machine. Par exemple : -<ul> - <li>20 Janvier 2016</li> - <li>20th January 2016</li> - <li>Jan 20 2016</li> - <li>20/01/16</li> - <li>01/20/16</li> - <li>Le 20 du mois prochain</li> - <li>20e Janvier 2016</li> - <li>2016年1月20日</li> - <li>etc.</li> -</ul> +```html +<time datetime="2016-01-20">20 janvier 2016</time> +``` -<p>Mais ces différents formes ne sont pas facilement reconnaissables par les ordinateurs — que se passerait‑il si vous vouliez saisir automatiquement les dates de tous les événements dans une page et les insérer dans un calendrier ? L'élément {{htmlelement("time")}}} vous permettra d'attacher un horodatage non ambigu lisible par machine à cette fin.</p> +En quoi est-ce utile ? Eh bien, il y a beaucoup de façons différentes dont les humains écrivent les dates. La date ci-dessus pourrait s'écrire comme suit : -<p>L'exemple de base ci-dessus ne fournit qu'une simple date lisible par machine, mais il y a beaucoup d'autres options possibles, par exemple :</p> +- 20 Janvier 2016 +- 20th January 2016 +- Jan 20 2016 +- 20/01/16 +- 01/20/16 +- Le 20 du mois prochain +- 20e Janvier 2016 +- 2016 年 1 月 20 日 +- etc. -<pre class="brush: html"><!-- Simple date standard --> -<time datetime="2016-01-20">20 janvier 2016</time> -<!-- Juste l'année et le mois --> -<time datetime="2016-01">janvier 2016</time> -<!-- Juste le mois et les jour --> -<time datetime="01-20">20 janvier</time> -<!-- Juste l'heure, heure et minutes --> -<time datetime="19:30">19h30</time> -<!-- Vous pouvez aussi mettre les secondes et les millisecondes ! --> -<time datetime="19:30:01.856">19h30m1,856s</time> -<!-- Date et heure --> -<time datetime="2016-01-20T19:30">19h30, le 20 janvier 2016</time> -<!-- Date et heure avec décalage de fuseau horaire --> -<time datetime="2016-01-20T19:30+01:00">19h30, le 20 janvier 2016 corespond à 20h30 en France</time> -<!-- Appel d'un numéro de semains donné --> -<time datetime="2016-W04">La 4e semaine de 2016</time></pre> +Mais ces différents formes ne sont pas facilement reconnaissables par les ordinateurs — que se passerait‑il si vous vouliez saisir automatiquement les dates de tous les événements dans une page et les insérer dans un calendrier ? L'élément {{htmlelement("time")}}} vous permettra d'attacher un horodatage non ambigu lisible par machine à cette fin. -<h2 id="Résumé">Résumé</h2> +L'exemple de base ci-dessus ne fournit qu'une simple date lisible par machine, mais il y a beaucoup d'autres options possibles, par exemple : +```html +<!-- Simple date standard --> +<time datetime="2016-01-20">20 janvier 2016</time> +<!-- Juste l'année et le mois --> +<time datetime="2016-01">janvier 2016</time> +<!-- Juste le mois et les jour --> +<time datetime="01-20">20 janvier</time> +<!-- Juste l'heure, heure et minutes --> +<time datetime="19:30">19h30</time> +<!-- Vous pouvez aussi mettre les secondes et les millisecondes ! --> +<time datetime="19:30:01.856">19h30m1,856s</time> +<!-- Date et heure --> +<time datetime="2016-01-20T19:30">19h30, le 20 janvier 2016</time> +<!-- Date et heure avec décalage de fuseau horaire --> +<time datetime="2016-01-20T19:30+01:00">19h30, le 20 janvier 2016 corespond à 20h30 en France</time> +<!-- Appel d'un numéro de semains donné --> +<time datetime="2016-W04">La 4e semaine de 2016</time> +``` +## Résumé -<p>Nous voici arrivés à la fin de notre étude de la sémantique des textes en HTML. N'oubliez pas que ce qui précède ne constitue pas la liste exhaustive des éléments texte en HTML — nous avons essayé de couvrir essentiellement les plus courants dans la nature ou du moins ceux que nous avons pensé intéressants. Pour en voir plus, jetez un coup d'oeil à notre <a href="/fr/docs/Web/HTML/Element">Référence des éléments HTML</a> (la section <a href="/fr/docs/Web/HTML/Element#inline_text_semantics">sémantique de texte en ligne</a> serait un bon point de départ.) Dans l'article suivant, nous examinerons les éléments HTML à utiliser pour structurer les diverses parties d'un document HTML.</p> +Nous voici arrivés à la fin de notre étude de la sémantique des textes en HTML. N'oubliez pas que ce qui précède ne constitue pas la liste exhaustive des éléments texte en HTML — nous avons essayé de couvrir essentiellement les plus courants dans la nature ou du moins ceux que nous avons pensé intéressants. Pour en voir plus, jetez un coup d'oeil à notre [Référence des éléments HTML](/fr/docs/Web/HTML/Element) (la section [sémantique de texte en ligne](/fr/docs/Web/HTML/Element#inline_text_semantics) serait un bon point de départ.) Dans l'article suivant, nous examinerons les éléments HTML à utiliser pour structurer les diverses parties d'un document HTML. -<p>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}</p> +{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Création d'hyperliens</a></li> - <li>Formatage avancé du texte</li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Faire une lettre</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li> -</ul> +- [Commencer avec le HTML](/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started) +- [Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) +- [Fondamentaux du texte HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) +- [Création d'hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) +- Formatage avancé du texte +- [Structure de Site Web et de document](/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) +- [Déboguer de l'HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) +- [Faire une lettre](/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter) +- [Structurer une page de contenu](/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content) diff --git a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md index abaeb6d167..60d64730b5 100644 --- a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md +++ b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md @@ -16,319 +16,322 @@ tags: translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks --- -<div>{{LearnSidebar}}<br> -{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML")}}</div> +{{LearnSidebar}} +{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML")}} -<p>Les Hyperliens sont vraiment importants, ils sont ce qui fait du Web <em>une toile</em>. Cet article montre la syntaxe requise pour faire un lien et discute des bonnes pratiques pour les liens.</p> +Les Hyperliens sont vraiment importants, ils sont ce qui fait du Web _une toile_. Cet article montre la syntaxe requise pour faire un lien et discute des bonnes pratiques pour les liens. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Être familiarisé avec les bases du HTML, traitées à la page <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a> et du formatage de texte HTML, décrit dans les <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre à implémenter un hyperlien efficacement, et à relier de multiples fichiers ensemble.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Être familiarisé avec les bases du HTML, traitées à la page + <a + href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started" + >Commencer avec le HTML</a + > + et du formatage de texte HTML, décrit dans les + <a + href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals" + >Fondamentaux du texte HTML</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Apprendre à implémenter un hyperlien efficacement, et à relier de + multiples fichiers ensemble. + </td> + </tr> + </tbody> </table> -<h2 id="Quest-ce_un_hyperlien">Qu'est-ce un hyperlien ?</h2> +## Qu'est-ce un hyperlien ? -<p>Les hyperliens sont l'une des plus passionnantes innovations que le web a à offrir. De fait, ils ont été une fonctionnalité du Web depuis le tout début, mais ils sont ce qui fait du Web <em>une toile</em> — ils nous permettent de lier nos documents à n'importe quel autre document (ou autre ressource) voulu ; nous pouvons faire des liens vers des parties précises de documents et rendre des applications disponibles à une simple adresse web (contrairement aux applications natives, qui doivent être installées et tout le travail). À peu près tout contenu web peut être converti en lien, de sorte que cliqué (ou activé autrement), il dirigera le navigateur vers une autre adresse web ({{glossary("URL")}}).</p> +Les hyperliens sont l'une des plus passionnantes innovations que le web a à offrir. De fait, ils ont été une fonctionnalité du Web depuis le tout début, mais ils sont ce qui fait du Web _une toile_ — ils nous permettent de lier nos documents à n'importe quel autre document (ou autre ressource) voulu ; nous pouvons faire des liens vers des parties précises de documents et rendre des applications disponibles à une simple adresse web (contrairement aux applications natives, qui doivent être installées et tout le travail). À peu près tout contenu web peut être converti en lien, de sorte que cliqué (ou activé autrement), il dirigera le navigateur vers une autre adresse web ({{glossary("URL")}}). -<div class="note"> -<p><strong>Note :</strong> Une URL peut pointer vers des fichiers HTML, des fichiers textes, des images, des documents textuels, des fichiers vidéo ou audio et tout ce qui peut exister sur le Web. Si le navigateur Web ne sait pas comment afficher ou gérer un fichier, il vous demande si vous voulez ouvrir le fichier (dans ce cas, la responsabilité de l'ouverture et de la gestion du fichier incombe à l'application native adéquate sur l'appareil) ou bien télécharger le fichier (auquel cas, vous pouvez essayer de vous en occuper plus tard).</p> -</div> +> **Note :** Une URL peut pointer vers des fichiers HTML, des fichiers textes, des images, des documents textuels, des fichiers vidéo ou audio et tout ce qui peut exister sur le Web. Si le navigateur Web ne sait pas comment afficher ou gérer un fichier, il vous demande si vous voulez ouvrir le fichier (dans ce cas, la responsabilité de l'ouverture et de la gestion du fichier incombe à l'application native adéquate sur l'appareil) ou bien télécharger le fichier (auquel cas, vous pouvez essayer de vous en occuper plus tard). -<p>La page d'accueil de la BBC, par exemple, contient un nombre important de liens pour pointer, non seulement vers de multiples articles d'actualité, mais encore vers d'autres zones du site (fonctionnalité de navigation) , des pages d'inscription/de connexion (outils utilisateur) et plus encore.</p> +La page d'accueil de la BBC, par exemple, contient un nombre important de liens pour pointer, non seulement vers de multiples articles d'actualité, mais encore vers d'autres zones du site (fonctionnalité de navigation) , des pages d'inscription/de connexion (outils utilisateur) et plus encore. -<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="bbc-homepage.png"></p> + -<h2 id="Anatomie_dun_lien">Anatomie d'un lien</h2> +## Anatomie d'un lien -<p>Un lien élémentaire se crée en intégrant le texte (ou tout autre contenu, cf. {{anch("Liens de niveau bloc")}}) que vous voulez transformer en lien dans un élément {{htmlelement("a")}} et en lui affectant un attribut {{htmlattrxref("href", "a")}} (également connu comme étant une <strong>Hypertext Reference</strong>) contenant l'adresse web vers laquelle vous voulez que le lien pointe.</p> +Un lien élémentaire se crée en intégrant le texte (ou tout autre contenu, cf. {{anch("Liens de niveau bloc")}}) que vous voulez transformer en lien dans un élément {{htmlelement("a")}} et en lui affectant un attribut {{htmlattrxref("href", "a")}} (également connu comme étant une **Hypertext Reference**) contenant l'adresse web vers laquelle vous voulez que le lien pointe. -<pre class="brush: html"><p>Je suis en train de créer un lien à -<a href="https://www.mozilla.org/fr/">la page d'accueil Mozilla</a>. -</p></pre> +```html +<p>Je suis en train de créer un lien à +<a href="https://www.mozilla.org/fr/">la page d'accueil Mozilla</a>. +</p> +``` -<p>qui donne le résultat suivant :</p> +qui donne le résultat suivant : -<p>Je suis en train de créer un lien à <a href="https://www.mozilla.org/fr/"> la page d'accueil de Mozilla</a>.</p> +Je suis en train de créer un lien à [la page d'accueil de Mozilla](https://www.mozilla.org/fr/). -<h3 id="Ajouter_des_informations_dassistance_avec_lattribut_title">Ajouter des informations d'assistance avec l'attribut title</h3> +### Ajouter des informations d'assistance avec l'attribut title -<p>L'autre attribut qu'il est possible d'ajouter à un lien est <code>title</code> ; il est destiné à contenir des informations utiles supplémentaires à propos du lien, comme le type d'informations contenes dans la page ou ce qu'il faut savoir. Par exemple :</p> +L'autre attribut qu'il est possible d'ajouter à un lien est `title` ; il est destiné à contenir des informations utiles supplémentaires à propos du lien, comme le type d'informations contenes dans la page ou ce qu'il faut savoir. Par exemple : -<pre class="brush: html"><p>Je suis en train de créer un lien à -<a href="https://www.mozilla.org/fr/" +```html +<p>Je suis en train de créer un lien à +<a href="https://www.mozilla.org/fr/" title="Le meilleur endroit pour trouver plus d'informations sur la - mission de Mozilla et la manière de contribuer">la page d'accueil Mozilla</a>. -</p></pre> + mission de Mozilla et la manière de contribuer">la page d'accueil Mozilla</a>. +</p> +``` -<p>Voici le résultat (le contenu de <code>title</code> apparaît dans une info-bulle quand le pointeur de souris passe sur le lien) :</p> +Voici le résultat (le contenu de `title` apparaît dans une info-bulle quand le pointeur de souris passe sur le lien) : -<p>Je suis en train de créer un lien vers <a href="https://www.mozilla.org/fr/" title="Le meilleur endroit pour trouver plus d'informations sur la mission de Mozilla et la manière de contribuer">la page d'accueil de Mozilla</a></p> +Je suis en train de créer un lien vers [la page d'accueil de Mozilla](https://www.mozilla.org/fr/ "Le meilleur endroit pour trouver plus d'informations sur la mission de Mozilla et la manière de contribuer") -<div class="note"> -<p><strong>Note :</strong> le <code>title</code> d'un lien n'est révélé que lors du survol de la souris, ce qui signifie que les personnes utilisant les commandes clavier pour naviguer dans les pages web auront des difficultés à accéder aux informations de <code>title</code>. Si une information de <code>title</code> est vraiment importante pour l'utilisation d'une page, alors vous devez la présenter de manière accessible à tout utilisateur, par exemple, en la mettant dans le texte normal.</p> -</div> +> **Note :** le `title` d'un lien n'est révélé que lors du survol de la souris, ce qui signifie que les personnes utilisant les commandes clavier pour naviguer dans les pages web auront des difficultés à accéder aux informations de `title`. Si une information de `title` est vraiment importante pour l'utilisation d'une page, alors vous devez la présenter de manière accessible à tout utilisateur, par exemple, en la mettant dans le texte normal. -<h3 id="Apprentissage_actif_création_de_votre_propre_exemple_de_lien">Apprentissage actif : création de votre propre exemple de lien</h3> +### Apprentissage actif : création de votre propre exemple de lien -<p>C'est l'heure de l'apprentissage actif : veuillez créer un document HTML avec un éditeur de code local (notre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">fichier modèle index.html</a> fera parfaitement l'affaire).</p> +C'est l'heure de l'apprentissage actif : veuillez créer un document HTML avec un éditeur de code local (notre [fichier modèle index.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) fera parfaitement l'affaire). -<ul> - <li>Dans le corps de l'HTML, essayez d'ajouter un ou plusieurs paragraphes ou d'autres types de contenu pour lesquels vous avez déjà des connaissances.</li> - <li>Changez certaines parties du contenu en liens.</li> - <li>Insérez les attributs <code>title</code>.</li> -</ul> +- Dans le corps de l'HTML, essayez d'ajouter un ou plusieurs paragraphes ou d'autres types de contenu pour lesquels vous avez déjà des connaissances. +- Changez certaines parties du contenu en liens. +- Insérez les attributs `title`. -<h3 id="Liens_de_niveau_bloc">Liens de niveau bloc</h3> +### Liens de niveau bloc -<p>Comme mentionné précédemment, vous pouvez transformer à peu près tout contenu en un lien, même des <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#éléments_bloc_ou_en_ligne">éléments bloc </a>. Si vous avez une image que vous voulez transformer en lien, vous avez juste à mettre l'image entre les balises <code><a></a></code>.</p> +Comme mentionné précédemment, vous pouvez transformer à peu près tout contenu en un lien, même des [éléments bloc ](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#éléments_bloc_ou_en_ligne). Si vous avez une image que vous voulez transformer en lien, vous avez juste à mettre l'image entre les balises `<a></a>`. -<pre class="brush: html"><a href="https://www.mozilla.org/fr/"> - <img src="mozilla-image.png" alt="logo mozilla pointant sur la page d'accueil mozilla"> -</a></pre> +```html +<a href="https://www.mozilla.org/fr/"> + <img src="mozilla-image.png" alt="logo mozilla pointant sur la page d'accueil mozilla"> +</a> +``` -<div class="note"> -<p><strong>Note :</strong> Nous vous donnerons beaucoup plus de détails sur l'utilisation d'images sur le Web dans un futur article.</p> -</div> +> **Note :** Nous vous donnerons beaucoup plus de détails sur l'utilisation d'images sur le Web dans un futur article. -<h2 id="Une_brève_présentation_des_URL_et_des_chemins">Une brève présentation des URL et des chemins</h2> +## Une brève présentation des URL et des chemins -<p>Pour bien maîtriser les cibles des liens, vous avez besoin d'avoir compris ce que sont les URL et les chemins. Cette section vous donne les informations voulues pour y parvenir.</p> +Pour bien maîtriser les cibles des liens, vous avez besoin d'avoir compris ce que sont les URL et les chemins. Cette section vous donne les informations voulues pour y parvenir. -<p>Une URL, ou <strong>U</strong>niform <strong>R</strong>esource <strong>L</strong>ocator, est simplement une chaîne textuelle qui définit où se situe quelque chose sur le Web. Par exemple, la page d'accueil en anglais de Mozilla est située à l'adresse <code>https://www.mozilla.org/en-US/</code>.</p> +Une URL, ou **U**niform **R**esource **L**ocator, est simplement une chaîne textuelle qui définit où se situe quelque chose sur le Web. Par exemple, la page d'accueil en anglais de Mozilla est située à l'adresse `https://www.mozilla.org/en-US/`. -<p>Les URL utilisent des chemins pour trouver des fichiers. Les chemins indiquent où dans le système de fichiers, se trouve celui qui vous intéresse. Regardons un exemple simple de structure de répertoires (voir le dossier <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a>).</p> +Les URL utilisent des chemins pour trouver des fichiers. Les chemins indiquent où dans le système de fichiers, se trouve celui qui vous intéresse. Regardons un exemple simple de structure de répertoires (voir le dossier [creating-hyperlinks](https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks)). -<p><img alt="Une simple structure de répertoire. Le répertoire parent s'appelle creating-hyperlinks et contient deux fichiers appelés index.html et contacts.html, et deux répertoires appelés projects et pdfs, qui contiennent respectivement un fichier index.html et un fichier project-brief.pdf." src="dir-struct.png"></p> + -<p>La <strong>racine</strong> de cette structure de répertoires s'appelle <code>creating-hyperlinks</code>. Quand vous travaillez localement sur un site web, vous avez un dossier contenant l'intégralité du site. Dans la racine, nous avons un fichier <code>index.html</code> et un <code>contacts.html</code>. Sur un site réel, <code>index.html</code> serait notre page d'accueil ou portail (page web servant de point d'entrée à un site web ou à une section particulière d'un site web).</p> +La **racine** de cette structure de répertoires s'appelle `creating-hyperlinks`. Quand vous travaillez localement sur un site web, vous avez un dossier contenant l'intégralité du site. Dans la racine, nous avons un fichier `index.html` et un `contacts.html`. Sur un site réel, `index.html` serait notre page d'accueil ou portail (page web servant de point d'entrée à un site web ou à une section particulière d'un site web). -<p>Il y a aussi deux répertoires dans la racine — <code>pdfs</code> et <code>projects</code>. Chacun d'eux comporte un seul fichier — respectivement un PDF (<code>project-brief.pdf)</code> et un fichier <code>index.html</code>. Notez que vous pouvez heureusement avoir deux fichiers <code>index.html</code> dans un projet, pour autant qu'ils se trouvent dans deux emplacements différents dans le système de fichiers. De nombreux sites web le font. Le second <code>index.html</code> peut être le portail des informations relatives au projet.</p> +Il y a aussi deux répertoires dans la racine — `pdfs` et `projects`. Chacun d'eux comporte un seul fichier — respectivement un PDF (`project-brief.pdf)` et un fichier `index.html`. Notez que vous pouvez heureusement avoir deux fichiers `index.html` dans un projet, pour autant qu'ils se trouvent dans deux emplacements différents dans le système de fichiers. De nombreux sites web le font. Le second `index.html` peut être le portail des informations relatives au projet. -<ul> - <li> - <p><strong>Dans un même dossier </strong>: si vous voulez inclure un hyperlien dans <code>index.html</code> (celui de plus haut niveau) pointant vers <code>contacts.html</code>, il suffit d'indiquer uniquement le nom du fichier auquel vous voulez le lier, car il est dans le même répertoire que le fichier actuel. Ainsi, l'URL à utiliser est <code>contacts.html</code> :</p> +- **Dans un même dossier** : si vous voulez inclure un hyperlien dans `index.html` (celui de plus haut niveau) pointant vers `contacts.html`, il suffit d'indiquer uniquement le nom du fichier auquel vous voulez le lier, car il est dans le même répertoire que le fichier actuel. Ainsi, l'URL à utiliser est `contacts.html` : - <pre class="brush: html"><p>Voulez‑vous rencontrer un membre du personnel en particulier ? -Voyez comment faire sur notre page <a href="contacts.html">Contacts</a>.</p></pre> - </li> - <li> - <p><strong>Descendre dans les sous-répertoires </strong>: si vous désirez inclure un hyperlien dans <code>index.html</code> (<code>celui</code> de plus haut niveau) pointant vers <code>projects/index.html</code>, vous avez besoin de descendre dans le dossier<code>projects</code> avant d'indiquer le fichier auquel vous voulez vous lier. Cela se fait en indiquant le nom du dossier, suivi d'une barre oblique normale, puis le nom du fichier. Donc l'URL à utiliser sera <code>projects/index.html</code> :</p> + ```html + <p>Voulez‑vous rencontrer un membre du personnel en particulier ? + Voyez comment faire sur notre page <a href="contacts.html">Contacts</a>.</p> + ``` - <pre class="brush: html"><p>Visitez la <a href="projects/index.html">page d'accueil</a> de mon projet.</p></pre> - </li> - <li> - <p><strong>Monter dans les dossiers parents </strong>: si vous voulez inclure un hyperlien dans <code>projects/index.html</code> qui pointe vers <code>pdfs/projects-brief.pdf</code>, vous aurez besoin de monter dans le répertoire au niveau au‑dessus, puis de descendre dans le dossier <code>pdfs</code>. « Monter dans le répertoire au niveau au‑dessus » est indiqué avec deux points — <code>..</code> —, de sorte que l'URL à utiliser sera <code>../pdfs/project‑brief.pdf</code> :</p> +- **Descendre dans les sous-répertoires** : si vous désirez inclure un hyperlien dans `index.html` (`celui` de plus haut niveau) pointant vers `projects/index.html`, vous avez besoin de descendre dans le dossier`projects` avant d'indiquer le fichier auquel vous voulez vous lier. Cela se fait en indiquant le nom du dossier, suivi d'une barre oblique normale, puis le nom du fichier. Donc l'URL à utiliser sera `projects/index.html` : - <pre class="brush: html"><p>Voici un lien vers mon <a href="../pdfs/project-brief.pdf">sommaire de projet</a>.</p></pre> - </li> -</ul> + ```html + <p>Visitez la <a href="projects/index.html">page d'accueil</a> de mon projet.</p> + ``` -<div class="note"> -<p><strong>Note :</strong> Vous pouvez combiner plusieurs instances de ces fonctionnalités dans des URL complexes si nécessaire, par ex. <code>../../../complexe/path/to/my/file.html</code>.</p> -</div> +- **Monter dans les dossiers parents** : si vous voulez inclure un hyperlien dans `projects/index.html` qui pointe vers `pdfs/projects-brief.pdf`, vous aurez besoin de monter dans le répertoire au niveau au‑dessus, puis de descendre dans le dossier `pdfs`. « Monter dans le répertoire au niveau au‑dessus » est indiqué avec deux points — `..` —, de sorte que l'URL à utiliser sera `../pdfs/project‑brief.pdf` : -<h3 id="Fragments_de_documents">Fragments de documents</h3> + ```html + <p>Voici un lien vers mon <a href="../pdfs/project-brief.pdf">sommaire de projet</a>.</p> + ``` -<p>Il est possible de faire un lien vers une partie donnée d'un document HTML (désignée du terme <strong>fragment de document</strong>), plutôt que juste le haut du document. Pour ce faire, vous devrez d'abord assigner un attribut {{htmlattrxref("id")}} à l'élément sur lequel vous voulez pointer. Il est généralement logique d'établir un lien vers une rubrique précise, ainsi cela ressemble à quelque chose comme :</p> +> **Note :** Vous pouvez combiner plusieurs instances de ces fonctionnalités dans des URL complexes si nécessaire, par ex. `../../../complexe/path/to/my/file.html`. -<pre class="brush: html"><h2 id="Adresse_mailing">Adresse de mailing</h2></pre> +### Fragments de documents -<p>Puis, pour faire un lien vers cet <code>id</code> précisément, il convient de l'indiquer à la fin de l'URL, précédé d'un croisillon (#) :</p> +Il est possible de faire un lien vers une partie donnée d'un document HTML (désignée du terme **fragment de document**), plutôt que juste le haut du document. Pour ce faire, vous devrez d'abord assigner un attribut {{htmlattrxref("id")}} à l'élément sur lequel vous voulez pointer. Il est généralement logique d'établir un lien vers une rubrique précise, ainsi cela ressemble à quelque chose comme : -<pre class="brush: html"><p>Vous voulez nous écrire une lettre ? Utilisez notre <a href="contacts.html#Adresse_mailing">adresse de contact</a>.</p></pre> +```html +<h2 id="Adresse_mailing">Adresse de mailing</h2> +``` -<p>Vous pouvez même utiliser une référence au fragment de document seul pour faire un lien vers <em>une autre partie du même document</em> :</p> +Puis, pour faire un lien vers cet `id` précisément, il convient de l'indiquer à la fin de l'URL, précédé d'un croisillon (#) : -<pre class="brush: html"><p>Vous trouverez n l'<a href="#Adresse_mailing">adresse de mailing</a> de notre société au bas de cette page.</p></pre> +```html +<p>Vous voulez nous écrire une lettre ? Utilisez notre <a href="contacts.html#Adresse_mailing">adresse de contact</a>.</p> +``` -<h3 id="URL_absolue_vs._URL_relative">URL absolue vs. URL relative</h3> +Vous pouvez même utiliser une référence au fragment de document seul pour faire un lien vers _une autre partie du même document_ : -<p>Deux termes que vous rencontrerez sur le Web sont <strong>URL absolue</strong> et <strong>URL relative</strong> :</p> +```html +<p>Vous trouverez n l'<a href="#Adresse_mailing">adresse de mailing</a> de notre société au bas de cette page.</p> +``` -<p><strong>URL absolue </strong>: pointe sur un emplacement défini de manière absolue sur le web, y compris en précisant le {{glossary("protocol","protocole")}} et le {{glossary("domain name","nom de domaine")}}. Ainsi par exemple, si une page <code>index.html</code> est téléversée dans le dossier nommé <code>projects</code> à la racine du serveur web, et que le domaine du site est <code>http://www.example.com</code>, la page sera accessible à l'adresse <code>http://www.example.com/projects/index.html</code> (ou même seulement <code>http://www.example.com/projects/</code>, du fait que la plupart des serveurs web cherchent pour le chargement une page d'accueil comme <code>index.htm</code>, si ce n'est pas précisé dans l'URL).</p> +### URL absolue vs. URL relative -<p>Une URL absolue pointera toujours vers le même emplacement, quel que soit l'endroit où elle est utilisée.</p> +Deux termes que vous rencontrerez sur le Web sont **URL absolue** et **URL relative** : -<p><strong>URL</strong> <strong>relative :</strong> pointe vers un emplacement qui est <em>relatif</em> au fichier à partir duquel vous établissez le lien, tout comme ce que nous avons vu précédemment. Donc, si nous voulons créer un lien depuis notre fichier d'exemple en <code>http://www.example.com/projects/index.html</code> vers un fichier PDF dans le même dossier, l'URL sera seulement le nom du fichier — càd., <code>project-brief.pdf</code> — pas besoin d'information supplémentaire. Si le PDF est disponible dans un sous-dossier de <code>projects</code> appelé <code>pdfs</code>, le lien relatif serait <code>pdfs/project-brief.pdf</code> (l'URL absolue équivalente serait <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.)</p> +**URL absolue** : pointe sur un emplacement défini de manière absolue sur le web, y compris en précisant le {{glossary("protocol","protocole")}} et le {{glossary("domain name","nom de domaine")}}. Ainsi par exemple, si une page `index.html` est téléversée dans le dossier nommé `projects` à la racine du serveur web, et que le domaine du site est `http://www.example.com`, la page sera accessible à l'adresse `http://www.example.com/projects/index.html` (ou même seulement `http://www.example.com/projects/`, du fait que la plupart des serveurs web cherchent pour le chargement une page d'accueil comme `index.htm`, si ce n'est pas précisé dans l'URL). -<p>Une URL relative pointera vers des emplacements différents en fonction de l'endroit où se situe le fichier qui est utilisé ; par exemple, si nous déplacions notre <code>index.html</code> du dossier <code>projects</code> vers la racine du site web (au niveau le plus élevé, dans aucun dossier), le lien de l'URL relative <code>pdfs/project-brief.pdf</code> qui s'y trouve pointerait alors vers un fichier situé en <code>http://www.example.com/pdfs/project-brief.pdf</code>, et non vers un fichier situé en <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p> +Une URL absolue pointera toujours vers le même emplacement, quel que soit l'endroit où elle est utilisée. -<p>Bien sûr, l'emplacement du fichier <code>project-brief.pdf</code> et du dossier <code>pdfs</code> ne changera pas subitement du fait que vous avez déplacé le fichier <code>index.html</code> : cela aura pour effet que votre lien pointera vers un mauvais emplacement, de sorte que cela ne fonctionnera pas si on clique dessus. Vous devez être prudent !</p> +**URL** **relative :** pointe vers un emplacement qui est _relatif_ au fichier à partir duquel vous établissez le lien, tout comme ce que nous avons vu précédemment. Donc, si nous voulons créer un lien depuis notre fichier d'exemple en `http://www.example.com/projects/index.html` vers un fichier PDF dans le même dossier, l'URL sera seulement le nom du fichier — càd., `project-brief.pdf` — pas besoin d'information supplémentaire. Si le PDF est disponible dans un sous-dossier de `projects` appelé `pdfs`, le lien relatif serait `pdfs/project-brief.pdf` (l'URL absolue équivalente serait `http://www.example.com/projects/pdfs/project-brief.pdf`.) -<h2 id="Meilleures_pratiques_de_liens">Meilleures pratiques de liens</h2> +Une URL relative pointera vers des emplacements différents en fonction de l'endroit où se situe le fichier qui est utilisé ; par exemple, si nous déplacions notre `index.html` du dossier `projects` vers la racine du site web (au niveau le plus élevé, dans aucun dossier), le lien de l'URL relative `pdfs/project-brief.pdf` qui s'y trouve pointerait alors vers un fichier situé en `http://www.example.com/pdfs/project-brief.pdf`, et non vers un fichier situé en `http://www.example.com/projects/pdfs/project-brief.pdf`. -<p>Il y a quelques bonnes pratiques à suivre pour l'écriture de liens. Jetons-y un coup d'œil.</p> +Bien sûr, l'emplacement du fichier `project-brief.pdf` et du dossier `pdfs` ne changera pas subitement du fait que vous avez déplacé le fichier `index.html` : cela aura pour effet que votre lien pointera vers un mauvais emplacement, de sorte que cela ne fonctionnera pas si on clique dessus. Vous devez être prudent ! -<ul> -</ul> +## Meilleures pratiques de liens -<h3 id="Utilisez_une_formulation_claire_des_liens">Utilisez une formulation claire des liens</h3> +Il y a quelques bonnes pratiques à suivre pour l'écriture de liens. Jetons-y un coup d'œil. -<p>Il est facile de mettre des liens sur une page. Mais ce n'est pas suffisant. Nous devons rendre nos liens <em>accessibles</em> à tous les lecteurs, indépendamment de leur contexte d'installation et des outils qu'ils préfèrent. Par exemple :</p> +### Utilisez une formulation claire des liens -<ul> - <li>les utilisateurs de lecteurs d'écran aiment à sauter de lien en lien sur la page, et à les lire hors contexte.</li> - <li>les moteurs de recherche utilisent le texte des liens pour indexer les fichiers cibles, c'est donc une bonne idée que d'inclure des mots-clés dans le texte du lien pour décrire effectivement à quoi il est lié.</li> - <li>les utilisateurs visuels survolent la page plutôt que d'en lire chaque mot, et leurs yeux seront forcément attirés par les particularités qui se détachent de la page, comme les liens. Ils trouveront utile le texte descriptif du lien.</li> -</ul> +Il est facile de mettre des liens sur une page. Mais ce n'est pas suffisant. Nous devons rendre nos liens _accessibles_ à tous les lecteurs, indépendamment de leur contexte d'installation et des outils qu'ils préfèrent. Par exemple : -<p>Regardons un exemple particulier :</p> +- les utilisateurs de lecteurs d'écran aiment à sauter de lien en lien sur la page, et à les lire hors contexte. +- les moteurs de recherche utilisent le texte des liens pour indexer les fichiers cibles, c'est donc une bonne idée que d'inclure des mots-clés dans le texte du lien pour décrire effectivement à quoi il est lié. +- les utilisateurs visuels survolent la page plutôt que d'en lire chaque mot, et leurs yeux seront forcément attirés par les particularités qui se détachent de la page, comme les liens. Ils trouveront utile le texte descriptif du lien. -<p><em><strong>Bon</strong> texte de lien:</em> <a href="https://firefox.com">Télécharger Firefox</a></p> +Regardons un exemple particulier : -<pre class="brush: html"><p><a href="https://firefox.com/"> +**\*Bon** texte de lien:\* [Télécharger Firefox](https://firefox.com) + +```html +<p><a href="https://firefox.com/"> Télécharger Firefox -</a></p></pre> +</a></p> +``` -<p><em><strong>Mauvais</strong> texte de lien :</em> <a href="https://firefox.com/">Cliquer ici </a>pour télécharger Firefox</p> +**\*Mauvais** texte de lien :\* [Cliquer ici ](https://firefox.com/)pour télécharger Firefox -<pre class="brush: html"><p><a href="https://firefox.com/"> +```html +<p><a href="https://firefox.com/"> Cliquer ici -</a> -pour télécharger Firefox</p> -</pre> +</a> +pour télécharger Firefox</p> +``` -<p>Autres conseils :</p> +Autres conseils : -<ul> - <li>Ne répétez pas l'URL dans le texte du lien — les URL sont moches, et elles le sont encore plus à entendre quand un lecteur d'écran les épèle.</li> - <li>Ne dites pas « lien » ou « liens vers... » dans le texte du lien, ce n'est que du rabâchage. Les lecteurs d'écran indiquent aux gens qu'il y a un lien. Les utilisateurs visuels verront aussi qu'il y a un lien, du fait que les liens sont généralement de couleur différente et soulignés (de façon générale, cette convention tacite ne devrait pas être trahie, car les utilisateurs y sont très habitués).</li> - <li>Faites que vos étiquettes de lien soient aussi courtes que possible : les liens longs agacent particulièrement les utilisateurs de lecteurs d'écran, qui doivent en écouter la lecture entière.</li> - <li>Minimiser les cas où plusieurs copies d'un même texte pointent vers des emplacements différents. Afficher une liste de liens hors contexte peut poser problème aux utilisateurs de lecteurs d'écran : ainsi plusieurs liens tous étiquetés « cliquez ici », « cliquez ici », « cliquez ici » seront source de confusion.</li> -</ul> +- Ne répétez pas l'URL dans le texte du lien — les URL sont moches, et elles le sont encore plus à entendre quand un lecteur d'écran les épèle. +- Ne dites pas « lien » ou « liens vers... » dans le texte du lien, ce n'est que du rabâchage. Les lecteurs d'écran indiquent aux gens qu'il y a un lien. Les utilisateurs visuels verront aussi qu'il y a un lien, du fait que les liens sont généralement de couleur différente et soulignés (de façon générale, cette convention tacite ne devrait pas être trahie, car les utilisateurs y sont très habitués). +- Faites que vos étiquettes de lien soient aussi courtes que possible : les liens longs agacent particulièrement les utilisateurs de lecteurs d'écran, qui doivent en écouter la lecture entière. +- Minimiser les cas où plusieurs copies d'un même texte pointent vers des emplacements différents. Afficher une liste de liens hors contexte peut poser problème aux utilisateurs de lecteurs d'écran : ainsi plusieurs liens tous étiquetés « cliquez ici », « cliquez ici », « cliquez ici » seront source de confusion. -<h3 id="Utilisez_des_liens_relatifs_partout_où_cest_possible">Utilisez des liens relatifs partout où c'est possible</h3> +### Utilisez des liens relatifs partout où c'est possible -<p>Compte tenu de la description ci-dessus, vous pourriez penser qu'utliser des liens absolus tout le temps est une bonne idée ; après tout, ils ne sont pas brisés si une page est déplacée, comme c'est le cas avec les liens relatifs. Mais, vous devez utiliser des liens relatifs partout où c'est possible pour pointer vers d'autres emplacements à l'intérieur d'un <em>même site web</em>. (pour les liens vers un <em>autre site web</em>, vous aurez besoin d'utiliser un lien absolu) :</p> +Compte tenu de la description ci-dessus, vous pourriez penser qu'utliser des liens absolus tout le temps est une bonne idée ; après tout, ils ne sont pas brisés si une page est déplacée, comme c'est le cas avec les liens relatifs. Mais, vous devez utiliser des liens relatifs partout où c'est possible pour pointer vers d'autres emplacements à l'intérieur d'un _même site web_. (pour les liens vers un _autre site web_, vous aurez besoin d'utiliser un lien absolu) : -<ul> - <li>Pour commencer, il sera plus facile de parcourir votre code — les URL relatives sont généralement nettement plus courtes que les URL absolues, ce qui rend la lecture de votre code beaucoup plus facile.</li> - <li>Ensuite, il est plus efficace d'utiliser des URL relatives partout où c'est possible. Quand vous utilisez une URL absolue, votre navigateur commence par rechercher l'emplacement réel du serveur dans le « Domain Name System » ({{glossary("DNS")}} ; voir <a href="/fr/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Fonctionnement du web</a> pour plus d'informations), puis il se rend sur ce serveur et trouve le fichier demandé. Avec une URL relative par contre, le navigateur recherche le fichier demandé uniquement sur le même serveur. Donc, si vous utilisez des URL absolues là où des URL relatives auraient été suffisantes, vous obligez constamment le navigateur à faire du travail supplémentaire, ce qui signifie qu'il fonctionnera moins efficacement.</li> -</ul> +- Pour commencer, il sera plus facile de parcourir votre code — les URL relatives sont généralement nettement plus courtes que les URL absolues, ce qui rend la lecture de votre code beaucoup plus facile. +- Ensuite, il est plus efficace d'utiliser des URL relatives partout où c'est possible. Quand vous utilisez une URL absolue, votre navigateur commence par rechercher l'emplacement réel du serveur dans le « Domain Name System » ({{glossary("DNS")}} ; voir [Fonctionnement du web](/fr/docs/Learn/Getting_started_with_the_web/How_the_Web_works) pour plus d'informations), puis il se rend sur ce serveur et trouve le fichier demandé. Avec une URL relative par contre, le navigateur recherche le fichier demandé uniquement sur le même serveur. Donc, si vous utilisez des URL absolues là où des URL relatives auraient été suffisantes, vous obligez constamment le navigateur à faire du travail supplémentaire, ce qui signifie qu'il fonctionnera moins efficacement. -<h3 id="Liaison_vers_des_ressources_non-HTML_signalez‑les_clairement">Liaison vers des ressources non-HTML : signalez‑les clairement</h3> +### Liaison vers des ressources non-HTML : signalez‑les clairement -<p>Quand faites un lien vers une ressource à télécharger (comme un PDF ou un document Word ) ou lue en flux (comme une video ou de l'audio) ou qui a un autre effet potentiellement inattendu (qui ouvre d'une fenêtre pop-up ou qui charge une vidéo Flash), vous devez le signaler clairement pour réduire toute confusion. Cela peut être parfaitement ennuyeux, par exemple :</p> +Quand faites un lien vers une ressource à télécharger (comme un PDF ou un document Word ) ou lue en flux (comme une video ou de l'audio) ou qui a un autre effet potentiellement inattendu (qui ouvre d'une fenêtre pop-up ou qui charge une vidéo Flash), vous devez le signaler clairement pour réduire toute confusion. Cela peut être parfaitement ennuyeux, par exemple : -<ul> - <li>si vous êtes sur une connexion à faible bande passante, cliquer sur un lien et initier un téléchargement de plusieurs mégaoctets de façon inattendue.</li> - <li>si vous n'avez pas Flash player installé, cliquer sur un lien et être soudain redirigé vers une page qui nécessite Flash.</li> -</ul> +- si vous êtes sur une connexion à faible bande passante, cliquer sur un lien et initier un téléchargement de plusieurs mégaoctets de façon inattendue. +- si vous n'avez pas Flash player installé, cliquer sur un lien et être soudain redirigé vers une page qui nécessite Flash. -<p>Voici quelques exemples suggérant les genres de texte pouvant être employé :</p> +Voici quelques exemples suggérant les genres de texte pouvant être employé : -<pre class="brush: html"><p><a href="http://www.exemple.com/rapport-volumineux.pdf"> +```html +<p><a href="http://www.exemple.com/rapport-volumineux.pdf"> Télécharger le rapport des ventes (PDF, 10Mo) -</a></p> +</a></p> -<p><a href="http://www.exemple.com/flux-video/" target="_blank"> +<p><a href="http://www.exemple.com/flux-video/" target="_blank"> Regarder la vidéo (le flux s'ouvre dans un nouvel onglet, qualité HD) -</a></p> +</a></p> -<p><a href="http://www.exemple.com/jeu-de-voiture"> +<p><a href="http://www.exemple.com/jeu-de-voiture"> Jouer au jeu de voiture (nécessite Flash) -</a></p></pre> +</a></p> +``` -<h3 id="Utilisez_lattribut_download_pour_faire_un_lien_vers_un_téléchargement">Utilisez l'attribut <code>download</code> pour faire un lien vers un téléchargement</h3> +### Utilisez l'attribut `download` pour faire un lien vers un téléchargement -<p>Quand vous faites un lien avec une ressource qui doit être téléchargée plutôt qu'ouverte dans le navigateur, vous pouvez utiliser l'attribut <code>download</code> pour fournir un nom d'enregistrement par défaut. Voici un exemple avec un lien de téléchargement vers la version Windows la plus récente de Firefox :</p> +Quand vous faites un lien avec une ressource qui doit être téléchargée plutôt qu'ouverte dans le navigateur, vous pouvez utiliser l'attribut `download` pour fournir un nom d'enregistrement par défaut. Voici un exemple avec un lien de téléchargement vers la version Windows la plus récente de Firefox : -<pre class="brush: html"><a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=fr-FR" - download="firefox-latest-64bit-installer.exe"> +```html +<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=fr-FR" + download="firefox-latest-64bit-installer.exe"> Télécharger la version de Firefox pour Windows la plus récente (64-bit)(français, France) -</a></pre> +</a> +``` -<h2 id="Apprentissage_actif_création_dun_menu_de_navigation">Apprentissage actif : création d'un menu de navigation</h2> +## Apprentissage actif : création d'un menu de navigation -<p>Pour cet exercice, nous aimerions que vous reliiez ensemble quelques pages par un menu de navigation pour créer un web site multi-page. C'est une manière courante de créer un site web, la même structure de page est utilisée sur chaque page, y compris le même menu de navigation, de sorte que quand les liens sont cliqués, cela vous donne l'impression de rester au même endroit, tandis qu'un contenu différent est présenté.</p> +Pour cet exercice, nous aimerions que vous reliiez ensemble quelques pages par un menu de navigation pour créer un web site multi-page. C'est une manière courante de créer un site web, la même structure de page est utilisée sur chaque page, y compris le même menu de navigation, de sorte que quand les liens sont cliqués, cela vous donne l'impression de rester au même endroit, tandis qu'un contenu différent est présenté. -<p>Vous aurez besoin de faire des copies locales des quatre pages suivantes, toutes dans le même dossier (voyez aussi le dossier <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> pour une liste complète des fichiers).</p> +Vous aurez besoin de faire des copies locales des quatre pages suivantes, toutes dans le même dossier (voyez aussi le dossier [navigation-menu-start](https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start) pour une liste complète des fichiers). -<ul> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li> -</ul> +- [index.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html) +- [projects.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html) +- [pictures.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html) +- [social.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html) -<p>Vous devez :</p> +Vous devez : -<ol> - <li>Ajouter une liste non-ordonnée à l'endroit indiqué sur une page, qui contiendra les noms des pages à relier. Un menu de navigation n'est habituellement qu'une liste de liens, donc c'est ok sur le plan sémantique.</li> - <li>Changer chaque nom de page en un lien vers cette page.</li> - <li>Copier le menu de navigation dans chaque page.</li> - <li>Sur chaque page, enlever seulement le lien vers cette page, c'est source de confusion et sans objet pour une page que d'inclure un lien vers elle-même, et l'absence d'un lien constitue un bon rappel visuel pour se souvenir sur quelle page vous êtes actuellement.</li> -</ol> +1. Ajouter une liste non-ordonnée à l'endroit indiqué sur une page, qui contiendra les noms des pages à relier. Un menu de navigation n'est habituellement qu'une liste de liens, donc c'est ok sur le plan sémantique. +2. Changer chaque nom de page en un lien vers cette page. +3. Copier le menu de navigation dans chaque page. +4. Sur chaque page, enlever seulement le lien vers cette page, c'est source de confusion et sans objet pour une page que d'inclure un lien vers elle-même, et l'absence d'un lien constitue un bon rappel visuel pour se souvenir sur quelle page vous êtes actuellement. -<p>L'exemple terminé devrait finir par ressembler à quelque chose comme ce qui suit :</p> +L'exemple terminé devrait finir par ressembler à quelque chose comme ce qui suit : -<p><img alt="Un exemple d'un menu de navigation HTML simple, avec les éléments page d'accueil, images, projets et menu des réseaux sociaux." src="accueil.png"></p> + -<div class="note"> -<p><strong>Note :</strong> si vous êtes bloqué, ou n'êtes pas sûr d'avoir bien compris, vous pouvez vérifier le dossier <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a> pour voir la réponse correcte.</p> -</div> +> **Note :** si vous êtes bloqué, ou n'êtes pas sûr d'avoir bien compris, vous pouvez vérifier le dossier [navigation-menu-marked-up](https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up) pour voir la réponse correcte. -<h2 id="Liens_de_courriel">Liens de courriel</h2> +## Liens de courriel -<p>Il est possible de créer des liens ou des boutons qui, losrqu'ils sont cliqués, ouvrent un nouveau message de courriel sortant plutôt que de faire un lien vers une ressource ou une page. C'est fait en utilisant l'élément {{HTMLElement("a")}} et le schéma d'URL <code>mailto:</code>.</p> +Il est possible de créer des liens ou des boutons qui, losrqu'ils sont cliqués, ouvrent un nouveau message de courriel sortant plutôt que de faire un lien vers une ressource ou une page. C'est fait en utilisant l'élément {{HTMLElement("a")}} et le schéma d'URL `mailto:`. -<p>Sous sa forme la plus basique et la plus communément utilisée, un lien <code>mailto:</code> indique simplement l'adresse du destinataire voulu. Par exemple :</p> +Sous sa forme la plus basique et la plus communément utilisée, un lien `mailto:` indique simplement l'adresse du destinataire voulu. Par exemple : -<pre class="brush: html"><a href="mailto:nullepart@mozilla.org">Envoyer un courriel à nullepart</a> -</pre> +```html +<a href="mailto:nullepart@mozilla.org">Envoyer un courriel à nullepart</a> +``` -<p>Ceci donne un résultat qui ressemble à ceci : <a href="mailto:nowhere@mozilla.org">Envoyer un courriel à nullepart</a>.</p> +Ceci donne un résultat qui ressemble à ceci : [Envoyer un courriel à nullepart](mailto:nowhere@mozilla.org). -<p>En fait, l'adresse de courriel est même optionnelle. Si vous l'omettez (c'est-à-dire, si votre {{htmlattrxref("href", "a")}} est simplement "mailto:"), une nouvelle fenêtre de courriel sortant sera ouverte par le client de courriel de l'utilisateur, sans adresse de destination encore spécifiée. C'est souvent utile comme pour les liens "Partager" que lesquels les utilisateurs peuvent cliquer pour envoyer un email à l'adresse de leur choix.</p> +En fait, l'adresse de courriel est même optionnelle. Si vous l'omettez (c'est-à-dire, si votre {{htmlattrxref("href", "a")}} est simplement "mailto:"), une nouvelle fenêtre de courriel sortant sera ouverte par le client de courriel de l'utilisateur, sans adresse de destination encore spécifiée. C'est souvent utile comme pour les liens "Partager" que lesquels les utilisateurs peuvent cliquer pour envoyer un email à l'adresse de leur choix. -<h3 id="Spécification_des_détails">Spécification des détails</h3> +### Spécification des détails -<p>En plus de l'adresse mail, vous pouvez fournir d'autres informations. En fait, tous les champs d'en-tête standards peuvent être ajoutés à l'URL <code>mailto</code> que vous fournissez. Les plus couramment utilisés parmi ceux-ci sont <code>subject</code>, <code>cc</code> et <code>body</code> (qui n'est pas à proprement parler un champ d'en-tête, mais qui vous permet d'indiquer un court message de contenu pour le nouveau courriel). Chaque champ est indiqué en termes de requête.</p> +En plus de l'adresse mail, vous pouvez fournir d'autres informations. En fait, tous les champs d'en-tête standards peuvent être ajoutés à l'URL `mailto` que vous fournissez. Les plus couramment utilisés parmi ceux-ci sont `subject`, `cc` et `body` (qui n'est pas à proprement parler un champ d'en-tête, mais qui vous permet d'indiquer un court message de contenu pour le nouveau courriel). Chaque champ est indiqué en termes de requête. -<p>Voici un exemple incluant cc (carbon copy), bcc (blind cc), subject (sujet) et body :</p> +Voici un exemple incluant cc (carbon copy), bcc (blind cc), subject (sujet) et body : -<pre class="brush: html"><a href="mailto:nullepart@mozilla.org?cc=nom2@rapidtables.com&bcc=nom3@rapidtables.com&subject=L%27objet%20du%20courriel&body=Le%20corps%20du%20courriel"> +```html +<a href="mailto:nullepart@mozilla.org?cc=nom2@rapidtables.com&bcc=nom3@rapidtables.com&subject=L%27objet%20du%20courriel&body=Le%20corps%20du%20courriel"> Envoyer un mail avec copie, copie cachée, sujet et corps de message -</a></pre> +</a> +``` -<div class="note"> -<p><strong>Note :</strong> La valeur de chaque champ doit être codée à la façon d'une URL, c'est-à-dire que les caractères non-imprimables (les caractères "invisibles" tels que les tabulations, les retours chariot et les sauts de page) et les espaces doivent être <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>. Notez également l'utilisation du point d'interrogation (<code>?</code>) pour séparer l'URL principale des valeurs de champ et de l'esperluette (&) pour séparer chaque champ dans l'URL <code>mailto:</code>. C'est la notation standard des requêtes URL. Lire <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires#La_méthode_GET">La méthode GET</a> pour comprendre ce pourquoi la notation de requête URL est habituellement le plus souvent utilisée.</p> -</div> +> **Note :** La valeur de chaque champ doit être codée à la façon d'une URL, c'est-à-dire que les caractères non-imprimables (les caractères "invisibles" tels que les tabulations, les retours chariot et les sauts de page) et les espaces doivent être [percent-escaped](http://en.wikipedia.org/wiki/Percent-encoding). Notez également l'utilisation du point d'interrogation (`?`) pour séparer l'URL principale des valeurs de champ et de l'esperluette (&) pour séparer chaque champ dans l'URL `mailto:`. C'est la notation standard des requêtes URL. Lire [La méthode GET](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires#La_méthode_GET) pour comprendre ce pourquoi la notation de requête URL est habituellement le plus souvent utilisée. -<p>Voici quelques autres exemples d'URL <code>mailto</code> :</p> +Voici quelques autres exemples d'URL `mailto` : -<ul> - <li><a href="mailto:">mailto:</a></li> - <li><a href="mailto:nullepart@mozilla.org">mailto:nullepart@mozilla.org</a></li> - <li><a href="mailto:nullepart@mozilla.org,personne@mozilla.org">mailto:nullepart@mozilla.org,personne@mozilla.org</a></li> - <li><a href="mailto:nullepart@mozilla.org">mailto:nullepart@mozilla.org?cc=personne@mozilla.org</a></li> - <li><a href="mailto:nullepart@mozilla.org?subject=Ceci%20est%20l'objet">mailto:nullepart@mozilla.org?cc=personne@mozilla.org&subject=Ceci%20est%20l%27objet</a></li> -</ul> +- <mailto:> +- <mailto:nullepart@mozilla.org> +- <mailto:nullepart@mozilla.org,personne@mozilla.org> +- [mailto:nullepart@mozilla.org?cc=personne@mozilla.org](mailto:nullepart@mozilla.org) +- [mailto:nullepart@mozilla.org?cc=personne@mozilla.org\&subject=Ceci%20est%20l%27objet](mailto:nullepart@mozilla.org?subject=Ceci%20est%20l'objet) -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>C'est tout pour les liens, du moins pour l'instant ! Vous reviendrez aux liens plus loin dans le cours quand vous en serez arrivé à les mettre en forme. Pour la prochaine étape HTML, nous reviendrons à l'analyse sémantique du texte et verrons quelques fonctionnalités plus avancées ou inhabituelles que vous trouverez utiles : le formatage avancé de texte est votre prochain arrêt.</p> +C'est tout pour les liens, du moins pour l'instant ! Vous reviendrez aux liens plus loin dans le cours quand vous en serez arrivé à les mettre en forme. Pour la prochaine étape HTML, nous reviendrons à l'analyse sémantique du texte et verrons quelques fonctionnalités plus avancées ou inhabituelles que vous trouverez utiles : le formatage avancé de texte est votre prochain arrêt. -<div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML")}}</div> +{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Commencer avec le HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li>Création d'hyperliens</li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formatage avancé du texte</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Faire une lettre</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li> -</ul> +- [Commencer avec le HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started) +- [Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) +- [Fondamentaux du texte HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) +- Création d'hyperliens +- [Formatage avancé du texte](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) +- [Structure de Site Web et de document](/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) +- [Déboguer de l'HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) +- [Faire une lettre](/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter) +- [Structurer une page de contenu](/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content) diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/index.md b/files/fr/learn/html/introduction_to_html/debugging_html/index.md index ed0cfa6a2b..499393a774 100644 --- a/files/fr/learn/html/introduction_to_html/debugging_html/index.md +++ b/files/fr/learn/html/introduction_to_html/debugging_html/index.md @@ -13,182 +13,181 @@ tags: translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}} -<div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}</div> - -<p>Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider à trouver et corriger les erreurs en HTML.</p> +Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider à trouver et corriger les erreurs en HTML. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Être familiarisé avec les bases du HTML, traitées aux pages <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML,</a> <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML </a>et <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Apprendre les bases de l'utilisation des outils de débogage pour détecter des problèmes en HTML.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Être familiarisé avec les bases du HTML, traitées aux pages + <a + href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started" + >Commencer avec le HTML,</a + > + <a + href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals" + >Fondamentaux du texte HTML </a + >et + <a + href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks" + >Création d'hyperliens</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Apprendre les bases de l'utilisation des outils de débogage pour + détecter des problèmes en HTML. + </td> + </tr> + </tbody> </table> -<h2 id="Déboguer_n'est_pas_un_problème">Déboguer n'est pas un problème</h2> +## Déboguer n'est pas un problème + +Quand on écrit du code , tout va généralement bien, jusqu'au moment redouté où une erreur se produit — vous avez fait quelque chose d'incorrect, donc votre code ne fonctionne pas — soit pas du tout, soit pas tout à fait comme vous l'aviez souhaité. Par exemple, ce qui suit montre une erreur signalée lors d'une tentative de {{glossary("compile","compilation")}} d'un programme simple écrit en Rust. + +Ici, le message d'erreur est relativement facile à comprendre — « unterminated double quote string » : il manque un guillemet double ouvrant ou fermant pour envelopper la chaîne. Si vous regardez le listage, vous verrez `println!(Salut, Ô Monde!");` il manque un guillemet double. Cependant, des messages d'erreur peuvent devenir plus complexes et plus abscons au fur et à mesure que le programme grossit et, même dans des cas simples devenir intimidants à quelqu'un qui ne connaît rien du Rust. + +Déboguer ne doit toutefois pas devenir un problème — la clé pour être à l'aise lors de l'écriture et du débogage d'un programme réside dans une bonne connaissance à la fois du langage et des outils. + +## HTML et le débogage + +HTML n'est pas aussi compliqué à comprendre que le Rust. HTML n'est pas compilé sous une forme différente avant que le navigateur n'ait fait son analyse et affiche le résultat (il est _interprété_, pas _compilé_). Et la syntaxe des {{glossary("element","éléments")}} HTML est sans doute beaucoup plus facile à comprendre qu'un « vrai langage de programmation » tel le Rust, le {{glossary("JavaScript")}} ou le {{glossary("Python")}}. La façon dont les navigateurs analysent le HTML est beaucoup plus **permissive** que celle des langages de programmation, ce qui est à la fois une bonne et une mauvaise chose. + +### Code permissif + +Que voulons‑nous dire par permissif ? Et bien, quand vous faites une erreur dans du code, vous rencontrerez deux types principaux d'erreurs : + +- **Erreurs de syntaxe** : ce sont des « fautes d'orthographe » dans le code qui font que le programme ne fonctionne vraiment pas, comme l'erreur du Rust ci‑dessus. Elles sont généralement faciles à corriger pour autant que vous soyez à l'aise avec la syntaxe du langage et que vous sachiez ce que signifie le message d'erreur. +- **Erreurs de logique** : ce sont des erreurs dans lesquelles la syntaxe est réellement correcte, mais pour lesquelles le code ne correspond pas à vos souhaits, ce qui veut dire que le programme ne s'exécute pas correctement. Elles sont généralement plus difficiles à corriger que les erreurs de syntaxe, car il n'y a pas de message d'erreur pour vous guider à la source de l'erreur. + +HTML ne craint pas les erreurs de syntaxe, car les navigateurs l'analysent de manière permissive : la page s'affiche toujours même s'il y a des erreurs de syntaxe. Les navigateurs intègrent des règles indiquant comment interpréter un balisage incorrectement écrit, de sorte que vous obtiendrez toujours quelque chose à l'exécution, même si ce n'est pas ce que vous attendiez. Mais cela reste, bien sûr, toujours un problème ! + +> **Note :** HTML est analysé de façon permissive parce que, lorsque le Web a été créé pour la première fois, on a décidé qu'il était plus important de permettre aux gens de publier leur contenu que de s'assurer d'une syntaxe absolument correcte. Le web ne serait probablement pas aussi populaire qu'il l'est aujourd'hui, s'il avait été plus strict dans ses débuts. + +### Apprentissage actif : étude avec un code permissif + +Voici le moment venu d'étudier le caractère permissif du code HTML. + +1. Primo, télécharchez notre démo [debug-example ](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html)et enregistrez‑le localement. Cette démo est délibérement écrite avec des erreurs pour que nous puissions les examiner (le balisage HTML est dit **malformé**, par opposition à **bien-formé**). +2. Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci : +3. Constatons que ce n'est pas terrible ; examinons le code source pour voir ce que nous pouvons en faire (seul le contenu de l'élément `body` est affiché) : + + <h1>Exemple de HTML à déboguer</h1> + + <p>Quelles sont les causes d'erreur en HTML ? -<p>Quand on écrit du code , tout va généralement bien, jusqu'au moment redouté où une erreur se produit — vous avez fait quelque chose d'incorrect, donc votre code ne fonctionne pas — soit pas du tout, soit pas tout à fait comme vous l'aviez souhaité. Par exemple, ce qui suit montre une erreur signalée lors d'une tentative de {{glossary("compile","compilation")}} d'un programme simple écrit en Rust.</p> + <ul> + <li>Éléments non fermés : si un élément n'est <strong>pas + fermé proprement, ses effets peuvent déborder sur des + zones que vous ne souhaitiez pas. -<p><img alt="Console montrant le résultat de la compilation d'un programme Rust avec guillemet manquant dans une chaîne textuelle dans une instruction d'affichage. Le message signalé est « erreur : guillemet double manquant dans la chaîne »." src="fr-erreur.png">Ici, le message d'erreur est relativement facile à comprendre — « unterminated double quote string » : il manque un guillemet double ouvrant ou fermant pour envelopper la chaîne. Si vous regardez le listage, vous verrez <code>println!(Salut, Ô Monde!");</code> il manque un guillemet double. Cependant, des messages d'erreur peuvent devenir plus complexes et plus abscons au fur et à mesure que le programme grossit et, même dans des cas simples devenir intimidants à quelqu'un qui ne connaît rien du Rust.</p> + <li>Éléments incorrectement imbriqués : imbriquer des + éléments proprement est également très important pour + que le code se comporte correctement. + <strong>caractères gras <em>ou gras et italiques ?</strong> + qu'est‑ce ?</em> -<p>Déboguer ne doit toutefois pas devenir un problème — la clé pour être à l'aise lors de l'écriture et du débogage d'un programme réside dans une bonne connaissance à la fois du langage et des outils.</p> + <li>Attributs non fermés : autre source courante de problèmes + en HTML. Voici un exemple: <a href="https://www.mozilla.org/> + lien à la page d'accueil de Mozilla</a> + </ul> -<h2 id="HTML_et_le_débogage">HTML et le débogage</h2> +4. Revoyons les problèmes : + - Les élements {{htmlelement("p")}} (paragraphe) et {{htmlelement("li")}} (élément de liste) n'ont pas de balise de fermeture. En voyant l'image ci‑dessus, cela ne semble pas avoir trop sévèrement affecté le rendu, car on voit bien où un élément se termine et où le suivant commence. + - Le premier élément {{htmlelement("strong")}} n'a pas de balise de fermeture. C'est un peu plus problématique, car il n'est pas possible de dire où l'élément est supposé se terminer. En fait, tout le reste du texte est en gras. + - Cette partie est mal imbriquée : `<strong>caractères gras <em>ou gras et italiques ?</strong> qu'est ce ?</em>`. Pas facile de dire comment il faut interpréter cela en raison du problème précédent. + - La valeur de l'attribut {{htmlattrxref("href","a")}} n'a pas de guillemet double fermant. C'est ce qui semble avoir posé le plus gros problème — le lien n'a pas été mentionné du tout. +5. Revoyons maintenant comment le navigateur a vu le balisage, par comparaison au balisage du code source. Pour ce faire, utilisons les outils de développement du navigateur. Si vous n'êtes pas un familier de l'utilisation des outils de développement du navigateur, prenez quelques minutes pour revoir [Découverte des outils de développement du navigateur](/fr/docs/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs). +6. Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble :  +7. Avec l'« Inspecteur », explorons le code en détail pour voir comment le navigateur a essayé de corriger nos erreurs HTML (nous avons fait la revue dans Firefox ; d'autres navigateurs modernes _devraient_ donner le même résultat) : -<p>HTML n'est pas aussi compliqué à comprendre que le Rust. HTML n'est pas compilé sous une forme différente avant que le navigateur n'ait fait son analyse et affiche le résultat (il est <em>interprété</em>, pas <em>compilé</em>). Et la syntaxe des {{glossary("element","éléments")}} HTML est sans doute beaucoup plus facile à comprendre qu'un « vrai langage de programmation » tel le Rust, le {{glossary("JavaScript")}} ou le {{glossary("Python")}}. La façon dont les navigateurs analysent le HTML est beaucoup plus <strong>permissive</strong> que celle des langages de programmation, ce qui est à la fois une bonne et une mauvaise chose.</p> + - Les éléments `p` et `li` ont été pourvus de balises fermantes. + - L'endroit où le premier élément `<strong>` doit être fermé n'est pas clair, donc le navigateur a enveloppé séparément chaque bloc de texte avec ses propres balises `strong`, jusqu'à la fin du document ! + - L'imbrication incorrecte a été corrigée ainsi : -<h3 id="Code_permissif">Code permissif</h3> + ```html + <strong>caractères gras + <em>ou caractères gras et italiques ?</em> + </strong> + <em> qu'est ce ?</em> + ``` -<p>Que voulons‑nous dire par permissif ? Et bien, quand vous faites une erreur dans du code, vous rencontrerez deux types principaux d'erreurs :</p> + - Le lien avec les guillemets manquants a été illico détruit. Le dernier élément `li` ressemble à ceci : -<ul> - <li><strong>Erreurs de syntaxe </strong>: ce sont des « fautes d'orthographe » dans le code qui font que le programme ne fonctionne vraiment pas, comme l'erreur du Rust ci‑dessus. Elles sont généralement faciles à corriger pour autant que vous soyez à l'aise avec la syntaxe du langage et que vous sachiez ce que signifie le message d'erreur.</li> - <li><strong>Erreurs de logique </strong>: ce sont des erreurs dans lesquelles la syntaxe est réellement correcte, mais pour lesquelles le code ne correspond pas à vos souhaits, ce qui veut dire que le programme ne s'exécute pas correctement. Elles sont généralement plus difficiles à corriger que les erreurs de syntaxe, car il n'y a pas de message d'erreur pour vous guider à la source de l'erreur.</li> -</ul> + ```html + <li> + <strong>Attributs non fermés : autre source courante de problèmes + en HTML. Voici un exemple :</strong> + </li> + ``` +### Validation d'un HTML +Comme vous pouvez le voir dans l'exemple ci-dessus, il faut s'assurer que votre HTML est bien formé ! Mais comment ? Dans un petit fichier comme celui qui précède, il est facile de chercher dans les lignes et de trouver les erreurs, mais qu'en est-il d'un document HTML énorme et complexe ? -<p>HTML ne craint pas les erreurs de syntaxe, car les navigateurs l'analysent de manière permissive : la page s'affiche toujours même s'il y a des erreurs de syntaxe. Les navigateurs intègrent des règles indiquant comment interpréter un balisage incorrectement écrit, de sorte que vous obtiendrez toujours quelque chose à l'exécution, même si ce n'est pas ce que vous attendiez. Mais cela reste, bien sûr, toujours un problème !</p> +La meilleure stratégie consiste à faire passer votre page HTML par le [Markup Validation Service (](https://validator.w3.org/)Service de validation de balisage) — créé et maintenu par le W3C, l'organisation s'occupant des normes définissant le HTML, les CSS et autres technologies web. Cet outil Web accepte un document HTML en entrée, le parcourt et fait le rapport de ce qui ne va pas dans le HTML soumis. -<div class="note"> -<p><strong>Note :</strong> HTML est analysé de façon permissive parce que, lorsque le Web a été créé pour la première fois, on a décidé qu'il était plus important de permettre aux gens de publier leur contenu que de s'assurer d'une syntaxe absolument correcte. Le web ne serait probablement pas aussi populaire qu'il l'est aujourd'hui, s'il avait été plus strict dans ses débuts.</p> -</div> + -<h3 id="Apprentissage_actif_étude_avec_un_code_permissif">Apprentissage actif : étude avec un code permissif</h3> +Pour définir le HTML à valider, vous pouvez donner une adresse web (_Validate by URI_) , téléverser un fichier HTML (_Validate by File Upload_) ou entrer directement du code HTML (_Validate by Direct Input_). -<p>Voici le moment venu d'étudier le caractère permissif du code HTML.</p> +### Apprentissage actif : validation d'un document HTML -<ol> - <li>Primo, télécharchez notre démo <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example </a>et enregistrez‑le localement. Cette démo est délibérement écrite avec des erreurs pour que nous puissions les examiner (le balisage HTML est dit <strong>malformé</strong>, par opposition à <strong>bien-formé</strong>).</li> - <li>Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci :<img alt="Un simple document HTML intitulé « Exemples de HTML à déboguer » et quelques informations sur les erreurs HTML courantes, telles que les éléments non fermés ou mal imbriqués et des attributs non fermés. " src="fr-html-errone.png"></li> - <li>Constatons que ce n'est pas terrible ; examinons le code source pour voir ce que nous pouvons en faire (seul le contenu de l'élément <code>body</code> est affiché) : - <pre> <h1>Exemple de HTML à déboguer</h1> +Essayons cet outil avec notre [document exemple](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html). - <p>Quelles sont les causes d'erreur en HTML ? +1. D'abord, chargez le [Markup Validation Service](https://validator.w3.org/) dans un des onglets du navigateur, si ce n'est déjà fait. +2. Basculez sur l'onglet [Validate by Direct Input](https://validator.w3.org/#validate_by_input). +3. Copiez la totalité du code du document (pas uniquement l'élément `body`) et collez-le dans la grande zone de texte affichée dans Markup Validation Service. +4. Pressez le bouton _Check_. - <ul> - <li>Éléments non fermés : si un élément n'est <strong>pas - fermé proprement, ses effets peuvent déborder sur des - zones que vous ne souhaitiez pas. +Cela vous donnera une liste d'erreurs et autres informations. - <li>Éléments incorrectement imbriqués : imbriquer des - éléments proprement est également très important pour - que le code se comporte correctement. - <strong>caractères gras <em>ou gras et italiques ?</strong> - qu'est‑ce ?</em> + - <li>Attributs non fermés : autre source courante de problèmes - en HTML. Voici un exemple: <a href="https://www.mozilla.org/> - lien à la page d'accueil de Mozilla</a> - </ul></pre> - </li> - <li>Revoyons les problèmes : - <ul> - <li>Les élements {{htmlelement("p")}} (paragraphe) et {{htmlelement("li")}} (élément de liste) n'ont pas de balise de fermeture. En voyant l'image ci‑dessus, cela ne semble pas avoir trop sévèrement affecté le rendu, car on voit bien où un élément se termine et où le suivant commence.</li> - <li>Le premier élément {{htmlelement("strong")}} n'a pas de balise de fermeture. C'est un peu plus problématique, car il n'est pas possible de dire où l'élément est supposé se terminer. En fait, tout le reste du texte est en gras.</li> - <li>Cette partie est mal imbriquée : <code><strong>caractères gras <em>ou gras et italiques ?</strong> qu'est ce ?</em></code>. Pas facile de dire comment il faut interpréter cela en raison du problème précédent.</li> - <li>La valeur de l'attribut {{htmlattrxref("href","a")}} n'a pas de guillemet double fermant. C'est ce qui semble avoir posé le plus gros problème — le lien n'a pas été mentionné du tout.</li> - </ul> - </li> - <li>Revoyons maintenant comment le navigateur a vu le balisage, par comparaison au balisage du code source. Pour ce faire, utilisons les outils de développement du navigateur. Si vous n'êtes pas un familier de l'utilisation des outils de développement du navigateur, prenez quelques minutes pour revoir <a href="/fr/docs/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs">Découverte des outils de développement du navigateur</a>.</li> - <li>Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble : <img alt="L'inspecteur HTML dans Firefox, avec le paragraphe de l'exemple en surbrillance, montrant le texte "Quelles sont les causes d'erreurs en HTML ? Ici, vous pouvez voir que l'élément de paragraphe a été fermé par le navigateur." src="fr-inspecteur.png"></li> - <li>Avec l'« Inspecteur », explorons le code en détail pour voir comment le navigateur a essayé de corriger nos erreurs HTML (nous avons fait la revue dans Firefox ; d'autres navigateurs modernes <em>devraient</em> donner le même résultat) : - <ul> - <li>Les éléments <code>p</code> et <code>li</code> ont été pourvus de balises fermantes.</li> - <li>L'endroit où le premier élément <code><strong></code> doit être fermé n'est pas clair, donc le navigateur a enveloppé séparément chaque bloc de texte avec ses propres balises <code>strong</code>, jusqu'à la fin du document !</li> - <li>L'imbrication incorrecte a été corrigée ainsi : - <pre class="brush: html"><strong>caractères gras - <em>ou caractères gras et italiques ?</em> -</strong> -<em> qu'est ce ?</em></pre> - </li> - <li>Le lien avec les guillemets manquants a été illico détruit. Le dernier élément <code>li</code> ressemble à ceci : - <pre class="brush: html"><li> - <strong>Attributs non fermés : autre source courante de problèmes -en HTML. Voici un exemple :</strong> -</li></pre> - </li> - </ul> - </li> -</ol> +#### Interprétation des messages d'erreur -<h3 id="Validation_d'un_HTML">Validation d'un HTML</h3> +Les messages d'erreur sont généralement utiles, mais parfois non ; avec un peu de pratique, vous trouverez comment les interpréter pour corriger votre code. Passons en revue les messages d'erreur et voyons leur signification. Chaque message est accompagné d'un numéro de ligne et de colonne pour faciliter la localisation de l'erreur. -<p>Comme vous pouvez le voir dans l'exemple ci-dessus, il faut s'assurer que votre HTML est bien formé ! Mais comment ? Dans un petit fichier comme celui qui précède, il est facile de chercher dans les lignes et de trouver les erreurs, mais qu'en est-il d'un document HTML énorme et complexe ?</p> +- « End tag `li` implied, but there were open elements » (2 instances) : ces messages indiquent qu'un élément ouvert devrait être fermé. La balise de fermeture est implicite, mais pas réellement mise. L'information ligne/colonne pointe sur la première ligne après laquelle la balise de fermeture devrait réellement se situer, mais c'est un bon indice pour voir ce qui ne va pas. +- « Unclosed element `strong` » : C'est facile à comprendre — un élément {{htmlelement("strong")}} n'est pas fermé ; l'information ligne/colonne pointe directement dessus. +- « End tag `strong` violates nesting rules » : signale des éléments incorrectement imbriqués et l'information ligne/colonne signale là où cela se trouve. +- « End of file reached when inside an attribute value. Ignoring tag » : c'est peu clair ; la remarque se rapporte au fait qu'il y a une valeur d'attribut improprement formée quelque part, peut-être près de la fin du fichier car la fin du fichier apparaît dans la valeur de l'attribut. Le fait que le navigateur ne rende pas le lien est un bon indice pour dire que cet élément est en faute. +- « End of file seen and there were open elements » : c'est un peu ambigu, mais se réfère au fait qu'à la base des éléments ouverts n'ont pas été proprement fermés. Les numéros de ligne pointent sur les dernières lignes du fichier et ce message d'erreur vient avec une ligne de code qui désigne un exemple d'élément ouvert : -<p>La meilleure stratégie consiste à faire passer votre page HTML par le <a href="https://validator.w3.org/">Markup Validation Service (</a>Service de validation de balisage) — créé et maintenu par le W3C, l'organisation s'occupant des normes définissant le HTML, les CSS et autres technologies web. Cet outil Web accepte un document HTML en entrée, le parcourt et fait le rapport de ce qui ne va pas dans le HTML soumis.</p> + exemple: <a href="https://www.mozilla.org/>lien à la page d'accueil de Mozilla</a> ↩ </ul>↩ </body>↩</html> -<p><img alt="La page d'accueil du validateur HTML" src="fr-w3c.png"></p> + > **Note :** un attribut sans guillemet fermant peut entraîner un élément ouvert car le reste du document est interprété comme le contenu de l'attribut. -<p>Pour définir le HTML à valider, vous pouvez donner une adresse web (<em>Validate by URI</em>) , téléverser un fichier HTML (<em>Validate by File Upload</em>) ou entrer directement du code HTML (<em>Validate by Direct Input</em>).</p> +- « Unclosed element `ul` » : n'est pas vraiment utile, car l'élément {{htmlelement("ul")}} _est_ correctement fermé. Cette erreur ressort car l'élément {{htmlelement("a")}} n'est pas fermé en raison de l'absence de guillemet fermant. -<h3 id="Apprentissage_actif_validation_d'un_document_HTML">Apprentissage actif : validation d'un document HTML</h3> +Si vous ne comprenez pas ce que signifie chaque message d'erreur, ne vous inquiétez pas — une bonne idée consiste à corriger quelques erreurs à la fois. Puis essayez de revalider le HTML pour voir les erreurs restantes. Parfois, la correction d'une erreur en amont permet aussi d'éliminer d'autres messages d'erreur — plusieurs erreurs sont souvent causées par un même problème, avec une sorte d'effet domino. -<p>Essayons cet outil avec notre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">document exemple</a>.</p> +Vous saurez que toutes vos erreurs sont corrigées quand vous verrez la bannière suivante dans la sortie : -<ol> - <li>D'abord, chargez le <a href="https://validator.w3.org/">Markup Validation Service</a> dans un des onglets du navigateur, si ce n'est déjà fait.</li> - <li>Basculez sur l'onglet <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a>.</li> - <li>Copiez la totalité du code du document (pas uniquement l'élément <code>body</code>) et collez-le dans la grande zone de texte affichée dans Markup Validation Service.</li> - <li>Pressez le bouton <em>Check</em>.</li> -</ol> + -<p>Cela vous donnera une liste d'erreurs et autres informations.</p> +## Résumé -<p><img alt="La liste des résultats de la validation de HTML par le service de validation du W3C." src="fr-liste-erreur.png"></p> +Voilà donc une introduction au débogage HTML, qui devrait vous donner des compétences utiles sur lesquelles compter lorsque vous commencerez à déboguer des CSS, du JavaScript ou d'autres types de code plus tard dans votre carrière. Ceci marque également la fin des articles d'apprentissage du module Introduction au HTML — maintenant vous pouvez faire un auto‑test avec nos évaluations : le lien ci‑dessous vous dirige sur la première. -<h4 id="Interprétation_des_messages_d'erreur">Interprétation des messages d'erreur</h4> +{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}} -<p>Les messages d'erreur sont généralement utiles, mais parfois non ; avec un peu de pratique, vous trouverez comment les interpréter pour corriger votre code. Passons en revue les messages d'erreur et voyons leur signification. Chaque message est accompagné d'un numéro de ligne et de colonne pour faciliter la localisation de l'erreur.</p> +## Dans ce module -<ul> - <li>« End tag <code>li</code> implied, but there were open elements » (2 instances) : ces messages indiquent qu'un élément ouvert devrait être fermé. La balise de fermeture est implicite, mais pas réellement mise. L'information ligne/colonne pointe sur la première ligne après laquelle la balise de fermeture devrait réellement se situer, mais c'est un bon indice pour voir ce qui ne va pas.</li> - <li>« Unclosed element <code>strong</code> » : C'est facile à comprendre — un élément {{htmlelement("strong")}} n'est pas fermé ; l'information ligne/colonne pointe directement dessus.</li> - <li>« End tag <code>strong</code> violates nesting rules » : signale des éléments incorrectement imbriqués et l'information ligne/colonne signale là où cela se trouve.</li> - <li>« End of file reached when inside an attribute value. Ignoring tag » : c'est peu clair ; la remarque se rapporte au fait qu'il y a une valeur d'attribut improprement formée quelque part, peut-être près de la fin du fichier car la fin du fichier apparaît dans la valeur de l'attribut. Le fait que le navigateur ne rende pas le lien est un bon indice pour dire que cet élément est en faute.</li> - <li>« End of file seen and there were open elements » : c'est un peu ambigu, mais se réfère au fait qu'à la base des éléments ouverts n'ont pas été proprement fermés. Les numéros de ligne pointent sur les dernières lignes du fichier et ce message d'erreur vient avec une ligne de code qui désigne un exemple d'élément ouvert : - <pre>exemple: <a href="https://www.mozilla.org/>lien à la page d'accueil de Mozilla</a> ↩ </ul>↩ </body>↩</html></pre> - - <div class="note"> - <p><strong>Note :</strong> un attribut sans guillemet fermant peut entraîner un élément ouvert car le reste du document est interprété comme le contenu de l'attribut.</p> - </div> - </li> - <li>« Unclosed element <code>ul</code> » : n'est pas vraiment utile, car l'élément {{htmlelement("ul")}} <em>est</em> correctement fermé. Cette erreur ressort car l'élément {{htmlelement("a")}} n'est pas fermé en raison de l'absence de guillemet fermant.</li> -</ul> - -<p>Si vous ne comprenez pas ce que signifie chaque message d'erreur, ne vous inquiétez pas — une bonne idée consiste à corriger quelques erreurs à la fois. Puis essayez de revalider le HTML pour voir les erreurs restantes. Parfois, la correction d'une erreur en amont permet aussi d'éliminer d'autres messages d'erreur — plusieurs erreurs sont souvent causées par un même problème, avec une sorte d'effet domino.</p> - -<p>Vous saurez que toutes vos erreurs sont corrigées quand vous verrez la bannière suivante dans la sortie : </p> - -<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="valid-html-banner.png"></p> - -<h2 id="Résumé">Résumé</h2> - -<p>Voilà donc une introduction au débogage HTML, qui devrait vous donner des compétences utiles sur lesquelles compter lorsque vous commencerez à déboguer des CSS, du JavaScript ou d'autres types de code plus tard dans votre carrière. Ceci marque également la fin des articles d'apprentissage du module Introduction au HTML — maintenant vous pouvez faire un auto‑test avec nos évaluations : le lien ci‑dessous vous dirige sur la première.</p> - -<p>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}</p> - - - -<h2 id="Dans_ce_module">Dans ce module</h2> - -<ul> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Commencer avec le HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li> - <li><a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creation d'hyperliens</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formatage avancé du texte</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li>Déboguer de l'HTML</li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Faire une Lettre</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li> -</ul> +- [Commencer avec le HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started) +- [Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) +- [Fondamentaux du texte HTML](/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals) +- [Creation d'hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) +- [Formatage avancé du texte](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) +- [Structure de Site Web et de document](/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) +- Déboguer de l'HTML +- [Faire une Lettre](/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter) +- [Structurer une page de contenu](/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content) diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md index 2ffb0e3cdf..1bb20fcfbf 100644 --- a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md +++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md @@ -14,278 +14,283 @@ tags: translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure --- -<div>{{LearnSidebar}}<br> -{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML","Apprendre/HTML/Introduction_à_HTML")}}<br> - </div> +{{LearnSidebar}} +{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML","Apprendre/HTML/Introduction_à_HTML")}} -<p>De même que HTML est utilisé pour définir les diverses parties indépendantes d'une page (comme un « paragraphe » ou une « image »), HTML l'est pour définir des zones de votre site web (comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d'un site simple et l'écriture du HTML correspondant.</p> +De même que HTML est utilisé pour définir les diverses parties indépendantes d'une page (comme un « paragraphe » ou une « image »), HTML l'est pour définir des zones de votre site web (comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d'un site simple et l'écriture du HTML correspondant. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Être familiarisé avec les bases du HTML, traitées à la page <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a> et du formatage de texte HTML, décrit dans les <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a>. Comment fonctionnent les liens hyperlinks , comme décrit dans <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td> - <p>Apprendre comment structurer votre document en utilisant des balises sémantiques et comment élaborer la structure d'un site web simple.</p> - </td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Être familiarisé avec les bases du HTML, traitées à la page + <a + href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started" + >Commencer avec le HTML</a + > + et du formatage de texte HTML, décrit dans les + <a + href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals" + >Fondamentaux du texte HTML</a + >. Comment fonctionnent les liens hyperlinks , comme décrit dans + <a + href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks" + >Création d'hyperliens</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + <p> + Apprendre comment structurer votre document en utilisant des balises + sémantiques et comment élaborer la structure d'un site web simple. + </p> + </td> + </tr> + </tbody> </table> -<h2 id="Principales_parties_dun_document"><strong>Principales parties d'un document</strong></h2> +## **Principales parties d'un document** -<p>Les pages web peuvent sembler assez différentes les unes des autres, mais elles ont toutes tendance à partager des composantes standard similaires, sauf si la page affiche une vidéo ou un jeu en plein écran, relève d'une sorte de projet artistique ou... est simplement mal structurée :</p> +Les pages web peuvent sembler assez différentes les unes des autres, mais elles ont toutes tendance à partager des composantes standard similaires, sauf si la page affiche une vidéo ou un jeu en plein écran, relève d'une sorte de projet artistique ou... est simplement mal structurée : -<dl> - <dt>En‑tête (header)</dt> - <dd>Généralement une grande bande placée en travers au haut de la page avec un titre ou un logo. C'est là où les principales informations du site restent d'une page à l'autre.</dd> - <dt>Barre de navigation</dt> - <dd>Elle fait le lien vers les principales parties du site ; d'habitude, elle est présentée sous forme de boutons de menu, de liens ou d'onglets. Comme l'en‑tête, la barre de navigation reste souvent cohérente d'une page à l'autre — avoir une navigation destructurée ne peut conduire qu'à de la confusion et la frustation pour le lecteur. Beaucoup de créateurs de site considèrent la barre de navigation partie de l'en‑tête et non comme un composant individuel, mais ce n'est pas une exigence. En fait certains soutiennent également que le fait d'avoir les deux séparés est préférable pour l'accessibilité, car les lecteurs d'écran lisent mieux les deux éléments s'ils sont séparés.</dd> - <dt>Contenu principal</dt> - <dd>Une grande zone au centre contenant la majeure partie du contenu unique de la dite page web, par ex. la vidéo à regarder, ou le corps de l'article à parcourir, ou la carte à lire, ou les dernières nouvelles etc. C'est la partie du site variable de page en page.</dd> - <dt>Barre latérale</dt> - <dd> - <p>Quelques informations autour du sujet, liens, citations, annonces, etc. Habituellement c'est contextuel au contenu principal (par exemple sur une page d'informations, la barre latérale peut contenir la biographie de l'auteur, ou des liens vers des articles connexes) mais il y a aussi des cas où vous trouverez des éléments récurrents comme un système de navigation secondaire.</p> - </dd> - <dt>Pied de page</dt> - <dd> - <p>Une bande au bas de la page qui contient généralement, en petits caractères, des avis de droit d'auteur ou des coordonnées de contact. C'est un endroit pour mettre de l'information commune (comme l'en-tête), mais il s'agit dans ce cas d'informations non‑critiques, voire secondaires par rapport au site Web lui-même. Le pied de page est aussi parfois utilisé à des fins de {{Glossary("SEO")}}, en fournissant des liens pour un accès rapide à des contenus prisés.</p> - Un « site web typique » pourrait ressembler à quelque chose comme ceci :</dd> -</dl> +- En‑tête (header) + - : Généralement une grande bande placée en travers au haut de la page avec un titre ou un logo. C'est là où les principales informations du site restent d'une page à l'autre. +- Barre de navigation + - : Elle fait le lien vers les principales parties du site ; d'habitude, elle est présentée sous forme de boutons de menu, de liens ou d'onglets. Comme l'en‑tête, la barre de navigation reste souvent cohérente d'une page à l'autre — avoir une navigation destructurée ne peut conduire qu'à de la confusion et la frustation pour le lecteur. Beaucoup de créateurs de site considèrent la barre de navigation partie de l'en‑tête et non comme un composant individuel, mais ce n'est pas une exigence. En fait certains soutiennent également que le fait d'avoir les deux séparés est préférable pour l'accessibilité, car les lecteurs d'écran lisent mieux les deux éléments s'ils sont séparés. +- Contenu principal + - : Une grande zone au centre contenant la majeure partie du contenu unique de la dite page web, par ex. la vidéo à regarder, ou le corps de l'article à parcourir, ou la carte à lire, ou les dernières nouvelles etc. C'est la partie du site variable de page en page. +- Barre latérale + - : Quelques informations autour du sujet, liens, citations, annonces, etc. Habituellement c'est contextuel au contenu principal (par exemple sur une page d'informations, la barre latérale peut contenir la biographie de l'auteur, ou des liens vers des articles connexes) mais il y a aussi des cas où vous trouverez des éléments récurrents comme un système de navigation secondaire. +- Pied de page -<p><img alt="un exemple simple de structure de site Web comportant un titre principal, un menu de navigation, un contenu principal, une barre latérale et un pied de page." src="ecran.png"></p> + - : Une bande au bas de la page qui contient généralement, en petits caractères, des avis de droit d'auteur ou des coordonnées de contact. C'est un endroit pour mettre de l'information commune (comme l'en-tête), mais il s'agit dans ce cas d'informations non‑critiques, voire secondaires par rapport au site Web lui-même. Le pied de page est aussi parfois utilisé à des fins de {{Glossary("SEO")}}, en fournissant des liens pour un accès rapide à des contenus prisés. -<h2 id="HTML_pour_structurer_un_contenu">HTML pour structurer un contenu</h2> + Un « site web typique » pourrait ressembler à quelque chose comme ceci : -<p>L'exemple simple affiché ci-dessus n'est pas très beau, mais il est parfaitement correct pour illustrer un exemple typique de mise en page d'un site web. Certains sites Web ont plus de colonnes, d'autres sont beaucoup plus complexes, mais vous voyez l'idée. Avec le bon CSS, vous pouvez utiliser à peu près n'importe quel élément pour envelopper les différentes sections et obtenir l'apparence que vous voulez, mais comme nous l'avons déjà dit, nous devons respecter la sémantique et <strong>utiliser le bon élément pour le bon travail</strong>.</p> + -<p>C'est parce que le visuel ne raconte pas toute l'histoire. Nous utilisons la couleur et la taille des caractères pour attirer l'attention des utilisateurs malvoyants sur les parties les plus utiles du contenu, comme le menu de navigation et les liens connexes, mais qu'en est-il des personnes malvoyantes par exemple, qui pourraient ne pas trouver très utiles des concepts tels que le « rose » et la « grande police » ?</p> +## HTML pour structurer un contenu -<div class="note"> -<p><strong>Note :</strong> Les daltoniens représentent environ <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">8% de la population mondiale</a> ou, en d'autres termes, environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. Les personnes aveugles et malvoyantes représentent environ 4 à 5 % de la population mondiale (en 2012, il y avait <a href="https://fr.wikipedia.org/wiki/D%C3%A9ficience_visuelle">285 millions de personnes aveugles et malvoyantes</a> dans le monde, alors que la population totale était <a href="https://fr.wikipedia.org/wiki/Population_mondiale">d'environ 7 milliards </a>d'habitants).</p> -</div> +L'exemple simple affiché ci-dessus n'est pas très beau, mais il est parfaitement correct pour illustrer un exemple typique de mise en page d'un site web. Certains sites Web ont plus de colonnes, d'autres sont beaucoup plus complexes, mais vous voyez l'idée. Avec le bon CSS, vous pouvez utiliser à peu près n'importe quel élément pour envelopper les différentes sections et obtenir l'apparence que vous voulez, mais comme nous l'avons déjà dit, nous devons respecter la sémantique et **utiliser le bon élément pour le bon travail**. -<p>Dans votre code HTML, vous pouvez marquer des sections de contenu selon leur fonction — vous pouvez utiliser des éléments qui représentent sans ambiguïté les sections de contenu décrites ci-dessus, et les technologies d'assistance comme les lecteurs d'écran peuvent reconnaître ces éléments et vous aider avec des tâches comme « trouver la navigation principale » ou « trouver le contenu principal ». Comme nous l'avons mentionné plus tôt dans le cours, le fait de <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure">ne pas utiliser la bonne structure d'éléments et la bonne sémantique pour le bon travail a un certain nombre de conséquences</a>.</p> - -<p>Pour mettre en œuvre le marquage sémantique, HTML fournit des balises dédiées que vous pourrez utiliser pour représenter ces parties, par exemple :</p> - -<ul> - <li><strong>header : </strong>{{htmlelement("header")}}.</li> - <li><strong>barre de navigation : </strong>{{htmlelement("nav")}}.</li> - <li><strong>contenu principal : </strong>{{htmlelement("main")}}, avec diverses sous‑sections de contenu représentées à l'aide de des éléments {{HTMLElement("article")}}, {{htmlelement("section")}} et {{htmlelement("div")}}.</li> - <li><strong>barre latérale : </strong>{{htmlelement("aside")}} ; souvent mise à l'intérieur de l'élément {{htmlelement("main")}}.</li> - <li><strong>pied de page : </strong>{{htmlelement("footer")}}.</li> -</ul> - -<h3 id="Apprentissage_actif_exploration_du_code_de_lexemple">Apprentissage actif : exploration du code de l'exemple</h3> - -<p>Notre exemple affiché plus haut est représenté par le code ci‑après (vous le trouverez également <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">dans le dépôt Github</a>). Nous aimerions que vous regardiez cet exemple et que vous recherchiez dans le listing suivant les sections constituant les diverses parties du visuel.</p> - -<pre><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - - <title>Intitulé de ma page</title> - <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"> - <link rel="stylesheet" href="style.css"> - - <!-- Les trois lignes ci‑dessous sont un correctif pour que la sémantique - HTML5 fonctionne correctement avec les anciennes versions de - Internet Explorer--> - <!--[if lt IE 9]> - <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> - <![endif]--> - </head> - - <body> - <!-- Voici notre en‑tête principale utilisée dans toutes les pages - de notre site web --> - <header> - <h1>En-tête</h1> - </header> - - <nav> - <ul> - <li><a href="#">Accueil</a></li> - <li><a href="#">L'équipe</a></li> - <li><a href="#">Projets</a></li> - <li><a href="#">Contact</a></li> - </ul> - - <!-- Un formulaire de recherche est une autre façon de naviguer de - façon non‑linéaire dans un site. --> - - <form> - <input type="search" name="q" placeholder="Rechercher"> - <input type="submit" value="Lancer !"> - </form> - </nav> - - <!-- Ici nous mettons le contenu de la page --> - <main> - - <!-- Il contient un article --> - <article> - <h2>En-tête d'article</h2> - <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p> - - <h3>Sous‑section</h3> - <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p> - <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p> - - <h3>Autre sous‑section</h3> - <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p> - <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p> - </article> - - <!-- Le contenu « à côté » peut aussi être intégré dans le contenu - principal --> - <aside> - <h2>En relation</h2> - <ul> - <li><a href="#">Combien j'aime être près des rivages</a></li> - <li><a href="#">Combien j'aime être près de la mer</a></li> - <li><a href="#">Bien que dans le nord de l'Angleterre</a></li> - <li><a href="#">Il n'arrête jamais de pleuvoir</a></li> - <li><a href="#">Eh bien…</a></li> - </ul> - </aside> - - </main> - - <!-- Et voici notre pied de page utilisé sur toutes les pages du site --> - <footer> - <p>©Copyright 2050 par personne. Tous droits reversés.</p> - </footer> - - </body> -</html></pre> - -<p>Prenez le temps voulu pour regarder ce code et le comprendre — les commentaires inclus doivent également vous aider à comprendre. Il n'y a pas grand-chose d'autre à faire dans cet article, car la clé pour comprendre une mise en page de document est d'écrire une bonne structure HTML, puis de la mettre en page avec les CSS. Nous attendrons donc que vous ayez commencé à étudier la mise en page avec les CSS.</p> - -<h2 id="Plus_de_détails_à_propos_des_éléments_de_mise_en_page">Plus de détails à propos des éléments de mise en page</h2> - -<p>La compréhension détaillée de la signification globale de tous les éléments de la mise en page HTML est importante — vous l'acquerrez au fur et à mesure avec l'expérience dans le développement web. Vous pouvez trouver beaucoup de détails en parcourant la <a href="/fr/docs/Web/HTML/Element">référence aux éléments HTML</a>. Pour l'instant, il convient de bien comprendre les principales définitions :</p> - -<ul> - <li>{{HTMLElement('main')}} est relatif au contenu <em>unique de la page</em>. N'utilisez <code><main></code> que une seule fois par page et placez-le directement à l'intérieur de l'élement {{HTMLElement('body')}}. Idéalement, il ne devrait pas être imbriqué dans d'autres éléments.</li> - <li>{{HTMLElement('article')}} entoure un bloc de contenu en relation constituant en soi une unité de sens pris isolément par rapport au reste de la page (par ex. un unique billet de blog.)</li> - <li>{{HTMLElement('section')}} ressemble à <code><article></code>, mais sert plutôt à contenir une partie isolée de la page constituant un élément de fonctionnalité en soi (par ex. une petite carte ou un ensemble d'intitulés d'article ou de résumés). Il est considéré de bonne pratique de commencer chaque section par un <code><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">heading</a></code> ; notez également que vous pouvez fractionner un <code><article></code> en plusieurs <code><section></code> ou bien des <code><section></code> en divers <code><article></code>, selon le contexte.</li> - <li>{{HTMLElement('aside')}} contient les composantes non directement liées au contenu principal mais pouvant fournir des informations supplémentaires indirectement en relation avec ce dernier (entrées de glossaire, biographie de l'auteur, liens connexes, etc).</li> - <li>{{HTMLElement('header')}} représente un groupe de contenus introductoires. Enfant de {{HTMLElement('body')}}, il définit l'en-tête général de la page web, mais enfant de {{HTMLElement('article')}} ou {{HTMLElement('section')}} il définit un en‑tête propre à cette section (ne confondez pas <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#ajouter%20un%20titre">titles et headings</a>).</li> - <li>{{HTMLElement('nav')}} contient les éléments principaux de navigation pour la page. Les liens secondaires, etc., n'entrent pas dans la navigation.</li> - <li>{{HTMLElement('footer')}} représente un groupe de contenu de fin pour une page.</li> -</ul> - -<h3 id="Enveloppes_non‑sémantiques">Enveloppes non‑sémantiques</h3> - -<p>Parfois, vous êtes dans la situation où vous ne trouvez pas l'élément sémantique idéal pour regrouper certaines entités ou envelopper certains contenus. D'autres fois, vous souhaitez simplement regrouper un ensemble d'éléments pour en faire une entité unique pour des {{glossary("CSS")}} ou des {{glossary("JavaScript")}}. Pour de tels cas, HTML met à votre disposition les éléments {{HTMLElement("div")}} et {{HTMLElement("span")}}}. Utilisez‑les de préférence avec un attribut {{htmlattrxref('class')}} approprié, en quelque sorte étiquetez‑les pour pouvoir les cibler plus facilement.</p> - -<p>{{HTMLElement("span")}} est un élément en ligne non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur élément de sémantique textuelle pour envelopper votre contenu, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple :</p> - -<pre class="brush: html"><p>Le Roi retourna ivre à sa chambre à une heure, la bière ne l'aidant en rien -alors qu'il titubait en travers de la porte <span class="editor-note"> -[Note du rédacteur : Pour cette scène, la lumière doit être faible].</span></p></pre> - -<p>Dans ce cas, la note du rédacteur est simplement supposée fournir une indication supplémentaire pour le metteur en scène de la pièce ; elle n'est pas censée avoir une signification sémantique supplémentaire. Pour les utilisateurs malvoyants, les CSS seraient peut-être utilisés pour distancer légèrement la note du texte principal.</p> - -<p>{{HTMLElement("div")}} est un élément de niveau bloc non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur bloc de sémantique à utiliser, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple, imaginez un widget de panier d'achat que vous pourriez choisir d'afficher à n'importe quel moment sur un site de commerce électronique :</p> - -<pre class="brush: html"><div class="panier"> - <h2>Panier d'achat</h2> - <ul> - <li> - <p><a href=""><b>Boucles d'oreilles en argent</b></a>: €99,95.</p> - <img src="../products/3333-0985/thumb.png" alt="Boucles d'oreilles en argent"> - </li> - <li> - ... - </li> - </ul> - <p>Total des achats : €237,89</p> -</div></pre> +C'est parce que le visuel ne raconte pas toute l'histoire. Nous utilisons la couleur et la taille des caractères pour attirer l'attention des utilisateurs malvoyants sur les parties les plus utiles du contenu, comme le menu de navigation et les liens connexes, mais qu'en est-il des personnes malvoyantes par exemple, qui pourraient ne pas trouver très utiles des concepts tels que le « rose » et la « grande police » ? + +> **Note :** Les daltoniens représentent environ [8% de la population mondiale](http://www.color-blindness.com/2006/04/28/colorblind-population/) ou, en d'autres termes, environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. Les personnes aveugles et malvoyantes représentent environ 4 à 5 % de la population mondiale (en 2012, il y avait [285 millions de personnes aveugles et malvoyantes](https://fr.wikipedia.org/wiki/D%C3%A9ficience_visuelle) dans le monde, alors que la population totale était [d'environ 7 milliards ](https://fr.wikipedia.org/wiki/Population_mondiale)d'habitants). + +Dans votre code HTML, vous pouvez marquer des sections de contenu selon leur fonction — vous pouvez utiliser des éléments qui représentent sans ambiguïté les sections de contenu décrites ci-dessus, et les technologies d'assistance comme les lecteurs d'écran peuvent reconnaître ces éléments et vous aider avec des tâches comme « trouver la navigation principale » ou « trouver le contenu principal ». Comme nous l'avons mentionné plus tôt dans le cours, le fait de [ne pas utiliser la bonne structure d'éléments et la bonne sémantique pour le bon travail a un certain nombre de conséquences](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure). + +Pour mettre en œuvre le marquage sémantique, HTML fournit des balises dédiées que vous pourrez utiliser pour représenter ces parties, par exemple : + +- **header :** {{htmlelement("header")}}. +- **barre de navigation :** {{htmlelement("nav")}}. +- **contenu principal :** {{htmlelement("main")}}, avec diverses sous‑sections de contenu représentées à l'aide de des éléments {{HTMLElement("article")}}, {{htmlelement("section")}} et {{htmlelement("div")}}. +- **barre latérale :** {{htmlelement("aside")}} ; souvent mise à l'intérieur de l'élément {{htmlelement("main")}}. +- **pied de page :** {{htmlelement("footer")}}. + +### Apprentissage actif : exploration du code de l'exemple + +Notre exemple affiché plus haut est représenté par le code ci‑après (vous le trouverez également [dans le dépôt Github](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html)). Nous aimerions que vous regardiez cet exemple et que vous recherchiez dans le listing suivant les sections constituant les diverses parties du visuel. + + <!DOCTYPE html> + <html> + <head> + <meta charset="utf-8"> + + <title>Intitulé de ma page</title> + <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"> + <link rel="stylesheet" href="style.css"> + + <!-- Les trois lignes ci‑dessous sont un correctif pour que la sémantique + HTML5 fonctionne correctement avec les anciennes versions de + Internet Explorer--> + <!--[if lt IE 9]> + <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> + <![endif]--> + </head> + + <body> + <!-- Voici notre en‑tête principale utilisée dans toutes les pages + de notre site web --> + <header> + <h1>En-tête</h1> + </header> + + <nav> + <ul> + <li><a href="#">Accueil</a></li> + <li><a href="#">L'équipe</a></li> + <li><a href="#">Projets</a></li> + <li><a href="#">Contact</a></li> + </ul> -<p>Ce n'est pas vraiment un élément <code><aside></code> et il n'a pas forcément de relation avec l'essentiel du contenu de la page (vous le souhaitez visible de partout). Il ne justifie pas particulièrement l'utilisation d'une <code><section></code>, car il ne fait pas partie du contenu principal de la page. Donc un <code><div></code> est bien dans ce cas. Nous avons incorporé un panneau indicateur que les lecteurs d'écran puissent le signaler.</p> + <!-- Un formulaire de recherche est une autre façon de naviguer de + façon non‑linéaire dans un site. --> -<div class="warning"> -<p><strong>Attention :</strong> les <code>div</code> sont si pratiques à utiliser qu'on est tenté de les utiliser à l'excès. Comme ils ne portent aucune valeur sémantique, ils encombrent votre code HTML. Prenez soin de ne les utiliser que s'il n'y a pas de meilleure solution sémantique et essayez de réduire leur utilisation au minimum sinon vous aurez du mal à mettre à jour et à maintenir vos documents.</p> + <form> + <input type="search" name="q" placeholder="Rechercher"> + <input type="submit" value="Lancer !"> + </form> + </nav> + + <!-- Ici nous mettons le contenu de la page --> + <main> + + <!-- Il contient un article --> + <article> + <h2>En-tête d'article</h2> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p> + + <h3>Sous‑section</h3> + <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p> + <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p> + + <h3>Autre sous‑section</h3> + <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p> + <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p> + </article> + + <!-- Le contenu « à côté » peut aussi être intégré dans le contenu + principal --> + <aside> + <h2>En relation</h2> + <ul> + <li><a href="#">Combien j'aime être près des rivages</a></li> + <li><a href="#">Combien j'aime être près de la mer</a></li> + <li><a href="#">Bien que dans le nord de l'Angleterre</a></li> + <li><a href="#">Il n'arrête jamais de pleuvoir</a></li> + <li><a href="#">Eh bien…</a></li> + </ul> + </aside> + + </main> + + <!-- Et voici notre pied de page utilisé sur toutes les pages du site --> + <footer> + <p>©Copyright 2050 par personne. Tous droits reversés.</p> + </footer> + + </body> + </html> + +Prenez le temps voulu pour regarder ce code et le comprendre — les commentaires inclus doivent également vous aider à comprendre. Il n'y a pas grand-chose d'autre à faire dans cet article, car la clé pour comprendre une mise en page de document est d'écrire une bonne structure HTML, puis de la mettre en page avec les CSS. Nous attendrons donc que vous ayez commencé à étudier la mise en page avec les CSS. + +## Plus de détails à propos des éléments de mise en page + +La compréhension détaillée de la signification globale de tous les éléments de la mise en page HTML est importante — vous l'acquerrez au fur et à mesure avec l'expérience dans le développement web. Vous pouvez trouver beaucoup de détails en parcourant la [référence aux éléments HTML](/fr/docs/Web/HTML/Element). Pour l'instant, il convient de bien comprendre les principales définitions : + +- {{HTMLElement('main')}} est relatif au contenu _unique de la page_. N'utilisez `<main>` que une seule fois par page et placez-le directement à l'intérieur de l'élement {{HTMLElement('body')}}. Idéalement, il ne devrait pas être imbriqué dans d'autres éléments. +- {{HTMLElement('article')}} entoure un bloc de contenu en relation constituant en soi une unité de sens pris isolément par rapport au reste de la page (par ex. un unique billet de blog.) +- {{HTMLElement('section')}} ressemble à `<article>`, mais sert plutôt à contenir une partie isolée de la page constituant un élément de fonctionnalité en soi (par ex. une petite carte ou un ensemble d'intitulés d'article ou de résumés). Il est considéré de bonne pratique de commencer chaque section par un [`heading`](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) ; notez également que vous pouvez fractionner un `<article>` en plusieurs `<section>` ou bien des `<section>` en divers `<article>`, selon le contexte. +- {{HTMLElement('aside')}} contient les composantes non directement liées au contenu principal mais pouvant fournir des informations supplémentaires indirectement en relation avec ce dernier (entrées de glossaire, biographie de l'auteur, liens connexes, etc). +- {{HTMLElement('header')}} représente un groupe de contenus introductoires. Enfant de {{HTMLElement('body')}}, il définit l'en-tête général de la page web, mais enfant de {{HTMLElement('article')}} ou {{HTMLElement('section')}} il définit un en‑tête propre à cette section (ne confondez pas [titles et headings](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#ajouter%20un%20titre)). +- {{HTMLElement('nav')}} contient les éléments principaux de navigation pour la page. Les liens secondaires, etc., n'entrent pas dans la navigation. +- {{HTMLElement('footer')}} représente un groupe de contenu de fin pour une page. + +### Enveloppes non‑sémantiques + +Parfois, vous êtes dans la situation où vous ne trouvez pas l'élément sémantique idéal pour regrouper certaines entités ou envelopper certains contenus. D'autres fois, vous souhaitez simplement regrouper un ensemble d'éléments pour en faire une entité unique pour des {{glossary("CSS")}} ou des {{glossary("JavaScript")}}. Pour de tels cas, HTML met à votre disposition les éléments {{HTMLElement("div")}} et {{HTMLElement("span")}}}. Utilisez‑les de préférence avec un attribut {{htmlattrxref('class')}} approprié, en quelque sorte étiquetez‑les pour pouvoir les cibler plus facilement. + +{{HTMLElement("span")}} est un élément en ligne non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur élément de sémantique textuelle pour envelopper votre contenu, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple : + +```html +<p>Le Roi retourna ivre à sa chambre à une heure, la bière ne l'aidant en rien +alors qu'il titubait en travers de la porte <span class="editor-note"> +[Note du rédacteur : Pour cette scène, la lumière doit être faible].</span></p> +``` + +Dans ce cas, la note du rédacteur est simplement supposée fournir une indication supplémentaire pour le metteur en scène de la pièce ; elle n'est pas censée avoir une signification sémantique supplémentaire. Pour les utilisateurs malvoyants, les CSS seraient peut-être utilisés pour distancer légèrement la note du texte principal. + +{{HTMLElement("div")}} est un élément de niveau bloc non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur bloc de sémantique à utiliser, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple, imaginez un widget de panier d'achat que vous pourriez choisir d'afficher à n'importe quel moment sur un site de commerce électronique : + +```html +<div class="panier"> + <h2>Panier d'achat</h2> + <ul> + <li> + <p><a href=""><b>Boucles d'oreilles en argent</b></a>: €99,95.</p> + <img src="../products/3333-0985/thumb.png" alt="Boucles d'oreilles en argent"> + </li> + <li> + ... + </li> + </ul> + <p>Total des achats : €237,89</p> </div> +``` -<h3 id="Sauts_de_ligne_et_traits_horizontaux">Sauts de ligne et traits horizontaux</h3> +Ce n'est pas vraiment un élément `<aside>` et il n'a pas forcément de relation avec l'essentiel du contenu de la page (vous le souhaitez visible de partout). Il ne justifie pas particulièrement l'utilisation d'une `<section>`, car il ne fait pas partie du contenu principal de la page. Donc un `<div>` est bien dans ce cas. Nous avons incorporé un panneau indicateur que les lecteurs d'écran puissent le signaler. -<p>Les éléments {{htmlelement("br")}} et {{htmlelement("hr")}} sont utilisés à l'occasion et il convient de les connaître :</p> +> **Attention :** les `div` sont si pratiques à utiliser qu'on est tenté de les utiliser à l'excès. Comme ils ne portent aucune valeur sémantique, ils encombrent votre code HTML. Prenez soin de ne les utiliser que s'il n'y a pas de meilleure solution sémantique et essayez de réduire leur utilisation au minimum sinon vous aurez du mal à mettre à jour et à maintenir vos documents. -<p><code><br></code> crée un saut de ligne dans un paragraphe ; c'est le seul moyen de forcer une structure rigide quand vous voulez obtenir une suite de lignes courtes fixes, comme dans une adresse postale ou un poème. Par exemple :</p> +### Sauts de ligne et traits horizontaux -<pre class="brush: html"><p>Il y avait une fois une fille nommée Nell<br> -Qui aimait écrire du HTML<br> -Mais ses structures et sémantiques affligeantes<br> -rendaient de ses marquages la lecture inélégante.</p></pre> +Les éléments {{htmlelement("br")}} et {{htmlelement("hr")}} sont utilisés à l'occasion et il convient de les connaître : -<p>Sans éléments <code><br></code>, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#whitespace_in_html">HTML ignore la plupart des blancs</a>) ; avec des <br> dans le code, voici le rendu de ce qui précède :</p> +`<br>` crée un saut de ligne dans un paragraphe ; c'est le seul moyen de forcer une structure rigide quand vous voulez obtenir une suite de lignes courtes fixes, comme dans une adresse postale ou un poème. Par exemple : +```html <p>Il y avait une fois une fille nommée Nell<br> - Qui aimait écrire du HTML<br> - Mais ses structures et sémantiques affligeantes<br> - rendaient de ses marquages la lecture inélégante.</p> +Qui aimait écrire du HTML<br> +Mais ses structures et sémantiques affligeantes<br> +rendaient de ses marquages la lecture inélégante.</p> +``` -<p><code>Les éléments <hr></code> créent un trait horizontal dans le document marquant un changement thématique dans le texte (comme un changement de sujet ou de scène). Visuallement, c'est juste un trait horizontal, comme dans cet exemple :</p> +Sans éléments `<br>`, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, [HTML ignore la plupart des blancs](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#whitespace_in_html)) ; avec des \<br> dans le code, voici le rendu de ce qui précède : -<h3>Exemple avec hr</h3> +Il y avait une fois une fille nommée Nell +Qui aimait écrire du HTML +Mais ses structures et sémantiques affligeantes +rendaient de ses marquages la lecture inélégante. -<pre><p>Ron était acculé dans un angle par des Netherbeasts en maraude. Effrayé, mais déterminé à protéger ses amis, il a levé sa baguette et s'est préparé à se battre, espérant que son appel de détresse serait entendu.</p> -<hr> -<p>Pendant ce temps, Harry était assis à la maison, regardant sa déclaration de redevances et réfléchissant à la sortie du prochaine épisode de la fiction, quand une lettre de détresse enchantée passa par sa fenêtre et atterrit sur ses genoux. Il la lut à la hâte et, se dressant brusquement, « mieux vaut retourner au travail alors » se dit-il.</p></pre> +`Les éléments <hr>` créent un trait horizontal dans le document marquant un changement thématique dans le texte (comme un changement de sujet ou de scène). Visuallement, c'est juste un trait horizontal, comme dans cet exemple : -<p>sera rendu ainsi :</p> -<p>{{EmbedLiveSample("Exemple_avec_hr")}}</p> +### Exemple avec hr -<h2 id="Planification_dun_site_web_simple">Planification d'un site web simple</h2> + <p>Ron était acculé dans un angle par des Netherbeasts en maraude. Effrayé, mais déterminé à protéger ses amis, il a levé sa baguette et s'est préparé à se battre, espérant que son appel de détresse serait entendu.</p> + <hr> + <p>Pendant ce temps, Harry était assis à la maison, regardant sa déclaration de redevances et réfléchissant à la sortie du prochaine épisode de la fiction, quand une lettre de détresse enchantée passa par sa fenêtre et atterrit sur ses genoux. Il la lut à la hâte et, se dressant brusquement, « mieux vaut retourner au travail alors » se dit-il.</p> -<p>Une fois planifié le contenu d'une simple page Web, l'étape logique suivante est d'essayer de déterminer le contenu que vous voulez mettre sur le site Web en entier, les pages dont vous avez besoin et la façon dont elles doivent être organisées et les liens les unes vers les autres pour la meilleure expérience utilisateur possible. C'est ce qu'on appelle {{glossary("Information architecture")}} (architecture de l'information). Dans un grand site web complexe, beaucoup de planification peut entrer dans ce processus, mais pour un simple site Web de quelques pages, cela peut être assez simple et amusant !</p> +sera rendu ainsi : -<ol> - <li>Gardez à l'esprit que vous aurez quelques éléments communs à la plupart des pages (sinon à toutes) — comme le menu de navigation et le contenu du pied de page. Si votre site est destiné à une entreprise, par exemple, c'est une bonne idée d'avoir les informations de contact dans le pied de page de chaque page. Notez ce que vous voulez avoir en commun dans chaque page. <img alt="les caractéristiques communes du site de voyage pour aller sur chaque page : titre et logo, contact, copyright, termes et conditions, choix de la langue, politique d'accessibilité." src="fr_commun.png"></li> - <li>Ensuite, dessinez une esquisse de ce à quoi vous voudriez que la structure de chaque page ressemble (elle pourrait ressembler à notre simple site Web ci-dessus.) Notez ce que chaque bloc va être. <img alt="Un diagramme simple d'une structure d'exemple de site, avec un en-tête, une zone de contenu principal, deux barres latérales optionnelles et un pied de page." src="fr-structure.png"></li> - <li>Maintenant, faites un remue-méninges sur tous les autres contenus (qui ne sont pas communs à toutes les pages) que vous voulez avoir sur votre site Web - écrivez une grande liste. <img alt="Une longue liste de toutes les fonctionnalités que nous pourrions mettre sur notre site de voyage, de la recherche, aux offres spéciales et aux informations spécifiques à chaque pays." src="fr-liste.png"></li> - <li>Ensuite, essayez de trier tous ces éléments de contenu par groupes, pour vous donner une idée des parties qui pourraient aller ensemble sur diverses pages. C'est très similaire à une technique appelée {{glossary("Card sorting","Tri de cartes")}}.<img alt="Les articles qui devraient apparaître sur un site de vacances triés en 5 catégories : Recherche, spéciaux, informations spécifiques au pays, résultats de la recherche et choses à acheter." src="fr-tri.png"></li> - <li>Essayez maintenant d'esquisser un plan de site grossier — entourez d'un cercle chaque page de votre site et tracez des flèches pour montrer les flux de travail typiques entre pages. La page d'accueil sera probablement au centre et en lien vers la plupart sinon la totalité des autres ; la plupart des pages d'un petit site devraient être disponibles à partir de la navigation principale, bien qu'il y ait des exceptions. Vous voudrez peut-être aussi ajouter des notes sur la présentation des choses. <img alt="Une carte du site montrant la page d'accueil, la page du pays, les résultats de recherche, la page spéciale, la page de paiement et la page d'achat." src="fr-map.png"></li> -</ol> +{{EmbedLiveSample("Exemple_avec_hr")}} -<h3 id="Apprentissage_actif_créez_la_cartographie_de_votre_propre_site">Apprentissage actif : créez la cartographie de votre propre site</h3> +## Planification d'un site web simple -<p>Essayez d'effectuer l'exercice ci-dessus pour un site web de votre propre création. Sur quel sujet aimeriez-vous faire un site ?</p> +Une fois planifié le contenu d'une simple page Web, l'étape logique suivante est d'essayer de déterminer le contenu que vous voulez mettre sur le site Web en entier, les pages dont vous avez besoin et la façon dont elles doivent être organisées et les liens les unes vers les autres pour la meilleure expérience utilisateur possible. C'est ce qu'on appelle {{glossary("Information architecture")}} (architecture de l'information). Dans un grand site web complexe, beaucoup de planification peut entrer dans ce processus, mais pour un simple site Web de quelques pages, cela peut être assez simple et amusant ! -<div class="note"> -<p><strong>Note :</strong> Enregistrez votre travail quelque part ; vous pourriez en avoir besoin plus tard.</p> -</div> +1. Gardez à l'esprit que vous aurez quelques éléments communs à la plupart des pages (sinon à toutes) — comme le menu de navigation et le contenu du pied de page. Si votre site est destiné à une entreprise, par exemple, c'est une bonne idée d'avoir les informations de contact dans le pied de page de chaque page. Notez ce que vous voulez avoir en commun dans chaque page.  +2. Ensuite, dessinez une esquisse de ce à quoi vous voudriez que la structure de chaque page ressemble (elle pourrait ressembler à notre simple site Web ci-dessus.) Notez ce que chaque bloc va être.  +3. Maintenant, faites un remue-méninges sur tous les autres contenus (qui ne sont pas communs à toutes les pages) que vous voulez avoir sur votre site Web - écrivez une grande liste.  +4. Ensuite, essayez de trier tous ces éléments de contenu par groupes, pour vous donner une idée des parties qui pourraient aller ensemble sur diverses pages. C'est très similaire à une technique appelée {{glossary("Card sorting","Tri de cartes")}}. +5. Essayez maintenant d'esquisser un plan de site grossier — entourez d'un cercle chaque page de votre site et tracez des flèches pour montrer les flux de travail typiques entre pages. La page d'accueil sera probablement au centre et en lien vers la plupart sinon la totalité des autres ; la plupart des pages d'un petit site devraient être disponibles à partir de la navigation principale, bien qu'il y ait des exceptions. Vous voudrez peut-être aussi ajouter des notes sur la présentation des choses.  + +### Apprentissage actif : créez la cartographie de votre propre site + +Essayez d'effectuer l'exercice ci-dessus pour un site web de votre propre création. Sur quel sujet aimeriez-vous faire un site ? + +> **Note :** Enregistrez votre travail quelque part ; vous pourriez en avoir besoin plus tard. -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Vous devriez avoir maintenant une meilleure idée de la façon de structurer une page web ou un site web. Dans le dernier article de ce module, nous étudierons comment déboguer le HTML.</p> +Vous devriez avoir maintenant une meilleure idée de la façon de structurer une page web ou un site web. Dans le dernier article de ce module, nous étudierons comment déboguer le HTML. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/HTML/Element/Heading_Elements">Using HTML sections and outlines </a>: Guide avancé des éléments de la sémantique et des algorithmes descriptifs du HTML5.</li> -</ul> +- [Using HTML sections and outlines ](/fr/docs/Web/HTML/Element/Heading_Elements): Guide avancé des éléments de la sémantique et des algorithmes descriptifs du HTML5. -<p>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_à_HTML")}}</p> +{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_à_HTML")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Commencer avec le HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Création d'hyperliens</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formatage avancé du texte</a></li> - <li>Structure de Site Web et de document</li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Faire une lettre</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li> -</ul> +- [Commencer avec le HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started) +- [Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) +- [Fondamentaux du texte HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) +- [Création d'hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) +- [Formatage avancé du texte](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) +- Structure de Site Web et de document +- [Déboguer de l'HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) +- [Faire une lettre](/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter) +- [Structurer une page de contenu](/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content) diff --git a/files/fr/learn/html/introduction_to_html/getting_started/index.md b/files/fr/learn/html/introduction_to_html/getting_started/index.md index dce8e89b0e..8dfa69a48c 100644 --- a/files/fr/learn/html/introduction_to_html/getting_started/index.md +++ b/files/fr/learn/html/introduction_to_html/getting_started/index.md @@ -14,78 +14,89 @@ tags: translation_of: Learn/HTML/Introduction_to_HTML/Getting_started original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}} -<div>{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}</div> - -<p>Cet article porte sur les fondements du HTML, pour prendre un bon départ — nous définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour exciter votre intérêt.</p> +Cet article porte sur les fondements du HTML, pour prendre un bon départ — nous définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour exciter votre intérêt. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Notions sur le fonctionnement d'un ordinateur, avoir installé les <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base</a> et savoir <a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">gérer les fichiers</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Se familiariser avec le langage HTML et acquérir de la pratique en écrivant quelques éléments HTML.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Notions sur le fonctionnement d'un ordinateur, avoir installé les + <a + href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software" + >logiciels de base</a + > + et savoir + <a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers" + >gérer les fichiers</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Se familiariser avec le langage HTML et acquérir de la pratique en + écrivant quelques éléments HTML. + </td> + </tr> + </tbody> </table> -<h2 id="Qu'est_ce_que_le_HTML">Qu'est ce que le HTML ?</h2> +## Qu'est ce que le HTML ? -<p>{{glossary("HTML")}} (<strong>H</strong>yper<strong>T</strong>ext <strong>M</strong>arkup <strong>L</strong>anguage) n'est pas un langage de programmation : c'est un <em>langage de balisage</em> qui sert à indiquer au navigateur comment structurer les pages web visitées. Il peut être aussi compliqué ou aussi simple que le développeur web souhaite qu'il soit. Le HTML se compose d'une série d'{{glossary("Elément", "éléments")}} avec lesquels vous pouvez encadrer, envelopper ou <em>baliser</em> différentes parties du contenu pour les faire apparaître ou agir d'une certaine manière. Des {{glossary("balise", "balises")}} encadrantes peuvent transformer une petite partie de contenu en un lien vers une autre page sur le Web, mettre des mots en italique, etc. Par exemple, prenons la phrase suivante :</p> +{{glossary("HTML")}} (**H**yper**T**ext **M**arkup **L**anguage) n'est pas un langage de programmation : c'est un _langage de balisage_ qui sert à indiquer au navigateur comment structurer les pages web visitées. Il peut être aussi compliqué ou aussi simple que le développeur web souhaite qu'il soit. Le HTML se compose d'une série d'{{glossary("Elément", "éléments")}} avec lesquels vous pouvez encadrer, envelopper ou _baliser_ différentes parties du contenu pour les faire apparaître ou agir d'une certaine manière. Des {{glossary("balise", "balises")}} encadrantes peuvent transformer une petite partie de contenu en un lien vers une autre page sur le Web, mettre des mots en italique, etc. Par exemple, prenons la phrase suivante : -<pre>Mon chat est très grincheux</pre> + Mon chat est très grincheux -<p>Si nous voulons que cette ligne reste en l'état, nous pouvons dire qu'il s'agit d'un paragraphe en l'enveloppant d'un élément paragraphe ({{htmlelement("p")}}) :</p> +Si nous voulons que cette ligne reste en l'état, nous pouvons dire qu'il s'agit d'un paragraphe en l'enveloppant d'un élément paragraphe ({{htmlelement("p")}}) : -<pre class="brush: html"><p>Mon chat est très grincheux</p></pre> +```html +<p>Mon chat est très grincheux</p> +``` -<div class="note"> -<p><strong>Note :</strong> Les éléments en HTML sont insensibles à la casse, c'est-à-dire qu'ils peuvent être écrits en majuscules ou en minuscules. Par exemple, un élément {{htmlelement("title")}}} peut être écrit <title>, <TITLE>, <Title>, <TiTlE>, etc. et il fonctionnera parfaitement. La meilleure pratique, cependant, est d'écrire tous les éléments en minuscules pour des raisons de cohérence, de lisibilité et autres.</p> -</div> +> **Note :** Les éléments en HTML sont insensibles à la casse, c'est-à-dire qu'ils peuvent être écrits en majuscules ou en minuscules. Par exemple, un élément {{htmlelement("title")}}} peut être écrit \<title>, \<TITLE>, \<Title>, \<TiTlE>, etc. et il fonctionnera parfaitement. La meilleure pratique, cependant, est d'écrire tous les éléments en minuscules pour des raisons de cohérence, de lisibilité et autres. -<h2 id="Anatomie_d'un_élément_HTML">Anatomie d'un élément HTML</h2> +## Anatomie d'un élément HTML -<p>Regardons notre élément paragraphe d'un peu plus près :</p> +Regardons notre élément paragraphe d'un peu plus près : -<p><img alt="" src="chat-grincheuxl.png"></p> + -<p>Les principales parties de notre élément sont :</p> +Les principales parties de notre élément sont : -<ol> - <li><strong>La balise ouvrante :</strong> il s'agit du nom de l'élément (dans ce cas, p), encadré par un <strong>chevron ouvrant (<) </strong>et un <strong>chevron fermant (>)</strong>. Elle indique où l'élément commence ou commence à prendre effet — dans ce cas où commence le paragraphe ;</li> - <li><strong>La balise fermante :</strong> c'est la même que la balise ouvrante, sauf qu'elle comprend une <strong>barre oblique (/)</strong> avant le nom de l'élément. Elle indique la fin de l'élément — dans ce cas, la fin du paragraphe. Ne pas inclure une balise de fermeture est une erreur fréquente chez les débutants, et peut amener des résultats étranges ;</li> - <li><strong>Le contenu :</strong> il s'agit du contenu de l'élément. Dans notre cas, c'est simplement du texte ;</li> - <li><strong>L'élément :</strong> l'ensemble balise ouvrante, balise fermante et contenu constituent l'élément.</li> -</ol> +1. **La balise ouvrante :** il s'agit du nom de l'élément (dans ce cas, p), encadré par un **chevron ouvrant (<)** et un **chevron fermant (>)**. Elle indique où l'élément commence ou commence à prendre effet — dans ce cas où commence le paragraphe ; +2. **La balise fermante :** c'est la même que la balise ouvrante, sauf qu'elle comprend une **barre oblique (/)** avant le nom de l'élément. Elle indique la fin de l'élément — dans ce cas, la fin du paragraphe. Ne pas inclure une balise de fermeture est une erreur fréquente chez les débutants, et peut amener des résultats étranges ; +3. **Le contenu :** il s'agit du contenu de l'élément. Dans notre cas, c'est simplement du texte ; +4. **L'élément :** l'ensemble balise ouvrante, balise fermante et contenu constituent l'élément. -<h3 id="Apprentissage_actif_créer_votre_premier_élément_HTML">Apprentissage actif : créer votre premier élément HTML</h3> +### Apprentissage actif : créer votre premier élément HTML -<p>Modifiez la ligne ci-dessous dans la <em>Zone de saisie</em> en la mettant entre les balises<code> <em></code> et <code></em></code> (<code>mettez <em> </code> avant pour <em>ouvrir l'élément</em> et <code></em></code> après pour <em>fermer l'élément</em>) — cette opération doit mettre en relief la ligne en l'écrivant en italiques. Vous devriez constater la mise à jour de la modification directement dans la <em>Zone de rendu</em>.</p> +Modifiez la ligne ci-dessous dans la _Zone de saisie_ en la mettant entre les balises` <em>` et `</em>` (`mettez <em> `avant pour _ouvrir l'élément_ et `</em>` après pour _fermer l'élément_) — cette opération doit mettre en relief la ligne en l'écrivant en italiques. Vous devriez constater la mise à jour de la modification directement dans la _Zone de rendu_. -<p>Si vous faites une erreur, vous pouvez toujours réinitialiser avec le bouton <em>Réinitialiser</em>. Si vous êtes vraiment coincé, appuyez sur le bouton <em>Voir la solution</em> pour la réponse.</p> +Si vous faites une erreur, vous pouvez toujours réinitialiser avec le bouton _Réinitialiser_. Si vous êtes vraiment coincé, appuyez sur le bouton _Voir la solution_ pour la réponse. -<pre class="brush: html hidden"><h2>Zone de rendu</h2> -<div class="output" style="min-height: 50px;"> -</div> +```html hidden +<h2>Zone de rendu</h2> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> -<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> +<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> Ceci est mon texte. -</textarea> +</textarea> -<div class="controls"> - <input id="reset" type="button" value="Réinitialiser" /> - <input id="solution" type="button" value="Voir la solution" /> -</div> -</pre> +<div class="controls"> + <input id="reset" type="button" value="Réinitialiser" /> + <input id="solution" type="button" value="Voir la solution" /> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; } @@ -104,9 +115,10 @@ body { margin: 10px; background: #f5f9fa; } -</pre> +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -136,7 +148,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<em>Ceci est mon texte.</em>'; +var htmlSolution = '<em>Ceci est mon texte.</em>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -182,112 +194,111 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> +}; +``` -<p>{{ EmbedLiveSample('Apprentissage_actif_créer_votre_premier_élément_HTML', 700, 400, "", "","hide-codepen-jsfiddle")}}</p> +{{ EmbedLiveSample('Apprentissage_actif_créer_votre_premier_élément_HTML', 700, 400, "", "","hide-codepen-jsfiddle")}} -<h3 id="Eléments_imbriqués">Eléments imbriqués</h3> +### Eléments imbriqués -<p>Vous pouvez mettre des éléments à l'intérieur d'autres éléments — cela s'appelle l'<strong>imbrication</strong>. Si vous voulez affirmer que votre chat est <strong>très</strong> grincheux, vous pouvez mettre le mot « très » dans l'élément {{htmlelement("strong")}}, pour qu'il soit fortement mis en valeur :</p> +Vous pouvez mettre des éléments à l'intérieur d'autres éléments — cela s'appelle l'**imbrication**. Si vous voulez affirmer que votre chat est **très** grincheux, vous pouvez mettre le mot « très » dans l'élément {{htmlelement("strong")}}, pour qu'il soit fortement mis en valeur : -<pre class="brush: html"><p>Mon chat est <strong>très</strong> grincheux.</p></pre> +```html +<p>Mon chat est <strong>très</strong> grincheux.</p> +``` -<p>Vous devez toutefois vous assurer que vos éléments sont correctement imbriqués : dans l'exemple ci-dessus, nous avons ouvert l'élément <code>p</code> en premier, puis l'élément <code>strong</code>, donc nous devons fermer l'élément <code>strong</code> d'abord, puis l'élément <code>p</code>. Ce qui suit est incorrect :</p> +Vous devez toutefois vous assurer que vos éléments sont correctement imbriqués : dans l'exemple ci-dessus, nous avons ouvert l'élément `p` en premier, puis l'élément `strong`, donc nous devons fermer l'élément `strong` d'abord, puis l'élément `p`. Ce qui suit est incorrect : -<pre class="example-bad brush: html"><p>Mon chat est <strong>très grincheux.</p></strong></pre> +```html example-bad +<p>Mon chat est <strong>très grincheux.</p></strong> +``` -<p>Les éléments doivent être ouverts et fermés correctement afin d'être clairement à l'intérieur ou à l'extérieur l'un de l'autre. Si les balises se chevauchent comme dans l'exemple ci-dessus, votre navigateur web essaiera de deviner ce que vous vouliez dire, et vous pourrez obtenir des résultats inattendus. Autant éviter !</p> +Les éléments doivent être ouverts et fermés correctement afin d'être clairement à l'intérieur ou à l'extérieur l'un de l'autre. Si les balises se chevauchent comme dans l'exemple ci-dessus, votre navigateur web essaiera de deviner ce que vous vouliez dire, et vous pourrez obtenir des résultats inattendus. Autant éviter ! -<h3 id="Éléments_bloc_vs_en_ligne">Éléments bloc vs en ligne</h3> +### Éléments bloc vs en ligne -<p>Il existe deux catégories importantes d'éléments en HTML que vous devez connaître : les éléments de niveau bloc et les éléments en ligne.</p> +Il existe deux catégories importantes d'éléments en HTML que vous devez connaître : les éléments de niveau bloc et les éléments en ligne. -<ul> - <li>Les éléments de niveau <strong>bloc</strong> forment <strong>un bloc visible sur une page</strong> — ils apparaissent sur une nouvelle ligne quel que soit le contenu précédant et tout contenu qui les suit apparaît également sur une nouvelle ligne. Les éléments de niveau de bloc sont souvent des éléments structurels de la page et représentent, par exemple, des paragraphes, des listes, des menus de navigation, des pieds de page, etc. Un élément de niveau bloc ne peut pas être imbriqué dans un élément en ligne, mais il peut être imbriqué dans un autre élément de niveau bloc.</li> - <li>Les éléments en<strong> ligne</strong> sont contenus <strong>dans des éléments de niveau bloc</strong>. Ils entourent seulement des petites parties du contenu du document, ni des paragraphes entiers, ni des regroupements de contenu. Un élément en ligne ne fait pas apparaître une nouvelle ligne dans le document. Il apparaît généralement dans un paragraphe de texte, par exemple un élément (hyperlien) {{htmlelement ("a")}} ou des éléments de mise en évidence tels que {{htmlelement("em")}} ou {{htmlelement("strong")}}.</li> -</ul> +- Les éléments de niveau **bloc** forment **un bloc visible sur une page** — ils apparaissent sur une nouvelle ligne quel que soit le contenu précédant et tout contenu qui les suit apparaît également sur une nouvelle ligne. Les éléments de niveau de bloc sont souvent des éléments structurels de la page et représentent, par exemple, des paragraphes, des listes, des menus de navigation, des pieds de page, etc. Un élément de niveau bloc ne peut pas être imbriqué dans un élément en ligne, mais il peut être imbriqué dans un autre élément de niveau bloc. +- Les éléments en **ligne** sont contenus **dans des éléments de niveau bloc**. Ils entourent seulement des petites parties du contenu du document, ni des paragraphes entiers, ni des regroupements de contenu. Un élément en ligne ne fait pas apparaître une nouvelle ligne dans le document. Il apparaît généralement dans un paragraphe de texte, par exemple un élément (hyperlien) {{htmlelement ("a")}} ou des éléments de mise en évidence tels que {{htmlelement("em")}} ou {{htmlelement("strong")}}. -<p>Prenez l'exemple suivant :</p> +Prenez l'exemple suivant : -<pre class="brush: html"><em>premier</em><em>deuxième</em><em>troisième</em> +```html +<em>premier</em><em>deuxième</em><em>troisième</em> -<p>quatrième</p><p>cinquième</p><p>sixième</p> -</pre> +<p>quatrième</p><p>cinquième</p><p>sixième</p> +``` -<p>{{htmlelement("em")}} est un élément en ligne et, comme vous pouvez le voir ci-dessous, les trois premiers éléments s'affichent sur la même ligne sans qu'il n'y ait d'espace entre eux. Par contre, {{htmlelement("p")}} est un élément de niveau bloc, donc chaque élément apparaît sur une nouvelle ligne et un espace apparaît au-dessus et au-dessous de chacun d'eux (l'espacement est dû au <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">style CSS </a>par défaut du navigateur qui s'applique aux paragraphes).</p> +{{htmlelement("em")}} est un élément en ligne et, comme vous pouvez le voir ci-dessous, les trois premiers éléments s'affichent sur la même ligne sans qu'il n'y ait d'espace entre eux. Par contre, {{htmlelement("p")}} est un élément de niveau bloc, donc chaque élément apparaît sur une nouvelle ligne et un espace apparaît au-dessus et au-dessous de chacun d'eux (l'espacement est dû au [style CSS ](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS)par défaut du navigateur qui s'applique aux paragraphes). -<p>{{ EmbedLiveSample('Éléments_bloc_vs_en_ligne', 700, 200, "", "") }}</p> +{{ EmbedLiveSample('Éléments_bloc_vs_en_ligne', 700, 200, "", "") }} -<div class="note"> -<p><strong>Note :</strong> HTML5 a redéfini les catégories d'éléments dans HTML5 : voir <a href="https://html.spec.whatwg.org/multipage/indices.html#element-content-categories">catégories de contenu d'éléments</a>. Bien que ces définitions soient plus précises et moins ambiguës que celles qui précèdent, elles sont beaucoup plus compliquées à comprendre que « block » et « inline ». Nous nous en tiendrons donc à cela tout au long de ce sujet.</p> -</div> +> **Note :** HTML5 a redéfini les catégories d'éléments dans HTML5 : voir [catégories de contenu d'éléments](https://html.spec.whatwg.org/multipage/indices.html#element-content-categories). Bien que ces définitions soient plus précises et moins ambiguës que celles qui précèdent, elles sont beaucoup plus compliquées à comprendre que « block » et « inline ». Nous nous en tiendrons donc à cela tout au long de ce sujet. -<div class="note"> -<p><strong>Note :</strong> les termes « block » et « inline », tels qu'utilisés dans cet article, ne doivent pas être confondus avec <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte">les types de boîtes des CSS </a>portant les mêmes noms. Alors qu'ils sont corrélés par défaut, modifier le type d'affichage des CSS ne modifie pas la catégorie d'un élément et n'affecte pas les éléments qu'il pourrait contenir ni ceux dans lequel il pourrait être contenu. Une des raisons pour lesquelles HTML5 a abandonné ces termes était d'éviter cette confusion assez courante.</p> -</div> +> **Note :** les termes « block » et « inline », tels qu'utilisés dans cet article, ne doivent pas être confondus avec [les types de boîtes des CSS ](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte)portant les mêmes noms. Alors qu'ils sont corrélés par défaut, modifier le type d'affichage des CSS ne modifie pas la catégorie d'un élément et n'affecte pas les éléments qu'il pourrait contenir ni ceux dans lequel il pourrait être contenu. Une des raisons pour lesquelles HTML5 a abandonné ces termes était d'éviter cette confusion assez courante. -<div class="note"> -<p><strong>Note :</strong> Vous trouverez des pages de référence utiles incluant des listes d'<a href="/fr/docs/Web/HTML/%C3%89l%C3%A9ments_en_bloc">éléments de niveau bloc</a> et d'<a href="/fr/docs/Web/HTML/%C3%89l%C3%A9ments_en_ligne">éléments en ligne</a>.</p> -</div> +> **Note :** Vous trouverez des pages de référence utiles incluant des listes d'[éléments de niveau bloc](/fr/docs/Web/HTML/%C3%89l%C3%A9ments_en_bloc) et d'[éléments en ligne](/fr/docs/Web/HTML/%C3%89l%C3%A9ments_en_ligne). -<h3 id="Éléments_vides">Éléments vides</h3> +### Éléments vides -<p>Tous les éléments ne suivent pas le modèle ci-dessus d'ouverture de balise, puis contenu, puis fermeture de balise. Certains éléments ne sont composés que d'une balise. Ils servent généralement à insérer / incorporer quelque chose dans le document à l'endroit où ils sont mis. Par exemple, l'élément <code><img /></code> ou {{htmlelement("img")}} insère une image dans une page à l'endroit où il est placé (la balise auto-fermante <code><img /></code> est à privilégier) :</p> +Tous les éléments ne suivent pas le modèle ci-dessus d'ouverture de balise, puis contenu, puis fermeture de balise. Certains éléments ne sont composés que d'une balise. Ils servent généralement à insérer / incorporer quelque chose dans le document à l'endroit où ils sont mis. Par exemple, l'élément `<img />` ou {{htmlelement("img")}} insère une image dans une page à l'endroit où il est placé (la balise auto-fermante `<img />` est à privilégier) : -<pre class="brush: html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" /></pre> +```html +<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" /> +``` -<p>Cela affichera l'élément suivant sur votre page :</p> +Cela affichera l'élément suivant sur votre page : -<p>{{ EmbedLiveSample('Éléments_vides', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> +{{ EmbedLiveSample('Éléments_vides', 700, 300, "", "", "hide-codepen-jsfiddle") }} -<h2 id="Attributs">Attributs</h2> +## Attributs -<p>Les éléments peuvent aussi avoir des attributs, qui comme suit:</p> +Les éléments peuvent aussi avoir des attributs, qui comme suit: -<p><img alt='&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>' src="attribut-chat-grincheux.png"></p> + -<p>Les attributs contiennent des informations supplémentaires sur l'élément sans qu'elles n'apparaissent dans le contenu réel. Dans ce cas, l'attribut <code>class</code> vous permet de donner à l'élément un nom d'identification qui peut ensuite être utilisé pour cibler l'élément afin de lui attribuer un <a href="/fr/docs/Web/CSS">style CSS</a> ou un comportement particulier, par exemple.</p> +Les attributs contiennent des informations supplémentaires sur l'élément sans qu'elles n'apparaissent dans le contenu réel. Dans ce cas, l'attribut `class` vous permet de donner à l'élément un nom d'identification qui peut ensuite être utilisé pour cibler l'élément afin de lui attribuer un [style CSS](/fr/docs/Web/CSS) ou un comportement particulier, par exemple. -<p>Pour créer un attribut, il faut :</p> +Pour créer un attribut, il faut : -<ol> - <li>insérer un espace entre cet attribut et le nom de l'élément (ou l'attribut précédent, si l'élément possède déjà un ou plusieurs attributs) ;</li> - <li>donner un nom à l'attribut, puis ajouter un signe égal ;</li> - <li>donner une valeur à l'attribut, entourée par des guillemets d'ouverture et de fermeture.</li> -</ol> +1. insérer un espace entre cet attribut et le nom de l'élément (ou l'attribut précédent, si l'élément possède déjà un ou plusieurs attributs) ; +2. donner un nom à l'attribut, puis ajouter un signe égal ; +3. donner une valeur à l'attribut, entourée par des guillemets d'ouverture et de fermeture. -<h3 id="Apprentissage_actif_ajouter_des_attributs_à_un_élément">Apprentissage actif : ajouter des attributs à un élément</h3> +### Apprentissage actif : ajouter des attributs à un élément -<p>Un autre exemple d'un élément est {{htmlelement("a")}}. Il représente une ancre et permet de transformer en lien l'élément qu'il enveloppe. Il peut recevoir un certain nombre d'attributs, mais voici les deux principaux :</p> +Un autre exemple d'un élément est {{htmlelement("a")}}. Il représente une ancre et permet de transformer en lien l'élément qu'il enveloppe. Il peut recevoir un certain nombre d'attributs, mais voici les deux principaux : -<ul> - <li><code>href </code>: cet attribut spécifie l'adresse web vers laquelle vous souhaitez que le lien pointe, c'est-à-dire l'adresse vers laquelle le navigateur redirigera lorsqu'on cliquera sur le lien. Par exemple, <code>href="https://www.mozilla.org/"</code>.</li> - <li><code>title</code> : l'attribut <code>title</code> apporte des informations supplémentaires sur le lien, comme le nom de la page vers laquelle le lien pointe. Par exemple, <code>title="Page d'Accueil Mozilla"</code>, qui apparaîtra comme une info-bulle lorsque le curseur passera sur le lien.</li> - <li><code>target</code>: L'attribut <code>target</code> définit le contexte de navigation utilisé pour afficher le lien. Par exemple, <code>target="_blank"</code> affichera le lien dans un nouvel onglet. Si vous voulez afficher le lien dans l'onglet courant, simplement, ne mettez pas cet attribut.</li> -</ul> +- `href `: cet attribut spécifie l'adresse web vers laquelle vous souhaitez que le lien pointe, c'est-à-dire l'adresse vers laquelle le navigateur redirigera lorsqu'on cliquera sur le lien. Par exemple, `href="https://www.mozilla.org/"`. +- `title` : l'attribut `title` apporte des informations supplémentaires sur le lien, comme le nom de la page vers laquelle le lien pointe. Par exemple, `title="Page d'Accueil Mozilla"`, qui apparaîtra comme une info-bulle lorsque le curseur passera sur le lien. +- `target`: L'attribut `target` définit le contexte de navigation utilisé pour afficher le lien. Par exemple, `target="_blank"` affichera le lien dans un nouvel onglet. Si vous voulez afficher le lien dans l'onglet courant, simplement, ne mettez pas cet attribut. -<p>Modifiez la ligne ci-dessous dans la <em>Zone de saisie</em> pour la transformer en lien vers votre site web préféré. Tout d'abord, ajoutez l'élément <a>, puis l'attribut <code>href</code>, puis l'attribut <code>title</code>. Vous pourrez voir la mise à jour de vos modifications en direct dans la <em>Zone de rendu</em>. Vous devriez voir un lien qui, lorsque vous passez votre pointeur de souris dessus, affiche le contenu de l'attribut <code>title</code> et, lorsque vous cliquez dessus, va à l'adresse web indiquée dans l'élément <code>href</code>. N'oubliez pas d'inclure un espace entre le nom de l'élément et chacun des attributs.</p> +Modifiez la ligne ci-dessous dans la _Zone de saisie_ pour la transformer en lien vers votre site web préféré. Tout d'abord, ajoutez l'élément \<a>, puis l'attribut `href`, puis l'attribut `title`. Vous pourrez voir la mise à jour de vos modifications en direct dans la _Zone de rendu_. Vous devriez voir un lien qui, lorsque vous passez votre pointeur de souris dessus, affiche le contenu de l'attribut `title` et, lorsque vous cliquez dessus, va à l'adresse web indiquée dans l'élément `href`. N'oubliez pas d'inclure un espace entre le nom de l'élément et chacun des attributs. -<p>Si vous faites une erreur, vous pouvez toujours réinitialiser la <em>zone de saisie</em> en cliquant sur le bouton <em>Réinitialiser</em>. Si vous êtes vraiment coincé, cliquez sur le bouton <em>Voir la solution</em> pour afficher la réponse.</p> +Si vous faites une erreur, vous pouvez toujours réinitialiser la _zone de saisie_ en cliquant sur le bouton _Réinitialiser_. Si vous êtes vraiment coincé, cliquez sur le bouton _Voir la solution_ pour afficher la réponse. -<pre class="brush: html hidden"><h2>Zone de rendu</h2> +```html hidden +<h2>Zone de rendu</h2> -<div class="output" style="min-height: 50px;"> -</div> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> -<textarea id="code" class="input" style="min-height: 100px;width: 95%"> - &lt;p&gt;Un lien vers mon site Web préféré.&lt;/p&gt; -</textarea> +<textarea id="code" class="input" style="min-height: 100px;width: 95%"> + <p>Un lien vers mon site Web préféré.</p> +</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Voir la solution"> -</div></pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -305,9 +316,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -337,7 +350,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<p>Un lien vers mon <a href="https://www.mozilla.org/" title="Page d\'accueil de Mozilla" target="_blank">site Web préféré</a>.</p>'; +var htmlSolution = '<p>Un lien vers mon <a href="https://www.mozilla.org/" title="Page d\'accueil de Mozilla" target="_blank">site Web préféré</a>.</p>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -383,138 +396,147 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> +}; +``` -<p>{{ EmbedLiveSample('Apprentissage_actif_ajouter_des_attributs_à_un_élément', 700, 400,"","","hide-codepen-jsfiddle") }}</p> +{{ EmbedLiveSample('Apprentissage_actif_ajouter_des_attributs_à_un_élément', 700, 400,"","","hide-codepen-jsfiddle") }} -<h3 id="Les_attributs_booléens">Les attributs booléens</h3> +### Les attributs booléens -<p>Vous verrez parfois des attributs sans valeur définie : c'est tout à fait autorisé. Ils sont appelés attributs booléens ; ils ne peuvent avoir qu'une seule valeur, généralement la même que le nom de l'attribut. Par exemple, prenez l'attribut {{htmlattrxref ("disabled", "input")}}, que vous pouvez affecter aux éléments <code>input</code> (éléments de saisie d'un formulaire) si vous voulez les désactiver (ils seront alors grisés) afin que l'utilisateur ne puisse pas y saisir de données.</p> +Vous verrez parfois des attributs sans valeur définie : c'est tout à fait autorisé. Ils sont appelés attributs booléens ; ils ne peuvent avoir qu'une seule valeur, généralement la même que le nom de l'attribut. Par exemple, prenez l'attribut {{htmlattrxref ("disabled", "input")}}, que vous pouvez affecter aux éléments `input` (éléments de saisie d'un formulaire) si vous voulez les désactiver (ils seront alors grisés) afin que l'utilisateur ne puisse pas y saisir de données. -<pre><input type="text" disabled="disabled"></pre> + <input type="text" disabled="disabled"> -<p>Pour aller plus vite, il est parfaitement possible d'écrire cette même ligne de la façon suivante (nous avons également inclus un élément <code>input</code> non-désactivé pour référence, pour que vous puissiez vous faire une meilleure idée de ce qui se passe) :</p> +Pour aller plus vite, il est parfaitement possible d'écrire cette même ligne de la façon suivante (nous avons également inclus un élément `input` non-désactivé pour référence, pour que vous puissiez vous faire une meilleure idée de ce qui se passe) : -<pre class="brush: html"><input type="text" disabled> +```html +<input type="text" disabled> -<input type="text"> -</pre> +<input type="text"> +``` -<p>Ces deux exemples vous donneront le résultat suivant :</p> +Ces deux exemples vous donneront le résultat suivant : -<p>{{ EmbedLiveSample('Les_attributs_booléens', 700, 100) }}</p> +{{ EmbedLiveSample('Les_attributs_booléens', 700, 100) }} -<h3 id="Omettre_des_guillemets_autour_des_valeurs_dattribut">Omettre des guillemets autour des valeurs d'attribut</h3> +### Omettre des guillemets autour des valeurs d'attribut -<p>Si vous regardez ce qui se passe sur le Web, vous rencontrerez tous types de styles de balises étranges, y compris des valeurs d'attribut sans guillemets. C'est permis dans certaines circonstances, mais cela va briser votre balisage dans d'autres. Par exemple, si nous revisitons notre exemple de lien ci-dessus, nous pourrons écrire une version de base avec seulement l'attribut <code>href</code>, comme ceci :</p> +Si vous regardez ce qui se passe sur le Web, vous rencontrerez tous types de styles de balises étranges, y compris des valeurs d'attribut sans guillemets. C'est permis dans certaines circonstances, mais cela va briser votre balisage dans d'autres. Par exemple, si nous revisitons notre exemple de lien ci-dessus, nous pourrons écrire une version de base avec seulement l'attribut `href`, comme ceci : -<pre><a href=<code>https://www.mozilla.org/</code>>mon site web favori</a></pre> + <a href=https://www.mozilla.org/>mon site web favori</a> -<p>Cependant, si nous ajoutons l'attribut <code>title</code> dans ce même style, cela devient incorrect :</p> +Cependant, si nous ajoutons l'attribut `title` dans ce même style, cela devient incorrect : -<pre class="brush: html"><a href=https://www.mozilla.org/ title=La page d\'accueil Mozilla >mon site web favori</a></pre> +```html +<a href=https://www.mozilla.org/ title=La page d\'accueil Mozilla >mon site web favori</a> +``` -<p>En effet, le navigateur interprétera mal la balise, pensant que l'attribut <code>title</code> est en fait quatre attributs — un attribut <code>title</code> avec la valeur « La » et trois attributs booléens, « <code>page</code> », « <code>d\'accueil</code> » et « <code>Mozilla</code> ». Ce n'est évidemment pas ce qui était prévu et cela provoquera des erreurs ou un comportement inattendu dans le code, comme on le voit dans l'exemple en direct ci-dessous. Essayez de passer la souris sur le lien pour voir ce que le texte de <code>title</code> donne.</p> +En effet, le navigateur interprétera mal la balise, pensant que l'attribut `title` est en fait quatre attributs — un attribut `title` avec la valeur « La » et trois attributs booléens, « `page` », « `d\'accueil` » et « `Mozilla` ». Ce n'est évidemment pas ce qui était prévu et cela provoquera des erreurs ou un comportement inattendu dans le code, comme on le voit dans l'exemple en direct ci-dessous. Essayez de passer la souris sur le lien pour voir ce que le texte de `title` donne. -<p>{{ EmbedLiveSample("Omettre_des_guillemets_autour_des_valeurs_dattribut", 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> +{{ EmbedLiveSample("Omettre_des_guillemets_autour_des_valeurs_dattribut", 700, 100, "", "", "hide-codepen-jsfiddle") }} -<p>Nous vous recommandons de toujours inclure les guillemets afin d'éviter ce type de problèmes, mais aussi pour que le code soit plus lisible.</p> +Nous vous recommandons de toujours inclure les guillemets afin d'éviter ce type de problèmes, mais aussi pour que le code soit plus lisible. -<h3 id="Guillemets_simples_ou_doubles">Guillemets simples ou doubles ?</h3> +### Guillemets simples ou doubles ? -<p>Dans cet article, vous remarquerez que les valeurs des attributs sont toutes entre des guillemets doubles (" "). Vous pouvez cependant voir des guillemets simples (' ') dans le code HTML de certaines personnes. C'est purement une question de style, et vous êtes libre de choisir la solution que vous préférez. Les deux lignes suivantes sont équivalentes :</p> +Dans cet article, vous remarquerez que les valeurs des attributs sont toutes entre des guillemets doubles (" "). Vous pouvez cependant voir des guillemets simples (' ') dans le code HTML de certaines personnes. C'est purement une question de style, et vous êtes libre de choisir la solution que vous préférez. Les deux lignes suivantes sont équivalentes : -<pre class="brush: html"><a href="http://www.exemple.com">Un lien vers mon exemple.</a> +```html +<a href="http://www.exemple.com">Un lien vers mon exemple.</a> -<a href='http://www.example.com'>Un lien vers mon exemple</a></pre> +<a href='http://www.example.com'>Un lien vers mon exemple</a> +``` -<p>Vous devez cependant vous assurer de ne pas les mélanger. Ce qui suit n'est pas correct :</p> +Vous devez cependant vous assurer de ne pas les mélanger. Ce qui suit n'est pas correct : -<pre class="brush: html"><a href="http://www.exemple.com'>Un lien vers mon exemple.</a></pre> +```html +<a href="http://www.exemple.com'>Un lien vers mon exemple.</a> +``` -<p>Si vous avez utilisé un type de guillemets dans votre code HTML, vous pouvez imbriquer l'autre type :</p> +Si vous avez utilisé un type de guillemets dans votre code HTML, vous pouvez imbriquer l'autre type : -<pre class="brush: html"><a href="http://www.exemple.com" title="N'est-ce pas drôle ?">Un lien vers mon exemple.</a></pre> +```html +<a href="http://www.exemple.com" title="N'est-ce pas drôle ?">Un lien vers mon exemple.</a> +``` -<p>Si vous souhaitez imbriquer le même type de guillemets, vous devez utiliser <a href="/fr/docs/Glossary/Entity">une entité HTML</a> pour représenter ce caractère spécial.</p> +Si vous souhaitez imbriquer le même type de guillemets, vous devez utiliser [une entité HTML](/fr/docs/Glossary/Entity) pour représenter ce caractère spécial. -<h2 id="Anatomie_d'un_document_HTML">Anatomie d'un document HTML</h2> +## Anatomie d'un document HTML -<p>Les éléments HTML basiques ne sont pas très utiles si on les prend séparément. Nous allons voir comment combiner des éléments individuels pour former une page HTML entière :</p> +Les éléments HTML basiques ne sont pas très utiles si on les prend séparément. Nous allons voir comment combiner des éléments individuels pour former une page HTML entière : -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Ma page test</title> - </head> - <body> - <p>Voici ma page web</p> - </body> -</html></pre> +```html +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Ma page test</title> + </head> + <body> + <p>Voici ma page web</p> + </body> +</html> +``` -<p>Ici, nous avons :</p> +Ici, nous avons : -<ol> - <li><code><!DOCTYPE html></code> : le type de document. Quand HTML était jeune (vers 1991/2), les <code>doctypes</code> étaient censés agir comme des liens vers un ensemble de règles que la page HTML devait suivre pour être considérée comme un bon HTML, ce qui pouvait signifier la vérification automatique des erreurs et d'autres choses utiles. Habituellement, ils ressemblaient à ceci : +1. `<!DOCTYPE html>` : le type de document. Quand HTML était jeune (vers 1991/2), les `doctypes` étaient censés agir comme des liens vers un ensemble de règles que la page HTML devait suivre pour être considérée comme un bon HTML, ce qui pouvait signifier la vérification automatique des erreurs et d'autres choses utiles. Habituellement, ils ressemblaient à ceci : - <pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> - Cependant, de nos jours personne ne se soucie vraiment d'eux, et ils sont juste un artefact historique qui doit être inclus pour que tout fonctionne bien. <code><!DOCTYPE html></code> est la chaîne de caractères la plus courte qui soit un <code>doctype</code> valide. C'est tout ce que vous avez vraiment besoin de savoir.</li> - <li><code><html></html></code> : l'élément <code><html></code>. Cet élément est le contenant de tout le code de la page et est parfois connu comme l'élément racine.</li> - <li><code><head></head></code> : l'élément <code><head></code>. Cet élément a le rôle de conteneur pour toute chose que vous souhaitez inclure dans la page HTML qui ne soit pas du contenu à afficher aux visiteurs de la page : mots clés, description de page que vous souhaitez voir apparaître dans les résultats de recherche, style CSS, déclarations de jeu de caractères et plus encore. Nous vous en dirons plus à ce sujet dans l'article suivant de la série.</li> - <li><code><meta charset="utf-8"></code> : cet élément définit que le jeu de caractères à utiliser pour votre document est UTF-8. Ce jeu comporte la quasi‑totalité des caractères de toutes les écritures de langues humaines connues. Actuellement, il peut pour l'essentiel gérer tout contenu textuel que vous y pourriez mettre. Il n'y a aucune raison de ne pas définir cela et il peut permettre d'éviter certains problèmes plus tard. </li> - <li><code><title></title></code> : l'élément <code>title</code>. Il définit le titre de la page, celui qui s'affiche dans l'onglet du navigateur dans lequel la page est chargée et qui est utilisé pour décrire la page lorsque vous la marquez ou l'ajoutez aux favoris. </li> - <li><code><body></body></code> : l'élément <code><body></code>. Il contient <em>tout </em>le contenu que vous souhaitez afficher aux internautes lorsqu'ils visitent votre page, que ce soit du texte, des images, des vidéos, des jeux, des pistes audio jouables ou autre.</li> -</ol> + <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" + "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> -<h3 id="Apprentissage_actif_ajouter_certaines_fonctionnalités_à_un_document_HTML">Apprentissage actif : ajouter certaines fonctionnalités à un document HTML</h3> + Cependant, de nos jours personne ne se soucie vraiment d'eux, et ils sont juste un artefact historique qui doit être inclus pour que tout fonctionne bien. `<!DOCTYPE html>` est la chaîne de caractères la plus courte qui soit un `doctype` valide. C'est tout ce que vous avez vraiment besoin de savoir. -<p>Si vous voulez essayer d'écrire du HTML sur votre ordinateur en local, vous pouvez :</p> +2. `<html></html>` : l'élément `<html>`. Cet élément est le contenant de tout le code de la page et est parfois connu comme l'élément racine. +3. `<head></head>` : l'élément `<head>`. Cet élément a le rôle de conteneur pour toute chose que vous souhaitez inclure dans la page HTML qui ne soit pas du contenu à afficher aux visiteurs de la page : mots clés, description de page que vous souhaitez voir apparaître dans les résultats de recherche, style CSS, déclarations de jeu de caractères et plus encore. Nous vous en dirons plus à ce sujet dans l'article suivant de la série. +4. `<meta charset="utf-8">` : cet élément définit que le jeu de caractères à utiliser pour votre document est UTF-8. Ce jeu comporte la quasi‑totalité des caractères de toutes les écritures de langues humaines connues. Actuellement, il peut pour l'essentiel gérer tout contenu textuel que vous y pourriez mettre. Il n'y a aucune raison de ne pas définir cela et il peut permettre d'éviter certains problèmes plus tard. +5. `<title></title>` : l'élément `title`. Il définit le titre de la page, celui qui s'affiche dans l'onglet du navigateur dans lequel la page est chargée et qui est utilisé pour décrire la page lorsque vous la marquez ou l'ajoutez aux favoris. +6. `<body></body>` : l'élément `<body>`. Il contient _tout_ le contenu que vous souhaitez afficher aux internautes lorsqu'ils visitent votre page, que ce soit du texte, des images, des vidéos, des jeux, des pistes audio jouables ou autre. -<ol> - <li>copier l'exemple de page HTML ci-dessus.</li> - <li>créer un nouveau fichier dans votre éditeur de texte.</li> - <li>coller le code dans le nouveau fichier texte.</li> - <li>enregistrer le fichier sous <code>index.html</code>.</li> -</ol> +### Apprentissage actif : ajouter certaines fonctionnalités à un document HTML -<div class="note"> -<p><strong>Note :</strong> Vous pouvez également trouver ce modèle HTML dans le<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html"> dépôt GitHub MDN Learning Area</a>.</p> -</div> +Si vous voulez essayer d'écrire du HTML sur votre ordinateur en local, vous pouvez : + +1. copier l'exemple de page HTML ci-dessus. +2. créer un nouveau fichier dans votre éditeur de texte. +3. coller le code dans le nouveau fichier texte. +4. enregistrer le fichier sous `index.html`. + +> **Note :** Vous pouvez également trouver ce modèle HTML dans le[ dépôt GitHub MDN Learning Area](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html). -<p>Vous pouvez maintenant ouvrir ce fichier dans un navigateur Web pour voir à quoi ressemble le rendu, puis modifier le code et actualiser le navigateur pour voir le résultat. Initialement, il ressemblera à ceci:</p> +Vous pouvez maintenant ouvrir ce fichier dans un navigateur Web pour voir à quoi ressemble le rendu, puis modifier le code et actualiser le navigateur pour voir le résultat. Initialement, il ressemblera à ceci: -<p><img alt="Une simple page HTML affichant Voici ma page" src="fr-capture-modele.png">Dans cet exercice, vous pouvez modifier le code sur votre ordinateur, comme indiqué ci-dessus, ou directement dans la fenêtre d'exemple modifiable ci-dessous (la fenêtre d'exemple modifiable représente uniquement le contenu de l'élément <body>. ) Nous aimerions que vous le fassiez en suivant les étapes suivantes :</p> +Dans cet exercice, vous pouvez modifier le code sur votre ordinateur, comme indiqué ci-dessus, ou directement dans la fenêtre d'exemple modifiable ci-dessous (la fenêtre d'exemple modifiable représente uniquement le contenu de l'élément \<body>. ) Nous aimerions que vous le fassiez en suivant les étapes suivantes : -<ul> - <li>Au début du document, juste après la balise d'ouverture <body>, ajoutez un titre principal pour le document. Il doit être entre une balise ouvrante <h1> et la balise fermante </ h1> ;</li> - <li>modifiez le contenu du paragraphe pour ajouter un texte sur quelque chose qui vous intéresse ;</li> - <li>mettez les mots importants en gras en les mettant entre la balise ouvrante <code><strong></code> et la balise fermante <code></ strong></code>;</li> - <li>ajoutez un lien à votre paragraphe, comme <a href="#apprentissage_actif_ajout_d'attributs_à_un_élément">expliqué plus haut dans cet article</a> ;</li> - <li>ajoutez une image dans votre document, en dessous du paragrahe, comme <a href="#éléments_vides">expliqué plus haut dans cet article</a>. Vous obtiendrez des points bonus si vous parvenez à lier une image différente (localement sur votre ordinateur ou ailleurs sur le Web).</li> -</ul> +- Au début du document, juste après la balise d'ouverture \<body>, ajoutez un titre principal pour le document. Il doit être entre une balise ouvrante \<h1> et la balise fermante \</ h1> ; +- modifiez le contenu du paragraphe pour ajouter un texte sur quelque chose qui vous intéresse ; +- mettez les mots importants en gras en les mettant entre la balise ouvrante `<strong>` et la balise fermante `</ strong>`; +- ajoutez un lien à votre paragraphe, comme [expliqué plus haut dans cet article](#apprentissage_actif_ajout_d'attributs_à_un_élément) ; +- ajoutez une image dans votre document, en dessous du paragrahe, comme [expliqué plus haut dans cet article](#éléments_vides). Vous obtiendrez des points bonus si vous parvenez à lier une image différente (localement sur votre ordinateur ou ailleurs sur le Web). -<p>Si vous faites une erreur, vous pouvez toujours recommencer en utilisant le bouton <em>Réinitialiser</em>. Si vous êtes vraiment coincé, appuyez sur le bouton <em>Voir la solution</em> pour l'afficher.</p> +Si vous faites une erreur, vous pouvez toujours recommencer en utilisant le bouton _Réinitialiser_. Si vous êtes vraiment coincé, appuyez sur le bouton _Voir la solution_ pour l'afficher. -<pre class="brush: html hidden"><h2>Zone de rendu</h2> +```html hidden +<h2>Zone de rendu</h2> -<div class="output" style="min-height: 50px;"> -</div> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> -<textarea id="code" class="input" style="min-height: 100px;width: 95%"> - &lt;p&gt;Voici ma page&lt;/p&gt; -</textarea> +<textarea id="code" class="input" style="min-height: 100px;width: 95%"> + <p>Voici ma page</p> +</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Voir la solution"> -</div></pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -536,9 +558,11 @@ img { body { margin: 10px; background: #f5f9fa; -}</pre> +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -568,7 +592,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<h1>Un peu de musique</h1><p>J\'aime vraiment beaucoup <strong>jouer de la batterie</strong>. Un de mes batteurs préférés est Neal Peart, qui\ joue dans le groupe <a href="https://fr.wikipedia.org/wiki/Rush_%28groupe%29" title="Article Wikipedia sur Rush">Rush</a>.\Actuellement, mon album Rush de prédilection est <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; +var htmlSolution = '<h1>Un peu de musique</h1><p>J\'aime vraiment beaucoup <strong>jouer de la batterie</strong>. Un de mes batteurs préférés est Neal Peart, qui\ joue dans le groupe <a href="https://fr.wikipedia.org/wiki/Rush_%28groupe%29" title="Article Wikipedia sur Rush">Rush</a>.\Actuellement, mon album Rush de prédilection est <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -614,112 +638,88 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> +}; +``` -<p>{{ EmbedLiveSample('Apprentissage_actif_ajouter_certaines_fonctionnalités_à_un_document_HTML', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> +{{ EmbedLiveSample('Apprentissage_actif_ajouter_certaines_fonctionnalités_à_un_document_HTML', 700, 600, "", "", "hide-codepen-jsfiddle") }} -<h3 id="Espace_vide_en_HTML">Espace vide en HTML</h3> +### Espace vide en HTML -<p>Dans les exemples ci-dessus, vous avez peut-être remarqué que beaucoup d'espaces sont inclus dans le code — ce n'est pas nécessaire du tout. Les deux extraits de code suivants sont équivalents:</p> +Dans les exemples ci-dessus, vous avez peut-être remarqué que beaucoup d'espaces sont inclus dans le code — ce n'est pas nécessaire du tout. Les deux extraits de code suivants sont équivalents: -<pre class="brush: html"><p>Les chiens sont idiots.</p> +```html +<p>Les chiens sont idiots.</p> -<p>Les chiens sont - idiots.</p></pre> +<p>Les chiens sont + idiots.</p> +``` -<p>Peu importe la quantité d'espace que vous utilisez (pour inclure des espaces, ou aussi des sauts de ligne), l'analyseur HTML réduit chacun à un seul espace lors du rendu du code. Alors, pourquoi utiliser autant d'espace blanc? La réponse est la lisibilité — car il est tellement plus facile de comprendre ce qui se passe dans votre code si vous l'avez bien formaté, et non pas simplement l'écrire dans un grand désordre. Dans notre HTML, nous avons chaque élément imbriqué indenté par deux espaces plus que celui qui le contient. C'est à vous de choisir le style de formatage que vous utilisez (combien d'espaces pour chaque niveau d'indentation, par exemple), mais vous devriez envisager d'utiliser une sorte de formatage.</p> +Peu importe la quantité d'espace que vous utilisez (pour inclure des espaces, ou aussi des sauts de ligne), l'analyseur HTML réduit chacun à un seul espace lors du rendu du code. Alors, pourquoi utiliser autant d'espace blanc? La réponse est la lisibilité — car il est tellement plus facile de comprendre ce qui se passe dans votre code si vous l'avez bien formaté, et non pas simplement l'écrire dans un grand désordre. Dans notre HTML, nous avons chaque élément imbriqué indenté par deux espaces plus que celui qui le contient. C'est à vous de choisir le style de formatage que vous utilisez (combien d'espaces pour chaque niveau d'indentation, par exemple), mais vous devriez envisager d'utiliser une sorte de formatage. -<h2 id="Références_dentités">Références d'entités : inclure les caractères spéciaux en HTML</h2> +## Références d'entités : inclure les caractères spéciaux en HTML -<p>En HTML, les caractères <code><</code>, <code>></code>,<code>"</code>,<code>'</code> et <code>&</code> sont des caractères spéciaux. Ils font partie de la syntaxe HTML elle-même, alors comment inclure un de ces caractères dans du texte, par exemple si vous voulez vraiment utiliser une esperluette(&) ou un signe inférieur(<), qui ne soit pas interpré en tant que code comme les navigateurs pourraient le faire ?</p> +En HTML, les caractères `<`, `>`,`"`,`'` et `&` sont des caractères spéciaux. Ils font partie de la syntaxe HTML elle-même, alors comment inclure un de ces caractères dans du texte, par exemple si vous voulez vraiment utiliser une esperluette(&) ou un signe inférieur(<), qui ne soit pas interpré en tant que code comme les navigateurs pourraient le faire ? -<p>Nous devons utiliser les références des caractères — codes spéciaux qui représentent des caractères et peuvent être utilisés dans ces circonstances exactes. Chaque référence de caractère est démarrée avec une esperluette (&), et se termine par un point-virgule (;).</p> +Nous devons utiliser les références des caractères — codes spéciaux qui représentent des caractères et peuvent être utilisés dans ces circonstances exactes. Chaque référence de caractère est démarrée avec une esperluette (&), et se termine par un point-virgule (;). -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Le caractère</th> - <th scope="col">Réference équivalent</th> - </tr> - </thead> - <tbody> - <tr> - <td><</td> - <td>&lt;</td> - </tr> - <tr> - <td>></td> - <td>&gt;</td> - </tr> - <tr> - <td>"</td> - <td>&quot;</td> - </tr> - <tr> - <td>'</td> - <td>&apos;</td> - </tr> - <tr> - <td>&</td> - <td>&amp;</td> - </tr> - </tbody> -</table> +| Le caractère | Réference équivalent | +| ------------ | -------------------- | +| < | < | +| > | > | +| " | " | +| ' | ' | +| & | & | -<p>Dans l'exemple ci-dessous, voici deux paragraphes parlant de techniques Web :</p> +Dans l'exemple ci-dessous, voici deux paragraphes parlant de techniques Web : -<pre class="brush: html"><p>En HTML, un paragraphe se définit avec l'élément <p>.</p> +```html +<p>En HTML, un paragraphe se définit avec l'élément <p>.</p> -<p>En HTML, un paragraphe se définit avec l'élément &lt;p&gt;.</p></pre> +<p>En HTML, un paragraphe se définit avec l'élément <p>.</p> +``` -<p>Dans la zone de rendu en direct ci-dessous, vous pouvez voir que le premier paragraphe n'est pas correctement affiché : le navigateur interprète le second <p> comme le début d'un nouveau paragraphe ! Le deuxième paragraphe est bien affiché, car nous avons remplacé les signes inférieur(<) et supérieur(>) par leurs références de caractère.</p> +Dans la zone de rendu en direct ci-dessous, vous pouvez voir que le premier paragraphe n'est pas correctement affiché : le navigateur interprète le second \<p> comme le début d'un nouveau paragraphe ! Le deuxième paragraphe est bien affiché, car nous avons remplacé les signes inférieur(<) et supérieur(>) par leurs références de caractère. -<p>{{ EmbedLiveSample("Références_dentités", 700, 200, "", "", "hide-codepen-jsfiddle") }}</p> +{{ EmbedLiveSample("Références_dentités", 700, 200, "", "", "hide-codepen-jsfiddle") }} -<div class="note"> -<p><strong>Note :</strong> Un graphique de toutes les références d'entité de caractères HTML est disponible sur Wikipedia : <a href="https://fr.wikipedia.org/wiki/Liste_des_entit%C3%A9s_caract%C3%A8re_de_XML_et_HTML">Liste des entités caractère de XML et HTML</a>.</p> -</div> +> **Note :** Un graphique de toutes les références d'entité de caractères HTML est disponible sur Wikipedia : [Liste des entités caractère de XML et HTML](https://fr.wikipedia.org/wiki/Liste_des_entit%C3%A9s_caract%C3%A8re_de_XML_et_HTML). -<h2 id="Commentaires_en_HTML">Commentaires en HTML</h2> +## Commentaires en HTML -<p>En HTML, comme pour la plupart des langages de programmation, il existe un mécanisme permettant d'écrire des commentaires dans le code. Les commentaires sont ignorés par le navigateur et invisibles à l'utilisateur. Leur but est de permettre d'inclure des commentaires dans le code pour dire comment il fonctionne, que font les diverses parties du code, etc. Cela peut s'avérer très utile si vous revenez à un codage que vous n'avez pas travaillé depuis 6 mois et que vous ne pouvez pas vous rappeler ce que vous avez fait — ou si vous donnez votre code à quelqu'un d'autre pour qu'il y travaille.</p> +En HTML, comme pour la plupart des langages de programmation, il existe un mécanisme permettant d'écrire des commentaires dans le code. Les commentaires sont ignorés par le navigateur et invisibles à l'utilisateur. Leur but est de permettre d'inclure des commentaires dans le code pour dire comment il fonctionne, que font les diverses parties du code, etc. Cela peut s'avérer très utile si vous revenez à un codage que vous n'avez pas travaillé depuis 6 mois et que vous ne pouvez pas vous rappeler ce que vous avez fait — ou si vous donnez votre code à quelqu'un d'autre pour qu'il y travaille. -<p>Pour transformer une section de contenu dans votre fichier HTML en commentaire, vous devez la mettre dans les marqueurs spéciaux <code><!-- </code>et<code>--></code>, par exemple :</p> +Pour transformer une section de contenu dans votre fichier HTML en commentaire, vous devez la mettre dans les marqueurs spéciaux `<!-- `et`-->`, par exemple : -<pre class="brush: html"><p>Je ne suis pas dans un commentaire</p> +```html +<p>Je ne suis pas dans un commentaire</p> -<!-- <p>Je suis dans un commmentaire!</p> --></pre> +<!-- <p>Je suis dans un commmentaire!</p> --> +``` -<p>Comme vous pouvez le voir ci-dessous, le premier paragraphe apparaît dans le rendu de l'éditeur en ligne, mais le second n'apparaît pas.</p> +Comme vous pouvez le voir ci-dessous, le premier paragraphe apparaît dans le rendu de l'éditeur en ligne, mais le second n'apparaît pas. -<p>{{ EmbedLiveSample('Commentaires_en_HTML', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> +{{ EmbedLiveSample('Commentaires_en_HTML', 700, 100, "", "", "hide-codepen-jsfiddle") }} -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Vous avez atteint la fin de l'article — nous espérons que vous avez apprécié de faire le tour des bases du HTML ! À ce stade, vous devez comprendre à quoi ce langage ressemble, comment il fonctionne à un niveau de base, et être en mesure d'écrire quelques éléments et attributs. C'est parfait pour le moment, car dans les articles suivants, nous allons approfondir certaines des choses que vous venez de voir, et introduire de nouveaux aspects du langage. Restez à l'écoute !</p> +Vous avez atteint la fin de l'article — nous espérons que vous avez apprécié de faire le tour des bases du HTML ! À ce stade, vous devez comprendre à quoi ce langage ressemble, comment il fonctionne à un niveau de base, et être en mesure d'écrire quelques éléments et attributs. C'est parfait pour le moment, car dans les articles suivants, nous allons approfondir certaines des choses que vous venez de voir, et introduire de nouveaux aspects du langage. Restez à l'écoute ! -<div class="note"> -<p><strong>Note :</strong> À ce stade, lorsque vous commencez à en apprendre davantage sur le langage HTML, vous pouvez également commencer à explorer les bases des feuilles de style <a href="/fr/docs/Learn/CSS">CSS</a>. CSS est le langage utilisé pour composer vos pages Web (par exemple, changer la police ou les couleurs, ou modifier la mise en page). HTML et CSS vont très bien ensemble, comme vous allez bientôt le découvrir.</p> -</div> +> **Note :** À ce stade, lorsque vous commencez à en apprendre davantage sur le langage HTML, vous pouvez également commencer à explorer les bases des feuilles de style [CSS](/fr/docs/Learn/CSS). CSS est le langage utilisé pour composer vos pages Web (par exemple, changer la police ou les couleurs, ou modifier la mise en page). HTML et CSS vont très bien ensemble, comme vous allez bientôt le découvrir. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer une couleur aux éléments HTML avec les CSS</a></li> -</ul> +- [Appliquer une couleur aux éléments HTML avec les CSS](/fr/docs/Web/HTML/Applying_color) -<div>{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}</div> +{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li>Commencer avec le HTML</li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Création d'hyperliens</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formatage avancé du texte</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Faire une lettre</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li> -</ul> +- Commencer avec le HTML +- [Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) +- [Fondamentaux du texte HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) +- [Création d'hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) +- [Formatage avancé du texte](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) +- [Structure de Site Web et de document](/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) +- [Déboguer de l'HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) +- [Faire une lettre](/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter) +- [Structurer une page de contenu](/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content) diff --git a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md index 213a383e88..be405b6a22 100644 --- a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md +++ b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md @@ -15,118 +15,131 @@ tags: translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}} -<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p>L'un des principaux buts de HTML est de structurer du texte et lui donner du sens (ce que l'on appelle la {{glossary("sémantique")}}) afin que le navigateur puisse l'afficher correctement. Cet article explique comment {{glossary("HTML")}} peut être utilisé pour structurer une page en ajoutant des titres et des paragraphes, en marquant des emphases, en créant des listes, et bien plus encore.</p> +L'un des principaux buts de HTML est de structurer du texte et lui donner du sens (ce que l'on appelle la {{glossary("sémantique")}}) afin que le navigateur puisse l'afficher correctement. Cet article explique comment {{glossary("HTML")}} peut être utilisé pour structurer une page en ajoutant des titres et des paragraphes, en marquant des emphases, en créant des listes, et bien plus encore. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Pré-requis:</th> - <td> - <p>Connaître les bases du langage HTML, telles que traitées à la page <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a>.</p> - </td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td> - <p>Apprendre comment ajouter des balises dans une page de texte simple pour la structurer et lui donner du sens — en incluant des paragraphes, des titres, des listes, des emphases et des citations.</p> - </td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Pré-requis:</th> + <td> + <p> + Connaître les bases du langage HTML, telles que traitées à la page + <a + href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started" + >Commencer avec le HTML</a + >. + </p> + </td> + </tr> + <tr> + <th scope="row">Objectif:</th> + <td> + <p> + Apprendre comment ajouter des balises dans une page de texte simple + pour la structurer et lui donner du sens — en incluant des + paragraphes, des titres, des listes, des emphases et des citations. + </p> + </td> + </tr> + </tbody> </table> -<h2 id="Les_bases_titres_et_paragraphes">Les bases : titres et paragraphes</h2> +## Les bases : titres et paragraphes -<p>La plupart des textes structurés comprennent des titres et des paragraphes, que ce soit dans les romans, les journaux, les livres scolaires, les magazines, etc.</p> +La plupart des textes structurés comprennent des titres et des paragraphes, que ce soit dans les romans, les journaux, les livres scolaires, les magazines, etc. -<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="newspaper_small.jpg"></p> + -<p>Le contenu structuré facilite la lecture et la rend plus agréable.</p> +Le contenu structuré facilite la lecture et la rend plus agréable. -<p>En HTML, les paragraphes doivent être contenus dans un élément {{htmlelement("p")}}, comme ceci :</p> +En HTML, les paragraphes doivent être contenus dans un élément {{htmlelement("p")}}, comme ceci : -<pre class="brush: html"><p>Je suis un paragraphe, oh oui je le suis.</p></pre> +```html +<p>Je suis un paragraphe, oh oui je le suis.</p> +``` -<p>Chaque titre doit être contenu dans un élément titre :</p> +Chaque titre doit être contenu dans un élément titre : -<pre class="brush: html"><h1>Je suis le titre de l'histoire.</h1></pre> +```html +<h1>Je suis le titre de l'histoire.</h1> +``` -<p>Il y a 6 éléments de titre — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, et {{htmlelement("h6")}}. Chaque élément représente un niveau de titre différent ; <code><h1></code> représente le titre principal, <code><h2></code> représente un sous-titre, <code><h3></code> représente un sous-sous-titre, et ainsi de suite jusqu'au niveau de titre le plus bas qui correspond à <code><h6></code>.</p> +Il y a 6 éléments de titre — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, et {{htmlelement("h6")}}. Chaque élément représente un niveau de titre différent ; `<h1>` représente le titre principal, `<h2>` représente un sous-titre, `<h3>` représente un sous-sous-titre, et ainsi de suite jusqu'au niveau de titre le plus bas qui correspond à `<h6>`. -<h3 id="Implémentation_de_la_hiérarchie_structurale">Implémentation de la hiérarchie structurale</h3> +### Implémentation de la hiérarchie structurale -<p>Dans une histoire, la balise <code><h1></code> représenterait le titre de l'histoire, les balises <code><h2></code> représenteraient les titres des chapitres, les balises <code><h3></code> les sous-sections des chapitres, en poursuivant ainsi jusqu'à la balise <code><h6></code>.</p> +Dans une histoire, la balise `<h1>` représenterait le titre de l'histoire, les balises `<h2>` représenteraient les titres des chapitres, les balises `<h3>` les sous-sections des chapitres, en poursuivant ainsi jusqu'à la balise `<h6>`. -<pre class="brush: html"><h1>L'ennui mortel</h1> +```html +<h1>L'ennui mortel</h1> -<p>par Chris Mills</p> +<p>par Chris Mills</p> -<h2>Chapitre I : La nuit noire</h2> +<h2>Chapitre I : La nuit noire</h2> -<p>Il faisait nuit noire. Quelque part une chouette ululait. La pluie tombait sur ...</p> +<p>Il faisait nuit noire. Quelque part une chouette ululait. La pluie tombait sur ...</p> -<h2>Chapitre II : Le silence éternel</h2> +<h2>Chapitre II : Le silence éternel</h2> -<p>Notre protagoniste ne pouvait même pas murmurer à l'ombre de la silhouette...</p> +<p>Notre protagoniste ne pouvait même pas murmurer à l'ombre de la silhouette...</p> -<h3>Le spectre parle</h3> +<h3>Le spectre parle</h3> -<p>Plusieurs heures s'étaient écoulées, quand soudain le spectre assis se releva et s'exclama : « S'il vous plaît, ayez pitié de mon âme ! »...</p></pre> +<p>Plusieurs heures s'étaient écoulées, quand soudain le spectre assis se releva et s'exclama : « S'il vous plaît, ayez pitié de mon âme ! »...</p> +``` -<p>C'est vous qui décidez ce que représentent les éléments utilisés tant que la hiérarchie a du sens. Vous devez cependant garder à l'esprit quelques bonnes pratiques lorsque vous créez de telles structures :</p> +C'est vous qui décidez ce que représentent les éléments utilisés tant que la hiérarchie a du sens. Vous devez cependant garder à l'esprit quelques bonnes pratiques lorsque vous créez de telles structures : -<ul> - <li>Il est préférable de n'utiliser qu'un seul <code><h1></code> par page — c'est le niveau principal, et tous les autres devraient être de niveau inférieur.</li> - <li>Assurez-vous d'utiliser les balise de titre dans l'ordre correct et logique : <code><h1></code> puis <code><h2></code>, puis <code><h3></code> et ainsi de suite.</li> - <li>Bien qu'il y ait 6 niveaux de titre (de <code><h1></code> à <code><h6></code>), Il est déconseillé d'utiliser plus de trois niveaux dans une page. Les documents avec beaucoup de niveaux deviennent complexes et difficiles à parcourir. Dans ce cas, il est préférable de partager le contenu sur plusieurs pages.</li> -</ul> +- Il est préférable de n'utiliser qu'un seul `<h1>` par page — c'est le niveau principal, et tous les autres devraient être de niveau inférieur. +- Assurez-vous d'utiliser les balise de titre dans l'ordre correct et logique : `<h1>` puis `<h2>`, puis `<h3>` et ainsi de suite. +- Bien qu'il y ait 6 niveaux de titre (de `<h1>` à `<h6>`), Il est déconseillé d'utiliser plus de trois niveaux dans une page. Les documents avec beaucoup de niveaux deviennent complexes et difficiles à parcourir. Dans ce cas, il est préférable de partager le contenu sur plusieurs pages. -<h3 id="Pourquoi_faut-il_structurer_un_document">Pourquoi faut-il structurer un document ?</h3> +### Pourquoi faut-il structurer un document ? -<p>Pour répondre à cette question, regardons la page <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> — le point de départ de l'exemple que nous allons utiliser dans cet article (une recette). Enregistrez une copie de ce fichier sur votre ordinateur car vous en aurez besoin pour les exercices qui vont suivre. Le corps de ce document contient plusieurs parties sans aucune balise ; elles sont seulement séparées par des retours chariots (obtenus en pressant la touche <kbd>Entrée</kbd> ou <kbd>⏎</kbd>)</p> +Pour répondre à cette question, regardons la page [text-start.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html) — le point de départ de l'exemple que nous allons utiliser dans cet article (une recette). Enregistrez une copie de ce fichier sur votre ordinateur car vous en aurez besoin pour les exercices qui vont suivre. Le corps de ce document contient plusieurs parties sans aucune balise ; elles sont seulement séparées par des retours chariots (obtenus en pressant la touche <kbd>Entrée</kbd> ou <kbd>⏎</kbd>) -<p>Cependant, si l'on ouvre ce document dans un navigateur, il sera affiché sous forme d'un gros bloc de texte !</p> +Cependant, si l'on ouvre ce document dans un navigateur, il sera affiché sous forme d'un gros bloc de texte ! -<p><img alt="Une page Web qui montre un mur de texte non formaté, parce qu'il n'y a pas d'éléments sur la page pour la structurer." src="recette.png"></p> + -<p>Ceci est dû au fait qu'il n'y a aucun élément indiquant la structure du contenu, et donc le navigateur ne sait pas différencier ce qui est un titre d'un paragraphe. De plus :</p> +Ceci est dû au fait qu'il n'y a aucun élément indiquant la structure du contenu, et donc le navigateur ne sait pas différencier ce qui est un titre d'un paragraphe. De plus : -<ul> - <li>Les visiteurs d'une page web la parcourent pour trouver le contenu pertinent. Par conséquent, ils ne lisentsouvent que les titres (généralement <a href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">nous ne passons que très peu de temps sur une page web</a>). S'ils ne trouvent pas le contenu souhaité en quelques secondes, ils seront probablement déçus et chercheront l'information souhaitée ailleurs.</li> - <li>Les moteurs de recherche, lorsqu'ils indexent votre page, prennent en considération les titres en tant que mots‑clés ce qui influe sur le classement de la page lors d'une recherche. Sans titre, une page aura un faible référencement (voir {{glossary("SEO")}} (Search Engine Optimization).</li> - <li>Les personnes malvoyantes ne pouvant lire votre page peuvent utiliser des <a href="https://fr.wikipedia.org/wiki/Lecteur_d%27%C3%A9cran">lecteurs d'écran</a>. Ces logiciels permettent d'accéder rapidement à une partie du texte. Pour cela, ils lisent les titres de votre document aux utilisateurs, leur permettant ainsi de trouver rapidement l'information dont ils ont besoin. Si les titres ne sont pas disponibles, les lecteurs d'écran lisent tout le document, le rendant peu accessible aux personnes avec un handicap visuel.</li> - <li>Pour composer un style de contenu avec le {{glossary("CSS")}} ou réaliser des choses intéressantes avec le {{glossary("JavaScript")}}, vous devez avoir des éléments enveloppant les contenus pertinents, ce qui permet ensuite de les cibler avec CSS/JavaScript.</li> -</ul> +- Les visiteurs d'une page web la parcourent pour trouver le contenu pertinent. Par conséquent, ils ne lisentsouvent que les titres (généralement [nous ne passons que très peu de temps sur une page web](http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/)). S'ils ne trouvent pas le contenu souhaité en quelques secondes, ils seront probablement déçus et chercheront l'information souhaitée ailleurs. +- Les moteurs de recherche, lorsqu'ils indexent votre page, prennent en considération les titres en tant que mots‑clés ce qui influe sur le classement de la page lors d'une recherche. Sans titre, une page aura un faible référencement (voir {{glossary("SEO")}} (Search Engine Optimization). +- Les personnes malvoyantes ne pouvant lire votre page peuvent utiliser des [lecteurs d'écran](https://fr.wikipedia.org/wiki/Lecteur_d%27%C3%A9cran). Ces logiciels permettent d'accéder rapidement à une partie du texte. Pour cela, ils lisent les titres de votre document aux utilisateurs, leur permettant ainsi de trouver rapidement l'information dont ils ont besoin. Si les titres ne sont pas disponibles, les lecteurs d'écran lisent tout le document, le rendant peu accessible aux personnes avec un handicap visuel. +- Pour composer un style de contenu avec le {{glossary("CSS")}} ou réaliser des choses intéressantes avec le {{glossary("JavaScript")}}, vous devez avoir des éléments enveloppant les contenus pertinents, ce qui permet ensuite de les cibler avec CSS/JavaScript. -<p>Il est donc nécessaire d'ajouter des balises de structuration du contenu.</p> +Il est donc nécessaire d'ajouter des balises de structuration du contenu. -<h3 id="Apprentissage_actif_structurer_le_contenu">Apprentissage actif : structurer le contenu</h3> +### Apprentissage actif : structurer le contenu -<p>Dans l'exemple ci-dessous, ajoutez des balises dans le texte de la zone Code modifiable afin qu'il fasse apparaître un titre et deux paragraphes dans le champ <em>Sortie directe</em>.</p> +Dans l'exemple ci-dessous, ajoutez des balises dans le texte de la zone Code modifiable afin qu'il fasse apparaître un titre et deux paragraphes dans le champ _Sortie directe_. -<p>Si vous faites une erreur, vous pouvez recommencer en appuyant sur le bouton <em>Réinitialiser</em>. Si vous êtes bloqués, appuyez sur le bouton <em>Voir la solution</em> pour afficher la réponse.</p> +Si vous faites une erreur, vous pouvez recommencer en appuyant sur le bouton _Réinitialiser_. Si vous êtes bloqués, appuyez sur le bouton _Voir la solution_ pour afficher la réponse. -<pre class="brush: html hidden"><h2>Sortie directe</h2> +```html hidden +<h2>Sortie directe</h2> -<div class="output" style="min-height: 50px;"> -</div> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).</p> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).</p> -<textarea id="code" class="input" style="min-height: 100px; width: 95%">Ma courte histoire : je suis une policière et mon nom est Trish. +<textarea id="code" class="input" style="min-height: 100px; width: 95%">Ma courte histoire : je suis une policière et mon nom est Trish. -Mes jambes sont en carton et je suis mariée à un poisson.</textarea> +Mes jambes sont en carton et je suis mariée à un poisson.</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Voir la solution"> -</div></pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -144,9 +157,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -176,7 +191,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<h1>Ma courte histoire</h1>\n<p>Je suis une policière et mon nom est Trish.</p>\n<p>Mes jambes sont en carton et je suis mariée à un poisson.</p>'; +var htmlSolution = '<h1>Ma courte histoire</h1>\n<p>Je suis une policière et mon nom est Trish.</p>\n<p>Mes jambes sont en carton et je suis mariée à un poisson.</p>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -223,80 +238,92 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> +}; +``` -<p>{{ EmbedLiveSample('Apprentissage_actif_structurer_le_contenu', 700, 370) }}</p> +{{ EmbedLiveSample('Apprentissage_actif_structurer_le_contenu', 700, 370) }} -<h3 id="Pourquoi_a-t-on_besoin_de_sémantique">Pourquoi a-t-on besoin de sémantique ?</h3> +### Pourquoi a-t-on besoin de sémantique ? -<p>La sémantique est utilisée partout autour de nous — on se fie à nos précédentes experiences pour savoir à quoi servent les objets du quotidien; quand on voit quelque chose, on sait à quoi cela sert. Par exemple, on s'attend à ce qu'un feu rouge de signalisation signifie « Stop » et qu'un feu vert signifie « Avancez ». Les choses peuvent vite devenir plus compliquées si de mauvaises sémantiques sont appliquées (existe-t-il un pays dans lequel un feu rouge signifie que l'on peut passer ? Je ne l'espère pas.)</p> +La sémantique est utilisée partout autour de nous — on se fie à nos précédentes experiences pour savoir à quoi servent les objets du quotidien; quand on voit quelque chose, on sait à quoi cela sert. Par exemple, on s'attend à ce qu'un feu rouge de signalisation signifie « Stop » et qu'un feu vert signifie « Avancez ». Les choses peuvent vite devenir plus compliquées si de mauvaises sémantiques sont appliquées (existe-t-il un pays dans lequel un feu rouge signifie que l'on peut passer ? Je ne l'espère pas.) -<p>Dans la même optique, il faut s'assurer que l'on utilise les bons élements et que l'on donne la bonne signification, la bonne fonction et la bonne apparence à notre contenu. Dans ce contexte, l'élément {{htmlelement("h1")}} est aussi un élement sémantique. Il donne au texte auquel il s'applique la fonction (ou la signification) de « titre principal de la page ».</p> +Dans la même optique, il faut s'assurer que l'on utilise les bons élements et que l'on donne la bonne signification, la bonne fonction et la bonne apparence à notre contenu. Dans ce contexte, l'élément {{htmlelement("h1")}} est aussi un élement sémantique. Il donne au texte auquel il s'applique la fonction (ou la signification) de « titre principal de la page ». -<pre class="brush: html"><h1>Ceci est un titre principal</h1></pre> +```html +<h1>Ceci est un titre principal</h1> +``` -<p>Par défaut, le navigateur l'affiche avec une police de caractères de grande taille pour qu'il ait l'apparence d'un titre (même si vous pourriez lui donner l'apparence de n'importe quel élément avec le CSS). Plus important encore, sa valeur sémantique est utilisée de différentes manières, notamment par les moteurs de recherche ou les lecteurs d'écran (comme expliqué plus haut).</p> +Par défaut, le navigateur l'affiche avec une police de caractères de grande taille pour qu'il ait l'apparence d'un titre (même si vous pourriez lui donner l'apparence de n'importe quel élément avec le CSS). Plus important encore, sa valeur sémantique est utilisée de différentes manières, notamment par les moteurs de recherche ou les lecteurs d'écran (comme expliqué plus haut). -<p>D'autre part, vous pouvez faire ressembler n'importe quel élément à un titre principal. Par exemple :</p> +D'autre part, vous pouvez faire ressembler n'importe quel élément à un titre principal. Par exemple : -<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0;">Est-ce un titre principal?</span></pre> +```html +<span style="font-size: 32px; margin: 21px 0;">Est-ce un titre principal?</span> +``` -<p>C'est un élément {{htmlelement("span")}}. Il n'a pas de valeur sémantique. Il s'utilise autour d'un contenu auquel vous souhaitez appliquer un style CSS (ou le modifier avec du JavaScript) sans lui donner une signification supplémentaire (vous en apprendrez plus à ce propos plus loin dans ce cours). Nous lui avons appliqué du CSS pour qu'il ressemble à un titre principal, mais comme il n'a pas de valeur sémantique, il ne bénéficie d'aucune des valeurs sémantiques décrites plus haut. Il est conseillé d'utiliser des éléments HTML adaptés à leur rôle.</p> +C'est un élément {{htmlelement("span")}}. Il n'a pas de valeur sémantique. Il s'utilise autour d'un contenu auquel vous souhaitez appliquer un style CSS (ou le modifier avec du JavaScript) sans lui donner une signification supplémentaire (vous en apprendrez plus à ce propos plus loin dans ce cours). Nous lui avons appliqué du CSS pour qu'il ressemble à un titre principal, mais comme il n'a pas de valeur sémantique, il ne bénéficie d'aucune des valeurs sémantiques décrites plus haut. Il est conseillé d'utiliser des éléments HTML adaptés à leur rôle. -<h2 id="Listes">Listes</h2> +## Listes -<p>Intéressons-nous maintenant aux listes. Il y a des listes partout dans la vie — de la liste de courses à la liste de directions que vous suivez inconsciemment pour rentrer chez vous tous les jours, sans oublier la liste des instructions que vous suivez dans ce tutoriel ! Les listes sont aussi très répandues sur le Web, nous allons nous intéresser aux trois différents types de liste.</p> +Intéressons-nous maintenant aux listes. Il y a des listes partout dans la vie — de la liste de courses à la liste de directions que vous suivez inconsciemment pour rentrer chez vous tous les jours, sans oublier la liste des instructions que vous suivez dans ce tutoriel ! Les listes sont aussi très répandues sur le Web, nous allons nous intéresser aux trois différents types de liste. -<h3 id="Listes_non-ordonnées">Listes non-ordonnées</h3> +### Listes non-ordonnées -<p>Les listes non-ordonnées sont utilisées pour représenter des listes d'éléments pour lesquelles l'ordre n'a pas d'importance. Prenons par exemple une liste de courses :</p> +Les listes non-ordonnées sont utilisées pour représenter des listes d'éléments pour lesquelles l'ordre n'a pas d'importance. Prenons par exemple une liste de courses : -<pre>lait -œufs -pain -houmous</pre> + lait + œufs + pain + houmous -<p>Les listes non-ordonnées débutent par un élément {{htmlelement("ul")}} (<em><strong>u</strong>norderd <strong>l</strong>ist</em>) qui enveloppe tous les éléments de la liste:</p> +Les listes non-ordonnées débutent par un élément {{htmlelement("ul")}} (**\*u**norderd **l**ist\*) qui enveloppe tous les éléments de la liste: -<pre class="brush: html"><ul> +```html +<ul> lait œufs pain houmous -</ul></pre> +</ul> +``` -<p>Chaque item est contenu dans un élément {{htmlelement("li")}} (<em><strong>l</strong>ist <strong>i</strong>tem</em>):</p> +Chaque item est contenu dans un élément {{htmlelement("li")}} (**\*l**ist **i**tem\*): -<pre class="brush: html"><ul> - <li>lait</li> - <li>œufs</li> - <li>pain</li> - <li>houmous</li> -</ul></pre> +```html +<ul> + <li>lait</li> + <li>œufs</li> + <li>pain</li> + <li>houmous</li> +</ul> +``` -<h4 id="Apprentissage_actif_mettre_des_balises_à_une_liste_non-ordonnée">Apprentissage actif : mettre des balises à une liste non-ordonnée</h4> +#### Apprentissage actif : mettre des balises à une liste non-ordonnée -<p>Modifiez l'exemple ci-dessous pour créer votre propre liste HTML non-ordonnée.</p> +Modifiez l'exemple ci-dessous pour créer votre propre liste HTML non-ordonnée. -<pre class="brush: html hidden"><h2>Live output</h2> +```html hidden +<h2>Live output</h2> -<div class="output" style="min-height: 50px;"> -</div> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).</p> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).</p> -<textarea id="code" class="input" style="min-height: 100px; width: 95%">lait +<textarea id="code" class="input" style="min-height: 100px; width: 95%">lait œufs pain -houmous</textarea> +houmous</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Voir la solution"> -</div></pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -314,9 +341,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -346,7 +375,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<ul>\n<li>lait</li>\n<li>œufs</li>\n<li>pain</li>\n<li>houmous</li>\n</ul>'; +var htmlSolution = '<ul>\n<li>lait</li>\n<li>œufs</li>\n<li>pain</li>\n<li>houmous</li>\n</ul>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -393,54 +422,60 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> +}; +``` -<p>{{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_à_une_liste_non-ordonnée', 700, 400) }}</p> +{{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_à_une_liste_non-ordonnée', 700, 400) }} -<h3 id="Listes_ordonnées">Listes ordonnées</h3> +### Listes ordonnées -<p>Les listes ordonnées permettent de représenter des listes dans lesquelles l'ordre des éléments a de l'importance — prenons par exemple une série de directions à suivre:</p> +Les listes ordonnées permettent de représenter des listes dans lesquelles l'ordre des éléments a de l'importance — prenons par exemple une série de directions à suivre: -<pre>Roulez jusqu'au bout de la route -Tournez à droite -Allez tout droit aux deux premiers ronds-points -Tournez à gauche au troisième rond-point -Roulez sur 300 mètres, l'école est sur votre droite</pre> + Roulez jusqu'au bout de la route + Tournez à droite + Allez tout droit aux deux premiers ronds-points + Tournez à gauche au troisième rond-point + Roulez sur 300 mètres, l'école est sur votre droite -<p>Les balises suivent la même structure que pour les listes ordonnées, à cela près que la liste est contenue dans l'élément {{htmlelement("ol")}} (<em><strong>o</strong>rdered <strong>l</strong>ist</em>), et non dans <code><ul></code>:</p> +Les balises suivent la même structure que pour les listes ordonnées, à cela près que la liste est contenue dans l'élément {{htmlelement("ol")}} (**\*o**rdered **l**ist\*), et non dans `<ul>`: -<pre class="brush: html"><ol> - <li>Roulez jusqu'au bout de la route</li> - <li>Tournez à droite</li> - <li>Allez tout droit aux deux premiers ronds-points</li> - <li>Tournez à gauche au troisième rond-point</li> - <li>Roulez sur 300 mètres, l'école est sur votre droite</li> -</ol></pre> +```html +<ol> + <li>Roulez jusqu'au bout de la route</li> + <li>Tournez à droite</li> + <li>Allez tout droit aux deux premiers ronds-points</li> + <li>Tournez à gauche au troisième rond-point</li> + <li>Roulez sur 300 mètres, l'école est sur votre droite</li> +</ol> +``` -<h4 id="Apprentissage_actif_baliser_une_liste_ordonnée">Apprentissage actif : baliser une liste ordonnée</h4> +#### Apprentissage actif : baliser une liste ordonnée -<p>Modifiez l'exemple ci‑dessous pour créer votre propre liste HTML ordonnée.</p> +Modifiez l'exemple ci‑dessous pour créer votre propre liste HTML ordonnée. -<pre class="brush: html hidden"><h2>Sortie directe</h2> +```html hidden +<h2>Sortie directe</h2> -<div class="output" style="min-height: 50px;"> -</div> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).</p> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insère une tabulation).</p> -<textarea id="code" class="input" style="min-height: 200px; width: 95%">Roulez jusqu'au bout de la route +<textarea id="code" class="input" style="min-height: 200px; width: 95%">Roulez jusqu'au bout de la route Tournez à droite Allez tout droit aux deux premiers rond-points Tournez à gauche au troisième rond-point -Roulez sur 300 mètres, l'école est sur votre droite</textarea> +Roulez sur 300 mètres, l'école est sur votre droite</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Voir la solution"> -</div></pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -458,9 +493,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -490,7 +527,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<ol>\n<li>Roulez jusqu\'au bout de la route</li>\n<li>Tournez à droite</li>\n<li>Allez tout droit aux deux premiers rond-points</li>\n<li>Tournez à gauche au troisième rond-point</li>\n<li>Roulez sur 300 mètres, l\'école est sur votre droite</li>\n</ol>'; +var htmlSolution = '<ol>\n<li>Roulez jusqu\'au bout de la route</li>\n<li>Tournez à droite</li>\n<li>Allez tout droit aux deux premiers rond-points</li>\n<li>Tournez à gauche au troisième rond-point</li>\n<li>Roulez sur 300 mètres, l\'école est sur votre droite</li>\n</ol>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -537,23 +574,25 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> +}; +``` -<p>{{ EmbedLiveSample('Apprentissage_actif_baliser_une_liste_ordonnée', 700, 500) }}</p> +{{ EmbedLiveSample('Apprentissage_actif_baliser_une_liste_ordonnée', 700, 500) }} -<h3 id="Apprentissage_actif_mettre_des_balises_pour_une_recette_de_cuisine">Apprentissage actif : mettre des balises pour une recette de cuisine</h3> +### Apprentissage actif : mettre des balises pour une recette de cuisine -<p>Si vous êtes arrivé jusqu'ici dans l'article, vous avez toutes les connaissances nécessaires pour mettre en forme la recette de cuisine donnée en exemple. Vous pouvez soit télécharger le fichier <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> et le modifier de votre côté, soit faire l'exercice dans l'exemple modifiable ci-dessous. Il est conseillé de le modifier localement, sur votre machine, car vous pourrez alors enregistrer votre travail. Si vous utilisez l'exemple modifiable de cette page, le travail sera perdu à l'ouverture suivante de la page. Chaque méthode a ses avantages et ses inconvénients.</p> +Si vous êtes arrivé jusqu'ici dans l'article, vous avez toutes les connaissances nécessaires pour mettre en forme la recette de cuisine donnée en exemple. Vous pouvez soit télécharger le fichier [text-start.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html) et le modifier de votre côté, soit faire l'exercice dans l'exemple modifiable ci-dessous. Il est conseillé de le modifier localement, sur votre machine, car vous pourrez alors enregistrer votre travail. Si vous utilisez l'exemple modifiable de cette page, le travail sera perdu à l'ouverture suivante de la page. Chaque méthode a ses avantages et ses inconvénients. -<pre class="brush: html hidden"><h2>Sortie directe</h2> +```html hidden +<h2>Sortie directe</h2> -<div class="output" style="min-height: 50px;"> -</div> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insére une tabulation).</p> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insére une tabulation).</p> -<textarea id="code" class="input" style="min-height: 200px; width: 95%">Recette rapide de l'houmous +<textarea id="code" class="input" style="min-height: 200px; width: 95%">Recette rapide de l'houmous Cette recette permet d'obtenir rapidement un houmous savoureux, sans complications. C'est une adaptation de plusieurs recettes différentes que j'ai essayées au fil des ans. @@ -581,14 +620,16 @@ textarea.onkeyup = function(){ Mettez l'houmous fini au réfrigérateur dans un récipient fermé. Vous le garderez ainsi pendant environ une semaine. S'il se met à fermenter, jettez‑le sans hésiter. - L'houmous peut être congelé ; consommez‑le dans les deux mois qui suivent sa congélation.</textarea> + L'houmous peut être congelé ; consommez‑le dans les deux mois qui suivent sa congélation.</textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Voir la solution"> -</div></pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -606,9 +647,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -638,7 +681,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<h1>Recette rapide de l\'houmous</h1>\n\n<p>Cette recette permet d\'obtenir rapidement un houmous savoureux, sans complications. C\'est une adaptation de plusieurs recettes différentes que j\'ai essayées au fil des ans.</p>\n\n<p>L\'houmous est une délicieuse pâte épaisse utilisée dans les plats en Grèce et au moyen-orient. Il s\'accorde très bien avec la salade, les viandes grillées et du pain calabrais.</p>\n\n<h2>Ingrédients</h2>\n\n<ul>\n<li>1 boîte (400 g) de pois chiches (garbanzos)</li>\n<li>175g de crème de sésame</li>\n<li>6 tomates séchées</li>\n<li>un demi poivron rouge</li>\n<li>une pincée de piment de Cayenne</li>\n<li>1 gousse d\'ail</li>\n<li>un trait d\'huile d\'olive</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Ôter la peau de l\'ail et le hacher grossièrement.</li>\n<li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li>\n<li>Mettre tous les ingrédients dans un robot mixer jusqu\'à l\'obtention d\'une pâte.</li>\n<li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li>\n<li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li>\n</ol>\n\n<p>Pour des saveurs différentes, vous pouvez essayer d\'y mettre un peu de jus de citron et de coriandre, du tabasco, de la limette et du chipotle, de la harissa et de la menthe ou des épinards et de la feta. Essayez et voyez ce qui vous va.</p>\n\n<h2>Conservation</h2>\n\n<p>Mettez l\'houmous fini au réfrigérateur dans un récipient fermé. Vous le garderez ainsi pendant environ une semaine. S\'il se met à fermenter, jettez‑le sans hésiter.</p>\n\n<p>L\'houmous peut être congelé ; consommez‑le dans les deux mois qui suivent sa congélation.</p>'; +var htmlSolution = '<h1>Recette rapide de l\'houmous</h1>\n\n<p>Cette recette permet d\'obtenir rapidement un houmous savoureux, sans complications. C\'est une adaptation de plusieurs recettes différentes que j\'ai essayées au fil des ans.</p>\n\n<p>L\'houmous est une délicieuse pâte épaisse utilisée dans les plats en Grèce et au moyen-orient. Il s\'accorde très bien avec la salade, les viandes grillées et du pain calabrais.</p>\n\n<h2>Ingrédients</h2>\n\n<ul>\n<li>1 boîte (400 g) de pois chiches (garbanzos)</li>\n<li>175g de crème de sésame</li>\n<li>6 tomates séchées</li>\n<li>un demi poivron rouge</li>\n<li>une pincée de piment de Cayenne</li>\n<li>1 gousse d\'ail</li>\n<li>un trait d\'huile d\'olive</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Ôter la peau de l\'ail et le hacher grossièrement.</li>\n<li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li>\n<li>Mettre tous les ingrédients dans un robot mixer jusqu\'à l\'obtention d\'une pâte.</li>\n<li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li>\n<li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li>\n</ol>\n\n<p>Pour des saveurs différentes, vous pouvez essayer d\'y mettre un peu de jus de citron et de coriandre, du tabasco, de la limette et du chipotle, de la harissa et de la menthe ou des épinards et de la feta. Essayez et voyez ce qui vous va.</p>\n\n<h2>Conservation</h2>\n\n<p>Mettez l\'houmous fini au réfrigérateur dans un récipient fermé. Vous le garderez ainsi pendant environ une semaine. S\'il se met à fermenter, jettez‑le sans hésiter.</p>\n\n<p>L\'houmous peut être congelé ; consommez‑le dans les deux mois qui suivent sa congélation.</p>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -685,105 +728,117 @@ function insertAtCaret(text) { } updateCode(); -};</pre> +}; +``` -<p>{{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_pour_une_recette_de_cuisine', 700, 500) }}</p> +{{ EmbedLiveSample('Apprentissage_actif_mettre_des_balises_pour_une_recette_de_cuisine', 700, 500) }} -<p>Si vous êtes bloqué, vous pouvez cliquer sur le bouton <em>Voir la solution</em>, ou alors regarder l'exemple <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> sur le dépôt GitHub.</p> +Si vous êtes bloqué, vous pouvez cliquer sur le bouton _Voir la solution_, ou alors regarder l'exemple [text-complete.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html) sur le dépôt GitHub. -<h3 id="Imbriquer_des_listes">Imbriquer des listes</h3> +### Imbriquer des listes -<p>Il est parfaitement possible d'imbriquer une liste dans une autre. Il se peut que vous vouliez insérer une liste à puces derrière une même puce de niveau supérieur. Prenons par exemple la deuxième liste de la recette :</p> +Il est parfaitement possible d'imbriquer une liste dans une autre. Il se peut que vous vouliez insérer une liste à puces derrière une même puce de niveau supérieur. Prenons par exemple la deuxième liste de la recette : -<pre class="brush: html"><ol> - <li>Ôter la peau de l'ail et le hacher grossièrement.</li> - <li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li> - <li>Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte.</li> - <li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li> - <li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li> -</ol> -</pre> +```html +<ol> + <li>Ôter la peau de l'ail et le hacher grossièrement.</li> + <li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li> + <li>Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte.</li> + <li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li> + <li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li> +</ol> +``` -<p>Comme les deux dernières puces de la liste sont très liées à celle qui les précède (elles semblent être des sous-instructions ou des choix correspondant à cette puce), il peut être judicieux de les regrouper dans une même liste non-ordonnée, et placer cette liste dans le quatrième item. Cela ressemblerait alors à ceci :</p> +Comme les deux dernières puces de la liste sont très liées à celle qui les précède (elles semblent être des sous-instructions ou des choix correspondant à cette puce), il peut être judicieux de les regrouper dans une même liste non-ordonnée, et placer cette liste dans le quatrième item. Cela ressemblerait alors à ceci : -<pre class="brush: html"><ol> - <li>Ôter la peau de l'ail et le hacher grossièrement.</li> - <li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li> - <li>Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte. - <ul> - <li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li> - <li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li> - </ul> - </li> -</ol> -</pre> +```html +<ol> + <li>Ôter la peau de l'ail et le hacher grossièrement.</li> + <li>Enlever les graines et la tige du poivron, le hacher grossièrement.</li> + <li>Mettre tous les ingrédients dans un robot mixer jusqu'à l'obtention d'une pâte. + <ul> + <li>Si vous voulez un houmous grenu, ne le mixez pas trop longtemps.</li> + <li>Si vous voulez un houmous lisse, mixez-le plus longtemps.</li> + </ul> + </li> +</ol> +``` -<p>N'hésitez pas à revenir au dernier apprentissage actif pour modifier vous même la liste correspondante dans la recette.</p> +N'hésitez pas à revenir au dernier apprentissage actif pour modifier vous même la liste correspondante dans la recette. -<h2 id="Soulignement_et_importance">Soulignement et importance</h2> +## Soulignement et importance -<p>Dans le langage, nous mettons souvent l'accent sur certains mots pour modifier le sens d'une phrase et pour marquer certains mots comme étant importants ou différents d'une manière ou d'une autre. HTML fournit divers éléments de sémantique pour nous permettre de marquer un contenu textuel avec de tels effets. Dans cette section, nous examinerons quelques-uns des plus courants.</p> +Dans le langage, nous mettons souvent l'accent sur certains mots pour modifier le sens d'une phrase et pour marquer certains mots comme étant importants ou différents d'une manière ou d'une autre. HTML fournit divers éléments de sémantique pour nous permettre de marquer un contenu textuel avec de tels effets. Dans cette section, nous examinerons quelques-uns des plus courants. -<h3 id="Emphase">Emphase</h3> +### Emphase -<p>Dans le langage parlé, pour accentuer, nous insistons sur certains mots, modifiant subtilement le sens de ce que nous disons. De même, dans le langage écrit, nous avons tendance à mettre un certain accent sur des mots en les écrivant en italique. Par exemple, les deux phrases suivantes ont des significations différentes.</p> +Dans le langage parlé, pour accentuer, nous insistons sur certains mots, modifiant subtilement le sens de ce que nous disons. De même, dans le langage écrit, nous avons tendance à mettre un certain accent sur des mots en les écrivant en italique. Par exemple, les deux phrases suivantes ont des significations différentes. -<p>« Je suis content que vous n'ayez pas été en retard. »</p> +« Je suis content que vous n'ayez pas été en retard. » -<p>« Je suis <em>content</em> que vous n'ayez pas été <em>en retard</em>. »</p> +« Je suis _content_ que vous n'ayez pas été _en retard_. » -<p>La première phrase semble indiquer que le locuteur est vraiment soulagé que la personne n'aie pas été en retard. En revanche, la seconde a une tonalité sarcastique ou passive-agressive, exprimant la gêne que la personne soit arrivée un peu en retard.</p> +La première phrase semble indiquer que le locuteur est vraiment soulagé que la personne n'aie pas été en retard. En revanche, la seconde a une tonalité sarcastique ou passive-agressive, exprimant la gêne que la personne soit arrivée un peu en retard. -<p>En HTML, nous utilisons l'élément {{htmlelement("em")}} (<strong>em</strong>phase) pour marquer ces circonstances. Outre rendre le document plus intéressant à lire, ces marqueurs sont reconnus par les lecteurs d'écran et exprimés sur un ton de voix différent. Les navigateurs utilisent l'italique par défaut, mais il ne faut pas utiliser cette balise pour mettre en italique. Pour cela, utilisez un élément {{htmlelement("span")}} et du CSS, ou plus simplement un élément {{htmlelement("i")}} (voir ci-dessous).</p> +En HTML, nous utilisons l'élément {{htmlelement("em")}} (**em**phase) pour marquer ces circonstances. Outre rendre le document plus intéressant à lire, ces marqueurs sont reconnus par les lecteurs d'écran et exprimés sur un ton de voix différent. Les navigateurs utilisent l'italique par défaut, mais il ne faut pas utiliser cette balise pour mettre en italique. Pour cela, utilisez un élément {{htmlelement("span")}} et du CSS, ou plus simplement un élément {{htmlelement("i")}} (voir ci-dessous). -<pre class="brush: html"><p>Je suis <em>content</em> que vous n'ayez pas été <em>en retard</em>.</p></pre> +```html +<p>Je suis <em>content</em> que vous n'ayez pas été <em>en retard</em>.</p> +``` -<h3 id="Grande_importance">Grande importance</h3> +### Grande importance -<p>Pour mettre l'accent sur des mots très importants, nous les soulignons d'un ton particulier dans la langue parlée et nous les mettons en caractères gras dans la langue écrite. Par exemple :</p> +Pour mettre l'accent sur des mots très importants, nous les soulignons d'un ton particulier dans la langue parlée et nous les mettons en caractères gras dans la langue écrite. Par exemple : -<p>Ce liquide est <strong>hautement toxique</strong>.</p> +Ce liquide est **hautement toxique**. -<p>Je compte sur vous. <strong>Ne soyez pas en retard</strong> !</p> +Je compte sur vous. **Ne soyez pas en retard** ! -<p>En HTML, nous utilisons l'élément {{htmlelement("strong")}} (forte importance) comme balise de telles circonstances. En plus de rendre le document plus lisible, ces balises sont reconnues par les lecteurs d'écran et énoncées avec des intonations différentes. Par défaut, les navigateurs mettent le texte marqué en gras, mais il ne faut pas utiliser cette balise pour mettre en gras. Pour cela, utilisez un élément {{htmlelement("span")}}} et du CSS, ou plus simplement un élément {{htmlelement("b")}} (voir ci-dessous).</p> +En HTML, nous utilisons l'élément {{htmlelement("strong")}} (forte importance) comme balise de telles circonstances. En plus de rendre le document plus lisible, ces balises sont reconnues par les lecteurs d'écran et énoncées avec des intonations différentes. Par défaut, les navigateurs mettent le texte marqué en gras, mais il ne faut pas utiliser cette balise pour mettre en gras. Pour cela, utilisez un élément {{htmlelement("span")}}} et du CSS, ou plus simplement un élément {{htmlelement("b")}} (voir ci-dessous). -<pre class="brush: html"><p>Ce liquide est <strong>hautement toxique</strong>.</p> +```html +<p>Ce liquide est <strong>hautement toxique</strong>.</p> -<p>Je compte sur vous. <strong>Ne soyez pas en retard</strong> !</p></pre> +<p>Je compte sur vous. <strong>Ne soyez pas en retard</strong> !</p> +``` -<p>Il est possible d'imbriquer <code>strong</code> et <code>em</code> :</p> +Il est possible d'imbriquer `strong` et `em` : -<pre class="brush: html"><p>Ce liquide est <strong>hautement toxique</strong> — -si vous en buvez, <strong>vous pourriez en <em>mourir</em></strong>.</p></pre> +```html +<p>Ce liquide est <strong>hautement toxique</strong> — +si vous en buvez, <strong>vous pourriez en <em>mourir</em></strong>.</p> +``` -<h3 id="Apprentissage_actif_soulignez_l'important">Apprentissage actif : soulignez l'important</h3> +### Apprentissage actif : soulignez l'important -<p>Dans ce paragraphe d'apprentissage actif, nous avons donné un exemple modifiable. À l'intérieur, nous aimerions que vous essayiez d'ajouter de l'emphase et de l'importance aux mots quand vous pensez qu'ils en ont besoin, juste pour une bonne pratique.</p> +Dans ce paragraphe d'apprentissage actif, nous avons donné un exemple modifiable. À l'intérieur, nous aimerions que vous essayiez d'ajouter de l'emphase et de l'importance aux mots quand vous pensez qu'ils en ont besoin, juste pour une bonne pratique. -<pre class="brush: html hidden"><h2>Live output</h2> +```html hidden +<h2>Live output</h2> -<div class="output" style="min-height: 50px;"> -</div> +<div class="output" style="min-height: 50px;"> +</div> -<h2>Code modifiable</h2> -<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insére une tabulation).</p> +<h2>Code modifiable</h2> +<p class="a11y-label">Pressez Esc pour sortir le focus de la zone de code (Tab insére une tabulation).</p> -<textarea id="code" class="input" style="min-height: 200px; width: 95%"><h1>Avis important</h1> -<p>Le dimanche 9 janvier 2010, une bande de barbares +<textarea id="code" class="input" style="min-height: 200px; width: 95%"><h1>Avis important</h1> +<p>Le dimanche 9 janvier 2010, une bande de barbares a été repérée en train de voler plusieurs nains de jardin dans un centre commercial du centre-ville de Milwaukee. Ils portaient tous des combinaisons vertes et des chapeaux ridicules, et semblaient s'amuser comme des fous. Si quelqu'un a une quelconque information - sur cet incident, veuillez contacter la police immédiatement.</p></textarea> + sur cet incident, veuillez contacter la police immédiatement.</p></textarea> -<div class="playable-buttons"> - <input id="reset" type="button" value="Réinitialiser"> - <input id="solution" type="button" value="Voir la solution"> -</div></pre> +<div class="playable-buttons"> + <input id="reset" type="button" value="Réinitialiser"> + <input id="solution" type="button" value="Voir la solution"> +</div> +``` -<pre class="brush: css hidden">html { +```css hidden +html { font-family: sans-serif; } @@ -801,10 +856,11 @@ h2 { body { margin: 10px; background: #f5f9fa; -}</pre> - +} +``` -<pre class="brush: js hidden">var textarea = document.getElementById('code'); +```js hidden +var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); var solution = document.getElementById('solution'); var output = document.querySelector('.output'); @@ -834,7 +890,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = "<h1>Avis important</h1>\n<p>Le <strong>dimanche 9 janvier 2010</strong>, une bande de <em>barbares</em> a été repérée en train de voler <strong><em>plusieurs</em> nains de jardin</strong> dans un centre commercial du centre-ville de <strong>Milwaukee</strong>. Ils portaient tous <em>des combinaisons vertes</em> et des <em>chapeaux ridicules</em> et semblaient s'amuser comme des fous. Si quelqu'un a une <strong>quelconque</strong> information sur cet incident, veuillez contacter la police <strong>immédiatement</strong>.</p>"; +var htmlSolution = "<h1>Avis important</h1>\n<p>Le <strong>dimanche 9 janvier 2010</strong>, une bande de <em>barbares</em> a été repérée en train de voler <strong><em>plusieurs</em> nains de jardin</strong> dans un centre commercial du centre-ville de <strong>Milwaukee</strong>. Ils portaient tous <em>des combinaisons vertes</em> et des <em>chapeaux ridicules</em> et semblaient s'amuser comme des fous. Si quelqu'un a une <strong>quelconque</strong> information sur cet incident, veuillez contacter la police <strong>immédiatement</strong>.</p>"; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -880,72 +936,69 @@ textarea.onkeyup = function(){ } updateCode(); -};</pre> +}; +``` -<p>{{ EmbedLiveSample("Apprentissage_actif_soulignez_l'important", 700, 500) }}</p> +{{ EmbedLiveSample("Apprentissage_actif_soulignez_l'important", 700, 500) }} -<h3 id="Italique_gras_soulignement…">Italique, gras, soulignement…</h3> +### Italique, gras, soulignement… -<p>Les éléments dont nous avons discuté jusqu'à présent ont une sémantique bien définie. La situation avec {{htmlelement("b")}}, {{htmlelement("i")}} et {{htmlelement("u")}} est un peu plus complexe. Ils sont apparus pour que les personnes puissent écrire du texte en gras, en italique ou souligné à une époque où le CSS était encore mal ou pas du tout pris en charge. De tels éléments, qui n'affectent que la présentation et non la sémantique, sont appelés <strong>éléments de présentation</strong> et ne devraient plus être utilisés, car comme nous l'avons vu précédemment, la sémantique a la plus grande importance pour l'accessibilité, le référencement, etc.</p> +Les éléments dont nous avons discuté jusqu'à présent ont une sémantique bien définie. La situation avec {{htmlelement("b")}}, {{htmlelement("i")}} et {{htmlelement("u")}} est un peu plus complexe. Ils sont apparus pour que les personnes puissent écrire du texte en gras, en italique ou souligné à une époque où le CSS était encore mal ou pas du tout pris en charge. De tels éléments, qui n'affectent que la présentation et non la sémantique, sont appelés **éléments de présentation** et ne devraient plus être utilisés, car comme nous l'avons vu précédemment, la sémantique a la plus grande importance pour l'accessibilité, le référencement, etc. -<p>HTML5 a redéfini <code><b></code>, <code><i></code> et <code><u></code> avec de nouveaux rôles sémantiques quelques peu déroutants.</p> +HTML5 a redéfini `<b>`, `<i>` et `<u>` avec de nouveaux rôles sémantiques quelques peu déroutants. -<p>Voici la meilleure règle d'or : il est probablement approprié d'utiliser <code><b></code>, <code><i></code>, ou <code><u></code> pour communiquer le sens traditionnellement associé aux caractères gras, italiques ou soulignés, à condition qu'il n'y ait pas d'élément plus approprié. Toutefois, il demeure toujours essentiel de garder présent à l'esprit le concept d'accessibilité. L'écriture en italique n'est pas très utile aux personnes utilisant des lecteurs d'écran ou un système d'écriture autre que l'alphabet latin.</p> +Voici la meilleure règle d'or : il est probablement approprié d'utiliser `<b>`, `<i>`, ou `<u>` pour communiquer le sens traditionnellement associé aux caractères gras, italiques ou soulignés, à condition qu'il n'y ait pas d'élément plus approprié. Toutefois, il demeure toujours essentiel de garder présent à l'esprit le concept d'accessibilité. L'écriture en italique n'est pas très utile aux personnes utilisant des lecteurs d'écran ou un système d'écriture autre que l'alphabet latin. -<ul> - <li>{{HTMLElement('i')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec l'italique : des mots étrangers, une désignation taxonomique, des termes techniques, une pensée…</li> - <li>{{HTMLElement('b')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec les caractères en gras : des mots‑clés, des noms de produits, une phrase liminaire…</li> - <li>{{HTMLElement('u')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec le soulignement : noms propres, mauvaise orthographe...</li> -</ul> +- {{HTMLElement('i')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec l'italique : des mots étrangers, une désignation taxonomique, des termes techniques, une pensée… +- {{HTMLElement('b')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec les caractères en gras : des mots‑clés, des noms de produits, une phrase liminaire… +- {{HTMLElement('u')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec le soulignement : noms propres, mauvaise orthographe... -<div class="note"> -<p><strong>Note :</strong> Un petit avertissement à propos du soulignement : <strong>les gens associent fortement soulignement et hyperliens</strong>. Par conséquent, sur le Web, il est préférable de ne souligner que les liens. N'utilisez l'élément <code><u></code> que s'il est sémantiquement approprié, mais envisagez d'utiliser les CSS pour remplacer le soulignement par défaut par quelque chose de plus approprié sur le Web. L'exemple ci-dessous illustre comment cela peut être fait.</p> -</div> +> **Note :** Un petit avertissement à propos du soulignement : **les gens associent fortement soulignement et hyperliens**. Par conséquent, sur le Web, il est préférable de ne souligner que les liens. N'utilisez l'élément `<u>` que s'il est sémantiquement approprié, mais envisagez d'utiliser les CSS pour remplacer le soulignement par défaut par quelque chose de plus approprié sur le Web. L'exemple ci-dessous illustre comment cela peut être fait. -<pre class="brush: html"><!-- noms scientifiques --> -<p> - Le colibri à gorge rouge (<i>Archilochus colubris</i>) +```html +<!-- noms scientifiques --> +<p> + Le colibri à gorge rouge (<i>Archilochus colubris</i>) est le colibri le plus courant dans l'ouest de l'Amérique du Nord. -</p> - -<!-- mots dans une langue étrangère --> -<p> - Le menu était un océan de mots exotiques comme <i lang="uk-latn">vatrushka</i>, - <i lang="id">nasi goreng</i> et <i lang="en">porridge</i>. -</p> - -<!-- une faute d'orthographe connue --> -<p> - Un jour, j'apprendrai comment mieux <u style="text-decoration-line: underline; text-decoration-style: wavy;">épeler</u>. -</p> - -<!-- Mettre en évidence les mots‑clés dans un ensemble d'instructions --> -<ol> - <li> - <b>Trancher</b> deux morceaux de pain dans la miche. - </li> - <li> - <b>Mettre</b> une rondelle de tomate et une feuille de laitue +</p> + +<!-- mots dans une langue étrangère --> +<p> + Le menu était un océan de mots exotiques comme <i lang="uk-latn">vatrushka</i>, + <i lang="id">nasi goreng</i> et <i lang="en">porridge</i>. +</p> + +<!-- une faute d'orthographe connue --> +<p> + Un jour, j'apprendrai comment mieux <u style="text-decoration-line: underline; text-decoration-style: wavy;">épeler</u>. +</p> + +<!-- Mettre en évidence les mots‑clés dans un ensemble d'instructions --> +<ol> + <li> + <b>Trancher</b> deux morceaux de pain dans la miche. + </li> + <li> + <b>Mettre</b> une rondelle de tomate et une feuille de laitue entre les deux tranches de pain. - </li> -</ol></pre> + </li> +</ol> +``` -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>C'est tout pour l'instant ! Cet article doit vous avoir donné une bonne idée de la façon de commencer à baliser le texte en HTML et présenté les éléments les plus importants dans ce domaine. Il existe énormément d'autres éléments sémantiques à connaître dans ce domaine ; nous en verrons beaucoup plus dans notre article « More Semantic Elements », plus loin dans ce cours. Dans le prochain article, nous examinerons en détail comment <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">créer des hyperliens</a>, qui est peut-être l'élément le plus important sur le Web.</p> +C'est tout pour l'instant ! Cet article doit vous avoir donné une bonne idée de la façon de commencer à baliser le texte en HTML et présenté les éléments les plus importants dans ce domaine. Il existe énormément d'autres éléments sémantiques à connaître dans ce domaine ; nous en verrons beaucoup plus dans notre article « More Semantic Elements », plus loin dans ce cours. Dans le prochain article, nous examinerons en détail comment [créer des hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks), qui est peut-être l'élément le plus important sur le Web. -<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> +{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Commencer avec le HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li> - <li>Fondamentaux du texte HTML</li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creation d'hyperliens</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formatage avancé du texte</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Faire une Lettre</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li> -</ul> +- [Commencer avec le HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started) +- [Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) +- Fondamentaux du texte HTML +- [Creation d'hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) +- [Formatage avancé du texte](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) +- [Structure de Site Web et de document](/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) +- [Déboguer de l'HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) +- [Faire une Lettre](/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter) +- [Structurer une page de contenu](/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content) diff --git a/files/fr/learn/html/introduction_to_html/index.md b/files/fr/learn/html/introduction_to_html/index.md index d4a5b51dbd..e8f5daa255 100644 --- a/files/fr/learn/html/introduction_to_html/index.md +++ b/files/fr/learn/html/introduction_to_html/index.md @@ -14,53 +14,45 @@ tags: translation_of: Learn/HTML/Introduction_to_HTML original_slug: Apprendre/HTML/Introduction_à_HTML --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}} -<p>Dans son cœur, {{glossary("HTML")}} est un langage vraiment simple, composé d'éléments appliquables à des fragments de texte dans un document pour leur donner un sens différent (est-ce un paragraphe ? est-ce une liste à puces ? est-ce une partie de tableau ?), pour structurer un document en sections logiques (a‑t‑il un en-tête ? est-il sur trois colonnes ? a-t-il un menu de navigation ?) et pour intégrer du contenu comme images ou vidéos dans une page. Ce module est une introduction aux deux premiers concepts ; il présente les notions fondamentales et la syntaxe à connaître pour comprendre le HTML.</p> +Dans son cœur, {{glossary("HTML")}} est un langage vraiment simple, composé d'éléments appliquables à des fragments de texte dans un document pour leur donner un sens différent (est-ce un paragraphe ? est-ce une liste à puces ? est-ce une partie de tableau ?), pour structurer un document en sections logiques (a‑t‑il un en-tête ? est-il sur trois colonnes ? a-t-il un menu de navigation ?) et pour intégrer du contenu comme images ou vidéos dans une page. Ce module est une introduction aux deux premiers concepts ; il présente les notions fondamentales et la syntaxe à connaître pour comprendre le HTML. -<h2 id="Prérequis">Prérequis</h2> +## Prérequis -<p>Il n'y a pas besoin de connaissances préalables en HTML pour parcourir ce module, mais vous devez au moins être familier des ordinateurs et d'une utilisation passive du Web (càd. juste le parcourir et consommer son contenu). Vous devriez avoir un environnement de travail en place tel que détaillé dans <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">cet article</a> et comprendre comment créer et gérer des fichiers tel qu'expliqué dans <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">cet autre article</a> — ces deux articles font partie du module <a href="/fr/docs/Learn/Getting_started_with_the_web">Démarrer avec le Web</a> qui s'adresse aux débutants.</p> +Il n'y a pas besoin de connaissances préalables en HTML pour parcourir ce module, mais vous devez au moins être familier des ordinateurs et d'une utilisation passive du Web (càd. juste le parcourir et consommer son contenu). Vous devriez avoir un environnement de travail en place tel que détaillé dans [cet article](/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software) et comprendre comment créer et gérer des fichiers tel qu'expliqué dans [cet autre article](/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files) — ces deux articles font partie du module [Démarrer avec le Web](/fr/docs/Learn/Getting_started_with_the_web) qui s'adresse aux débutants. -<div class="note"> -<p><strong>Note :</strong> Si vous travaillez sur un ordinateur, tablette ou autre appareil sur lequel il n'est pas posssible de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code grâce à des outils en ligne comme <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> +> **Note :** Si vous travaillez sur un ordinateur, tablette ou autre appareil sur lequel il n'est pas posssible de créer vos propres fichiers, vous pourrez essayer (la plupart) des exemples de code grâce à des outils en ligne comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). -<h2 id="Guides">Guides</h2> +## Guides -<p>Ce module contient les articles suivants vous permettant de parcourir toute la théorie des bases du HTML ; il vous donnera amplement l'occasion de tester vos compétences.</p> +Ce module contient les articles suivants vous permettant de parcourir toute la théorie des bases du HTML ; il vous donnera amplement l'occasion de tester vos compétences. -<dl> - <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Commencer avec le HTML</a></dt> - <dd>Cet article porte sur les fondements du HTML pour prendre un bon départ — nous définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour attiser votre intérêt.</dd> - <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></dt> - <dd><code>head</code> dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML grâce des CSS), des liens aux favicons et des méta-données (auteur du document, mots-clés décrivant le document, etc.).</dd> - <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Les concepts fondamentaux du HTML liés au texte</a></dt> - <dd>Un des rôles principaux du HTML est de donner un sens au texte (on dit aussi <strong>sémantiser</strong>), afin que le navigateur sache comment l'afficher correctement. Cet article montre comment utiliser le HTML pour fractionner un bloc de texte en une structure avec titres et paragraphes, ajouter des marques d'emphase ou d'importance à des mots, créer des listes, etc.</dd> - <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Créer des hyperliens</a></dt> - <dd>Les hyperliens sont vraiment importants — ce sont eux qui tissent la toile du Web. Cet article montre la syntaxe requise pour faire un lien et expose les meilleures pratiques concernant les liens.</dd> - <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">La mise en forme avancée du texte</a></dt> - <dd>Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article<a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals"> Les concepts fondamentaux du HTML liés au texte</a>. Les éléments abordés ici sont moins connus mais tout aussi utiles. Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc.</dd> - <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">La structure d'un document et d'un site web</a></dt> - <dd>De même que HTML est utilisé pour définir les diverses parties indépendantes d'une page (comme un « paragraphe » ou une « image »), HTML l'est pour définir des zones de votre site web (comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d'un site simple et l'écriture du HTML correspondant.</dd> - <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Déboguer du code HTML</a></dt> - <dd>Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider.</dd> -</dl> +- [Commencer avec le HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started) + - : Cet article porte sur les fondements du HTML pour prendre un bon départ — nous définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour attiser votre intérêt. +- [Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) + - : `head` dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML grâce des CSS), des liens aux favicons et des méta-données (auteur du document, mots-clés décrivant le document, etc.). +- [Les concepts fondamentaux du HTML liés au texte](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) + - : Un des rôles principaux du HTML est de donner un sens au texte (on dit aussi **sémantiser**), afin que le navigateur sache comment l'afficher correctement. Cet article montre comment utiliser le HTML pour fractionner un bloc de texte en une structure avec titres et paragraphes, ajouter des marques d'emphase ou d'importance à des mots, créer des listes, etc. +- [Créer des hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) + - : Les hyperliens sont vraiment importants — ce sont eux qui tissent la toile du Web. Cet article montre la syntaxe requise pour faire un lien et expose les meilleures pratiques concernant les liens. +- [La mise en forme avancée du texte](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) + - : Il y a de nombreux autres éléments HTML pour mettre en forme un texte qui n'ont pas été mentionnés dans l'article[ Les concepts fondamentaux du HTML liés au texte](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals). Les éléments abordés ici sont moins connus mais tout aussi utiles. Nous voyons ici comment marquer des citations, des listes de description, du code informatique et autres choses relatives au texte : indices et exposants, informations de contact, etc. +- [La structure d'un document et d'un site web](/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) + - : De même que HTML est utilisé pour définir les diverses parties indépendantes d'une page (comme un « paragraphe » ou une « image »), HTML l'est pour définir des zones de votre site web (comme l'« en‑tête », le « menu de navigation », le « contenu principal », etc.). Cet article détaille la structure d'un site simple et l'écriture du HTML correspondant. +- [Déboguer du code HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) + - : Écrire du code HTML, c'est bien, mais si quelque chose se passe mal, que faire pour trouver où est l'erreur dans le code ? Cet article vous indique divers outils pour vous aider. -<h2 id="Évaluations">Évaluations</h2> +## Évaluations -<p>Les exercices suivants vous permettront de tester votre compréhension des bases du HTML couvertes dans les guides ci‑dessus.</p> +Les exercices suivants vous permettront de tester votre compréhension des bases du HTML couvertes dans les guides ci‑dessus. -<dl> - <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Utiliser les bons éléments pour une lettre</a></dt> - <dd>Tôt ou tard, nous apprenons tous à écrire une lettre ; cet exemple est utile pour tester vos compétences en mise en forme de texte. L'exercice consiste à baliser une lettre.</dd> - <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Organiser la structure d'une page</a></dt> - <dd>Dans cette évaluation, vous devrez organiser la structure d'une page simple avec un en-tête, un pied de page, un menu de navigation, un contenu principal et une barre latérale.</dd> -</dl> +- [Utiliser les bons éléments pour une lettre](/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter) + - : Tôt ou tard, nous apprenons tous à écrire une lettre ; cet exemple est utile pour tester vos compétences en mise en forme de texte. L'exercice consiste à baliser une lettre. +- [Organiser la structure d'une page](/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content) + - : Dans cette évaluation, vous devrez organiser la structure d'une page simple avec un en-tête, un pied de page, un menu de navigation, un contenu principal et une barre latérale. -<h2 id="Voir_également">Voir également</h2> +## Voir également -<dl> - <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Web literacy basics 1</a></dt> - <dd>Un excellent cours de la fondation Mozilla qui évoque et teste un grand nombre de compétences évoquées dans le module « Introduction à HTML ». Les apprenants peuvent s'y familiariser avec la lecture, l'écriture et la participation au Web dans ce module en six parties. Découvrez les fondations du Web à travers la production et la collaboration.</dd> -</dl> +- [Web literacy basics 1](https://teach.mozilla.org/activities/web-lit-basics/) + - : Un excellent cours de la fondation Mozilla qui évoque et teste un grand nombre de compétences évoquées dans le module « Introduction à HTML ». Les apprenants peuvent s'y familiariser avec la lecture, l'écriture et la participation au Web dans ce module en six parties. Découvrez les fondations du Web à travers la production et la collaboration. diff --git a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md index faa34e068d..9e8ff0d14d 100644 --- a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md +++ b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md @@ -12,93 +12,103 @@ tags: translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter original_slug: Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_à_HTML")}} -<div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_à_HTML")}}</div> - -<p>Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exemple utile pour tester nos compétences en matière de mise en forme ! Dans cet exercice, vous devrez opérer le balisage d'une lettre en utilisant les fonctionnalités textes élémentaires et avancées, y compris les hyperliens, et en plus nous testerons vos connaissances avec certains contenus de <code><head></code> en HTML.</p> +Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exemple utile pour tester nos compétences en matière de mise en forme ! Dans cet exercice, vous devrez opérer le balisage d'une lettre en utilisant les fonctionnalités textes élémentaires et avancées, y compris les hyperliens, et en plus nous testerons vos connaissances avec certains contenus de `<head>` en HTML. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Avant de se lancer dans cet exercice, vous devez déja avoir travaillé <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Commencer avec le HTML, </a><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML, </a><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML, </a><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Création d'hyperliens</a> et <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formatage avancé du texte</a>.</td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Tester vos connaissances en balisage HTML simple et avancé de texte, d'hyperliens et de ce qu'il convient de mettre dans l'élément <head>.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Avant de se lancer dans cet exercice, vous devez déja avoir travaillé + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started" + >Commencer avec le HTML, </a + ><a + href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML" + >Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML, </a + ><a + href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals" + >Fondamentaux du texte HTML, </a + ><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks" + >Création d'hyperliens</a + > + et + <a + href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting" + >Formatage avancé du texte</a + >. + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Tester vos connaissances en balisage HTML simple et avancé de texte, + d'hyperliens et de ce qu'il convient de mettre dans l'élément + <head>. + </td> + </tr> + </tbody> </table> -<h2 id="Point_de_départ">Point de départ</h2> +## Point de départ -<p>Pour commencer cet exercice, vous devez récupérer le <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt">texte brut que vous allez baliser</a> et les CSS <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt">à inclure</a> dans l'HTML. Créez un nouveau fichier <code>.html</code> avec l'éditeur de texte dans lequel vous allez travailler (ou bien utilisez un site comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire l'exercice.)</p> +Pour commencer cet exercice, vous devez récupérer le [texte brut que vous allez baliser](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt) et les CSS [à inclure](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt) dans l'HTML. Créez un nouveau fichier `.html` avec l'éditeur de texte dans lequel vous allez travailler (ou bien utilisez un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire l'exercice.) -<h2 id="Projet_«_lettre_»">Projet « lettre »</h2> +## Projet « lettre » -<p>Pour ce projet, votre tâche consiste à baliser une lettre destinée à être hébergée dans l'intranet d'une université. La lettre est une réponse d'une chercheuse en poste à une doctorante éventuelle à propos de sa candidature pour travailler à l'université.</p> +Pour ce projet, votre tâche consiste à baliser une lettre destinée à être hébergée dans l'intranet d'une université. La lettre est une réponse d'une chercheuse en poste à une doctorante éventuelle à propos de sa candidature pour travailler à l'université. -<p>Sémantique de blocs/structures :</p> +Sémantique de blocs/structures : -<ul> - <li>Il convient que vous donniez à la totalité du document une structure appropriée comprenant le type de document et les éléments {{htmlelement("html")}}, {{htmlelement("head")}} et {{htmlelement("body")}}.</li> - <li>La lettre doit être marquée avec une structure de paragraphes et d'en‑têtes, en prenant en considération les points suivants : un en‑tête de haut niveau (la ligne « Re : ») et trois en-têtes de deuxième niveau.</li> - <li>Les dates de début des semestres, les sujets d'étude et les danses exotiques seront balisées avec les types de listes appropriés.</li> - <li>Mettez les deux adresses dans l'élement {{htmlelement("address")}}. En plus, chaque ligne des adresses doit être mise sur une nouvelle ligne sans que ce soit un nouveau paragraphe.</li> -</ul> +- Il convient que vous donniez à la totalité du document une structure appropriée comprenant le type de document et les éléments {{htmlelement("html")}}, {{htmlelement("head")}} et {{htmlelement("body")}}. +- La lettre doit être marquée avec une structure de paragraphes et d'en‑têtes, en prenant en considération les points suivants : un en‑tête de haut niveau (la ligne « Re : ») et trois en-têtes de deuxième niveau. +- Les dates de début des semestres, les sujets d'étude et les danses exotiques seront balisées avec les types de listes appropriés. +- Mettez les deux adresses dans l'élement {{htmlelement("address")}}. En plus, chaque ligne des adresses doit être mise sur une nouvelle ligne sans que ce soit un nouveau paragraphe. -<p>Sémantique en ligne :</p> +Sémantique en ligne : -<ul> - <li>Les noms de l'expéditeur et du destinataire (et « Tél » et « e‑mail ») doivent être marqués comme étant de grande importance.</li> - <li>Les quatre dates du document doivent être indiquées dans des éléments appropriés contenant des dates lisibles par la machine.</li> - <li>La première adresse et la première date de la lettre doivent recevoir une valeur d'attribut de classe « sender-column » ; le CSS que vous ajouterez plus tard les alignera à droite, comme c'est le cas dans une mise en page de lettre classique.</li> - <li>Les cinq acronymes/abréviations dans le corps du texte de la lettre seront marqués pour permettre leur développement.</li> - <li>Les six indices/exposants seront balisés de manière appropriée.</li> - <li>Les symboles « degré », « plus grand que » , « multiplier » seront marqués avec les références d'entités voulues.</li> - <li>Essayez de marquer au moins deux mots importants en gras/italique.</li> - <li>Deux emplacements nécessitent un hyperlien ; ajoutez les liens appropriés avec des intitulés. Pour l'emplacement sur lequel le lien pointe, utilisez simplement http://example.com.</li> - <li>La citation et la devise de l'université doivent être marquées avec les éléments appropriés.</li> -</ul> +- Les noms de l'expéditeur et du destinataire (et « Tél » et « e‑mail ») doivent être marqués comme étant de grande importance. +- Les quatre dates du document doivent être indiquées dans des éléments appropriés contenant des dates lisibles par la machine. +- La première adresse et la première date de la lettre doivent recevoir une valeur d'attribut de classe « sender-column » ; le CSS que vous ajouterez plus tard les alignera à droite, comme c'est le cas dans une mise en page de lettre classique. +- Les cinq acronymes/abréviations dans le corps du texte de la lettre seront marqués pour permettre leur développement. +- Les six indices/exposants seront balisés de manière appropriée. +- Les symboles « degré », « plus grand que » , « multiplier » seront marqués avec les références d'entités voulues. +- Essayez de marquer au moins deux mots importants en gras/italique. +- Deux emplacements nécessitent un hyperlien ; ajoutez les liens appropriés avec des intitulés. Pour l'emplacement sur lequel le lien pointe, utilisez simplement http\://example.com. +- La citation et la devise de l'université doivent être marquées avec les éléments appropriés. -<p>Dans l'en‑tête du document :</p> +Dans l'en‑tête du document : -<ul> - <li>Le jeu de caractères sera précisé comme étant utf-8 avec la balise <code>meta</code> appropriée.</li> - <li>L'auteur de la lettre sera indiqué dans une balise <code>meta</code> adéquate.</li> - <li>Les CSS fournies seront incorporées avec le marquage approprié.</li> -</ul> +- Le jeu de caractères sera précisé comme étant utf-8 avec la balise `meta` appropriée. +- L'auteur de la lettre sera indiqué dans une balise `meta` adéquate. +- Les CSS fournies seront incorporées avec le marquage approprié. -<h2 id="Conseils_et_astuces">Conseils et astuces</h2> +## Conseils et astuces -<ul> - <li>Utilisez le <a href="https://validator.w3.org/">validateur HTML W3C</a> pour valider votre HTML ; Vous aurez des points supplémentaires s'il est valide.</li> - <li>Il n'est pas nécessaire de connaître les CSS pour faire cet exercice ; vous avez juste besoin de le mettre dans un élément HTML.</li> -</ul> +- Utilisez le [validateur HTML W3C](https://validator.w3.org/) pour valider votre HTML ; Vous aurez des points supplémentaires s'il est valide. +- Il n'est pas nécessaire de connaître les CSS pour faire cet exercice ; vous avez juste besoin de le mettre dans un élément HTML. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>La capture d'écran suivante montre ce à quoi la lettre devrait ressembler après le balisage.</p> +La capture d'écran suivante montre ce à quoi la lettre devrait ressembler après le balisage. -<p><img alt="Présentation de la lettre" src="fr-lettre.png"></p> + -<h2 id="Évaluation">Évaluation</h2> +## Évaluation -<p>Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a> ou sur le canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Essayez l'exercice d'abord — il n'y a rien à gagner à tricher !</p> +Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez l'exercice d'abord — il n'y a rien à gagner à tricher ! -<p>{{PreviousMenuNext("Apprendre/HTML/Introduction_to_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_to_HTML")}}</p> +{{PreviousMenuNext("Apprendre/HTML/Introduction_to_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_to_HTML")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Commencer avec le HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creation d'hyperliens</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formatage avancé du texte</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li>Faire une Lettre</li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li> -</ul> +- [Commencer avec le HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started) +- [Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) +- [Fondamentaux du texte HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) +- [Creation d'hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) +- [Formatage avancé du texte](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) +- [Structure de Site Web et de document](/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) +- [Déboguer de l'HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) +- Faire une Lettre +- [Structurer une page de contenu](/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content) diff --git a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md index 0fa7c74921..2f14f32358 100644 --- a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md +++ b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md @@ -4,94 +4,92 @@ slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content original_slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content --- -<div>{{LearnSidebar}}<br> -{{PreviousNext("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}</div> +{{LearnSidebar}} +{{PreviousNext("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}} -<p>Il est essentiel de savoir structurer une page de contenu prête à être mise en forme grâce au CSS. Cette évaluation va vous permettre de vous tester sur votre capacité à réfléchir au rendu visuel final d'une page et à choisir la sémantique structurelle appropriée pour construire une bonne mise en page.</p> +Il est essentiel de savoir structurer une page de contenu prête à être mise en forme grâce au CSS. Cette évaluation va vous permettre de vous tester sur votre capacité à réfléchir au rendu visuel final d'une page et à choisir la sémantique structurelle appropriée pour construire une bonne mise en page. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Avant de commencer cette évaluation, vous devriez avoir déjà travaillé sur le reste du cours, en particulier sur <a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Document_and_website_structure">Structure de Site Web et de document</a></td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Tester vos connaissances sur la structure des pages web et d'une représentation prospective d'un design de mise en page avec un balisage.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + Avant de commencer cette évaluation, vous devriez avoir déjà travaillé + sur le reste du cours, en particulier sur + <a + href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Document_and_website_structure" + >Structure de Site Web et de document</a + > + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + Tester vos connaissances sur la structure des pages web et d'une + représentation prospective d'un design de mise en page avec un balisage. + </td> + </tr> + </tbody> </table> -<h2 id="Point_de_départ">Point de départ</h2> +## Point de départ -<p>Pour commencer cet exercice, vous pouvez télécharger <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true">l'archive contenant les fichiers nécessaires</a> à cette évaluation. Elle contient :</p> +Pour commencer cet exercice, vous pouvez télécharger [l'archive contenant les fichiers nécessaires](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true) à cette évaluation. Elle contient : -<ul> - <li>le fichier HTML auquel vous allez devoir ajouter le balisage structurel,</li> - <li>le fichier CSS pour styliser la page,</li> - <li>les images utilisées dans la page.</li> -</ul> +- le fichier HTML auquel vous allez devoir ajouter le balisage structurel, +- le fichier CSS pour styliser la page, +- les images utilisées dans la page. -<p>Décompressez l'archive sur votre ordinateur, ou bien utilisez un site web comme <a class="external external-icon" href="http://jsbin.com/">JSBin</a> ou <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> pour faire votre évaluation.</p> +Décompressez l'archive sur votre ordinateur, ou bien utilisez un site web comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire votre évaluation. -<h2 id="Aperçu_du_projet">Aperçu du projet</h2> +## Aperçu du projet -<p>Dans ce projet, l'objectif est d'ajouter des éléments structurels au contenu de la page d'accueil d'un site d'observation d'oiseaux pour parfaire sa mise en page. La page devra contenir :</p> +Dans ce projet, l'objectif est d'ajouter des éléments structurels au contenu de la page d'accueil d'un site d'observation d'oiseaux pour parfaire sa mise en page. La page devra contenir : -<ul> - <li>un en‑tête sur toute la largeur de la page avec le titre de la page, le logo du site et le menu de navigation. Le titre et le logo apparaîtront côte à côte une fois le style appliqué, et la navigation sera juste au‑dessous du menu,</li> - <li>une zone de contenu principal de deux colonnes : un bloc principal avec le texte de bienvenue et une barre latérale avec des vignettes d'images,</li> - <li>un pied de page avec les informations de droits d'auteur et les crédits.</li> -</ul> +- un en‑tête sur toute la largeur de la page avec le titre de la page, le logo du site et le menu de navigation. Le titre et le logo apparaîtront côte à côte une fois le style appliqué, et la navigation sera juste au‑dessous du menu, +- une zone de contenu principal de deux colonnes : un bloc principal avec le texte de bienvenue et une barre latérale avec des vignettes d'images, +- un pied de page avec les informations de droits d'auteur et les crédits. -<p>Vous devez ajouter les enveloppes appropriées pour :</p> +Vous devez ajouter les enveloppes appropriées pour : -<ul> - <li>l'en-tête</li> - <li>le menu de navigation</li> - <li>le contenu principal</li> - <li>le texte de bienvenue</li> - <li>la barre latérale avec les images</li> - <li>le pied de page</li> -</ul> +- l'en-tête +- le menu de navigation +- le contenu principal +- le texte de bienvenue +- la barre latérale avec les images +- le pied de page -<p>Vous devez aussi</p> +Vous devez aussi -<ul> - <li>appliquer à la page les CSS fournies en ajoutant un élément {{htmlelement("link")}} juste au‑dessous de celui existant.</li> -</ul> +- appliquer à la page les CSS fournies en ajoutant un élément {{htmlelement("link")}} juste au‑dessous de celui existant. -<h2 id="Conseils_et_astuces"><strong>Conseils et astuces</strong></h2> +## **Conseils et astuces** -<ul> - <li>Utilisez le « <a href="https://validator.w3.org/">W3C HTML validator »</a> pour valider votre HTML ; vous aurez des points bonus si la validation s'opère autant que possible (la ligne « googleapis » est une ligne utilisée pour importer des polices personnalisées dans la page à partir du service « Google Fonts » ; elle ne sera pas validée, donc ne vous en inquiétez pas).</li> - <li>Il n'est pas nécessaire de connaître quoi que ce soit des CSS pour faire cet exercice ; vous avez juste besoin de placer les CSS fournies dans l'élément HTML.</li> - <li>Les CSS jointes sont conçues de telle sorte que les éléments structuraux adéquats ont été ajoutés dans le balisage, ils apparaîtront en vert dans le rendu de la page.</li> - <li>Si vous êtes bloqué et ne voyez pas où mettre tel élément, cela peut vous aider de tracer un diagramme des blocs de disposition de la page et d'écrire sur chaque élément ce qui, à votre avis devrait envelopper chaque bloc.</li> -</ul> +- Utilisez le « [W3C HTML validator »](https://validator.w3.org/) pour valider votre HTML ; vous aurez des points bonus si la validation s'opère autant que possible (la ligne « googleapis » est une ligne utilisée pour importer des polices personnalisées dans la page à partir du service « Google Fonts » ; elle ne sera pas validée, donc ne vous en inquiétez pas). +- Il n'est pas nécessaire de connaître quoi que ce soit des CSS pour faire cet exercice ; vous avez juste besoin de placer les CSS fournies dans l'élément HTML. +- Les CSS jointes sont conçues de telle sorte que les éléments structuraux adéquats ont été ajoutés dans le balisage, ils apparaîtront en vert dans le rendu de la page. +- Si vous êtes bloqué et ne voyez pas où mettre tel élément, cela peut vous aider de tracer un diagramme des blocs de disposition de la page et d'écrire sur chaque élément ce qui, à votre avis devrait envelopper chaque bloc. -<h2 id="Exemple">Exemple</h2> +## Exemple -<p>La capture d'écran suivante montre un exemple de ce à quoi la page d'accueil peut ressembler après avoir été balisée.</p> +La capture d'écran suivante montre un exemple de ce à quoi la page d'accueil peut ressembler après avoir été balisée. -<p><img alt="L'exemple de l'exercice complété ; une page web unique sur l'observation des oiseaux, comprenant un en-tête "Observons les oiseaux", des photos d'oiseaux et un message de bienvenue." src="oiseaux.png"></p> + -<h2 id="Évaluation">Évaluation</h2> +## Évaluation -<p>Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le <a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294" rel="noopener">Learning Area Discourse thread</a> ou sur le canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> sur <a class="external external-icon" href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>. Essayez l'exercice d'abord — il n'y a rien à gagner à tricher !</p> +Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez l'exercice d'abord — il n'y a rien à gagner à tricher ! -<p>{{PreviousMenu("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}}</p> +{{PreviousMenu("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Création d'hyperliens</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formatage avancé du texte</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Faire une lettre</a></li> - <li>Structurer une page de contenu</li> -</ul> +- [Commencer avec le HTML](/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started) +- [Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML) +- [Fondamentaux du texte HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) +- [Création d'hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) +- [Formatage avancé du texte](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) +- [Structure de Site Web et de document](/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) +- [Déboguer de l'HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) +- [Faire une lettre](/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter) +- Structurer une page de contenu diff --git a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.md index af254c337d..c54e7c15c5 100644 --- a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.md +++ b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.md @@ -4,284 +4,290 @@ slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML --- -<div>{{LearnSidebar}}</div> +{{LearnSidebar}}{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}} -<div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}</div> - -<p>L'en-tête {{glossary("Head", "head")}} dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML avec des CSS), des liens aux favicons personnalisés et d'autres méta-données (auteur du document, mots-clés décrivant le document, etc.). Cet article porte sur tout ceci et plus, pour vous donner de bonnes bases pour gérer les balises et le code qui devraient figurer dans l'en-tête.</p> +L'en-tête {{glossary("Head", "head")}} dans un document HTML est une partie du document qui n'est pas affichée par le navigateur au chargement de la page. Elle contient des informations comme le titre ({{htmlelement("title")}}) de la page, des liens aux {{glossary("CSS")}} (si vous souhaitez composer le contenu HTML avec des CSS), des liens aux favicons personnalisés et d'autres méta-données (auteur du document, mots-clés décrivant le document, etc.). Cet article porte sur tout ceci et plus, pour vous donner de bonnes bases pour gérer les balises et le code qui devraient figurer dans l'en-tête. <table class="standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td>Connaître les bases du HTML, telles qu'elles sont exposées dans l'article <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Commencer avec le HTML</a></td> - </tr> - <tr> - <th scope="row">Objectifs:</th> - <td>En savoir plus sur la balise <head> du HTML, son objet, les éléments les plus importants qu'elle peut contenir et l'effet qu'elle peut avoir sur le document HTML.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis:</th> + <td> + Connaître les bases du HTML, telles qu'elles sont exposées dans + l'article + <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started" + >Commencer avec le HTML</a + > + </td> + </tr> + <tr> + <th scope="row">Objectifs:</th> + <td> + En savoir plus sur la balise <head> du HTML, son objet, les + éléments les plus importants qu'elle peut contenir et l'effet qu'elle + peut avoir sur le document HTML. + </td> + </tr> + </tbody> </table> -<h2 id="Quest-ce_que_len-tête_de_HTML">Qu'est-ce que l'en-tête de HTML ?</h2> +## Qu'est-ce que l'en-tête de HTML ? + +Revoyons le document HTML de base de l' [article précédent](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#anatomy_of_an_html_document): + +```html +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Ma page test</title> + </head> + <body> + <p>Voici ma page</p> + </body> +</html> +``` -<p>Revoyons le document HTML de base de l' <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#anatomy_of_an_html_document">article précédent</a>:</p> +Le contenu de l'en-tête HTML {{htmlelement("head")}} — à la difference du contenu de l'élément {{htmlelement("body")}} (affiché quand la page est chargée par le navigateur) — n'est pas affiché dans la page du navigateur. Le travail de la balise \<head> est de contenir les {{glossary("Metadata", "métadonnées")}} à propos du document. Dans l'exemple ci-dessus, l'en-tête est plutôt petit : -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Ma page test</title> - </head> - <body> - <p>Voici ma page</p> - </body> -</html></pre> +```html +<head> + <meta charset="utf-8"> + <title>Ma page test</title> +</head> +``` -<p>Le contenu de l'en-tête HTML {{htmlelement("head")}} — à la difference du contenu de l'élément {{htmlelement("body")}} (affiché quand la page est chargée par le navigateur) — n'est pas affiché dans la page du navigateur. Le travail de la balise <head> est de contenir les {{glossary("Metadata", "métadonnées")}} à propos du document. Dans l'exemple ci-dessus, l'en-tête est plutôt petit :</p> +Toutefois dans les pages plus importantes, l'en-tête peut contenir un grand nombre d'éléments — essayez d'aller sur certains de vos sites web préférés et utilisez les [outils de développement](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) pour vérifier le contenu de l'en-tête. Notre objectif ici n'est pas de vous montrer comment utiliser tout ce qui peut être mis dans l'élément \<head>, mais plutôt de vous apprendre à utiliser les outils les plus évidents, que vous souhaiterez inclure dans l'en-tête, et vous les rendre plus familiers. Commençons. -<pre class="brush: html"><head> - <meta charset="utf-8"> - <title>Ma page test</title> -</head></pre> +## Ajouter un titre -<p>Toutefois dans les pages plus importantes, l'en-tête peut contenir un grand nombre d'éléments — essayez d'aller sur certains de vos sites web préférés et utilisez les <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> pour vérifier le contenu de l'en-tête. Notre objectif ici n'est pas de vous montrer comment utiliser tout ce qui peut être mis dans l'élément <head>, mais plutôt de vous apprendre à utiliser les outils les plus évidents, que vous souhaiterez inclure dans l'en-tête, et vous les rendre plus familiers. Commençons.</p> +Nous avons déjà vu l'élément {{htmlelement ("title")}} — qui peut être utilisé pour ajouter un intitulé au document. Il peut toutefois être confondu avec l'élément {{htmlelement ("h1")}}, pour ajouter un en‑tête de haut nieau au contenu de votre page dans l'élément {{htmlelement("body")}} — quelquefois désigné comme étant le « titre de la page ». Mais ce sont des choses différentes ! -<h2 id="Ajouter_un_titre">Ajouter un titre</h2> +- L'élément {{htmlelement("h1")}} apparaît dans la page quand elle est chargée dans le navigateur — généralement, il devrait être utilisé une fois par page, pour marquer le titre du contenu de votre page (le titre d'une histoire, ou d'une actualité, ou tout ce qui vous paraît approprié). +- L'élément {{htmlelement("title")}} est une métadonnée qui représente l'intitulé du document HTML global (non le contenu du document). -<p>Nous avons déjà vu l'élément {{htmlelement ("title")}} — qui peut être utilisé pour ajouter un intitulé au document. Il peut toutefois être confondu avec l'élément {{htmlelement ("h1")}}, pour ajouter un en‑tête de haut nieau au contenu de votre page dans l'élément {{htmlelement("body")}} — quelquefois désigné comme étant le « titre de la page ». Mais ce sont des choses différentes !</p> +### Apprentissage actif : inspection d'un exemple simple -<ul> - <li>L'élément {{htmlelement("h1")}} apparaît dans la page quand elle est chargée dans le navigateur — généralement, il devrait être utilisé une fois par page, pour marquer le titre du contenu de votre page (le titre d'une histoire, ou d'une actualité, ou tout ce qui vous paraît approprié).</li> - <li>L'élément {{htmlelement("title")}} est une métadonnée qui représente l'intitulé du document HTML global (non le contenu du document).</li> -</ul> +1. Pour commencer cet apprentissage actif, nous vous invitons à télécharger une copie de notre [page-titre-exemple](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html) sur le dépôt Github. Pour ce faire, soit : -<h3 id="Apprentissage_actif_inspection_dun_exemple_simple">Apprentissage actif : inspection d'un exemple simple </h3> + 1. copiez et collez le code hors de la page dans un nouveau fichier texte dans votre éditeur de code, puis sauvegardez-le dans un endroit raisonnable. + 2. pressez le bouton « Raw » de la page : le texte brut apparaît dans un nouvel onglet du navigateur. Ensuite, choisissez _Fichier> Enregistrer la page sous ..._ dans le menu du navigateur, puis choisissez un endroit pour enregistrer le fichier. -<ol> - <li>Pour commencer cet apprentissage actif, nous vous invitons à télécharger une copie de notre <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">page-titre-exemple</a> sur le dépôt Github. Pour ce faire, soit : +2. Maintenant, ouvrez le fichier dans votre navigateur. Vous devriez voir quelque chose comme ça : - <ol> - <li>copiez et collez le code hors de la page dans un nouveau fichier texte dans votre éditeur de code, puis sauvegardez-le dans un endroit raisonnable.</li> - <li>pressez le bouton « Raw » de la page : le texte brut apparaît dans un nouvel onglet du navigateur. Ensuite, choisissez <em>Fichier> Enregistrer la page sous ...</em> dans le menu du navigateur, puis choisissez un endroit pour enregistrer le fichier.</li> - </ol> - </li> - <li>Maintenant, ouvrez le fichier dans votre navigateur. Vous devriez voir quelque chose comme ça : - <p><img alt="Une simple page web page dont <title> a la valeur «Élément <title>» et <h1> la valeur Élément <h1>." src="fr-element-title.png">Il devrait désormais être évident de situer où le contenu de <h1> apparaît et où celui de <code><title></code> apparaît !</p> - </li> - <li> - <p>Vous devriez aussi essayer d'ouvrir ce code dans votre éditeur, modifier le contenu de ces éléments, puis rafraîchir la page dans votre navigateur. Amusez-vous avec ces fonctions.</p> - </li> -</ol> + Il devrait désormais être évident de situer où le contenu de \<h1> apparaît et où celui de `<title>` apparaît ! -<p>Le contenu de l'élément <code><title></code> est aussi utilisé de manières différentes . Par exemple, si vous tentez de marquer cette page dans vos Marques-pages ( <em>Marques-pages > Marquer cette page</em> ou bien l'étoile dans la barre d'outils de Firefox), vous verrez que le contenu de <code><title></code> est suggéré comme nom pour le marque-page.</p> +3. Vous devriez aussi essayer d'ouvrir ce code dans votre éditeur, modifier le contenu de ces éléments, puis rafraîchir la page dans votre navigateur. Amusez-vous avec ces fonctions. -<p><img alt="Une page Web marquée dans Firefox ; le nom du signet a été automatiquement rempli avec le contenu de l'élément <title>." src="fr-bookmarked.png"></p> +Le contenu de l'élément `<title>` est aussi utilisé de manières différentes . Par exemple, si vous tentez de marquer cette page dans vos Marques-pages ( _Marques-pages > Marquer cette page_ ou bien l'étoile dans la barre d'outils de Firefox), vous verrez que le contenu de `<title>` est suggéré comme nom pour le marque-page. -<p>Le contenu de <code><title></code> est aussi utilisé dans les résultats de recherches, comme vous le verrez ci‑dessous.</p> + -<h2 id="Métadonnées_lélément_<meta>">Métadonnées : l'élément <meta></h2> +Le contenu de `<title>` est aussi utilisé dans les résultats de recherches, comme vous le verrez ci‑dessous. -<p>Les métadonnées sont des données qui décrivent des données, et le langage HTML a une manière « officielle » d'ajouter des métadonnées à un document — l'élément {{htmlelement("meta")}}. Bien sûr, d'autres choses, dont nous parlons dans cet article, pourraient aussi être considérées comme des métadonnées. Il y a une panoplie d'autres éléments de type <code><meta></code> qui auraient pu figurer dans l'en-tête de votre page, mais nous n'en parlerons pas pour l'instant, car ce serait trop déroutant. À la place, nous expliquerons quelques éléments que vous pourriez voir, juste pour vous donner une idée.</p> +## Métadonnées : l'élément \<meta> -<h3 id="Définition_de_lencodage_des_caractères_du_document">Définition de l'encodage des caractères du document</h3> +Les métadonnées sont des données qui décrivent des données, et le langage HTML a une manière « officielle » d'ajouter des métadonnées à un document — l'élément {{htmlelement("meta")}}. Bien sûr, d'autres choses, dont nous parlons dans cet article, pourraient aussi être considérées comme des métadonnées. Il y a une panoplie d'autres éléments de type `<meta>` qui auraient pu figurer dans l'en-tête de votre page, mais nous n'en parlerons pas pour l'instant, car ce serait trop déroutant. À la place, nous expliquerons quelques éléments que vous pourriez voir, juste pour vous donner une idée. -<p>Dans l'exemple que nous avons vu au-dessus, cette ligne était présente :</p> +### Définition de l'encodage des caractères du document -<pre class="brush: html"><meta charset="utf-8"></pre> +Dans l'exemple que nous avons vu au-dessus, cette ligne était présente : -<p>Cet élément définit l'encodage des caractères du document - le jeu de caractères qu'il est autorisé à utiliser. <code>utf-8</code> <em> </em>est un jeu de caractères universel qui inclut à peu près tous les caractères des langues humaines. Cela signifie que votre page web sera capable de gérer l'affichage de n'importe quelle langue ; c'est donc une bonne idée de le définir dans chaque page web que vous créez ! Par exemple, votre page peut gérer l'anglais et le japonais sans aucun souci :</p> +```html +<meta charset="utf-8"> +``` -<p><img alt="Une page Web contenant des caractères français et japonais, le jeu de caractères étant universel ou utf-8. Les deux langues s'affichent correctement." src="fr-meta-utf8.png">Si vous définissez votre encodage de caractères en <code>ISO-8859-1</code> , par exemple (le jeu de caractères de l'alphabet latin), le rendu de votre page sera totalement perturbé :</p> +Cet élément définit l'encodage des caractères du document - le jeu de caractères qu'il est autorisé à utiliser. `utf-8` \*\*est un jeu de caractères universel qui inclut à peu près tous les caractères des langues humaines. Cela signifie que votre page web sera capable de gérer l'affichage de n'importe quelle langue ; c'est donc une bonne idée de le définir dans chaque page web que vous créez ! Par exemple, votre page peut gérer l'anglais et le japonais sans aucun souci : -<p><img alt="Une page Web contenant des caractères français et japonais, l'encodage des caractères étant réglé sur ISO latin. Les caractères japonais ne s'affichent pas correctement." src="fr-meta-iso.png"></p> +Si vous définissez votre encodage de caractères en `ISO-8859-1` , par exemple (le jeu de caractères de l'alphabet latin), le rendu de votre page sera totalement perturbé : -<div class="note"> -<p><strong>Note :</strong> Certains navigateurs (par ex. Chrome) corrigent automatiquement les encodages incorrects, ainsi selon le navigateur utilisé, ce problème pourrait vous passer totalement inaperçu. Vous devriez quand même définir un encodage <code>utf-8</code> sur votre page de toutes façons pour éviter tout problème potentiel avec d'autres navigateurs.</p> -</div> + -<h3 id="Apprentissage_actif_expérience_avec_lencodage_des_caractères">Apprentissage actif : expérience avec l'encodage des caractères</h3> +> **Note :** Certains navigateurs (par ex. Chrome) corrigent automatiquement les encodages incorrects, ainsi selon le navigateur utilisé, ce problème pourrait vous passer totalement inaperçu. Vous devriez quand même définir un encodage `utf-8` sur votre page de toutes façons pour éviter tout problème potentiel avec d'autres navigateurs. -<p>Pour cela, reportez-vous au modèle HTML simple que vous avez obtenu dans la section précédente sur <code><title></code> (la page <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a>), faites un essai de modification de la valeur de la métadonnée <code>charset</code> en ISO-8859-1 et ajoutez le japonais à votre page. Voici le code que nous avons utilisé :</p> +### Apprentissage actif : expérience avec l'encodage des caractères -<pre class="brush: html"><p>Japanese example: ご飯が熱い。</p></pre> +Pour cela, reportez-vous au modèle HTML simple que vous avez obtenu dans la section précédente sur `<title>` (la page [title-example.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html)), faites un essai de modification de la valeur de la métadonnée `charset` en ISO-8859-1 et ajoutez le japonais à votre page. Voici le code que nous avons utilisé : -<h3 id="Ajouter_le_nom_de_lauteur_et_une_description">Ajouter le nom de l'auteur et une description</h3> +```html +<p>Japanese example: ご飯が熱い。</p> +``` -<p>De nombreux éléments <code><meta></code> icontiennent les attributs <code>name</code> et <code>content</code> :</p> +### Ajouter le nom de l'auteur et une description -<ul> - <li><code>name</code> définit le type de méta élément ; le type d'informations contenu.</li> - <li><code>content</code> définit le contenu réel de la métadonnée.</li> -</ul> +De nombreux éléments `<meta>` icontiennent les attributs `name` et `content` : -<p>Il est utile d'inclure ces deux méta-éléments dans votre page pour définir son auteur et donner une courte description de son contenu. Voyons un exemple :</p> +- `name` définit le type de méta élément ; le type d'informations contenu. +- `content` définit le contenu réel de la métadonnée. -<pre class="brush: html"><meta name="author" content="Chris Mills"> -<meta name="description" content="La Zone Apprentissage des documents web +Il est utile d'inclure ces deux méta-éléments dans votre page pour définir son auteur et donner une courte description de son contenu. Voyons un exemple : + +```html +<meta name="author" content="Chris Mills"> +<meta name="description" content="La Zone Apprentissage des documents web du MDN a pour but de donner aux débutants du Web tout ce qu'ils doivent -savoir pour commencer le développement de pages webs et d'applications."></pre> +savoir pour commencer le développement de pages webs et d'applications."> +``` + +Préciser l'auteur peut être intéressant dans certains cas : il est utile de savoir qui a écrit la page pour le contacter et lui poser des questions à propos du contenu. Certains systèmes de gestion de contenu procèdent à l'extraction automatique des informations sur l'auteur de la page et les rendent disponibles à cette fin. + +Définir une description qui incorpore des mots-clés relatifs au contenu de la page est utile ; votre page pourra ainsi apparaître plus haut dans la liste de recherches par pertinence créée par un moteur de recherche (ce processus se nomme [Search Engine Optimization](/fr/docs/Glossary/SEO) ou {{glossary("SEO")}} — optimisation du moteur de recherche.) -<p>Préciser l'auteur peut être intéressant dans certains cas : il est utile de savoir qui a écrit la page pour le contacter et lui poser des questions à propos du contenu. Certains systèmes de gestion de contenu procèdent à l'extraction automatique des informations sur l'auteur de la page et les rendent disponibles à cette fin.</p> +### Apprentissage actif : utilisation des descriptions dans les moteurs de recherche. -<p>Définir une description qui incorpore des mots-clés relatifs au contenu de la page est utile ; votre page pourra ainsi apparaître plus haut dans la liste de recherches par pertinence créée par un moteur de recherche (ce processus se nomme <a href="/fr/docs/Glossary/SEO">Search Engine Optimization</a> ou {{glossary("SEO")}} — optimisation du moteur de recherche.)</p> +La description est aussi utilisée dans le résultat des moteurs de recherche. Faisons un exercice pour mieux comprendre. -<h3 id="Apprentissage_actif_utilisation_des_descriptions_dans_les_moteurs_de_recherche.">Apprentissage actif : utilisation des descriptions dans les moteurs de recherche.</h3> +1. Allez sur la page d'accueil de [Mozilla Developer Network](/fr/). +2. Regardez le source de la page (Clic droit/ -<p>La description est aussi utilisée dans le résultat des moteurs de recherche. Faisons un exercice pour mieux comprendre.</p> + <kbd>Ctrl</kbd> -<ol> - <li>Allez sur la page d'accueil de <a href="/fr/">Mozilla Developer Network</a>.</li> - <li>Regardez le source de la page (Clic droit/<kbd>Ctrl</kbd>, choissisez « <em>Code source de la page</em> » dans le menu contextuel.)</li> - <li>Trouvez la balise méta <code>description</code>. Elle ressemble à ceci : - <pre><meta name="description" content="<a class="attribute-value">MDN Web Docs fournit - des informations sur les technologies web ouvertes comme HTML, - CSS et les API utilisées pour les sites web et les applications - web. On y trouve également de la documentation destinées aux - développeurs à propos des produits Mozilla tels que les - outils de développement de Firefox.</a>"></pre> - </li> - <li>Maintenant, cherchez « Mozilla Developer Network » sur votre moteur de recherche favori (nous avons utilisé Google). Vous remarquerez que le contenu de la <code><meta></code> description et de l'élément <code><title></code> sont utilisés dans les résultats de recherche. Cela vaut vraiment la peine ! - <p><img alt='Une page de recherche Google pour "MDN web docs"' src="fr-google.png"></p> - </li> -</ol> + , choissisez « _Code source de la page_ » dans le menu contextuel.) -<div class="note"> -<p><strong>Note :</strong> Avec Google, vous verrez quelques sous-pages pertinentes de MDN listées sous le lien de la page d'accueil — ce sont des liens du site ; ils sont configurables dans les outils de <a href="https://www.google.com/webmasters/tools/">Google's webmaster tools</a> - ces outils sont donc un moyen de rendre les résultats de recherche de votre site meilleurs avec le moteur de recherche de Google.</p> -</div> +3. Trouvez la balise méta `description`. Elle ressemble à ceci : -<div class="note"> -<p><strong>Note :</strong> Plusieurs fonctions <code><meta></code> ne sont plus utilisées. Par exemple, l'élément <code><meta></code> <code>keyword</code> (<code><meta name= "keywords" content="mettez, vos, mot-clés, ici"></code>) — qui est censé fournir des mots-clés pour les moteurs de recherche, afin de déterminer la pertinence de la page pour différents termes de recherche — est ignoré par les moteurs de recherche, car les polluposteurs remplissaient simplement la liste avec des centaines de mots-clés, biaisant les résultats.</p> -</div> + <meta name="description" content="MDN Web Docs fournit + des informations sur les technologies web ouvertes comme HTML, + CSS et les API utilisées pour les sites web et les applications + web. On y trouve également de la documentation destinées aux + développeurs à propos des produits Mozilla tels que les + outils de développement de Firefox."> -<h3 id="Autres_types_de_métadonnées">Autres types de métadonnées</h3> +4. Maintenant, cherchez « Mozilla Developer Network » sur votre moteur de recherche favori (nous avons utilisé Google). Vous remarquerez que le contenu de la `<meta>` description et de l'élément `<title>` sont utilisés dans les résultats de recherche. Cela vaut vraiment la peine ! -<p>En parcourant le web, vous trouverez d'autres types de métadonnées. Beaucoup de fonctionnalités que vous verrez sur les sites webs sont des créations propriétaires, conçues pour être utilisées sur certains sites ( comme les réseaux sociaux ) avec des informations spécifiques qu'ils peuvent utiliser ;</p> +  -<p>Par exemple, <a href="https://ogp.me/">Open Graph Data</a> est un protocole de métadonnées que Facebook a inventé pour fournir des métadonnées plus riches pour les sites webs. Dans le code source de MDN vous trouverez ceci :</p> +> **Note :** Avec Google, vous verrez quelques sous-pages pertinentes de MDN listées sous le lien de la page d'accueil — ce sont des liens du site ; ils sont configurables dans les outils de [Google's webmaster tools](https://www.google.com/webmasters/tools/) - ces outils sont donc un moyen de rendre les résultats de recherche de votre site meilleurs avec le moteur de recherche de Google. -<pre class="brush: html"><meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png"> -<meta property="og:description" content="<a class="attribute-value">MDN Web Docs fournit des +> **Note :** Plusieurs fonctions `<meta>` ne sont plus utilisées. Par exemple, l'élément `<meta>` `keyword` (`<meta name= "keywords" content="mettez, vos, mot-clés, ici">`) — qui est censé fournir des mots-clés pour les moteurs de recherche, afin de déterminer la pertinence de la page pour différents termes de recherche — est ignoré par les moteurs de recherche, car les polluposteurs remplissaient simplement la liste avec des centaines de mots-clés, biaisant les résultats. + +### Autres types de métadonnées + +En parcourant le web, vous trouverez d'autres types de métadonnées. Beaucoup de fonctionnalités que vous verrez sur les sites webs sont des créations propriétaires, conçues pour être utilisées sur certains sites ( comme les réseaux sociaux ) avec des informations spécifiques qu'ils peuvent utiliser ; + +Par exemple, [Open Graph Data](https://ogp.me/) est un protocole de métadonnées que Facebook a inventé pour fournir des métadonnées plus riches pour les sites webs. Dans le code source de MDN vous trouverez ceci : + +```html +<meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png"> +<meta property="og:description" content="MDN Web Docs fournit des informations sur les technologies web ouvertes comme HTML, CSS et les API utilisées pour les sites web et les applications web. On y trouve également de la documentation destinées aux développeurs à propos des produits -Mozilla tels que les outils de développement de Firefox.</a>"> -<meta property="og:title" content="Mozilla Developer Network"></pre> +Mozilla tels que les outils de développement de Firefox."> +<meta property="og:title" content="Mozilla Developer Network"> +``` + +En conséquence, lorsque vous faites un lien à MDN sur Facebook, le lien apparaît avec une image et une description : une expérience plus riche pour les utilisateurs. + +Twitter a aussi une métadonnée propriétaire, qui a un effet similaire quand l'URL du site est affichée sur twitter.com. Par exemple: -<p>En conséquence, lorsque vous faites un lien à MDN sur Facebook, le lien apparaît avec une image et une description : une expérience plus riche pour les utilisateurs.</p> +```html +<meta name="twitter:title" content="Mozilla Developer Network"> +``` -<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="facebook-output.png">Twitter a aussi une métadonnée propriétaire, qui a un effet similaire quand l'URL du site est affichée sur twitter.com. Par exemple:</p> +## Ajouter des icônes personnalisées à un site -<pre class="brush: html"><meta name="twitter:title" content="Mozilla Developer Network"></pre> +Pour enrichir davantage le design de votre site, vous pouvez ajouter des références à des icônes personnalisées dans vos métadonnées et celles-ci seront affichées dans certains contextes. -<h2 id="Ajouter_des_icônes_personnalisées_à_un_site">Ajouter des icônes personnalisées à un site</h2> +La petite favicône, qui existe depuis de nombreuses années, a été la première icône de ce type, une icône de 16 x 16 pixels utilisée dans de multiples endroits. Vous verrez des favicônes affichés dans chaque onglet du navigateur pour chaque page ouverte et à côté des pages marquées dans le panneau des signets. -<p>Pour enrichir davantage le design de votre site, vous pouvez ajouter des références à des icônes personnalisées dans vos métadonnées et celles-ci seront affichées dans certains contextes.</p> +Une favicône peut être ajoutée à votre page de la façon suivante : -<p>La petite favicône, qui existe depuis de nombreuses années, a été la première icône de ce type, une icône de 16 x 16 pixels utilisée dans de multiples endroits. Vous verrez des favicônes affichés dans chaque onglet du navigateur pour chaque page ouverte et à côté des pages marquées dans le panneau des signets.</p> +1. Enregistrez-la dans le même répertoire que la page d'index du site, sous le format `.ico` (la plupart des navigateurs prendront en charge les favicônes dans des formats plus communs comme `.gif` ou `.png`, mais utiliser le format ICO assurera son fonctionnement depuis Internet Explorer 6.) +2. Ajoutez la ligne suivante dans votre `<head>` du HTML pour la référencer : -<p>Une favicône peut être ajoutée à votre page de la façon suivante :</p> + ```html + <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> + ``` -<ol> - <li>Enregistrez-la dans le même répertoire que la page d'index du site, sous le format <code>.ico</code> (la plupart des navigateurs prendront en charge les favicônes dans des formats plus communs comme <code>.gif</code> ou <code>.png</code>, mais utiliser le format ICO assurera son fonctionnement depuis Internet Explorer 6.)</li> - <li>Ajoutez la ligne suivante dans votre <code><head></code> du HTML pour la référencer : - <pre class="brush: html"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> - </li> -</ol> +Voici un exemple de favicône dans un panneau de favoris : -<p>Voici un exemple de favicône dans un panneau de favoris :</p> + -<p><img alt="Le panneau de signets Firefox, montrant un exemple de signet avec une favicône affichée à côté." src="fr-library.png"></p> +Il existe de nombreux autres types d'icônes à considérer aussi actuellement. Par exemple, vous trouverez ceci dans le code source de la page d'accueil MDN : -<p>Il existe de nombreux autres types d'icônes à considérer aussi actuellement. Par exemple, vous trouverez ceci dans le code source de la page d'accueil MDN :</p> +```html +<!-- troisième-génération iPad avec haute-résolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png"> +<!-- iPhone avec haute-résolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png"> +<!-- iPad de première et deuxième génération : --> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png"> +<!-- iPhone non-Retina, iPod Touch et appareils Android 2.1+: --> +<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png"> +<!-- favicône de base --> +<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png"> +``` -<pre class="brush: html"><!-- troisième-génération iPad avec haute-résolution Retina display: --> -<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png"> -<!-- iPhone avec haute-résolution Retina display: --> -<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png"> -<!-- iPad de première et deuxième génération : --> -<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png"> -<!-- iPhone non-Retina, iPod Touch et appareils Android 2.1+: --> -<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png"> -<!-- favicône de base --> -<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png"></pre> +Les commentaires expliquent ce à quoi chaque icône est utilisée — ces éléments incluent des fonctionnalités telles que la fourniture d'une icône haute résolution à utiliser lorsque le site Web est enregistré sur l'écran d'accueil d'un iPad. -<p>Les commentaires expliquent ce à quoi chaque icône est utilisée — ces éléments incluent des fonctionnalités telles que la fourniture d'une icône haute résolution à utiliser lorsque le site Web est enregistré sur l'écran d'accueil d'un iPad.</p> +Ne vous préoccupez pas de la mise en œuvre de tous ces types d'icônes maintenant — il s'agit d'une fonctionnalité assez avancée ; vous n'avez pas besoin de la connaître pour avancer dans le cours. Le but principal ici est de vous faire savoir à quoi elles ressemblent si vous les rencontriez en parcourant le code source d'autres sites web. -<p>Ne vous préoccupez pas de la mise en œuvre de tous ces types d'icônes maintenant — il s'agit d'une fonctionnalité assez avancée ; vous n'avez pas besoin de la connaître pour avancer dans le cours. Le but principal ici est de vous faire savoir à quoi elles ressemblent si vous les rencontriez en parcourant le code source d'autres sites web.</p> +## Application des CSS et JavaScript au HTML -<h2 id="Application_des_CSS_et_JavaScript_au_HTML">Application des CSS et JavaScript au HTML</h2> +À peu près tous les sites web que vous rencontrerez actuellement utiliseront des {{glossary("CSS")}} pour agrémenter leur aspect, et {{glossary("JavaScript")}} pour assurer les fonctionnalités interactives, telles que lecteurs vidéo, cartes géographiques, jeux et plus encore. Ceux-ci sont le plus souvent appliqués à une page web en utilisant respectivement les éléments {{htmlelement("link")}} et {{htmlelement("script")}}. -<p>À peu près tous les sites web que vous rencontrerez actuellement utiliseront des {{glossary("CSS")}} pour agrémenter leur aspect, et {{glossary("JavaScript")}} pour assurer les fonctionnalités interactives, telles que lecteurs vidéo, cartes géographiques, jeux et plus encore. Ceux-ci sont le plus souvent appliqués à une page web en utilisant respectivement les éléments {{htmlelement("link")}} et {{htmlelement("script")}}.</p> +- L'élément {{htmlelement("link")}} se situe toujours dans l'en-tête du document. Il comporte deux attributs, `rel="stylesheet"` indiquant qu'il s'agit de la feuille de style du document, et `href` indiquant le chemin d'accès au fichier la contenant : -<ul> - <li> - <p>L'élément {{htmlelement("link")}} se situe toujours dans l'en-tête du document. Il comporte deux attributs, <code>rel="stylesheet"</code> indiquant qu'il s'agit de la feuille de style du document, et <code>href</code> indiquant le chemin d'accès au fichier la contenant :</p> + ```html + <link rel="stylesheet" href="mon_fichier_css.css"> + ``` - <pre class="brush: html"><link rel="stylesheet" href="mon_fichier_css.css"></pre> - </li> - <li> - <p>L'élément {{htmlelement("script")}} ne doit pas aller dans l'en-tête ; en fait, il est souvent préférable de le placer au bas du corps du document (juste avant la balise de clôture <code></body></code>), pour s'assurer que tout le contenu HTML a été lu par le navigateur avant de lui appliquer le JavaScript (si JavaScript essaie d'accéder à un élément qui n'existe pas encore, le navigateur déclenchera une erreur).</p> +- L'élément {{htmlelement("script")}} ne doit pas aller dans l'en-tête ; en fait, il est souvent préférable de le placer au bas du corps du document (juste avant la balise de clôture `</body>`), pour s'assurer que tout le contenu HTML a été lu par le navigateur avant de lui appliquer le JavaScript (si JavaScript essaie d'accéder à un élément qui n'existe pas encore, le navigateur déclenchera une erreur). - <pre class="brush: html"><script src="mon-fichier-js.js"></script></pre> + ```html + <script src="mon-fichier-js.js"></script> + ``` - <div class="note"> - <p><strong>Note :</strong> L'élément <code><script></code> peut ressembler à un élément vide, mais ce n'est pas le cas : il faut donc une balise de fermeture. Au lieu de pointer vers un fichier de script externe, vous pouvez également choisir de mettre le code du script dans le HTML à l'intérieur d'un élément <code><script></code>.</p> - </div> - </li> -</ul> + > **Note :** L'élément `<script>` peut ressembler à un élément vide, mais ce n'est pas le cas : il faut donc une balise de fermeture. Au lieu de pointer vers un fichier de script externe, vous pouvez également choisir de mettre le code du script dans le HTML à l'intérieur d'un élément `<script>`. -<h3 id="Apprentissage_actif_appliquer_des_CSS_et_du_JavaScript_à_une_page">Apprentissage actif : appliquer des CSS et du JavaScript à une page</h3> +### Apprentissage actif : appliquer des CSS et du JavaScript à une page -<ol> - <li>Pour commencer cet apprentissage actif, prenez une copie de nos fichiers <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> et <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> , et enregistrez-les sur votre ordinateur dans un même répertoire. Assurez-vous qu'ils sont enregistrés avec les noms et les extensions de fichier corrects.</li> - <li>Ouvrez le fichier HTML à la fois dans votre navigateur et votre éditeur de texte.</li> - <li>En suivant les informations fournies ci-dessus, ajoutez les éléments {{htmlelement("link")}} et {{htmlelement("script")}} à votre HTML, afin que les CSS et le JavaScript soient appliqués au HTML.</li> -</ol> +1. Pour commencer cet apprentissage actif, prenez une copie de nos fichiers [meta-example.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html), [script.js](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js) et [style.css](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css) , et enregistrez-les sur votre ordinateur dans un même répertoire. Assurez-vous qu'ils sont enregistrés avec les noms et les extensions de fichier corrects. +2. Ouvrez le fichier HTML à la fois dans votre navigateur et votre éditeur de texte. +3. En suivant les informations fournies ci-dessus, ajoutez les éléments {{htmlelement("link")}} et {{htmlelement("script")}} à votre HTML, afin que les CSS et le JavaScript soient appliqués au HTML. -<p>Si a été fait correctement, après avoir enregistré le HTML, puis actualisé la page, vous verrez que les choses ont changé :</p> +Si a été fait correctement, après avoir enregistré le HTML, puis actualisé la page, vous verrez que les choses ont changé : -<p><img alt="Exemple montrant une page sur laquelle on a appliqué du CSS et du JavaScript. Le CSS a rendu la page verte, alors que le JavaScript a ajouté une liste dynamique à la page." src="js-css-exemple.png"></p> + -<ul> - <li>Le JavaScript a ajouté une liste vide à la page. Maintenant, lorsque vous cliquez n'importe où sur la liste, une boîte de dialogue s'ouvre pour vous permettre de saisir un texte. Lorsque vous appuyez sur le bouton OK, un nouvel élément de la liste est ajouté contenant le texte saisi. Lorsque vous cliquez sur un élément de liste existant, la boîte de dialogue affiche son contenu pour vous permettre de le modifier.</li> - <li>Le CSS a rendu l'arrière-plan vert et le texte plus grand. Il a également décrit le contenu que le JavaScript a ajouté à la page (la barre rouge avec la bordure noire est le style que le CSS a ajouté à la liste générée par JS).</li> -</ul> +- Le JavaScript a ajouté une liste vide à la page. Maintenant, lorsque vous cliquez n'importe où sur la liste, une boîte de dialogue s'ouvre pour vous permettre de saisir un texte. Lorsque vous appuyez sur le bouton OK, un nouvel élément de la liste est ajouté contenant le texte saisi. Lorsque vous cliquez sur un élément de liste existant, la boîte de dialogue affiche son contenu pour vous permettre de le modifier. +- Le CSS a rendu l'arrière-plan vert et le texte plus grand. Il a également décrit le contenu que le JavaScript a ajouté à la page (la barre rouge avec la bordure noire est le style que le CSS a ajouté à la liste générée par JS). -<div class="note"> -<p><strong>Note :</strong> Si vous êtes coincé dans cet exercice et que vous ne pouvez pas obtenir le CSS / JS à appliquer, essayez de vérifier notre exemple de page <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a> .</p> -</div> +> **Note :** Si vous êtes coincé dans cet exercice et que vous ne pouvez pas obtenir le CSS / JS à appliquer, essayez de vérifier notre exemple de page [css-and-js.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html) . -<h2 id="Définition_de_la_langue_principale_du_document">Définition de la langue principale du document</h2> +## Définition de la langue principale du document -<p>Enfin, il convient de mentionner que vous pouvez (et devrez vraiment) définir la langue de votre page. Cela peut être fait en ajoutant l'<a href="/fr/docs/Web/HTML/Global_attributes/lang">attribut <code>lang</code></a> à la balise ouvrante HTML (voir <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>.)</p> +Enfin, il convient de mentionner que vous pouvez (et devrez vraiment) définir la langue de votre page. Cela peut être fait en ajoutant l'[attribut `lang`](/fr/docs/Web/HTML/Global_attributes/lang) à la balise ouvrante HTML (voir [meta-example.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html).) -<pre class="brush: html"><html lang="fr"></pre> +```html +<html lang="fr"> +``` -<p>Ceci est utile de plusieurs façons. Votre document sera indexé plus efficacement par les moteurs de recherche si son langage est défini (ce qui lui permet d'apparaître correctement dans les résultats spécifiques à la langue, par exemple) et il est utile pour les personnes visuellement déficientes utilisant un lecteur d'écran (par exemple, le mot « six » existe en français et en anglais, mais se prononce différemment.)</p> +Ceci est utile de plusieurs façons. Votre document sera indexé plus efficacement par les moteurs de recherche si son langage est défini (ce qui lui permet d'apparaître correctement dans les résultats spécifiques à la langue, par exemple) et il est utile pour les personnes visuellement déficientes utilisant un lecteur d'écran (par exemple, le mot « six » existe en français et en anglais, mais se prononce différemment.) -<p>Vous pouvez également définir des sous-sections de votre document pour qu'elles soient reconnues comme étant en différentes langues. Par exemple, nous pourrions définir la partie en langue japonaise pour qu'elle soit reconnue comme telle, de la manière suivante :</p> +Vous pouvez également définir des sous-sections de votre document pour qu'elles soient reconnues comme étant en différentes langues. Par exemple, nous pourrions définir la partie en langue japonaise pour qu'elle soit reconnue comme telle, de la manière suivante : -<pre class="brush: html"><p>Exemple en japonais : <span lang="jp">ご飯が熱い。</span>.</p></pre> +```html +<p>Exemple en japonais : <span lang="jp">ご飯が熱い。</span>.</p> +``` -<p>Ces codes sont définis par la norme <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a>. Vous en trouverez plus sur <a href="https://www.w3.org/International/articles/language-tags/">Etiquettes langues en HTML et XML (en)</a>.</p> +Ces codes sont définis par la norme [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1). Vous en trouverez plus sur [Etiquettes langues en HTML et XML (en)](https://www.w3.org/International/articles/language-tags/). -<h2 id="Résumé">Résumé</h2> +## Résumé -<p>Cela marque la fin de notre tour rapide de l'en-tête HTML — il y a beaucoup plus de possibilités ici, mais un panorama exhaustif serait ennuyeux et susceptible de vous embrouiller à ce stade, nous voulions simplement vous donner une idée des éléments les plus courants. Dans l'article suivant, nous allons étudier les fondamentaux du texte HTML.</p> +Cela marque la fin de notre tour rapide de l'en-tête HTML — il y a beaucoup plus de possibilités ici, mais un panorama exhaustif serait ennuyeux et susceptible de vous embrouiller à ce stade, nous voulions simplement vous donner une idée des éléments les plus courants. Dans l'article suivant, nous allons étudier les fondamentaux du texte HTML. -<p>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}}</p> +{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Getting_started", "Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML")}} -<h2 id="Dans_ce_module">Dans ce module</h2> +## Dans ce module -<ul> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Commencer avec le HTML</a></li> - <li>Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML</li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Création d'hyperliens</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formatage avancé du texte</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Faire une lettre</a></li> - <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li> -</ul> +- [Commencer avec le HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started) +- Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML +- [Fondamentaux du texte HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) +- [Création d'hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) +- [Formatage avancé du texte](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting) +- [Structure de Site Web et de document](/fr/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure) +- [Déboguer de l'HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) +- [Faire une lettre](/fr/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter) +- [Structurer une page de contenu](/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content) |