Curso de HTML5 e CSS3 – 7a. Aula – Computer Code

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:

HTML: Aula 7 – Code 01

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.

HTML: Aula 7 - Code 02
HTML: Aula 7 – Code 02

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:

HTML: Aula 7 - 03 -Samp 01
HTML: Aula 7 – 03 -Samp 01

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.

HTML: Aula 7 - Samp 02
HTML: Aula 7 – Samp 02

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>

HTML: Aula 7 - Var 01
HTML: Aula 7 – Var 01

KBD

O elemento <kbd> é utilizado para marcar Keyboard Input

<section class="exemplo">
    <b>Exemplo 06</b>
    <p>
        <kbd>File | Open...</kbd>
    </p>
</section>