Elementos de entrada de teclado usando la etiqueta HTML kbd

Introducción

La etiqueta HTML <kbd> se utiliza para crear elementos de entrada de teclado para los usuarios en una página web. Esta etiqueta representa un intervalo de texto en línea que denota una entrada en el formato de texto proveniente del teclado, entrada de voz o cualquier otra entrada de texto mediante el teclado.

En este laboratorio, aprenderá a usar la etiqueta HTML kbd para crear elementos de entrada de teclado en sus páginas web.

Nota: Puede practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página 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{{"Entrada de teclado en HTML"}} html/head_elems -.-> lab-70783{{"Entrada de teclado en HTML"}} html/doc_flow -.-> lab-70783{{"Entrada de teclado en HTML"}} html/inter_elems -.-> lab-70783{{"Entrada de teclado en HTML"}} end

Configurar el archivo HTML

Cree un nuevo archivo HTML denominado index.html y configure la estructura básica de un documento HTML.

Agregue el siguiente código a su archivo index.html para configurar la estructura del documento:

<!doctype html>
<html>
  <head>
    <title>Elementos de entrada de teclado usando la etiqueta HTML kbd</title>
  </head>
  <body>
    <!-- Agregue contenido aquí -->
  </body>
</html>

Agregar elementos de entrada de teclado usando la etiqueta

Agregue elementos de entrada de teclado usando la etiqueta <kbd> dondequiera que desee denotar un elemento de entrada de teclado en su página web.

Agregue el siguiente código dentro de la etiqueta <body> para definir un elemento de entrada de teclado con la etiqueta <kbd> para el comando "Ctrl + V":

<p>Para pegar texto presione <kbd>Ctrl</kbd> + <kbd>V</kbd></p>

Ahora, agregue el siguiente código dentro de la etiqueta <body> para definir un elemento de entrada de teclado con la etiqueta <kbd> para el comando "Shift + Enter":

<p>Para crear una nueva línea presione <kbd>Shift</kbd> + <kbd>Enter</kbd></p>

Anidar la etiqueta `<kbd>` dentro de la etiqueta `<samp>`

Si desea especificar que la entrada ha sido respondida al usuario por el sistema, puede anidar la etiqueta <kbd> dentro de la etiqueta <samp>.

Agregue el siguiente código dentro de la etiqueta <body> para anidar la etiqueta <kbd> dentro de la etiqueta <samp> para especificar una entrada respondida por un sistema:

<p>
  El valor ingresado es:<samp><kbd>Ingrese valor</kbd>:</samp>
</p>

Resumen

En este laboratorio, aprendió cómo usar la etiqueta HTML <kbd> para crear elementos de entrada de teclado en páginas web. Puede usar esta etiqueta en cualquier lugar donde desee denotar un elemento de entrada de teclado en su página web. La etiqueta <kbd> puede ser anidada dentro de la etiqueta <samp> para especificar una entrada respondida al usuario por un sistema.

Entrada de teclado en HTML