Programmiersprachen für Webseiten lernen

Programmier- und Auszeichnungssprachen lernen und verstehen

"Programmierung" stammt vom altgriechischem Wort prógramma und bedeutet "öffentlich und schriftlich bekannt gemachte Nachricht, bzw. Befehl". Durch die Verwendung einer Programmiersprache, kannst du dem Rechner Anweisungen erteilen. Sie heißt Sprache, da man erst einmal lernen muss, wie man mit einem Rechner kommuniziert.

In der Webentwicklung lernt man zunächst eine "Auszeichnungssprache", wie HTML oder XML. Da sie nur eine Struktur vorgeben, nennt man diese noch nicht "Programmiersprache".

Diesen Begriff liest im Zusammenhang mit der Webentwicklung seltener. Denn für den Laien ist eine Programmiersprache immer gleich: Man führt Magie mit dem Rechner aus. Begriffe, die weniger in den Köpfen der breiten Masse sind, verwendet man ungern im Rahmen der Suchmaschinenoptimierung. Das ist leider ein Teufelskreis. (Gleiches gilt für den Begriff "Webdesigner". Damit meint man eigentlich den "Webentwickler".)

Aber zurück zum Thema. Eine Auszeichnungssprache findet in der Strukturierung von Inhalten seinen Platz. Also: Wo wird welches Element platziert?

Das Aussehen wird wieder mit einer Formatierungs-Sprache definiert. Und schließlich kann man mit einer Script- oder Programmier-Sprache dynamik auf eine Webseite bringen.

Auszeichnungssprachen werden wie bereits erklärt für die Strukturierung verwendet. Dadurch kann man dem Browser anweisen, wo sich welches Element befinden soll.

Ich empfehle dir zuerst HTML zu lernen, bevor du dich in Programmiersprachen einliest. Denn im Browser basiert so gut wie alles auf der Darstellung.

Um deine erste HTML-Struktur zu erstellen, benötigst du nur den Texteditor deines Betriebssystems. Unter Windows heißt dieser schon "Editor".

Im nächsten Beitrag lernst du richtige Quellcode-Editoren kennen, die dir mit der Erstellung von Webseiten helfen.

Achte zudem darauf, dass die Dateiendungen sichtbar sind. Denn zunächst legen wir eine Textdatei mit dem Editor an. Die Endung ".txt" zu ".html" musst du nach dem Speichern nur noch ändern. Dein Betriebssystem wird dir mitteilen, dass die Datei dadurch unbrauchbar wird. Aber das ist schon in Ordnung.

Schon kannst du deine HTML-Datei in einem Browser öffnen. Aber natürlich fehlt noch der ganze Inhalt.

Du findest im Internet tausende Plattformen, auf denen du HTML lernen kannst. Davon ist W3C einer der Besten. Zumindest meiner Meinung nach.

W3C bringt dir nicht nur alle gängigen Websprachen bei, sondern sie legen auch Standards für das Web fest. Irgendjemand muss das ja tun.

Einige Anfänger steigen auch mit der Lernplattform von SelfHTML.org ein. So habe ich auch die Webentwicklung gelernt.

SelfHTML.org bietet sehr einsteiger-freundliche Anleitungen. Dadurch kannst du HTML im Nu lernen.

Ich empfehle dir beide Plattformen anzusehen. Sie bieten ähnlich gute Anleitungen. Dadurch ist es Geschmacksache, welche der beiden Plattformen du für den Einstieg auswählst.

Das umsteigen von der einen zur anderen Plattform kann nur ein bisschen verwirrend sein, da sie unterschiedliche Strukturen besitzen. Zudem werden die Lerninhalte in verschiedenen Abläufen beigebracht.

Eigne dir beim Einstieg in HTML auch XHTML an. Die beiden Auszeichnungssprachen unterscheiden sich nicht arg voneinander.

XHTML ist etwas straffer als HTML. Dadurch kannst du aber sicherstellen, dass alle Browser die Elemente verstehen.

Eines der wichtigsten Bedingungen von XHTML ist die richtige Verwendung der Tags. Zu jedem geöffnetem Tag muss es auch ein Schließendes geben. Einzelne Tags, wie <input> benötigen vor dem schließenden Zeichen ">" dringend einen Backslash "/".

Ob man eine Webseite in HTML oder XHTML programmiert, bleibt aber dem Webentwickler überlassen.

CSS ist weder Programmier- noch Auszeichnungssprache. Sie ist eine Stylesheet-Sprache, die überwiegend für Webseiten verwendet wird.

Mit ihr kannst du den HTML-Elementen Form und Farbe verleihen. Dadurch wird eine moderne Webseite erst ansehnlich.

Mit CSS kannst du auch Animationen erstellen. Im Gegensatz zu JavaScript-Animationen laufen diese auch wesentlich flüssiger, da sie weniger Leistung brauchen.

SelfHTML.org hat einen eigenen Bereich, der das Thema CSS behandelt. Hier lernst du sehr einfach alle Aspekte der Stylesheet-Sprache.

Das Kaskadieren des "Cascading StyleSheets" behandelt SelfHTML.org ebenfalls. Leider beachten viele Webentwickler das Kaskadieren von CSS nicht. Deshalb tun sich manche Entwickler schwer Regeln zu überschreiben, um einen Code eines anderen Entwicklers anzupassen.

Mit der Verwendung des Werts !important, kann die spätere Bearbeitung von Webseiten zu einem "Pain in the A**" werden (wie der Engländer so schön sagt). Leider lernen Einsteiger die Kaskadierung nicht richtig, weshalb dieser Wert sehr häufig bei Semi-Professionellen Webseiten zum Einsatz kommt.

Durch den Befehl !important ist das Überschreiben eines CSS-Attributs zwar immer super einfach, aber man hat hinterher das Problem, dass sich diese Formatierung sehr schwer überschreiben lässt. Verwende deshalb den Wert !important nur für den äußersten Notfall!

Anfangs stellt die Verwendung eines !important keine große Hürde da. Sobald du aber immer tiefer in die Materie einsteigst, kannst du zunehmend feststellen, dass die Regeln mit diesem Wert Probleme bereiten.

Mit der Einführung der Skriptsprache "JavaScript" konnte man nun erstmals eine Dynamik für Webseiten erstellen. Zum ersten Mal konnten die Inhalte einer Webseite während der Laufzeit bearbeitet werden. JavaScript kann auch Aktionen des Benutzers auswerten und je nach Fall Programme ausführen.

Heute ist JavaScript nicht mehr wegzudenken. Es gibt nur noch sehr wenige Webseiten, die kein JavaScript verwenden. Alleine wenn die Webseite Google Analytics verwendet, benutzt sie dadurch JavaScript.

Der Name stammt von der Progrmmiersprache "Java". Jedoch haben die beiden Sprachen nichts miteinander gemein. Während JavaScript rein Skript-Basiert arbeitet, verwendet man in Java ausschließtlich Objekte, die von Klassen stammen.

Zudem wird Java überwiegend in der Anwendungsentwicklung eingesetzt. JavaScript hingegen wird mehr in der Webentwicklung eingesetzt.

Man wollte mit dem Namen "JavaScript" die Bekanntheit von Java aufgreifen. Anscheinend hat das was gebracht.

Du musst nicht alle JavaScript-Funktionen "From Scratch" entwickeln. Durch die Verwendung von Biliotheken kann man die Funktionen von JavaScript erweitern.

Eine Bibliothek ist eine Sammlung von Funktionen, die ein anderer Programmierer entwickelt. Damit kannst du dir einige Schritte deines gewünschten Programms sparen.

Die wohl bekannteste Sammlung von Funktionen ist wohl jQuery.

Der Trend bewegt sich aber immer weiter weg von diesem Script. Denn JavaScript hat im letzten Jahr einige Updates bekommen, um zum Beispiel Elemente wesentlich einfacher zu selektieren. Das war einer der Hauptgründe, warum jQuery bei vielen Webseiten überhaupt zum Einsatz gekommen ist.

Die Webseite You Might Not Need jQuery hilft dir bei einigen Funktionen, die du sonst mit jQuery umgesetzt hättest.

• Erstellung von Animationen der HTML-Elemente
• Analysieren der Benutzereingaben für bestimmte Felder und Bereiche
• Verändern der CSS-Formatierung während der Laufzeit deiner Webseite
• Entwicklung dynamischer Inhalte, wie die YouTube 2-Klick-Lösung

Hast du schon einmal ein Spiel im Browser gespielt? Vor einigen Jahren entwickelte man Browser-Spiele ausschließlich in Flash. Da Flash aber als unsicher gilt, musste eine andere Lösung her.

Mit der kostenlosen JavaScript-Bibliothek Phaser.io erhältst du ein ganzes Ökosystem an Funktionen, die nur für die Spieleentwicklung gedacht sind.

Aber auch ohne eine solche Bibliothek ist es Möglich ein JavaScript-Spiel zu entwickeln. Schau dir meinen Beitrag zum Einstieg in die Spiele-Entwicklung mit JavaScript an.

Der Beitrag zeigt dir nicht, wie du ein richtiges Spiel Programmierst, dass du verkaufen könntest. Es ist eine Einstiegshilfe, damit du lernst wie ein Spiel in JavaScript funktioniert.

Nach dieser Beitragsreiehe empfehle ich dir eine richtige Engine wie Phaser zu lernen. Damit kannst du jedes 2D-Spiel entwickeln, dass du dir vorstellst!

Wenn du dich gegen die Verwendung von PHP entscheidest, stößt du wahrscheinlich irgendwann auf NodeJS.

Stelle dir NodeJS als serverseitiges JavaScript vor. Dadurch kann der Browser und der Server in Echtzeit miteinander kommunizieren. Durch die Erweiterung Socket.IO ist es sogar möglich, dass der Server Daten an den Client sendet, ohne dass die Seite neu lädt.

Stelle dir einmal vor, dass du mit deinen Kindern im Auto fährst. Deine Kinder werden dich ständig fragen, ob man schon da ist. Darauf antwortest du immer genervter "BALD!!!".

Nun stelle dir ein Chat-Fenster vor. Mit PHP würde man typischerweise ein AJAX-Script (das Kind) entwickeln, dass den Server (der Vater) ständig frägt, ob es eine Aktualisierung gibt. Sobald mehrere Browser den Server nach einer Aktualisierung fragen, kann das ganz schön auf die Leistung (oder Nerven) der Servers gehen. Zudem gibt es eine gewisse Latenz, da die Daten erst gesendet und danach wieder empfangen werden.

Besser wäre es doch, wenn der Server automatisch bescheid gibt, sobald eine Aktualisierung vorliegt. Damit spart man sich auch einmal den Hinweg der Daten.

Wie schön das wäre, wenn die Kinder während der Fahrt einfach mal Still sind und erst dann reagieren, wenn du ihnen sagst: "Wir sind da!"

JavaScript ist verdammt vielseitig. Nun haben wir die Webentwicklung, die Spieleentwicklung und die Serverentwicklung durch.

Was, wenn ich dir sage, dass du sogar Desktop-Applikationen mit JavaScript erstellen kannst?

Vor 10 Jahren noch ein Ding der Unmöglichkeit, heute mit Electron leicht zu realisieren.

Kennst du Microsoft Teams? Oder Skype? Beide Programme wurden mit Electron entwickelt! Diese Wunderwaffe ist der Vater von noch so vielen weiteren bekannten Programmen.

Zudem (und das ist meiner Meinung nach ein ziemlich geniales Feature) ist Elector Cross-Plattform-Fähig. Dadurch kannst du eine Applikation nicht nur für den Desktop entwickeln, sondern auch für jedes andere Gerät bereitstellen. One Engine to Rule them all! 😉

In den späten 1990ern war der RPG Maker auch im Kommen. Mit diesem Programm konnten sogar Laien ohne Programmier-Kenntnisse ein Spiel entwickeln.

Das Programm wurde stetig weiterentwickelt und für die Anforderungen der heutigen Zeit poliert. Die neueste Version RPG Maker MV basiert ebenfalls auf JavaScript.

Sofern du dich in JavaScript eingearbeitet hast, kannst du tolle Erweiterungen für diese Engine entwickeln und das Spiel deiner Träume entwickeln.

JavaScript wird allem Anschein nach noch lange nicht aussterben. Die Sprache wird immer weiterentwickelt und Erweiterungen gibt es auch immer mehr.

Meine Empfehlung: Auch wenn du deine Passion nicht in der Webentwicklung siehst, macht es dennoch Sinn JavaScript zu erlernen. Wer weiß, in welchen Bereichen JavaScript in Zukunft sonst noch Verwendung findet?

SQL ist eine Abfragesprache. Das bedeutet, dass du damit Abfragen erstellen kannst... Ziemlich blöde Erklärung... Aber lies weiter, dass spannende kommt noch!

Die Structured Query Language findet bei Datenbanken ihre Verwendung. Stelle dir einfach vor, du möchtest Daten deines Besuchers auf deiner Webseite speichern. Diese Daten sichert man in einer Datenbank.

Um an diese Daten heranzukommen benötigst du SQL. Egal ob du die Daten sichern, bearbeiten, löschen oder einfach nur abfragen möchtest.

Verstehst du nun, warum SQL eine "Abfragesprache" genannt wird?

Ich kenne kein Content Management System, dass keine Datenbank benötigt, um zu funktionieren. Und jedes dieser CMS verwendet auch SQL um die Daten zu verwalten.

SQL macht einen Großteil der Ausbildung eines Informatikers aus. Dabei ist es irrelevant, ob man den Beruf des Systemintegrators oder den des Anwendungsentwicklers wählt. Denn Datenbanken kommen nicht nur bei Webseiten vor, sondern auch in vielen Applikationen. Zudem werden Datenbanken auch für als Basis einiger Programme benötigt. Das richtet in der Regel ein Integrator ein.

Die Abschlussprüfung eines Informatikers endet mit einer mündlichen Prüfung. In meinem Abschlussjahr wurde der Großteil aller Entwickler auf SQL abgefragt. Solltest du also gerade in der Ausbildung zum Entwickler sein, empfehle ich dir dich gut in SQL einzuarbeiten.

Stelle dir Datenbank als eine Vielzahl von Excel-Tabellen vor. Eine Tabelle hat mehrere Zeilen und Spalten.

Eine Spalte beschreibt immer einen bestimmten Wert, wie einen Namen oder eine Adresse. Eine Zeile mit allen Spalten ist ein Datensatz. Und jeder Datensatz besitzt eine eindeutige Kennung: Die ID.

Damit du auf eine Spalte eines bestimmten Datensatzes zugreifen kannst, musst du zunächst die ID wissen. Natürlich kannst du auch alle Datensätze wählen. Es ist auch Möglich alle Datensätze anzeigen zu lassen, deren Spalte "Name" mit "A" beginnt.

Im Gegensatz zu Excel kann eine Zelle aus einem bestimmten Typ bestehen. Dieser Typ ist zum Beispiel ein "bool'scher" Wert (wahr oder falsch). Es gibt auch Zeichenketten (String), ganze Zahlen (Integer), Gleitkommazahlen (Float) und noch mehr.

Hier siehst Du ein Beispiel einer einfachen Abfrage eines Datensatzes in SQL:

SELECT vorname FROM spieler WHERE id = 1;

Mit dieser Zeile erhält man den Datensatz "vorname" einer Zeile mit der ID "1" aus der Tabelle "spieler". Das klingt anfangs vielleicht etwas befremdlich, aber wenn Du Dich einmal in SQL eingefunden hast sollte das kein Problem für dich darstellen.

Auf SelfHTML.org oder W3C kannst Du Dir Grundkenntnisse zu SQL aneignen. Die Webseite sql-lernen.de bietet dir auch eine Anlaufstelle zum Erlernen von SQL.

Durch die ID kann man auch mehrere Datensätze oder sogar Tabellen miteinander verbinden. Das geschieht durch einen "Foreign Key", der mit dem "Primary Key" (unsere ID) verknüpft ist.

Damit ist es Möglich einen Adresssatz in eine Tabelle "Adressen" abzulegen. Der entsprechende Datensatz in der Tabelle "Kunden" erhält dann einen Foreign Key, der auf den Primary Key der Adresse zeigt.

Sollten nun mehrere Personen im gleichen Haushalt auf deiner Plattform angemeldet sein, erhalten sie alle einen Foreign Key zur gleichen Adresse. Dadurch kann man sich einiges an Daten in der Datenbank sparen. (Spoiler: So etwas kommt auch in der Berufschule vor!)

PHP ist ein rekursives Akronym für PHP: Hypertext Preprocessor.

Es ist eine "Skriptsprache", um auf dem Server Funktionen auszuführen. Uunter Programmierern gibt es immer wieder Debatten, ob es wirklich nur eine Skriptsprache ist.

Da PHP Klassen und Objekte kennt, kann es nämlich genauso gut eine objektorientierte Programmiersprache sein.

Diese Debatte möchte ich in diesem Beitrag ungern aufgreifen. 🙂

PHP ist im Gegensatz zu JavaScript oder HTML keine Sprache, die man einfach nur im Browser ausführen kann. Du benötigst einen Server mit dem installierten PHP-Service, um es ausführen zu können.

Die meisten Entwickler kaufen sich nicht extra einen eigenen Server, um PHP zu testen oder zu lernen. Du kannst auf deinem Windows-Gerät auch XAMPP installieren. Mit diesem kostenlosen Programm verwandelst du deinen privaten Rechner in einen Server.

Solltest du Linux präferieren, kannst du LAMPP installieren. Beide Programme funktionieren ähnlich.

Nachdem du ein PHP-Programm erstellt hast und es veröffentlichen möchtest, kannst du dir einen Webspace auf einem externen Server mieten. Die Preise variieren dabei stark. Dafür benötigst du aber zusätlich eine Domain, die bei den meisten Anbietern aber bereits enthalten ist.

PHP kommt in fast jedem gängigem Content Management System wie WordPress, Typo3, Magento oder Shopware vor. Wenn Du ein CMS für Deine Webseite verwenden und Anpassungen vornehmen möchtest wirst du um PHP nicht herum kommen.

Manche CMS unterstützen auch NodeJS, aber den größten Marktanteil behält PHP. Und das wird wahrscheinlich noch länger andauern.

Beachte aber, dass es keinen anderen Grund gibt PHP zu lernen, außer die Programmierung von Webseiten oder Web-Applikationen. Zumindest ist mir kein anderer Anwendungsfall bekannt. Schreib gerne einen Kommentar, falls du noch einen Grund kennst, warum man PHP lernen sollte!

PHP und SQL gehen Hand in Hand. Solltest du PHP lernen, empfielt es sich auch SQL zu studieren.

Mit einer PHP-Funktion kannst du eine Verbindung zur Datenbank über SQL aufbauen. Dadurch kannst du Daten abfragen und auf deiner Webseite projizieren.

Solltest du einen Login-Bereich für deine Webseite vorsehen, kannst du die verschlüsselten Zugangsdaten einfach mit PHP in der Datenbank hinterlegen. Bei einem Login-Versuch rufst du diese gesicherten Daten auf und vergleichst sie mit der Eingabe des Benutzers.

Stelle in diesem Fall bitte sicher, dass deine Benutzer sichere Passwörter verwenden. Das kannst du mit entsprechenden Abfragen bewerkstelligen. Zudem ist es sinnvoll deinen Benutzern einen sicheren Passwort Generator zur Verfügung zu stellen.

Schau mal bei Stack Overflow vorbei. Zu fast jedem PHP-Problem findest du hier eine Antwort.

Denn die meisten Probleme hatte bereits einige Entwickler vor dir schon einmal.

Damit du das Rad nicht neu erfinden musst, kannst du auch mal bei Plattformen wie Github vorbeischauen. Hier findest du unzählige Projekte, die dir bei der Erstellung ganzer Webseiten oder Teilbereichen helfen.

Von fertigen Programmen kannst du immer was dazu lernen. Außerdem kannst du dir auch eine Menge Zeit sparen, indem du fertigen Code wiederverwendest.

Fun Fact zu PHP: Ursprünglich hat Rasmus Lerdorf im Jahr 1994 PHP entwickelt. Es sollte eigentlich nie eine vollwertige Programmiersprache werden. Lerdorf hatte sich eine Reihe an C-Programmen zusammengestellt, mit der er seine Webseite verwalten wollte.