Afficher des touches de clavier dans un document HTML

Décembre 2016

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.

A voir également :

Ce document intitulé «  Afficher des touches de clavier dans un document HTML  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.