Programmieren eines Rechners in HTML

Video: HTML und CSS Tutorial für Anfänger | Eigene Webseite erstellen

Inhalt

Schreiten
Teil 1 von 4: Den Code verstehen
Teil 2 von 4: Standardcode für einen HTML-Rechner
Teil 3 von 4: Erstellen Sie Ihren eigenen Taschenrechner
Teil 4 von 4: Verwenden Sie Ihren Taschenrechner
Tipps

Es gibt viele verschiedene Möglichkeiten, mit einem Computer mithilfe des integrierten Rechners zu rechnen. Eine andere Möglichkeit besteht darin, Ihre eigenen mit einfachem HTML-Code zu erstellen. Um einen Taschenrechner mit HTML zu erstellen, benötigen Sie einige grundlegende HTML-Kenntnisse. Geben Sie dann den erforderlichen Code in einen Texteditor ein und speichern Sie ihn als HTML-Datei. Sie können den Taschenrechner dann verwenden, indem Sie die HTML-Datei in Ihrem bevorzugten Browser öffnen. Sie können nicht nur arithmetische Operationen in Ihrem Browser ausführen, sondern auch einige grundlegende Fähigkeiten in der Kunst des Programmierens erlernen!

Schreiten

Teil 1 von 4: Den Code verstehen

Erfahren Sie, was jede HTML-Funktion tut. Der Code, den Sie zum Erstellen Ihres Rechners verwenden, besteht aus vielen verschiedenen Syntaxtypen, die zusammen die verschiedenen Elemente eines Dokuments definieren. Klicken Sie hier, um eine Erläuterung dieses Vorgangs zu erhalten, oder lesen Sie weiter, um mehr darüber zu erfahren, wie die einzelnen Codezeilen den Taschenrechner erstellen.
- html: Diese Syntax teilt dem Rest des Dokuments mit, welche Sprache im Code verwendet wird. Es gibt mehrere Sprachen, in denen codiert werden kann, und in diesem Fall macht HTML> dem Rest des Dokuments klar, dass es sich in HTML befindet - Sie haben es erraten -.
- Kopf: Sagt dem Dokument, dass alles, was danach ist, Daten über Daten sind, auch "Metadaten" genannt. Der Befehl head> wird normalerweise verwendet, um Stilelemente eines Dokuments wie Titel, Überschriften usw. zu definieren. Stellen Sie sich das als einen Schirm vor, unter dem der Rest des Codes definiert wird.
- Titel: Der Titel Ihres Dokuments wird hier angezeigt. Dieses Attribut wird verwendet, um den Titel des Dokuments anzugeben, wenn es in einem HTML-Browser geöffnet wird.
- body bgcolor = "#": Dieses Attribut legt die Farbe des Hintergrunds der HTML-Seite und des Körpers fest. Die Zahl innerhalb der Anführungszeichenfolge und nach dem # entspricht einer bestimmten Farbe.
- text = "": Diese Syntax legt die Farbe des Dokumenttextes fest.
- Formularname = "": Dieses Attribut gibt den Namen eines Formulars an und wird verwendet, um die Struktur der nächsten Schritte zu erstellen, basierend auf dem, was Javascript über die Bedeutung des Formularnamens weiß. Der Formularname, den wir verwenden werden, ist beispielsweise "Taschenrechner", mit dem wir eine bestimmte Struktur für das Dokument erstellen.
- Eingabetyp = "": Hier passiert etwas. Das Attribut "Eingabetyp" teilt dem Parser des Dokuments mit, welche Art von Text in den Werten zwischen den Anführungszeichen enthalten ist. Dies kann beispielsweise ein Text, ein Passwort, eine Schaltfläche (wie dies beim Taschenrechner der Fall ist) usw. sein.
- value = "": Dieser Befehl teilt dem Parser des Dokuments mit, was im obigen Eingabetyp enthalten ist. Für einen Taschenrechner sind dies Zahlen (1-9) und Operationen (+, -, *, /, =).
- onClick = "": Diese Syntax beschreibt ein Ereignis und gibt an, dass etwas getan werden soll, wenn auf die Schaltfläche geklickt wird. Für einen Taschenrechner möchten wir, dass der Text auf jeder Schaltfläche auch als solcher erkannt wird. Vor der Schaltfläche "6" setzen wir document.calculator.ans.value + = "6" zwischen die Anführungszeichen.
- br: Dieses Tag erstellt eine neue Zeile im Dokument, sodass der Text (oder etwas anderes) danach in einer anderen Zeile platziert wird.
- / form, / body und / html: Diese Befehle sind Schließer für die entsprechenden Befehle, die zuvor im Dokument geöffnet wurden.

Teil 2 von 4: Standardcode für einen HTML-Rechner

Kopieren Sie den folgenden Code. Wählen Sie den Text im Feld unten aus, indem Sie die linke Maustaste gedrückt halten und den Cursor von links unten im Feld nach rechts oben ziehen, sodass der gesamte Text blau wird. Drücken Sie dann "Befehl + C" auf einem Mac oder "Strg + C" auf einem PC, um den Code in die Zwischenablage zu kopieren.

html> head> title> HTML-Rechner / title> / head> body bgcolor = "# 000000" text = "gold"> form name = "calculator"> input type = "button" value = "1" onClick = "document. calculator.ans.value + = '1' "> input type =" button "value =" 2 "onClick =" document.calculator.ans.value + = '2' "> input type =" button "value =" 3 "onClick =" document.calculator.ans.value + = '3' "> input type =" button "value =" + "onClick =" document.calculator.ans.value + = '+' "> input type =" button "value =" 4 "onClick =" document.calculator.ans.value + = '4' "> input type =" button "value =" 5 "onClick =" document.calculator.ans.value + = '5' "> input type =" button "value =" 6 "onClick =" document.calculator.ans.value + = '6' "> input type =" button "value =" - "onClick =" document.calculator.ans. value + = '-' "> input type =" button "value =" 7 "onClick =" document.calculator.ans.value + = '7' "> input type =" button "value =" 8 "onClick =" document.calculator.ans.value + = '8' "> input type =" button "value =" 9 "onClick =" document.calculator.ans.value + = '9' "> input type =" button "value = " *" onClick = "document.calcul ator.ans.value + = ' *' "> input type =" button "value =" / "onClick =" document.calculator.ans.value + = '/' "> input type =" button "value =" 0 "onClick =" document.calculator.ans.value + = '0' "> input type =" reset "value =" Reset "> input type =" button "value =" = "onClick =" document.calculator.ans .value = eval (document.calculator.ans.value) "> br> Die Antwort lautet input type =" textfield "name =" ans "value =" "> / form> / body> / html>

Teil 3 von 4: Erstellen Sie Ihren eigenen Taschenrechner

Öffnen Sie einen Texteditor auf Ihrem Computer. Es gibt verschiedene Programme, aber der Einfachheit halber bleiben wir bei TextEdit oder Notepad.
- Klicken Sie auf einem Mac auf die Lupe in der oberen rechten Ecke des Bildschirms, um Spotlight zu öffnen. Wenn Sie dort angekommen sind, geben Sie TextEdit ein und klicken Sie auf das TextEdit-Programm, das jetzt blau ausgewählt werden soll.
- Öffnen Sie auf einem PC das Startmenü unten links auf dem Bildschirm. Geben Sie in der Suchleiste Notepad ein und klicken Sie auf die Notepad-Anwendung, die in der Suchleiste rechts angezeigt wird.
Fügen Sie den HTML-Code für einen Taschenrechner in das Dokument ein.
- Klicken Sie auf einem Mac auf den Hauptteil des Dokuments und drücken Sie Befehl + V.. Dann klicken Sie auf Format am oberen Bildschirmrand und dann Machen Sie einfachen Text nach dem Einfügen des Codes.
- Klicken Sie auf einem PC auf den Hauptteil des Dokuments und dann auf Strg + V..
Speicher die Datei. Sie tun dies über "Datei" im Hauptmenü des Fensters und dann mit Speichern als... auf einem PC oder Speichern... auf einem Mac aus dem Dropdown-Menü.
Fügen Sie dem Dateinamen eine HTML-Erweiterung hinzu. Geben Sie im Menü "Speichern unter ..." den Dateinamen gefolgt von ".html" ein und klicken Sie auf "Speichern". Wenn Sie diese Datei beispielsweise "Mein erster Rechner" nennen möchten, speichern Sie die Datei als "Mein erster Rechner.html".

Teil 4 von 4: Verwenden Sie Ihren Taschenrechner

Suchen Sie die gerade erstellte Datei. Geben Sie dazu den Namen der Datei in Spotlight oder in die Suchleiste des Startmenüs ein, wie im vorherigen Schritt erläutert. Es ist nicht erforderlich, auch die Erweiterung "html" einzugeben.
Klicken Sie auf Ihre Datei, um sie zu öffnen. Ihr Standardbrowser öffnet Ihren Rechner auf einer neuen Webseite.
Klicken Sie auf die Schaltflächen des Rechners, um ihn zu verwenden. Die Lösungen für Ihre Gleichungen werden jetzt in der Antwortleiste angezeigt.