Valor X

O Blog do Prof. Valdivino Sousa pretende de uma forma simples apresentar como a Matemática está presente em tudo, e como ela está inserida em nosso cotidiano.

Um jeito diferente de Aprendar Matemática

LightBlog

Posts Recentes

18/11/2018

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:
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.
3-Inserindo código-fonte com a tag 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:
5-Campo de entrada
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:
7-Com pré-formatação de texto
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.



Nenhum comentário:

Postar um comentário