Deine Meinung
- 189
- 195
- 171
- 222
- 184
- 187
Lerne programmieren- Lektion 1
Herzlich Willkommen bei meiner Reihe übers Programmieren!
Hier erfährst du wie man eine Webseite programmieren kann, ich werde dir zeigen wie man Links erstellt, Passwörter in ein Webseite einbaut und noch vieles mehr. Vieleicht zeige ich euch auch wie man mit Java Script ein kleines Spiel programmiert. Aber das kommt drauf an, wie ihr das hier findet. Wahrscheinlich wirkt das am Anfang ein bisschen abstossend. Aber es ist cool, wenn man es kann.
Zwischendurch werde ich auch Tutorials zu Projekten machen, bei denen ihr nur das können müsst was ihr ihr und in den nächsten Lektionen lernt.
Heute beginnen wir mit der Ersten Lektion:
Damit man Überhaupt programmieren kann muss man ein Programm haben das, dass auch versteht! Das geht bei Mac und PC anders.
Am besten erstellst du dir auf deinem Computer einen Ordner. Denn du Coding oder programmieren nennst. Da kannst du dir alles abspeichern. Das ist nur eine Empfehlung.
PC-Variante, ein HTML-Datei erstellen.
- Du brauchst Wordpad. Suche Wordpad im Starter-Menu. Öffne Wordpad.
PC-Variante, eine HTML-Datei speichern.
- Gehe auf Datei und wähle speichern unter.
- Wähle irgendein Datei Namen z.b Coding. Ganz wichtig! Schreibe an den Schluss deines Dateinamens .html
- Klicke nun auf Speichern.
PC-Variante, eine HTML-Datei öffnen.
- Öffne deine Datei und klicke doppelt darauf. So öffnest du den Code im Browser.
- Willst du deinen Text bearbeiten, klicke mit der rechts auf die HTML-Datei und wähle Öffnen mit Wordpad.
- So kannst du sie bearbeiten.
Mac-Variante, eine HTM-Datei erstellen
Dass ist einiges komplizierter!
- Öffne Text Edit. Gib bei der Spotlight-Suche Text Edit ein und öffne es.
- Richte deine Datei als reiner Text ein. Dafür gehst du in die Menu leiste und wählst Format. Dan klicke auf In reiner Text umwandeln.
- Wähle nun nochmals bei der Menu Text Edit und wähle Einstellungen. Gehe auf neues Dokument und wähle bei Format Reiner Text. Im Bereich Optionen muss Intelligente Anführungszeichen deaktiviert sein.
- Gehe auf Öffnen und Sichern und dort beim Punkt: Beim Öffnen von Datei, HTML-Datei als HTML-code anstelle von formatierten texte anzeigen wähle.
MAC- Variante, eine HTML-Datei speichern.
- Gehe auf Ablage und wähle Sichern.
- Wähle irgendein Datei Namen z.b Coding. Ganz wichtig! Schreibe an den Schluss deines Dateinamens .html
- Klicke nun auf Speichern.
Mac-Variante, eine HTML-Datei speichern.
- Öffne deine Datei und klicke doppelt darauf. So öffnest du den Code im Browser.
2. Willst du deinen Text bearbeiten, klicke mit der rechts auf die HTML-Datei und wähle Öffnen mit Text Edit.
3.So kannst du sie bearbeiten.
So jetzt haben wir das geschafft! 
Jetzt können wir loslegen!
Mission 1 Lektion 1
Es gibt viele verschiedene HTML Tags, sie werden immer in zwei spitzen klammern geschrieben! Es gibt immer einen anfangs Tag und einen Schluss Tag. Z.b <p> anfangs tag/ </p> Schluss Tag. Denn Schluss tag erkennt man am / Zeichen. Wichtig Jeder Tag braucht ein Ende und einen Anfang! Also schauen wir uns jetzt die HTML Tags an die man für eine einfache Seite braucht.
(Quelle: Eigenes Bildschirmfoto)
- Das Tag(<!DOCTYPE html>) steht immer am Anfang eines HTML Codes. Es sagt dem Computer welche HTML Version die Seite hat. Es wird in Grossbuchstaben geschrieben und braucht kein End-Tag.
- Das ist das HTML Tag es sagt dem Computer das diese Seite in Html programmiert ist. Dieses Tag kommt immer nach dem Doctype Tag und als letztes Tag des Codes.
- Dieses ist das Head tag, darin sind Inhalte, die nachher nicht im Hauptbereich erscheinen. Zum Beispiel der Titel oder Anweisungen die für die ganze Seite.
- Das title Tag ist dafür da, um die Browser Seite zu beschriften. Also was man beim Tab sieht. Dieses Tag wir im Bereich Head gebraucht. Mann kann sich das vorstellen wie mit zwei Schuhschachteln, man packt die title Schuhschachtel in die Head Schuhschachtel.
- In das Body Tag kommen alle Inhalte, die auf der Seite zu sehen sind.
- Der P Tag ist ein Absatz Tag alles dazwischen wird als Text in einem Absatz in der Webseite angezeigt.
Nun kennst du die wichtigsten HTML Tags. Merke dir diese Sachen aber:
- Das keine Tags fehlen oder in falscher einer Reihenfolge stehen.
- Dass dein Code keine Tipp-Schreibfehler hat.
- Dass im Code die Gross-Kleinschreibung korrekt ist.
- Dass die benötigten Symbole enthalten und in der richtigen Reihenfolge stehen.
- Dass die Anführungszeichen so "" sind und nicht anders.
- Dass alle Tags mit dem / Strich geschlossen werden.
Wenn du das alles richtig Verstandenen hast kannst du eine kleine Website programmieren.
Schreibe eine Webseite:
- Erstelle eine HTML Datei und nenne sie mein erstes Programm.
- Tippe dieser Code ein:
<!DOCTYPE html>
<html>
<head>
<title> Hier kannst du irgendwas schreiben </title>
</head>
<body>
<p> Den Text den du möchtest </p>
</body>
</html>
- Nun kannst du diese Datei abspeichern und wieder öffnen.
Nun hast du deine eigene kleine Webseite programmiert. Dies war der Anfang. In der nächsten Lektion werde ich euch noch weiter HTML Tags beibringen und zeigen, wie du ein Bild aus dem Internet in deine Webseite einfügst. Falls du das gelesen hast und denkst, «Das ist aber kompliziert», das habe ich am Anfang auch gedacht. Aber wenn man ein bisschen übt geht das gut. Falls ihr Fragen habt, Etwas nicht geht oder ihr etwas wissen möchtet schreibt es in die Kommentare. Gibt mir gerne ein Feedback, ob es zu schwierig war, zu viel? Eure Meinung interessiert mich!
Ich wünsche euch viel Spass
Lg
Codingfuchs
streberkommentar: HTML ist keine Programmiersprache.
Richtig gut erklärt! Ich kann auch HTML programmieren. Ich würde mal gerne wissen wie du das programmieren gelernt hast? Ich habe mir das mit Büchern, dem Internet und mein Vater hat mir so ein ganz kleines bisschen Beigebracht. Ich freue mich auf jedenfall schon auf die nächste Lektion! LG Galaxy.09
Cool,das ihr euch so interessiert!
Dann mache ich auf jeden Fall weiter!
Mich interessiert es auch sehr! Woher weißt du das?! Das ist ja Wahnsinn!