topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

sample-html-keyboard.htm / htm



  <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html id="www-tanfa-co-uk"><head>

style(s) 


  
  <link href="sample-html-keyboard.css" rel="stylesheet" type="text/css">
  </head><body>
  
  <p>(what about) the use of the <code>&lt;kbd&gt; element</code> to create an image of a <strong>Windows keyboard</strong>, it's kind of semantic don't you think?</p>
  <p align=right><a href=http://ago.tanfa.co.uk/css/borders/keyboard.html>original(s)</a></p>

keyboard 


  
  <div class="kbd">
  <p class="kbd"><kbd>&nbsp;Esc&nbsp;</kbd>&nbsp;<kbd>&nbsp;F1&nbsp;</kbd><kbd>&nbsp;F2&nbsp;</kbd><kbd>&nbsp;F3&nbsp;</kbd><kbd>&nbsp;F4&nbsp;</kbd>&nbsp;<kbd>&nbsp;F5&nbsp;</kbd><kbd>&nbsp;F6&nbsp;</kbd><kbd>&nbsp;F7&nbsp;</kbd><kbd>&nbsp;F8&nbsp;</kbd>&nbsp;<kbd>&nbsp;F9&nbsp;</kbd><kbd>F10</kbd><kbd>F11</kbd><kbd>F12</kbd>&nbsp;<kbd>PrtScn</kbd><kbd>Pause</kbd></p>
  <p class="kbd"><kbd>&nbsp;`/~&nbsp;</kbd><kbd>&nbsp;1/!&nbsp;</kbd><kbd>&nbsp;2/@&nbsp;</kbd><kbd>&nbsp;3/#&nbsp;</kbd><kbd>&nbsp;4/&nbsp;</kbd><kbd>&nbsp;5/%&nbsp;</kbd><kbd>&nbsp;6/^&nbsp;</kbd><kbd>&nbsp;7/&amp;&nbsp;</kbd><kbd>&nbsp;8/*&nbsp;</kbd><kbd>&nbsp;9/(&nbsp;</kbd><kbd>&nbsp;0/)&nbsp;</kbd><kbd>&nbsp;-/_&nbsp;</kbd><kbd>&nbsp;=/+&nbsp;</kbd><kbd class="p10">Backspace</kbd></p>
  <p class="kbd"><kbd>&nbsp;&nbsp;&nbsp;Tab&nbsp;&nbsp;&nbsp;</kbd><kbd>&nbsp;q/Q&nbsp;</kbd><kbd>&nbsp;w/W&nbsp;</kbd><kbd>&nbsp;e/E&nbsp;</kbd><kbd>&nbsp;r/R&nbsp;</kbd><kbd>&nbsp;t/T&nbsp;</kbd><kbd>&nbsp;y/Y&nbsp;</kbd><kbd>&nbsp;u/U&nbsp;</kbd><kbd>&nbsp;i/I&nbsp;</kbd><kbd>&nbsp;o/O&nbsp;</kbd><kbd>&nbsp;p/P&nbsp;</kbd><kbd>&nbsp;[&nbsp;/&nbsp;{&nbsp;</kbd><kbd>&nbsp;]&nbsp;/&nbsp;}&nbsp;</kbd><kbd>&nbsp;&nbsp;&nbsp;\&nbsp;/&nbsp;|&nbsp;&nbsp;&nbsp;</kbd></p>
  <p class="kbd"><kbd>&nbsp;&nbsp;Caps&nbsp;Lock&nbsp;&nbsp;</kbd><kbd>&nbsp;a/A&nbsp;</kbd><kbd>&nbsp;s/S&nbsp;</kbd><kbd>&nbsp;d/D&nbsp;</kbd><kbd>&nbsp;f/F&nbsp;</kbd><kbd>&nbsp;g/G&nbsp;</kbd><kbd>&nbsp;h/H&nbsp;</kbd><kbd>&nbsp;j/J&nbsp;</kbd><kbd>&nbsp;k/K&nbsp;</kbd><kbd>&nbsp;l/L&nbsp;</kbd><kbd>&nbsp;;&nbsp;/&nbsp;:&nbsp;</kbd><kbd>&nbsp;'&nbsp;/&nbsp;"&nbsp;</kbd><kbd class="p5">&nbsp;&nbsp;&nbsp;Enter&nbsp;&nbsp;&nbsp;</kbd></p>
  <p class="kbd"><kbd>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Shift&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</kbd><kbd>&nbsp;z/Z&nbsp;</kbd><kbd>&nbsp;z/X&nbsp;</kbd><kbd>&nbsp;c/C&nbsp;</kbd><kbd>&nbsp;v/V&nbsp;</kbd><kbd>&nbsp;b/B&nbsp;</kbd><kbd>&nbsp;n/N&nbsp;</kbd><kbd>&nbsp;m/M&nbsp;</kbd><kbd>,&nbsp;/&nbsp;&lt;</kbd><kbd>.&nbsp;/&nbsp;&gt;</kbd><kbd>/&nbsp;/&nbsp;?</kbd><kbd>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Shift&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</kbd></p>
  <p class="kbd"><kbd class="p5">&nbsp;&nbsp;Ctrl&nbsp;&nbsp;</kbd><kbd><img src="windows-key.gif" alt="Windows Key" height="13" width="16">&nbsp;Start&nbsp;</kbd><kbd>&nbsp;Alt&nbsp;</kbd><kbd>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Space
  Bar&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</kbd><kbd>&nbsp;Alt&nbsp;</kbd><kbd>&nbsp;<img src="windows-application-key.gif" alt="Windows Application Key" height="13" width="12">&nbsp;</kbd><kbd class="p5">&nbsp;&nbsp;Ctrl&nbsp;&nbsp;</kbd></p>
  </div>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.