SELFHTML: HTML/XHTML / Multimedia / Eigenschaften von Objekten

SELFHTML/Navigationshilfen HTML/XHTML Multimedia
	Eigenschaften von Objekten
	Objekt zum umgebenden Text ausrichten Text um Objekt fließen lassen Meldungstext während des Ladevorgangs anzeigen Instanz eines Objekts nur bei Aufruf durch Anwender anzeigen Objekte formatieren mit Stylesheets

Objekt zum umgebenden Text ausrichten

Da das object-Element ein Inline-Element ist, können Objekte mitten in einem Text platziert werden. Wenn das höher ist als die Zeilenhöhe, dann muss der Text der gleichen Zeile vertikal zum Objekt ausgerichtet werden. Wenn Sie nichts anderes angeben, wird der Text untenbündig zum Objekt ausgerichtet. Sie können jedoch mit Hilfe eines Attributs selbst bestimmen, wie der Text zum Objekt ausgerichtet werden soll. Dieses Attribut ist allerdings als deprecated gekennzeichnet und soll künftig aus dem HTML-Standard entfallen. Die gleiche Wirkung lässt sich nämlich auch mit Stylesheets erzielen.

Die Angaben sind jedoch nur von Bedeutung, wenn die Anzeige mit Hilfe eines Plugins erfolgt und direkt im Anzeigefenster des WWW-Browsers möglich ist.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Objekt zum umgebenden Text ausrichten</title>
</head>
<body>

<h1>HIER SPIELT
  <object data="haste.mid" type="audio/x-midi" width="200" height="100" align="middle">
    Ihr Browser kann das Objekt leider nicht anzeigen!
  </object>
  DIE MUSIK
</h1>

</body>
</html>

Erläuterung:

Mit dem Attribut align können Sie umgebenden Text vertikal zum Objekt ausrichten (align = Ausrichtung).

Mit align="top" wird der Text obenbündig zum eingebundenen Objekt ausgerichtet (top = oben).
Mit align="middle" wird der Text mittig zum eingebundenen Objekt ausgerichtet (middle = mittig).
Mit align="bottom" wird der Text untenbündig zum eingebundenen Objekt ausgerichtet (bottom = unten).

Beachten Sie:

Um Objekte und Texte sauber zueinander auszurichten, können Sie auch mit rahmenlosen ("blinden") Tabellen arbeiten.

Netscape interpretiert noch weitere Wertzuweisungen, die jedoch nicht zum HTML-Standard gehören und ungültiges HTML erzeugen:

Mit align="texttop" richten Sie den Text obenbündig zum Objekt aus, und zwar an der Oberkante des kleinsten Textes (texttop = oben am Text).
Mit align="absmiddle" richten Sie den Text absolut mittig zum Objekt aus, auch bei unterschiedlichen Textgrößen (absmiddle = absolute middle = in jedem Fall mittig).
Mit align="absbottom" richten Sie den Text untenbündig zum Objekt aus, und zwar an der Unterkante des kleinsten Textes (absbottom = absolute bottom = in jedem Fall untenbündig).
Mit align="baseline" richten Sie den Text genauso aus wie mit der Standardangabe align="bottom". Benutzen Sie deshalb besser die Standardangabe.

Text um Objekt fließen lassen

Objekte können Sie links oder rechts ausrichten. Der umgebende Text fließt dabei um das Objekt. Mit zwei weiteren Attributen können Sie Abstand zum umfließenden Text erzeugen, damit der Text nicht direkt am Objekt "klebt". Den automatischen Textumfluss können Sie auch abbrechen und die Textfortsetzung unterhalb des Objekts erzwingen. Alle dazu notwendigen Attribute sind allerdings als deprecated gekennzeichnet und sollen künftig aus dem HTML-Standard entfallen. Die gleiche Wirkung lässt sich nämlich auch mit Stylesheets erzielen.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Text um Objekt fließen lassen</title>
</head>
<body bgcolor="#333333" text="#FFFFFF">

<h1>
  <object classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000"
          codebase="http://active.macromedia.com/flash2/cabs/swflash.cab#version=4,0,0,0"
          width="200" height="200" align="left" hspace="10" vspace="7">
    <param name="movie" VALUE="neucler.swf">
  </object>
  Animation!
</h1>

<p>Kann sch&ouml;n sein, wenn sie nicht zu aufdringlich ist.
Dies ist ein Flash-Filmchen von gerade mal einem Kilobyte Gr&ouml;&szlig;e.
<br clear="all"></p>

<h2>Gratulation!</h2>

<p>Der Text geht unterhalb weiter.</p>

</body>
</html>

Erläuterung:

Mit den Angaben align="left" bzw. align="right" veranlassen Sie den Browser, das Objekt linksbündig bzw. rechtsbündig auszurichten und den darauffolgenden Fließtext rechts bzw. links neben dem Objekt anzuzeigen und um das Objekt herumfließen zu lassen (align = Ausrichtung, left = links, right = rechts). Der umgebende Text kann verschiedene Elemente enthalten, zum Beispiel auch Überschriften oder Listen.

Um Abstand zwischen Objekt und umfließendem Text zu erzeugen, stehen die Attribute hspace und vspace zur Verfügung.
Mit hspace [Pixel] bestimmen Sie den Abstand zwischen Objekt und anderen Elementen links bzw. rechts davon (hspace = horizontal space = horizontaler Abstand).
Mit vspace [Pixel] bestimmen Sie den Abstand zwischen Objekt und anderen Elementen darüber bzw. darunter (vspace = vertical space = vertikaler Abstand).
Das Attribut hspace betrifft immer den linken und den rechten Randabstand vom Objekt, vspace immer den oberen und den unteren Randabstand. Wenn Sie also beispielsweise bei einem links ausgerichteten Objekt hspace definieren, wird nicht nur rechts vom Objekt zum nebenstehenden Text ein Abstand erzeugt, sondern auch links zum Rand des Anzeigefensters hin. Um dies zu verhindern, können Sie exakter arbeiten, indem Sie Stylesheets verwenden.
Sie können beide Attribute notieren oder auch nur eines davon.

Um den automatischen Textumfluss zu unterbrechen und zu erzwingen, dass alles was folgt unterhalb des Objekts angezeigt wird, können Sie einen Zeilenumbruch mit dem Attribut clear notieren.
Mit <br clear="all"> erreichen Sie, dass der Textfluss ab der nächsten Zeile in jedem Fall unterhalb des Objekts fortgesetzt wird.
Mit <br clear="left"> erreichen Sie, dass der Textfluss ab der nächsten Zeile unterhalb eines linksbündig ausgerichteten Objekts fortgesetzt wird.
Mit <br clear="right"> erreichen Sie, dass der Textfluss ab der nächsten Zeile unterhalb eines rechtsbündig ausgerichteten Objekts fortgesetzt wird.

Meldungstext während des Ladevorgangs anzeigen

Multimediaobjekte oder ausführbare Programme wie Java-Applets können zum Teil längere Ladezeiten verursachen. Auch dann, wenn die Dateien selbst nicht größer als durchschnittliche HTML- oder Grafikdateien sind, müssen beim Anwender in der Regel Plugins oder Laufzeitinterpreter aktiviert werden. Das kostet Zeit.

Um den Anwender nicht im Unklaren über die Wartezeit und die Ladevorgänge an seinem Rechner zu lassen, können Sie einen Meldungstext angeben, der dem Anwender bis zur fertigen Anzeige des eingebundenen Objekts angezeigt wird.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Meldungstext während des Ladevorgangs anzeigen</title>
</head>
<body>

<h1>Bauen Sie eine Br&uuml;cke!</h1>

<p>
  <object classid="java:Bridges.class" codetype="application/java-vm" width="350" height="420"
          standby="Das Spiel wird geladen. Bitte einen Moment Geduld...">
    <param name="Color" value="white">
  </object>
</p>

<p>Klicken Sie auf wei&szlig;e Felder. Mit Rot versuchen Sie Ihre Br&uuml;cke
zwischen oberem und unterem Spielfeldrand zu bauen. Blau versucht Sie daran zu
hindern.</p>

</body>
</html>

Erläuterung:

Innerhalb eines einleitenden <object>-Tags können Sie mit dem Attribut standby einen Meldungstext für den Ladevorgang angeben.

Instanz eines Objekts nur bei Aufruf durch Anwender anzeigen

Sie können ein Objekt definieren, das zunächst nur deklariert wird. Damit es angezeigt oder ausgeführt wird, muss es erst aktiviert werden. Das kann z.B. mit Hilfe eines Verweises auf das deklarierte Objekt geschehen, oder durch ein anderes Objekt, das die Initialisierung anstößt.
Browser, die diese Option nicht kennen (darunter auch Netscape, Internet Explorer), starten den Abspielvorgang sofort.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Instanz eines Objekts nur bei Aufruf durch Anwender anzeigen</title>
</head>
<body>

<h1>Wollen Sie oder wollen Sie nicht?</h1>

<p>
  <object declare id="Marquee" classid="java:zticker.class" codetype="application/java"
          width="600" height="60">
    <param name="msg" value="Sie wissen was Sie wollen!">
    <param name="href" value="../../../index.htm">
    <param name="speed" value="5">
    <param name="bgco" value="255,255,0">
    <param name="txtco" value="255,000,000">
    <param name="hrefco" value="255,255,255">
  </object>
</p>

<p><a href="#Marquee">Animierten Text anzeigen</a></p>

</body>
</html>

Erläuterung:

Innerhalb eines einleitenden <object>-Tags können Sie mit dem Standalone-Attribut declare ein Objekt als lediglich deklariert definieren (declare = erklären, angeben).

Mit dem Universalattribut id können Sie einen Zielanker innerhalb des Objekts definieren, im Beispiel: "Marquee" (id = identifier = Bezeichner). 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 (_), den Bindestrich (-), den Doppelpunkt (:) oder den Punkt (.). Groß- und Kleinschreibung wird unterschieden.

Mit einem Verweis auf den Zielanker (siehe obiges Beispiel) können Sie den Anwender das Objekt aktivieren lassen. Beim href-Attribut notieren Sie das führende Gatterzeichen (#) und dahinter den id-Namen des Objekts.

Objekte formatieren mit CSS

Stylesheets bieten Eigenschaften an, mit deren Hilfe die beiden Funktionen Objekt zum umgebenden Text ausrichten und Text um Objekt fließen lassen ebenso realisierbar sind wie mit HTML. Das "Fein-Tuning" ist mit Hilfe von CSS sogar deutlich genauer. Mit CSS müssen Sie arbeiten, wenn Sie die in diesem Abschnitt beschriebenen Effekte erzielen und dabei aber mit der HTML-Variante "Strict" arbeiten wollen.
Bei Verwendung von Stylesheets müssen Sie zunächst wissen, wie man CSS-Formate definieren kann. Anschließend sind Sie in der Lage, CSS-Eigenschaften anzuwenden. Maßgeblich sind im hier beschriebenen Zusammenhang folgende CSS-Eigenschaften:
vertical-align (Vertikale Ausrichtung)
float (Textumfluss)
clear (Fortsetzung bei Textumfluss)
Außenrand und Abstand

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Objekte formatieren mit CSS</title>
</head>
<body>

<h1>
  HIER SPIELT
  <object data="breeze.mid" type="audio/x-midi" width="200" height="100"
          style="vertical-align:middle; margin-left:30px; margin-right:30px;">
    Ihr Browser kann das Objekt leider nicht anzeigen!
  </object>
  DIE MUSIK
</h1>

</body>
</html>

Erläuterung:

Mit style="vertical-align:middle" erreichen Sie in einem <object>-Tag das Gleiche wie mit align="middle",
mit style="vertical-align:text-top" das Gleiche wie mit align="top",
und mit style="vertical-align:text-bottom" das Gleiche wie mit align="bottom".

Mit den CSS-Angaben margin-left:30px; und margin-right:30px; wird im obigen Beispiel rechts und links zum Text hin ein Abstand von 30 Pixeln geschaffen. Wenn Sie Text um ein Objekt fließen lassen wollen (im obigen Beispiel nicht realisiert), können Sie mit einer Angabe wie style="float:left; margin-right:20px; margin-bottom:10px" erreichen, dass das Objekt links ausgerichtet wird und nachfolgender Text rechts um das Objekt fließt. Dabei wird zwischen Objekt und Text ein Abstand von 20 Pixeln gehalten (links vom Objekt wird dagegen, anders als beim HTML-Attribut hspace, kein Abstand von 20 Pixeln erzeugt). Nach unten hin, also zum Text unterhalb wird ein Abstand von 10 Pixeln definiert.


	Java-Applets einbinden (herkömmlich)
	Objekte einbinden

SELFHTML/Navigationshilfen HTML/XHTML Multimedia