Elementos código de ordenador del HTML

❮ Anterior Siguiente Capítulo ❯

Elemento código de ordenador

<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>

HTML ordenador código de formato

HTML utiliza normalmente tamaño de la letra y espaciado variables.

Esto no es deseado cuando se muestran ejemplos de código informático.

La <kbd> , <samp> , y <code> todos los elementos de soporte fijo tamaño letra y espaciado.

HTML <kbd> Para la entrada de teclado

El HTML <kbd> elemento define la entrada de teclado:

Ejemplo

Resultado:

File | Open...

Inténtalo tú mismo "

HTML <samp> Para la salida de la computadora

El HTML <samp> elemento define un ejemplo de salida de un programa de ordenador:

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:

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

Inténtalo tú mismo "

HTML <code> Para código de ordenador

El HTML <code> elemento define una pieza de código de programación:

Ejemplo

<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>

Resultado:


var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;

Inténtalo tú mismo "

Observe que el <code> elemento no conserva espacios en blanco extra y saltos de línea.

Para solucionar esto, se puede poner el <code> elemento dentro de un <pre> elemento:

Ejemplo

<pre>
<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>
</pre>

Resultado:

var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;

Inténtalo tú mismo "

HTML <var> Para las variables

El HTML <var> elemento define una variable.

La variable podría ser una variable en una expresión matemática o una variable en el contexto de la programación:

Ejemplo

Einstein wrote: <var>E</var> = <var>m</var><var>c</var><sup>2</sup>.

Resultado:

Einstein wrote: E = m c ² .

Inténtalo tú mismo "

Ponte a prueba con los ejercicios!

Ejercicio 1 » Ejercicio 2» Ejercicio 3 »