Was ist Quellcode? Was hat das mit WordPress zu tun? Muss ich Informatik studiert haben, um mich an den Quellcode zu wagen? Um diese Fragen zu beantworten, steigen wir gleich mal praktisch ein.
Für die folgenden Übungen benötigst du ein Programm zur Erstellung von Quellcode, einen sogenannten Text-Editor. Achtung: Mit Text ist hier ausschließlich Code gemeint. Ein Office-Programm wie Word ist für das Erzeugen von Code das falsche Tool. Für den Anfang ganz gut geeignet ist aber der Windows-Editor. Dieses kleine Tool ist seit 30 Jahren in jeder Windows-Version vorhanden. Aufgerufen wird der Editor über das Windows-Menü, er versteckt sich unter dem Punkt Windows-Zubehör.

Auf dem Mac gibt es ein ähnliches Tool, es nennt sich TextEdit. Auch hier ist mit Text Quelltext gemeint, und nicht etwa ein Brief oder ein Artikel mit irgendwelchen Schnörkseln.
PS: Quellcode, auch Quelltext genannt, ist nicht nur die Grundlage einer Webseite, sondern jedes Computerprogramms. Auch Photoshop oder Powerpoint hat einen Quellcode. In diesem Beitrag geht es aber nur um den Quellcode einer Webseite. Es geht um HTML-Code und später auch CSS.

Windows-Editor starten

In diesen Windows-Editor soll nun Quellcode geschrieben werden, und zwar für eine Webseite. Die Sprache des Internets heißt bekanntlich HTML. Wir schreiben also HTML-Code, und zwar eine komplette kleine HTML-Seite.

HTML-Datei erzeugen

Unsere HTML-Datei hat fünf Teile. Sie beginnt mit der sogenannten Deklaration und endet mit dem schließenden HTML-Tag. Ein Tag ist ein Befehl, der in spitzen Klammern steht, also diese Klammern hier: < und >, beziehunsweise </ und >.

Die Klammern < und > stehen für einen öffnenden Tag.
Die Klammern </ und > stehen für einen schließenden Tag. Der Schrägstrich / macht den Unterschied.

HTML-Seite – Teil 1: Deklaration

Los geht es mit der sogenannten Deklaration. Die Deklaration gibt den Programmen zum Lesen von Internetseiten, auch Browser genannt, folgende Information: Das ist eine HTML-Seite und nichts anderes. Der Code hierfür lautet:

<!DOCTYPE html>

HTML-Seite – Teil 2: HTML-Start-Tag

OKay, die Deklaration ist erstellt. Weiter geht es jetzt mit dem Beginn des HTML-Codes. Der Code für den HTML-Start-Tag lautet:

<html>

HTML-Seite – Teil 3: Head

Okay, jetzt ist die HTML-Abteilung eröffnet. Weiter geht es jetzt mit dem Head, dem Kopf einer HTML-Seite. Der Code für die Erzeugung eines heads einschließlich Seitentitel lautet:

<head>
    <title></title>
</head>

Innerhalb des Head befindet sich der Titel der Webseite. Enhalten sind hier auch zwei schließende Tags, erkennbar am Schrägstrich nach der spitzen Klammer: />. Der Schrägstrich zeigt an, wo ein Befehl endet. Im obigen Code sind zwei schließende Tags enthalten:

</title> schließt den Seitentitel.
</head> schließt den Head.

HTML-Seite – Teil 4: Body

Der Head ist jetzt abgeschlossen. Weiter geht es mit dem Body, also dem Inhalt der Website.

 <body>

 </body>

Mit <body> beginnt der Inhalt der Website.

HTML-Seite – Teil 5: HTML-End-Tag

Nach dem Body endet der HTML-Code. Der Code zum Ende der Seite lautet:

</html>

Der gesamte Quellcode

Jetzt sind die fünf Teile fertig. Der gesamte Quellcode deines HTML-Grundgerüsts lautet nun:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>

  </body>
</html>

Quizfrage: Was ist auf einer Webseite zu sehen, die genau diesen Quellcode enthält?

Für die Antwort machst du den Praxistest! Dazu muss die eben erzeugte Datei aber zunächst mit einer Dateiendung abgespeichert werden, die ein Browser (zum Beispiel Firefox, Chrome oder Safari) auch interpretieren kann.

HTML-Datei korrekt abspeichern

Der Editor zeigt nochmal die gesamte Datei. Passt alles, sind alle fünf Teile beisammen? Dann sieht der komplette Quellcode nun so aus:

Nächster Schritt: Klicke auf Datei und dann auf Speichern unter.

Jetzt klappt unten ein Fenster zum Speichern auf

So wird abgespeichert:

Der Dateiname ist beliebig, aber bitte ohne ß oder bestimmte Sonderzeichen. Groß- oder Kleinschreibung ist egal.
Die Endung lauet .html
Bei Dateityp muss Alle Dateien ausgewählt werden. Ansonsten hängt der Windows-Editor wieder ein .txt an. Dann hättest du aber keine HTML-Datei abgespeichert.
Den Speicherort bitte merken, damit die Datei wieder gefunden werden kann. Speicherort kann zum Beispiel der Desktop oder der Downloadordner sein.

HTML-Datei lokal öffnen

Ich hab die Datei testen.html genannt und in meinem Downloadordner gespeichert. Dort wird sie von meinem Browser Firefox auch gleich als Webseite erkannt. Das erkenne ich daran, dass Windows ein Firefox-Icon vor den Dateinamen gesetzt hat. Mit einem Doppelklick auf dieses Icon starte ich meinen Browser, den Firefox. Und der zeigt was genau an? Eine leere Seite.

Des Rätsels Lösung: Mit dem obigen Code hab ja nur ein Gerüst gebaut, da sind noch keine Inhalte drin. Das hole ich jetzt nach. Ich gehe wieder in den Windows-Editor und füge jetzt Inhalte ein, und zwar hier:

Oben in den Head.
Unten in den Body.

HTML-Gerüst mit Inhalten füllen

<!DOCTYPE html>
<html>
  <head>
    <title>Mal ausprobieren</title>
  </head>
  <body>
Hallo Welt!
  </body>
</html>

Meine Inhalte:

Mal ausprobieren – diesen Titel füge ich in den Head meiner Seite ein.
Hallo Welt – diesen Text füge ich im Body meiner Seite ein.

Danach speichere ich wieder ab und rufe die Seite erneut über meinen Browser auf.

HTML-Seite betrachten

Jetzt rufe ich die Seite wieder in meinem Browser auf. Was nun angezeigt wird:

Mal ausprobieren – der Titel wird oben im Browser-Tab angezeigt.
Hallo Welt – der Text wird im Hauptfenster des Browsers angezeigt.

Zurück den drei Ausgangsfragen zu Beginn dieses Beitrags. Diese lauteten:

Was ist Quellcode?
Was hat das mit WordPress zu tun?
Muss ich Informatik studiert haben, um mich an den Quellcode zu wagen?

Die Antworten:

Der Quellcode einer Webseite ist nicht genau das, was dem Besucher einer Webseite angezeigt wird. Er definiert aber, was dem Besucher wo angezeigt wird.
Beispiel: Was im Head einer HTML-Seite steht, wird nicht im Hauptfenster des Browsers angezeigt.
WordPress wurde erfunden, damit du den Quellcode deiner Website nicht mühsam mit der Hand eingeben musst.
Du muss nicht Informatik studiert haben, um mit Quellcode zu arbeiten. Es genügt, wenn die Grundprinzien von HTML und CSS verstanden hast.

HTML und CSS

Okay, der Text ist auf der Webseite. Aber besonders stylish ist die Webseite nicht. Es fehlen die Farben, es fehlt die Ausrichtung der Texte (linksbündig, mittig oder rechtsbündig), es sind keine keine unterschiedlichen Schriftgrößen vorhanden und keine Überschriften.
Anmerkung: Die Überschriften werden in HTML headings genannt, die Überschrift h1 steht für eine Hauptüberschrift, h2 für eine größere Zwischenüberschrift, h3 bis h6 für kleinere Zwischenüberschriften:

h1 Überschrift

h2 Überschrift

h3 Überschrift

h4 Überschrift

h5 Überschrift

h6 Überschrift

Für Farben, Größen und Ausrichtungen sind CSS-Befehle zuständig. Aber wo stehen diese CSS-Befehle? Es gibt drei gängige Methoden, um CSS-Befehle in HTML einzubinden.

Methode 1: Inline Styles

Inline-Styles: Bei Inline-Styles werden CSS-Befehle direkt innerhalb des HTML-Elements verwendet. Dies geschieht mit dem style-Attribut im entsprechenden HTML-Tag. Beispiel für eine blaue und mittig ausgerichtete h1-Überschrift :

<h1 style="color: blue; text-align: center;">Überschrift</h1>

Unser HTML-Quellcode, ergänzt mit einem CSS-Befehl, sieht dann so aus:

<!DOCTYPE html>
<html>
  <head>
    <title>Mal ausprobieren</title>
  </head>
  <body>
<h1 style="color: blue; text-align: center;">Überschrift</h1>
Hallo Welt!
  </body>
</html>

Erklärung:

h1 ist ein HTML-Tag und steht für eine Überschrift
style=“color: blue; text-align: center; ist ein CSS-Befehl, der die Überschrift zentriert und blau einfärbt

So sieht das Ergebnis im Browser aus:

Die h1-Überschrift ist blau und mittig ausgerichtet. Der CSS-Befehl hat das Design der Website ein wenige verbessert.

Methode 2: Styles im Head einer einzelnen Seite

Styles im Head: CSS-Befehle werden innerhalb des style-Tags im <head>-Bereich des HTML-Dokuments definiert. Diese Methode wird für das Styling einzelner HTML-Seiten verwendet.

<!DOCTYPE html>
<html>
<head>
<title>Mal ausprobieren</title>
  <style>
    h1 {
      color: blue;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Überschrift</h1>
Hallo Welt!
</body>
</html>

Das Ergebnis ist gleich:

Es gibt aber doch einen Unterschied zwischen der Methode 1 und 2. Bei der Methode 1 (CSS als Inline-Style) wird nur eine einzige h1-Überschrift über CSS erfasst und formatiert. Die Methode 2 (CSS im Head der Seite) betrifft sämtliche h1-Überschriften der Seite.

Methode 3: Externe Stylesheets

Bei der Methode 3 werden alle CSS-Befehle in einer separaten CSS-Datei gespeichert, die dann über das link-Tag im <head>-Bereich des HTML-Dokuments verlinkt ist. Diese Methode ist üblich, wenn das gleiche CSS auf mehreren HTML-Seiten verwendet wird. Bei 99 von 100 Websites wird diese Methode verwendet.

Verlinkung der externen CSS-Datei im Head

<!DOCTYPE html>
<html>
<head>
<title>Mal ausprobieren</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>Überschrift</h1>
Hallo Welt!
</body>
</html>

So wird die CSS-Datei eingebunden:

h1 {
  color: blue;
  text-align: center;
}

Eine CSS-Datei abspeichern

Üblicherweise heißt eine zentrale CSS-Datei so: styles.css
Sie wird im selben Ordner wie die HTML-Datei abgespeichert.
Achtung: Beim Speichern im Windows-Editor wieder Alle Dateien bei Dateityp auswählen. Sonst wird wieder ein .txt angehängt.

Wenn beide Dateien mit der korrekten Endung gespeichert wurden und sich im selben Verzeichnis befinden, ist das Ergebnis ist wieder gleich:

Jetzt stellt sich natürlich die Frage: warum so kompliziert? Warum zwei Dateien anlegen, um eine einzige Seite zu erzeugen? Antwort: Der Aufwand einer zentralen CSS-Seite lohnt sich, sobald eine Website anwächst … auf 2, 10 oder auch 20 HTML-Unterseiten. Oder 500 Unterseiten.

Vorteile des externen Stylesheets

Externe Stylesheets bieten mehrere Vorteile gegenüber Inline-Styles und im Head eingebetteten Stylesheets:

Wiederverwendbarkeit: Ein externes Stylesheet kann auf mehrere HTML-Dateien angewendet werden. Dies spart Zeit und Mühe, da man CSS-Regeln nur einmal definieren muss, um sie auf verschiedenen Seiten einer Website anzuwenden.
Wartbarkeit: CSS-Regeln sind in einer separaten Datei gespeichert, was den Code übersichtlicher und leichter wartbar macht. Änderungen können zentral im externen Stylesheet vorgenommen werden. Die Vorteile: Weniger Fehlerquellen und Konsistenz der CSS-Regeln auf der gesamten Website.
Reduzierte Ladezeit: Ladezeit ist ein SEO-Faktor. Je kürzer die Ladezeit, desto besser. Externe Stylesheets werden vom Browser deiner Besucher zwischengespeichert, sodass es bei nachfolgenden Seitenaufrufen nicht erneut geladen werden muss. Dies verbessert die Ladezeiten deiner Seiten.
Trennung von Inhalt und Design: Durch die Trennung von HTML (Inhalt) und CSS (Design) wird der Quellcode besser strukturiert und leichter verständlich.

Zum letzten Punkt: Pagebuilder, wie beispielsweise Elementor, vermengen Inhalt und Design. Ob die sie trotzdem für langlebige WordPress-Projekte einsetzt? Es liegt an dir.
Tipp: Achte bei der Auswahl eines Themes darauf, ob Pagebuilder eingesetzt sind.

Hat die HTML-Programierung bei dir geklappt?
Wenn du eine Frage oder eine Anmerkung hast, schreib einfach einen Kommentar.

Was ist Quellcode?