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
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SELFHTML: HTML/XHTML / Multimedia / Objekte einbinden</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Wie Sie in HTML Multimedia-Daten und Programme als Objekt einbinden einbinden, welche Dateitypen dafür in Frage kommen, und worauf Sie achten sollten.">
<meta name="keywords" content="SELFHTML, HTML, XHTML, Multimedia, Java-Applets, Video, Sound, virtuelle Welten, Plugins, Flash, <object>, <param>, data=, clsid=, name=, border=, type=, codetype=, codebase=">
<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/multimedia/ojekte.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 == ../index.htm // Multimedia == index.htm">
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
</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/XHML</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>Multimedia</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>Objekte einbinden</h2></td>
</tr>
<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 zu Objekten in HTML</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#datendateien"><b>Datendateien als Objekt einbinden</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#verweis_sensitive"><b>Verweis-sensitive Grafiken als Objekt einbinden</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#java_applets"><b>Java-Applets als Objekt einbinden</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#active_x"><b>ActiveX-Controls als Objekt einbinden</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#flash"><b>Flash-Anwendungen als Objekt einbinden</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#rahmen"><b>Rahmen um Objekte</b></a><br>
<img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"> <a href="#namen"><b>Namen für Objekte</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 zu Objekten in HTML</a></h2>
<p>Unter "Objekt" wird hier jede Art von Datei oder Datenquelle verstanden, die sich außerhalb einer HTML-Datei befindet und in diese HTML-Datei eingebunden werden soll. Es kann sich um eine Datendatei handeln, also etwa um eine Excel-Tabelle, eine AutoCad-Zeichnung, eine Midi-Musikdatei, ein Flash-Movie, eine Streaming-Quelle für Rundfunkübertragung und vieles andere mehr. Es kann sich aber auch um eine vom Web-Browser ausführbare Datei handeln, also um ein Programm. Das können zum Beispiel Java-Applets oder ActiveX-Controls sein.</p>
<p>Damit nicht für jede neue Form der Einbindung anderer Ressourcen ein neues HTML-Element benötigt wird, soll ein einziges, mächtiges HTML-Element für alle Multimedia- und Fremdprogrammreferenzen genügen: das <code>object</code>-Element. Dieses Element kann zwar nicht das Problem lösen, wie eine beliebige Datei beim Anwender angezeigt werden kann, aber es bietet zumindest eine einheitliche Syntax und trägt dadurch zur Vereinfachung von HTML bei.</p>
<p>Das <code>object</code>-Element wird jedoch immer noch nicht vollständig von den Web-Browsern unterstützt. Das liegt zum Teil allerdings auch an der Vielzahl der proprietären Multimediaformate und ihren unterschiedlichen Schnittstellen. Das <code>object</code>-Element ist jedoch so ausgelegt, dass es möglichst flexibel auf alle denkbaren Anforderungen reagieren kann und dem Browser genügend Information liefert, um mit der ausführenden Anwendung zu kommunizieren und sie in sein Anzeigefenster einzubetten.</p>
<p>Objekte sind aus HTML-Sicht <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>. In der "Strict"-Variante von HTML müssen solche Elemente 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, etwa in einem Textabsatz oder einem allgemeinen Bereich oder auch einer Tabellenzelle.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Wenn Sie mit Versuchen, das <code>object</code>-Element zu verwenden, keinen Erfolg haben, probieren Sie folgende herkömmlichen Möglichkeiten:</p>
<p><img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="netscape.htm"><b>Multimedia einbinden (Netscape)</b></a><br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="java_applets.htm"><b>Java-Applets einbinden</b></a></p>
<p>Das <code>object</code>-Element wird vom Internet Explorer seit Version 3.x und von Netscape seit Version 4.x unterstützt. Von einer ernstzunehmenden Implementierung kann bei diesen Produktversionen aber noch keine Rede sein. Deshalb ist bei den Beispielen auf dieser Seite in der Regel Internet Explorer 5.0 und Netscape 6.0 angegeben. Aber auch das bedeutet noch lange nicht, dass mit diesen Browsern alles reibungslos funktioniert.</p>
<p>Binden Sie Multimedia-Dateien im Normalfall nicht kommentarlos in Ihre Web-Seiten ein, sondern weisen Sie den Anwender darauf hin, um welche Art von Daten es sich handelt, und unter welchen Voraussetzungen eine korrekte Anzeige möglich ist.</p>
<p>Wenn Sie große Dateien einbetten, weisen Sie den Anwender im umgebenden Text auf die Größe der Datei hin.</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/msie5.gif" width="30" height="30" border="0" alt="MSIE 5.0"><img src="../../src/netsc6.gif" width="30" height="30" border="0" alt="Netscape 6.0"> <a class="an" name="datendateien">Datendateien als Objekt einbinden</a></h2>
<p>Sie können eine beliebige Datendatei als Objekt in eine HTML-Datei einbinden, also z.B. ein Video, eine Konstruktionszeichnung, eine als fertige Datei vorliegende 3D-Welt, eine Musikdatei oder dergleichen. Auch einfache Textdateien und andere HTML-Dateien können Sie auf diese Weise einbinden. Ein Web-Browser kann solche Dateien anzeigen, wenn er entweder selber in der Lage ist, das Dateiformat anzuzeigen, oder wenn der Anwender ein entsprechendes Plugin installiert hat. Wenn das Plugin installiert ist, kann der Web-Browser die Datei so in seinem Anzeigefenster präsentieren, wie sie von dem Ursprungsprogramm erstellt wurde. Bei Abspielvorgängen, etwa von Videos oder Sound, wird ein entsprechender Player angezeigt - je nachdem, wie das Plugin beschaffen ist.</p>
<p>Wenn dem Browser eine Verknüpfung zwischen dem Datentyp und einem Fremdprogramm bekannt ist, kann er das Fremdprogramm mit der betreffenden Datei starten. Ob die Daten dann jedoch innerhalb des Bereichs auf der Web-Seite angezeigt werden, der für das Objekt definiert ist, hängt davon ab, ob der Browser und das andere Programm entsprechende Kommunikationsmöglichkeiten, z.B. vom Betriebssystem bereitgestellte Kommunikationsschnittstellen, nutzen.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/object_data.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a> (Beispiel erfordert installierten <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../grafik/formate.htm#svg"><b>SVG</b></a>-Viewer und <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../dhtml/modelle/dom.htm"><b>DOM</b></a>-fähigen Browser, also mindestens Internet Explorer 5.x oder Netscape 6.x)</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>Analoguhr als SVG-Grafik mit eingebettetem JavaScript</h1>
<p><object data="uhr.svg" type="image/svg+xml" width="200" height="200">
Ihr Browser kann das Objekt leider nicht anzeigen!
</object></p>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Mit <code><object></code> leiten Sie die Referenz auf die einzubindende Datei ein, mit <code></object></code> wird das Element beendet. Das <code>object</code>-Element hat keine Pflichtattribute. Je nachdem, was Sie damit einbinden, müssen Sie selbst herausfinden oder auf Herstellerhinweise achten, welche der nach HTML-Standard möglichen Attribute Sie angeben sollten oder müssen. Zwischen dem einleitenden <code><object></code>-Tag und dem abschließenden <code></object></code>-Tag kann "beliebiger" HTML-Quelltext notiert werden. Im obigen Beispiel ist einfach ein Text notiert, dass der Browser das Objekt nicht anzeigen kann. Ebensogut könnte an dieser Stelle auch eine alternative <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../grafiken/index.htm"><b>Grafik</b></a> notiert werden oder ein alternativer Versuch, das Objekt einzubinden, beispielsweise nach der <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="netscape.htm"><b>herkömmlichen Netscape-Syntax</b></a>. Es ist sogar erlaubt, als Inhalt eines <code>object</code>-Elements ein anderes <code>object</code>-Element zu notieren, um damit beispielsweise ein alternatives Objekt in einem anderen Dateiformat einzubinden.</p>
<p>Um eine Datendatei einzubinden, ist das Attribut <code>data=</code> vorgesehen. Damit referenzieren Sie die gewünschte Datei (<i>data = Daten</i>). Bei der Wertzuweisung an dieses Attribut gelten die Regeln zum <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../allgemein/referenzieren.htm"><b>Referenzieren in HTML</b></a>. Wenn sich die Datei also beispielsweise im gleichen Verzeichnis wie die HTML-Datei befindet, dann genügt einfach die Angabe des Dateinamens - so wie im obigen Beispiel. Das Referenzieren mit relativen oder absoluten Pfadangaben ist jedoch ebenso möglich, z.B.:<br>
<code><object data="verzeichnis/datei.xy"><br>
<object data="../datei.xy"><br>
<object data="../woanders/datei.xy"></code><br>
Auch das Referenzieren von einem vollständigen URI ist möglich, z.B.:<br>
<code><object data="http://www.tolles-projekt.de/datei.xy"></code></p>
<p>Zusätzlich können Sie den <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../diverses/mimetypen.htm"><b>Mime-Type</b></a> der Datei angeben. Bei Datendateien, die mit <code>data=</code> referenziert werden, notieren Sie dazu das Attribut <code>type=</code> - so wie im obigen Beispiel. Als Wert weisen Sie einen gültigen Mime-Type zu. Wenn Sie den Mime-Typ nicht kennen, lassen Sie die Angabe <code>type=</code> weg. Wenn Sie den Mime-Type kennen und angeben, helfen Sie dem Web-Browser durch die Angabe, schneller zu reagieren.</p>
<p>Bei eingebundenen Objekten sollten Sie stets Angaben zu Breite und Höhe notieren. Mit dem Attribut <code>width=</code> legen Sie die Breite in Pixel oder in Prozent in Bezug auf die verfügbare Breite fest, und mit <code>height=</code> die Höhe.<br>
Manche Daten, zum Beispiel Videos, haben eine Originalbreite und Originalhöhe. Um so ein Video optimal einzubinden, sollten Sie dessen genaue Breite und Höhe kennen und mit <code>width=</code> und <code>height=</code> beim Einbinden der Videodatei angeben.<br>
Manche Plugins, zum Beispiel Sound-Player, haben eine bestimmte Größe. Wenn Sie die genaue Größe kennen, sollten Sie beim Einbinden von Sound-Dateien, die mit dem betreffenden Plugin wiedergegeben werden sollen, die genaue Höhe und Breite des Players angeben. So können Sie den Player vollständig und optimal innerhalb der Bildschirmanzeige der HTML-Datei platzieren. Die Größenangaben sind bei solchen Plugins normalerweise bei der Software dokumentiert.<br>
Wenn Sie zunächst nicht wissen, wie viel Breite oder Höhe das Objekt benötigt, müssen Sie verschiedene Werte ausprobieren.<br>
Mit den Angaben <code>width="0"</code> und <code>height="0"</code> können Sie die sichtbare Anzeige auch ganz unterdrücken. Das kann zum Beispiel bei Hintergrundmusik erwünscht sein.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Das <code>object</code>-Element darf auch im <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../kopfdaten/index.htm"><b>Dateikopf</b></a> einer HTML-Datei, also zwischen <code><head></code> und <code></head></code> notiert werden. Das ist dann sinnvoll, wenn die Datendatei nicht angezeigt werden soll, z.B. wenn einfach eine Hintergrundmusik abgespielt werden soll. In diesem Fall empfiehlt es sich, die Angaben <code>width="0"</code> und <code>height="0"</code> im einleitenden <code><object></code>-Tag zu notieren. Bei Objekten, die im HTML-Dateikopf eingebunden werden, darf jedoch zwischen <code><object></code> und <code></object></code> kein alternativer Inhalt stehen, der visuelle Ausgaben erzeugt.</p>
<p>Das W3-Konsortium sieht im HTML-Standard auch die Möglichkeit vor, das <code>object</code>-Element innerhalb eines <img src="../../src/kap.gif" width="15" height="13" border="0" alt="Kapitel"> <a href="../formulare/index.htm"><b>Formulars</b></a> zu notieren, um beispielsweise in visueller Interaktion mit dem Anwender Werte zu ermitteln, die dann beispielsweise in <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../formulare/versteckte.htm"><b>versteckten Formularfeldern</b></a> gespeichert und zusammen mit den Formulardaten übertragen werden. Vorgaben, wie genau die Kommunikation zwischen Objekt und Formularelementen funktionieren soll, gehören jedoch nicht zur HTML-Spezifikation.</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"> <a class="an" name="verweis_sensitive">Verweis-sensitive Grafiken als Objekt einbinden</a></h2>
<p>Diese Möglichkeit des <code>object</code>-Elements ist vor allem für Grafiken vorgesehen, die <b>nicht</b> einem der Standardtypen GIF, JPEG oder PNG entsprechen, die üblicherweise mit dem <code><img></code>-Tag eingebunden werden. Gedacht ist die Möglichkeit beispielsweise für vektorgrafische CAD-Zeichnungen oder andere Grafikformate, die Sie mit Hilfe des <code>object</code>-Elements einbinden.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/object_usemap.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a> (Beispiel erfordert installierten <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../grafik/formate.htm#lurawave"><b>Lurawave</b></a>-Viewer)</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>
<map name="Verweise">
<area shape="poly" coords="1,90,129,81,202,275,,273,415,202,417,150,311,1,173" href="http://www.duesseldorf.de/">
</map>
<h1>Eine Stadt am Rhein</h1>
<p>Klicken Sie, falls Sie die Lurawave-Grafik sehen k&ouml;nnen, auf den Rhein.
Falls nichts passiert, unterst&uuml;tzt der Browser zwar die Anzeige des Objekts,
aber nicht das Feature verweis-sensitiver Grafiken f&uuml;r Objekte.</p>
<p><object data="ddorf.lwf" type="image/x-wavelet" width="413" height="417" usemap="#Verweise">
Ihr Browser kann das Objekt leider nicht anzeigen!
</object></p>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Um eine verweis-sensitive Grafik als Objekt einzubinden, notieren Sie im einleitenden <code><object></code>-Tag das Attribut <code>usemap=</code>. Das restliche Verfahren ist dann das gleiche wie bei <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../grafiken/verweis_sensitive.htm"><b>verweis-sensitiven Grafiken</b></a> (siehe Beschreibung dort).</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/msie5.gif" width="30" height="30" border="0" alt="MSIE 5.0"><img src="../../src/netsc6.gif" width="30" height="30" border="0" alt="Netscape 6.0"> <a class="an" name="java_applets">Java-Applets als Objekt einbinden</a></h2>
<p>Java-Applets sind ausführbare Programme, deren Bildschirmausgaben
ein Web-Browser innerhalb seines Anzeigefensters darstellen kann. Applets können z.B. bewegte Animationen (Tricksequenzen) enthalten, Echtzeitabläufe in bewegten Grafiken darstellen (Stichwort: Börsenticker), oder Interaktionen mit dem Anwender austauschen. So werden Java-Applets etwa häufig bei Online-Banking eingesetzt.</p>
<p>Java-Applets müssen in compilierter Form vorliegen, um bei der Referenzierung in einer HTML-Datei ausgeführt werden zu können. Normalerweise haben compilierte Java-Applets die Dateinamenerweiterung <var>.class</var>.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/object_java.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>Wagen Sie sich durchs Labyrinth!</h1>
<p><object classid="java:zmaze3d.class" codetyte="application/java-vm" width="600"
height="400"></object></p>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Mit dem Attribut <code>classid=</code> im einleitenden <code><object></code>-Tag referenzieren Sie die Implementierung des JavaApplets (<i>classid = class identifier = Klassenbezeichner</i>). Erlaubt ist ein spezieller URI: Die Wertzuweisung besteht aus der festen Zeichenfolge <code>java:</code> - gefolgt von dem Namen der <var>.class</var>-Datei (also der ausführbaren Applet-Datei). Im obigen Beispiel wird auf diese Weise die Datei <var>zmaze3d.class</var> in der Form <code>classid="java:zmaze3d.class"</code> eingebunden.</p>
<p>Wenn sich die Applet-Datei in einem anderen Verzeichnis befindet als die HTML-Datei, in der sie referenziert wird, oder auf einem anderen Internet-Server, dann müssen Sie den Pfad bzw. die Adresse des Server-Rechners und das Verzeichnis angeben, wo sich die Programmdatei befindet (nur das Verzeichnis, nicht mehr den Namen der Programmdatei). Dazu verwenden Sie - ebenfalls im einleitenden <code><object></code>-Tag - das Attribut <code>codebase=</code>. Bei der Wertzuweisung an dieses Attribut gelten die Regeln zum <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../allgemein/referenzieren.htm"><b>Referenzieren in HTML</b></a>. Die Angabe von <code>codebase=</code> kann in einigen Fällen auch erforderlich sein, um Teile eines Java-Applets von einem bestimmten Internet-Server nachzuladen.</p>
<p>Ähnlich wie für Datendateien gibt es auch für ausführbare Programmdateien <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../diverses/mimetypen.htm"><b>Mime-Typen</b></a>. Bei Java-Applets sind die Angaben <code>codetyte="application/java"</code> oder <code>codetyte="application/java-vm"</code> gebräuchlich.</p>
<p>Zwischen <code><object></code> und <code></object></code> können Sie im Zusammenhang mit Java-Applets Aufrufparameter notieren. Viele Java-Applets erwarten einen oder mehrere solche Parameter beim Aufruf.
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/param.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>Ein Lauftext mit Java</h1>
<p><object classid="java:zticker.class" codetyte="application/java" width="600" height="60">
<param name="msg" value="Die Energie des Verstehens">
<param name="href" value="../../../index.htm">
<param name="speed" value="5">
<param name="bgco" value="255,255,255">
<param name="txtco" value="000,000,255">
<param name="hrefco" value="255,255,255">
</object></p>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Jeder Parameter wird durch <code><param name= value=></code> angegeben. Beim Attribut <code>name=</code> geben Sie den Namen des Parameters an. Bei <code>value=</code> geben Sie den gewünschten Wert des Parameters an, der dem Applet übergeben werden soll. </p>
<h3 class="inf">Beachten Sie:</h3>
<p>Bei Java-Applets, die aus mehreren <var>class</var>-Dateien bestehen, müssen Sie die Datei angeben, die den Programmstart enthält. Näheres dazu entnehmen Sie der Dokumentation, die solchen Java-Programmen beigefügt sein sollte. Auch die genauen Anweisungen zum Einbinden eines Java-Applets - z.B. zu erwarteten oder erlaubten Parametern - finden Sie normalerweise in der Dokumentation zu dem Java-Applet.</p>
<p>Beachten Sie auch die <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="java_applets.htm"><b>herkömmliche Methode zum Einbinden von Java-Applets</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/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/msie5.gif" width="30" height="30" border="0" alt="MSIE 5.0"> <a class="an" name="active_x">ActiveX-Controls als Objekt einbinden</a></h2>
<p>ActiveX-Controls können ähnliche Aufgaben wahrnehmen wie Java-Applets. Jedoch sind sie stärker als Java-Applets in der Windows-Welt und der Welt von Microsoft verankert und werden nur vom Microsoft Internet Explorer interpretiert.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/object_activex.htm" target="_blank"><b>Anzeigebeispiel: So sieht's aus</b></a> (<img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="../../quellen/rodriguez.htm" target="_blank"><b>Quelle</b></a> zum Beispieltext)</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>Eine MIDI-Datei</h1>
<object width="267" height="175"
classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">
<param name="filename" value="ritmo.mid">
</object>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Mit dem Attribut <code>classid=</code> referenzieren Sie die Implementierung des gewünschten ActiveX-Controls (<i>classid = class identifier = Klassenbezeichner</i>). Die Angabe besteht aus der festen Zeichenfolge <code>CLSID:</code> - gefolgt von der Bezeichner-ID. Diese ID müssen Sie kennen. Im obigen Beispiel wird ein recht bekanntes ActiveX-Control referenziert, nämlich dasjenige, das unter Windows zum Abspielen von Multimedia-Dateien zuständig ist. Es bindet den Media-Player von Windows in den Bereich des definierten Objekts ein. Mit <code>classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A"</code> binden Sie also ein ActiveX-Control ein, das es erlaubt, Sound- und Videodateien aller bekannten Formate wie WAV, AU, MID, MP3, AVI, MPEG usw. abzuspielen.</p>
<p>Mit dem Attribut <code>codebase=</code> können Sie die Internet-Adresse angeben, von der das ActiveX-Control geladen werden kann, falls der WWW-Browser es auf dem Rechner des Anwenders nicht findet (ActiveX-Controls werden nach dem Laden normalerweise in einem Windows-Unterverzeichnis abgespeichert - Dateien *.ocx - und beim erneuten Aufruf auch wieder von dort geladen.</p>
<p>ActiveX-Controls können genauso wie Java-Applets Parameter übergeben bekommen. Diese werden auch genauso notiert, nämlich mit <code><param name= value=></code> zwischen <code><object></code> und <code></object></code>. Das ActiveX-Control im obigen Beispiel erwartet einen Parameter namens <code>filename</code>, der bei <code>value=</code> die Angabe des gewünschten Dateinamens der abzuspielenden Datei erwartet.</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/msie5.gif" width="30" height="30" border="0" alt="MSIE 5.0"><img src="../../src/netsc6.gif" width="30" height="30" border="0" alt="Netscape 6.0"> <a class="an" name="flash">Flash-Anwendungen als Objekt einbinden</a></h2>
<p>Das Einbinden von Flash (Dateien <var>*.swf</var>) funktioniert ähnlich wie das Einbinden von Java-Applets oder ActiveX-Controls.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/object_flash.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>Das gute alte Wurm-Spiel in Flash!</h1>
<p>Erst auf &quot;Start&quot; klicken. Dann Leertaste dr&uuml;cken. Mit dem Wurm die
angezeigte Zahl ansteuern und treffen. Au&szlig;enr&auml;nder und Hindernisse nicht
ber&uuml;hren!</p>
<object classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
width="600" height="400">
<param name="movie" VALUE="nibbles.swf">
<param name="quality" value="high">
<param name="scale" value="exactfit">
<param name="menu" value="true">
<param name="bgcolor" value="#000040">
</object>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Mit dem Attribut <code>classid=</code> referenzieren Sie die gewünschte Implementierung (<i>classid = class identifier = Klassenbezeichner</i>). Die Angabe besteht aus der festen Zeichenfolge <code>CLSID:</code> - gefolgt von der Bezeichner-ID. Für Flash müssen Sie stets <code>classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000"</code> notieren.</p>
<p>Mit dem Attribut <code>codebase=</code> können Sie die Internet-Adresse angeben, von der das Flash-Plugin geladen werden kann, falls es beim Anwender nicht vorhanden ist. Im obigen Beispiel ist die Adresse für Flash 4 angegeben. Wenn Sie Flash-Anwendungen einsetzen, die mit Flash 5 erstellt wurden, geben Sie <code>codebase="http://active.macromedia.com/flash5/cabs/
swflash.cab#version=5,0,0,0"</code> an.</p>
<p>Flash-Anwendungen können genauso wie Java-Applets Parameter übergeben bekommen. Diese werden auch genauso notiert, nämlich mit <code><param name= value=></code> zwischen <code><object></code> und <code></object></code>. Der wichtigste Parameter ist der namens <code>movie</code>, bei dem Sie bei <code>value</code> die gewünschte <var>swf</var>-Datei angeben.</p>
<p>In der Praxis ist es oft besser, zusätzlich zu dem <code>object</code>-Element auch noch die <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="netscape.htm"><b>herkömmliche Netscape-Syntax</b></a> mit anzugeben. So kommen auch ältere Netscape-Browser damit zurecht, sofern ein Flash-Plugin installiert ist. Der Nachteil dabei ist jedoch, dass Sie ein HTML-Element verwenden müssen, das nicht zum HTML-Standard gehört. Sie erzeugen damit also ungültiges HTML. Für das obige Beispiel lautet dann der Quelltext:</p>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0">
<pre>
<object classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0" width="600" height="400">
<param name="movie" VALUE="nibbles.swf">
<param name="quality" value="high">
<param name="scale" value="exactfit">
<param name="menu" value="true">
<param name="bgcolor" value="#000040">
<embed src="nibbles.swf" quality="high" scale="exactfit" menu="false"
bgcolor="#000000" width="600" height="400" swLiveConnect="false"
type="application/x-shockwave-flash" pluginspage
="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
</object>
</pre>
</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"> <a class="an" name="rahmen">Rahmen um Objekte</a></h2>
<p>Sie können festlegen, dass der Browser einen Rahmen um ein eingebundenes Objekt zeichnet. Das kann zur Verdeutlichung beitragen, dass es sich um ein eingebettetes Objekt handelt. Das Attribut dafür ist jedoch als <i>deprecated</i> gekennzeichnet und soll künftig aus dem HTML-Standard entfallen, da es durch die CSS-Eigenschaft <img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../../css/eigenschaften/rahmen.htm#border"><b>border</b></a> ersetzbar ist.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" border="0" alt="Popup-Seite"> <a href="anzeige/object_border.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>Rahmen um Objekte</title>
</head>
<body>
<h1>Eine eingerahmte eingebundene Text-Datei!</h1>
<p><object data="html.txt" type="text/plain" width="300" height="400" border="2">
Ihr Browser kann das Objekt leider nicht anzeigen!
</object></p>
</body>
</html>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Durch das Attribut <code>border=</code> innerhalb des einleitenden <code><object></code>-Tags wird ein Rahmen um das Objekt definiert (<i>border = Rand</i>). Die Angabe erfolgt in Pixeln und bedeutet die Rahmendicke.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Das obige Beispiel zeigt, wie Sie einfache Textdateien "in a box" einbinden können - ebenso geht es mit HTML-Dateien und dem Mime-Type <code>text/html</code>. Der Internet Explorer zeigt die Dateien an, allerdings keinen Rahmen. Netscape kann die Textdatei nicht als Objekt anzeigen.</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/msie5.gif" width="30" height="30" border="0" alt="MSIE 5.0"><img src="../../src/netsc6.gif" width="30" height="30" border="0" alt="Netscape 6.0"> <a class="an" name="namen">Namen für Objekte</a></h2>
<p>Sie können einen Namen für ein Objekt vergeben.</p>
<h3 class="xmp">Detailbeispiel:</h3>
<table width="100%" cellpadding="10"><tr><td class="xmpcode" bgcolor="#FFFFE0"><pre>
<object name="MIDI_Datei" width="267" height="175"
classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">
<param name="filename" value="ritmo.mid">
</object>
</pre></td></tr></table>
<h3 class="xpl">Erläuterung:</h3>
<p>Mit <code>name=</code> vergeben Sie einen Namen für das Objekt. Der Name sollte nicht zu lang sein und darf keine Leerzeichen, Sonderzeichen oder deutsche Umlaute enthalten. Das erste Zeichen muss ein Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen höchstens den Unterstrich (<code>_</code>), den Bindestrich (<code>-</code>), den Doppelpunkt (<code>:</code>) oder den Punkt (<code>.</code>). Im Hinblick auf JavaScript darf der Name sogar nur Buchstaben, Ziffern und den Unterstrich (<code>_</code>) enthalten. Groß- und Kleinschreibung werden bei Sprachen wie JavaScript ebenfalls unterschieden.</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 das <code>object</code>-Element vorkommen darf, welche Attribute es haben kann 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#object"><b>Element-Referenz</b></a> für Objektreferenzen (<code><object> ... </object></code>)<br>
<img src="../../src/dok.gif" width="15" height="10" border="0" alt="Seite"> <a href="../referenz/attribute.htm#object"><b>Attribut-Referenz</b></a> für Objektreferenzen (<code><object> ... </object></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="objekteigenschaften.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="objekteigenschaften.htm"><b>Eigenschaften von Objekten</b></a>
</td></tr>
<tr>
<td bgcolor="#EEEEEE" class="doc" align="right"><a href="../frames/layouts.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="../frames/layouts.htm"><b>Frames als Mittel für Seitenlayouts</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/XHML</b></a> <img src="../../src/refkap.gif" width="16" height="13" border="0" alt="Teil von"> <a href="index.htm"><b>Multimedia</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>
|
