Was ist Quellcode? Was hat das mit WordPress zu tun? Muss ich Informatik studiert haben, um mich an den Quellcode zu wagen? Um diese drei Fragen zu beantworten, steigen wir gleich mal praktisch ein. Benötigt wird ein Programm zur Erstellung von Quellcode, ein sogenannter Text-Editor. Mit Text ist hier allerdings nur Code gemeint, Microsoft Word ist deshalb das falsche Tool. Gut geeignet ist aber der Windows-Editor. Dieses kleine Tool ist in jeder Windows-Installation vorhanden. Aufgerufen wird er ü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 Quellcode (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 auch jedes Computerprogramms. Auch Photoshop, Powerpoint oder WordPress hat einen Quellcode. In diesem Artikel geht es aber nur um den Quellcode einer Webseite.
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 Deklaration und endet mit dem schließenden HTML-Tag. Ein Tag ist ein Befehl, der in spitzen Klammern steht, also diese Klammern hier:
- < und > stehen für einen öffnenden Tag
- </ und > stehen für einen schließenden Tag
HTML-Seite – Teil 1: Deklaration
Los geht es mit der Deklaration. Die Deklaration besagt: Das ist eine HTML-Seite und nichts anderes. Der Code hierfür lautet:
<!DOCTYPE html>HTML-Seite – Teil 2: HTML-Start-Tag
Weiter geht es mit dem Beginn des HTML-Codes. Der Code hierfür lautet:
<html>HTML-Seite – Teil 3: Header
Weiter geht es mit dem Header (Kopf) der Seite. Der Code hierfür lautet:
<head>
<title></title>
</head>Innerhalb des Headers 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 etwas endet, zum Beispiel der Seitentitel.
HTML-Seite – Teil 4: Body
Weiter geht es mit dem Body, also dem Inhalt der Website. Der Code hierfür lautet:
<body>
</body>HTML-Seite – Teil 5: HTML-End-Tag
Nach dem Body endet der HTML-Code. Der Code hierfür lautet:
</html>Der gesamte Quellcode
Der gesamte Quellcode eines 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?
Antwort: Wir machen den Praxistest! Dazu muss die eben erzeugte Datei erstmal mit der richtigen Dateiendung abgespeichert werden!
HTML-Datei korrekt abspeichern
Wir sehen nochmal in den Editor. Passt alles? Dann sieht das so aus:
Nächster Schritt: Auf Datei / Speichern unter klicken
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ätten wir aber keine HTML-Datei abgespeichert.
- Den Speicherort merken, damit die Datei wieder gefunden wird. Das kann zum Beispiel 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. Mit einem Doppelklick startet mein Browser, der Firefox. Und zeigt was genau an? Eine leere Seite. Na klar, denn ich hab ja nur ein Gerüst gebaut, aber noch keine Inhalte drin. Das hole ich jetzt nach. Ich gehe wieder in den Windows-Editor und füge Inhalte ein:
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 – als Titel im Header meiner Seite
- Hallo Welt – als Text im Body meiner Seite
Dann speichere ich wieder ab und rufe die Seite erneut auf.
HTML-Seite betrachten
Was nun als Ergebnis angezeigt wird:
- Mal ausprobieren – der Titel wird oben im Browser-Tab angezeigt.
- Hallo Welt – der Text wird im Hauptfenster des Browsers angezeigt.
Zu den drei Ausgangsfragen:
- 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 Header einer HTML-Seite steht, wird nicht im Hauptfenster des Browsers angezeigt.
- Wer WordPress verwendet, muss den Quellcode nicht mühsam mit der Hand eingeben.
- Ich muss nicht Informatik studiert haben, um mit Quellcode zu arbeiten.
HTML und CSS
Okay, der Text ist auf der Webseite. Aber besonders stylish ist das nicht. Keine Farben, keine Ausrichtung der Texte, keine unterschiedlichen Schriftgrößen, keine Hervorhebung von Überschriften, … Dafür sind CSS-Befehle zuständig. Es gibt drei Hauptmethoden, um CSS-Befehle in HTML einzubinden.
Methode 1: Inline Styles
Inline-Styles: CSS-Befehle werden direkt innerhalb des HTML-Elements verwendet. Dies geschieht mit dem style-Attribut im entsprechenden HTML-Tag.
<h1 style="color: blue; text-align: center;">Überschrift</h1>
Unser Quellcode 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
Das Ergebnis:
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:
Methode 3: Externe Stylesheets
CSS-Befehle werden in einer separaten CSS-Datei gespeichert, die dann über das link-Tag im <head>-Bereich des HTML-Dokuments verlinkt wird. 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 Header
<!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:
<link rel=“stylesheet“ type=“text/css“ href=“styles.css“
h1 {
color: blue;
text-align: center;
}
Beispiel für eine CSS-Datei
- Üblicherweise heißt eine zentrale CSS-Date 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.
Der Vorteil 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, was weniger Fehlerquellen bedeutet und die Konsistenz auf der gesamten Website gewährleistet.
- Reduzierte Ladezeit: Externe Stylesheets können vom Browser zwischengespeichert werden. Beim ersten Laden einer Seite wird das Stylesheet heruntergeladen und gespeichert, sodass es bei nachfolgenden Seitenaufrufen nicht erneut geladen werden muss. Dies kann die Ladezeiten für Benutzer erheblich verbessern.
- Trennung von Inhalt und Design: Durch die Trennung von HTML (Inhalt) und CSS (Design) wird der Quellcode besser strukturiert und leichter verständlich. Diese Trennung entspricht dem Prinzip der sauberen Trennung von Präsentation und Inhalt, was auch die Zusammenarbeit zwischen Entwicklern und Designern erleichtert.
- Bessere Zusammenarbeit: In einem Team von Entwicklern und Designern können sich die Designer auf das CSS konzentrieren, ohne sich um den HTML-Code kümmern zu müssen, und umgekehrt. Dies fördert eine effizientere Arbeitsweise und bessere Ergebnisse.
Schreibe einen Kommentar