aboutsummaryrefslogtreecommitdiff
path: root/files/fr/conflicting/learn/html
diff options
context:
space:
mode:
authorSphinxKnight <SphinxKnight@users.noreply.github.com>2021-11-05 15:44:38 +0100
committerGitHub <noreply@github.com>2021-11-05 15:44:38 +0100
commit79843297a1d97045c504575ab9a6a29b3af8ffae (patch)
treeac5d42490285f37fb933ca83034505ecdd784dc9 /files/fr/conflicting/learn/html
parent086e7141b8da9a5c008353582b8f72d7b5cda5b4 (diff)
downloadtranslated-content-79843297a1d97045c504575ab9a6a29b3af8ffae.tar.gz
translated-content-79843297a1d97045c504575ab9a6a29b3af8ffae.tar.bz2
translated-content-79843297a1d97045c504575ab9a6a29b3af8ffae.zip
Fixes #2842 - Fixing EmbedLiveSample errors for fr docs (#2851)
* Fixes #2842 for CSS pages * Fixes #2842 for Web API pages * Fixes #2842 for other sections * Fix EmbedLiveSample for moved CSS page * Fixes #2842 for conflicting / orphaned docs
Diffstat (limited to 'files/fr/conflicting/learn/html')
-rw-r--r--files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446/index.html272
1 files changed, 0 insertions, 272 deletions
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
deleted file mode 100644
index 2b074bec26..0000000000
--- a/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446/index.html
+++ /dev/null
@@ -1,272 +0,0 @@
----
-title: Identifier et expliquer des abréviations avec HTML
-slug: >-
- conflicting/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446
-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
-original_slug: Apprendre/HTML/Comment/Identifier_et_expliquer_des_abréviations
----
-<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_&lt;abbr>">L'élément <code>&lt;abbr&gt;</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>&lt;acronym&gt;</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">&lt;p&gt;Pouvez-vous m'envoyer les documents &lt;abbr&gt;SVP&lt;/abbr&gt; ?&lt;/p&gt;</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">&lt;p&gt;Pouvez-vous m'envoyer les documents &lt;abbr title="s'il vous plaît"&gt;SVP&lt;/abbr&gt; ?&lt;/p&gt;</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>&lt;abbr&gt;</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_&lt;abbr&gt;",'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>&lt;abbr&gt;</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">&lt;div class="exercise"&gt;
-  &lt;main&gt;
-    &lt;div class="instruction"&gt;Identifiez toutes les abréviations avec l'élément &lt;code&gt;&amp;lt;abbr&amp;gt;&lt;/code&gt;&lt;/div&gt;
-    &lt;div class="playground"&gt;&lt;textarea spellcheck="false"&gt;&lt;/textarea&gt;&lt;/div&gt;
-    &lt;div class="checking"&gt;
-      &lt;button&gt;Afficher les résultats&lt;/button&gt;&lt;span class="count"&gt;&lt;/span&gt;
-    &lt;/div&gt;
-    &lt;div class="result"&gt;Les &lt;abbr title="développeurs"&gt;dev&lt;/abbr&gt; Web utilisent &lt;abbr title="Hypertext Markup Language"&gt;HTML&lt;/abbr&gt; pour structurer des documents, &lt;abbr title="Cascading StyleSheet"&gt;CSS&lt;/abbr&gt; pour les mettre en forme et JavaScript pour ajouter des effets spéciaux grâce à certaines &lt;abbr title="Application Programming Interface"&gt;API&lt;/abbr&gt; dédiées.&lt;/div&gt;
-  &lt;/main&gt;
-&lt;/div&gt;</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 &amp;&amp; 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>