Zum Inhalt

Inhaltsverzeichnis • Teil 1 - Anfänger • Inhalte • Absatz und Umbrüche
⇦ Visitenkarte / Verweise ⇨
30.07.2014 08:48:47

Absatz und Umbrüche

Absatz

Denken sie an unser Beispiel mit dem Redakteur und dem Setzer. Damit auch der Webbrowser (Setzer) die logische Formatierung eines Absatzes in eine sichtbare umsetzt, müssen wir diese Formatierung entsprechend mit einem Tag (sprich Tägg) <p> (paragraph - Absatz) kenn­zeichnen.

Die Kennzeichnung eines Textabschnittes mit einem Tag geschieht immer durch Umschließung. Um einen Absatz zu taggen schreiben wir zunächst den Starttag <p>, dann folgt der Text des Absatzes und zuletzt kommt der Endtag </p>:

<p>Hier steht der Absatz.</p>

oder übersichtlicher:

<p>
  Hier steht der Absatz.
</p>

Da wir uns hier zum ersten mal mit einem Tag beschäftigen, schauen wir kurz auf die Informationen, die uns Selfhtml bietet: <p> [s,a,w] (klicken sie dazu auf →w).

Zunächst unterscheidet Selfhtml verschiedene HTML-Versionen. Wie schon gesagt, interessiert uns zunächst nur „XHTML 1 Strict“. Folgen wir diesem Link, bekommen wir Infos zu Bedeutung des Tags, Start-/Endetag, Elternelemente (darf vorkommen in) und Kindelemente (darf beinhalten). Zu den Attributen kommen wir später.

Anmerkung: PCData ist (einfach gesagt) nur Text.

Übung:

Speichern sie ihre Visitenkarte unter neuem Namen. Fügen sie dann die Tags <p> und </p> in ihre Datei so ein, das sie ihre logischen Absätze umschließen.

(Beispiel 03_visitenkarte_p.html)

Anhang: Tastaturkommandos

Anmerkung: Schauen sie in den Tastatur­kommandos nach, wie sie sich den Quelltext des Beispiels anzeigen können.

Wenn sie wirklich nur (echte logische) Absätze mit <p></p> umschlossen haben, sollte ihre Webseite jetzt wie im Beispiel 3 erscheinen.

Zeilenumbruch

Innerhalb eines Absatzes kann es nötig sein, die Zeile umzubrechen und am Anfang fortzusetzen. Das nennt man dann entsprechend Zeilen­umbruch. Der augen­schein­lichste Unterschied zwischen Absatz und Zeilenumbruch ist, das ein Zeilenumbruch ein leeres Tag ist, also nichts umschließt. Er soll ja nur anzeigen, dass hier (also dort wo er steht) die Zeile umgebrochen wird.

In einer Textverarbeitung erzeugen sie einen Zeilenumbruch mit Umschalt + Enter. Wenn sie die Steuerzeichen eingeblendet haben, erscheint an dieser Stelle meist ein geknickter Pfeil nach links (↵). Da ein Texteditor eine solche Formatierung nicht kennt, simuliert man ihn normalerweise durch einmaliges Enter drücken.

Innerhalb eines Absatzes existiert in HTML für einen solchen Zeilenumbruch das Tag <br> [s,a,w] (break - Umbruch). Außerhalb von <p> ist <br /> nicht erlaubt!

<p>
  Hier steht der Absatz mit Zeilenumbruch.<br />
  Hier geht der Absatz weiter.
</p>

Achtung: In XHTML (s. Anhang: xhtml) muss jedes Tag ein schließendes haben, also schreibt man <br></br> oder kurz <br />. Das Leerzeichen vor dem "/" erlaubt älteren Webbrowsern den Tag korrekt zu erkennen.

Übung:

Speichern sie ihre Visitenkarte unter neuem Namen. Ergänzen sie die <br /> in der Datei innerhalb von <p></p>.

(Beispiel 04_visitenkarte_p_br.html)

Anhang: Tastaturkommandos

Block und Inline

Der Absatz <p> ist ein typisches Blockelement und der Zeilenumbruch <br /> ein nicht ganz so typisches Inlineelement.

Blockelemente bilden Absätze (als logische Formatierung). Sie beinhalten im allgemeinen Text und Inlineelemente sowie weitere Blockelemente.

Inlineelemente enthalten im allgemeinen Text und andere Inlineelemente, allerdings niemals Blockelemente. Sowohl Block- als auch Inlineelemente können leer sein.

Später werden wir noch andere Unterschiede zwischen Block und Inline kennenlernen!

Ergebnis

Voila. Nun haben sie wirklich die erste HTML-Seite geschrieben, die etwa wie im Beispiel 4 aussehen sollte. Diese Visitenkarte ist zwar noch nicht schön, aber zumindest richtig strukturiert. Wie man eine Webseite formatiert, lernen sie im folgenden Kapitel.

Leider sind die heutigen Webbrowser sehr fehlertolerant. Wenn sie falschen HTML-Code schreiben, heißt das noch lange nicht, das der Browser einen Fehler meldet. Später sollten sie deshalb ihren Code immer mit einen HTML-Validator (Gültigkeitsprüfer) prüfen.

Zusammenfassung

⇦ Visitenkarte / Verweise ⇨
Nach oben