1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Allgemeine Elemente für Textbereiche</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Welche HTML-Elemente es gibt, die selber keine oder fast keine Wirkung haben und die dazu dienen Behälter für andere Elemente zu sein und mit CSS formatiert zu werden.">
<meta name="keywords" content="SELFHTML, HTML, Behälter-Elemente, Container-Elemente, Inline-Elemente, Block-Elemente, Textbereiche, <div>, <center>, <span>">
<meta name="author" content="Stefan Münz, selfhtml@teamone.de">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="DC.Publisher" content="selfhtml@teamone.de">
<meta name="DC.Date" content="2001-10-27T08:00+01:00">
<meta name="DC.Identifier" content="http://selfhtml.teamone.de/html/text/behaelter.htm">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="../../editorial/copyright.htm">
<meta name="DC.Date.Create" content="2001-10-27T08:00+01:00">
<meta name="SELF.Version" content="1">
<meta name="SELF.Pagetype" content="Information">
<meta name="SELF.Path" content="SELFHTML == ../../index.htm // HTML/XHTML == ../index.htm // Elemente zur Textgestaltung == index.htm">
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#AA5522" vlink="#772200" alink="#000000">
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td bgcolor="#FFEEDD" class="nav"><a class="an" name="top"><img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"></a> <a href="../../index.htm"><b>SELFHTML</b></a>/<a href="../../navigation/index.htm" target="_parent">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="../index.htm"><b>HTML/XHTML</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>Elemente zur Textstrukturierung</b></a></td>
</tr>
</table><table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td bgcolor="#EEEEEE" class="doc" width="110"><img src="../../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></td>
<td bgcolor="#EEEEEE" class="doc" valign="bottom" width="100%"><h2>Allgemeine Elemente für Textbereiche</h2>
<tr>
<td bgcolor="#EEEEEE" class="doc" valign="top" align="center">
<img src="../../src/dokx.gif" width="30" height="20" vspace="6" border="0" alt="Informationsseite">
</td>
<td bgcolor="#FFFFFF" valign="top" nowrap>
<p>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#block"><b>Allgemeines Block-Element</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#block_zentriert"><b>Älteres Block-Element für zentrierte Bereiche</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#inline"><b>Allgemeines Inline-Element</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#formatieren"><b>Allgemeine Elemente formatieren mit CSS</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#weitere_infos"><b>Weitere Informationen</b></a><br>
</p>
</td>
</tr><tr><td colspan="2" bgcolor="#EEEEEE" class="doc"> <a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </td></tr>
</table>
<h2 class="Sh2"><img src="../../src/html32.gif" width="30" height="30" border="0" alt="HTML 3.2"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/msie3.gif" width="30" height="30" border="0" alt="MSIE 3.0"><img src="../../src/netsc3.gif" width="30" height="30" border="0" alt="Netscape 3.0"> <a class="an" name="block">Allgemeines Block-Element</a></h2>
<p>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 <img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#formatieren"><b>CSS formatiert</b></a> zu werden.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/div.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!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>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Mit <code><div></code> leiten Sie ein allgemeines Blockelement ein, in das Sie mehrere andere Block-Elemente einschließen können (<i>div = division = Bereich</i>). Alles, was zwischen diesem Tag und dem abschließenden <code></div></code> steht, wird als Teil des Bereichs interpretiert.</p>
<p>Einen solchen Bereich und alle seine enthaltenen Elemente können Sie mit dem Attribut <code>align=</code> im einleitenden <code><div></code>-Tag ausrichten. Mit <code>align="center"</code> richten Sie den Bereich mit allen seinen Elementen zentriert aus (<i>align = Ausrichtung, center = zentriert</i>), mit <code>align="right"</code> rechtsbündig (<i>right = rechts</i>). Mit <code>align="justify"</code> werden innere Elemente wie freistehender Text, Textabsätze oder Überschriften als Blocksatz ausgerichtet. Mit <code>align="left"</code> erzwingen Sie die linksbündige Ausrichtung von Elementen (Voreinstellung).</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Das <code>div</code>-Element wird weiterhin zum HTML-Standard gehören. Das Attribut <code>align=</code> ist jedoch als <i>deprecated</i> eingestuft und soll künftig entfallen. Statt dessen sollten Sie mit CSS Stylesheets arbeiten.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> 
</td></tr></table>
<h2 class="Sh2"><img src="../../src/html32.gif" width="30" height="30" border="0" alt="HTML 3.2"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/msie3.gif" width="30" height="30" border="0" alt="MSIE 3.0"><img src="../../src/netsc3.gif" width="30" height="30" border="0" alt="Netscape 3.0"> <a class="an" name="block_zentriert">Älteres Block-Element für zentrierte Bereiche</a></h2>
<p>Sie können mehrere Absätze, bestehend aus ganz verschiedenen Elementen wie Text, Grafiken, Tabellen usw. gemeinsam zentriert ausrichten. Dieses Element ist jedoch als <i>deprecated</i> 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.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/center.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!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>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Mit <code><center></code> leiten Sie einen Bereich ein, in dem alles, was folgt, zentriert ausgerichtet wird (<i>center = zentriert</i>). Das können z.B. Überschriften, Text, Grafiken oder Tabellen sein. Mit dem abschießenden Tag <code></center></code> beenden Sie die Zentrieranweisung.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> 
</td></tr></table>
<h2 class="Sh2"><img src="../../src/html40.gif" width="30" height="30" border="0" alt="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/msie4.gif" width="30" height="30" border="0" alt="MSIE 4.0"><img src="../../src/netsc4.gif" width="30" height="30" border="0" alt="Netscape 4.0"> <a class="an" name="inline">Allgemeines Inline-Element</a></h2>
<p>Analog zum <code>div</code>-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 <img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#formatieren"><b>CSS formatiert</b></a> zu werden.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/span.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!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>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p><code><span></code> leitet einen allgemeinen Inline-Bereich ein. <code></span></code> 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 <code>span</code>-Element eingeschlossen, und bei jedem <code>span</code>-Element wird mit Hilfe von CSS eine andere Schriftfarbe zugewiesen.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>In der "Strict"-Variante dürfen Inline-Elemente nur innerhalb von Block-Elementen notiert werden. Im obigen Beispiel ist das der Fall, da die <code>span</code>-Elemente innerhalb eines Überschriftenelements vorkommen.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> 
</td></tr></table>
<h2 class="Sh2"><img src="../../src/html40.gif" width="30" height="30" border="0" alt="HTML 4.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/msie3.gif" width="30" height="30" border="0" alt="MSIE 3.0"><img src="../../src/netsc4.gif" width="30" height="30" border="0" alt="Netscape 4.0"> <a class="an" name="formatieren">Allgemeine Elemente formatieren mit CSS</a></h2>
<p>Allgemeine Elemente für Textbereiche erwachen durch Formatierung erst zum Leben. Mit <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../../css/index.htm"><b>CSS Stylesheets</b></a> können Sie solche Elemente jedoch nach Wunsch formatieren. Bei Verwendung von CSS Stylesheets müssen Sie zunächst wissen, wie man <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../../css/formate/index.htm"><b>CSS-Formate definieren</b></a> kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang z.B. folgende CSS-Eigenschaften:<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/schrift.htm"><b>Schriftformatierung</b></a><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/ausrichtung.htm"><b>Ausrichtung und Absatzkontrolle</b></a><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/randabstand.htm"><b>Außenrand und Abstand</b></a><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/innenabstand.htm"><b>Innenabstand</b></a><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/rahmen.htm"><b>Rahmen</b></a><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/hintergrund.htm"><b>Hintergrundfarben und -bilder</b></a><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/positionierung.htm"><b>Positionierung und Anzeige von Elementen</b></a></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/div_span_style.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a></p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<!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>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Das Beispiel bewirkt eine ähnliche Ausgabe wie das im Abschnitt <img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"> <a href="#block"><b>Allgemeines Block-Element</b></a>, diesmal jedoch mit CSS Stylesheets formatiert und damit auch geeignet für die HTML-Variante "Strict". Beide <code>div</code>-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 <code>span</code> ausgezeichnet und erhält jeweils eine fette Schrift und eine Schriftfarbe zugewiesen.</p>
<table bgcolor="#EEEEEE" class="doc" width="100%"><tr><td>
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> 
</td></tr></table>
<h2 class="Sh2"><a class="an" name="weitere_infos">Weitere Informationen</a></h2>
<p>In der <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../referenz/index.htm"><b>HTML-Referenz</b></a> 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:<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#div"><b>Element-Referenz</b></a> für allgemeines Block-Element (<code><div>...</div></code>)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#div"><b>Attribut-Referenz</b></a> für allgemeines Block-Element (<code><div>...</div></code>)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#center"><b>Element-Referenz</b></a> für allgemeines zentriertes Block-Element (<code><center>...</center></code>)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#center"><b>Attribut-Referenz</b></a> für allgemeines zentriertes Block-Element (<code><center>...</center></code>)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#span"><b>Element-Referenz</b></a> für allgemeines Inline-Element (<code><span>...</span></code>)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#span"><b>Attribut-Referenz</b></a> für allgemeines Inline-Element (<code><span>...</span></code>)</p>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc">
 <a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td bgcolor="#EEEEEE" class="doc" align="right"><a href="trennlinien.htm"><img src="../../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td bgcolor="#FFFFFF"><img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="trennlinien.htm"><b>Trennlinien</b></a>
</td></tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" align="right"><a href="physisch.htm"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurück"></a></td>
<td bgcolor="#FFFFFF" width="100%"><img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="physisch.htm"><b>Physische Textauszeichnung</b></a>
</td>
</tr>
<tr><td colspan="2" bgcolor="#EEEEEE" class="doc"> </td></tr>
</table><table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td bgcolor="#FFEEDD" class="nav"><a class="an" name="bottom"><img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"></a> <a href="../../index.htm"><b>SELFHTML</b></a>/<a href="../../navigation/index.htm" target="_parent">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="../index.htm"><b>HTML/XHTML</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>Elemente zur Textstrukturierung</b></a></td>
</tr>
</table>
<p>© 2001 <img src="../../src/mail.gif" width="15" height="10" border="0" alt="E-Mail"> <a href="mailto:selfhtml@teamone.de">selfhtml@teamone.de</a></p>
</body>
</html>
|
