DifiTsi.com

Creați un calculator cu HTML

Există o serie de modalități pe care le puteți face calculele pe un computer desktop cu un calculator încorporat, dar o altă opțiune este să vă creați unul folosind un cod HTML simplu. Pentru a crea un calculator cu HTML, aflați câteva elemente de bază despre HTML, copiați codul necesar într-un editor de text și salvați-l cu o extensie de fișier HTML. Apoi, puteți utiliza calculatorul dvs. deschizând documentul HTML într-un browser. Dacă faceți toate acestea, nu puteți face doar calcule într-un browser, puteți afla, de asemenea, elementele de bază ale artei de programare!

metodă

Partea 1
Înțelegeți codul

Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 1
1
Aflați ce fac fiecare funcție HTML. Codul pe care îl veți folosi pentru a crea calculatorul dvs. constă din multe părți cu o sintaxă care colaborează pentru a defini diferite elemente ale unui document. Faceți clic aici pentru instrucțiuni despre cum să vă familiarizați cu aceasta, sau citiți mai departe pentru a afla ce înseamnă fiecare linie de text din cod pentru a vă face calculatorul.
  • html: Această parte a sintaxei spune restul documentului care limbă este folosită în cod. Atunci când sunt programate limbi diferite sunt utilizate și indică pentru restul documentului că este în - ați ghicit-o! - html este.
  • cap: Aceasta indică faptul că totul sub el este date, numite și "metadate". Indicația este de obicei folosit pentru a defini elemente stilistice ale unui document, cum ar fi titluri, titluri și așa mai departe. Imaginați-vă ca pe un ecran în care se definește restul codului.
  • titlu: Aici introduceți titlul documentului. Acest atribut definește ce este titlul documentului atunci când acesta este deschis în browser.
  • corp bgcolor = "#": Setează culoarea de fundal. Numărul dintre aceste două ghilimele după semnul hash (#) corespunde cu unul culoarea predeterminată.
  • text = "": Cuvântul dintre aceste două ghilimele stabilește culoarea textului în document.
  • form nume = "": Specifică numele unui formular care construiește structura a ceea ce urmează. Acest lucru depinde de ceea ce înseamnă numele formularului în jаvascript. Vom z. De exemplu, utilizați numele de formular "calculator", care creează o structură specifică în document.
  • tip de intrare = "": Aici se întâmplă acțiunea. Atributul "tip de intrare" indică ce tip de text sunt valorile în restul parantezelor. Ai putea z. Ca text, o parolă, un buton (ca calculator) și așa mai departe.
  • value = "": Aceasta specifică ce conține tipul de intrare de mai sus. Pentru un calculator, acestea sunt numerele noastre (1 la 9) și operațiunile (+, -, *, /, =).
  • onclick = "": Această sintaxă descrie un eveniment care spune documentului că trebuie să se întâmple ceva când se face clic pe buton. Pentru un calculator, dorim ca textul afișat pe fiecare buton să fie înțeles ca atare. Pentru butonul "6" am setat document.calculator.ans.value + = `6` între ghilimele.
  • br: Această etichetă declanșează o ruptură de linie, astfel încât tot ce vine după aceasta să apară într-o linie de mai jos.
  • / form, / body și / html: Aceasta va închide sau va termina informațiile relevante.

Partea 2
Un cod HTML simplu pentru un calculator

Copiați codul de mai jos. Evidențiați textul din caseta de mai jos făcând clic pe textul din colțul din stânga sus, ținând apăsat butonul mouse-ului și glisând mouse-ul în colțul din dreapta jos al casetei, astfel încât întregul text să fie albastru. Apoi apăsați Command + C pe un Mac sau Ctrl + C pe un PC pentru a copia codul în clipboard.

Calculator HTML 
Soluția este

Partea 3
Creați-vă calculatorul

Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 3
1
Deschideți un editor de text pe computer. Există o serie de programe pe care le puteți utiliza, dar din motive de confort și calitate, vă recomandăm să utilizați TextEdit sau Notepad.
  • Pe un Mac, faceți clic pe lupa din partea dreaptă sus pentru a deschide Spotlight. Tastați Spotlight TextEdit și faceți clic pe programul TextEdit, care acum trebuie evidențiat în albastru.
  • Mergeți în partea de jos a meniului de pornire de pe un PC. Introduceți câmpul de căutare Notepad și faceți clic pe programul Notepad, care este afișat în partea dreaptă a listei cu rezultatele.
  • Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 4
    2
    Lipiți codul HTML pentru un calculator în document.
    • Pe un Mac, faceți clic pe document și apăsați "Command + V". Apoi trebuie să faceți clic pe codul din partea superioară a ecranului „Formatarea“ faceți clic pe și "Textul pur" Selectați.
    • Faceți clic pe un PC din document și apăsați "Ctrl + V".


  • Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 5
    3
    Salvați fișierul. Faceți clic pe "Fișier" în colțul din stânga sus și selectați "Salvare ca ..." din meniu.
  • Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 6
    4
    Adăugați o extensie HTML la numele fișierului. În meniul "Salvați ca ...", introduceți numele fișierului urmat de ".html" și apoi faceți clic pe "Salvați". Dacă aveți fișierul z. De exemplu, dacă doriți să denumiți primul meu calculator, ați salva fișierul ca Primul Calculator.html.

    • Partea 4
    Utilizați calculatorul

    Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 7
    1
    Găsiți fișierul pe care l-ați creat. Introduceți numele fișierului în Spotlight sau în caseta de căutare din meniul Start (așa cum este descris în pasul anterior). Nu trebuie să introduceți extensia de fișier "html".
  • Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 8
    2
    Faceți clic pe fișier pentru a deschide. Browserul dvs. implicit deschide calculatorul ca un nou site Web.
  • Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 9
    3
    Faceți clic pe butoanele calculatorului pentru al utiliza. Rezultatele ecuațiilor dvs. sunt afișate în câmpul rezultat.

    • Sfaturi

    • Aveți posibilitatea să încorporați acest calculator într-o pagină Web, dacă doriți.
    • De asemenea, puteți utiliza HTML pentru a personaliza aspectul calculatorului.
    Distribuiți pe rețelele sociale:

    înrudit