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

 

 

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 <sub> e a <sup> 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:

XHTML

<h2> 1-Uso de variáveis</h2> <var>a²</var> = <var>b²</var> + <var>c²</var> <br /> <var>a₂</var> = <var>b₂</var> + <var>c₂</var>

1 2 3 4

<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>

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.

XHTML

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

1 2 3 4 5

<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 /> &Delta; = b<sup>2</sup> - 4ac  <br />

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

XHTML

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

1 2 3 4 5 6 7

<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 /> &Delta; = b<sup>2</sup> - 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 &Delta;. 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 (Α): &Alpha;

Beta(Β): &Beta;

Gama(Γ): &Gamma;

Delta(Δ): &Delta;

Zeta(Ζ): &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:

XHTML

<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

XHTML

<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:

XHTML

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

1 2 3 4 5 6 7

<h2>6-Sem pré-formatação de texto</h2> <code> b = 4;   c = 5; <var>&Delta;</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>

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

XHTML

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

1 2 3 4 5 6 7 8 9

<h2>7-Com pré-formatação de texto</h2> <pre>      <code>     b = 4;       c = 5;     <var>&Delta;</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>

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.