Så här skapar du en räknare med HTML: 9 steg (med bilder)

Det finns gott om sätt att göra matte på en stationär dator med en inbyggd kalkylator, men ett annat sätt är att bygga en själv med en enkel HTML-kod. För att skapa en räknare med HTML, lära dig några grunderna om HTML, sedan kopiera den nödvändiga koden till en textredigerare och spara den med en HTML-förlängning. Du kan sedan använda din räknare genom att öppna HTML-dokumentet i din favoritwebbläsare. Genom att göra allt detta, kommer du inte bara att kunna göra matematik i en webbläsare, men du kan också lära dig några fundament om kodens konst!

Steg

Del 1 av 4:

Förstå din kod

1. Lär dig vad varje HTML-funktion gör. Koden du kommer att använda för att skapa din räknare består av många bitar av syntax som arbetar tillsammans för att definiera olika delar av ett dokument. Klicka här för en förklaring av hur man bekanta dig med den här processen, Eller läs vidare för att lära dig vad varje rad av text gör i koden du använder för att göra din räknare.

html: Denna del av syntax berättar resten av dokumentet vilket språk som används i koden. Vid kodning, ett antal språk som används för att koda, och berättar resten av dokumentet att det kommer att vara i - du gissade det! - html.
huvud: Berättar dokumentet att allt under det är data om data, även känt som "metadata". De kommando används vanligtvis för att definiera stilistiska element i ett dokument, t.ex. titlar, rubriker och så vidare. Tänk på det som ett paraply under vilket resten av koden definieras.
titel: Det här är där du kommer att namnge titeln på ditt dokument. Detta attribut används för att definiera vad titeln på dokumentet öppnas i en HTML-webbläsare.
KroppsbgColor = "#": Detta attribut sätter färgen på koden bakgrund och kropp. Numret i den här uppsättningen citat som visas efter # motsvarar a förutbestämd färg.
text = "": Ordet i den här uppsättningen citat ställer in textens färg på dokumentet.
Form Namn ="": Det här attributet anger namnet på en blankett, som används för att bygga strukturen av det som kommer efter det baserat på vad jаvascript vet att formulärnamnet betyder. Till exempel, formnamnet vi använder är kalkylator, vilket kommer att skapa en specifik struktur till dokumentet.
Ingångstyp ="": Det här är där åtgärden händer. De "ingångstyp" Attribut berättar dokumentet vilken typ av text värdena i resten av parenteserna är. De kan till exempel vara text, ett lösenord, en knapp (som det kommer att vara för en räknare), och så vidare.
värde ="": Detta kommando berättar dokumentet vad som kommer att innehålla i den angivna ingångstypen. För en kalkylator visas dessa som våra nummer (1-9) och operationer (+, -, *, /, =).
onclick ="": Denna syntax beskriver en händelse, som berättar dokumentet att något ska uppstå när knappen klickas. För en kalkylator vill vi ha texten som visas i varje knapp som förstås som sådan. Så, för "6" Knapp, vi lägger dokument.kalkylator.ans.värde + = `6` mellan citat.
br: Den här taggen initierar en radbrytning i dokumentet, så att det som helst efter det kommer att visas en rad under vad som helst som kom före det.
/ Form, / Kropp och / HTML: Dessa kommandon berättar dokumentet att motsvarande kommandon som initierades tidigare i dokumentet slutar nu.

Del 2 av 4:

Grundläggande HTML-kalkylatorkod

1. Kopiera koden nedan. Markera texten i rutan nedan genom att hålla ner markören i det övre vänstra hörnet av lådan och dra den till det nedre högra hörnet av lådan så att all text är blå. Tryck sedan på "Kommando + C" på en mac eller "Ctrl + C" På en dator för att kopiera koden klippbordet.

Del 3 av 4:

Skapa din räknare

1. Öppna ett textredigeringsprogram på din dator. Det finns ett antal program du kan använda, men för bekvämlighet och kvalitet rekommenderar vi att du använder TextEdit eller Notepad..

På en Mac klickar du på förstoringsglaset längst upp till höger på skärmen för att öppna Spotlight. En gång där, skriv in TextEdit och klicka på TextEdit-programmet, vilket nu ska markeras i blått.
På en dator öppnar du START-menyn längst ned till vänster på skärmen. I sökfältet skriver du anteckningsblock och klickar på anteckningsblocket, som kommer att visas i resultatfältet till höger

Bild med titeln Skapa en räknare med hjälp av HTML-steg 4

2. Klistra in HTML-koden för en räknare i dokumentet.

På en Mac klickar du på dokumentets kropp och trycker på "Kommando + v". Du måste då klicka på "Formatera" högst upp på din skärm och klicka på "Göra vanlig text" Efter att ha klistra in koden.

På en dator klickar du på dokumentets kropp och trycker på "Ctrl + V".

Bild med titeln Skapa en räknare med hjälp av HTML-steg 5

3. Spara filen. För att göra detta, klicka på "Fil" knappen längst upp till vänster i ditt fönster och klicka på "Spara som..." på en dator eller "Spara..." på en Mac i menyn som faller ner.

Bild med titeln Skapa en räknare med hjälp av HTML-steg 6

4. Lägg till en HTML-förlängning i filnamnet. I "Spara som..." Meny, skriv in ditt filnamn följt av ".html", och klicka sedan på "Spara". Till exempel, om du vill ringa den här filen min första räknare, skulle du spara filen som "Myfirstcalculator.html"

Del 4 av 4:

Använda din räknare

1. Hitta filen du just skapat. För att göra detta, skriv in namnet på din fil på Spotlight eller i Start-menyns sökfält som beskrivs i föregående steg. Du behöver inte skriva in "html" förlängning.