Websiteentwicklung: XHTML: Absätze, Zeilenumbrüche, formatierter Text
Wenn Sie ein wenig mit XHTML experimentieren, werden Sie feststellen, dass das Darstellungsprogramm Zeilenumbrüche ignoriert. Genauer gesagt werden Zeilenumbrüche und ähnliche Zeichen zu Leerzeichen konvertiert. Danach werden mehrere aufeinanderfolgende Leerzeichen zu einem einzigen zusammengeschnurrt (sofern keine spezielles XML-Attribut, welches in XHTML allerdings nicht üblich ist, etwas anderes fordert). Zur Erzeugung eines Absatzes oder einer neuen Zeile wird ein dafür geeignetes Element notiert.
Absätze, Element p[Bearbeiten]
Grundsätzlich wird sämtlicher Text in Absätzen oder in anderen Textbereichen notiert. Text ist inzeiliger Inhalt und kann dort notiert werden, wo inzeiliger Inhalt erlaubt ist. Für einen Absatz wird das Element p (englisch: paragraph; deutsch: Absatz) verwendet. In solch einem Absatz kann dann inzeiliger Inhalt wie Text stehen.
Zwischen verschiedenen Absätzen erzeugen Darstellungsprogramme mit graphischer Ausgabe automatisch einen kleinen Abstand und solche mit Textausgabe entweder dieses oder eine Einrückung, Darstellungsprogramme mit akustischer Ausgabe (englisch: screen-reader) machen eine kleine Pause beim Vorlesen.
Das Element p hat keine Attribute, die spezifisch für dieses Element sind. Die allgemein verwendbaren Attribute können natürlich notiert werden. p ist ein sogenanntes Blockelement, welches also einen Zeilenumbruch erzeugt. p kann keine anderen Blockelemente wie etwa p-Elemente enthalten, sondern nur Text und inzeilige Elemente, die also keinen Zeilenumbruch erzeugen, sondern der Auszeichnung von Text im normalen Textfluß dienen.
Das Element p umschließt einen einzelnen, abgeschlossenen Gedankengang innerhalb eines längeren Textes. Ein Text besteht zumeist aus mehr als einem Gedankgang. Ein Absatz ist inhaltlich einfacher Prosatext ohne weitere inhaltliche Struktur, die über die von Sätzen hinausgeht. Dies spiegelt sich auch darin wider, dass nur Text und Phrasenelemente als Inhalt erlaubt sind.
Beispiel:
<p>
Wenn sich Garn zu einem wilden Knäuel verheddert, wird es schnell unübersichtlich.
Sucht man darin die Enden der Fäden, kann folgendes Theorem hilfreich sein:
Die Anzahl aller Garnenden im Knäuel ist gerade.
</p>
<p>
Bisweilen wird auch davon gesprochen, dass Seemannsgarn gesponnen wird,
wenn eine erfundene, tolldreiste Geschichte erzählt wird.
Auch Analogien wie Erzählfaden oder Roter Faden greifen dieses Thema wieder auf,
einschließlich der Implikationen des Verhedderns zu einem wilden Knäuel.
</p>
<p>
Ob das Theorem der Geradzahligkeit der Endenanzahl der Fäden auch
bei Seemannsgarn, Erzählfäden und roten Fäden gilt,
ist Gegenstand aktueller Untersuchungen der statistischen Literaturtheorie.
</p>
Zeilenumbrüche, Element br[Bearbeiten]
Es gibt auch ein spezielles Element br für einen Zeilenumbruch, welches selbst nie Inhalt hat. Dies ist ein Beispiel für ein sogenanntes leeres Element.
Inhaltlich tritt ein Zeilenumbruch eher selten auf. Dies kann etwa bei der Notation von Adressen der Fall sein. Innerhalb eines Absatzes könnte ein br noch eine minimale Gedankenpause kennzeichnen, um einen bestimmten Punkt in einem Gedankengang zu pointieren. Da das Element selbst keinen Inhalt hat, kann es auch kaum dazu dienen, inhaltliche Strukturen auszuzeichnen, welche über eine solch minimale Gedankenpause hinausgehen. Daher gibt es eher wenige inhaltlich korrekte Verwendungsmöglichkeiten für br.
Wer dies Element in anderem Zusammenhang öfter verwendet, verwendet vermutlich das falsche Element oder ist sich nicht klar darüber, was inhaltlich zum Ausdruck gebracht werden soll. In der Regel sollte ein Autor dem Darstellungsprogramm überlassen, die Zeilenumbrüche selbst festzulegen, da dem Autor nicht bekannt ist, wie breit eine Zeile ist. Ihr Dokument kann in einem Fenster mit einer Auflösung von 1024×768px angezeigt werden oder auch nur in einem sehr kleinen Ausschnitt des Bildschirms oder einem mobilen Endgerät mit kleinem Bildschirm. Oder es wird vorgelesen - und wer möchte schon gerne eine Schar aufeinanderfolgender Zeilenumbrüche vorgelesen bekommen...
Letztlich wissen Sie nicht, wo die Zeile aufhört. Wenn Sie zwanghaft ein bestimmtes Layout zu erzeugen versuchen, kann es sein, dass ein Besucher Ihres Projektes mit einem anderen Darstellungsprogramm oder anderer Bildschirmauflösung und -größe die Seite nicht mehr so sieht, wie Sie dies eigentlich wollten.
br gehört zu den inzeiligen Elementen, kann somit im normalen Textfluß verwendet werden, obgleich es dort einen Zeilenumbruch erzeugt, was bei anderen inzeiligen Elementen nicht der Fall ist. Spezifische Attribute hat br nicht. Die allgemeinen Attribute id, class, title und xml:space können aber verwendet werden.
Beispiel:
<p>
Adresse des Vertreters unserer Produkte auf der Erde im Sonnensystem:<br />
Dr. mult. Hotte Hööse<br />
Im günen Hain am dunklen Bache 13c<br />
30001 Hangover<br />
Deutschland<br />
Europa<br />
Erde<br />
Sonnensystem<br />
Nebenspiralarm 1a<br />
Milchstraße
</p>
Blockseparator, hr[Bearbeiten]
Es kann vorkommen, dass zwischen zwei Absätzen, allgemeiner Blockelementen ein Separator eingefügt werden soll, der inhaltlich relevant ist. Dies kann zum Beispiel passieren, wenn ohne Überschriften (die in einem anderen Kapitel dieses Buches erklärt werden) mehrere Themen auf einer Seite behandelt werden, wobei jedes aber mehr als einen Absatz haben kann. Um nun die verschiedenen Bereiche voneinander zu trennen, kann das Blockelement hr verwendet werden. Dies ist ein leeres Blockelement und hat keine spezifischen Attribute, die allgemeinen können allerdings verwendet werden.
Beispiel:
<h1>Kleinanzeigen - Vermischtes, Stadtteil Zoo</h1>
<p>(Zur Kontaktaufnahme wird die angegebene email-Adresse
wie in den <abbr>AGB</abbr> beschrieben vervollständigt.)
</p>
<hr/>
<p>
Unser Rauhaardackel Waldi,
trägt ein Halsband mit Namen und ist sehr zutraulich,
ist letztes Wochenende spurlos verschwunden.
</p>
<p>
Wer ihn gefunden oder gesehen hat, melde sich bitte,
seine Lieben machen sich sehr große Sorgen.<br />
Kontakt waldi@
</p>
<hr/>
<p>
Kostenlos weiße Mäuse, Ratten und Hamster in gute Hände abzugeben.
</p>
<p>
Die Tiere sind auch als Futtertiere für entsprechende
Reptilien geeignet.<br />
Kontakt tierpfleger@
</p>
<hr/>
<p>
Unsere Katze Maunzi ist am Sonntag entlaufen.
Trotz intensiver Suche hat sich bislang keine Spur
gefunden. Maunzi ist ein kastrierter, gut genährter
Kater, weitgehend schwarzes Fell, weißer Fleck um
rechtes Auge und linke Vorderpfote.
</p>
<p>
Seit Maunzi verschwunden ist, weint unsere kleine
Tochter Sybille-Antoinette nur noch. Wir sind
verzweifelt. Wir sind dankbar für jeden Hinweis.
Im Erfolgsfalle bieten wir auch eine angemessene
Belohnung.<br />
Kontakt maunzi@
</p>
<hr/>
<p>
Männlicher, erfahrener Tierpfleger sucht neue Anstellung.
Gerne wieder mit Tieren. Auch eine Stellung im SM-Bereich,
gegebenenfalls auch mit Tieren wäre spannend, ebenfalls Erfahrung
vorhanden.<br />
Kontakt tierpfleger@
</p>
<hr/>
<p>
Freitag abends noch vor der Fütterung ist aufgrund
einer Unachtsamkeit eines Pflegers eine ausgewachsene
Große Anakonda (Eunectes murinus) entwischt.
Trotz intensiver Suche ist das Tier bislang
spurlos verschwunden.
</p>
<p>
Sollten Sie das Tier entdecken, bitte festsetzen,
nicht streicheln oder füttern und sofort Kontakt aufnehmen:<br />
zoo-management@
</p>
<hr/>
Kontaktadresse, Element address[Bearbeiten]
Mittels address kann ein Autor seine eigenen Kontaktdaten angeben. In Deutschland etwa wie in zahlreichen anderen Ländern gibt es gesetzliche Verpflichtungen zur Anbieterkennzeichnung. Innerhalb des Blockelementes address sind also nicht beliebige Adressen zu notieren, sondern nur jene der Ansprechperson für die komplette Seite oder auch für ein größeres Projekt. Wie beim Element p ist der Inhalt normaler Text oder inzeilige Elemente. Bei der Adressangabe bietet es sich natürlich an, das Element br für die Zeilenumbrüche zu verwenden. Spezifische Attribute hat address nicht, die allgemeinen sind allerdings verwendbar. Beispiel:
<h1>Verantwortlicher für diese internet-Seite:</h1>
<address>
Dr. mult. Hotte Hööse<br />
Im günen Hain am dunklen Bache 13c<br />
30001 Hangover<br />
Deutschland<br />
Europa<br />
Erde<br />
Sonnensystem<br />
Nebenspiralarm 1a<br />
Milchstraße<br />
Email: hotte@example.org<br />
Phon: 49 (0)511 ....<br />
Fax: 49 (0)511 ...
</address>
Allgemeines Blockelement div[Bearbeiten]
Das Element div (englisch: division; deutsch: Bereich) ist ein generisches Element ohne semantische Bedeutung und gehört zur Klasse der Blockelemente, die in einer neuen Zeile beginnen.
Während p dazu dient, einen Absatz zu kennzeichnen und zu umschließen, kann div nahezu beliebige Inhalte umschließen. Während p selbst keine Blockelemente wie p oder div enthalten kann, sondern nur inzeilige Elemente, kann div einfachen Text und inzeilige Element oder Blockelemente enthalten. Im Sinne einer guten Dokumentstruktur sollte man sich allerdings bei jedem Element div entscheiden, ob alle Kindelemente nur Blockelemente sind oder ob nur Text und inzeilige Elemente darin notiert werden.
Weil div keine eigene inhaltliche Bedeutung hat, wird es insbesondere verwendet, wenn es kein passendes Element mit der gewünschten Bedeutung in XHTML gibt oder die Strukturierung zum Beispiel dekorativen Zwecken dient (CSS), also inhaltlich nicht relevant ist. Oft wird beim div das allgemein verwendetbare Attribut class notiert mit einem Wert, welcher die inhaltliche Bedeutung oder Funktion des div widerspiegelt. Das ist eine bewährte Kompensation des semantischen Defizits von XHTML. Wird XHTML+RDFa verwendet, so gibt es spezielle Attribute, um die semantische Bedeutung präzise festzulegen.
div hat selbst keine für dieses Element spezifischen Attribute, die allgemein verwendbaren können natürlich notiert werden.
Beispiel, Strukturierung einer Seite eines größeren Projektes:
<body>
<div class="Kopfbereich">
...
</div>
<div class="Hauptbereich">
...
</div>
<div class="Fussbereich">
...
</div>
<div class="Werbung">
...
</div>
<div class="Menu">
...
</div>
</body>
Die '...' repräsentieren hier natürlich nur den eigentlichen Inhalt der Bereiche, das werden zumeist weitere Blockelemente wie Überschriften und Absätze sein oder im Falle des Menüs auch eine Liste.
Formatierter Text, Element pre[Bearbeiten]
Mit Hilfe des Blockelementes pre (englisch: preformatted; deutsch: vorformatiert) ist es möglich, den Inhalt im Darstellungsprogramm so anzeigen zu lassen, wie man es im Editor eingetippt hat. Das ist insbesondere relevant, wenn bei speziellen Gedichtformen oder Quelltexten von Programmiersprachen oder Auszeichnungssprachen etc Leerzeichen, Zeilenumbrüche etc relevant für das Verständnis sind. Für normalen Fließtext ist dies Element weder gedacht noch geeignet.
pre hat selbst keine für dieses Element spezifischen Attribute, die allgemein verwendbaren können natürlich notiert werden. Der Inhalt ist einfacher Text oder inzeilige Elemente.
Beispiel Quelltext notieren:
<p>Die Einrückung von Quelltext verbessert die Lesbarkeit.
Man vergleiche folgende Fortran-Programmfragmente:</p>
<pre>
open (2,file='106v240.out')
i=0
700 continue
i=i+1
read(2,*,END=710) d1(i),d2(i),d3(i)
go to 700
710 continue
close(2)
modus='new'
do i=1,ia
open (1, Status=modus, file=da(i))
is=(i-1)*88
do j=1,88
k=j+is
write(1,*) d1(k),d2(k),d3(k)
enddo
close(1)
enddo
</pre>
<div>mit</div>
<pre>
open (2,file='106v240.out')
i=0
700 continue
i=i+1
read(2,*,END=710) d1(i),d2(i),d3(i)
go to 700
710 continue
close(2)
modus='new'
do i=1,ia
open (1, Status=modus, file=da(i))
is=(i-1)*88
do j=1,88
k=j+is
write(1,*) d1(k),d2(k),d3(k)
enddo
close(1)
enddo
</pre>
Wie man hier bereits erkennen kann, ist das zwischen den beiden Beispielen stehende 'mit' bereits ein strukturelles Problem für XHTML. Es ist kein eigener Gedankengang, gehört aber zum allgemeien Textablauf. Da pre wiederum ein Blockelement ist, kann es nicht in einem Gedankengang stehen, welcher mittels p markiert ist. Das 'mit' gehört auch nicht zu den Programmquelltexten, daher ist pre auch nicht angemessen. Was bleibt ist die Improvisation mit div. Wenn man die Struktur des Dokumentes verbessern möchte, würde man vermutlich etwas umformulieren:
<p>Die Einrückung von Quelltext verbessert die Lesbarkeit.
Man vergleiche die Fortran-Programmfragmente
<a href="#F1">F1</a> und <a href="#F2">F2</a>.
</p>
<p>
...
</p>
<div id="F1" class="Quelltext">
<h2>Fortran-Programmfragment F1</h2>
<pre>
open (2,file='106v240.out')
i=0
700 continue
i=i+1
read(2,*,END=710) d1(i),d2(i),d3(i)
go to 700
710 continue
close(2)
modus='new'
do i=1,ia
open (1, Status=modus, file=da(i))
is=(i-1)*88
do j=1,88
k=j+is
write(1,*) d1(k),d2(k),d3(k)
enddo
close(1)
enddo
</pre>
</div>
<div id="F2" class="Quelltext">
<h2>Fortran-Programmfragment F2</h2>
<pre>
open (2,file='106v240.out')
i=0
700 continue
i=i+1
read(2,*,END=710) d1(i),d2(i),d3(i)
go to 700
710 continue
close(2)
modus='new'
do i=1,ia
open (1, Status=modus, file=da(i))
is=(i-1)*88
do j=1,88
k=j+is
write(1,*) d1(k),d2(k),d3(k)
enddo
close(1)
enddo
</pre>
</div>
Mit der Methode können die Programmfragmente auch getrennt vom laufenden Text oder in einem Anhang notiert werden und stören so nicht notwendig den normalen Textfluß. Durch Verwendung eines Fragmentidentifizierers können die Quelltexte auch referenziert werden, durch Verwendung von class kann zudem eine allgemeine Strukturinformation gegeben werden, welche dann auch helfen kann, solche Inhalte in einem weiteren Schritt per CSS hervorzuheben oder aus dem normalen Textfluß herauszunehmen.
Zumindest beim klassischen Fortran, welches bei Bedarf noch auf Lochkarten notiert werden kann, ist auch die Anzahl der Leerzeichen vorne signifikant, weswegen die nicht einfach vor der Darstellung zusammengeschnurrt werden dürfen. Auch die maximale Zahl der Zeichen pro Zeile ist wegen der Lochkarten-Historie beschränkt, von daher sind auch die Zeilenumbrüche signifikant.
Ein anderes Beispiel für die Signifikanz von Leerzeichen ist Python, wo die Blockbegrenzung gezielt von der Einrückung abhängig gemacht wurde, um die Lesbarkeit des Quelltextes zu gewährleisten.
Aufgabe 5[Bearbeiten]
- Erstellen Sie eine neue Seite. Nennen Sie sie "aufgabe_2".
- Erstellen Sie das Grundgerüst der Seite.
- Die Seite soll den Titel "Absätze, Zeilenumbrüche, formatierter Text" bekommen.
- Fügen Sie folgenden Satz in das Dokument ein: "Wikipedia ist ein am 15. Januar 2001 gegründetes freies Online-Lexikon in zahlreichen Sprachen."
- Erzeugen Sie am Ende des Satzes einen Zeilenumbruch.
- Fügen Sie anschließend folgenden Satz ein: "Der Name Wikipedia ist ein Kofferwort, das sich aus „Wiki“ (hawaiisch für „schnell“) und „Encyclopedia“ (dem englischen Wort für Enzyklopädie) zusammensetzt."
- Erzeugen Sie einen Absatz. Darin schreiben Sie: "Die englischsprachige Wikipedia ist mit weit über drei Millionen Artikeln die größte Sprachversion, gefolgt von der deutschsprachigen Wikipedia mit über einer Million Artikel."
- Benutzen Sie jetzt das Element address, um die Adresse von Wikimedia Foundation Inc. einzufügen. Benutzen Sie dabei Zeilenumbrüche: Wikimedia Foundation Inc., 149 New Montgomery Street-3rd Floor, San Francisco, CA 94105, United States of America
- Zum Schluss fügen Sie mit Hilfe des Elementes pre den unten dargestellten Quelltext ein. Achten Sie dabei auf ordentliches Einrücken der einzelnen Elemente.
public class HalloWelt
{
public static void main(String[] args)
{
System.out.println("Hallo Welt!");
}
}
