Woraus besteht eine Webseite?

Eine Webseite ist im Grunde nicht mehr als eine Sammlung unterschiedlicher Dateien. Das können Textdateien, Bilder oder Videos sein. Was unterscheidet eine Webseite dann z. B. von einem Word- oder PowerPoint-Dokument? Gar nicht so viel. Unter der Haube enthalten Office-Dokumente nicht nur den tatsächlich dargestellten Inhalt, sondern eine Reihe von Meta-Informationen: ob es sich bei einem Text um eine Überschrift handelt, welche Farbe der Text hat oder wie groß ein Bild dargestellt werden soll. Mit Word oder PowerPoint haben wir allerdings Programme an der Hand, die es uns erlauben, all diese Meta-Informationen mit wenigen Klicks zu ändern.

In dieser Hinsicht ist eine Webseite einem Office-Dokument ziemlich ähnlich. Auch eine Webseite enthält solche Meta-Inforamtionen. Wir werden allerdings kein Programm nutzen, um uns eine Webseite wie einer PowerPoint-Präsentation zusammenzuklicken. Stattdessen schreiben wir per Hand, was ansonsten Word oder PowerPoint für uns übernehmen würden.

HTML-, CSS- und JavaScript-Dateien sind einfache Textdateien. (Das gilt übrigens auch für die meisten anderen Programmiersprachen.) Sie werden dann jedoch in der Regel als Quelltext bezeichnet. Andere synonyme Bezeichnungen sind Quellcode, source code oder einfach nur code.

Theoretisch können Quellcode-Dateien mit jedem beliebigen Programm bearbeitet werden, dass mit Textdateien umgehen kann. Allerdings bevorzugen die meisten EntwicklerInnen spezielle Text-Editoren die speziell für das Bearbeiten von Quelltext entwickelt sind. Das ist Thema am Ende diesers Einführung. Um den Einstieg etwas leichter zu machen, kannst du die meisten Beispiele direkt im Browser bearbeiten.

Auch diese Einführung ist eine einfache Webseite – und auch sie besteht aus einer Sammlung von HTML-, CSS-, JavaScript- und Bilddateien. Und so sieht die Ordnerstruktur mit all diesen Dateien aus:

Hypertext Markup Language (HTML)

Die Hypertext Markup Language dient der Auszeichnung von Inhalten im Web. Der Begriff Hypertxt wurde von den Erfindern als Gegensatz zu klassischen Print-Dokumenten gewählt. Das Wort sollte zum Ausdruck bringen, dass es sich um vernetzte, multimediale Inhalte handelt, nicht um statische, lineare. HTML-Dateien enthalten neben dem eigentlichen Inhalt einer Webseite zusätzliche, semantische Informationen über die Art und Struktur der Inhalte.

Mit HTML können wir beispielsweise bestimmen, dass ein Eingabefeld oder ein Button angezeigt werden können. Standardmäßig sieht das aber noch ein wenig langweilig aus:

Auch wenn du jetzt vermutlich noch gar nicht genau weißt, wie der Quelltext oben genau funktioniert, siehst du wahrscheinlich auf den ersten Blick, wie z. B. der Button-Text geändert werden kann, oder?

Cascading Stylesheets

Wie der Name schon andeutet, dienen Cascading Stylesheets der Gestaltung von Inhalten. Mit ihnen können wir Regeln festlegen, die für einzelne oder mehrere Elemente einer Webseite das Aussehen verändern.

Mittels CSS können wir die Gestaltung des obigen Beispiels anpassen:

Auch hier erkennst du vermutlich ohne Vorwissen, was du ändern musst, damit beispielsweise der Rahmen des Eingabefeldes nicht mehr blau, sondern rot dargestellt wird.

JavaScript

JavaScript ist die dritte grundlegende Webtechnologie und die einzige der drei vorgestellten Sprachen, die im engeren Sinne eine wirkliche Programmiersprache ist. Mithilfe von JavaScript ist es möglich, interaktive Funktionen zu entwickeln. Zum Beispiel kann JavaScript genutzt werden, um auf Nutzerinteraktionen wie Buttonklicks oder Formulareingaben zu reagieren.

Welcher Teil des Quelltextes muss abgeändert werden, damit nicht mehr auf Deutsch, sondern in französischer (Salut Name!) oder spanischer Sprache (Hola Name) gegrüßt wird?

Weitere Programmiersprachen

Es gibt noch eine ganze Reihe weiterer Sprachen, die von Webentwicklern genutzt werden. Vielleicht hast du beispielsweise schon einmal von Python, Ruby oder PHP gehört?

Es gibt einen Entscheidenden Unterschied zwischen all diesen Sprachen und den drei zuvor vorgestellten – HTML, CSS und JavaScript. HTML, CSS und JavaScript sind die einzigen Sprachen, die ein Webbrowser von Haus aus versteht. Andere Sprachen können immer nur dazu verwendet werden, den Quelltext für eine dieser drei Sprachen (in der Regel HTML) zu generieren.