Computer Code
A linguagem HTML nos fornece uma série de elementos que podemos utilizar quando precisamos representar códigos fontes, funções matemáticas e textos pre-formatados. Neste artigo serão apresentados alguns destes elementos, apesar de serem pouco utilizados, pois raramente precisamos representar este tipo conteúdo, eles são extremamente úteis.
Code
O elemento “<code>
” é utilizado para marcar trechos de código de programas. No exemplo a seguir estamos destacando um código Javascript:
<section class="exemplo"> <b>Exemplo 01</b> <p> <code> var x = 5; var y = 6; document.getElementById("demo").innerHTML = x + y; </code> </p> </section>
Quando carregamos o código em um navegador devemos obter algo semelhante ao conteúdo da imagem abaixo:
Mas o elemento <code>
não preserva os espaços em branco e as quebras de linha, logo podemos combinar este com o elemento <pre>
. Observe o no código a baixo a presença desta nova tab.
<section class="exemplo"> <b>Exemplo 02</b> <p> <pre> <code> var x = 5; var y = 6; document.getElementById("demo").innerHTML = x + y; </code> </pre> </p> </section>
A imagem a abaixo mostra como o código deve ser interpretado peplo navegador e como os espaços e as quebras de linha foram preservadas.
Samp
O elemento <samp>
é utilizado para marcar blocos que representam a saída gerada por um programa, como no exemplo abaixo:
<section class="exemplo"> <b>Exemplo 03</b> <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> </p> </section>
Quando carregamos em código em um navegador, o resultado deve ser muito semelhante ao da imagem a seguir:
Assim como o elemento code, o elemento <samp>
não preserva os espaços em branco, neste caso podemos utilizar o elemento <pre>
:
<section class="exemplo"> <b>Exemplo 04</b> <pre> <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> </pre> </section>
A imagem a seguir monstra como nosso código, utilizando a tab <pre>
será apresentado em um navegador.
Var
O elemento <var>
é utilizado para marcar variáveis, tanto no contexto da matemática quanto no da programação.
<section class="exemplo"> <b>Exemplo 05</b> <p> Einstein wrote: <var>E</var> = <var>m</var><var>c</var><sup>2</sup>. </p> </section>
Na imagem a seguir, podemos observar o resultado que obtemos com a utilização desta tag <var>
KBD
O elemento <kbd>
é utilizado para marcar Keyboard Input
<section class="exemplo"> <b>Exemplo 06</b> <p> <kbd>File | Open...</kbd> </p> </section>