Web-Grundlagen,
verständlich erklärt.

Eine Webseite ist kein einzelnes Programm. Sie setzt sich aus drei Schichten zusammen: HTML (HyperText Markup Language) beschreibt den Inhalt einer Webseite mithilfe sogennanter Elements, CSS (Cascading Style Sheets) gestaltet eine Webseite, man nutzt dabei classes und ids, welche im HTML den Elementen zugeordnet werden können. JavaScript sorgt für Funktionen und Logik. Zusammen werden sie im Browser gerendert. Sie können in zusammen in einer HTML-Datei oder in separaten Dateien gespeichert werden.

Damit eine Webseite für den Nutzer sichtbar wird, fordert der Browser die Dateien von einem Server an und liest sie nacheinander ein. Während dieser Verarbeitung baut der Browser aus dem HTML eine interne Baumstruktur auf, das sogenannte Document Object Model (DOM). JavaScript nutzt diese Struktur als Schnittstelle, um Seiteninhalte zur Laufzeit dynamisch zu verändern, Elemente hinzuzufügen oder zu löschen, ohne dass die gesamte Seite neu geladen werden muss. Modernes CSS ergänzt dies durch Stylesheets, die sich über sogenannte Media Queries automatisch an unterschiedliche Bildschirmgrößen von Smartphones, Tablets und Monitoren anpassen. Darüber hinaus übernimmt JavaScript die Kommunikation im Hintergrund, indem es über Programmierschnittstellen (APIs) Daten von externen Servern nachlädt und so komplexe Webanwendungen wie soziale Netzwerke oder Online-Editoren überhaupt erst möglich macht.

Das Frontend läuft im Browser und ist der Teil, den Menschen sehen und bedienen. Das Backend läuft auf einem Server, verarbeitet Daten und stellt sie über Schnittstellen bereit. Beide Seiten sprechen häufig über eine API (Application Programming Interface) miteinander. Wichtig ist das ALLE Daten, im Frontend vom Nutzer eingelesen und teilweise auch verändert werden können. Deshalb werden alle sensiblen Daten im Backend verarbeitet.

Ein Code-Editor unterscheidet sich grundlegend von gewöhnlichen Textverarbeitungsprogrammen, da er als spezialisierte Werkbank für das Schreiben und Organisieren von Code dient. Während einfache Texteditoren rein auf unformatierten Text ausgelegt sind, bieten moderne Code-Editoren gezielte Hilfsmittel, die den Entwicklungsprozess beschleunigen und Fehler minimieren. Dazu gehört vor allem das sogenannte Syntax-Highlighting, welches Elemente wie HTML-Tags, CSS-Klassen oder JavaScript-Variablen farblich hervorhebt und den Code dadurch übersichtlich lesbar macht. Ergänzt wird dies durch intelligente Auto-Vervollständigungen, die beim Tippen passende Befehle vorschlagen und geöffnete Tags automatisch schließen.

01 <main class="hero">
02   <h1>Hallo Web</h1>
03   <p>Meine erste Seite.</p>
04 </main>

In der Praxis kommen hierfür verschiedene Editoren und Entwicklungsumgebungen zum Einsatz. Der weltweit beliebteste und kostenlose Editor ist Visual Studio Code von Microsoft, welcher dank seiner riesigen Auswahl an Erweiterungen für nahezu jede Programmiersprache angepasst werden kann.