HTML/Multimedia und Grafiken/Aktive Inhalte einbinden

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Sie können beliebige aktive Elemente wie Excel-Tabellen, AutoCad-Dateien, Flash-Movies, (animierte) SVG-Grafiken, Java-Applets, Midi-Musikdateien, PDFs und vieles andere mehr in Ihre Web-Seite einbinden.


Inhaltsverzeichnis

[Bearbeiten] audio, video

Für die Einbindung von Ton- bzw. Videodokumenten stehen die Elemente audio bzw. video zur Verfügung. Sie sind wesentlich mächtiger als die hier vorgestellten Elemente, da sie keine zusätzlichen Plugins benötigen und eigene Steuerungselemente für das Abspielen mitbringen.

[Bearbeiten] object

Im Unterschied zu der Einbindung mit embed und iframe können Sie mit object alternative Inhalte als Fallback zur Verfügung stellen.

  • HTML 4.0
  • Android
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel: Einbinden von Dateien mit object ansehen …
<object data="https://wiki.selfhtml.org/local/Kaleidoskop.svg" type="image/svg+xml"> <param name="src" value="/local/Kaleidoskop.svg"> <!-- Fallback --> <img src="kaleidoskop.gif" alt="Blick in ein Kaleidoskop"> </object>
Browser, die keine SVG-Grafiken darstellen können, zeigen stattdessen eine andere Grafik. Falls auch diese Grafik nicht angezeigt werden kann oder soll, steht der Alternativtext zur Verfügung.
Beachten Sie: Die Microsoft-Browser IE und Edge können die Animation nicht darstellen; die Unterstützung von SMIL für den Edge-Browser ist derzeit nicht geplant.[1]
ansehen …

Folgende Attribute sind möglich:

  • data: URI, der den Ort der Quelle bestimmt
  • form: ID des form Elementes mit dem es in Verbindung stehen kann
  • height: Höhe
  • name: Name
  • type: Während der Internet Explorer Flash über ActiveX abspielt, zeigt der MIME-Typ anderen Browsern den Typ des Plugins an
  • usemap: (#)Hash Identifizierungsname des map-Elementes, mit dem es in Verbindung stehen kann.
  • width: Breite

[Bearbeiten] param

Parameter werden durch <param name="…" value="…"> angegeben. Beim Attribut name geben Sie den Namen des Parameters an. Bei value geben Sie den gewünschten Wert des Parameters an, der dem Plugin übergeben werden soll.

Beachten Sie: Objekte sind aus HTML-Sicht Inline-Elemente. In der Strict-Variante von HTML4 müssen solche Elemente innerhalb von Block-Elementen vorkommen, etwa in einem Textabsatz oder einem allgemeinen Bereich oder auch einer Tabellenzelle.

[Bearbeiten] embed

Daneben existiert das embed-Element, das lange nicht zum HTML-Standard gehörte und erst mit HTML5 offiziell akzepiert wurde.

  • HTML5
  • Android
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel: Einbinden von Dateien mit embed
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Flash</title> </head> <body> <embed width="600" height="400" data="nibbles.swf" type="application/x-shockwave-flash" src="nibbles.swf"> </body> </html>


Folgende Attribute sind möglich:

  • height: Höhe
  • src: referenziert den Ort der Quelle
  • type: gibt die Art des zu ladenden Plugins an
  • width: Breite

[Bearbeiten] iframe

Das iframe-Element wird eher zum Einbinden von Dokumenten und anderen Web-Seiten verwendet. Eingebettete Frames sind ähnlich wie Grafiken Bereiche innerhalb einer HTML-Datei, in denen fremde Quellen, vor allem andere HTML-Dateien angezeigt werden können.

  • HTML 4.0
  • Android
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel: Einbinden von Dateien mit iframe ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Fenstergucker</title> </head> <body> <h1>Fenstergucker</h1> <p>Gucken Sie mal SELFHTML im Fenster an:</p> <iframe src="https://wiki.selfhtml.org/wiki/Startseite" width="90%" height="400" name="SELFHTML_in_a_box"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Startseite">SELFHTML</a> </p> </iframe> </body> </html>
ansehen …

Folgende Attribute sind möglich:

  • height: Höhe
  • name: Name des iframes
  • sandbox: lässt den iframe in einer sandbox mit erhöhten Sicherheitsrestriktionen laufen.
  • seamless: lässt den iframe als Teil der Seite erscheinen
  • src: Quelle
  • srcdoc: gibt zusätzliche Informationen zum Inhalt der Quelle
  • width: Breite
Beachten Sie: Websites können auf verschiedene Weisen verhindern, dass sie sich in Frames einbinden lassen. Dies äußert sich meist darin, dass das Frame „inhaltslos“ bleibt.

[Bearbeiten] Vorteile einer Sandbox

Wenn Sie das Attribut sandbox setzen, können sie bestimmte Aktivitäten der eingebundenen Webseite verhindern. Dies erhöht Ihre Sicherheit.

  • HTML5
  • Android
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

Folgende Werte sind möglich:

  • (kein Wert): alle Restriktionen gelten
  • allow-forms: hebt das Verbot der Formularabsendung wieder auf
  • allow-pointer-lock ermöglicht APIs
  • allow-popups: hebt das Verbot von Popups wieder auf
  • allow-same-origin: ermöglicht den Inhalt des iframes als same-origin zu behandeln
  • allow-scripts: hebt das Verbot von Scripting wieder auf
  • allow-top-navigation: ermöglicht den Inhalt des iframes andere Seiten aufrufen zu lassen
Beispiel: iframe mit sandbox
<iframe sandbox="allow-scripts allow-popups allow-forms" src="https://platform.twitter.com/widgets/tweet_button.html" style="border: 0; width:130px; height:20px;"> </iframe>

Im Beispiel wird Twitter in einem iframe gezeigt. Das Absenden von Formularen, Scripting und Popups ist wieder ermöglicht worden.

[Bearbeiten] seamless

Mit dem Attribut seamless sollte erreicht werden, dass der eingebundene iframe nahtlos in die Webseite eingepasst würde, so dass keine Rahmen oder sogar Scrollbars erscheinen. Chrome hatte dies ab Version 22 unterstützt, entzog diese aber wieder ab Version 26.

  • HTML5
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

Details: caniuse.com

Beispiel: randloses IFrame ansehen …
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Fenstergucker</title> </head> <body> <h1>Fenstergucker</h1> <p>Gucken Sie mal SELFHTML im Fenster an:</p> <iframe src="https://wiki.selfhtml.org/wiki/Startseite" seamless width="90%" height="400" name="SELFHTML_in_a_box"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Startseite">SELFHTML</a> </p> </iframe> </body> </html>
ansehen …

[Bearbeiten] Anwendung

[Bearbeiten] mit Iframes eingebundene Webseiten verkleinern

Sie können eine mit einem iframe eingebundene Webseite verkleinern, wenn sie den iframe oder ein entsprechendes Container-Element mit der CSS-Eigenschaft transform:scale() skalieren.

Beispiel: verkleinerte Webseite 
iframe.verkleinert{
    height: 480px;
    width: 640px;
    display: block;
    overflow: hidden;
    position: absolute;
    transform: scale(0.5);
    transform-origin: left top 0;
}

[Bearbeiten] Referenz

[Bearbeiten] Quellen

  1. ↑ CanIUse: svg-smil
Von „http://wiki.selfhtml.org/index.php?title=HTML/Multimedia_und_Grafiken/Aktive_Inhalte_einbinden&oldid=43011“
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML