Cum se creează un calculator folosind HTML

Există mai multe moduri de a face calcule pe calculatorul dvs., utilizând calculatorul preinstalat, dar o altă modalitate este de a construi propriul dvs. cu un cod html simplu. Deci, nu puteți face doar calcule matematice într-un browser, dar veți învăța, de asemenea, elementele de bază ale artei de programare!

conținut

Pași
Metoda 1Înțelegerea codului
Metoda 2calculator html bază de cod
Metoda 3crearea calculatorului
Metoda 4utilizarea calculatorului
Sfaturi

pași

Metoda 1
Înțelegerea codului

Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 1

Aflați ce face fiecare funcție html. Codul folosit pentru a crea calculatorul constă din câteva piese de sintaxă care lucrează împreună pentru a defini diferite elemente dintr-un document. Faceți clic aici pentru a afla cum să vă familiarizați cu procesul sau continuați să citiți pentru a afla ce faceți în codul fiecăruia dintre liniile de text care vor fi folosite pentru a crea calculatorul.

html: această piesă de sintaxă spune restul documentului care limbă este folosită în cod. În programare există multe limbi și eticheta indică la restul documentului ce va fi codul - ați ghicit-o! - html.
cap: indică documentului că tot ceea ce este scris mai jos este compus din date, de asemenea cunoscute sub numele de "metadate". Eticheta este adesea folosit pentru a defini elementele stilistice ale unui document, cum ar fi titluri, anteturi și așa mai departe. Gândiți-vă la aceasta ca la o umbrelă, în care se va stabili restul codului.
titlu: Aici numiți titlul documentului. Acest atribut este utilizat pentru a defini ce titlu va apărea în browser imediat ce pagina se deschide.
corp bgcolor = "#": această etichetă definește culoarea de fundal a corpului paginii. Numarul cuprins intre ghilimele, dupa #, corespunde cu a culoarea predeterminată.
text = "": cuvântul plasat între ghilimele definește culoarea textelor din document.
form nume = "": specifică numele unui formular care poate fi folosit în construcția următoarelor, pe baza semnificației sale înțeles de jаvascript. De exemplu, acesta va fi numele formularului pe care îl vom folosi în calculator și care va crea o structură specifică pentru document.
tip de intrare = "": acesta este locul unde se desfășoară toată acțiunea. Acest atribut indică documentului ce tip de text vor fi valorile în restul parantezelor. De exemplu, ar putea avea forma textului, parola, butonul (ca în cazul calculatorului) și așa mai departe.
valoare = "": această comandă spune documentului ce va fi conținut în tipul de intrare specificat mai sus. În calculator, ele sunt afișate sub formă de numere (1-9) și operații (+, -, *, /, =).
onclick = "": o astfel de sintaxă descrie un eveniment care spune documentului că trebuie să se întâmple ceva când se face clic pe buton. Într-un calculator, dorim ca textul afișat pe fiecare buton să fie înțeles ca atare. Deci, pentru butonul "6", vom introduce ghilimele în document.calculator.ans.value + = `6`.
br: această etichetă inițiază o rupere de linie în document, astfel încât tot ce urmează va apărea cu o linie mai jos decât cea precedentă.
/ form, / body și / html: aceste comenzi spun documentului că etichetele corespunzătoare, începute anterior, se încheie acum.

Metoda 2
Calculator html bază de cod

Copiați codul de mai jos. Selectați textul prezent în caseta de mai jos, ținând mouse-ul în colțul din stânga sus și aducerea cursorului în colțul din dreapta jos, lăsându-l complet albastru. Apoi apăsați "CMD + C" pe un Mac sau "CTRL + C" în Windows pentru a copia codul în dosarul de descărcare.

Calculator HTMLSoluția este

Metoda 3
Crearea calculatorului

Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 3

Deschideți un editor de text pe computer. Există mai multe programe pe care le puteți utiliza, dar pentru confort și calitate recomandăm utilizarea Editorului de texte sau a Notepad-ului.

Pe un Mac, faceți clic pe lupă în colțul din dreapta sus al ecranului și deschideți Spotlight. Introduceți "Text Editor" și aplicația ar trebui să apară, evidențiată în albastru.
În Windows, deschideți meniul Start din colțul din stânga jos al ecranului. În bara de căutare, tastați "Notepad" și faceți clic pe aplicație, care va apărea în fereastra de rezultate din dreapta.

Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 4

Lipiți codul calculatorului html în document.

Pe Mac, faceți clic pe corpul documentului și apăsați pe "CMD + V"Apoi va trebui să faceți clic pe"format"în partea de sus a ecranului și faceți clic pe"Conversia în Text simplu"după ce ați inserat textul.
În Windows, faceți clic pe corpul documentului și apăsați pe "CTRL + V“.

Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 5

Salvați fișierul. Pentru a face acest lucru, faceți clic pe "Fotografia mea"în colțul din stânga sus al ferestrei și alegeți"Salvați ca ..."pe Windows sau"Salvați ..."pe Mac în meniul derulant.

Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 6

Adăugați extensia html la numele fișierului. În "Salvați ca ...", introduceți numele fișierului urmat de".html"și faceți clic pe"salva"De exemplu, dacă doriți să-l sunați Primul meu Calculator, ar trebui să o salvați ca "My FirstCalculator.html“.

Metoda 4
Utilizarea calculatorului

Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 7

Găsiți fișierul nou creat. Pentru ao găsi, introduceți numele fișierului în Spotlight sau câmpul de căutare din meniul "Start", așa cum este descris în pasul anterior. Nu este nevoie să introduceți extensia "html".

Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 8

Faceți clic pe fișier pentru al deschide. Browserul implicit va deschide calculatorul pe o nouă pagină.

Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 9

Faceți clic pe butoanele de pe calculator pentru al utiliza. Soluțiile pentru ecuații ar trebui să apară în bara de rezoluție.

sfaturi

Este posibil să încorporați acest calculator într-o pagină web, dacă doriți.
De asemenea, puteți utiliza stilul html pentru a schimba aspectul calculatorului.

Distribuiți pe rețelele sociale:

înrudit