HTML para principiantes (Parte 11): kbd, samp, code y var

Redes sociales

HTML

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:

01

 

Redes sociales

1 Comentario

  1. AvatarPaul Torres

    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.

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *