gtemata.com

Cum se creează un calculator folosind cod HTML

Există nenumărate moduri de a efectua calcule matematice cu un computer desktop folosind doar calculatorul încorporat în sistemul de operare, dar dacă sunteți o persoană creativă care îi place să iasă în evidență, puteți încerca să creați un calculator personalizat folosind HTML. Pentru a face acest lucru, trebuie să învățați câteva cunoștințe de bază despre HTML, să copiați codul necesar într-un editor de text simplu și să îl salvați ca fișier HTML. În acest moment, veți putea utiliza calculatorul dvs. personal deschizând fișierul HTML în browserul dvs. de internet preferat. În acest fel, nu numai că veți putea să efectuați cele mai complexe calcule matematice folosind un simplu browser de internet, veți fi învățat, de asemenea, câteva fundamente ale artei de programare!

paşi

Partea 1

Aflați sintaxa HTML de bază
Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 1
1
Aflați cum funcționează codul HTML și elementele individuale care o compun. Codul sursă pe care îl veți utiliza pentru a crea calculatorul dvs. este compus din mai multe cuvinte cheie ale sintaxei limbajului HTML, care împreună vor defini toate aspectele și funcționarea elementelor prezente în documentul final. consulta acest articol pentru mai multe informații despre întregul proces de creare a unui document HTML sau citirea continuă pentru a înțelege ceea ce este necesar pentru fiecare element de cod utilizat în articolul în cauză, pentru a crea un eșantion calculator.
  • html: acesta este un cuvânt cheie al sintaxei HTML care indică browserului de internet (entitatea care va trebui să interpreteze codul HTML pentru a afișa conținutul relativ pe ecran) că restul textului din document este cod HTML. Pentru a crea un program există multe limbi de programare, în acest caz eticheta indică faptul că restul codului a fost scris chiar în HTML.
  • cap: este o etichetă HTML care indică interpretului că se referă la întregul cod "metadate", adică la informațiile care descriu datele. Eticheta este folosit în mod normal pentru a defini stilurile grafice adoptate de elementele care alcătuiesc documentul, de exemplu titlul paginii, titlurile și așa mai departe. Gândiți-vă la HTML ca o structură împărțită în mai multe nivele, unde eticheta "cap" identificați ce va conține și la care vor face referire toți ceilalți.
  • titlu: această etichetă definește ce va fi afișat ca titlu al documentului (prin urmare, al paginii web relative). Acest atribut este utilizat pentru a defini textul care va fi afișat de browser în bara de titlu a paginii web.
  • organismul bgcolor = "#": această etichetă și setul de atribute sunt utilizate pentru a defini culoarea care va fi utilizată pentru fundal și textul afișat pe pagina web. Numărul hexazecimal care apare în ghilimele, împreună cu simbolul "#", indică culoare pentru a utiliza pentru elementul indicat.
  • text = "": acest atribut este folosit pentru a schimba culoarea textului elementului la care se referă (în acest caz eticheta "corp").
  • forma nume ="": această etichetă și atributul acesteia sunt utilizate pentru a defini numele formularului. Aceste informații vor fi folosite pentru a crea structura internă a codului și a documentului HTML, astfel încât compilatorul jаvascript să știe ce formă, se referă la fiecare element al documentului și la fiecare eveniment conectat la acesta. De exemplu, formularul este definit în codul din articol "calculator", atunci vom crea o structură cu acest nume pe care ne putem referi în restul codului pentru a gestiona acțiunile și evenimentele generate de utilizator.
  • tip de intrare ="": această etichetă este utilizată pentru a defini comenzile pe care utilizatorul le poate utiliza pentru a efectua o anumită acțiune sau pentru a introduce date. De exemplu, ar putea fi un câmp text, o parolă sau un buton (ca în cazul calculatorului nostru).
  • value ="": acest atribut indică valoarea care va fi afișată în cadrul elementului de intrare definit cu eticheta "tip de intrare". În cazul calculatorului nostru, vor fi afișate numerele (de la 1 la 9) și operatorii matematici (+, -, *, /, =).
  • onclick ="": Această parte a sintaxei folosite pentru a defini acțiunea legată de intrarea elementului, care este evenimentul pe care ar trebui să erupă atunci când butonul este apăsat de către utilizator. În exemplul nostru vrem ca valoarea butonului apăsat să fie afișată în câmpul de text "rezultat" pentru a afișa utilizatorului calculul pe care îl efectuează. În cazul butonului "6", evenimentul "onclick" va avea astfel următoarea valoare "document.calculator.ans.value + = `6`".
  • br: Această etichetă introduce o pauză de linie în document, deci trebuie să înfășurați. Orice lucru care trebuie afișat mai târziu în documentul HTML va fi afișat pe un nou rând de text.
  • / form, / body și / html: aceste comenzi reprezintă etichetele de închidere ale etichetelor de deschidere corespunzătoare și sunt utilizate pentru a finaliza definiția secțiunilor respective ale documentului HTML.

Partea 2

Cod HTML pentru crearea unui calcul simplu

Copiați codul în această secțiune a articolului. Evidențiați textul din caseta de mai jos cu ajutorul cursorului mouse-ului, astfel încât să apară complet albastru. Începeți din colțul din stânga sus și, ținând apăsat butonul stâng al mouse-ului, treceți în colțul din dreapta jos. În acest moment, apăsați combinația de taste rapide "Comandă + C", pe sistemele macOS sau "Ctrl + C", pe sistemele Windows pentru a copia textul selectat în clipboard-ul sistemului.

Calculator HTML

Partea 3

Creați-vă propriul Calculator
Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 3
1
Deschideți un editor de text pe computer. Există mai multe programe care pot fi utilizate pentru a efectua acest pas, dar pentru confort și simplitate este mai bine să utilizați TextEdit sau Notepad.
  • În sistemele macOS, faceți clic pe pictograma lupă din colțul din dreapta sus al ecranului pentru a deschide instrumentul Sistem Spotlight. În acest moment, efectuați o căutare folosind cuvântul cheie "TextEdit" (fără citate), apoi selectați pictograma relativă pe care o găsiți în lista de rezultate.
  • În sistemele Windows, accesați meniul "start" amplasat în colțul din stânga jos al desktopului. Introduceți cuvântul cheie "Notepad" în bara de căutare, selectați pictograma relevantă din lista de rezultate.
  • Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 4
    2
    Lipiți codul HTML, copiat din secțiunea anterioară a articolului, într-un nou document gol.
  • În sistemele macOS, faceți clic pe un punct gol al noului document care a apărut, apoi apăsați combinația de taste rapide "Comandă + V". După ce lipiți codul, accesați meniul "format" disponibil în partea de sus a ferestrei editorului de text și alegeți opțiunea "Conversia în format numai text".
  • În sistemele Windows, selectați un loc gol al noului document care apare, apoi apăsați combinația de taste rapide "Ctrl + V".
  • Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 5
    3
    Salvați documentul. Pentru a face acest lucru, accesați meniul "fișier" plasați-o în partea din stânga sus a ferestrei, apoi alegeți opțiunea "Salvați ca ...", pe sistemele Windows sau "Salvați ...", pe Mac.


  • Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 6
    4
    Adăugați extensia "HTML" la numele fișierului. În câmpul relativ la numele care urmează să fie atribuit documentului, pe care îl găsiți în caseta de dialog "Salvați ca", tastați numele care va fi atribuit fișierului urmat de extensie ".html" (fără citate), apoi apăsați butonul "Salvați". De exemplu, dacă doriți să utilizați numele "primul meu calculator", va trebui să salvați fișierul ca "lamiaprimacalcolatrice.html"

    • Partea 4

    Utilizați Calculatorul HTML
    Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 7
    1
    Găsiți fișierul HTML pe care tocmai l-ați creat. Pentru a face acest lucru, efectuați o căutare utilizând funcția "reflector" sau bara de căutare a meniului sau a ecranului "start", așa cum este descris în secțiunea anterioară a articolului. În acest caz, nu este necesar să tastați extensia ".html".
  • Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 8
    2
    Faceți clic pe pictograma fișierului care a apărut în lista cu rezultatele căutării pentru al deschide. Fiind un fișier HTML, acesta va fi deschis automat utilizând browserul de internet implicit pentru sistem.
  • Imaginea intitulată Crearea unui calculator utilizând HTML Pasul 9
    3
    Utilizați butoanele de calculator care au apărut pe ecran, așa cum ați proceda în mod normal. Soluția ecuației introduse va fi afișată în câmpul de text "rezultat", după apăsarea butonului "=".

    • Sfaturi

    • Puteți introduce codul HTML pentru calculatorul prezentat în acest articol pe orice pagină web.
    • Dacă doriți, puteți utiliza și etichete HTML legate de stil pentru a modifica aspectul vizual al calculatorului.
    Distribuiți pe rețelele sociale:

    înrudit