Éléments d'entrée clavier utilisant la balise HTML kbd

Introduction

La balise HTML <kbd> est utilisée pour créer des éléments d'entrée clavier pour les utilisateurs sur une page web. Cette balise représente une plage de texte en ligne qui indique une entrée au format de texte provenant du clavier, une entrée vocale ou toute autre entrée de texte au clavier.

Dans ce laboratoire, vous allez apprendre à utiliser la balise HTML kbd pour créer des éléments d'entrée clavier dans vos pages web.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70783{{"Entrée clavier HTML"}} html/head_elems -.-> lab-70783{{"Entrée clavier HTML"}} html/doc_flow -.-> lab-70783{{"Entrée clavier HTML"}} html/inter_elems -.-> lab-70783{{"Entrée clavier HTML"}} end

Configurez le fichier HTML

Créez un nouveau fichier HTML nommé index.html et configurez la structure de base d'un document HTML.

Ajoutez le code suivant à votre fichier index.html pour configurer la structure du document :

<!doctype html>
<html>
  <head>
    <title>Éléments d'entrée clavier utilisant la balise HTML kbd</title>
  </head>
  <body>
    <!-- Ajoutez le contenu ici -->
  </body>
</html>

Ajoutez des éléments d'entrée clavier à l'aide de la balise

Ajoutez des éléments d'entrée clavier à l'aide de la balise <kbd> à l'endroit où vous voulez indiquer un élément d'entrée clavier sur votre page web.

Ajoutez le code suivant à l'intérieur de la balise <body> pour définir un élément d'entrée clavier avec la balise <kbd> pour la commande "Ctrl + V" :

<p>Pour coller du texte, appuyez sur <kbd>Ctrl</kbd> + <kbd>V</kbd></p>

Maintenant, ajoutez le code suivant à l'intérieur de la balise <body> pour définir un élément d'entrée clavier avec la balise <kbd> pour la commande "Shift + Entrée" :

<p>
  Pour créer une nouvelle ligne, appuyez sur <kbd>Shift</kbd> + <kbd>Enter</kbd>
</p>

Incorporez la balise `<kbd>` à l'intérieur de la balise `<samp>`

Si vous voulez spécifier que l'entrée a été traitée par le système en réponse à l'utilisateur, vous pouvez incruster la balise <kbd> à l'intérieur de la balise <samp>.

Ajoutez le code suivant à l'intérieur de la balise <body> pour incruster la balise <kbd> à l'intérieur de la balise <samp> afin de spécifier une entrée traitée par un système :

<p>
  La valeur entrée est :<samp><kbd>Entrez une valeur</kbd> :</samp>
</p>

Récapitulatif

Dans ce laboratoire, vous avez appris à utiliser la balise HTML <kbd> pour créer des éléments d'entrée clavier dans les pages web. Vous pouvez utiliser cette balise n'importe où vous voulez indiquer un élément d'entrée clavier sur votre page web. La balise <kbd> peut être imbriquée à l'intérieur de la balise <samp> pour spécifier une entrée traitée renvoyée à l'utilisateur par un système.

Entrée clavier HTML