diff options
Diffstat (limited to 'files/fr/web/html/element/kbd/index.md')
| -rw-r--r-- | files/fr/web/html/element/kbd/index.md | 217 |
1 files changed, 217 insertions, 0 deletions
diff --git a/files/fr/web/html/element/kbd/index.md b/files/fr/web/html/element/kbd/index.md new file mode 100644 index 0000000000..8df53af401 --- /dev/null +++ b/files/fr/web/html/element/kbd/index.md @@ -0,0 +1,217 @@ +--- +title: '<kbd> : l''élément de saisie clavier' +slug: Web/HTML/Element/kbd +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/kbd +--- +<div>{{HTMLRef}}</div> + +<p>L'élément HTML <code><strong><kbd></strong></code> représente une plage de texte en ligne indiquant la saisie de texte par l'utilisateur à partir d'un clavier, d'une saisie vocale ou de tout autre dispositif de saisie de texte. Par convention, le {{Glossary("user agent")}} rend par défaut le contenu d'un élément <code><kbd></code> en utilisant sa police monospace, bien que cela ne soit pas requis par le standard HTML.</p> + +<p><code><kbd></code> peut être imbriqué dans diverses combinaisons avec {{HTMLElement("samp")}} (Sample Output) pour représenter diverses formes d'entrée ou d'entrée basées sur des repères visuels.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/kbd.html", "tabbed-shorter")}}</div> + +<h2 id="Attributs">Attributs</h2> + +<p>Cet élément ne contient que <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> + +<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> + +<p>D'autres éléments peuvent être utilisés en association avec <code><kbd></code> afin de représenter certains scénarios plus spécifiques :</p> + +<ul> + <li>Imbriquer un élément <code><kbd></code> dans un autre élément <code><kbd></code> représente une touche ou une unité de saisie au sein d'une saisie plus grande. Cf. {{anch("Représenter les frappes de touches dans une saisie")}} ci-après.</li> + <li>Imbriquer un élément <code><kbd></code> dans un élément {{HTMLElement("samp")}} permet d'indiquer que la saisie a été restituée (<em>echo</em>) à l'utilisateur. Cf. {{anch("Saisie restituée")}}, ci-après.</li> + <li>Imbriquer un élément <code><samp></code> dans un élément <code><kbd></code> permet de représenter des saisies basées sur le texte présenté par le système (cela peut être le nom de menus, d'éléments de menu ou le nom de bouttons affichés à l'écran). Cf. {{anch("Représenter les options de saisies à l'écran")}} ci-après..</li> +</ul> + +<div class="note"> +<p><strong>Note :</strong> Il est possible de définir un style pour surcharger la mise en forme par défaut du navigateur pour l'élément <code><kbd></code>. À ce titre, on gardera à l'esprit que les préférences et feuilles de style de l'utilisateur peuvent surcharger la mise en forme du site.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<pre class="brush: html"><p>Utilisez la commande <kbd>help macommande</kbd> afin de consulter + la documentation pour la commande "macommande".</p> +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample('Exemple_simple', 350, 80)}}</p> + +<h3 id="Représenter_les_frappes_de_touches_dans_une_saisie">Représenter les frappes de touches dans une saisie</h3> + +<p>Afin de décrire une saisie constituée de plusieurs touches, on imbriquera plusieurs élément <code><kbd></code> dans un élément <code><kbd></code> englobant qui représente la saisie dans son ensemble. Chaque frappe clavier qui le constitue sera représentée par son propre élément <code><kbd></code>.</p> + +<h4 id="Sans_mise_en_forme">Sans mise en forme</h4> + +<p>Commençons par analyser le code HTML.</p> + +<h5 id="HTML">HTML</h5> + +<pre class="brush: html"><p> + Vous pouvez également créer un nouveau document + en utilisant le raccourci clavier + <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd>. +</p></pre> + +<p>On voit ici que l'ensemble de la combinaison de touches est contenue dans un élément <code><kbd></code> et que chaque touche possèe son propre élément.</p> + +<h5 id="Résultat_2">Résultat</h5> + +<p>Sans mise en forme particulière, voici le résultat obtenu :</p> + +<p>{{EmbedLiveSample("Sans_mise_en_forme", 650, 80)}}</p> + +<h4 id="Avec_style">Avec style</h4> + +<p>On peut alors ajouter un peu de CSS :</p> + +<h5 id="CSS">CSS</h5> + +<p>On ajoute un règle pour les les éléments <code><kbd></code> avec la classe <code>"key"</code> afin de représenter les touches d'un clavier :</p> + +<pre class="brush: css">kbd.key { + border-radius: 3px; + padding: 1px 2px 0; + border: 1px solid black; +}</pre> + +<h5 id="HTML_2">HTML</h5> + +<p>On met à jour le code HTML afin d'utiliser cette classe :</p> + +<pre class="brush: html"><p> + Vous pouvez également créer un nouveau document + en utilisant le raccourci clavier + <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd>. +</p></pre> + + + +<h5 id="Résultat_3">Résultat</h5> + +<p>{{EmbedLiveSample("Avec_style", 650, 80)}}</p> + +<h3 id="Saisie_restituée">Saisie restituée</h3> + +<p>En imbriquant un élément <code><kbd></code> dans un élément {{HTMLElement("samp")}}, on peut représenter une saisie qui est restituée à l'utilisateur (à la façon d'un écho).</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><p> + S'il se produit une erreur de syntaxe, cet outil affichera + la commande initialement saisie pour que vous la revoyez : +</p> +<blockquote> + <samp><kbd>custom-git ad mon-nouveau-fichier.cpp</kbd></samp> +</blockquote></pre> + +<h4 id="Résultat_4">Résultat</h4> + +<p>{{EmbedLiveSample("Saisie_restituée", 650, 100)}}</p> + +<h3 id="Representer_les_options_de_saisies_a_l_ecran">Représenter les options de saisies à l’écran</h3> + +<p>Imbriquer un élément <code><samp></code> dans un élément <code><kbd></code> représente une saisie basée sur du texte affiché par le système (par exemple des noms de menu, d'éléments de menu, des noms de boutons affichés à l'écran, etc.).</p> + +<h4 id="HTML_4">HTML</h4> + +<p>Ainsi, si on souhaite expliquer comment choisir l'option "Nouveau document" dans le menu "Fichier" avec un document HTML, on pourra écrire :</p> + +<pre class="brush: html"><p> + Pour créer un nouveau fichier, sélectionner l'option + <kbd><kbd><samp>Fichier</samp></kbd>⇒<kbd><samp>Nouveau + document</samp></kbd></kbd> dans le menu. +</p> + +<p> + N'oubliez pas de cliquer sur le bouton + <kbd><samp>OK</samp></kbd> afin de confirmer + que vous avez saisi le nom du nouveau fichier. +</p></pre> + +<p>On voit ici différentes imbrications. La description de l'option du menu est incluse dans un élément <code><kbd></code> qui contient le menu et le nom de l'élément du menu dans des éléments <code><kbd></code> et <code><samp></code>, indiquant que la saisie se fera par l'intermédiaire de quelque chose présenté à l'écran.</p> + +<h4 id="Résultat_5">Résultat</h4> + +<p>{{EmbedLiveSample("Representer_les_options_de_saisies_a_l_ecran", 650, 120)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th> + <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">Contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>{{no_tag_omission}}</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLElement")}}<br> + Jusqu'à Gecko 1.9.2 (Firefox 4), Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</td> + </tr> + </tbody> +</table> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-kbd-element', '<kbd>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-kbd-element', '<kbd>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Extension de l'élément afin d'inclure tout type de saisie de l'utilisateur (vocale, tactile, clavier).</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<kbd>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{Compat("html.elements.kbd")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{htmlelement("code")}}</li> + <li>{{htmlelement("samp")}}</li> +</ul> |