In diesem Kapitel werden wir uns mit dem „Körper“, also dem eigentlichen grafischen Inhalt der Website beschäftigen. Kopieren Sie zur einfachen Demonstration diesen Code zwischen die Body-Tags und probieren Sie das Ergebnis mit Hilfe der vorhin genannten Tastenkombinationen im Browser aus:
<h1>Ich bin eine Überschrift</h1>
<p>Ich bin ein Absatz.</p>
Der gesamte Code in Ihrem Editor sollte nun so aussehen:
<!DOCTYPE html>
<html>
<head>
<title> Mein Seitentitel </title>
</head>
<body>
<h1>Ich bin eine Überschrift</h1>
<p>Ich bin ein Absatz.</p>
</body>
</html>
Sie sehen nun eine Überschrift (im Code markiert durch <h1> … </h1>) und einen Absatz (im Code markiert durch <p> … </p>). Die können mehrere Absätze und Unter-Überschriften einfügen, indem Sie die Tags mehrfach schreiben:
<h1>Ich bin eine Hauptüberschrift</h1>
<p>Erster Absatz</p>
<p>Zweiter Absatz</p>
<p>Dritter Absatz</p>
<h2>Ich bin eine Unterüberschrift</h2>
<p>Vierter Absatz</p>
<h3>Ich bin die Unter-Unterüberschrift</h3>
<p>Fünfter Absatz</p>
Die Standardgrößen der Überschriften reichen von <h1> bis <h5>.
Wie Ihnen vielleicht schon aufgefallen ist, ignoriert der Browser Leerzeichen und Zeilenumbrüche die Sie „einfach so“ in den Code schreiben. Testen Sie zur Verdeutlichung bitte folgendes Beispiel:
<h1>
Das
Steht
Alles
In
Einer
Zeile
</h1>
Um das Problem mit den Zeilenumbrüchen zu beheben, benötigen wir ein eigenes HTML-Tag. Wir verwenden hierzu <br>. <br> ist ein sogenanntes „Monotag“, das bedeutet, es gibt kein schließendes End-Tag wie </br>, sondern es steht an der gebrauchten Stelle alleine.
<h1>
Das<br>
Steht<br>
In<br>
Verschiedenen<br>
Zeilen
</h1>
Natürlich kann das <br> Tag auch verwendet werden, um die vertikalen Abstände zwischen zwei Absätzen zu erhöhen.
<p>Erster Absatz</p>
<p>Zweiter Absatz</p>
<br><br>
<p>Dritter Absatz</p>
<br><br><br><br>
<p>Vierter Absatz</p>
Ganz ähnlich verhält es sich mit Abständen zwischen Worten. Der Browser interpretiert jeweils nur maximal ein Leerzeichen zwischen zwei Worten.
<p>Wort Wort</p>
<p>Wort Wort</p>
Diese beiden Varianten werden im Browser also exakt gleich dargestellt. Wenn Sie zusätzlich Leerzeichen benötigen, müssen Sie ein sogenanntes „Namespace“ verwenden. Der Code dafür lautet: (Das „&“ Zeichen leitet den Namespace ein, das Semikolon „;“ beendet den Namespace)
<p>Wort Wort</p>
Diese Programmierung wird dem gewünschten Ergebnis näherkommen.
Um den Abstand weiter zu vergrößern, schreiben Sie mehr Namespaces zwischen die Worte.