diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:36:08 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:36:08 +0100 |
| commit | 39f2114f9797eb51994966c6bb8ff1814c9a4da8 (patch) | |
| tree | 66dbd9c921f56e440f8816ed29ac23682a1ac4ef /files/fr/conflicting/learn/html/introduction_to_html | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.gz translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.bz2 translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.zip | |
unslug fr: move
Diffstat (limited to 'files/fr/conflicting/learn/html/introduction_to_html')
11 files changed, 1934 insertions, 0 deletions
diff --git a/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html new file mode 100644 index 0000000000..db22bdd6f4 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -0,0 +1,143 @@ +--- +title: Afficher du code informatique avec HTML +slug: Apprendre/HTML/Comment/Afficher_du_code_informatique_avec_HTML +tags: + - Beginner + - Guide + - HTML + - Learn +translation_of: >- + Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code +translation_of_original: Learn/HTML/Howto/Display_computer_code_with_HTML +--- +<div class="summary"> +<p>HTML offre différents éléments pour écrire de la documentation technique. Dans cet article, nous aborderons les éléments HTML qui portent sur la représentation de code informatique.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable savoir <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">comment créer un document HTML simple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment utiliser HTML afin de représenter des entrées saisies par un utilisateur, des sorties produites par un système, du code, du texte simple et des variables.</td> + </tr> + </tbody> +</table> + +<h2 id="HTML_et_l'informatique">HTML et l'informatique</h2> + +<p>{{glossary("HTML")}} a été conçu par des informaticiens et il sert donc particulièrement bien ce domaine. De nombreux éléments HTML sont apparus et/ou ont disparu au cours des années. Ici, nous n'aborderons que ceux qui sont en vigueur actuellement :</p> + +<ul> + <li>{{HTMLElement('code')}}</li> + <li>{{HTMLElement('kbd')}}</li> + <li>{{HTMLElement('pre')}}</li> + <li>{{HTMLElement('samp')}}</li> + <li>{{HTMLElement('var')}}.</li> +</ul> + +<h2 id="Le_texte_préformaté">Le texte préformaté</h2> + +<p>Dans un éditeur de texte, la mise en forme s'applique simplement. Il suffit d'utiliser les caractères du clavier, d'appuyer sur la barre d'espace pour indiquer un espace, d'utiliser la touche Entrée pour passer à la ligne, etc. Normalement, chaque lettre a la même largeur et tout est donc bien aligné. Étant donné que ce qui est écrit est écrit avec du texte <em>simple</em> (<em>plain text</em> en anglais), nul besoin de se préoccuper de la couleur du texte, de sa taille de police, de l'italique, etc.</p> + +<p>Un navigateur graphique formate le texte en fonction du code HTML et CSS. Cela fait que beaucoup de blancs (les espaces, les tabulations, les sauts de lignes) sont ignorés. Si vous appuyez sur Entrée lorsque vous tapez du code HTML, le navigateur déduira que vous souhaitez bien aligner votre code HTML. En revanche, pour indiquer clairement qu'on souhaite avoir un nouveau paragraphe, il faudra utiliser le bon élément HTML (en l'occurence {{htmlelement("p")}}).</p> + +<p>Généralement lorsqu'on écrit un article qui porte sur l'informatique, on veut afficher, dans le navigateur, du texte, tel qu'il serait lorsqu'on le saisit dans un éditeur de texte. Pour ce faire, on utilisera l'élément {{htmlelement("pre")}}. Par défaut, un navigateur graphique affichera le texte contenu dans cet élément avec une police dont tous les caractères ont la même largeur (<em>monospace</em>). Toutefois, vous pourrez adapter la mise en forme à votre gré grâce à {{glossary("CSS")}}. Par exemple, lorsque vous lisez des exemples de code sur MDN, nous utilisons l'élément {{htmlelement("pre")}} (auquel on ajoute quelques couleurs CSS pour améliorer la lisibilité).</p> + +<p>On notera qu'on ne peut toujours pas utiliser les caractères réservés (<code><>&</code>), par exemple :</p> + +<pre class="brush: html"><pre> +Un éditeur de texte est pratique car il suffit +d'appuyer sur Entrée pour commencer un nouveau +paragraphe, plutôt que d'avoir à utiliser ces +grossières balises &lt;p&gt; et &lt;/p&gt;. +</pre></pre> + +<p>Cela donnera le résultat suivant :</p> + +<p>{{EmbedLiveSample('Le_texte_préformaté','100%',90)}}</p> + +<div class="note"> +<p>Par défaut, votre éditeur de texte laissera les lignes s'allonger jusqu'à éventuellement dépasser de l'écran. Le retour à la ligne automatique peut toutefois être activé dans la plupart des éditeurs pour garder un œil sur tout le contenu.</p> + +<p>On aura la même chose avec <code><pre></code>. Il existe une propriété CSS intitulée {{cssxref("white-space")}} dont la valeur par défaut est <code>nowrap</code>. Si on veut que le retour à la ligne soit automatique, on utilisera la valeur <code>pre-wrap</code>.</p> +</div> + +<h2 id="Retranscrire_du_code">Retranscrire du code</h2> + +<p>Naturellement, tout le texte préformaté n'est pass du code informatique. Lorsque vous mentionnez du code informatique dans votre document, vous devriez utiliser l'élément {{HTMLElement('code')}} :</p> + +<pre class="brush: html">Un des mots-clés les plus importants est <code>this</code>. +</pre> + +<p>Pour indiquer un bloc de code qui s'étend sur plusieurs lignes, vous pouvez imbriquer un élément {{HTMLElement('code')}} dans un élément {{HTMLElement('pre')}}. Certains script tiers tels que la bibliothèque <a href="https://highlightjs.org">highlight.js</a> utiliseront ces balises pour ajouter de la coloration syntaxique à vos exemples de code :</p> + +<pre class="brush: html"><pre><code class="js"> +function coucou() { + console.log('coucou monde !'); +} +</code></pre></pre> + +<h2 id="Retranscrire_des_entréessorties_(IO)">Retranscrire des entrées/sorties (I/O)</h2> + +<p><em>Les entrées </em>sont les informations qui sont saisies, généralement par les utilisateurs, dans un ordinateur. L'ordinateur traite ces données et renvoie une <em>sortie.</em> On utilise parfois les termes anglais respectifs <em>input</em> et <em>output</em>, voire un acronyme pour désigner l'ensemble : I/O.</p> + +<h3 id="Comment_retranscrire_une_sortie_informatique">Comment retranscrire une sortie informatique</h3> + +<p>L'élément {{HTMLElement('samp')}} indique que l'ordinateur produit un texte :</p> + +<pre class="brush: html">Ensuite, vous verrez affiché <samp>thomas@mon-ordinateur:~$</samp>. +</pre> + +<h3 id="Comment_retranscrire_une_entrée_informatique">Comment retranscrire une entrée informatique</h3> + +<p>L'élément {{htmlelement('kbd')}} était initialement utilisé pour représenter une entrée saisie au clavier (<code>kbd</code> étant pour <em>keyboard</em> qui signifie clavier en anglais). Cependant, aujourd'hui, cet élément peut être utilisé pour représenter d'autres types d'entrées (comme les commandes vocales).</p> + +<p>L'élément {{htmlelement("kbd")}} permet de marquer l'entrée attendue :</p> + +<pre class="brush: html">Saisissez <kbd>ls --color</kbd> sur l'invite du terminal. +</pre> + +<p>Pour indiquer une touche donnée ou une sous-commande particulière, vous pouvez imbriquer {{htmlelement("kbd")}} avec lui-même :</p> + +<pre class="brush: html">Appuyez sur <kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd> pour arrêter le processus. +</pre> + +<p>Dans cet exemple, le premier élément <code><kbd></code> indique la commande entière alors que les éléments imbriqués indiquent les touches à utiliser.</p> + +<h3 id="Assembler_le_tout">Assembler le tout</h3> + +<p>Il arrive souvent de combiner <code><samp></code> et <code><kbd></code>. Par exemple, lorsque l'ordinateur indique des options à l'utilisateur, on pourra imbriquer des éléments <code><samp></code> dans des éléments <code><kbd></code> :</p> + +<pre class="brush: html"><code>Ensuite, choisissez <kbd><samp>Oui</samp></kbd> ou <kbd><samp>Non</samp></kbd></code></pre> + +<p>Inversement, quand l'ordinateur indique quoi faire, on pourra imbrique des éléments <code><kbd></code> dans des éléments <code><samp></code>:</p> + +<pre class="brush: html"><code>Attendez que l'invite indique, <samp>Appuyez sur <kbd>Entrée</kbd> pour continuer.</samp></code></pre> + +<p>Selon <a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-kbd-element">la spécification HTML</a>, il n'est pas nécessaire de jouer profondément sur l'imbrication de ces éléments. L'aspect le plus important de transmettre les informations avec leur sens.</p> + +<h2 id="Les_variables_de_programmes_ou_les_variables_mathématiques">Les variables de programmes ou les variables mathématiques</h2> + +<p>Dans ce cas, on utilisera l'élément {{htmlelement("var")}}. Les variables peuvent être annotées dans le texte principal mais pas dans les fragments de code.</p> + +<pre class="brush: html">Cette fonction utilisera deux paramètres, +<var>x</var> et <var>y</var>. +</pre> + +<div class="note"> +<p>L'élément {{htmlelement("var")}} permet d'écrire des variables pour des formules simples. En revanche, pour les formules complexes, <a href="/fr/docs/Web/MathML">MathML</a> sera beaucoup plus riche et adapté.</p> +</div> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{htmlelement("code")}}</li> + <li>{{htmlelement("kbd")}}</li> + <li>{{htmlelement("pre")}}</li> + <li>{{htmlelement("samp")}}</li> + <li>{{htmlelement("var")}}</li> +</ul> diff --git a/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446/index.html b/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446/index.html new file mode 100644 index 0000000000..99ad7a8733 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446/index.html @@ -0,0 +1,270 @@ +--- +title: Identifier et expliquer des abréviations avec HTML +slug: Apprendre/HTML/Comment/Identifier_et_expliquer_des_abréviations +tags: + - Beginner + - HTML + - Learn + - OpenPractices +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations +translation_of_original: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable +--- +<div class="summary"> +<p>HTML fournit une méthode simple et rapide pour indiquer la présence d'abrévations et pour fournir leur signification au lecteur.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable savoir comment <a href="/fr/Apprendre/HTML/Comment/Créer_un_document_HTML_simple">créer un document HTML simple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre à indiquer des abréviations et des acronymes avec HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="À_propos_des_abréviations">À propos des abréviations</h2> + +<p>Lorsqu'on écrit, on utilise fréquemment des abréviations et des acronymes. Une abréviation est une notation raccourcie : par exemple, on écrit parfois « dev » à la place de « développeur ». Un acronyme est une combinaison, lisible, des initiales d'un groupe de termes, par exemple « NASA » signifie « <em>National Aeronautics and Space Administration</em> ».</p> + +<p>Il est nécessaire de s'assurer que l'abréviation puisse être comprise par les visiteurs de la page. Sur le papier, on explicite généralement la première occurence de l'abréviation en utilisant la forme complète et abrégée avant d'utiliser la forme abrégée pour les occurences suivantes :</p> + +<blockquote>L'Union Européenne (UE) est composée de 28 états et les États-Unis d'Amérique (USA) contient 50 états. Les USA sont une république fédérale et l'UE est une association politique et économique de plusieurs états indépendants.</blockquote> + +<div> +<p>Cette méthode peut parfaitement s'appliquer aux pages web mais HTML fournit un outil supplémentaire pour expliquer une abréviation aux lecteurs d'une page web.</p> +</div> + +<h2 id="L'élément_<abbr>">L'élément <code><abbr></code></h2> + +<p>L'élément HTML<em> abbreviation</em> (pour abréviation en anglais) ({{HTMLElement("abbr")}}) est utilisé pour identifier les abrévations et les acronymes et permettre aux lecteurs qui ne connaitraient pas le terme de lire et comprendre le texte correctement (éventuellement grâce à un lecteur d'écran). Cet élément doit être utilisé dès que possible.</p> + +<div class="note"> +<p><strong>Note :</strong> Si vous entendez parler de l'élément <code><acronym></code>, sachez qu'il est désormais déprécié et qu'il ne devrait donc plus être utilisé car les {{Glossary("navigateur","navigateurs")}} pourraient arrêter de le supporter à tout moment.</p> +</div> + +<pre class="brush: html"><p>Pouvez-vous m'envoyer les documents <abbr>SVP</abbr> ?</p></pre> + +<p>Il est possible d'épeler les abréviations grâce à l'attribut <code>title</code> de l'élément :</p> + +<pre class="brush: html"><p>Pouvez-vous m'envoyer les documents <abbr title="s'il vous plaît">SVP</abbr> ?</p></pre> + +<p>Quand faut-il renseigner l'attribut <code>title</code> ? Ça dépend. Il n'est peut-être pas nécessaire de définir une abrévation comme « SVP » ou lorsqu'une abréviation est utilisée à de nombreuses reprises dans le document. Dans le doute, ajoutez la description complète.</p> + +<div class="note"> +<p><strong>Note :</strong> Pour les langues qui possèdent un « nombre » grammatical et notamment celles qui possèdent plus de deux nombres grammaticaux comme l'Arabe, il faudra utiliser le même nombre grammatical dans l'attribut <code>title</code> que celui de l'élément <code><abbr></code>.</p> +</div> + +<p>Grâce à {{glossary("CSS")}}, vous pouvez ajouter, modifier ou retirer les indications visuelles autour de l'abréviation. Généralement, pour une abréviation, le navigateur affichera le contenu de l'attribut <code>title</code> dans une bulle lors du passage de la souris sur le texte de l'abrévation. Pour l'exemple précédent, on aura ce résultat :</p> + +<p>{{EmbedLiveSample("L'élément_<abbr>",'100%',90)}}</p> + +<div class="note"> +<p><strong>Important : </strong>Si vous souhaitez que vos lecteurs/visiteurs comprennent l'abréviation à coup sûr, ne comptez pas seulement sur l'attribut <code>title</code>. Épelez l'abréviation dans le texte du document lors de la première occurence. En effet, il faut une souris pour pouvoir activer la bulle d'information qui utilisera le texte de <code>title</code>. Dès lors, les personnes qui utilisent un téléphone, un clavier ou un lecteur d'écran pourront plus difficilement (voire pas du tout) accéder à l'explication si celle-ci n'est présente qu'avec <code>title</code>.</p> +</div> + +<h2 id="Exercice">Exercice</h2> + +<p>Afin de mieux connaître l'élément {{HTMLElement('abbr')}}, faisons un léger exercice. Dans le texte qui suit, identifiez les abréviations avec <code><abbr></code> et épelez les avec l'attribut <code>title</code>. Une fois que vous avez fini, cliquez sur « Afficher les résultats » pour voir si vous avez tout trouvé. Ces abréviations peuvent être trouvées dans <a href="/fr/docs/Glossaire">le glossaire</a>.</p> + +<div class="hidden"> +<pre class="brush: html"><div class="exercise"> + <main> + <div class="instruction">Identifiez toutes les abréviations avec l'élément <code>&lt;abbr&gt;</code></div> + <div class="playground"><textarea spellcheck="false"></textarea></div> + <div class="checking"> + <button>Afficher les résultats</button><span class="count"></span> + </div> + <div class="result">Les <abbr title="développeurs">dev</abbr> Web utilisent <abbr title="Hypertext Markup Language">HTML</abbr> pour structurer des documents, <abbr title="Cascading StyleSheet">CSS</abbr> pour les mettre en forme et JavaScript pour ajouter des effets spéciaux grâce à certaines <abbr title="Application Programming Interface">API</abbr> dédiées.</div> + </main> +</div></pre> + +<pre class="brush: css">body { + font: 1em/100% sans-serif; + padding: 0; + margin: 0; +} + +.exercise { + background: #F9FAFB; + border-radius: 5px; + height: 13em; + overflow: hidden; +} + +.instruction, .count { + padding: .5em; + font-style: italic; + font-size: .95em; +} + +.playground { + padding: 0 .5em; +} + +.playground textarea { + display: block; + font-size : 1em; + line-height: 1.5em; + font-family: monospace; + box-sizing: border-box; + width : 100%; + padding : .5em; + height : 9.7em; +} + +.checking { + padding: .5em; +} + +.checking button { + box-sizing: border-box; + box-shadow:inset 0 1px 0 0 #bcd9a3; + background:linear-gradient(to bottom, #b4d665 5%, #89a646 100%); + background-color:#b4d665; + border-radius:5px; + border:1px solid #8aa164; + cursor:pointer; + font-size:1em; + padding:.5em; + text-decoration:none; +} +.checking button:hover { + background:linear-gradient(to bottom, #89a646 5%, #b4d665 100%); + background-color:#89a646; +} +.checking button:active { + transform: translate(0, 1px); +} + +.result { + height: 10em; + line-height: 1.4em; + padding: .5em; + box-sizing: border-box; +} + +main { + transform: translate(0,0); + transition: transform 300ms; +} + +.next main { + transform: translate(0, -10em); +} + +abbr { + display: inline-block; + white-space: nowrap; +} + +abbr.ok { + color: green; +} + +abbr.ok:after { + content: ' ✔︎'; +} + +abbr.fail { + color: red; +} + +abbr.fail:after { + content: ' ✘'; +} + +abbr.warning { + color: orange; +} + +abbr.warning:after { + content: ' !'; + font-weight: bold; +} +</pre> + +<pre class="brush: js">window.addEventListener('load', function () { + var content = document.querySelector('.exercise'); + var input = document.querySelector('.playground textarea'); + var button = document.querySelector('.checking button'); + var message = document.querySelector('.checking .count'); + var abbr = Array.prototype.slice.call(document.querySelectorAll('.result abbr')); + var data = { + pass : 0, fail : 0, warning : 0 + }; + + input.value = document.querySelector('.result').textContent; + + function toggleResult(e) { + e.preventDefault(); + var classList = content.className.split(' '); + + if (classList.length === 1 && checkResult()) { + content.className = 'exercise next'; + message.innerHTML = data.pass + ' correctement identifiée(s), ' + + data.warning + ' sans description complète, ' + + data.fail + ' manquée(s).'; + button.innerHTML = 'Essayez à nouveau'; + } else { + content.className = 'exercise'; + message.innerHTML = ''; + button.innerHTML = 'Afficher les résultats'; + } + } + + function checkResult() { + var i, j, node = document.createElement('div'); + node.innerHTML = input.value; + data = { pass : 0, fail : 0, warning : 0 }; + + var userAbbr = Array.prototype.slice.call(node.querySelectorAll('abbr')); + + if (userAbbr.length === 0) { + alert("Vous n'avez marqué aucune abréviation (il y en a " + abbr.length + " à trouver)."); + return false; + } + + for (i in abbr) { + var txt = abbr[i].textContent; + var fail = true; + + for (j in userAbbr) { + var userText = userAbbr[j].textContent; + + if (userText.match(new RegExp('^\\s*' + txt.replace('.','') + '\\s*$'))) { + fail = false; + if (userAbbr[j].title) { + data.pass += 1; + abbr[i].className = 'ok'; + } else { + data.warning += 1; + abbr[i].className = 'warning'; + } + } + } + + if (fail) { + data.fail += 1; + abbr[i].className = 'fail'; + } + } + + return true; + } + + button.addEventListener('click', toggleResult); +}); +</pre> +</div> + +<p>{{EmbedLiveSample('Exercice','100%',220)}}</p> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>La documentation de la référence sur {{HTMLElement("abbr")}}.</li> +</ul> diff --git a/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_c8b0b9eb353375fb9a4679f68164e682/index.html b/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_c8b0b9eb353375fb9a4679f68164e682/index.html new file mode 100644 index 0000000000..99e17662ab --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_c8b0b9eb353375fb9a4679f68164e682/index.html @@ -0,0 +1,134 @@ +--- +title: Ajouter des citations sur une page web +slug: Apprendre/HTML/Comment/Ajouter_citations_sur_page_web +tags: + - Beginner + - Guide + - HTML +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations +translation_of_original: Learn/HTML/Howto/Add_citations_to_webpages +--- +<div class="summary"> +<p>Cet article illustre comment citer quelqu'un de façon précise et en fournissant la source de la citation.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez vous être familiarisé-e avec <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">la création de documents HTML simples</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment intégrer des citations et leurs sources.</td> + </tr> + </tbody> +</table> + +<p>Très souvent, nous évoquons ce qui a été dit ou écrit par d'autres. Nous construisons des arguments logiques à partir de ces textes, notamment en littérature technique, en journalisme ou en philosophie. Étant donné que ce sont les scientifiques qui ont conçu {{Glossary('HTML')}}, il existe les mécanismes nécessaires pour faire des citations dans un document HTML.</p> + +<p>HTML permet de gérer trois scénarios liés aux citations :</p> + +<ul> + <li>fournir un extrait complet d'un document tiers</li> + <li>citer une seule phrase ou un seul terme</li> + <li>faire référence à un document tiers</li> +</ul> + +<h2 id="Comment_rapporter_exactement_les_mots_d'une_personne">Comment rapporter exactement les mots d'une personne</h2> + +<h3 id="Citation_en_ligne">Citation en ligne</h3> + +<p>HTML fournit l'élément {{htmlelement("q")}} qui permet de créer des citations en ligne. Cela signifie qu'il s'agit de citations suffisamment courtes pour qu'elles puissent être placées dans le cours du texte.</p> + +<pre class="brush: html"><p> + Si vous lisez Cicéron dans la version latine, vous trouverez + un passage connu&nbsp;: <q lang="la">qui dolorem ipsum quia + dolor sit amet consectetur adipisci velit.</q> +</p></pre> + +<p>Voilà le résultat qu'on obtient avec un tel code :</p> + +<p>{{EmbedLiveSample('Citation_en_ligne','100%')}}</p> + +<div class="note"> +<p><code><q></code> ne doit pas être utilisé pour écrire des titres d'articles ou de chapitres ou pour mettre un terme en exergue. Si vous avez besoin d'utiliser des guillemets à cet effet, il faudra les écrire manuellement :</p> + +<pre><code>C'est</code> « Wingardium Leviôsa » et non « Wingardium Leviosâ »<code>.</code></pre> + +<p>Les entités HTML <code>&laquo;</code> et <code>&raquo;</code> permettent de représenter les guillemets. Il faudra utiliser <code>&ldquo;</code> et <code>&rdquo;</code> pour les doubles quotes et <code>&lsquo;</code> et <code>&rsquo;</code> pour les simples quotes.</p> +</div> + +<p>Par défaut, {{glossary("navigateurs",'les navigateurs web')}} utilisent le symbole de citation approprié pour la langue utilisée. Si vous souhaitez surcharger la mise en forme par défaut, vous pouvez utiliser la propriété CSS {{cssxref('quotes')}}. Par exemple, la règle CSS qui suit imposera les guillemets français :</p> + +<pre class="brush: css">:lang(fr) > q { + quotes: '« ' ' »'; +}</pre> + +<h3 id="Extrait_complet">Extrait complet</h3> + +<p>HTML fournit également l'élément {{htmlelement("blockquote")}} pour les citations en bloc (c'est-à-dire les citations suffisamment longues pour qu'elles méritent leurs propres paragraphes). Dans l'exemple suivant, on voit qu'on a plusieurs paragraphes au sein d'une même <code><blockquote></code> :</p> + +<pre class="brush: html"><p>Les mots employés par Cicéron sont devenus un +charabia pour simuler du texte mais à l'origine, ils +n'étaient pas dénués de sens, loin de là&nbsp;:</p> + +<blockquote> + <p> + Il n'y personne qui recherche ou désire obtenir la + douleur en tant que telle car il s'agit de la douleur. + Toutefois, occasionnellement, il exist des circonstances + selon lesquelles la peine et la douleur peuvent fournir + un grand plaisir. + </p> + + <p> + Le sage s'en tient donc, sur ces sujets, au principe + de sélection : il rejette le plaisir afin de s'assurer de + de plus grands plaisir ou alors, il endure certaines + douleurs pour s'en prémunir de plus grandes. + </p> +</blockquote> +</pre> + +<p>Dans ce cas, la mise en forme appliquée par défaut par le navigateur web est une marge plus large à gauche. Là encore, vous pouvez ajuster la mise en forme à votre convenance en utilisant la propriété CSS {{cssxref('margin')}}.</p> + +<h2 id="Comment_fournir_la_source_d'une_citation">Comment fournir la source d'une citation</h2> + +<h3 id="Source_implicite">Source implicite</h3> + +<p>Citer c'est bien, indiquer les sources c'est encore mieux. De cette façon, une source indépendante peut vérifier que la citation est correcte, voire fournir un contexte plus large pour la citation. À cet effet, l'attribut {{htmlattrxref('cite','q')}} permet d'indiquer l'URL de la source, que ce soit pour un élément {{htmlelement("q")}} ou pour un élément {{htmlelement("blockquote")}} :</p> + +<pre class="brush: html"><q cite="https://fr.wikiquote.org/wiki/Hom%C3%A8re"><span class="citation">Patience, mon cœur !</span></q></pre> + +<p>En pratique, les personnes ne trouvent que très rarement cette information de source (sauf s'ils lisent le code source HTML). On peut donc préférer un lien direct dans la citation :</p> + +<pre class="brush: html"><q><a href="https://fr.wikiquote.org/wiki/Hom%C3%A8re"><span class="citation">Patience, mon cœur !</span></a></q></pre> + +<h3 id="Source_explicite">Source explicite</h3> + +<p>Pour indiquer de façon explicite l'origine de la citation, il est possible d'utiliser l'élément {{htmlelement("cite")}}. Cet élément peut <a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-cite-element">indiquer l'auteur de la citation ou l'œuvre créative de laquelle elle provient</a>.</p> + +<pre class="brush: html"><p> + <q>La pensée est libre</q>, + <cite id="author">Cicéron</cite> dans + <cite id="work" lang="la">De Finibus Bonorum et Malorum</cite>. +</p> +</pre> + +<p>Pour accentuer le caractère explicite de la relation entre la citation et sa source, il est également possible d'ajouter l'attribut <code><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby">aria-labelledby</a></code> :</p> + +<pre class="brush: html"><p> + <q aria-labelledby="author work">La pensée est libre</q>, + <cite id="author">Cicéron</cite> dans + <cite id="work" lang="la">De Finibus Bonorum et Malorum</cite>. +</p> +</pre> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{htmlelement("q")}}</li> + <li>{{htmlelement("blockquote")}}</li> + <li>{{htmlelement("cite")}}</li> +</ul> diff --git a/files/fr/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/fr/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..3f2f001f9c --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -0,0 +1,192 @@ +--- +title: Créer un hyperlien +slug: Apprendre/HTML/Comment/Créer_un_hyperlien +tags: + - Beginner + - HTML + - Learn + - Navigation +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +translation_of_original: Learn/HTML/Howto/Create_a_hyperlink +--- +<p class="summary">Dans cet article, nous verrons comment créer des liens {{glossary('accessibilité','accessibles')}} et utiles au {{glossary("référencement")}}.</p> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez, au préalable, savoir comment <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>. Il peut également être judicieux de se familiariser avec les <a href="/fr/Apprendre/Understanding_URLs">URL</a> et la notion d'<a href="/fr/Apprendre/Le_fonctionnement_des_liens_sur_le_Web">hyperliens</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Savoir comment mettre en place des liens accessibles et utiles au référencement.</td> + </tr> + </tbody> +</table> + +<p>La création de liens est une compétence clé sur le web. Dans cet article, nous verrons en détails l'élément {{htmlelement("a")}} et comment l'utiliser pour créer des liens forts.</p> + +<h2 id="Comment_créer_un_lien">Comment créer un lien</h2> + +<p>Pour fabriquer un lien, vous aurez <em>a minima</em> besoin d'une cible et d'un texte :</p> + +<dl> + <dt>cible</dt> + <dd>L'{{glossary("URL")}} de la destination du lien (par exemple, <code>"https://www.mozilla.org/firefox/products/</code>")</dd> + <dt>texte</dt> + <dd>Le texte qui décrit la destination offerte par le lien (dans le cas de l'exemple précédent, on pourrait écrire « Cette page présente les différents produits Firefox !")</dd> +</dl> + +<p>Le <em>texte</em> sera placé entre les balises {{htmlelement('a')}} et la <em>cible </em>sera la valeur de l'attribut {{htmlattrxref('href','a')}}. Mis bout à bout, on obtient ce code :</p> + +<pre class="brush: html"><a href="https://www.mozilla.org/firefox/products/"> + Cette page présente les différents produits Firefox ! +</a></pre> + +<p>Cela affichera, sur la page web, le lien suivant :</p> + +<p><a href="https://www.mozilla.org/firefox/products/">Cette page présente les différents produits Firefox !</a></p> + +<div class="note"> +<p><strong>Astuce :</strong> Pour transformer une image en un lien, il suffit de placer l'élément de l'image entre les balises <code><a></code>.</p> + +<p>L'attribut <code>alt</code> de l'image ne doit pas seulement <strong>décrire</strong> l'image (« c'est une flèche vers la droite »), mais doit également <strong>indiquer aux visiteurs ce qui se produit en suivant le lien</strong> (« lire le prochain billet »). <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web">Ce tutoriel explique comment insérer des images dans une page web.</a></p> +</div> + +<h3 id="Les_ancres_d'une_page">Les ancres d'une page</h3> + +<p>Il est également possible de créer un lien qui pointe vers un endroit spécifique d'un document. Cet endroit est appelé une ancre.</p> + +<ol> + <li>Ajoutez un attribut {{htmlattrxref("id")}} à l'élément cible. Par exemple, changez <code><h2></code> en <code><h2 id="les-ancres"></code>.</li> + <li>Dans l'URL du lien, placée dans l'attribut {{htmlattrxref("href","a")}}, ajoutez l'identifiant précédé d'un dièse (#) : <code><a href="http://www.exemple.com/index.html#les-ancres"></code></li> +</ol> + +<div class="note"> +<p><strong>Astuce :</strong> La plupart du temps, les visiteurs d'un site s'attendent à ce qu'un lien ouvre une<strong> nouvelle</strong> page au début de celle-ci (plutôt qu'à un endroit donné, au sein de la page). Certains visiteurs peuvent donc être désorientés lorsqu'ils suivent un lien avec une ancre.</p> + +<p>Si vous utilisez des liens avec des ancres, essayez de les mettre en forme afin que les visiteurs du site puissent les reconnaître. Si vous utilisez des ancres entre les pages d'un de vos sites, vous pouvez utiliser {{glossary("JavaScript")}} pour créer un effet de défilement doux.</p> +</div> + +<h3 id="Créer_un_lien_vers_une_ressource_à_télécharger">Créer un lien vers une ressource à télécharger</h3> + +<p>Il peut arriver qu'un lien soit utilisé pour télécharger un fichier plutôt que d'ouvrir une nouvelle page. L'attribut <code>download</code> peut être utilisé pour fournir un nom par défaut, à donner au fichier. Voici un exemple de lien de téléchargement pour télécharger Firefox 39 pour Windows :</p> + +<pre class="brush: html"><a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=fr" + download="installateur-firefox-39.exe"> + Téléchargez Firefox +</a></pre> + +<h2 id="Écrire_des_liens_accessibles">Écrire des liens accessibles</h2> + +<p>Ajouter des liens à une page est plutôt facile mais ce n'est pas tout. Les liens de vos pages doivent être <em>accessibles </em>à tous vos lecteurs, quel que soit le contexte de lecture et les outils qu'ils utilisent. Les visiteurs qui utilisent des lecteurs d'écran peuvent vouloir sauter de lien en lien, le texte d'un lien doit donc être compréhensible. Voici quelques règles et bonnes pratiques à mettre en œuvre.</p> + +<dl> + <dt>Le texte d'un lien doit être compréhensible seul</dt> + <dd> + <p>Les visiteurs qui utilisent des lecteurs d'écran passent de lien en lien. Les moteurs de recherche utilisent le texte des liens pour indexer les pages ciblées. Certains visiteurs regardent les liens plutôt que les autres textes. Pour ces raisons, le texte d'un lien doit avoir un sens sans aucun autre contexte.</p> + + <div class="note"> + <p><strong>Note :</strong> Dans notre exemple, le texte du lien commence par un verbe d'action. Cela permet au lecteur de sentir une progression dans ces actions et plus généralement de préciser le rôle du lien.</p> + </div> + + <p><em><strong>Texte compréhensible </strong>:</em> <a href="https://firefox.com">Télécharger Firefox</a></p> + + <pre class="brush: html"><a href="https://firefox.com/"> + Télécharger Firefox +</a></pre> + + <p><em><strong>Mauvais exemple </strong>:</em> <a href="https://firefox.com/">Cliquez ici</a> pour télécharger Firefox</p> + + <pre class="brush: html"><a href="https://firefox.com/"> + Cliquez ici +</a> +pour télécharger Firefox +</pre> + </dd> + <dt>N'ajoutez pas « lien vers » dans le texte du lien</dt> + <dd> + <p>Cela n'apporte aucune plus-value. Les lecteurs d'écran indiquent que l'élément est un lien. Les visiteurs qui utilisent directement un navigateur voient que c'est un lien grâce au soulignement et à sa couleur distinctive (et c'est également pour cette raison qu'il ne faut pas retirer la mise en forme d'un lien).</p> + + <p><em><strong>Bon exemple </strong>:</em> <a href="https://developer.mozilla.org/Firefox_OS">En savoir plus sur Firefox OS</a></p> + + <pre class="brush: html"><a href="https://developer.mozilla.org/Firefox_OS"> + En savoir plus sur Firefox OS +</a></pre> + + <p><em><strong>Mauvais exemple </strong>:</em> Voici un <a href="https://developer.mozilla.org/Firefox_OS">lien sur Firefox OS</a></p> + + <pre class="brush: html">Voici un +<a href="https://developer.mozilla.org/Firefox_OS"> + lien sur Firefox OS +</a></pre> + </dd> + <dt>Indiquez la cible du lien plutôt que de copier-coller une URL</dt> + <dd> + <p>Les URL sont illisibles, encore plus lorsqu'elles sont lues par un lecteur d'écran, lettre par lettre.</p> + + <p><em><strong>Bon exemple </strong>:</em> <a href="https://careers.mozilla.org/university/">Candidatez pour un stage chez Mozilla</a></p> + + <pre class="brush: html"><a href="https://careers.mozilla.org/university/"> + Candidatez pour un stage chez Mozilla +</a></pre> + + <p><em><strong>Mauvais exemple :</strong></em> <a href="https://careers.mozilla.org/university/">https://careers.mozilla.org/university/</a></p> + + <pre class="brush: html"><a href="https://careers.mozilla.org/university/"> + https://careers.mozilla.org/university/ +</a></pre> + </dd> + <dt>Le texte d'un lien doit être concis</dt> + <dd> + <p>Les longs textes de lien font perdre en lisibilité et ralentissent la navigation avec les lecteurs d'écrans.</p> + <strong><em>Bon exemple </em></strong><em>:</em> Voici une page où vous pouvez <a href="https://www.mozilla.org/firefox/all/" title="Firefox can be download in 90 different languages for 4 different operating systems.">télécharger Firefox</a> + + <pre class="brush: html">Voici une page où vous pouvez +<a href="https://www.mozilla.org/firefox/all/"> + télécharger Firefox +</a> +</pre> + + <p><em><strong>Mauvais exemple </strong>:</em> Voici une page où <a href="https://www.mozilla.org/firefox/all/">vous pouvez télécharger Firefox en 90 langues différentes, pour quatre systèmes d'exploitation différents</a></p> + + <pre class="brush: html">Voici une page où +<a href="https://www.mozilla.org/firefox/all/"> + vous pouvez télécharger Firefox en 90 langues différentes, pour quatre systèmes d'exploitation différents +</a> +</pre> + </dd> + <dt>Indiquez à quoi correspond la cible du lien</dt> + <dd> + <p>Cela peut paraître évident mais on rencontre parfois des liens dont les textes n'ont rien à voir avec la destination. Soyez explicite, cela simplifiera la navigation pour vos lecteurs et améliorera votre référencement.</p> + + <p><em><strong>Bon exemple :</strong></em><a href="http://getfirefox.org/"> Téléchargez Firefox</a>, le navigateur développé par Mozilla : stable, sûr et rapide.</p> + + <p><em><strong>Mauvais exemple</strong> :</em> <a href="http://getfirefox.org/">Voici une autre application</a> qui améliorera votre navigation sur le Web.</p> + </dd> +</dl> + +<h2 id="Perfectionner_ses_liens">Perfectionner ses liens</h2> + +<dl> + <dt>Faites attention à l'ordre de navigation grâce aux tabulations</dt> + <dd>De nombreuses personnes utilisent le clavier pour naviguer sur une page web. La touche de tabulation est une des seules méthodes permettant de passer d'un lien à un autre. Par défaut, l'ordre de cette navigation correspondra à celui du document HTML. Toutefois, il est possible de surcharger cet ordre grâce à l'attribut {{htmlattrxref("tabindex")}}. Attention toutefois à bien utiliser CSS pour que l'ordre visuel (ou celui déterminé par un lecteur d'écran) soit logique pour le lecteur.</dd> + <dt>Gardez des liens suffisamment grands</dt> + <dd> + <p>Assurez-vous que vos liens puissent être déclenchés facilement, à la souris ou au toucher. CSS peut être utilisé pour cela. <a href="http://www.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/">Une recherche basée sur l'expérience des utilisateurs</a> indique que les liens devraient mesurer 72 pixels (45px étant la taille minimale). Attention à ne pas oublier ce point, notamment si vous utilisez une souris ou un pad sur votre poste de travail.</p> + </dd> + <dt>Soulignez les liens et uniquement les liens</dt> + <dd>Lorsque les visiteurs d'un site voient un texte souligné, ils s'attendent à ce que ce texte soit un lien. Pour cette raison, ne soulignez que les liens. Il n'est pas strictement nécessaire de souligner les liens mais <a href="http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F73">la couleur ne suffira pas</a> pour indiquer qu'un texte est un lien.</dd> + <dt>Utilisez une couleur distincte et identifiable pour vos liens</dt> + <dd>Le bleu est utilisé par défaut pour les liens. Vous pouvez utiliser une autre couleur mais celle-ci doit <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/working-examples/G183/link-contrast.html">former un contraste suffisant avec l'arrière-plan.</a></dd> + <dt>Utilisez une mise en forme distincte pour les liens inhabituels</dt> + <dd>Utilisez CSS pour indiquer aux visiteurs que le lien a un comportement spécifique (un lien externe, un lien qui ouvre une page dans un nouvel onglet, un lien qui ouvre une page dans une autre langue). Voir également {{htmlattrxref("hreflang","a")}}). Sur MDN, par exemple, on ajoute un symbole devant les liens externes (par exemple <a href="https://en.m.wikipedia.org/wiki/Firefox_OS">l'article de Wikipédia sur Firefox OS</a>).</dd> + <dt>Fournissez des cibles et des textes pour tous les liens</dt> + <dd>S'il n'y a pas de texte, il ne sera pas possible de voir le lien et les lecteurs d'écran diront juste « lien fin lien ». S'il n'y a pas de cible (pas de {{htmlattrxref("href")}} ou un <code>href</code> vide ou <code>href="#"</code>), le lien ne mènera nulle part.</dd> +</dl> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>La documentation sur l'élément {{HTMLElement("a")}} dans la référence HTML.</li> +</ul> diff --git a/files/fr/conflicting/learn/html/introduction_to_html/creating_hyperlinks_10fd94f15ce1a469a3483e0478cb5d85/index.html b/files/fr/conflicting/learn/html/introduction_to_html/creating_hyperlinks_10fd94f15ce1a469a3483e0478cb5d85/index.html new file mode 100644 index 0000000000..77e52eafb4 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/creating_hyperlinks_10fd94f15ce1a469a3483e0478cb5d85/index.html @@ -0,0 +1,64 @@ +--- +title: Liens email +slug: Web/Guide/HTML/Liens_email +tags: + - Beginner + - Exemple + - Guide + - HTML + - Web +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#E-mail_links +translation_of_original: Web/Guide/HTML/Email_links +--- +<p><span class="seoSummary">Il est parfois utile de créer des liens ou des boutons qui nous permettent d'écrire un nouvel e-mail. Par exemple, on peut les utiliser pour créer un bouton « contactez-nous ». Ceci est possible grâce à l'élement HTML {{HTMLElement("a")}} et au format d'URL <code>mailto</code>.</span></p> + +<h2 id="Bases_de_mailto">Bases de <code>mailto</code></h2> + +<p>Dans sa forme la plus basique et la plus utilisée, un lien <code>mailto</code> indique simplement l'adresse e-mail du destinataire. Par exemple :</p> + +<pre class="brush: html notranslate"><a href="mailto:nullepart@mozilla.org">Envoyer l'email nulle part</a></pre> + +<p>Le résultat s'affiche comme ceci : <a href="mailto:nullepart@mozilla.org">Envoyer l'email nulle part</a>.</p> + +<p>En réalité, l'adresse e-mail est optionelle. Si on ne l'ajoute pas (le {{htmlattrxref("href", "a")}} contiendra simplement « mailto: »), une nouvelle fenêtre du client de messagerie de l'utilisateur s'ouvrira, sans destinataire spécifié. Cela peut être utile dans le cas d'un bouton « Partager » où l'utilisateur sélectionnera les personnes auxquelles il veut envoyer un e-mail.</p> + +<h2 id="Précisions">Précisions</h2> + +<p>En plus de l'adresse e-mail, on peut fournir d'autres informations. En effet, n'importe quel champ d'en-tête d'un e-mail standard peut être ajoutée à l'URL <code>mailto</code>. Les plus communément utilisés sont « <code>subject</code> », « <code>cc</code> » et « <code>body</code> » (qui n'est pas réellement un champ d'entête mais qui permet de spécifier un message court pour le nouvel email). Chaque champ et sa valeur sont indiqués comme un terme de requête.</p> + +<div class="note"> +<p><strong>Note :</strong> Les valeurs de chaque champ doivent être codées au <a href="https://en.wikipedia.org/wiki/Percent-encoding">format URL</a>.</p> +</div> + +<h3 id="Échantillons_dURL_mailto">Échantillons d'URL <code>mailto</code></h3> + +<p>Voici quelques échantillons d'URL <code>mailto</code>:</p> + +<ul> + <li><a href="mailto:">mailto:</a></li> + <li><a href="mailto:nullepart@mozilla.org">mailto:nullepart@mozilla.org</a></li> + <li><a href="mailto:nullepart@mozilla.org,personne@mozilla.org">mailto:nullepart@mozilla.org,personne@mozilla.org</a></li> + <li><a href="mailto:nullepart@mozilla.org?cc=personne@mozilla.org">mailto:nullepart@mozilla.org?cc=personne@mozilla.org</a></li> + <li><a href="mailto:nullepart@mozilla.org?cc=personne@mozilla.org&subject=Ceci%20est%20le%20sujet">mailto:nullepart@mozilla.org?cc=personne@mozilla.org&subject=Ceci%20est%20le%20sujet</a></li> +</ul> + +<p>Notez l'utilisation de l'esperluette (&) pour séparer les champs de l'URL <code>mailto</code>. C'est le format standard d'écriture des URL.</p> + +<h3 id="Exemple">Exemple</h3> + +<p>Si vous voulez créer un lien qui permettrait de s'inscrire à une newsletter, vous pouvez utiliser un lien <code>mailto</code> comme ceci :</p> + +<pre class="brush: html notranslate"><a href="mailto:nullepart@mozilla.org?subject=Demande%20inscription%20newsletter&body=Inscrivez-moi%20%C3%A0%20votre%20newsletter%20%21%0D%0A%0D%0ANom%20complet%20%3A%0D%0A%0D%0AO%C3%B9%20avez-vous%20entendu%20parler%20de%20nous%20%3F"> +Inscrivez-vous à notre newsletter +</a></pre> + +<p>Le résultat s'affiche comme ceci : <a href="mailto:nullepart@mozilla.org?subject=Demande%20inscription%20newsletter&body=Inscrivez-moi%20%C3%A0%20votre%20newsletter%20%21%0D%0A%0D%0ANom%20complet%20%3A%0D%0A%0D%0AO%C3%B9%20avez-vous%20entendu%20parler%20de%20nous%20%3F">Inscrivez-vous à notre newsletter</a>.</p> + +<section id="Quick_Links"> +<ol> + <li>{{HTMLElement("a")}}</li> + <li>{{RFC(6068, "The 'mailto' URI Scheme")}}</li> + <li>{{RFC(5322, "Internet Message Format")}}</li> + <li><a href="http://www.url-encode-decode.com/">Encodage/décodage d'URL en ligne</a></li> +</ol> +</section> diff --git a/files/fr/conflicting/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/fr/conflicting/learn/html/introduction_to_html/document_and_website_structure/index.html new file mode 100644 index 0000000000..170ad81290 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -0,0 +1,229 @@ +--- +title: Découper une page web en sections logiques +slug: Apprendre/HTML/Comment/Découper_une_page_web_en_sections_logiques +tags: + - Beginner + - DesignAccessibility + - HTML + - Learn +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +translation_of_original: Learn/HTML/Howto/Divide_a_webpage_into_logical_sections +--- +<div class="summary"> +<p>Dans cet article, nous verrons comment structurer un document afin que son plan soit logique pour vous, vos visiteurs dont ceux qui utilisent des technologies d'aide à la navigation.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable savoir comment <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment structurer un document web grâce aux balises sémantiques.</td> + </tr> + </tbody> +</table> + +<h2 id="Les_sections_de_base">Les sections de base</h2> + +<p>Les sites web ont chacun leur style mais tous ont tendance à partager des composants communs :</p> + +<dl> + <dt>l'en-tête (<em>header</em>)</dt> + <dd>Il s'agit généralement d'un grande bande horizontale, située en haut du site avec un grand titre et/ou un logo. C'est à cet endroit qu'on a toujours la même information sur le site, quelle que soit la page du site sur laquelle on est.</dd> + <dt>la barre de navigation</dt> + <dd>Celle-ci permet de faire référence aux différentes sections du site via des menus ou des onglets. Comme pour l'en-tête, la barre de navigation sera généralmeent présente sur l'ensemble du site. De nombreux concepteurs web considèrent que la barre de navigation fait partie intégrale de l'en-tête mais ce n'est pas strictement nécessaire.</dd> + <dt>le contenu principal</dt> + <dd>Une zone importante, située au centre dont le contenu est spécifique selon la page visitée.</dd> + <dt>le panneau ou la barre latéral-e (<em>sidebar</em>)</dt> + <dd>Il contient des informations périphériques, des liens, des citations, des publicités. Généralement, ce panneau dépend du contenu principal de la page mais on trouve également des panneaux latéraux qui agissent comme des menus de navigation secondaires.</dd> + <dt>le pied de page (<em>footer</em>)</dt> + <dd>C'est ici qu'on trouvera les informations de contact, de copyright… C'est un endroit où on place des informations communes à l'ensemble du site mais qui ne sont pas primordiales pour le site en tant que tel. Le pied de page est parfois utilisé par les outils de référencement afin de fournir un accès rapide à certaines parties du site.</dd> +</dl> + +<p>Lorsqu'on assemble ces éléments, on arrive à quelque chose qui ressemble <em>grosso modo</em> à :</p> + +<p><img alt="[Diagram indicating the divisions with visual cues]" src="https://mdn.mozillademos.org/files/10679/Screenshot%20from%202015-04-29%2016:21:23.png" style="height: 462px; width: 821px;"></p> + +<h2 id="HTML_à_la_rescousse">HTML à la rescousse</h2> + +<p>Dans le dessin précédent, des indications visuelles permettent d'identifier rapidement l'en-tête, la barre de navigation, le contenu, etc. Cela dit, un site ne se résume pas à son aspect visuel. Une personne qui serait déficiente sur le plan visuel (par exemple quelqu'un qui est daltonien, comme <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">8% de la population mondiale</a>) pourra tirer partie de concepts comme « barre de navigation » et « contenu principal », en revanche, « taille de police plus grande » et « vert clair » seront inutiles.</p> + +<p>Dans votre code HTML, vous pouvez identifier les sections en fonction de leur <em>fonctionnalité</em>. C'est ce que nous verrons dans la suite de cet article. Pour savoir comment ajouter des indications visuelles, vous pouvez consulter <a href="https://developer.mozilla.org/en-US/Learn/CSS/Howto">notre tutoriel CSS</a>.</p> + +<p>Pour structurer une page avec cette sémantique, HTML fournit des balises dédiées :</p> + +<ul> + <li><strong>Pour l'en-tête : </strong>{{htmlelement("header")}}</li> + <li><strong>Pour la barre de navigation : </strong>{{htmlelement("nav")}}</li> + <li><strong>Pour le contenu principal : </strong>{{htmlelement("main")}} ainsi qu'une association d'éléments {{HTMLElement("article")}}, {{htmlelement("section")}} et {{htmlelement("div")}} pour créer des sous-sections</li> + <li><strong>Pour la barre latérale : </strong>{{htmlelement("aside")}}</li> + <li><strong>Pour le pied de page : </strong>{{htmlelement("footer")}}</li> +</ul> + +<div class="note"> +<p>Pour la barre de navigation, on trouvera souvent <a href="/fr/Apprendre/HTML/Comment/Créer_une_liste_d_éléments_avec_HTML">une liste, non-ordonnée, de liens</a> placée dans un élément <code><nav></code>. <a href="https://css-tricks.com/wrapup-of-navigation-in-lists/">Chris Coyier résume les avantages et inconvénients</a> entre les listes et les liens directs.</p> +</div> + +<h3 id="Quel_élément_utiliser">Quel élément utiliser</h3> + +<p>Vous pouvez être confronté-e à d'autres scénarios que celui que nous venons de voir. Dans la liste qui suit, nous verrons des descriptions plus détaillées des éléments HTML liés aux sections d'un document :</p> + +<ul> + <li>{{HTMLElement('main')}} est utilisé pour indiquer du contenu qui appartient <em>exclusivement</em> à cette page. <code><main></code> ne doit être utilisé qu'une seule fois par page et se place directement sous l'élément {{HTMLElement('body')}}. Dans l'idéal, il ne devrait pas être imbriqué dans d'autres éléments sous <code><body></code>.</li> + <li>{{HTMLElement('article')}} contient un bloc de contenu qui pourrait être cohérent sans le reste de la page (par exemple un billet de blog).</li> + <li>{{HTMLElement('section')}} agit comme <code><article></code> mais dépend du reste de la page, qui fournit alors un contexte. Il est possible d'utiliser des sections pour grouper ou subdiviser des articles. Généralement, pour respecter des bonnes pratiques, on commencera une section avec un élément de <a href="/fr/Apprendre/HTML/Howto/Set_up_a_proper_title_hierarchy">titre</a>.</li> + <li>{{HTMLElement('aside')}} contient du contenu qui n'est pas directement lié au contenu principal mais qui peut fournir des informations supplémentaires, liées à ce contenu principal (par exemple une biographie de l'auteur, des liens sur le sujet, etc.).</li> + <li>{{HTMLElement('header')}} représente un groupe de contenu introductif. Si c'est un élément inclus dans {{HTMLElement('body')}}, il définit l'en-tête de la page web. En revanche, si c'est un élément inclus dans {{HTMLElement('article')}} ou {{HTMLElement('section')}}, il définit un en-tête propre à cette section (attention à ne pas confondre cette notion avec les <a href="/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy">niveaux de titre</a>).</li> + <li>{{HTMLElement('footer')}} représente un groupe de contenu final. Selon sa position il aura un sens analogue à l'élément {{HTMLElement('header')}}.</li> + <li>{{HTMLElement('div')}} est un élément qui peut être utilisé (de préférence avec un attribut {{htmlattrxref('class')}} donné) lorsqu'il n'existe pas d'élément plus spécifique. Les éléments <code><div></code> n'ajoutent pas de division sémantique au document, cela peut permettre de manipuler certaines parties d'un document (la classe ou l'identifiant du <code><div></code> permettra de le(s) retrouver facilement) via {{glossary("CSS")}} ou {{glossary("JavaScript")}}.</li> +</ul> + +<div class="warning"> +<p><strong>Attention : </strong>Les éléments <code><div></code> sont parfois si pratiques qu'on en utilise trop. Ces éléments ne portent aucune sémantique, il ne font qu'encombrer le code HTML. Attention donc à ne les utiliser que lorsqu'il n'existe pas de meilleure solution sémantique. S'ils sont trop présents, cela rendra les mises à jour et la maintenance plus difficiles.</p> +</div> + +<h3 id="Exemple">Exemple</h3> + +<p>Exprimé sous forme de code HTML, le dessin présenté ci-avant correspondrait à :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="fr"> +<head> + <meta charset="utf-8"> + <title>Document HTML</title> +</head> +<body> + + <!-- + Voici l'en-tête principal, utilisé sur les + différentes pages du site web + --> + <header> + header + + <!-- + Bien que ce ne soit pas obligatoire, on trouve + généralement un menu de navigation dans l'en-tête + principal + --> + <nav> + <ul> + <li><a href="#">Navigation</a></li> + <li><a href="#">Qui nous sommes</a></li> + <li><a href="#">Ce que nous faisons</a></li> + <li><a href="#">Contact</a></li> + </ul> + + <!-- + Une barre de recherche est un outil de navigation + "non-linéaire" au sein du site web. + --> + <form> + <input type="search" name="q" placeholder="Recherchez..."> + <input type="submit" value="OK"> + </form> + </nav> + </header> + + <!-- + Voici le contenu principal + --> + <main> + + <!-- + Il contient un article + --> + <article> + <h1>Titre</h1> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue + ligula as quam viverra nec consectetur ant hendrerit. Donec et + mollis dolor. Praesent et diam eget libero egestas mattis sit + amet vitae augue. Nam tincidunt congue enim, ut porta lorem + lacinia consectetur.</p> + + <h2>Sous-section</h2> + <p>Donec ut librero sed accu vehicula ultricies a non tortor. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean + ut gravida lorem. Ut turpis felis, pulvinar a semper sed, + adipiscing id dolor.</p> + + <p>Pelientesque auctor nisi id magna consequat sagittis. + Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat + nist imperdiet. Ut convallis libero in urna ultrices accumsan. + Donec sed odio eros.</p> + + <h2>Une autre sous-section</h2> + <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. + Cum soclis natoque penatibus et manis dis parturient montes, + nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris + vitae nisi at sem facilisis semper ac in est.</p> + + <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut + tristique vitae sagittis vel odio. Maecenas convallis ullamcorper + ultricied. Curabitur ornare, ligula semper consectetur sagittis, + nisi diam iaculis velit, is fringille sem nunc vet mi.</p> + </article> + + <!-- + le contenu placé sur le côté peut aussi + être dans le contenu principal + --> + <aside> + <p>N'hésitez pas à rendre visite à nos sponsors !</p> + <ul> + <li><a href="#">item</a></li> + <li><a href="#">item</a></li> + <li><a href="#">item</a></li> + <li><a href="#">item</a></li> + <li><a href="#">item</a></li> + </ul> + </aside> + </main> + + <!-- + Enfin, voici le pied de page principal, + utilisé sur les différentes pages du site. + Note : Ceci est une fausse déclaration de copyright + Attention à celles qui sont réelles. + --> + <footer> + ©Copyright 2050 par exemple.com. Tous droits réservés. + </footer> +</body> +</html> +</pre> + +<h2 id="Les_rôles_ARIA_qu'est-ce_que_c'est">Les rôles ARIA, qu'est-ce que c'est ?</h2> + +<p>HTML a initialement été conçu pour définir la <em>structure</em> d'un document. Or, il est désormais utilisé pour créer des applications web.</p> + +<p>{{Glossary("ARIA")}} est une méthode qui permet d'indiquer aux technologies d'aide à la navigation qu'un élément HTML possède des fonctionnalités web applicatives.</p> + +<p>Certains éléments HTML5 comme {{HTMLElement('nav')}} permettent de contenir des informations de ce genre et rendent (dans ce cas particulier) les attributs ARIA redondants. Cela dit, si vous utilisez des technologies qui ne supportent pas encore HTML5 ou que vous souhaitez utiliser un élément qui n'a pas de sémantique particulière (par exemple {{HTMLElement('div')}}) , vous pouvez appliquer des rôles ARIA de cette façon:</p> + +<ul> + <li><code><main role="main"></code></li> + <li><code><header role="banner"></code></li> + <li><code><nav role="navigation"></code></li> + <li><code><aside role="complementary"></code></li> + <li><code><footer role="contentinfo"></code></li> +</ul> + +<p>Pour en savoir plus à propos d'ARIA, consultez notre <a href="/fr/docs/Accessibilité/ARIA">documentation.</a></p> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{HTMLElement("article")}}</li> + <li>{{htmlelement("aside")}}</li> + <li>{{htmlelement("div")}}</li> + <li>{{htmlelement("footer")}}</li> + <li>{{htmlelement("header")}}</li> + <li>{{htmlelement("main")}}</li> + <li>{{htmlelement("nav")}}</li> + <li>{{htmlelement("section")}}</li> +</ul> diff --git a/files/fr/conflicting/learn/html/introduction_to_html/getting_started/index.html b/files/fr/conflicting/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..3e911e92c8 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,189 @@ +--- +title: Créer un document HTML simple +slug: Apprendre/HTML/Comment/Créer_un_document_HTML_simple +tags: + - Beginner + - Guide + - HTML + - Learn +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +translation_of_original: Learn/HTML/Howto/Create_a_basic_HTML_document +--- +<p class="summary">Pour créer un site web, on commence par rédiger un document HTML. Les navigateurs actuels sont plutôt tolérants mais pour éviter quelques maux de tête, mieux vaut l'assembler correctement dès le début.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez avoir <a href="/en-US/Learn/Choose,_Install_and_set_up_a_text_editor">installé un éditeur de texte</a> et connaître <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">quelques rudiments de HTML</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre à mettre en place un document HTML vierge tout en comprenant le rôle de chaque composant du squelette obtenu.</td> + </tr> + </tbody> +</table> + +<p>Chaque document HTML partage la même structure. Cet article décrira chacune des parties de cette structure. Une fois n'est pas coutume, commençons par la fin en regardant la structure complète, avant de la décomposer :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="fr"> + <head> + <meta charset="utf-8"> + <title>Inscrire un titre ici</title> + <!-- On peut avoir d'autres méta-données ici --> + </head> + <body> + <!-- Ici, on placera tout le contenu à destination + de l'utilisateur --> + </body> +</html></pre> + +<p>Dans la suite de cet article, nous verrons les raisons d'être de chacun des morceaux de cet exemple. En attendant, vous pouvez copier/coller cette exemple dans votre éditeur de texte pour avoir un squelette de base, réutilisable pour vos différents documents.</p> + +<h2 id="Qu'est-ce_qu'un_document_HTML">Qu'est-ce qu'un document HTML ?</h2> + +<p>Un document HTML ou <a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche">une page web</a> est simplement composé de texte structuré au sein de balise (une balise étant un mot-clé encadré par des chevrons ("<>"), par exemple, dans l'exemple précédent <code><html></code> et <code><body></code> sont deux des éléments qui sont utilisés). La plupart des balises fonctionnent par paires (on a alors une balise ouvrante <code><body></code> et une balise fermante correspondante : <code></body></code>). Un <strong><dfn>{{Glossary('élément')}}</dfn></strong> est une chaîne de texte entre deux balises.</p> + +<p>La plupart des programmes (le plus souvent des {{glossary("navigateur","navigateurs")}}) traitent ces balises pour générer (ou « rendre ») le site que l'utilisateur peut voir, écouter ou ressentir.</p> + +<p>Étant donné que HTML est un format textuel, il est possible d'écrire des fichiers HTML avec n'importe quel <a href="/fr/Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte">éditeur de texte</a>. Ajouter des balises HTML au texte est très simple et se fait en un rien de temps. Pour choisir les meilleurs outils, mieux vaut comprendre les balises et {{Glossary("Attribut","attributs")}} les plus communs. C'est le but de la <a href="/fr/Apprendre">zone d'apprentissage de MDN</a>.</p> + +<p>Dans la suite de cet article, nous expliquerons les différents fragments de l'exemple précédent :</p> + +<ul> + <li>ce qu'est un {{glossary("doctype")}} et pourquoi c'est important</li> + <li>l'élément racine : {{htmlelement("html")}}</li> + <li>la différence entre les éléments placés dans {{htmlelement("head")}} et dans {{htmlelement("body")}}</li> + <li>l'importance de l'élément {{htmlelement("title")}}.</li> + <li>la définition du jeu de caractères à utiliser pour le document avec l'élément {{htmlelement("meta")}}.</li> +</ul> + +<h2 id="Le_doctype">Le <em>doctype</em></h2> + +<p>La chaîne de texte suivante est appelée {{Glossary("doctype")}} (qui est la contraction, anglaise, de « document » et « type »).</p> + +<pre class="brush: html"><!DOCTYPE html></pre> + +<p>En ce qui concerne HTML, le <em>doctype</em> est un reliquat historique. Pourquoi est-il alors toujours présent ?</p> + +<p>Si vous ne commencez pas votre document par <code><!DOCTYPE html></code>, les navigateurs afficheront votre document en <a href="/fr/docs/Mode_quirks_de_Mozilla"><em>mode quirks</em></a>. Le mode <em>quirks</em> est le mode utilisé par le navigateur pour afficher les documents anciens ou malformés, écrits dans les années 1990 lorsque HTML était peu (voire pas du tout) standardisé et que chaque navigateur gérait HTML à sa façon.</p> + +<p>Le <em>doctype</em> déclenche l'utilisation du mode <em>standard</em>. Cela fait que la page sera affichée de façon prévisible et cohérente par rapport aux standards définis par le {{glossary("W3C")}} et le {{glossary("WHATWG")}}. Cela signifie également que les navigateurs gèrent les erreurs de façon standard, prévisible et homogène.</p> + +<div class="warning"> +<p><strong>Attention :</strong> Le <em>doctype</em> doit commencer le document HTML avant toute autre chose (pas de commentaires HTML, pas de sauts de ligne, pas de blancs). Certains navigateurs historiques seront très pointilleux à ce sujet et mieux vaut donc respecter cette règle.</p> +</div> + +<h2 id="L'élément_<html>">L'élément <code><html></code></h2> + +<p>Tout le document (en dehors du <em>doctype</em>) est contenu entre les balises <code><html></code> et <code></html></code>. Il ne peut y avoir qu'un seul élément {{HTMLElement('html')}} par document.</p> + +<div class="note"> +<p>Il est possible d'oublier <code><html></code> et le navigateur le comprendra de façon implicite. Cependant, afin de pouvoir manipuler le document dans son ensemble, <code><html></code> sera nécessaire. Par exemple, on utilise <code><html lang="fr"></code> pour indiquer que le document entier est écrit en français. De la même façon, <code><html></code> permettra d'appliquer une mise en forme sur tout le document grâce à CSS.</p> +</div> + +<h2 id="Les_éléments_<head>_et_<body>">Les éléments <code><head></code> et <code><body></code></h2> + +<p>Au sein de l'élément <code><html></code>, le document aura une « tête » (<em>head</em> en anglais) située entre les balises <code><head></code> et <code></head></code> et un « corps » (<em>body</em> en anglais) situé entre les balises <code><body></code> et <code></body></code>.</p> + +<p>La tête de la page contient les méta-données (c'est-à-dire les données qui décrivent le document) mais pas le contenu principal affiché pour l'utilisateur. Ces méta-données peuvent être utilisées par les moteurs de recherches, pour ajouter des liens vers des feuilles de style CSS, etc. Dans la section qui suit, nous verrons les contenus les plus importants pour cet élément : le titre et la déclaration du jeu de caractères.</p> + +<p>Le corps contient le contenu affiché pour l'utilisateur. C'est donc sur cet élément qu'on s'attardera le plus.</p> + +<div class="note"> +<p>HTML est très souple à propos de la structure du document, si vous oubliez les éléments <code><head></code> et <code><body></code>, ils seront implicitement ajoutés. Voici un document sans <code><html></code> ni <code><head></code> ni <code><body></code> :</p> + +<pre class="brush: html"><!DOCTYPE html> +<title>Ceci est un document HTML</title> + +Coucou monde ! (<i>Hello world!</i>) +</pre> + +<p>Le navigateur s'occupera de tout :</p> + +<p><img alt="[Screenshot of the browser making its best guess]" src="https://mdn.mozillademos.org/files/11675/Capture%20du%202015-10-04%2017-23-03.png" style="height: 254px; width: 873px;"></p> + +<p>Même si le navigateur prend soin d'ajouter les balises qui manquent : c'est une mauvaise idée de les oublier. Si vous continuez sur cette voie et que votre contenu devient plus complexe, vous devrez faire confiance au navigateur pour déterminer ce qui est la tête et ce qui est le corps. En explicitant où est <code><head></code> et où est <code><body></code>, vous gagnerez plus de temps.</p> +</div> + +<h2 id="L'élément_<title>_le_titre_du_document">L'élément <code><title></code> : le titre du document</h2> + +<p>Dans la tête du document, on écrira un titre concis et équivoque qui décrit le document. Il faut que le titre ait du sens sans autre contexte. Récapitulons, voici où va le titre :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Mon fabuleux exemple HTML</title> + ... + </head> + <body> + ... + </body> +</html></pre> + +<p>Le titre ne doit contenir que du texte (aucun élément ne sera interprété dans <code><title></code>).</p> + +<div class="note"> +<p>Là encore, libre à vous de ne pas indiquer le titre et d'en subir les conséquences. Le titre d'un document est notamment utilisé dans les résultats des moteurs de recherche et pour indiquer le propos du document. De plus, les navigateurs graphiques utiliseront les titres pour les libellés des onglets.</p> + +<p>S'il n'y a pas de titre, les navigateurs et les moteurs de recherches construiront eux-mêmes le texte, ce qui ne sera pas très parlant :</p> + +<pre class="brush: html"><!DOCTYPE html> +<!-- Pas de titre ici --> +Hello world! +</pre> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Chrome</th> + <td><img alt="[Screenshot of a Chrome tab labeled ''index.html'']" src="https://mdn.mozillademos.org/files/10887/index-ch.png" style="height: 147px; width: 400px;"></td> + </tr> + </tbody> + <tbody> + <tr> + <th scope="col">Firefox</th> + <td><img alt="[Screenshot of a Firefox tab labeled with the HTML document's entire path and filename]" src="https://mdn.mozillademos.org/files/11143/index-ff.png"></td> + </tr> + </tbody> +</table> +</div> + +<dl> + <dt> + <h2 id="Définir_le_jeu_de_caractères_utilisé">Définir le jeu de caractères utilisé</h2> + </dt> +</dl> + +<p>Les ordinateurs enregistrent toutes les informations sous forme de zéros et de uns. Tous les nombres sont, au final, exprimé en base 2 (c'est-à-dire au format binaire). Pour exprimer d'autres valeurs, il est nécessaire de s'accorder sur un format de représentation qui définit la correspondance entre telle valeur binaire et telle valeur à représenter.</p> + +<p>Heureusement, lorsqu'il s'agit de représenter des chaînes de caractères, il existe un standard appelé {{glossary("UTF-8")}} qui permet d'associer des nombres binaires à l'ensemble des glyphes contenus dans les différents langages humains. On peut donc dire, sans ambiguité, que "A" sera stocké avec la valeur "65", ce qui correspond, en écriture binaire, au nombre "01000001". </p> + +<p>D'autres formes d'encodage sont encore utilisées par ailleurs, aussi, pour garantir le résultat obtenu, on déclare explicitement qu'on utilise UTF-8 dans le fichier HTML. C'est pour cette raison que nous avons ajouté <code><meta charset="utf-8"></code> dans l'exemple ci-avant.</p> + +<div class="note"> +<p><strong>Note :</strong> En plus de cette déclaration, il faut également enregistrer le fichier HTML avec l'encodage UTF-8. Généralememnt, vous trouverez une option dans le menu « Enregistrer sous… » qui permet de définir l'encodage à utiliser lors de l'enregistrement.</p> + +<p>Voici ce qui se produit si on utilise un document HTML encodé en ISO-8859-1 et non en UTF-8. Le navigateur affichera � à la place des lettres accentuées :</p> + +<p><img alt="[Screenshot showing the browser displaying ''Les Fran?ais utilisent des lettres accentu?es'']" src="https://mdn.mozillademos.org/files/10907/index-encoding.png" style="height: 132px; width: 335px;"></p> +</div> + +<h2 id="Modèles_et_gabarits">Modèles et gabarits</h2> + +<p>Au fur et à mesure que vous créerez vos document HTML, vous remarquerez que la même structure revient encore et toujours… et que c'est pénible de la saisir à chaque fois. Pour épargner du temps, vous pouvez sauvegarder ce code dans un fichier modèle que vous pourrez utiliser à chaque fois que vous aurez besoin d'une nouvelle page HTML (pour laquelle il suffira de copier le modèle plutôt que de retaper le code correspondant).</p> + +<p>Vous pouvez mettre en place des modèles personnalisés pour les différents projets que vous avez. Cela vous permettra d'éviter d'écrire à chaque fois la même chose pour les barres de navigation, les liens vers les feuilles de styles ou du code qui est réutilisé pour chaque page d'un site (certaines sociétés travaillent même à créer, fournir et vendre des modèles de fichiers HTML).</p> + +<div class="note"> +<p><strong>Astuce :</strong> Si votre éditeur de texte permet de gérer les <em>snippets</em> (fragments de code), vous pouvez placer votre modèle dans un <em>snippet</em> pour l'invoquer rapidement et générer un début de document à la vitesse de la lumière.</p> +</div> + +<div class="note"> +<p><strong>Astuce :</strong> À un certain moment, vous serez devenu-e très familier-e avec HTML. Lorsque ce sera le cas, n'hésitez pas à consulter le projet <a href="https://html5boilerplate.com/">HTML5 Boilerplate</a>. Celui-ci décrit des <em>templates</em> (modèles) avancés de documents HTML, construits avec les meilleures pratiques du développement web.</p> +</div> + +<h2 id="Exercices">Exercices</h2> + +<p>À construire, <a href="/fr/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">n'hésitez pas à contribuer !</a></p> diff --git a/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..e7c828c348 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,171 @@ +--- +title: Créer une liste d'éléments avec HTML +slug: Apprendre/HTML/Comment/Créer_une_liste_d_éléments_avec_HTML +tags: + - Beginner + - Guide + - HTML +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists +translation_of_original: Learn/HTML/Howto/Create_list_of_items_with_HTML +--- +<div class="summary"> +<p>Vous souhaitez ajouter une liste numérotée ou une liste à puces. Quel que soit son type, HTML permet de dresser une liste très rapidement.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable savoir comment <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre à mettre en place des listes (ordonnées et non-ordonnées) avec HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="Les_listes_non-ordonnées_et_les_listes_ordonnées">Les listes non-ordonnées et les listes ordonnées</h2> + +<dl> + <dt>Les listes non-ordonnées</dt> + <dd> + <p>Comme leur nom l'indique, les listes non-ordonnées n'ont pas de notion d'ordre et on peut mélanger leurs éléments sans que cela modifie leur sens. Une liste de courses est un bon exemple de liste non-ordonnée (l'ordre dans lequel on achète les produits n'a pas grande importance) :</p> + + <p><img alt="Croustille, moutarde" src="https://mdn.mozillademos.org/files/11639/3409407112_4348b68ea4_z.jpg" style="height: 281px; width: 423px;" title="Photo par Joseph SARDIN"></p> + + <p>(Photo par <a href="https://www.flickr.com/photos/14328577@N08/">Joseph SARDIN</a>)</p> + + <p>Les listes non-ordonnées apparaissent parfois à des endroits inattendus : les barres de navigation sont par exemple des listes non-ordonnées auxquelles on a appliqué quelques règles CSS pour la mise en forme.</p> + </dd> + <dt>Les listes ordonnées</dt> + <dd> + <p>Dans ce cas, les éléments de la liste doivent être lus ou réalisés dans un ordre donné, les éléments sont donc numérotés. On retrouve souvent ces listes pour décrire des processus pas-à-pas (comme un mode d'emploi ou une recette) où chaque étape ne peut être réalisée que si l'action précédente a été traitée :</p> + <a href="https://www.flickr.com/photos/chiotsrun/4457386990/sizes/m/"><img alt="" src="https://farm3.staticflickr.com/2785/4457386990_4d30f85964_d.jpg" style="height: 344px; width: 500px;" title="© Chiot's Run"></a></dd> +</dl> + +<h2 id="Construire_des_listes_avec_HTML">Construire des listes avec HTML</h2> + +<p>Comment donc construire une liste avec HTML ? Pour commencer, il faudra répondre à une question : si on mélange les éléments de la liste, est-ce que le sens de la liste change également ?</p> + +<ul> + <li>Si oui, alors il faudra utiliser un élément {{HTMLElement('ol')}} pour créer une <strong>liste ordonnée.</strong></li> + <li>Sinon, il faudra utiliser un élément {{HTMLElement('ul')}} qui permettra de créer une <strong>liste non-ordonnée.</strong></li> +</ul> + +<h3 id="Ajouter_des_éléments_à_une_liste">Ajouter des éléments à une liste</h3> + +<p>Toute la liste sera placée dans les balises {{htmlelement("ol")}} ou {{htmlelement("ul")}}. Chacun des éléments de la liste sera placé à l'intérieur d'un élément {{htmlelement("li")}}. Voici un exemple qui contient les deux types de liste :</p> + +<pre class="brush: html"><h1>Guacamole rapide à faire</h1> + +<h2>Ingrédients</h2> +<ul> + <li>2 avocats (pelés et avec les noyaux retirés)</li> + <li>le jus d'un citron</li> + <li>¼ de concombre, coupé grossièrement</li> + <li>1 petite tomate, coupée</li> +</ul> + +<h2>Instructions</h2> +<ol> + <li>Écrasez délicatement les avocats avec une fourchette</li> + <li>Placez la purée obtenue dans un plat et arrosez avec le jus de citron</li> + <li>Mélangez pour que le jus de citron empêche la purée d'avocat de noircir</li> + <li>Mélangez la tomate et le concombre coupés</li> + <li>Gardez au frais et servir rapidement avec des tortillas</li> +</ol> +</pre> + +<p>Par défaut, le navigateur utilisera des chiffres pour les listes ordonnées et des puces (rondes) pour les listes non-ordonnées :</p> + +<p>{{EmbedLiveSample('Ajouter_des_éléments_à_une_liste','100%',350)}}</p> + +<h3 id="Comment_modifier_la_numérotation_ou_les_puces">Comment modifier la numérotation ou les puces</h3> + +<h4 id="Avec_HTML">Avec HTML</h4> + +<ul> + <li><strong>Pour commencer une liste avec un autre nombre que 1</strong>, on pourra utiliser l'attribut {{htmlattrxref('start','ol')}} de l'élément {{HTMLElement('ol')}} : <code><ol start="3"></code>.</li> + <li><strong>Pour décompter plutôt que compter </strong>(par exemple 5-4-3-2-1), on pourra utiliser l'attribut {{htmlattrxref('reversed','ol')}} de l'élément {{HTMLElement('ol')}} : <code><ol reversed></code>.</li> + <li><strong>Pour utiliser des lettres à la place des chiffres</strong>, on pourra utiliser l'attribut {{htmlattrxref('type','ol')}} de l'élément {{HTMLElement('ol')}} : <code><ol type="a"></code> (<code>type="1"</code> affichera des nombres, <code>="a"</code> pour utiliser des lettres minuscules, <code>="A"</code> pour utiliser des lettres majuscules, <code>="i"</code> pour utiliser les chiffres romains en minuscules, <code>="I"</code> pour utiliser les chiffres romains en majuscules).</li> + <li><strong>Pour changer la numérotation d'un élément donné</strong>, on pourra utiliser l'attribut {{htmlattrxref('value','li')}} de la balise {{HTMLElement('li')}} : <code><li value="5"></code> (les éléments <em>suivants</em> de la liste seront également renumérotés).</li> +</ul> + +<p>Par exemple, ici, on aura une liste qui utilise des lettres majuscules et qui commence à partir de C :</p> + +<pre class="brush: html"><ol start="3" type="A"> + <li>Je suis premier</li> + <li>Je suis deuxième</li> + <li>Je suis troisième</li> +</ol></pre> + +<p>Ce qui donne :</p> + +<p>{{EmbedLiveSample('Avec_HTML','100%',90)}}</p> + +<h4 id="Avec_CSS">Avec CSS</h4> + +<p>Les attributs HTML permettent de modifier le contenu d'une liste. Pour ajuster l'aspect cosmétique d'une liste, il faudra utiliser CSS.</p> + +<ul> + <li><strong>Pour modifier le style de puce ou le style de numérotation, </strong>on pourra utiliser la propriété CSS {{cssxref("list-style-type")}}</li> + <li><strong>Pour utiliser une image donnée comme puce,</strong> on pourra utiliser la propriété CSS {{cssxref("list-style-image")}}. Attention toutefois, les images sont plus lourdes (donc plus lentes) et moins adaptatives que le texte.</li> +</ul> + +<p>CSS peut permettre d'obtenir des effets très complexes (comme <a href="/fr/docs/Web/CSS/Compteurs_CSS">un système de comptage personnalisé</a>). Si vous souhaitez apprendre CSS, vous pouvez parcourir <a href="/fr/docs/CSS/Premiers_pas">le Guide CSS</a> et voir <a href="/fr/Apprendre/HTML/Comment/Appliquer_du_CSS_à_une_page_web">comment appliquer des règles CSS à une page web</a>.</p> + +<p>Prenons un rapide exemple. Voici une liste HTML non-ordonnée :</p> + +<pre class="brush: html"><ul> + <li>J'ai un point</li> + <li>J'ai un cercle</li> + <li>J'ai aussi un cercle</li> +</ul></pre> + +<p>Ces règles CSS permettront que la puce des éléments soit un cercle, sauf pour le premier (où ce sera un point) :</p> + +<pre class="brush: css">ul { + list-style-type: circle; +} + +li:first-child { + list-style-type: disc; +} +</pre> + +<p>Ce code donnera :</p> + +<p>{{EmbedLiveSample('Avec_CSS','100%',90)}}</p> + +<h3 id="Les_listes_imbriquées">Les listes imbriquées</h3> + +<p>On voit souvent plusieurs listes placées les unes dans les autres. Autrement dit, on peut imbriquer des listes (un élément d'une liste sera une liste entière) :</p> + +<pre class="brush: html"><ul> + <li>Un composant</li> + <li>Un processus : + <ol> + <li>Étape 1</li> + <li>Étape 2</li> + <li>Étape 3</li> + </ol> + </li> + <li>Un composant</li> +</ul> +</pre> + +<p>Cela donnera le résultat suivant :</p> + +<p>{{ EmbedLiveSample('Les_listes_imbriquées','100%',150) }}</p> + +<p>Les menus de navigation utilisent parfois des listes imbriquées. Pour étudier un exemple réel, vous pouvez <a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_éditer_le_code_HTML">inspecter le code HTML</a> du menu MDN qui se situe en haut de cette page.</p> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{HTMLElement("ul")}}</li> + <li>{{HTMLElement("ol")}}</li> + <li>{{HTMLElement("li")}}</li> + <li><a href="http://www.w3.org/TR/html4/struct/lists.html#h-10.1">Des recommandations sur comment utiliser les listes</a></li> +</ul> diff --git a/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals_42ad0dcdd765b60d8adda1f6293954b6/index.html b/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals_42ad0dcdd765b60d8adda1f6293954b6/index.html new file mode 100644 index 0000000000..668ad5c084 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals_42ad0dcdd765b60d8adda1f6293954b6/index.html @@ -0,0 +1,189 @@ +--- +title: Mettre l'accent sur un contenu ou indiquer qu'un texte est important +slug: >- + Apprendre/HTML/Comment/Mettre_l_accent_sur_un_contenu_ou_indiquer_qu_un_texte_est_important +tags: + - Beginner + - Composing + - Guide + - HTML + - Learn + - OpenPractices +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance +translation_of_original: Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important +--- +<p class="summary">Dans cet article, nous verrons comment baliser des passages caractéristiques, selon leur importance, leur pertinence ou un changement de ton.</p> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable savoir comment <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML ismple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment marquer des passages de texte contenus dans votre document qui seraient spéciaux ou particulièrement importants pour les lecteurs.</td> + </tr> + </tbody> +</table> + +<p>Les dialogues ne se résument pas uniquement à des séries de mots : le ton importe également. Dans les œuvres couchées sur le papier, ce sont la ponctuation et la mise en forme qui permettent de retranscrire ces informations. Quelle que soit l'outil utilisé, le but est d'ajouter des informations implicites.</p> + +<p>Voici un exemple simple :</p> + +<blockquote> +<p>Je suis en retard.</p> + +<p>Je suis en retard ?</p> +</blockquote> + +<p>Dans cet exemple, la première phrase exprime une connaissance (je sais que je suis en retard) alors que la seconde évoque un doute ou pose une question. On remarquera que l'ordre des mots n'a pas changé, seule la ponctuation change cette nuance. À l'oral, cela se serait traduit par un changement de ton.</p> + +<p>La mise en forme permet également d'ajouter des nuances. Voici un deuxième exemple :</p> + +<blockquote> +<p>Je suis sympa, même si parfois je suis méchant.</p> +</blockquote> + +<p>Cette phrase est plutôt neutre. Ajoutons quelque chose pour changer ça :</p> + +<blockquote> +<p>Je suis <em>sympa</em>, même si parfois je suis méchant.</p> + +<p>Je suis sympa, même si parfois je suis <em>méchant</em>.</p> +</blockquote> + +<p>Remarquez-vous le changement que cela apporte ? L'italique accentue l'adjectif « sympa » ou « méchant ». En imprimerie, l'accentuation est portée par la mise en forme (ici la mise en italique). Il faudrait plus de contexte pour saisir tout le sens de cette phrase mais la mise en forme ajoute clairement une intonation.</p> + +<p>Cet article ne porte pas sur la mise en forme du document. Ce n'est pas le rôle de HTML que de mettre en forme un document (en revanche, la tâche est toute indiquée pour {{Glossary('CSS')}} qui vous aidera à contrôler l'aspect visuel de votre page web). Ici, nous verrons comment ajouter le <em>sens</em> porté par la mise en forme. Or, ajouter du sens est <em>le</em> rôle de HTML. Une fois que le sens est présent dans le document, alors, on pourra le mettre en forme grâce à <a href="/fr/Apprendre/CSS/Howto">CSS</a>.</p> + +<p>Ici, nous évoquerons trois nuances qui peuvent être exprimées par HTML : <em>l'emphase</em>, <em>l'importance</em> et <em>la pertinence</em><em>.</em></p> + +<h2 id="L'emphase">L'emphase</h2> + +<p>L'élément {{htmlelement('em')}} (<code><em></code> pour <em>emphase</em>) permet d'exprimer une accentuation particulière sur un ou plusieurs mots (qui se serait traduite à l'oral par un changement de ton).</p> + +<pre class="brush: html">Allons-nous <em>au cinéma</em> ce soir ? +<code>Allons-nous au cinéma <em>ce soir</em></code> ? +</pre> + +<p>Par défaut, un navigateur graphique affiche le texte contenu dans un élément <code><em></code> en italique mais cette mise en forme peut être changée avec CSS. Les lecteurs d'écran utiliseront un ton différent pour lire ce texte. Pour résumer, <em><code><em></code> signifie emphase et pas italique.</em></p> + +<h2 id="L'importance">L'importance</h2> + +<p>L'élément {{htmlelement("strong")}} permet d'indiquer une importance forte (c'est en quelque sorte une emphase renforcée).</p> + +<pre class="brush: html"><code><p> + <strong>Ne pas</strong> toucher ces produits chimiques. + Ces produits chimiques sont <strong>corrosifs !</strong> +</p></code> +</pre> + +<p>Ici aussi, par défaut les navigateurs graphiques afficheront le texte contenu dans <code><strong></code> en gras. Mais là encore, <em><code><strong></code> signifie « très important » et pas « gras » !</em> La mise en forme pourra être adaptée librement avec CSS. De même, un lecteur d'écran lira le texte différemment car celui-ci est important (et non parce qu'il est affiché en gras).</p> + +<h2 id="La_pertinence">La pertinence</h2> + +<p><code><strong></code> permet d'indiquer du texte qui est important pour le contexte courant. L'élément {{htmlelement("mark")}}, en revanche, signifie que le texte est pertinent par rapport au contenu destiné au lecteur. Un exemple courant est l'utilisation des résultats liés à une recherche :</p> + +<pre class="brush: html"><p> + « ce » apparaît 3 fois dans le texte : + <mark>Ce</mark> chat a tué <mark>ce</mark> + rat et <mark>ce</mark> moineau. +</p> +</pre> + +<p>Là encore, la mise en forme appliquée peut être modifiée. Par défaut, le texte sera affiché sur un fond jaune :</p> + +<p>{{EmbedLiveSample('La_pertinence', '100%', 64)}}</p> + +<div class="note"> +<p>Attention lorsqu'on utilise <code><mark></code> pour marquer des résultats liés à une recherche. Si la recherche renvoie des correspondances partielles, cela pourrait casser les éléments <code><mark></code>. Par exemple : <code>Le chat a couru après <mark>ce</mark>s oiseaux</code>. Cela entraînera des problèmes d'accessibilité car les lecteurs d'écran ne sauront pas traiter (ou traiteront mal) les mots ainsi découpés.</p> +</div> + +<h2 id="Les_éléments_associés_à_la_sémantique">Les éléments associés à la sémantique</h2> + +<p>Si vous souhaitez afficher un texte avec une mise en forme particulière, pensez d'abord au sens que vous souhaitez communiquer. Si le sens peut être transmis par {{htmlelement('em')}}, {{htmlelement('strong')}} ou {{htmlelement("mark")}}, utilisez ces éléments (plutôt que CSS seul, ce qui serait une mauvaise pratique).</p> + +<p>Il existe d'autres cas pour lesquels on affiche habituellement le texte en italique ou en gras et qui correspondent à une sémantique particulière qui peut être transmise grâce à des éléments HTML :</p> + +<ul> + <li>{{htmlelement("cite")}} pour <a href="/fr/Apprendre/HTML/Comment/Ajouter_citations_sur_page_web">les titres d'œuvres citées</a></li> + <li>{{htmlelement("dfn")}} pour <a href="/fr/Apprendre/HTML/Comment/Définir_des_termes_avec_HTML">la première occurence d'un terme</a></li> + <li>{{htmlelement("q")}} pour <a href="/fr/Apprendre/HTML/Comment/Ajouter_citations_sur_page_web">les citations dans le texte du document</a></li> + <li>{{htmlelement("var")}} pour <a href="/fr/Apprendre/HTML/Comment/Afficher_du_code_informatique_avec_HTML">les variables mathématiques</a></li> +</ul> + +<p>HTML ne permet pas de couvrir tous les cas de figures (sinon utiliser HTML correctement serait un calvaire de perfectionnisme). En règle générale, si vous souhaitez afficher du texte de façon différente et qu'il existe un élément HTML pour transmettre ce sens : utilisez-le, sinon vous pouvez utiliser l'élément neutre {{htmlelement("span")}} en spécifiant sa sémantique avec l'attribut {{htmlattrxref("class")}} et en le mettant en forme grâce à CSS.</p> + +<p>Les éléments que nous avons évoqués jusqu'à présent (à l'exception de <code><span></code>) ont tous une sémantique claire. En revanche, cela peut être plus ambigu avec les éléments {{htmlelement("b")}}, {{htmlelement("i")}} et {{htmlelement("u")}}. Ces éléments HTML permettent d'écrire du texte en gras, italique ou de le souligner. Ils sont apparus lorsque CSS n'existait pas ou avant qu'il ne soit supporté largement. Avec HTML5, ces éléments ont vu leur sémantique précisée.</p> + +<p>Voici la règle à respecter : s'il n'existe pas d'élément approprié permettant de retranscrire précisément le sens d'un texte qui serait généralement affiché en gras, italique ou souligné, alors on pourra utiliser <code><b></code>, <code><i></code> ou <code><u></code> à la place de <code><span></code>. Attention toutefois à ne pas oublier l'accessibilité : la mise en italique n'est pas particulièrement utile pour les personnes utilisant des lecteurs d'écran ou pour les personnes qui utilisent un alphabet non latin.</p> + +<ul> + <li>{{HTMLElement('i')}} permet généralement de retranscrire du texte placé en italique : des termes d'une langue étrangère, des dénominations taxonomiques, des termes techniques, des pensées, etc.</li> + <li>{{HTMLElement('b')}} permet de retranscrire du texte généralement affiché en gras : des mots-clés, des noms de produits, etc.</li> + <li>{{HTMLElement('u')}} permet de retranscrire des noms propres, des fautes d'orthographe</li> +</ul> + +<div class="note"> +<p>Léger avertissement à propos du soulignement : <strong>les visiteurs associent fortement le soulignement avec des hyperliens.</strong> De fait, on ne soulignera généralement que les liens d'une page. <code><u></code> ne doit être utilisé que lorsque la sémantique qu'il porte est sans équivoque. Dans ces cas, CSS pourra être utilisé pour définir un motif de soulignement différent, plus approprié. L'exemple qui suit illustre comment obtenir ce résultat.</p> +</div> + +<pre class="brush: html"><!-- Des noms scientifiques --> +<p> + Le colibri à gorge rubis (<i>Archilocus colubris</i>) + est l'espèce de colibri la plus répandue en Amérique + du Nord orientale. +</p> + +<!-- Des termes étrangers --> +<p> + Le menu comportait de nombreux termes exotiques comme + <i lang="uk-latn">vatrushka</i>, <i lang="id">nasi goreng</i> + et <i lang="en">pancakes</i>. +</p> + +<!-- Une faute d'orthographe --> +<p> + Un jour, j'écrirai <u class="erreur-orthographe">mieu</u>. +</p> + +<!-- Des mots-clés mis en avant dans un mode d'emploi --> +<ol> + <li> + <b>Tranchez</b> le pain en deux tranches. + </li> + <li> + <b>Insérez</b> une tranche de tomate et + une feuille de salade entre les tranches. + </li> +</ol> +</pre> + +<div id="instructions-with-b"> +<pre class="brush: css">/* Voici des mises en forme alternatives +permettant au lecteur de repérer la différence */ + +b { + font-weight: normal; + font-variant: small-caps; +} + +.erreur-orthographe { + text-decoration: underline red wavy; +} +</pre> +</div> + +<p>{{EmbedLiveSample('Les_éléments_associés_à_la_sémantique', '100%',192) }}</p> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{htmlelement("em")}}</li> + <li>{{htmlelement("strong")}}</li> + <li>{{htmlelement("mark")}}</li> + <li>{{htmlelement("b")}}</li> + <li>{{htmlelement("i")}}</li> + <li>{{htmlelement("u")}}</li> +</ul> diff --git a/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals_e22cde852fd55bbd8b014a4eac49a3bc/index.html b/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals_e22cde852fd55bbd8b014a4eac49a3bc/index.html new file mode 100644 index 0000000000..788bcc2a44 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals_e22cde852fd55bbd8b014a4eac49a3bc/index.html @@ -0,0 +1,95 @@ +--- +title: Mettre en place une hiérarchie de titres +slug: Apprendre/HTML/Comment/Mettre_en_place_une_hiérarchie_de_titres +tags: + - Beginner + - HTML + - Learn +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +translation_of_original: Learn/HTML/Howto/Set_up_a_proper_title_hierarchy +--- +<p class="summary">Dans cet article, nous verrons comment ajouter des titres de différents niveaux à un document web afin que les lecteurs puissent identifier le contenu et trouver les réponses à leurs questions plus efficacement.</p> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable savoir comment <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment utiliser des titres et les hiérarchiser dans un document web.</td> + </tr> + </tbody> +</table> + +<h2 id="Pourquoi_utiliser_des_titres">Pourquoi utiliser des titres ?</h2> + +<p>Les titres forment le squelette d'un texte sans fournir de longues explications. Prenons un exemple simple : même si ces deux textes sont en anglais, lequel semble le plus clair ?</p> + +<p><img alt="[Picture comparing a document with headings to a document without headings]" src="https://mdn.mozillademos.org/files/10717/Screenshot%20from%202015-05-05%2013:47:50.png" style="width: 100%;"></p> + +<p>Voilà une bonne partie de la réponse à la question posée avant.</p> + +<p>Comme vous pouvez le voir, un lecteur utilisera les titres et leurs niveaux pour déterminer quel contenu est présent et s'il est utile de poursuivre la lecture pour trouver le contenu recherché. Nous passons généralement <a href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">très peu de temps sur une page web</a> et consulter les titres fait partie du processus que nous déroulons pour déterminer s'il faut rester sur la page ou la quitter. Pour cette raison, il est préférable d'avoir une organisation claire pour les titres afin que le lecteur se repère facilement et continue à consulter la page.</p> + +<p>Vous faut-il plus d'arguments ? Savez-vous que certaines personnes ne lisent pas les pages web mais les écoutent grâce à des logiciels appelés {{interwiki('wikipedia',"Lecteur_d'écran","lecteurs d'écrans")}}. Ces logiciels permettent d'accéder rapidement à un contenu textuel donné. Parmi les techniques utilisées par ces logiciels, de nombreuses se basent sur les titres. Si les titres ne sont pas définis, pensez-vous que ces visiteurs prendront la peine d'écouter l'intégralité du document ?</p> + +<p>Enfin, le plan d'un document, composé des titres, est souvent utilisé par les moteurs de recherche pour déterminer la pertinence d'un article sur un sujet de recherche donné. Chaque niveau de titre (de 1 à 6) aura un « poids » différent : un titre de niveau 1 sera jugé plus pertinent qu'un titre de niveau 2 et ainsi de suite.</p> + +<h2 id="Les_titres_HTML">Les titres HTML</h2> + +<p>HTML fournit des éléments qui permettent de créer des titres dans des documents HTML : ce sont les éléments {{htmlelement('h1')}}, {{htmlelement('h2')}} et jusqu'à {{htmlelement('h6')}}.</p> + +<h3 id="Ajouter_le_titre_principal">Ajouter le titre principal</h3> + +<p>Au début du document, vous pouvez écrire le titre de plus au niveau entre des balises {{htmlelement('h1')}} :</p> + +<pre class="brush: html"><h1>Améliorez vos compétences sur le Web !</h1></pre> + +<p>Si vous considérez le document comme un arbre, le tronc sera le titre <code><h1></code>. Cela implique qu'un document ne doit avoir qu'un seul titre de niveau 1. Continuons les explications car ce sujet revient souvent dans les discussions. D'un point de vue technique, rien ne vous empêche d'utiliser plusieurs titres de niveau 1 dans vos documents. Cependant, d'un point de vue sémantique, cela serait bizarre car un titre de niveau 1 introduit un sujet totalement différent. Si vous jugez nécessaire d'avoir plusieurs titres de niveau 1 dans votre document, cela signifie peut être que le document doit être découpé en plusieurs documents dont chacun aurait un titre de niveau 1 distinct.</p> + +<p>Un autre argument en faveur d'un unique titre de niveau 1 serait l'impact sur le référencement. <a href="http://www.searchenginejournal.com/in-2014-how-important-is-an-h1-tag-for-seo/">Ce point est plus discutable</a> car les algorithmes des moteurs de recherche sont des secrets bien gardés, cela dit, certaines observations tendent à montrer que les niveaux de titres ont un impact sur le classement d'un site et que plus un niveau de titre est utilisé, plus l'impact sur le classement s'affaiblit.</p> + +<div class="note"> +<p><strong>Attention :</strong> On voit souvent les titres de niveau 1 utilisés pour mettre en avant le logo d'un site web ou sa marque. Comme ces informations ne sont pas les informations les plus structurantes ni les plus importantes, il est préférable d'éviter ce genre de détournement.</p> +</div> + +<h3 id="Ajouter_des_sous-titres">Ajouter des sous-titres</h3> + +<p>Sauf si votre document est très court, vous devrez le découper en sections. Chaque section commence avec un titre {{htmlelement("h2")}} :</p> + +<pre class="brush: html">... +<h2>Organisez la structure de votre document avec HTML</h2> +... +<h2>Ajustez le style de votre document avec CSS</h2> +...</pre> + +<p>Si besoins, vous pouvez découper vos sections en sous-sections et ainsi de suite en utilisant des éléments {{htmlelement("h3")}} jusqu'à {{htmlelement("h6")}}. Cela dit, si vous arrivez à un niveau de découpage avec {{htmlelement("h4")}} voire inférieur, cela peut signifier que votre document est trop long et qu'il serait préférable de le découper pour en faciliter la lecture.</p> + +<p>Lorsque vous créer des sections et sous-sections, il y a quelques points à prendre en compte afin d'améliorer l'expérience du lecteur :</p> + +<dl> + <dt>Gardez une hiérarchie cohérente</dt> + <dd>Autrement dit, cela signifie que vous devriez éviter de sauter des niveaux de titres (par exemple passer directement d'un niveau <code><h1></code> ou <code><h2></code> à un niveau <code><h4></code>). Vos lecteurs,<a href="https://www.youtube.com/watch?v=AmUPhEVWu_E"> notamment ceux qui utilisent des lecteurs d'écran</a>, pourraient penser que quelque chose manque à votre page.</dd> + <dt>Utilisez les niveaux de titre pour leur sémantique et non pour leur mise en forme</dt> + <dd>Le rôle de HTML est de fournir des informations sémantiques (sur le sens). La mise en forme par défaut d'un élément HTML donné n'a pas de rôle particulier et peut être modifiée avec {{Glossary("CSS")}}. Lorsqu'on s'occupe des titres, on peut utiliser <a href="/fr/docs/Web/CSS/font-size">la propriété CSS <code>font-size</code></a> afin de modifier la taille de la police utilisée.</dd> + <dt>N'utilisez pas les niveaux de titres pour représenter des sous-titres ou des slogans</dt> + <dd>Une des notions qui manque à HTML est le fait de ne pas avoir d'éléments particulier pour représenter un sous-titre ou un slogan. Certains développeurs utilisent les éléments de titre à cet effet mais cela entraîne des cassures dans la hiérarchie des titres et pose des problèmes d'accessibilité. Bien qu'il y ait quelques tentatives pour résoudre ce problème avec l'élément {{HTMLElement('hgroup')}}, il est préférable d'utiliser un élément {{htmlelement("p")}} ou {{htmlelement("span")}} avec un attribut {{htmlattrxref('class')}} donné.</dd> +</dl> + +<h2 id="Gérer_des_niveaux_de_titre_dynamiques">Gérer des niveaux de titre dynamiques</h2> + +<p>L'élément {{htmlelement("section")}} est apparu avec HTML5 pour marquer les différentes sections d'un document HTML, chacune de ces sections étant <em>a priori</em> suivie d'un titre approprié.</p> + +<p>Supposons que votre plan évolue (ce qui peut arriver si le HTML est généré de façon dynamique par le serveur) et que vous décidiez que certains <code><h3></code> devraient en fait être des <code><h2></code>. De même, si vous compilez plusieurs pages web en un e-book, cela peut être ennuyant que d'avoir à revoir tous les différents titres.</p> + +<p>Si vos <code><section></code> sont imbriquées de façon logique, HTML5 indique que chaque section peut commencer avec <code><h1></code> et que ceux-ci continueront à former un plan valide. L'idée est plutôt bonne mais souffre de quelques inconvénients : le code est moins lisible et il n'est plus possible d'appliquer une mise en forme différente pour les <code><h1></code> si ceux-ci n'ont pas la même importance.</p> + +<p>Pour plus de détails, lire l'article <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Sectionnement et plan d'un document HTML5</a>.</p> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Element/Heading_Elements">Les éléments de titre</a></li> +</ul> diff --git a/files/fr/conflicting/learn/html/introduction_to_html/index.html b/files/fr/conflicting/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..7e449e92e0 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/index.html @@ -0,0 +1,258 @@ +--- +title: Les balises HTML et leur rôle +slug: Apprendre/HTML/Balises_HTML +tags: + - Beginner + - CodingScripting + - HTML +translation_of: Learn/HTML/Introduction_to_HTML +translation_of_original: Learn/HTML/HTML_tags +--- +<div class="summary"> +<p>Cet article aborde les bases de {{Glossary("HTML")}} : les balises et comment les utiliser.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable connaître <a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche">la différence entre une page web et un site web</a> et <a href="/fr/Apprendre/HTML/Comment/Créer_un_document_HTML_simple">savoir comment créer un document HTML simple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre ce que sont les balises HTML et comment les utiliser correctement dans un document HTML.</td> + </tr> + </tbody> +</table> + +<p>{{Glossary("HTML")}} (<em>HyperText Markup Language</em>) est un langage descriptif utilisé pour structurer le contenu d'une page (ses textes, ses images, ses liens, etc.).</p> + +<p>Un document HTML est un fichier texte qui contient des {{glossary("balise","balises")}} (ou <em>tag</em> en anglais). Ces balises doivent être utilisées d'une certaine façon pour décrire correctement la structure du document. Les balises indiquent au navigateur comment afficher le document, certaines balises permettent d'intégrer différents médias comme des images, des vidéos ou des musiques parmi le texte de la page.</p> + +<p>Le navigateur n'affiche pas les balises telles quelles. Lorsqu'un utilisateur visite une page web, son navigateur <em>analyse</em> (ou <em>parse</em> en anglais) le document et l'<em>interprète</em> afin d'afficher la page web correctement. Par exemple, si le document contient une balise {{HTMLElement("img")}}, le navigateur chargera l'image associée et affichera l'image <em>à la place</em> de la balise HTML.</p> + +<h3 id="La_syntaxe_des_balises">La syntaxe des balises</h3> + +<p>Les balises HTML respectent une syntaxe simple et stricte :</p> + +<ul> + <li><strong>Un chevron ouvrant (<)</strong></li> + <li><strong>Le nom de la balise</strong></li> + <li><strong>Des attributs </strong>(optionnels). Un espace, suivi du nom de l'attribut, d'un signe égal (=) et d'une valeur entre doubles quotes ("").</li> + <li><strong>Un chevron fermant (>)</strong></li> +</ul> + +<p>Voici quelques exemples :</p> + +<ul> + <li><code><article></code></li> + <li><code><meta charset="utf-8"></code></li> + <li><code><img src="monImage.png" alt=""></code></li> +</ul> + +<h3 id="Les_éléments_HTML">Les éléments HTML</h3> + +<p>Généralement, les balises fonctionnent par paires. La première balise est la balise ouvrante et la seconde est la balise fermante. Une balise fermante <em>doit</em> avoir le même nom que la balise ouvrante correspondante. De plus, une balise fermante doit contenir une barre oblique entre le chevron initial et le nom de la balise. Ainsi, si <code><p></code> est une balise ouvrante, <code></p></code> sera la balise fermante correspondante.</p> + +<p>Un <strong>élément HTML</strong> se compose d'une balise ouvrante, d'un contenu textuel et d'une balise fermante :</p> + +<p><img alt="The basic syntax of HTML tags" src="https://mdn.mozillademos.org/files/8573/anatomy-of-an-html-element.png" style="height: 181px; width: 609px;"></p> + +<p>La rigidité des conventions pour la fermeture des balises est utile afin de pouvoir imbriquer différents éléments les uns dans les autres :</p> + +<pre class="brush: html"><p> + Voici le début du paragraphe + <strong> + ici un texte important au sein du paragraphe + </strong> + et là, la fin du paragraphe. +</p> +</pre> + +<div class="note"> +<p><strong>Bonne pratique :</strong> Si vous omettez les balises fermantes, le navigateur aura les coudées franches pour déterminer comment clôturer un élément. Ces règles sont bien définies mais souvent contre-intuitives (donc difficiles à deviner). Afin de vous épargner des pertes de temps à venir, préférez fermer les éléments.</p> +</div> + +<h3 id="Les_balises_HTML">Les balises HTML</h3> + +<p>HTML contient environ <a href="/fr/docs/Web/HTML/Element">140 balises</a> qui fournissent au navigateur des indications sur le sens d'un élément, son interprétation ou son affichage. Entre autres choses, les balises permettent de fournir des méta-données pour le document HTML, de mettre en avant certaines phrases, d'ajouter des fichiers multimédias ou de gérer des formulaires en ligne.</p> + +<p>Voici quelques-unes des balises les plus fréquemment utilisées :</p> + +<dl> + <dt>{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}</dt> + <dd>Ces balises permetttent de définir des titres de différents niveaux : <code>h1</code> pour les grands titres et <code>h6</code> pour les titres des sections très spécifiques.</dd> + <dt>{{HTMLElement("p")}}</dt> + <dd>La balise utilisée pour créer des paragraphes. Ces paragraphes sont généralement (automatiquement) séparés par des sauts de ligne.</dd> + <dt>{{HTMLElement("a")}}</dt> + <dd>Cette balise est utilisée afin de créer des liens vers des ressources externes : une autre page web, un e-mail, une image, une autre section du document, etc. Les balises {{HTMLElement("a")}} contiennent le texte qui sera utilisé pour le lien, l'attribut {{htmlattrxref("href","a")}} de cet élément est utilisé pour définir l'{{glossary("URL")}} cible : <code><a href="url_cible">du texte qui sera lu par l'utilisateur</a></code>.</dd> + <dt>{{HTMLElement("img")}}</dt> + <dd>Cette balise permet d'intégrer une image dans un document HTML. Voici un exemple d'utilisation : <code><img src="url/vers/mon/image.png" alt="Une description"></code></dd> +</dl> + +<dl> + <dt>{{HTMLElement("div")}} et {{HTMLElement("span")}}</dt> + <dd>Ces balises n'ont pas de signification particulière, elles permettent simplement de séparer des sections d'un document. La plupart du temps, ces balises sont utilisées pour la mise en forme et le script (dont nous discuterons plus tard).</dd> + <dt>{{HTMLElement("ul")}}, {{HTMLElement("ol")}} et {{HTMLElement("li")}}</dt> + <dd>Ces balises sont utilisées pour créer des listes. <code><ul></code> permet de définir une liste non-ordonnée et <code><ol></code> de définir une liste ordonnée. Pour chacune de ces listes, ce sera la balise <code><li></code> qui permettra de définir un élément de la liste. Voici un exemple avec <code><ul></code> :</dd> +</dl> + +<pre class="brush: html"> <ul> + <li>Café</li> + <li>Thé</li> + <li>Lait</li> +</ul></pre> + +<p>N'hésitez pas à expérimenter avec ces balises. Dans les articles suivants, nous verrons comment intégrer des fichiers multimédias, des formulaires, des tableaux, etc. Dans tous les cas, vous pouvez faire vos propres tests avec <a href="/fr/docs/Web/HTML/Element">n'importe quelle balise HTML</a>. Assurez-vous de bien choisir la bonne balise pour ce que vous souhaitez faire : la sémantique des éléments HTML est très importante, notamment pour les moteurs de recherches qui analysent et classent votre site.</p> + +<h2 id="Pédagogie_active">Pédagogie active</h2> + +<p><em>Cet article ne contient pas encore de matériau interactif. <a href="/fr/docs/MDN/Débuter_sur_MDN">N'hésitez pas à contribuer</a>.</em></p> + +<h2 id="Aller_plus_loin">Aller plus loin</h2> + +<p>Pour l'instant, nous avons vu quelques règles simples concernant les éléments et les balises HTML. Mais c'est bien connu, chaque règle a ses exceptions.</p> + +<h3 id="Les_balises_«_auto-fermantes_»_(ou_balises_vides)">Les balises « auto-fermantes » (ou balises vides)</h3> + +<p>Nous avons vu précédemment qu'un élément HTML était composé de texte entre deux balises. Cependant, certaines balises ne contiennent pas de texte. L'exemple le plus simple est {{HTMLElement("img")}}. Le navigateur remplace la balise <code><img></code> avec l'image indiquée, ignorant le texte de l'élément. Pour cette raison, <code><img></code> n'a pas de balise fermante.</p> + +<pre class="brush: html">Here some text before an image element + <img src="myImage.png" alt=""> +Here some text after an image element +</pre> + +<div class="note"> +<p><strong>Note :</strong> Attention à ne pas mélanger les éléments et les balises. Parfois, une balise seule permet de définir un élément mais la plupart du temps, les balises fonctionnent par paires.</p> +</div> + +<h3 id="Les_éléments_spéciaux">Les éléments spéciaux</h3> + +<p>En HTML, il existe deux éléments spéciaux qui n'ont pas de balise. Ces éléments sont essentiels pour tout document HTML.</p> + +<h4 id="Le_doctype">Le <em>doctype</em></h4> + +<p>Le <em>doctype</em> (pour « type de document ») est une déclaration formelle, placée au tout début d'un document HTML. Elle indique que le document est écrit avec du HTML standard. Le doctype se présente de cette façon :</p> + +<pre class="brush: html"><!DOCTYPE html></pre> + +<p>Si vous ne commencez pas votre document par <code><!DOCTYPE html></code>, les navigateurs afficheront votre document en <a href="https://developer.mozilla.org/fr/docs/Mode_quirks_de_Mozilla"><em>mode quirks</em></a>. Le mode <em>quirks</em> est le mode utilisé par le navigateur pour afficher les documents anciens ou malformés, écrits dans les années 1990 lorsque HTML était peu (voire pas du tout) standardisé et que chaque navigateur gérait HTML à sa façon.</p> + +<h4 id="Les_commentaires">Les commentaires</h4> + +<p>Les commentaires sont des éléments très particuliers. Ce sont des notes que vous pouvez utiliser pour annoter votre code HTML . Le navigateur n'affichera pas ces commentaires dans la page web (cependant, le code source peut être lu par n'importe qui et les commentaires seront donc publics comme le reste de la page).</p> + +<p>En HTML, les commentaires sont écrits avec du texte contenu entre <code><!--</code> et <code>--></code></p> + +<pre class="brush: html"><!-- Ceci est un commentaire. Il ne sera pas affiché dans le navigateur.--> + +Ce texte s'affichera dans le navigateur. +</pre> + +<h3 id="Structure_d'un_document_HTML">Structure d'un document HTML</h3> + +<p>La structure de base d'un document HTML est définie avec un ensemble de balises spéciales. Les éléments définis dans ces balises ne doivent pas apparaître plus d'une fois dans le document (excepté pour l'élément {{HTMLElement("title")}} ). Le navigateur gèrera les cas où ces éléments ne sont pas fournis (ce qui n'est pas conseillé).</p> + +<dl> + <dt>{{HTMLElement("html")}}</dt> + <dd>Cet élément définit la <em>racine</em> du document. Chaque document HTML ne contient qu'une <em>racine</em>. Tous les autres éléments doivent être placés dans cet élément.</dd> + <dt>{{HTMLElement("head")}}</dt> + <dd>Cet élément définit la <em>tête</em> du document. Le navigateur n'affichera pas cet élément qui ne contient que des méta-données, dont le titre et des informations descriptives. Les navigateurs pourront utiliser ces méta-données pour améliorer l'ergonomie de la page (nous le verrons par la suite).</dd> + <dt>{{HTMLElement("body")}}</dt> + <dd>Cet élément définit le <em>corps</em> du document. Il n'y a qu'un seul élément <code>body</code> dans un document HTML et celui-ci est toujours placé après la tête. L'utilisateur verra tout ce qui est placé dans cet élément.</dd> + <dt>{{HTMLElement("title")}}</dt> + <dd>Cet élément définit le <em>titre</em> d'un document. Le <em>titre</em> est le seul élément HTML obligatoire et il est placé dans la tête. En effet, le titre est une des méta-données utilisée par le navigateur (il est utilisé pour le titre de la fenêtre, le titre de l'onglet et aussi dans les résultats d'un moteur de recherche).</dd> +</dl> + +<h4 id="Formel_ou_valide">Formel ou valide ?</h4> + +<p>Voici le document HTML formel le plus simple qu'on puisse écrire :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Un document HTML formel</title> + </head> + <body> + <!-- Du contenu pour l'utilisateur ici --> + </body> +</html> +</pre> + +<p>Si on retire les différentes balises optionnelles, on obtient alors le document HTML <em>valide</em> le plus simple qui puisse être écrit :</p> + +<pre class="brush: html"><!DOCTYPE html> +<title>Et voilà un tout petit document HTML</title> +</pre> + +<div class="note"> +<p><strong>Bonne pratique :</strong> Nous vous recommandons d'utiliser la structure formelle. Si vous ne séparez pas clairement le contenu de <code><head></code> du contenu de <code><body></code>, il sera plus facile de commettre des erreurs qui entraîneront un comportement étrange du navigateur.</p> +</div> + +<h3 id="Les_éléments_qui_se_chevauchent">Les éléments qui se chevauchent</h3> + +<p>Pour finir notre aperçu sur les éléments HTML, précisons que les éléments peuvent être <em>imbriqués</em> mais ne peuvent pas se <em>chevaucher.</em></p> + +<p>Comment faire se chevaucher des éléments ? Voici un exemple :</p> + +<pre class="brush: html"><p> + le début de mon paragraphe + <strong> + du texte important +</p> +<p> + un deuxième paragraphe + </strong> + et l'élément strong a été bouclé + juste avant +</p> +</pre> + +<p>Dans l'exemple ci-dessus, l'élément <code>strong</code> chevauche ceux des paragraphes. Ceci est une erreur (qui n'est pas autorisée par HTML). Il faut plutôt écrire :</p> + +<pre class="brush: html"><p> + mon paragraphe commence ici + <strong> + du texte important + </strong> +</p> +<p> + <strong> + un deuxième paragraphe + </strong> + dont le début était important aussi +</p> +</pre> + +<p>Dans des cas simples comme celui-ci, le navigateur pourra deviner ce qui était voulu mais généralement de telles erreurs pourront avoir des répercussions importantes (par exemple avec {{Glossary("CSS")}} ou {{Glossary("JavaScript")}} que nous verrons bientôt). Par exemple, si nous avions utilisé une balise {{HTMLElement("div")}} à la place des balises {{HTMLElement("p")}} et {{HTMLElement("strong")}} :</p> + +<pre class="brush: html"><div> + le début de mon paragraphe + <div> + du texte important + </div> + <div> + un deuxième paragraphe + </div> + la fin du paragraphe +</div> +</pre> + +<p>Comment savoir si les éléments se chevauchent ou non ? C'est impossible car il n'y a plus de chevauchement mais une imbrication d'éléments <code>div</code> ! Attention donc si vous souhaitez maîtriser le comportement de vos futurs documents HTML.</p> + +<h3 id="Vérifier_le_code_HTML">Vérifier le code HTML</h3> + +<p>Une bonne pratique consiste à valider son code pour s'assurer qu'il est correct. Le meilleur outil pour cela est <a href="http://validator.w3.org/" rel="external">le validateur HTML du W3C</a>. C'est un outil en ligne qui analyse votre document HTML et vous indique si celui-ci respecte les spécifications HTML. Si le document est invalide, le validateur fournira des indications quant aux erreurs qu'il a trouvées.</p> + +<div class="note"> +<p><strong>Note :</strong> Étant donné la méthode utilisée par le validateur, il est préférable de se concentrer sur la première erreur relevée dans l'analyse. En effet, une seule erreur peut en déclencher d'autres en cascades. Si le résultat de l'analyse comporte une myriade d'erreurs, commencez par résoudre la première, cela permettra éventuellement de résoudre des erreurs suivantes.</p> +</div> + +<h2 id="Prochaines_étapes">Prochaines étapes</h2> + +<p>Grâce aux notions abordées dans cet article, vous devriez être en mesure d'écrire votre premier document HTML complet et d'obtenir une première version d'un site web fonctionnel.</p> + +<ul> + <li>Pour que cette page soit (plus) belle, vous pouvez lire <a href="/en-US/docs/Learn/CSS/CSS_properties">l'article sur les propriétés CSS et comment les utiliser</a>.</li> + <li>Pour savoir comment publier votre page web, vous pouvez lire <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">comment transférer ses fichiers vers un serveur web</a>.</li> +</ul> |