Matemática Computacional: Fórmulas matemáticas em uma página HTML

Se você está construindo uma página HTML e precisa escrever fórmulas matemáticas, mensagens destacadas de entrada e saída ou códigos-fonte sem ter a necessidade de estilizar tudo isso via CSS, então poderá utilizar algumas tags do próprio HTML para isso.

Códigos e fórmulas matemáticas

1-Uso de variáveis

A tag <var> é utilizada para representar uma variável contida em uma expressão matemática. Junto com ela, podemos combinar diversas outras tags como a  e a  que inserem um número ou um termo um pouco abaixo ou acima da linha do elemento, respectivamente.

Considere o exemplo abaixo em que utilizamos as três tags descritas acima:

<h2>
1-Uso de variáveis</h2>
<var>a<sup>2</sup></var> = <var>b<sup>2</sup></var> + <var>c<sup>2</sup></var>
<br />
<var>a<sub>2</sub></var> = <var>b<sub>2</sub></var> + <var>c<sub>2</sub></var>

<h2>1-Uso de variáveis</h2>

Perceba que essas tags mudam a representação exibida no browser, dando o destaque característico, sem a necessidade de outras estilizações, exceto se o desenvolvedor quiser estilizar de outra forma, através de folhas de estilo.

2-Inserindo código-fonte sem a tag code

Agora mostraremos a representação da tag <code> que estiliza o seu conteúdo, como se fosse um código-fonte inserido dentro da página HTML.

<h2>
2-Inserindo código-fonte sem a tag code</h2>
b = 4; <br />
c = 5; <br />
a<sup>2</sup> = b<sup>2</sup> + c<sup>2</sup> <br />
Δ = b<sup>2</sup> - 4ac  <br />

<h2>2-Inserindo código-fonte sem a tag code</h2>

b = 4;

c = 5;

a2 = b2 + c2

Δ = b2 - 4ac

3-Inserindo código-fonte com a tag code

<h2>
3-Inserindo código-fonte com a tag code</h2>
<code>
 b = 4; <br />
 c = 5; <br />
 a<sup>2</sup> = b<sup>2</sup> + c<sup>2</sup> <br />
 Δ = b<sup>2</sup> - 4ac
</code>

<h2>3-Inserindo código-fonte com a tag code</h2>

<code>

b = 4;

c = 5;

a2 = b2 + c2

Δ = b2 - 4ac

</code>

Perceba que o código HTML do item 3 tem a tag <code> e apresenta formatação diferenciada na renderização do browser em relação ao item 2, pela ausência dessa tag.

Dentro desse código podemos destacar a representação do delta, utilizado em algumas fórmulas matemáticas, através do código Δ. No HTML é possível representar muitos símbolos, através de códigos especiais que são impossíveis de se escrever pelo teclado convencional. Veja alguns exemplos a seguir:

Alfa (Α): Α

Beta(Β): Β

Gama(Γ): Γ

Delta(Δ): Δ

Zeta(Ζ): Ζ

Etc.

4-Campo de saída

Caso você queira representar mensagem de entrada e saída dentro de um texto HTML, poderá utilizar as tags <samp> e <kbd> respectivamente, como no exemplo abaixo:

<h2>
4-Campo de saída</h2>
Essa tag representa um campo de saída: <samp>Mensagem de erro!</samp>

1 2	<h2>4-Campo de saída</h2> Essa tag representa um campo de saída: <samp>Mensagem de erro!</samp>

5-Campo de entrada

<h2>
5-Campo de entrada</h2>
Digite <kbd>Ctrl + X</kbd> para recortar.

1 2	<h2>5-Campo de entrada</h2> Digite <kbd>Ctrl + X</kbd> para recortar.

6-Sem pré-formatação de texto

Por fim, a tag <pre> é responsável por estilizar textos, preservando espaços em branco e formatação de estilo característico, sem a necessidade de estilizar via CSS. Acompanhe os exemplos abaixo sem e com a tag <pre>, respectivamente:

<h2>
6-Sem pré-formatação de texto</h2>
<code>
 b = 4;  
 c = 5;
 <var>Δ</var> = <var>b<sup>2</sup></var> - <var>4ac</var>
 <var>a<sup>2</sup></var> = <var>b<sup>2</sup></var> + <var>c<sup>2</sup></var>
</code>

<h2>6-Sem pré-formatação de texto</h2>

<code>

b = 4;

c = 5;

</code>

7-Com pré-formatação de texto

<h2>
7-Com pré-formatação de texto</h2>
<pre>
     <code>
     b = 4;  
     c = 5;
     <var>Δ</var> = <var>b<sup>2</sup></var> - <var>4ac</var>
     <var>a<sup>2</sup></var> = <var>b<sup>2</sup></var> + <var>c<sup>2</sup></var>
 </code>
</pre>

<h2>7-Com pré-formatação de texto</h2>

<pre>

<code>

b = 4;

c = 5;

</code>

</pre>

Comparando os itens 6 e 7, percebemos que a presença da tag <pre> no item 7 permite a exibição do texto formatado por linha e a presença de espaços em branco após o texto b = 4.

Dessa forma, podemos utilizar essas tags do HTML para representar a formatação de itens específicos em um código HTML, sem a necessidade de estilização maior, além de trazer, semanticamente, sentido para as expressões e fórmulas matemáticas escritas para quem for observar o seu código-fonte.