Menu
Donnez votre avis

Afficher des touches de clavier dans un document HTML

Posez votre question
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.
Ajouter un commentaire

Commentaires

Commenter la réponse de sandburg