Allgemeines Block-ElementSie 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.
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>Allgemeines Block-Element</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>
Mit <div> leiten Sie ein allgemeines Block-Element 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).
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 Stylesheets arbeiten.
Konqueror zentriert bzw. positioniert im Beispiel zwar die Listeninhalte, nicht jedoch das davor stehende Bullet-Zeichen.
Älteres Block-Element für zentrierte BereicheSie 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.
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>Älteres Block-Element für zentrierte Bereiche</title>
</head>
<body>
<center>
<h1>Zentrierter Kunsttext</h1>
<pre>.:*A*:._.:*S*:._.:*C*:._.:*I*:._.:*I*:._.:*~*:._.:*A*:._.:*R*:._.:*T*:.</pre>
</center>
</body>
</html>
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 abschließenden Tag </center> beenden Sie die Zentrieranweisung.
Konqueror zentriert im Beispiel zwar die Überschrift, aber nicht das pre-Element.
Allgemeines Inline-ElementAnalog 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.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Allgemeines Inline-Element</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>
<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.
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 CSSAllgemeine Elemente für Textbereiche erwachen durch Formatierung erst zum Leben. Mit 
Stylesheets können Sie solche Elemente jedoch nach Wunsch formatieren. Bei Verwendung von 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
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Allgemeine Elemente formatieren mit CSS</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>
Das Beispiel bewirkt eine ähnliche Ausgabe wie das im Abschnitt Allgemeines Block-Element, diesmal jedoch mit 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.
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 Auszeichnungen im Text
|
 SELFHTML/Navigationshilfen HTML/XHTML Elemente zur Textstrukturierung |
|
© 2005 Impressum