Como criar uma calculadora usando HTML: 9 etapas (com fotos)

Há muitas maneiras de fazer matemática em um computador desktop usando uma calculadora embutida, mas outra maneira é construir um sozinho usando um código HTML simples. Para criar uma calculadora usando HTML, aprenda alguns básicos sobre HTML e copie o código necessário em um editor de texto e salve-o com uma extensão HTML. Você pode então usar sua calculadora abrindo o documento HTML no seu navegador favorito. Ao fazer tudo isso, você não será apenas capaz de fazer matemática em um navegador, mas também pode aprender alguns fundamentos sobre a arte de codificar!

Passos

Parte 1 de 4:

Entendendo seu código

1. Aprenda o que cada função HTML está fazendo. O código que você usará para criar sua calculadora é composto de muitas peças de sintaxe que trabalham juntas para definir diferentes elementos de um documento. Clique aqui para uma explicação de como se familiarizar com este processo, ou ler para aprender o que cada linha de texto está fazendo no código que você estará usando para fazer sua calculadora.

html: Esta peça de sintaxe informa ao restante do documento que idioma está sendo usado no código. Na codificação, vários idiomas usados para codificar e Diz o resto do documento que será - você adivinhou! - html.
cabeça: Diz o documento de que tudo abaixo é dados sobre dados, também conhecidos como "Metadados". O O comando é geralmente usado para definir elementos estilísticos de um documento, como títulos, títulos e assim por diante. Pense nisso como um guarda-chuva em que o restante do código é definido.
título: Este é o lugar onde você nomeará o título do seu documento. Este atributo é usado para definir o que o título do documento será aberto em um navegador HTML.
Body bgcolor = "Miserável": Este atributo define a cor do plano de fundo e do corpo do código. O número neste conjunto de citações que aparecem após # correspondem a um Cor predeterminada.
texto = "": A palavra neste conjunto de cotações define a cor do texto no documento.
nome do formulário ="": Este atributo especifica o nome de um formulário, que é usado para construir a estrutura do que vem depois baseado no que jаvascript sabe que o nome do formulário significa. Por exemplo, o nome do formulário que usaremos é a calculadora, que criará uma estrutura específica para o documento.
Tipo de entrada ="": É aqui que a ação acontece. O "tipo de entrada" Atributo informa ao documento que tipo de texto os valores no restante dos suportes são. Por exemplo, eles podem ser texto, uma senha, um botão (como será para uma calculadora), e assim por diante.
valor ="": Este comando informa ao documento o que será contido no tipo de entrada especificado acima. Para uma calculadora, estes aparecem como nossos números (1-9) e operações (+, -, *, /, =)).
onclick ="": Esta sintaxe descreve um evento, que informa ao documento que algo deve ocorrer quando o botão é clicado. Para uma calculadora, queremos que o texto seja exibido em cada botão para entendido como tal. Então, para o "6" botão, vamos colocar documento.calculadora.ans.valor + = `6` entre as citações.
BR: Esta tag inicia uma ruptura de linha no documento, para que seja o que vier depois que aparecerá uma linha abaixo do que veio antes dele.
/ formulário, / corpo e / html: Esses comandos informam ao documento que os comandos correspondentes que foram iniciados anteriormente no documento estão agora terminando.

Parte 2 de 4:

Código Básico da Calculadora HTML

1. Copie o código abaixo. Realce o texto na caixa abaixo segurando seu cursor no canto superior esquerdo da caixa, e arrastando-o para o canto inferior direito da caixa para que todo o texto seja azul. Então aperte "Comando + C" em um mac ou "Ctrl + C" Em um PC para copiar o código a área de transferência.

Parte 3 de 4:

Criando sua calculadora

1. Abra um programa de edição de texto no seu computador. Há um número de programas que você pode usar, mas por conveniência e qualidade, recomendamos o uso de Textedit ou Bloco de Notas..

Em um Mac, clique na lupa no canto superior direito da tela para abrir o spotlight. Uma vez lá, digite TextIt e clique no programa Textedit, que agora deve ser destacado em azul.
Em um PC, abra o menu Iniciar no canto inferior esquerdo da tela. Na barra de pesquisa, digite o bloco de notas e clique no aplicativo notepad, que aparecerá na barra de resultados para a direita

Criar uma calculadora usando HTML Step 4

2. Cole o código HTML para uma calculadora no documento.

Em um Mac, clique no corpo do documento e pressione "Comando + V". Você então precisará clicar em "Formato" No topo da tela e clique em "Fazer texto simples" Depois de colar o código.

Em um PC, clique no corpo do documento e pressione "Ctrl + V".

Criar uma calculadora usando HTML Step 5

3. Salve o arquivo. Para fazer isso, clique no "Arquivo" botão na mão superior esquerda da sua janela e clique em "Salvar como..." em um PC ou "Salve ..." Em um Mac no menu que cai.

Criar uma calculadora usando HTML Step 6

4. Adicione uma extensão HTML ao nome do arquivo. No "Salvar como..." Menu, digite seu nome de arquivo seguido por ".html", e depois clique "Salve ". Por exemplo, se você quisesse chamar este arquivo minha primeira calculadora, você salvaria o arquivo como "Myfirstcalculator.html"

Parte 4 de 4:

Usando sua calculadora

1. Encontre o arquivo que você acabou de criar. Para fazer isso, digite o nome do seu arquivo no Spotlight ou na barra de pesquisa do menu Iniciar, conforme descrito na etapa anterior. Você não precisa digitar o "html" extensão.