Jede Website, die Sie besuchen, ist nichts weiter als eine für Maschinen geschriebene Textdatei, die bestimmten Regeln und Vorgaben folgt. Ohne diesen Text – den Quellcode – würde ein Browser die Seite nicht darstellen können.

Doch wie funktioniert ein solcher Quelltext und wie kann er Ihnen beim Website-Design weiterhelfen? Hier ist alles, was Sie zum Thema Quellcode von Websites wissen müssen.

→ Erfahren Sie, welche Optimierungen Sie an Ihrer Website unbedingt vornehmen sollten [Kostenloses Tool]

Was ist ein Quellcode?

Ein Quellcode ist ein von Menschen geschriebener Text, den Maschinen ausführen können. Es handelt sich also um eine Textdatei, die – je nach verwendeter Programmiersprache – bestimmten Regeln, Befehlen und Vorgaben folgt, damit sie ein Computer oder Browser interpretieren kann.

Quellcode, Quelltext, Sourcecode: Was ist was?

Beginnen wir mit einer kurzen Begriffserklärung, um mögliche Missverständnisse zu vermeiden. Im Internet finden Sie verschiedene Begriffe zu diesem Thema. Neben Quellcode wird oft auch von Quelltext oder Sourcecode gesprochen – was aber alles dasselbe bezeichnet.

Gemeint ist ein Text, der in einer bestimmten Programmiersprache oder Skriptsprache geschrieben ist, damit ihn eine Maschine interpretieren kann. Im Falle einer Website ist dies ein HTML-Quellcode, bei Apps oder Programmen am Computer zum Beispiel ein Java-Quellcode. Sourcecode ist lediglich der englische Begriff (engl. „source“ = Quelle).

Was ist ein HTML-Quellcode?

HTML steht für Hypertext Markup Language und ist die allen Internetseiten zugrunde liegende Auszeichnungssprache, in der ein Quellcode verfasst wird. Dabei handelt es sich um eine maschinenlesbare Sprache, mit der die Formatierung und Gliederung von Website-Inhalten beschrieben werden.

In der heutigen Webentwicklung kommen aber noch weitere Websprachen wie CSS und JavaScript zum Einsatz, um dynamische, moderne Websites zu erzeugen. Jeder HTML-Quellcode basiert auf dem HTML-Grundgerüst aus <html>, <head> und <body> und wird mit entsprechenden Elementen und Inhalten gefüllt, um eine Website zu erstellen.

Wie sieht ein Quellcode aus?

Der Aufbau eines Quellcodes ist abhängig von der verwendeten Skript- oder Programmiersprache. Quellcode für Websites basiert auf HTML und beschreibt in einer mehr oder weniger komplexen Baumstruktur die Gliederung und Formatierung einer Webseite.

Quellcode für Programme, der zum Beispiel in Java oder C geschrieben wird, besteht hingegen aus Anweisungen. Auf Grundlage dieser Befehle weiß ein Programm, welche Funktionen es unter welchen Bedingungen ausführen muss.

Quellcode-Beispiel in HTML

Wie sieht aber nun ein typischer HTML-Quellcode aus? Im Folgenden sehen Sie einen Auszug eines HTML-Beispiels, bei dem externe CSS- und JavaScript-Dateien verlinkt sind. Zur besseren Übersicht rücken Webentwickler und Webentwicklerinnen die verschiedenen Ebenen des Codes ein, wodurch sich am Ende eine charakteristische Baumstruktur ergibt. Wörter in spitzen Klammern (<body>) heißen Tags und markieren fest definierte Elemente wie Tabellen, Listen, Überschriften, Links oder Bilder.

quellcode-beispiel

Quelle: Screenshot Uni Gießen

Quellcode einer Website anzeigen

Da das Internet auf offen dokumentierten Sprachen wie HTML, CSS oder XML basiert, können Sie sich den Seitenquelltext jeder beliebigen Website anzeigen lassen. Dafür gibt es zwei Möglichkeiten:

  • Über Rechtsklick oder STRG + U: Den HTML-Quellcode jeder Website erhalten Sie mit einem Rechtsklick auf die Seite und der Option „Seitenquelltext anzeigen“ im Kontextmenü. Wenn es noch schneller gehen soll, drücken Sie einfach die Tastenkombi STRG + U.
  • Über die Browser DevTools: Jeder Browser verfügt über diverse Entwicklerfunktionen, mit denen unter anderem der Sourcecode einer Website untersucht werden kann. Dazu öffnen Sie mit einem Rechtsklick der Maus das Kontextmenü der Seite und wählen die untere Option „Untersuchen“. Alternativ drücken Sie die Tastenkombi STRG + UMSCHALT + I. Das Fenster, das sich daraufhin öffnet, zeigt Ihnen den genauen Quelltext der Seite und viele weitere Informationen zur Website.

Was ist ein Java-Quellcode?

Im Gegensatz zu HTML beschreibt Java keine textuellen Inhalte fürs Web, sondern Anweisungen für Maschinen. Darum spricht man auch von einer klassischen Programmiersprache. Weitere Beispiele dafür wären etwa Python, C, C++ oder Pascal.

Ein Java-Quellcode ist an sich zwar auch eine Textdatei mit der Endung .java, wird aber speziell bei dieser Sprache in Klassen strukturiert und muss, bevor er ausgeführt werden kann, zuerst von einem Compiler in die rein binäre Maschinensprache übersetzt werden. Typische Bestandteile eines solchen Quelltextes sind Variablen, Operatoren und Kontrollstrukturen.

Während also ein HTML-Quellcode einem Browser deskriptiv mitteilt, wie eine Website dargestellt werden soll, arbeitet ein Java-Quellcode wie jeder andere Sourcecode, der auf Programmiersprachen basiert, mit Funktionen, die angeben, wie ein Programm unter verschiedenen Bedingungen ablaufen soll.

Quellcode erstellen: Welche Tools sind nötig?

Die Bedeutung des Quellcodes für Webseiten erklärt, warum Sie für individuelle Designs und Inhalte mit einfachen Webbaukästen nicht weit kommen. Denn diese arbeiten mit einer serverseitigen Software und vorgegebenen Templates, welche nur einen geringen Spielraum haben. Wenn Sie einen eigenen Quellcode erstellen, stehen Ihnen alle Freiheiten der Programmierung offen.

Das Schreiben von Quellcode ist mit jedem normalen Texteditor möglich. Im einfachsten Fall können Sie sogar auf betriebssystemeigene Tools wie den Editor bei Windows oder TextEdit bei MacOS zurückgreifen. Wir empfehlen Ihnen allerdings einen Texteditor mit entwicklerspezifischen Funktionen wie Autovervollständigung, Syntax- und Klammer-Hervorhebung oder Code-Folding.

Hierzu zählen zum Beispiel folgende Texteditoren:

Ein fertiger Website-Quellcode besteht in der Regel aus vielen verschiedenen Textdateien (HTML, CSS, JavaScript, PHP, etc.). Mit webbasierten IDEs wie CodePen oder JS Bin können Sie diese Dateien in einer simulierten Entwicklungsumgebung als Website in einem Browser darstellen. Um die Website aber im klassischen Sinne zu veröffentlichen, müssen Sie die Quellcode-Dateien auf den Server eines Webhosters hochladen.

Lässt sich ein Website-Quelltext verschlüsseln?

Einen guten Quellcode zu erstellen, erfordert Zeit und Kenntnisse. Es ist daher absolut verständlich, wenn Sie diverse Insights zu Ihrem Website-Quellcode nur ungern öffentlich präsentieren wollen oder gar verhindern möchten, dass jemand Ihren Quellcode kopiert und klaut.

Grundlegend müssen Sie dazu wissen, dass Quelltext zwar verschlüsselt werden kann, aber niemals so, dass erfahrene Programmierer ihn nicht knacken könnten. Die Art der Verschlüsselung hängt davon ab, ob Sie den kompletten Sourcecode (HTML, CSS, JavaScript) oder zum Beispiel nur den JavaScript-Code verschlüsseln möchten.

Beispielsweise gibt es ein Skript für JS, mit dem Sie das Öffnen des Kontextmenüs oder die Steuerungstaste blockieren – womit Sie sich jedoch nicht sehr beliebt machen. Alternativ lassen sich Sonderzeichen durch Zeichenlisten oder Variablen verschlüsseln (Stichworte „Escape-Methode“, „BASE64“).

Fazit: Quellcode ist der Ursprung jedes Designs und jeder Funktion

Webseiten und Programme würden ohne Quelltext nicht existieren. Je nachdem, welche Sprache Sie zum Erstellen des Codes benutzen, beschreibt er entweder textuelle oder funktionale Inhalte, die ein Computer auswerten und ausführen kann.

Im Web Design wird deshalb mit Sourcecode gearbeitet, weil individuelle Designs mit Baukästen und WYSIWYG-Editoren schlicht unmöglich sind. Kenntnisse in HTML, CSS und JavaScript sind deshalb wichtig und nützlich, um selbst Quellcode erstellen oder mit einem vorhandenen Quellcode arbeiten zu können.

New Call-to-action

 website grader

Titelbild: Rawf8 / iStock / Getty Images Plus

Ursprünglich veröffentlicht am Feb 10, 2022 2:00:00 AM, aktualisiert am März 24 2023

Themen:

Webentwicklung