From 8829a7c9eb82f180bac76ed5836aaef95be209a1 Mon Sep 17 00:00:00 2001 From: julieng Date: Wed, 13 Oct 2021 07:12:55 +0200 Subject: move *.html to *.md --- files/fr/web/html/element/kbd/index.html | 217 ------------------------------- files/fr/web/html/element/kbd/index.md | 217 +++++++++++++++++++++++++++++++ 2 files changed, 217 insertions(+), 217 deletions(-) delete mode 100644 files/fr/web/html/element/kbd/index.html create mode 100644 files/fr/web/html/element/kbd/index.md (limited to 'files/fr/web/html/element/kbd') diff --git a/files/fr/web/html/element/kbd/index.html b/files/fr/web/html/element/kbd/index.html deleted file mode 100644 index 8df53af401..0000000000 --- a/files/fr/web/html/element/kbd/index.html +++ /dev/null @@ -1,217 +0,0 @@ ---- -title: ' : l''élément de saisie clavier' -slug: Web/HTML/Element/kbd -tags: - - Element - - HTML - - Reference - - Web -translation_of: Web/HTML/Element/kbd ---- -
{{HTMLRef}}
- -

L'élément HTML <kbd> 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 <kbd> en utilisant sa police monospace, bien que cela ne soit pas requis par le standard HTML.

- -

<kbd> 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.

- -
{{EmbedInteractiveExample("pages/tabbed/kbd.html", "tabbed-shorter")}}
- -

Attributs

- -

Cet élément ne contient que les attributs universels.

- -

Notes d'utilisation

- -

D'autres éléments peuvent être utilisés en association avec <kbd> afin de représenter certains scénarios plus spécifiques :

- - - -
-

Note : Il est possible de définir un style pour surcharger la mise en forme par défaut du navigateur pour l'élément <kbd>. À 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.

-
- -

Exemples

- -

Exemple simple

- -
<p>Utilisez la commande <kbd>help macommande</kbd> afin de consulter
- la documentation pour la commande "macommande".</p>
-
- -

Résultat

- -

{{EmbedLiveSample('Exemple_simple', 350, 80)}}

- -

Représenter les frappes de touches dans une saisie

- -

Afin de décrire une saisie constituée de plusieurs touches, on imbriquera plusieurs élément <kbd> dans un élément <kbd> englobant qui représente la saisie dans son ensemble. Chaque frappe clavier qui le constitue sera représentée par son propre élément <kbd>.

- -

Sans mise en forme

- -

Commençons par analyser le code HTML.

- -
HTML
- -
<p>
-  Vous pouvez également créer un nouveau document
-  en utilisant le raccourci clavier
-  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd>.
-</p>
- -

On voit ici que l'ensemble de la combinaison de touches est contenue dans un élément <kbd> et que chaque touche possèe son propre élément.

- -
Résultat
- -

Sans mise en forme particulière, voici le résultat obtenu :

- -

{{EmbedLiveSample("Sans_mise_en_forme", 650, 80)}}

- -

Avec style

- -

On peut alors ajouter un peu de CSS :

- -
CSS
- -

On ajoute un règle pour les les éléments <kbd> avec la classe  "key" afin de représenter les touches d'un clavier :

- -
kbd.key {
-  border-radius: 3px;
-  padding: 1px 2px 0;
-  border: 1px solid black;
-}
- -
HTML
- -

On met à jour le code HTML afin d'utiliser cette classe :

- -
<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>
- - - -
Résultat
- -

{{EmbedLiveSample("Avec_style", 650, 80)}}

- -

Saisie restituée

- -

En imbriquant un élément <kbd> dans un élément {{HTMLElement("samp")}}, on peut représenter une saisie qui est restituée à l'utilisateur (à la façon d'un écho).

- -

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>
- -

Résultat

- -

{{EmbedLiveSample("Saisie_restituée", 650, 100)}}

- -

Représenter les options de saisies à l’écran

- -

Imbriquer un élément <samp> dans un élément <kbd>  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.).

- -

HTML

- -

Ainsi, si on souhaite expliquer comment choisir l'option "Nouveau document" dans le menu "Fichier" avec un document HTML, on pourra écrire :

- -
<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>
- -

On voit ici différentes imbrications. La description de l'option du menu est incluse dans un élément <kbd> qui contient le menu et le nom de l'élément du menu dans des éléments <kbd> et <samp>, indiquant que la saisie se fera par l'intermédiaire de quelque chose présenté à l'écran.

- -

Résultat

- -

{{EmbedLiveSample("Representer_les_options_de_saisies_a_l_ecran", 650, 120)}}

- -

Résumé technique

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Catégories de contenuContenu de flux, contenu phrasé, contenu tangible.
Contenu autoriséContenu phrasé.
Omission de balises{{no_tag_omission}}
Parents autorisésTout élément qui accepte du contenu phrasé.
Rôles ARIA autorisésTous les rôles sont autorisés.
Interface DOM{{domxref("HTMLElement")}}
- Jusqu'à Gecko 1.9.2 (Firefox 4), Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément.
- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'semantics.html#the-kbd-element', '<kbd>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-kbd-element', '<kbd>')}}{{Spec2('HTML5 W3C')}}Extension de l'élément afin d'inclure tout type de saisie de l'utilisateur (vocale, tactile, clavier).
{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<kbd>')}}{{Spec2('HTML4.01')}}
- -

Compatibilité des navigateurs

- -

{{Compat("html.elements.kbd")}}

- -

Voir aussi

- - 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: ' : l''élément de saisie clavier' +slug: Web/HTML/Element/kbd +tags: + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/kbd +--- +
{{HTMLRef}}
+ +

L'élément HTML <kbd> 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 <kbd> en utilisant sa police monospace, bien que cela ne soit pas requis par le standard HTML.

+ +

<kbd> 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.

+ +
{{EmbedInteractiveExample("pages/tabbed/kbd.html", "tabbed-shorter")}}
+ +

Attributs

+ +

Cet élément ne contient que les attributs universels.

+ +

Notes d'utilisation

+ +

D'autres éléments peuvent être utilisés en association avec <kbd> afin de représenter certains scénarios plus spécifiques :

+ +
    +
  • Imbriquer un élément <kbd> dans un autre élément <kbd> 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.
    • +
  • Imbriquer un élément <kbd> dans un élément  {{HTMLElement("samp")}} permet d'indiquer que la saisie a été restituée (echo) à l'utilisateur. Cf. {{anch("Saisie restituée")}}, ci-après.
    • +
  • Imbriquer un élément <samp> dans un élément <kbd> 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..
    • +
+ +
+

Note : Il est possible de définir un style pour surcharger la mise en forme par défaut du navigateur pour l'élément <kbd>. À 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.

+
+ +

Exemples

+ +

Exemple simple

+ +
<p>Utilisez la commande <kbd>help macommande</kbd> afin de consulter
+ la documentation pour la commande "macommande".</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemple_simple', 350, 80)}}

+ +

Représenter les frappes de touches dans une saisie

+ +

Afin de décrire une saisie constituée de plusieurs touches, on imbriquera plusieurs élément <kbd> dans un élément <kbd> englobant qui représente la saisie dans son ensemble. Chaque frappe clavier qui le constitue sera représentée par son propre élément <kbd>.

+ +

Sans mise en forme

+ +

Commençons par analyser le code HTML.

+ +
HTML
+ +
<p>
+  Vous pouvez également créer un nouveau document
+  en utilisant le raccourci clavier
+  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd>.
+</p>
+ +

On voit ici que l'ensemble de la combinaison de touches est contenue dans un élément <kbd> et que chaque touche possèe son propre élément.

+ +
Résultat
+ +

Sans mise en forme particulière, voici le résultat obtenu :

+ +

{{EmbedLiveSample("Sans_mise_en_forme", 650, 80)}}

+ +

Avec style

+ +

On peut alors ajouter un peu de CSS :

+ +
CSS
+ +

On ajoute un règle pour les les éléments <kbd> avec la classe  "key" afin de représenter les touches d'un clavier :

+ +
kbd.key {
+  border-radius: 3px;
+  padding: 1px 2px 0;
+  border: 1px solid black;
+}
+ +
HTML
+ +

On met à jour le code HTML afin d'utiliser cette classe :

+ +
<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>
+ + + +
Résultat
+ +

{{EmbedLiveSample("Avec_style", 650, 80)}}

+ +

Saisie restituée

+ +

En imbriquant un élément <kbd> dans un élément {{HTMLElement("samp")}}, on peut représenter une saisie qui est restituée à l'utilisateur (à la façon d'un écho).

+ +

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>
+ +

Résultat

+ +

{{EmbedLiveSample("Saisie_restituée", 650, 100)}}

+ +

Représenter les options de saisies à l’écran

+ +

Imbriquer un élément <samp> dans un élément <kbd>  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.).

+ +

HTML

+ +

Ainsi, si on souhaite expliquer comment choisir l'option "Nouveau document" dans le menu "Fichier" avec un document HTML, on pourra écrire :

+ +
<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>
+ +

On voit ici différentes imbrications. La description de l'option du menu est incluse dans un élément <kbd> qui contient le menu et le nom de l'élément du menu dans des éléments <kbd> et <samp>, indiquant que la saisie se fera par l'intermédiaire de quelque chose présenté à l'écran.

+ +

Résultat

+ +

{{EmbedLiveSample("Representer_les_options_de_saisies_a_l_ecran", 650, 120)}}

+ +

Résumé technique

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Catégories de contenuContenu de flux, contenu phrasé, contenu tangible.
Contenu autoriséContenu phrasé.
Omission de balises{{no_tag_omission}}
Parents autorisésTout élément qui accepte du contenu phrasé.
Rôles ARIA autorisésTous les rôles sont autorisés.
Interface DOM{{domxref("HTMLElement")}}
+ Jusqu'à Gecko 1.9.2 (Firefox 4), Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément.
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'semantics.html#the-kbd-element', '<kbd>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-kbd-element', '<kbd>')}}{{Spec2('HTML5 W3C')}}Extension de l'élément afin d'inclure tout type de saisie de l'utilisateur (vocale, tactile, clavier).
{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<kbd>')}}{{Spec2('HTML4.01')}}
+ +

Compatibilité des navigateurs

+ +

{{Compat("html.elements.kbd")}}

+ +

Voir aussi

+ +
    +
  • {{htmlelement("code")}}
    • +
  • {{htmlelement("samp")}}
    • +
-- cgit v1.2.3-54-g00ecf