diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-09-22 13:42:59 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-09-22 13:42:59 +0200 |
| commit | 22b97f7dbf9a84111828b539342454e4dcf3032f (patch) | |
| tree | ed308c1177b6210d6efde8fcea10290055ae5982 | |
| parent | 069b69d302917cb730e0778130014ccd41b04a50 (diff) | |
| download | translated-content-22b97f7dbf9a84111828b539342454e4dcf3032f.tar.gz translated-content-22b97f7dbf9a84111828b539342454e4dcf3032f.tar.bz2 translated-content-22b97f7dbf9a84111828b539342454e4dcf3032f.zip | |
Basic linting (flaw fixing, link updates, gremlins removal) for HTML Intro in LA (#2337)
37 files changed, 283 insertions, 290 deletions
diff --git a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html index 30a0127dc4..4a6d9d8f3a 100644 --- a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html +++ b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -13,19 +13,19 @@ tags: - listes descriptives - sémantique translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting -original_slug: Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte +original_slug: Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting --- <div>{{LearnSidebar}}</div> <div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}</div> -<p class="summary">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="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_à_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> +<p class="summary">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> <table class="learn-box standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Être familiarisé avec les bases du HTML, traitées à la page <a href="https://developer.mozilla.org/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="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a>.</td> + <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> @@ -36,7 +36,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte <h2 id="Listes_descriptives"><span>Listes descriptives</span></h2> -<p>Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser <a href="/en-US/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 <span>listes descriptives</span></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> +<p>Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser <a href="/en-US/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 <span>listes descriptives</span></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> <pre class="notranslate">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). @@ -224,14 +224,14 @@ de citation</em>) indique que le bloc de texte inclus est une citation ét <p>Pour le changer en bloc de citation, on ferait simplement ceci :</p> -<pre class="brush: html notranslate"><blockquote cite="https://developer.mozilla.org/fr/docs/Web/HTML/Element/blockquote"> +<pre class="brush: html notranslate"><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> <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> -<blockquote cite="https://developer.mozilla.org/fr/docs/Web/HTML/Element/blockquote"> +<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> @@ -239,27 +239,27 @@ de citation</em>) indique que le bloc de texte inclus est une citation ét <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> -<pre class="brush: html notranslate"><p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="https://developer.mozilla.org/fr/docs/Web/HTML/Element/q">prévu +<pre class="brush: html notranslate"><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> <p>Le navigateur l'affichera par défaut comme du texte normal entre guillemets pour indiquer une citation, comme ceci :</p> -<p>L'élément citation — <code><q></code> — est <q cite="https://developer.mozilla.org/fr/docs/Web/HTML/Element/q">prévu pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</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> <h3 id="Citations_2">Citations</h3> -<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> +<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> -<pre class="brush: html notranslate"><p>Selon la <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Element/blockquote"> +<pre class="brush: html notranslate"><p>Selon la <a href="/fr/docs/Web/HTML/Element/blockquote"> <cite>page blockquote du MDN</cite></a>: </p> <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> -<p>L'élément citation — <code>&lt;q&gt;</code> — est <q cite="https://developer.mozilla.org/fr/docs/Web/HTML/Element/q">prévu +<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="https://developer.mozilla.org/fr/docs/Web/HTML/Element/q"> + — <a href="/fr/docs/Web/HTML/Element/q"> <cite>page q du MDN</cite></a>.</p></pre> <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> @@ -561,7 +561,7 @@ textarea.onkeyup = function(){ <p>Chris Mills, Manchester, The Grim North, UK</p> </address></pre> -<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> +<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> <pre class="brush: html notranslate"><address> <p>Page écrite par <a href="../authors/chris-mills/">Chris Mills</a>.</p> @@ -589,7 +589,7 @@ textarea.onkeyup = function(){ <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("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> @@ -664,7 +664,7 @@ para.onclick = function() { -<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="https://developer.mozilla.org/fr/docs/Web/HTML/Element">Référence des éléments HTML</a> (la section <a href="https://developer.mozilla.org/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> +<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> <p>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks", "Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML")}}</p> @@ -672,12 +672,12 @@ para.onclick = function() { <ul> <li><a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_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="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</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="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Marking_up_a_letter">Faire une lettre</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content">Structurer une page de contenu</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> diff --git a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/accueil.png b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/accueil.png Binary files differnew file mode 100644 index 0000000000..ee70723c6b --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/accueil.png diff --git a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/bbc-homepage.png b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/bbc-homepage.png Binary files differnew file mode 100644 index 0000000000..1611410da1 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/bbc-homepage.png diff --git a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/dir-struct.png b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/dir-struct.png Binary files differnew file mode 100644 index 0000000000..3319bd4a51 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/dir-struct.png diff --git a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html index 313f7c4061..95ce137c9b 100644 --- a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html +++ b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -17,26 +17,26 @@ 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/formatage-avance-texte", "Apprendre/HTML/Introduction_à_HTML")}}</div> +{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML")}}</div> <p class="summary">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> <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> - <td>Être familiarisé avec les bases du HTML, traitées à la page <a href="https://developer.mozilla.org/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/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a>.</td> + <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> + <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> +<h2 id="Quest-ce_un_hyperlien">Qu'est-ce un hyperlien ?</h2> -<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> +<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> <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> @@ -44,7 +44,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks <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> -<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p> +<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="bbc-homepage.png" style="display: block; margin: 0 auto;"></p> <h2 id="Anatomie_dun_lien">Anatomie d'un lien</h2> @@ -54,13 +54,13 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks <a href="https://www.mozilla.org/fr/">la page d'accueil Mozilla</a>. </p></pre> -<p>qui donne le résultat suivant :</p> +<p>qui donne le résultat suivant :</p> <p>Je suis en train de créer un lien à <a class="ignore-external" href="https://www.mozilla.org/fr/"> la page d'accueil de Mozilla</a>.</p> <h3 id="Ajouter_des_informations_dassistance_avec_lattribut_title">Ajouter des informations d'assistance avec l'attribut title</h3> -<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> +<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> <pre class="brush: html notranslate"><p>Je suis en train de créer un lien à <a href="https://www.mozilla.org/fr/" @@ -68,7 +68,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks mission de Mozilla et la manière de contribuer">la page d'accueil Mozilla</a>. </p></pre> -<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> +<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> <p>Je suis en train de créer un lien vers <a class="ignore-external" 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> @@ -76,9 +76,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks <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> -<h3 id="Apprentissage_actif_création_de_votre_propre_exemple_de_lien">Apprentissage actif : création de votre propre exemple de lien</h3> +<h3 id="Apprentissage_actif_création_de_votre_propre_exemple_de_lien">Apprentissage actif : création de votre propre exemple de lien</h3> -<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> +<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> <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> @@ -88,14 +88,14 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks <h3 id="Liens_de_niveau_bloc">Liens de niveau bloc</h3> -<p>Comme mentionné précédemment, vous pouvez transformer à peu près tout contenu en un lien, même des <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_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> +<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> <pre class="brush: html notranslate"><a href="https://www.mozilla.org/fr/"> <img src="mozilla-image.png" alt="logo mozilla pointant sur la page d'accueil mozilla"> </a></pre> <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> +<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> <h2 id="Une_brève_présentation_des_URL_et_des_chemins">Une brève présentation des URL et des chemins</h2> @@ -106,26 +106,26 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks <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> -<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="https://mdn.mozillademos.org/files/15958/dir-struct.png" style="display: block; height: 381px; margin: 0px auto; width: 882px;"></p> +<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" style="display: block; margin: 0px auto;"></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> -<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> +<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> <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> + <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> - <pre class="brush: html notranslate"><p>Voulez‑vous rencontrer un membre du personnel en particulier ? + <pre class="brush: html notranslate"><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> + <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> <pre class="brush: html notranslate"><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> + <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> <pre class="brush: html notranslate"><p>Voici un lien vers mon <a href="../pdfs/project-brief.pdf">sommaire de projet</a>.</p></pre> </li> @@ -137,31 +137,31 @@ Voyez comment faire sur notre page <a href="contacts.html">Contacts</a& <h3 id="Fragments_de_documents">Fragments de documents</h3> -<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> +<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> <pre class="brush: html notranslate"><h2 id="Adresse_mailing">Adresse de mailing</h2></pre> -<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> +<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> -<pre class="brush: html notranslate"><p>Vous voulez nous écrire une lettre ? Utilisez notre <a href="contacts.html#Adresse_mailing">adresse de contact</a>.</p></pre> +<pre class="brush: html notranslate"><p>Vous voulez nous écrire une lettre ? Utilisez notre <a href="contacts.html#Adresse_mailing">adresse de contact</a>.</p></pre> -<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> +<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> <pre class="brush: html notranslate"><p>Vous trouverez n l'<a href="#Adresse_mailing">adresse de mailing</a> de notre société au bas de cette page.</p></pre> <h3 id="URL_absolue_vs._URL_relative">URL absolue vs. URL relative</h3> -<p>Deux termes que vous rencontrerez sur le Web sont <strong>URL absolue</strong> et <strong>URL relative</strong> :</p> +<p>Deux termes que vous rencontrerez sur le Web sont <strong>URL absolue</strong> et <strong>URL relative</strong> :</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> <p>Une URL absolue pointera toujours vers le même emplacement, quel que soit l'endroit où elle est utilisée.</p> -<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> +<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> -<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> +<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> -<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> +<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> <h2 id="Meilleures_pratiques_de_liens">Meilleures pratiques de liens</h2> @@ -172,7 +172,7 @@ Voyez comment faire sur notre page <a href="contacts.html">Contacts</a& <h3 id="Utilisez_une_formulation_claire_des_liens">Utilisez une formulation claire des liens</h3> -<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> +<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> <ul> <li>les utilisateurs de lecteurs d'écran aiment à sauter de lien en lien sur la page, et à les lire hors contexte.</li> @@ -180,7 +180,7 @@ Voyez comment faire sur notre page <a href="contacts.html">Contacts</a& <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> -<p>Regardons un exemple particulier :</p> +<p>Regardons un exemple particulier :</p> <p><em><strong>Bon</strong> texte de lien:</em> <a href="https://firefox.com">Télécharger Firefox</a></p> @@ -188,7 +188,7 @@ Voyez comment faire sur notre page <a href="contacts.html">Contacts</a& Télécharger Firefox </a></p></pre> -<p><em><strong>Mauvais</strong> texte de lien :</em> <a href="https://firefox.com/">Cliquer ici </a>pour télécharger Firefox</p> +<p><em><strong>Mauvais</strong> texte de lien :</em> <a href="https://firefox.com/">Cliquer ici </a>pour télécharger Firefox</p> <pre class="brush: html notranslate"><p><a href="https://firefox.com/"> Cliquer ici @@ -196,57 +196,57 @@ Voyez comment faire sur notre page <a href="contacts.html">Contacts</a& pour télécharger Firefox</p> </pre> -<p>Autres conseils :</p> +<p>Autres conseils :</p> <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> + <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> <h3 id="Utilisez_des_liens_relatifs_partout_où_cest_possible">Utilisez des liens relatifs partout où c'est possible</h3> -<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> +<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> <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="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Le_fonctionnement_du_Web">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> + <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> -<h3 id="Liaison_vers_des_ressources_non-HTML_signalez‑les_clairement">Liaison vers des ressources non-HTML : signalez‑les clairement</h3> +<h3 id="Liaison_vers_des_ressources_non-HTML_signalez‑les_clairement">Liaison vers des ressources non-HTML : signalez‑les clairement</h3> -<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> +<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> <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> -<p>Voici quelques exemples suggérant les genres de texte pouvant être employé :</p> +<p>Voici quelques exemples suggérant les genres de texte pouvant être employé :</p> -<pre class="brush: html notranslate"><p><a href="http://www.exemple.com/rapport-volumineux.pdf"> +<pre class="brush: html notranslate"><p><a href="http://www.exemple.com/rapport-volumineux.pdf"> Télécharger le rapport des ventes (PDF, 10Mo) </a></p> -<p><a href="http://www.exemple.com/flux-video/"<code> target="_blank"</code>> +<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> -<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> <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> -<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> +<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> <pre class="notranslate"><code><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></code></pre> -<h2 id="Apprentissage_actif_création_dun_menu_de_navigation">Apprentissage actif : création d'un menu de navigation</h2> +<h2 id="Apprentissage_actif_création_dun_menu_de_navigation">Apprentissage actif : création d'un menu de navigation</h2> <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> @@ -259,7 +259,7 @@ pour télécharger Firefox</p> <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> -<p>Vous devez :</p> +<p>Vous devez :</p> <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> @@ -268,9 +268,9 @@ pour télécharger Firefox</p> <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> -<p>L'exemple terminé devrait finir par ressembler à quelque chose comme ce qui suit :</p> +<p>L'exemple terminé devrait finir par ressembler à quelque chose comme ce qui suit :</p> -<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="https://mdn.mozillademos.org/files/15957/accueil.png" style="display: block; height: 424px; margin: 0px auto; width: 772px;"></p> +<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" style="display: block; margin: 0px auto;"></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> @@ -280,12 +280,12 @@ pour télécharger Firefox</p> <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> -<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> +<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> <pre class="brush: html notranslate"><a href="mailto:nullepart@mozilla.org">Envoyer un courriel à nullepart</a> </pre> -<p>Ceci donne un résultat qui ressemble à ceci : <a href="mailto:nowhere@mozilla.org">Envoyer un courriel à nullepart</a>.</p> +<p>Ceci donne un résultat qui ressemble à ceci : <a href="mailto:nowhere@mozilla.org">Envoyer un courriel à nullepart</a>.</p> <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> @@ -293,17 +293,17 @@ pour télécharger Firefox</p> <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> -<p>Voici un exemple incluant cc (carbon copy), bcc (blind cc), subject (sujet) et body :</p> +<p>Voici un exemple incluant cc (carbon copy), bcc (blind cc), subject (sujet) et body :</p> <pre class="brush: html notranslate"><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> <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="https://developer.mozilla.org/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> +<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> -<p>Voici quelques autres exemples d'URL <code>mailto</code> :</p> +<p>Voici quelques autres exemples d'URL <code>mailto</code> :</p> <ul> <li><a href="mailto:">mailto:</a></li> @@ -315,20 +315,20 @@ pour télécharger Firefox</p> <h2 id="Résumé">Résumé</h2> -<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> +<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> -<div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte", "Apprendre/HTML/Introduction_à_HTML")}}</div> +<div>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals", "Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML")}}</div> <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_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="https://developer.mozilla.org/fr/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/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="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/formatage-avance-texte">Formatage avancé du texte</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Marking_up_a_letter">Faire une lettre</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content">Structurer une page de contenu</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> diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/fr-erreur.png b/files/fr/learn/html/introduction_to_html/debugging_html/fr-erreur.png Binary files differnew file mode 100644 index 0000000000..ab7047f328 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/debugging_html/fr-erreur.png diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/fr-html-errone.png b/files/fr/learn/html/introduction_to_html/debugging_html/fr-html-errone.png Binary files differnew file mode 100644 index 0000000000..737073a12a --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/debugging_html/fr-html-errone.png diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/fr-inspecteur.png b/files/fr/learn/html/introduction_to_html/debugging_html/fr-inspecteur.png Binary files differnew file mode 100644 index 0000000000..df86857d91 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/debugging_html/fr-inspecteur.png diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/fr-liste-erreur.png b/files/fr/learn/html/introduction_to_html/debugging_html/fr-liste-erreur.png Binary files differnew file mode 100644 index 0000000000..9761aae712 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/debugging_html/fr-liste-erreur.png diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/fr-w3c.png b/files/fr/learn/html/introduction_to_html/debugging_html/fr-w3c.png Binary files differnew file mode 100644 index 0000000000..251c80b696 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/debugging_html/fr-w3c.png diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/index.html b/files/fr/learn/html/introduction_to_html/debugging_html/index.html index 870342584b..34d758d938 100644 --- a/files/fr/learn/html/introduction_to_html/debugging_html/index.html +++ b/files/fr/learn/html/introduction_to_html/debugging_html/index.html @@ -23,7 +23,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Être familiarisé avec les bases du HTML, traitées aux pages <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML,</a> <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_à_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> + <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> @@ -36,9 +36,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_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> -<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="https://mdn.mozillademos.org/files/15991/fr-erreur.png" style="display: block; height: 506px; margin: 0px auto; width: 738px;">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> +<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" style="display: block; margin: 0px auto;">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> -<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> +<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> <h2 id="HTML_et_le_débogage">HTML et le débogage</h2> @@ -69,7 +69,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_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="https://mdn.mozillademos.org/files/15994/fr-HTML-errone.png" style="display: block; height: 413px; margin: 0px auto; width: 618px;"></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" style="display: block; margin: 0px auto;"></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> @@ -91,7 +91,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML lien à la page d'accueil de Mozilla</a> </ul></pre> </li> - <li>Revoyons les problèmes : + <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> @@ -100,7 +100,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML </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="https://mdn.mozillademos.org/files/15993/fr-inspecteur.png" style="display: block; height: 722px; margin: 0px auto; width: 827px;"></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" style="display: block; margin: 0px auto;"></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> @@ -127,7 +127,7 @@ en HTML. Voici un exemple :</strong> <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> -<p><img alt="La page d'accueil du validateur HTML" src="https://mdn.mozillademos.org/files/15995/fr-w3c.png" style="display: block; height: 974px; margin: 0px auto; width: 1072px;"></p> +<p><img alt="La page d'accueil du validateur HTML" src="fr-w3c.png" style="display: block; margin: 0px auto;"></p> <p>Pour définir le HTML à valider, vous pouvez donner une adresse web (<em><span>Validate by</span> 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> @@ -144,7 +144,7 @@ en HTML. Voici un exemple :</strong> <p>Cela vous donnera une liste d'erreurs et autres informations.</p> -<p><img alt="La liste des résultats de la validation de HTML par le service de validation du W3C." src="https://mdn.mozillademos.org/files/15996/fr-liste-erreur.png" style="display: block; height: 553px; margin: 0px auto; width: 682px;"></p> +<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" style="display: block; margin: 0px auto;"></p> <h4 id="Interprétation_des_messages_d'erreur">Interprétation des messages d'erreur</h4> @@ -152,7 +152,7 @@ en HTML. Voici un exemple :</strong> <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>« 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 : @@ -169,7 +169,7 @@ en HTML. Voici un exemple :</strong> <p>Vous saurez que toutes vos erreurs sont corrigées quand vous verrez la bannière suivante dans la sortie <span>: </span></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="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></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" style="display: block; margin: 0 auto;"></p> <h2 id="Résumé">Résumé</h2> @@ -182,13 +182,13 @@ en HTML. Voici un exemple :</strong> <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Getting_started">Commencer avec le HTML</a></li> - <li><a href="/fr/Apprendre/HTML/Introduction_à_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="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks">Creation d'hyperliens</a></li> - <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte">Formatage avancé du texte</a></li> - <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> + <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/Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter">Faire une Lettre</a></li> - <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content">Structurer une page de contenu</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> diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/ecran.png b/files/fr/learn/html/introduction_to_html/document_and_website_structure/ecran.png Binary files differnew file mode 100644 index 0000000000..7df1c6731c --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/ecran.png diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/fr-liste.png b/files/fr/learn/html/introduction_to_html/document_and_website_structure/fr-liste.png Binary files differnew file mode 100644 index 0000000000..95302684a7 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/fr-liste.png diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/fr-map.png b/files/fr/learn/html/introduction_to_html/document_and_website_structure/fr-map.png Binary files differnew file mode 100644 index 0000000000..949f0cbd36 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/fr-map.png diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/fr-structure.png b/files/fr/learn/html/introduction_to_html/document_and_website_structure/fr-structure.png Binary files differnew file mode 100644 index 0000000000..1aaa61960c --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/fr-structure.png diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/fr-tri.png b/files/fr/learn/html/introduction_to_html/document_and_website_structure/fr-tri.png Binary files differnew file mode 100644 index 0000000000..3d26c82006 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/fr-tri.png diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/fr_commun.png b/files/fr/learn/html/introduction_to_html/document_and_website_structure/fr_commun.png Binary files differnew file mode 100644 index 0000000000..f09e57b096 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/fr_commun.png diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html index 9bc182c45b..37fcd02cc2 100644 --- a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html +++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -15,16 +15,16 @@ 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/formatage-avance-texte", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML","Apprendre/HTML/Introduction_à_HTML")}}<br> - </div> +{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML","Apprendre/HTML/Introduction_à_HTML")}}<br> + </div> -<p class="summary">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> +<p class="summary">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> <table class="learn-box standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Être familiarisé avec les bases du HTML, traitées à la page <a href="https://developer.mozilla.org/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="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_à_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> + <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> @@ -45,7 +45,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structur <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> + <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> @@ -56,7 +56,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structur Un « site web typique » pourrait ressembler à quelque chose comme ceci :</dd> </dl> -<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="https://mdn.mozillademos.org/files/15971/ecran.png" style="display: block; height: 855px; margin: 0px auto; width: 1298px;"></p> +<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" style="display: block; margin: 0px auto;"></p> <h2 id="HTML_pour_structurer_un_contenu">HTML pour structurer un contenu</h2> @@ -68,7 +68,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structur <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> -<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="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_à_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>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> @@ -169,21 +169,21 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Document_and_website_structur <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="https://developer.mozilla.org/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> +<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="/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy">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('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="/en-US/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/Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML#Ajouter un titre">titles et headings</a>).</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>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> @@ -193,7 +193,7 @@ alors qu'il titubait en travers de la porte <span class="editor-note"> <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> +<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> @@ -226,7 +226,7 @@ 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> -<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="/en-US/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> +<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="/en-US/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> <p>Il y avait une fois une fille nommée Nell<br> Qui aimait écrire du HTML<br> @@ -251,11 +251,11 @@ rendaient de ses marquages la lecture inélégante.</p></pre> <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> <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="https://mdn.mozillademos.org/files/15972/fr_commun.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></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="https://mdn.mozillademos.org/files/15973/fr-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></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="https://mdn.mozillademos.org/files/15974/fr-liste.png" style="border-style: solid; border-width: 1px; display: block; height: 718px; margin: 0px auto; width: 600px;"></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="https://mdn.mozillademos.org/files/15975/fr-tri.png" style="border-style: solid; border-width: 1px; display: block; height: 625px; margin: 0px auto; width: 600px;"></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="https://mdn.mozillademos.org/files/15976/fr-map.png" style="border-style: solid; border-width: 1px; display: block; height: 885px; margin: 0px auto; width: 600px;"></li> + <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" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></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" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></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" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></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" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></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" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></li> </ol> <h3 id="Apprentissage_actif_créez_la_cartographie_de_votre_propre_site">Apprentissage actif : créez la cartographie de votre propre site</h3> @@ -273,7 +273,7 @@ rendaient de ses marquages la lecture inélégante.</p></pre> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Using HTML sections and outlines </a>: Guide avancé des éléments de la sémantique et des algorithmes descriptifs du HTML5.</li> + <li><a href="/en-US/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> <p>{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Advanced_text_formatting", "Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_à_HTML")}}</p> @@ -281,13 +281,13 @@ rendaient de ses marquages la lecture inélégante.</p></pre> <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_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="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/formatage-avance-texte">Formatage avancé du texte</a></li> + <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="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Marking_up_a_letter">Faire une lettre</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content">Structurer une page de contenu</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> diff --git a/files/fr/learn/html/introduction_to_html/getting_started/attribut-chat-grincheux.png b/files/fr/learn/html/introduction_to_html/getting_started/attribut-chat-grincheux.png Binary files differnew file mode 100644 index 0000000000..1c4e68e826 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/getting_started/attribut-chat-grincheux.png diff --git a/files/fr/learn/html/introduction_to_html/getting_started/chat-grincheuxl.png b/files/fr/learn/html/introduction_to_html/getting_started/chat-grincheuxl.png Binary files differnew file mode 100644 index 0000000000..0c854eb81b --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/getting_started/chat-grincheuxl.png diff --git a/files/fr/learn/html/introduction_to_html/getting_started/fr-capture-modele.png b/files/fr/learn/html/introduction_to_html/getting_started/fr-capture-modele.png Binary files differnew file mode 100644 index 0000000000..d09f3e8b7e --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/getting_started/fr-capture-modele.png diff --git a/files/fr/learn/html/introduction_to_html/getting_started/index.html b/files/fr/learn/html/introduction_to_html/getting_started/index.html index 0c16653dfe..5636377789 100644 --- a/files/fr/learn/html/introduction_to_html/getting_started/index.html +++ b/files/fr/learn/html/introduction_to_html/getting_started/index.html @@ -18,13 +18,13 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started <div>{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}</div> -<p class="summary">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> +<p class="summary">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> <table class="learn-box standard-table"> <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Notions sur le fonctionnement d'un ordinateur, avoir installé les <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">logiciels de base</a> et savoir <a href="https://developer.mozilla.org/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers">gérer les fichiers</a>.</td> + <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> @@ -35,7 +35,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started <h2 id="Qu'est_ce_que_le_HTML">Qu'est ce que le HTML ?</h2> -<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> +<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> <pre>Mon chat est très grincheux</pre> @@ -51,7 +51,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started <p>Regardons notre élément paragraphe d'un peu plus près :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14739/chat-grincheuxl.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> +<p><img alt="" src="chat-grincheuxl.png" style="display: block; margin: 0px auto;"></p> <p>Les principales parties de notre élément sont :</p> @@ -64,7 +64,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Getting_started <h3 id="Apprentissage_actif_créer_votre_premier_élément_HTML">Apprentissage actif : créer votre premier élément HTML</h3> -<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> +<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> <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> @@ -192,7 +192,7 @@ textarea.onkeyup = function(){ <h3 id="Eléments_imbriqués">Eléments imbriqués</h3> -<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> +<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> <pre class="brush: html"><p>Mon chat est <strong>très</strong> grincheux.</p></pre> @@ -208,7 +208,7 @@ textarea.onkeyup = function(){ <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> + <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> <p>Prenez l'exemple suivant :</p> @@ -218,7 +218,7 @@ textarea.onkeyup = function(){ <p>quatrième</p><p>cinquième</p><p>sixième</p> </pre> -<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="https://developer.mozilla.org/fr/Apprendre/CSS/Introduction_%C3%A0_CSS">style CSS </a>par défaut du navigateur qui s'applique aux paragraphes).</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> <p>{{ EmbedLiveSample('Éléments_bloc_vs_en_ligne', 700, 200, "", "") }}</p> @@ -227,11 +227,11 @@ textarea.onkeyup = function(){ </div> <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="https://developer.mozilla.org/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> +<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> <div class="note"> -<p><strong>Note </strong>: Vous trouverez des pages de référence utiles incluant des listes d'<a href="https://developer.mozilla.org/fr/docs/Web/HTML/%C3%89l%C3%A9ments_en_bloc">éléments de niveau bloc</a> et d'<a href="https://developer.mozilla.org/fr/docs/Web/HTML/%C3%89l%C3%A9ments_en_ligne">éléments en ligne</a>.</p> +<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> <h3 id="Éléments_vides">Éléments vides</h3> @@ -240,7 +240,7 @@ textarea.onkeyup = function(){ <pre class="brush: html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" /></pre> -<p>Cela affichera l'élément suivant sur votre page :</p> +<p>Cela affichera l'élément suivant sur votre page :</p> <p>{{ EmbedLiveSample('Éléments_vides', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> @@ -248,9 +248,9 @@ textarea.onkeyup = function(){ <p>Les éléments peuvent aussi avoir des attributs, qui comme suit:</p> -<p><img alt='&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/14741/attribut-chat-grincheux.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> +<p><img alt='&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>' src="attribut-chat-grincheux.png" style="display: block; margin: 0px auto;"></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> +<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> <p>Pour créer un attribut, il faut :</p> @@ -262,11 +262,11 @@ textarea.onkeyup = function(){ <h3 id="Apprentissage_actif_ajouter_des_attributs_à_un_élément">Apprentissage actif : ajouter des attributs à un élément</h3> -<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> +<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> <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>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> @@ -397,7 +397,7 @@ textarea.onkeyup = function(){ <h3 id="Les_attributs_booléens">Les attributs booléens</h3> -<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> +<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> <pre><input type="text" disabled="disabled"></pre> @@ -412,7 +412,7 @@ textarea.onkeyup = function(){ <p>{{ EmbedLiveSample('Les_attributs_booléens', 700, 100) }}</p> -<h3 id="Omettre_des_guillemets_autour_des_valeurs_d'attribut">Omettre des guillemets autour des valeurs d'attribut</h3> +<h3 id="Omettre_des_guillemets_autour_des_valeurs_dattribut">Omettre des guillemets autour des valeurs d'attribut</h3> <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> @@ -420,11 +420,11 @@ textarea.onkeyup = function(){ <p>Cependant, si nous ajoutons l'attribut <code>title</code> dans ce même style, cela devient incorrect :</p> -<pre class="brush: html"><a href=<code>https://www.mozilla.org/</code> title=La page d\'accueil Mozilla >mon site web favori</a></pre> +<pre class="brush: html"><a href=https://www.mozilla.org/ title=La page d\'accueil Mozilla >mon site web favori</a></pre> -<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> +<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> -<p>{{ EmbedLiveSample('Omettre_des_guillemets_autour_des_valeurs_d\'attribut', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample("Omettre_des_guillemets_autour_des_valeurs_dattribut", 700, 100, "", "", "hide-codepen-jsfiddle") }}</p> <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> @@ -436,7 +436,7 @@ textarea.onkeyup = function(){ <a href='http://www.example.com'>Un lien vers mon exemple</a></pre> -<p>Vous devez cependant vous assurer de ne pas les mélanger. Ce qui suit n'est pas correct :</p> +<p>Vous devez cependant vous assurer de ne pas les mélanger. Ce qui suit n'est pas correct :</p> <pre class="brush: html"><a href="http://www.exemple.com'>Un lien vers mon exemple.</a></pre> @@ -444,7 +444,7 @@ textarea.onkeyup = function(){ <pre class="brush: html"><a href="http://www.exemple.com" title="N'est-ce pas drôle ?">Un lien vers mon exemple.</a></pre> -<p>Si vous souhaitez imbriquer le même type de guillemets, vous devez utiliser <a href="/fr/docs/Glossaire/Entity">une entité HTML</a> pour représenter ce caractère spécial.</p> +<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> <h2 id="Anatomie_d'un_document_HTML">Anatomie d'un document HTML</h2> @@ -464,16 +464,16 @@ textarea.onkeyup = function(){ <p>Ici, nous avons :</p> <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 : + <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 : <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> + 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> <h3 id="Apprentissage_actif_ajouter_certaines_fonctionnalités_à_un_document_HTML">Apprentissage actif : ajouter certaines fonctionnalités à un document HTML</h3> @@ -484,7 +484,7 @@ textarea.onkeyup = function(){ <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> + <li>enregistrer le fichier sous <code>index.html</code>.</li> </ol> <div class="note"> @@ -493,14 +493,14 @@ textarea.onkeyup = function(){ <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> -<p><img alt="Une simple page HTML affichant Voici ma page" src="https://mdn.mozillademos.org/files/15943/fr-capture-modele.png" style="display: block; height: 480px; margin: 0px auto; width: 640px;">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> +<p><img alt="Une simple page HTML affichant Voici ma page" src="fr-capture-modele.png" style="display: block; margin: 0px auto;">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> <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="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started#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="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started#É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> + <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> <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> @@ -632,20 +632,20 @@ textarea.onkeyup = function(){ <h3 id="Espace_vide_en_HTML">Espace vide en HTML</h3> -<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> +<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> <pre class="brush: html"><p>Les chiens sont idiots.</p> <p>Les chiens sont - idiots.</p></pre> + idiots.</p></pre> -<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> +<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> -<h2 id="Références_d'entités_inclure_les_caractères_spéciaux_en_HTML">Références d'entités : inclure les caractères spéciaux en HTML</h2> +<h2 id="Références_dentités">Références d'entités : inclure les caractères spéciaux en HTML</h2> -<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> +<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> -<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> +<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> <table class="standard-table"> <thead> @@ -684,19 +684,19 @@ textarea.onkeyup = function(){ <p>En HTML, un paragraphe se définit avec l'élément &lt;p&gt;.</p></pre> -<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> +<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> -<p>{{ EmbedLiveSample('Références_d\'entités_inclure_les_caractères_spéciaux_en_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p> +<p>{{ EmbedLiveSample("Références_dentités", 700, 200, "", "", "hide-codepen-jsfiddle") }}</p> <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> +<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> <h2 id="Commentaires_en_HTML">Commentaires en HTML</h2> -<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> +<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> -<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> +<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> <pre class="brush: html"><p>Je ne suis pas dans un commentaire</p> @@ -708,16 +708,16 @@ textarea.onkeyup = function(){ <h2 id="Résumé">Résumé</h2> -<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> +<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> <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="https://developer.mozilla.org/fr/Apprendre/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> +<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> <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/HTML/Appliquer_des_couleurs">Appliquer une couleur aux éléments HTML avec les CSS</a></li> + <li><a href="/fr/docs/Web/HTML/Applying_color">Appliquer une couleur aux éléments HTML avec les CSS</a></li> </ul> <div>{{NextMenu("Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML", "Apprendre/HTML/Introduction_à_HTML")}}</div> @@ -726,12 +726,12 @@ textarea.onkeyup = function(){ <ul> <li>Commencer avec le HTML</li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_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="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/formatage-avance-texte">Formatage avancé du texte</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Marking_up_a_letter">Faire une lettre</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content">Structurer une page de contenu</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><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structurer une page de contenu</a></li> </ul> diff --git a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html index e92becce4a..b0755184e9 100644 --- a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html +++ b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -42,7 +42,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals <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> -<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p> +<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p> <p>Le contenu structuré facilite la lecture et la rend plus agréable.</p> @@ -84,18 +84,18 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals <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> -<h3 id="Pourquoi_faut-il_structurer_un_document">Pourquoi faut-il structurer un document ?</h3> +<h3 id="Pourquoi_faut-il_structurer_un_document">Pourquoi faut-il structurer un document ?</h3> <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> <p>Cependant, si l'on ouvre ce document dans un navigateur, il sera affiché sous forme d'un gros bloc de texte !</p> -<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="https://mdn.mozillademos.org/files/15951/recette.png" style="display: block; height: 429px; margin: 0px auto; width: 640px;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></p> +<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" style="display: block; margin: 0px auto;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></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> <ul> - <li>Les visiteurs d'une page web la parcourent pour trouver le contenu pertinent. Par conséquent, ils ne lisent souvent 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 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> @@ -249,7 +249,7 @@ textarea.onkeyup = function(){ <h2 id="Listes">Listes</h2> -<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> +<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> <h3 id="Listes_non-ordonnées">Listes non-ordonnées</h3> @@ -285,7 +285,6 @@ houmous <div class="hidden"> <h6 id="Playable_code_2">Playable code</h6> -<p> </p> <pre class="brush: html"><h2>Live output</h2> @@ -434,7 +433,6 @@ Roulez sur 300 mètres, l'école est sur votre droite</pre> <div class="hidden"> <h6 id="Playable_code_3">Playable code</h6> -<p> </p> <pre class="brush: html"><h2>Sortie directe</h2> @@ -574,7 +572,7 @@ textarea.onkeyup = function(){ <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. + 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. 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. @@ -592,13 +590,13 @@ textarea.onkeyup = function(){ Enlever les graines et la tige du poivron, le hacher grossièrement. Mettre tous les ingrédients dans un robot et mixer jusqu'à l'obtention d'une pâte. Si vous voulez un houmous grenu, ne le mixez pas trop longtemps. - Si vous voulez un houmous lisse, mixez-le plus longtemps. + Si vous voulez un houmous lisse, mixez-le plus longtemps. 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. Conservation - 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. + 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> @@ -826,7 +824,6 @@ body { background: #f5f9fa; }</pre> -<p> </p> <pre class="brush: js">var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -957,24 +954,20 @@ textarea.onkeyup = function(){ <h2 id="Résumé">Résumé</h2> -<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/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks">créer des hyperliens</a>, qui est peut-être l'élément le plus important sur le Web.</p> +<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> <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> -<p> </p> - <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Getting_started">Commencer avec le HTML</a></li> - <li><a href="/fr/Apprendre/HTML/Introduction_à_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/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/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks">Creation d'hyperliens</a></li> - <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte">Formatage avancé du texte</a></li> - <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter">Faire une Lettre</a></li> - <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content">Structurer une page de contenu</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><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> - -<p> </p> diff --git a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/recette.png b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/recette.png Binary files differnew file mode 100644 index 0000000000..5f22d887e6 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/recette.png diff --git a/files/fr/learn/html/introduction_to_html/index.html b/files/fr/learn/html/introduction_to_html/index.html index 92054d53c3..fdd62cd744 100644 --- a/files/fr/learn/html/introduction_to_html/index.html +++ b/files/fr/learn/html/introduction_to_html/index.html @@ -16,35 +16,35 @@ original_slug: Apprendre/HTML/Introduction_à_HTML --- <div>{{LearnSidebar}}</div> -<p class="summary">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> +<p class="summary">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> <h2 id="Prérequis">Prérequis</h2> -<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/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">cet article</a> et comprendre comment créer et gérer des fichiers tel qu’expliqué dans <a href="/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">cet autre article</a> — ces deux articles font partie du module <a href="/fr/Apprendre/Commencer_avec_le_web">Démarrer avec le Web</a> qui s’adresse aux débutants.</p> +<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> <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> +<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> <h2 id="Guides">Guides</h2> -<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> +<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> <dl> - <dt><a href="/fr/Apprendre/HTML/Introduction_à_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/Apprendre/HTML/Introduction_à_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/Apprendre/HTML/Introduction_à_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/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks">Créer des hyperliens</a></dt> + <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/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte">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/Apprendre/HTML/Introduction_à_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/Apprendre/HTML/Introduction_à_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/Apprendre/HTML/Introduction_à_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> + <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> <h2 id="Évaluations">Évaluations</h2> @@ -52,15 +52,15 @@ original_slug: Apprendre/HTML/Introduction_à_HTML <p>Les exercices suivants vous permettront de tester votre compréhension des bases du HTML couvertes dans les guides ci‑dessus.</p> <dl> - <dt><a href="/fr/Apprendre/HTML/Introduction_à_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/Apprendre/HTML/Introduction_à_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> + <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> <h2 id="Voir_également">Voir également</h2> <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> + <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> diff --git a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/fr-lettre.png b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/fr-lettre.png Binary files differnew file mode 100644 index 0000000000..0c0d8e8b20 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/fr-lettre.png diff --git a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html index 8dac71d695..748b35d142 100644 --- a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html +++ b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.html @@ -22,7 +22,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter <tbody> <tr> <th scope="row">Prérequis :</th> - <td>Avant de se lancer dans cet exercice, vous devez déja avoir travaillé <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML, </a><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML">Qu'y-a-t-il dans l'en-tête ? Métadonnées en HTML, </a><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML, </a><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a> et <a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/formatage-avance-texte">Formatage avancé du texte</a>.</td> + <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> @@ -43,7 +43,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter <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>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> @@ -56,7 +56,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter <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>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> @@ -81,7 +81,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter <p>La capture d'écran suivante montre ce à quoi la lettre devrait ressembler après le balisage.</p> -<p><img alt="Présentation de la lettre" src="https://mdn.mozillademos.org/files/15997/fr-lettre.png"></p> +<p><img alt="Présentation de la lettre" src="fr-lettre.png"></p> <h2 id="Évaluation">Évaluation</h2> @@ -92,13 +92,13 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Getting_started">Commencer avec le HTML</a></li> - <li><a href="/fr/Apprendre/HTML/Introduction_à_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="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks">Creation d'hyperliens</a></li> - <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte">Formatage avancé du texte</a></li> - <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li><a href="/fr/Apprendre/HTML/Introduction_à_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> + <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/Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content">Structurer une page de contenu</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> diff --git a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html index 08e1029fa2..e3ce2ceabc 100644 --- a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html +++ b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -74,9 +74,9 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content <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> -<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="https://mdn.mozillademos.org/files/15998/oiseaux.png" style="display: block; height: 1070px; margin: 0px auto; width: 1273px;"></p> +<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" style="display: block; margin: 0px auto;"></p> -<h2 id="ÉvaluationEdit">Évaluation<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Marking_up_a_letter$edit#Évaluation" rel="nofollow, noindex"><span>Edit</span></a></h2> +<h2 id="Évaluation">Évaluation</h2> <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> @@ -86,12 +86,12 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content <ul> <li><a href="/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_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="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/formatage-avance-texte">Formatage avancé du texte</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Marking_up_a_letter">Faire une lettre</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> diff --git a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/oiseaux.png b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/oiseaux.png Binary files differnew file mode 100644 index 0000000000..7bd13cc550 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/oiseaux.png diff --git a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/fr-bookmarked.png b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/fr-bookmarked.png Binary files differnew file mode 100644 index 0000000000..7d7d0ed491 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/fr-bookmarked.png diff --git a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/fr-element-title.png b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/fr-element-title.png Binary files differnew file mode 100644 index 0000000000..5214687439 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/fr-element-title.png diff --git a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/fr-google.png b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/fr-google.png Binary files differnew file mode 100644 index 0000000000..6e9e84d8fd --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/fr-google.png diff --git a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/fr-library.png b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/fr-library.png Binary files differnew file mode 100644 index 0000000000..3b2291550e --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/fr-library.png diff --git a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/fr-meta-iso.png b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/fr-meta-iso.png Binary files differnew file mode 100644 index 0000000000..fd1fc2e6d1 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/fr-meta-iso.png diff --git a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/fr-meta-utf8.png b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/fr-meta-utf8.png Binary files differnew file mode 100644 index 0000000000..a831965447 --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/fr-meta-utf8.png diff --git a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html index 4910afb521..8bb80d773c 100644 --- a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html +++ b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -14,7 +14,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML <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="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_à_HTML/Getting_started">Commencer avec le HTML</a></td> + <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> @@ -25,7 +25,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML <h2 id="Quest-ce_que_len-tête_de_HTML">Qu'est-ce que l'en-tête de HTML ?</h2> -<p>Revoyons le document HTML de base de l' <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">article précédent</a>:</p> +<p>Revoyons le document HTML de base de l' <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#anatomy_of_an_html_document">article précédent</a>:</p> <pre class="brush: html notranslate"><!DOCTYPE html> <html> @@ -38,28 +38,28 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML </body> </html></pre> -<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> +<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> <pre class="brush: html notranslate"><head> <meta charset="utf-8"> <title>Ma page test</title> </head></pre> -<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="https://developer.mozilla.org/en-US/docs/Learn/Discover_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> +<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="/en-US/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> <h2 id="Ajouter_un_titre">Ajouter un titre</h2> -<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> +<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> <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("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> -<h3 id="Apprentissage_actif_inspection_dun_exemple_simple">Apprentissage actif : inspection d'un exemple simple </h3> +<h3 id="Apprentissage_actif_inspection_dun_exemple_simple">Apprentissage actif : inspection d'un exemple simple </h3> <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 : + <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 : <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> @@ -67,7 +67,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML </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="https://mdn.mozillademos.org/files/15944/fr-element-title.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;">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> + <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" style="display: block; margin: 0px auto;">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> @@ -76,13 +76,13 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML <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> -<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="https://mdn.mozillademos.org/files/15945/fr-bookmarked.png" style="display: block; height: 375px; margin: 0px auto; width: 600px;"></p> +<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" style="display: block; margin: 0px auto;"></p> <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> -<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> +<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> <h3 id="Définition_de_lencodage_des_caractères_du_document">Définition de l'encodage des caractères du document</h3> @@ -92,12 +92,12 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML <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> -<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="https://mdn.mozillademos.org/files/15946/fr-meta-utf8.png" style="display: block; height: 404px; margin: 0px auto; width: 657px;">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> +<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" style="display: block; margin: 0px auto;">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> -<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="https://mdn.mozillademos.org/files/15947/fr-meta-ISO.png" style="display: block; height: 400px; margin: 0px auto; width: 657px;"></p> +<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" style="display: block; margin: 0px auto;"></p> <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> +<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> @@ -106,12 +106,12 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/The_head_metadata_in_HTML <pre class="brush: html notranslate"><p>Japanese example: ご飯が熱い。</p></pre> -<h3 id="Ajouter_le_nom_de_lauteur_et_une_description">Ajouter le nom de l'auteur et une description</h3> +<h3 id="Ajouter_le_nom_de_lauteur_et_une_description">Ajouter le nom de l'auteur et une description</h3> <p><span id="result_box" lang="fr"><span>De nombreux éléments <code><meta></code> icontiennent les attributs <code>name</code> et <code>content</code> :</span></span></p> <ul> - <li><code>name</code> définit le type de méta élément ; le type d'informations contenu.</li> + <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> @@ -124,14 +124,14 @@ savoir pour commencer le développement de pages webs et d'applications</span><s <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> -<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="https://developer.mozilla.org/fr/docs/Glossaire/SEO">Search Engine Optimization</a> ou {{glossary("SEO")}} — optimisation du moteur de recherche.)</p> +<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> <h3 id="Apprentissage_actif_utilisation_des_descriptions_dans_les_moteurs_de_recherche.">Apprentissage actif : utilisation des descriptions dans les moteurs de recherche.</h3> <p>La description est aussi utilisée dans le résultat des moteurs de recherche. Faisons un exercice pour mieux comprendre.</p> <ol> - <li>Allez sur la page d'accueil de <a href="https://developer.mozilla.org/fr/">Mozilla Developer Network</a>.</li> + <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 id="line1"><meta name="description" content="<span><a class="attribute-value">MDN Web Docs fournit @@ -141,13 +141,13 @@ savoir pour commencer le développement de pages webs et d'applications</span><s développeurs à propos des produits Mozilla tels que les outils de développement de Firefox.</a>"></span></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="https://mdn.mozillademos.org/files/15948/fr-google.png" style="border-style: solid; border-width: 1px; display: block; height: 448px; margin: 0px auto; width: 700px;"></p> + <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" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> </li> </ol> <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="http://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> +<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> <div class="note"> @@ -158,7 +158,7 @@ savoir pour commencer le développement de pages webs et d'applications</span><s <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="http://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> +<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> <pre class="brush: html notranslate"><meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png"> <meta property="og:description" content=<span>"<a class="attribute-value">MDN Web Docs fournit des @@ -170,7 +170,7 @@ Mozilla tels que les outils de développement de Firefox.</a>"></span> <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> -<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">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> +<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" style="display: block; margin: 0 auto;">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> <pre class="brush: html notranslate"><meta name="twitter:title" content="Mozilla Developer Network"></pre> @@ -183,7 +183,7 @@ Mozilla tels que les outils de développement de Firefox.</a>"></span> <p>Une favicône peut être ajoutée à votre page de la façon suivante :</p> <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>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 notranslate"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> </li> @@ -191,7 +191,7 @@ Mozilla tels que les outils de développement de Firefox.</a>"></span> <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="https://mdn.mozillademos.org/files/15949/fr-library.png" style="display: block; height: 396px; margin: 0px auto; width: 550px;"></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" style="display: block; margin: 0px auto;"></p> <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> @@ -241,7 +241,7 @@ Mozilla tels que les outils de développement de Firefox.</a>"></span> <p>Si a été fait correctement, après avoir enregistré le HTML, puis actualisé la page, vous verrez que les choses ont changé :</p> -<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="https://mdn.mozillademos.org/files/15950/JS-CSS-exemple.png" style="display: block; height: 475px; margin: 0px auto; width: 568px;"></p> +<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" style="display: block; margin: 0px auto;"></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> @@ -258,7 +258,7 @@ Mozilla tels que les outils de développement de Firefox.</a>"></span> <pre class="brush: html notranslate"><html lang="fr"></pre> -<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> +<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> <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> @@ -275,13 +275,13 @@ Mozilla tels que les outils de développement de Firefox.</a>"></span> <h2 id="Dans_ce_module">Dans ce module</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started">Commencer avec le HTML</a></li> + <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="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/HTML_text_fundamentals">Fondamentaux du texte HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks">Création d'hyperliens</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/formatage-avance-texte">Formatage avancé du texte</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Document_and_website_structure">Structure de Site Web et de document</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Debugging_HTML">Déboguer de l'HTML</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Marking_up_a_letter">Faire une lettre</a></li> - <li><a href="https://developer.mozilla.org/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content">Structurer une page de contenu</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> diff --git a/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/js-css-exemple.png b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/js-css-exemple.png Binary files differnew file mode 100644 index 0000000000..c8e7fe842f --- /dev/null +++ b/files/fr/learn/html/introduction_to_html/the_head_metadata_in_html/js-css-exemple.png |
