Afficher des touches de clavier dans un document HTML

Si vous écrivez des documentations au format HTML, il peut être utile de symboliser des touches de clavier, par exemple lorsque l'utilisateur est invité à saisir une certaine combinaison de touches.

Voici un moyen simple de le faire en HTML:

Variante 1

<style type="text/css">
<!--
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; background-color:white; }

span.touche
{
margin-right: 1px;
padding-left:2px;
padding-right:2px;
border: 1px solid #6f6f6f;
background-color: #cfcfcf;
border-radius: 0.2em;
font-weight: bold;
-moz-border-radius: 0.2em;
}
-->
</style>

Tapez <span class="touche">A</span> 
<span class="touche">&#8629;Entrée</span>

Ce qui donne:

Variante 2

En voici une variante avec un petit effet de relief:

<style type="text/css">
<!--
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; background-color:white; }

span.touche
{
margin-right: 1px;
padding-left:2px;
padding-right:2px;
background-color: #dadada;
border-radius: 0.2em;
-moz-border-radius: 0.2em;
font-weight: bold;
border-style:outset;
border-width:2px;
}
-->
</style>

Tapez <span class="touche">A</span> 
<span class="touche">&#8629;Entrée</span>

Ce qui donne:

Caractères spéciaux

Si vous avez besoin d'autres symboles ou lettres, vous pouvez consulter les tables Unicode.