Diese Seiten sind Teil von Bachsau’s Archiv.
Die hier beschriebenen Praktiken entsprechen nicht mehr dem Stand der Technik!
Bitte nutzen Sie für aktuelle Projekte das fortlaufend aktualisierte SELFHTML-Wiki.

SELFHTML

Allgemeine Elemente für Textbereiche

Informationsseite

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

 nach unten 

HTML 3.2XHTML 1.0MS IE 3.0Netscape 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 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 nach unten CSS formatiert zu werden.

Beispiel:

Beispiel-Seite 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>

Erläuterung:

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

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 Stylesheets arbeiten.

Konqueror und Safari zentrieren bzw. positionieren im Beispiel zwar die Listeninhalte, nicht jedoch das davor stehende Bullet-Zeichen.

nach obennach unten

HTML 3.2XHTML 1.0deprecated (missbilligt)MS IE 3.0Netscape 3.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 Ä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:

Beispiel-Seite 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>&Auml;lteres Block-Element f&uuml;r zentrierte Bereiche</title>
</head>
<body>

<center>
<h1>Zentrierter Kunsttext</h1>
<pre>.:*A*:._.:*S*:._.:*C*:._.:*I*:._.:*I*:._.:*~*:._.:*A*:._.:*R*:._.:*T*:.</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 abschließenden Tag </center> beenden Sie die Zentrieranweisung.

Beachten Sie:

Konqueror zentriert im Beispiel zwar die Überschrift, aber nicht das pre-Element.

nach obennach unten

HTML 4.0XHTML 1.0MS IE 4.0Netscape 4.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 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 nach unten CSS formatiert zu werden.

Beispiel:

Beispiel-Seite 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>

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.

nach obennach unten

HTML 4.0XHTML 1.0MS IE 3.0Netscape 4.0Opera 5.12Mozilla Firefox 1Konqueror 3.1Safari 1.0 Allgemeine Elemente formatieren mit CSS

Allgemeine Elemente für Textbereiche erwachen durch Formatierung erst zum Leben. Mit Kapitel Stylesheets können Sie solche Elemente jedoch nach Wunsch formatieren. Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man Kapitel 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:

Seite Schriftformatierung
Seite Ausrichtung und Absatzkontrolle
Seite Außenrand und Abstand
Seite Innenabstand
Seite Rahmen
Seite Hintergrundfarben und -bilder
Seite Positionierung und Anzeige von Elementen

Beispiel:

Beispiel-Seite 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>

Erläuterung:

Das Beispiel bewirkt eine ähnliche Ausgabe wie das im Abschnitt nach oben 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.

nach obennach unten

Weitere Informationen

In der Kapitel 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:
Seite Element-Referenz für allgemeines Block-Element (<div>...</div>)
Seite Attribut-Referenz für allgemeines Block-Element (<div>...</div>)
Seite Element-Referenz für allgemeines zentriertes Block-Element (<center>...</center>)
Seite Attribut-Referenz für allgemeines zentriertes Block-Element (<center>...</center>)
Seite Element-Referenz für allgemeines Inline-Element (<span>...</span>)
Seite Attribut-Referenz für allgemeines Inline-Element (<span>...</span>)

 nach oben
weiter Seite Trennlinien
zurück Seite Physische Auszeichnungen im Text
 

© 2007 Seite Impressum

Originaladresse dieses Dokuments: http://de.selfhtml.org/html/text/bereiche.htm