SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Allgemeine Elemente für Textbereiche

	Allgemeine Elemente für Textbereiche
	Allgemeines Block-Element Älteres Block-Element für zentrierte Bereiche Allgemeines Inline-Element Allgemeine Elemente formatieren mit CSS Weitere Informationen

Allgemeines Block-Element

Sie können mehrere Elemente wie Text, Grafiken, Tabellen usw., in einen gemeinsamen Bereich einschließen. Dieses allgemeine Element bewirkt nichts weiter als dass es in einer neuen Zeile des Fließtextes beginnt. Ansonsten hat es keine Eigenschaften. Es ist dazu gedacht, um mit Hilfe von CSS formatiert zu werden.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>

<div align="center">
<h1>Alles zentriert</h1>
<ul>
<li>alles zentriert</li>
<li>alles?</li>
<li>alles!</li>
</ul>
</div>

<div align="right">
<h1>Alles rechts am Rand</h1>
<ul>
<li>alles rechts am Rand</li>
<li>alles?</li>
<li>alles!</li>
</ul>
</div>

</body>
</html>

Erläuterung:

Mit <div> leiten Sie ein allgemeines Blockelement ein, in das Sie mehrere andere Block-Elemente einschließen können (div = division = Bereich). Alles, was zwischen diesem Tag und dem abschließenden </div> steht, wird als Teil des Bereichs interpretiert.

Einen solchen Bereich und alle seine enthaltenen Elemente können Sie mit dem Attribut align= im einleitenden <div>-Tag ausrichten. Mit align="center" richten Sie den Bereich mit allen seinen Elementen zentriert aus (align = Ausrichtung, center = zentriert), mit align="right" rechtsbündig (right = rechts). Mit align="justify" werden innere Elemente wie freistehender Text, Textabsätze oder Überschriften als Blocksatz ausgerichtet. Mit align="left" erzwingen Sie die linksbündige Ausrichtung von Elementen (Voreinstellung).

Beachten Sie:

Das div-Element wird weiterhin zum HTML-Standard gehören. Das Attribut align= ist jedoch als deprecated eingestuft und soll künftig entfallen. Statt dessen sollten Sie mit CSS Stylesheets arbeiten.

Älteres Block-Element für zentrierte Bereiche

Sie können mehrere Absätze, bestehend aus ganz verschiedenen Elementen wie Text, Grafiken, Tabellen usw. gemeinsam zentriert ausrichten. Dieses Element ist jedoch als deprecated eingestuft. Es ist mittlerweile eigentlich überflüssig und sollte nur noch in begründeten Ausnahmefällen (z.B. Abwärtskompatibilität zu Netscape 1.1) benutzt werden.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>

<center>
<h1>Zentrierter Kunsttext</h1>
<pre>
<big>.:*A*:._.:*S*:._.:*C*:._.:*I*:._.:*I*:._.:*~*:._.:*A*:._.:*R*:._.:*T*:.</big>
</pre>
</center>

</body>
</html>

Erläuterung:

Mit <center> leiten Sie einen Bereich ein, in dem alles, was folgt, zentriert ausgerichtet wird (center = zentriert). Das können z.B. Überschriften, Text, Grafiken oder Tabellen sein. Mit dem abschießenden Tag </center> beenden Sie die Zentrieranweisung.

Allgemeines Inline-Element

Analog zum div-Element, das andere Block-Elemente enthalten kann, gibt es ein Element, das Text und andere Inline-Elemente enthalten kann, selbst aber keinerlei Eigenschaften hat und nichts bewirkt. Es ist dazu gedacht, um mit Hilfe von CSS formatiert zu werden.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>

<h1 style="font-size:500%">
<span style="color:blue">A</span>
<span style="color:red">B</span>
<span style="color:green">C</span>
</h1>

</body>
</html>

Erläuterung:

<span> leitet einen allgemeinen Inline-Bereich ein. </span> beendet diesen Bereich. Das Beispiel zeigt eine Überschrift 1. Ordnung, die selbst bereits mit CSS formatiert ist und dadurch auf 500% Schriftgröße gebracht wird. Innerhalb der Überschrift sind die drei Buchstaben ABC notiert. Jeder davon ist in ein span-Element eingeschlossen, und bei jedem span-Element wird mit Hilfe von CSS eine andere Schriftfarbe zugewiesen.

Beachten Sie:

In der "Strict"-Variante dürfen Inline-Elemente nur innerhalb von Block-Elementen notiert werden. Im obigen Beispiel ist das der Fall, da die span-Elemente innerhalb eines Überschriftenelements vorkommen.

Allgemeine Elemente formatieren mit CSS

Allgemeine Elemente für Textbereiche erwachen durch Formatierung erst zum Leben. Mit CSS Stylesheets können Sie solche Elemente jedoch nach Wunsch formatieren. Bei Verwendung von CSS Stylesheets müssen Sie zunächst wissen, wie man CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften:
Schriftformatierung
Ausrichtung und Absatzkontrolle
Außenrand und Abstand
Innenabstand
Rahmen
Hintergrundfarben und -bilder
Positionierung und Anzeige von Elementen

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>

<div style="text-align:center; padding:20px; border:thin solid red; margin:25px">
<h1>Alles zentriert</h1>
<ul>
<li>alles zentriert</li>
<li>alles?</li>
<li><span style="font-weight:bold; color:red">alles!</span></li>
</ul>
</div>

<div style="text-align:right; padding:20px; border:thin solid blue; margin:25px">
<h1>Alles rechts am Rand</h1>
<ul>
<li>alles rechts am Rand</li>
<li>alles?</li>
<li><span style="font-weight:bold; color:blue">alles!</span></li>
</ul>
</div>

</body>
</html>

Erläuterung:

Das Beispiel bewirkt eine ähnliche Ausgabe wie das im Abschnitt Allgemeines Block-Element, diesmal jedoch mit CSS Stylesheets formatiert und damit auch geeignet für die HTML-Variante "Strict". Beide div-Bereiche erhalten einen dünnen durchgezogenen Rahmen, der erste rot, der zweite blau. Ein Innenabstand von 20 Pixeln sorgt dafür, dass der Text nicht am Rahmen klebt, und ein Außenabstand von 25 Pixeln stellt sicher, dass links, rechts über und unter den Rahmen Platz entsteht. Der letzte Listenpunkt in beiden Aufzählungslisten wird jeweils mit dem leeren Inline-Element span ausgezeichnet und erhält jeweils eine fette Schrift und eine Schriftfarbe zugewiesen.

Weitere Informationen

In der HTML-Referenz finden Sie Angaben darüber, wo die hier beschriebenen Behälter-Elemente vorkommen dürfen, welche anderen Elemente sie enthalten dürfen, welche Attribute sie haben können und was bei den einzelnen Attributen zu beachten ist:
Element-Referenz für allgemeines Block-Element (<div>...</div>)
Attribut-Referenz für allgemeines Block-Element (<div>...</div>)
Element-Referenz für allgemeines zentriertes Block-Element (<center>...</center>)
Attribut-Referenz für allgemeines zentriertes Block-Element (<center>...</center>)
Element-Referenz für allgemeines Inline-Element (<span>...</span>)
Attribut-Referenz für allgemeines Inline-Element (<span>...</span>)


	Trennlinien
	Physische Textauszeichnung

SELFHTML/Navigationshilfen

HTML/XHTML

Elemente zur Textstrukturierung