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
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SELFHTML: HTML/XHTML / Elemente zur Textstrukturierung / Logische Auszeichnungen im Text</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Wie Sie in HTML Text mit Elementen auszeichnen, die vor allem logische Bedeutung haben.">
<meta name="keywords" content="SELFHTML, HTML, logische Textauszeichnung, Textauszeichnung, Inline-Elemente, <em>, <strong>, <code>, <samp>, <kbd>, <var>, <cite>, <dfn>, <acronym>, <abbr>, <q>, <ins>, <del>, <bdo>">
<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/logisch.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>Logische Auszeichnungen im Text</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="#allgemeines"><b>Allgemeines zur logischen Auszeichnung im Text</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#elemente"><b>HTML-Elemente für logische Auszeichnung im Text</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#aenderungsmarkierung"><b>Änderungsmarkierungen im Dokument</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#textrichtung"><b>Textrichtung ändern</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#formatieren"><b>Logische Elemente für Textauszeichnung 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"><a class="an" name="allgemeines">Allgemeines zur logischen Auszeichnung im Text</a></h2>
<p>In HTML gibt es logische und <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="physisch.htm"><b>physische</b></a> Elemente zur Auszeichnung von Text. Logische Textauszeichnungen haben Bedeutungen wie "betont" oder "emphatisch". Bei logischen Elementen entscheidet der Web-Browser, wie ein solcher Text hervorgehoben wird (z.B. fett, kursiv oder andersfarbig). In Verbindung mit CSS Stylesheets können Sie logische Textauszeichnungen allerdings nach Wunsch formatieren.</p>
<p>Im Unterschied zu Elementen wie Überschriften, Textabsätzen, Listen usw., die ja auch der logischen Strukturierung von Text dienen, sind die hier beschriebenen Elemente jedoch so genannte <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#inline_elemente"><b>Inline-Elemente</b></a>, während Überschriften, Textabsätze, Listen usw. als <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#block_elemente"><b>Block-Elemente</b></a> bezeichnet werden. Inline-Elemente erzeugen keinen Absatz (genauer: keine neue Zeile) im Textfluss.</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="elemente">HTML-Elemente für logische Auszeichnung im Text</a></h2>
<p>Es stehen verschiedene HTML-Elemente zur Verfügung, um Text logisch auszuzeichnen.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/logisch.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>Alles logisch</h1>
<p>Die Kreter sagen, da&szlig; <strong>alle Kreter l&uuml;gen</strong>.
Das stimmt aber nicht, weil alle Kreter l&uuml;gen.</p>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Inline-Elemente für Auszeichnungen im Text müssen - zumindest in der HTML-Variante "Strict" - innerhalb anderer Block-Elemente vorkommen. Im obigen Beispiel ist ein <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="absaetze.htm"><b>Textabsatz</b></a> notiert und innerhalb davon eine logische Textauszeichnung. Am Anfang des Textbereichs, der ausgezeichnet werden soll, wird ein einleitendes Tag (im Beispiel das Tag <code><strong></code>) eingefügt. Am Ende des gewünschten
Textbereichs wird ein entsprechendes Abschluss-Tag eingefügt (im Beispiel
<code></strong></code>).</p>
<p>Folgende Elemente dieser Art stehen zur Verfügung:</p>
<table cellpadding="0" cellspacing="0" border="0"
bgcolor="#C0C0C0"><tr><td>
<table cellpadding="3" cellspacing="1" border="0"
>
<tr>
<th bgcolor="#EEEEEE" class="doc" align="left">Element (Notation)</th>
<th bgcolor="#EEEEEE" class="doc" align="left">Status</th>
<th bgcolor="#EEEEEE" class="doc" align="left">Bedeutung</th>
</tr>
<tr>
<td class="code" bgcolor="#FFFFE0" valign="top" nowrap><code><em>...</em></code></td>
<td bgcolor="#FFFFFF" valign="top" nowrap><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/msie2.gif" width="30" height="30" border="0" alt="MSIE 2.0"><img src="../../src/netsc1.gif" width="30" height="30" border="0" alt="Netscape 1.0"> </td>
<td class="tabxpl" bgcolor="#E4EEFF" valign="top">zeichnet einen Text aus mit der Bedeutung "emphatisch".</td>
</tr>
<tr>
<td class="code" bgcolor="#FFFFE0" valign="top" nowrap><code><strong>...</strong></code></td>
<td bgcolor="#FFFFFF" valign="top" nowrap><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"> </td>
<td class="tabxpl" bgcolor="#E4EEFF" valign="top">zeichnet einen Text aus mit der Bedeutung "stark betont".</td>
</tr>
<tr>
<td class="code" bgcolor="#FFFFE0" valign="top" nowrap><code><code>...</code></code></td>
<td bgcolor="#FFFFFF" valign="top" nowrap><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"> </td>
<td class="tabxpl" bgcolor="#E4EEFF" valign="top">zeichnet einen Text aus mit der Bedeutung "dies ist Quelltext"</td>
</tr>
<tr>
<td class="code" bgcolor="#FFFFE0" valign="top" nowrap><code><samp>...</samp></code></td>
<td bgcolor="#FFFFFF" valign="top" nowrap><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/msie2.gif" width="30" height="30" border="0" alt="MSIE 2.0"><img src="../../src/netsc1.gif" width="30" height="30" border="0" alt="Netscape 1.0"> </td>
<td class="tabxpl" bgcolor="#E4EEFF" valign="top">zeichnet einen Text aus mit der Bedeutung "Dies ist ein Beispiel"</td>
</tr>
<tr>
<td class="code" bgcolor="#FFFFE0" valign="top" nowrap><code><kbd>...</kbd></code></td>
<td bgcolor="#FFFFFF" valign="top" nowrap><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/msie2.gif" width="30" height="30" border="0" alt="MSIE 2.0"><img src="../../src/netsc1.gif" width="30" height="30" border="0" alt="Netscape 1.0"> </td>
<td class="tabxpl" bgcolor="#E4EEFF" valign="top">zeichnet einen Text aus mit der Bedeutung "dies stellt eine Tastatureingabe dar"</td>
</tr>
<tr>
<td class="code" bgcolor="#FFFFE0" valign="top" nowrap><code><var>...</var></code></td>
<td bgcolor="#FFFFFF" valign="top" nowrap><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"> </td>
<td class="tabxpl" bgcolor="#E4EEFF" valign="top">zeichnet einen Text aus mit der Bedeutung "dies ist eine Variable oder ein variabler Name"</td>
</tr>
<tr>
<td class="code" bgcolor="#FFFFE0" valign="top" nowrap><code><cite>...</cite></code></td>
<td bgcolor="#FFFFFF" valign="top" nowrap><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/msie2.gif" width="30" height="30" border="0" alt="MSIE 2.0"><img src="../../src/netsc1.gif" width="30" height="30" border="0" alt="Netscape 1.0"> </td>
<td class="tabxpl" bgcolor="#E4EEFF" valign="top">zeichnet einen Text aus mit der Bedeutung "dies ist ein Zitat von einer anderen Quelle"</td>
</tr>
<tr>
<td class="code" bgcolor="#FFFFE0" valign="top" nowrap><code><dfn>...</dfn></code></td>
<td bgcolor="#FFFFFF" valign="top" nowrap><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/msie2.gif" width="30" height="30" border="0" alt="MSIE 2.0"><img src="../../src/netsc6.gif" width="30" height="30" border="0" alt="Netscape 6.0"> </td>
<td class="tabxpl" bgcolor="#E4EEFF" valign="top">zeichnet einen Text aus mit der Bedeutung "dies ist eine Definition".</td>
</tr>
<tr>
<td class="code" bgcolor="#FFFFE0" valign="top" nowrap><code><acronym>...</acronym></code></td>
<td bgcolor="#FFFFFF" valign="top" nowrap><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/netsc6.gif" width="30" height="30" border="0" alt="Netscape 6.0"> </td>
<td class="tabxpl" bgcolor="#E4EEFF" valign="top">zeichnet einen Text aus mit der Bedeutung "dies ist eine Abkürzung" (z.B. "z.B.")</td>
</tr>
<tr>
<td class="code" bgcolor="#FFFFE0" valign="top" nowrap><code><abbr>...</abbr></code></td>
<td bgcolor="#FFFFFF" valign="top" nowrap><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/netsc6.gif" width="30" height="30" border="0" alt="Netscape 6.0"> </td>
<td class="tabxpl" bgcolor="#E4EEFF" valign="top">zeichnet einen Text aus mit der Bedeutung "dies ist eine abgekürzte Schreibweise" (z.B. "WWW")</td>
</tr>
<tr>
<td class="code" bgcolor="#FFFFE0" valign="top" nowrap><code><q cite="Quelle">...</q></code></td>
<td bgcolor="#FFFFFF" valign="top" nowrap><img src="../../src/html40.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/msie4.gif" width="30" height="30" border="0" alt="MSIE 4.0"><img src="../../src/netsc6.gif" width="30" height="30" border="0" alt="Netscape 6.0"> </td>
<td class="tabxpl" bgcolor="#E4EEFF" valign="top">zeichnet einen Text aus mit der Bedeutung "dies ist ein Zitat mit Quellenangabe"</td>
</tr>
</table>
</td></tr></table><br>
<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/netsc6.gif" width="30" height="30" border="0" alt="Netscape 6.0"> <a class="an" name="aenderungsmarkierung">Änderungsmarkierungen im Dokument</a></h2>
<p>Wenn Sie Dokumente in HTML bearbeiten, bei denen es wichtig ist, Änderungen zu protokollieren, dann können Sie logische Textauszeichnungen für gelöschte und eingefügte Textpassagen verwenden.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/ins_del.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>Viel falsch</h1>
<p>Goethe wurde im Jahre <del>1768</del><ins>1789</ins> geboren
und war ein begnadeter <del>Sportler</del><ins>Schriftsteller</ins>.</p>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Mit <code><del></code>...<code></del></code> zeichnen Sie Text aus, der nicht mehr gültig ist (<i>del = delelte = löschen</i>). Mit <code><ins></code>...<code></ins></code> können Sie Text auszeichnen, der neu dazugekommen ist (<i>ins = insert = einfügen</i>).</p>
<p>Zur exakteren Auszeichnung sind noch zwei Attribute in beiden einleitenden Tags erlaubt:</p>
<p>Mit dem Attribut <code>datetime=</code> im einleitenden Tag von <code><ins></code> oder <code><del></code> können Sie den Zeitpunkt der Änderung festhalten. Eine Angabe wie <code><ins datetime="2001-06-25T10:59+01:00"></code> bedeutet: "eingefügt am 25.6.2001 um 10 Uhr 59" nach Zeitzone UTC-Zeit plus 1 Stunde. Die Uhrzeit/Zeitzonenangabe können Sie auch weglassen, etwa so: <code><ins datetime="2001-06-25"></code>. UTC bedeutet "Coordinated Universal Time".</p>
<p>Mit dem Attribut <code>cite=</code> können Sie einen URI angeben, der als der Grund für die Änderung gelten kann - beispielsweise ein verbindliches Dokument, auf dem Ihr Dokument beruht, und das mittlerweile geändert wurde. Eine Angabe wie <code><ins cite="http://www.w3.org/TR/1999/REC-html401-19991224"></code> bedeutet: dieser Text wurde aufgrund der HTML-Spezifikation 4.01 vom 24.12.1999 eingefügt (der angegebene URI ist die Adresse, an der die HTML-Spezifikation zu finden ist).</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Die beiden Elemente <code>ins</code> und <code>del</code> haben eine Sonderstellung, was ihr Vorkommen betrifft. Diese beiden Elemente dürfen entweder innerhalb von <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#block_elemente"><b>Block-Elementen</b></a> vorkommen - dann fungieren sie selber als Inline-Elemente. Oder sie werden außerhalb von Block-Elementen notiert - dann fungieren sie selber als Block-Elemente und können mehrere andere Block-Elemente und deren gesamten Inhalt einschließen.</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/msie5x.gif" width="30" height="30" border="0" alt="MSIE 5.x"><img src="../../src/netsc6.gif" width="30" height="30" border="0" alt="Netscape 6.0"> <a class="an" name="textrichtung">Textrichtung ändern</a></h2>
<p>Wenn Sie HTML in Verbindung mit Sprachen benutzen, die eine andere Textrichtung als von links nach rechts haben, kann es zu Konflikten bei der Textrichtung kommen, vor allem, wenn Sie zwei Sprachen mit unterschiedlicher Textrichtung im Text gemischt verwenden. Wenn Sie Unicodes in HTML notieren, wird dabei normalerweise automatisch auch die Textrichtung der Sprache berücksichtigt. Wenn Sie etwa die Unicodes für ein arabisches Wort von links nach rechts notieren, sollte die Software die Zeichenkette dennoch so auflösen, dass die Darstellung von rechts nach links erfolgt, weil das die Textrichtung im Arabischen ist. Sollte das aus irgendwelchen Gründen nicht funktionieren, können Sie mit Hilfe eines HTML-Elements nachhelfen.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/bdo.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>Umgekehrt</h1>
<p>Hier wird das Wort &quot;umgekehrt&quot; einfach <bdo dir="rtl">umgekehrt</bdo>.</p>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Mit <code><bdo dir="rtl"></code> leiten Sie einen Text ein, der von rechts nach links dargestellt wird, und mit <code><bdo dir="ltr"></code> einen Text, der von links nach rechts dargestellt wird. <code></bdo></code> beendet den Text mit der anderen Schreibrichtung (<i>bdo = bidirectional overwrite = Überschreiben der automatischen Bidirektionalität</i>). Mit dem Attribut <code>dir=</code> erzwingen Sie die Textrichtung (<i>rtl = right to left = rechts nach links</i>).</p>
<p>Das Attribut <code>dir=</code> gehört zu den <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../attribute/index.htm"><b>Universalattributen</b></a> und darf in allen einleitenden HTML-Tags stehen, in denen Text vorkommen kann. Das <code>bdo</code>-Element ist für solche Fälle gedacht, in denen <code>dir=</code> in anderen HTML-Elementen zu Problemen führt, beispielsweise bei verschachtelten Tags mit widersprüchlichen Anweisungen zur Textrichtung.</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">Logische Elemente für Textauszeichnung formatieren mit CSS</a></h2>
<p>Wie logische Elemente zur Textauszeichnung genau dargestellt werden, darauf haben Sie mit HTML keinen Einfluss. Die Browser benutzen Default-Formatierungen. 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/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/logisch_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>Viele viele bunte Logi's</h1>
<p>
Text mit dem <em style="color:blue">em-Element</em><br>
Text mit dem <strong style="color:red">strong-Element</strong><br>
Text mit dem <code style="color:purple">code-Element</code><br>
<!-- usw. -->
</p>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Die verschiedenen logischen Elemente im Beispiel erhalten unterschiedliche Schriftfarben. Formatieren können die Browser allerdings nur jene Elemente, die sie kennen.</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 logsichen Textauszeichnungen vorkommen 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#em"><b>Element-Referenz</b></a> und <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#em"><b>Attribut-Referenz</b></a> für <code><em>...</em></code><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#strong"><b>Element-Referenz</b></a> und <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#strong"><b>Attribut-Referenz</b></a> für <code><strong>...</strong></code><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#code"><b>Element-Referenz</b></a> und <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#code"><b>Attribut-Referenz</b></a> für <code><code>...</code></code><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#samp"><b>Element-Referenz</b></a> und <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#samp"><b>Attribut-Referenz</b></a> für <code><samp>...</samp></code><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#kbd"><b>Element-Referenz</b></a> und <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#kbd"><b>Attribut-Referenz</b></a> für <code><kbd>...</kbd></code><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#var"><b>Element-Referenz</b></a> und <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#var"><b>Attribut-Referenz</b></a> für <code><var>...</var></code><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#cite"><b>Element-Referenz</b></a> und <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#cite"><b>Attribut-Referenz</b></a> für <code><cite>...</cite></code><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#dfn"><b>Element-Referenz</b></a> und <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#dfn"><b>Attribut-Referenz</b></a> für <code><dfn>...</dfn></code><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#acronym"><b>Element-Referenz</b></a> und <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#acronym"><b>Attribut-Referenz</b></a> für <code><acronym>...</acronym></code><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#abbr"><b>Element-Referenz</b></a> und <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#abbr"><b>Attribut-Referenz</b></a> für <code><abbr>...</abbr></code><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#q"><b>Element-Referenz</b></a> und <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#q"><b>Attribut-Referenz</b></a> für <code><q>...</q></code><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#ins"><b>Element-Referenz</b></a> und <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#ins"><b>Attribut-Referenz</b></a> für <code><ins>...</ins></code><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#del"><b>Element-Referenz</b></a> und <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#del"><b>Attribut-Referenz</b></a> für <code><del>...</del></code><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/elemente.htm#bdo"><b>Element-Referenz</b></a> und <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#bdo"><b>Attribut-Referenz</b></a> für <code><bdo>...</bdo></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="physisch.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="physisch.htm"><b>Physische Auszeichnungen im Text</b></a>
</td></tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" align="right"><a href="praeformatiert.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="praeformatiert.htm"><b>Präformatierter Text (wie im Editor eingegeben)</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>
|
