Normalmente, HTML utiliza fuentes y espaciado de letras variables. Sin embargo, esto no se aplica cuando se utilizan los elementos que simulan código de computadora. Los elementos keybord <kbd>, sample <samp>, code <code> y variable <var> disponen de fuente y espaciado de letra fijos.
HTML keyboard <kbd>
El elemento HTML <kbd> se utiliza para indicarle al usuario el texto que éste debe introducir.
Ejemplo:
<p>Por favor, introduzca su <kbd>Nombre de usuario</kbd> y su <kbd>Contraseña</kbd>.</p>
Resultado en el navegador:
Por favor, introduzca su Nombre de usuario y su Contraseña.
HTML sample <samp>
El elemento HTML <samp> se utiliza para mostrar un mensaje de salida de un programa, script o computadora.
Ejemplo:
<samp> demo.example.com login: Apr 12 09:10:17 Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 </samp>
Resultado en el navegador:
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
HTML code <code>
El elemnto HTML <code> se utliza para mostrar códigos de programas, scripts o computadoras.
Ejemplo:
<code>
var persona = { Nombre:"Juan", Apellido:"Nadie", Edad:50, ColorOjos:"azul" }
</code>
Resultado en el navegador:
var persona = { Nombre:"Juan", Apellido:"Nadie", Edad:50, ColorOjos:"azul" }
Preservar espacios en blanco y saltos de línea
El elemento HTM <code> no preserva los espacios en blanco o saltos de línea extra. Si deseas obtener el siguiente resultado:
var persona = {
Nombre:"Juan",
Apellidos:"Nadie",
Edad:50,
ColorOjos:"azul"
}
y utilizas el siguiente código:
<code>
var persona = {
Nombre:"Juan",
Apellidos:"Nadie",
Edad:50,
ColorOjos:"azul"
}
</code>
veras que resultado que obtienes es el siguiente:
var persona = { Nombre:"Juan", Apellido:"Nadie", Edad:50, ColorOjos:"azul" }
es decir no se muestran los saltos de línea deseados.
Para que se preserven tanto los espacios en blanco adicionales, como los saltos de linea, debes de utilizar el elemento <pre> de la siguiente forma:
<code>
<pre>
var persona = {
Nombre:"Juan",
Apellidos:"Nadie",
Edad:50,
ColorOjos:"azul"
}
</pre>
</code>
HTML variable <var>
El elemento HTML <var> se utiliza para definir variables matemáticas.
Ejemplo:
<p>Einstein descubrio que: <var>E = m c<sup>2</sup></var></p>
Resultado en el nevegador:
Einstein descubrio que: E = m c2
Resumen
A continuación, se muestra el código completo de un documento HTML, en el que se utilizan los elementos HTML explicados en este artículo. Para ver el resultado del mismo: abre tu editor texto favorito: el Bloc de notas de Windows, TextEdit de Mac o gEdit de Linux, por citar algunos de los más usuales, y escribe o copia y pega lo siguiente:
<!DOCTYPE html>
<html>
<head>
<title>Webdisnia - Ejemplos HTML</title>
</head>
<body style="font-size:16px">
<h2>HTML Keybord</h2>
<p>El elemento kdb se utiliza para indicarle al usuario el texto que este debe introducir:</p>
<p>Por favor, introduzca su <kbd>Nombre de usuario</kbd> y su <kbd>Contraseña</kbd>.</p>
<h2>HTML sample</h2>
<p>El elemento samp se utiliza para mostrar un mensaje de salida de un programa, script o computadora.</p>
<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>
<h2>HTML code</h2>
<p>El elemento code se utiliza para mostrar el código de un programa o script</p>
<code>
var persona = { Nombre:"Juan", Apellido:"Nadie", Edad:50, ColorOjos:"azul" }
</code>
<h2>Preservar espacios en blanco y saltos de línea extra</h2>
<p>Para preservar los espacios en blanco y saltos de línea al utilizar los elementos
kbd, samp y code; hay que utilizar el elemento HTML pre.</p>
<code>
<pre>
var persona = {
Nombre:"Juan",
Apellidos:"Nadie",
Edad:50,
ColorOjos:"azul"
}
</pre>
</code>
<h2>HTML variable</h2>
<p>El elemento var se utiliza para definir variables matemáticas.</p>
<p>Einstein descubrio que: <var>E = m c<sup>2</sup></var></p>
</body>
</html>
Guarda el documento con el nombre: computercode.html (los documentos HTML deben tener extensión .htm o .html)
Sal de editor de texto, busca el documento y haz doble clic en él. El resultado final, dependerá del navegador que utilices, pero sera muy similar al siguiente:
Felicitaciones por estas ayudas, no siempre estás al día en el conocimiento de los códigos en los html5.
Continuar así y gracias por permitir consultar vuestra página.