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.
<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.
<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.
<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.
<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.
<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: