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
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Textabsätze</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Wie Sie Textabsätze in HTML definieren, und welche weiteren Möglichkeiten zur Formatierung von Textabsätzen bestehen.">
<meta name="keywords" content="SELFHTML, HTML, Absatz, Absatzkontrolle, Absatzschaltungen, Textabsätze, Textabsatz, Textparagraph, <p>, align=">
<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/absaetze.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>Textabsätze</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="#definieren"><b>Textabsätze definieren</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#ausrichten"><b>Textabsätze ausrichten</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#formatieren"><b>Textabsätze 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/html20.gif" width="30" height="30" border="0" alt="HTML 2.0"><img src="../../src/xhtml10.gif" width="30" height="30" border="0" alt="XHTML 1.0"><img src="../../src/msie1.gif" width="30" height="30" border="0" alt="MSIE 1.0"><img src="../../src/netsc1.gif" width="30" height="30" border="0" alt="Netscape 1.0"> <a class="an" name="definieren">Textabsätze definieren</a></h2>
<p>Absätze dienen der optischen Gliederung eines Textes. Beim Erstellen von HTML-Dateien genügt es nicht, im Editor einen harten Umbruch einzufügen. WWW-Browser ignorieren solche Umbrüche (siehe auch <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../allgemein/editieren.htm"><b>Regeln beim Editieren von HTML</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/p.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>Textabs&auml;tze definieren</h1>
<p>Hier beginnt ein Absatz, und hier ist er zu Ende.</p>
<p>Hier beginnt ein neuer Absatz, und hier ist er zu Ende.</p>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p><code><p></code> (<i>p = paragraph = Absatz</i>) leitet einen Textabsatz ein. <code></p></code> beendet den Textabsatz und steht am Ende des Absatztextes.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Alleinstehende <code><p></code>-Tags, wie sie früher mal zulässig waren, sind mittlerweile nicht mehr HTML-gerecht. Notieren Sie Textabsätze immer mit einleitendem und abschließendem Tag.</p>
<p>Das <code><p></code>-Element darf keine anderen blockerzeugenden Elemente wie z.B. Überschriften, Textabsätze, Listen, Zitate oder Adressen enthalten.</p>
<p>Beim Absatztext gelten die Aussagen zu <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../allgemein/zeichen.htm"><b>Zeichenvorrat, Sonderzeichen und HTML-eigene Zeichen</b></a>.</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/deprecated.gif" width="30" height="30" border="0" alt="deprecated"><img src="../../src/msie1.gif" width="30" height="30" border="0" alt="MSIE 1.0"><img src="../../src/netsc1.gif" width="30" height="30" border="0" alt="Netscape 1.0"> <a class="an" name="ausrichten">Textabsätze ausrichten</a></h2>
<p>Textabsätze werden linksbündig ausgerichtet, wenn Sie
nichts anderes angeben. Sie können einen Textabsatz auch
zentriert oder rechtsbündig ausrichten. Auch Blocksatz ist möglich.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/p_align.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>
<h1>Textabs&auml;tze ausrichten</h1>
<p align="center">Dies ist ein zentrierter Absatz.</p>
<p align="right">Dies ist ein Absatz, der rechts ausgerichtet ist.</p>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Durch die Angabe <code>align="center"</code> im
einleitenden <code><p></code>-Tag erreichen Sie, dass der Textabsatz zentriert ausgerichtet wird (<i>align = Ausrichtung, center = zentriert</i>). Mit <code>align="right"</code>
wird der Absatz rechtsbündig ausgerichtet (<i>right = rechts</i>). Mit <code>align="justify"</code> erzwingen Sie den Blocksatz für den Absatz (<i>justify = justieren</i>). Mit <code>align="left"</code> können Sie die Normaleinstellung (linksbündige Ausrichtung) angeben.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Nicht alle Browser beherrschen den Blocksatz.</p>
<p><code>align</code> ist im HTML-4-Standard als <i>deprecated</i> (missbilligt) eingestuft. Stattdessen wird empfohlen, CSS Stylesheets zu benutzen, z.B.: <code><p style="text-align:center">...</p></code>. Weitere Hinweise siehe folgender Abschnitt.</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">Textabsätze formatieren mit CSS</a></h2>
<p>Wie der Text eines Absatzes genau dargestellt wird, darauf haben Sie mit HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen, um den Text darzustellen. 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 Ihre Textabsätze 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 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></p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/p_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>
<h1>Textabs&auml;tze formatieren</h1>
<p style="font-family:Arial,sans-serif; font-size:18px; color:blue">Ein formatierter Absatz.</p>
<p style="background-color:yellow">Ein anderer formatierter Absatz.</p>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Im Beispiel sind zwei Absätze definiert. Für den ersten wird bestimmt, dass er in Schriftart Arial oder einer anderen serifenlosen Schrift dargestellt wird, 18 Pixel Schriftgröße hat und in blauer Farbe erscheint. Der zweite Absatz erhält eine gelbe Hintergrundfarbe.</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 Textabsätze 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#p"><b>Element-Referenz</b></a> für Textabsätze<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#p"><b>Attribut-Referenz</b></a> für Textabsätze</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="zeilenumbruch.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="zeilenumbruch.htm"><b>Zeilenumbruch</b></a>
</td></tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" align="right"><a href="ueberschriften.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="ueberschriften.htm"><b>Überschriften</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>
|
