Weitere Textbereiche

Du hast bis jetzt die Bereiche "Dokumentkörper" (<body>), "Überschrift" (<h[1-6]>) und "Absatz" (<p>) kennen gelernt. Es fehlen noch die Bereiche "Adresse" (<address>), "Textblock" (<blockquote>), "präformatierter Text" (<pre>), "Bereich" (<div>), "Tabelle" (<table>), "Tabellenzeile" (<tr>), "Kopfzelle" (<th>), "Tabellenzelle" (<td>) und "zentrierter Bereich" (<center>) und noch einige andere.

Zentrierter Bereich (<center>)

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
Hier steht beliebiger Text. Hier steht beliebiger Text. Hier steht beliebiger Text. Hier steht beliebiger Text. Hier steht beliebiger Text. Hier <center>steht beliebiger Text.</center> Hier steht beliebiger Text. Hier steht beliebiger Text. Hier steht beliebiger Text. Hier steht beliebiger Text. Hier steht beliebiger Text. Hier steht beliebiger Text. Hier steht beliebiger Text. Hier steht beliebiger Text. Hier steht beliebiger Text. Hier steht beliebiger Text.
</body>
</html>

Die einfachste Art davon ist "zentrierter Bereich".

Das Beispiel zeigt schon, was das <center>Tag bewirkt. Zwischen <center> und </center> ist alles zentriert ausgerichtet. Das <center>Tag darf Universalattribute enthalten.

Beim Arbeiten mit verschiedenen Bereichen (Absatz, Überschrift, Tabelle, zentrierter Bereich) musst du beachten: Verschiedene Bereiche dürfen ineinander verschachtelt sein, sie dürfen aber nicht überlappen! Das heißt: Du kannst mehrere Absätze in einen zentrierten Bereich machen. Du kannst auch mehrere zentrierte Bereiche in einen Absatz machen. Du kannst aber nicht einen Absatz in einem zentrierten Bereich beginnen und erst außerhalb des Bereiches beenden. Du kannst z.B. auch eine Tabelle innerhalb einer Tabelle darstellen. Du kannst Tabellen bauen, bei der jede Zelle eine oder mehrere weitere Tabelle enthält. Deren Zellen können dann weiter Tabellen enthalten... Du kannst aber nicht in einer Tabellenzelle eine Tabelle anfangen, und in der nächsten Zelle beenden.


Adresse (<address>)

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
Hier steht beliebiger Text. Hier steht beliebiger Text. Hier steht beliebiger Text. Hier <address>steht beliebiger Text.</address> Hier steht beliebiger Text. Hier steht beliebiger Text.
</body>
</html>

Der Bereich "Adresse" wird recht selten verwendet.

Das <address>Tag ist vor allem für Emailadressen und andere Adressen gedacht. Die Darstellungsweise ist in den verschiedenen Browsern unterschiedlich. In jedem Fall wird aber ein eigener Absatz für die Adresse erzeugt. Auch das <address>Tag darf Universalattribute enthalten. Beachte, dass das englische Wort "address" mit 2 "d" geschrieben wird.


Präformatierter Bereich (<pre>)

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
abcde      f
abcd      ef
abc      def
ab      cdef
a      bcdef
<pre>
abcde      f
abcd      ef
abc      def
ab      cdef
a      bcdef
</pre>
</body>
</html>

Text in präformatierten Bereichen wird oft auch diktengleicher Text genannt. Die Bezeichnung "präformatiert" trifft die Sache aber besser, weil solche Bereiche auch z.B. Bilder enthalten können. Das <pre>Tag bewirkt, dass die Formatierung aus dem Quelltext übernommen wird. Das bedeutet, dass Zeilenumbrüche und Abstände so gemacht werden, wie sie im Quelltext sind. Das ist z.B. sinnvoll, wenn man Quelltexte oder Programmcode zeigen möchte.

Das Beispiel zeigt eigentlich schon, wie das <pre>Tag wirkt. Es wird ein Absatz mit diktengleicher Schrift erzeugt. Normalerweise wird die Schrift im präformatierten Bereich etwas kleiner dargestellt als der Standard. Außerdem wird eine andere Schriftart verwendet. Achtung! NN4 interpretiert, abweichend von der Norm, das </pre>Tag nicht! Bei NN4 wird alles bis zum nächsten Bereich (<p>, <table> <h1...6>, <center> usw.) präformatiert dargestellt! Beachte auch, dass innerhalb von <pre>Bereichen die üblichen Regeln für Sonderzeichen und HTML-eigene Zeichen gelten. HTML-Tags werden als solche interpretiert! Dadurch ist es z.B. möglich Bilder in solche Bereiche einzufügen. Auch das <pre>Tag kann Universalattribute enthalten.


Textblock (<blockquote>)

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
Hier steht beliebiger Text. Hier steht beliebiger Text. Hier steht beliebiger Text. Hier <blockquote>steht beliebiger Text. Hier steht beliebiger Text.</blockquote> Hiersteht beliebiger Text. Hier steht beliebiger Text.
</body>
</html>

<blockquote> erzeugt einen eigenen Absatz mit einer besonderen Auszeichnung. Das <blockquote>Tag ist für Zitate gedacht.

Der Text im <blockquote>Bereich ist meistens eingerückt und oft in einer anderen Schriftart. Das hängt aber vom Browser des Betrachters ab. Das <blockquote>Tag ist jedenfalls nicht gedacht und auch nicht geeignet um Einrückungen zu erzeugen. Das sollte man mit dem Universalattribut style="margin-left" machen. Das <blockquote>Tag kann auch Universalattribute enthalten.


Bereich (<div>)

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>
Hier steht beliebiger Text.
<div align=center> Hier steht beliebiger Text.
<p>Hier steht beliebiger Text. Hier steht beliebiger Text.</p><p> <font face="Arial" color="red">Hier steht beliebiger Text. Hier steht beliebiger Text.</font> Hier steht beliebiger Text. <img src="1smile.gif"></p>
<p>Hier steht beliebiger Text. Hier steht beliebiger Text.</p></div>
</body>
</html>

<div> kommt von division (engl. - Bereich). Gemeint ist ein Bereich, der mehrere Elemente und Bereiche enthalten kann. Z.B. Tabellen, Absätze, Bilder, usw.. Auf den gesamten Bereich werden dann die Universalattribute angewendet, die im <div>Tag enthalten sind.

Im nächsten Kapitel geht es um Tabellen.


Um einen Link zu setzen, der direkt auf diese Seite führt, verwende folgende Url: