Schlagwort: HTML

Veröffentlicht am

HTML5 – <audio> Element

Weil Flash von Adobe durch die schnelle Entwicklung über viele Jahre immer mehr Fehler und Sicherheitslücken besaß, wurden Multimedia- und Animationsfunktionen in HTML5, CSS und Javascript integriert. Eines der TML Elemente ist <audio>. Es ermöglicht die Integration von Audioplayern in Webseiten. Damit können Audio Streams oder Sound genutzt werden.

Das HTML <audio> Element hat 7 Attribute

  • src = Der Pfad und Dateiname des Sounds angegeben werden
  • autoplay = Wenn der Wert “autoplay” eingetragen ist, dann startet die Sound Datei nach dem laden der Datei
  • controls = Bei eingetragenen Wert “controls” werden die Steuerelemente angezeigt
  • loop = Wenn der Parameter “loop” eingetragen ist, dann wird die Musik endlos wiederholt
  • preload = Wenn “preload” eingetragen wird, dann wird der Sound Datei zusammen mit der Webseite geladen. Dies funktioniert nur, wenn das Attribut autoplay nicht genutzt wird!
  • muted = Schaltet die Wiedergabe auf Lautlos
  • crossorigin = Festlegen, wie das Steuerelement ursprungsfremde Anfragen behandelt

Zudem können die Universalattribute verwendet werden

accesskey
autocapitalize
autofocus
contenteditable
dir
draggable
enterkeyhint
hidden		 inputmode
is
itemid
itemprop
itemref
itemscope
itemtype		 lang
nonce
spellcheck
style
tabindex
title
translate

Quellcode Beispiel:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Das HTML Element &lt;audio&gt; einsetzen</title>
  </head>
  <body>
    <h1>Ein Klang auf der Webseite</h1>
    <p>Das Sound ist eingebunden</p>

      <video src="http://www.html-lernen.de/wp-content/uploads/2009/12/Gimp_verbesserung.flv"
      controls="controls">
        Ihr Browser unterstützt den &lt;audio&gt; Element nicht.
      </video>
  </body>
</html>

Der Tag wird nur verarbeitet, wenn der Browser des Nutzers dies unterstützt!

 

Veröffentlicht am

HTML5 – Neuer Tag <video>

Der Element <video> ist neu und dient zum Einbinden von Videoclips oder Streaming Video in Webseiten. Es ist ein Ersatz für die Video Funktion von Flash. Browser mit HTML5 Unterstützung können Videos somit ohne Flash wiedergeben. Das bekannteste Gerät ist das iPad von Apple, das Ostern 2010 in Deutschland auf dem Markt kommt. Weitere Browser, wie Opera V10.51, Apple Safari 4 und Firefox 3.6 und einige Handys unterstützen die Video Funktion von HTML 5.

Das Element <video>hat sieben Attribute:

  • autoplay = Wenn der Wert “autoplay” eingetragen ist, dann startet der Video nachdem die Daten geladen sind.
  • controls = Bei eingetragenen Wert “controls” wird die Steuerung angezeigt.
  • height = Hier wird die Höhe des Videofensters in Pixel angegeben.
  • loop = Wenn der Parameter “loop” eingetragen ist, dann wird der Video endlos wiederholt.
  • preload = Wenn “preload” eingetragen wird, dann wird der Video zusammen mit der Webseite geladen. Dies funktioniert nur, wenn das Attribut autoplay nicht genutzt wird!
  • src = Als Wert muss hier der Pfad und Dateiname des Videos angegeben werden.
  • width = Hier wird die Breite des Videofensters in Pixel angegeben.

Zusätzlich können

  • die Universalattribute class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title
  • die Eventattribute onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

verwendet werden.

Quellcode Beispiel:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Das HTML Element &lt;video&gt; einsetzen</title>
  </head>
  <body>
    <h1>Ein Video auf der Webseite integrieren</h1>
    <p>Das Video ist eingebunden</p>

      <video src="http://www.html-lernen.de/wp-content/uploads/2009/12/Gimp_verbesserung.flv"
      controls="controls">
        Ihr Browser unterstützt das &lt;video&gt; Element nicht.
      </video>
  </body>
</html>

Der Element wird nur verarbeitet, wenn der Browser des Nutzers dies unterstützt!

 

 

 

 

 

Veröffentlicht am

HTML-Seiten in andere Webseiten einbetten

Manchmal gibt es HTML-Seiten deren Daten auf einer anderen Webseite dargestellt werden sollen. Die Inhalte sollen aber nicht mehrfach erstellt werden. Häufig wird dies genutzt, um zum Beispiel die ausgegebenen Daten einer Datenbank in Webseiten mit verschiedenen Designs darstellen zu können. Dies wird mit Inline Frames möglich.

Durch den HTML Code

<iframe src=”pfad/IhreWebseite.html” width=”80%” height=”500″ name=”InlineFrame”>
<p>Sie können die eingebettete Webseite über den Hyperlink
<a href=”pfad/IhreWebseite.html”>Eingebettete Webseite</a> aufrufen.</p>
</iframe>

wird Ihre Webseite als Inline Frame in die HTML Seite eingefügt.

Achtung:
Beim Kopieren in die Zwischenablage wird manchmal statt dem Anführungszeichen (“)  ein anderes Zeichen eingefügt. Dann funktioniert das Beispiel nicht.

Folgende Attribute stehen zur Verfügung und können eingesetzt werden:

  • src = Angabe des Pfads und des Dateinamens der einzubettenden Webseite
  • name = Name des Frame Bereichs. Hyperlinks können auf den Namen verweisen
  • width = Breite des Frame beispielsweise in Prozent der Breite der umgebenden Box
  • height = Höhe des Frame hier im Beispiel mit der Angabe in Pixel
  • align = Ausrichtung des Frames mit “left” linksbündig und mit “right” rechtsbündig
  • scrolling = Anzeigen von Scrollbalken mit “yes”. Mit “no” werden keine angezeigt. Bei “auto” wird nur bei Bedarf ein Scrollbalken angezeigt
  • frameborder = Erzeugt einen sichtbaren Rahmen um den Frame. Mit frameborder=”0″ gibt es keinen Rahmen

Das HTML Dokument muss über folgende Dokumenttyp Deklaration verfügen.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>

Inline Frames sind eine praktikable Möglichkeiten Teile von Webseiten in einzufügen. Änderungen der eingefügten Webseiten werden überall sofort verfügbar.