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!

 

HTML Canvas Grafiken

HTML Canvas wird zum softwaregesteuerten Zeichnen von Grafiken auf Webseiten eingesetzt.  Das Element <canvas> mit weiteren Parametern zeichnet grafische Figuren, Texte, Hintergründe und kann Bilder hinzufügen. Canvas ist ein Container für Grafiken und Javascript wird zum Zeichnen der Grafiken genutzt.

Welche Browser unterstützen HTML Canvas?

Die volle Unterstützung von Canvas beherrschen die Browser ab der genannten Version und jede neuere Version.

  • Firefox ab Version 2.0
  • Apple Safari ab Version 3.1
  • Chrome ab Version 4.0
  • Opera ab Version 9.0

Ein Code Beispiel

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>HTML Canvas</title>
</head>
<body>

<!-- Rechteck zeichnen mit Canvas-->
<canvas id="meinCanvas" width="300" height="200" style="border:4px solid #0000cc;">
</canvas>

<!-- Fülling erstellen mit Javascript -->
<script>
var c = document.getElementById("meinCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,260,0);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"gold");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,280,180);
</script>
</body>
</html>

Fazit

HTML Canvas ist eine praktische Erweiterung, wenn es darum geht maschinell Grafiken zu erstellen. Bei der Digitalisierung und Industrie 4.0 werden Funktionen wie diese die Kommunikation zwischen Mensch und KI erleichtern.

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!

 

 

 

 

 

HTML5 – Neuer Tag <section>

Der Tag <section> in HTML5 teilt die Webseite in Abschnitte. Dies können Kapitel, Sektionen oder ähnliches sein. Dieser Tag lässt sich sehr gut mit Cascading Style Sheets  ( CSS ) nutzen und vereinfacht den Aufbau des Webdesigns.

Es kann ein Attribute genutzt werden:

  • cite = Die Angabe der URL, wenn der Abschnitt von einer anderen Webseite genutzt wird

Achtung: Auch hier werden Attribute optional angegeben.

Zudem 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>Den Tag section nutzen</title>

  </head>
  <body>
    <h1>Des Kaisers Marcus Aurelius Antonius Selbstbetrachtungen</h1>

      <section cite="http://gutenberg.spiegel.de/?id=5&xid=4103&kapitel=
       2&cHash=69c0c0a45a2#gb_found">
        Alles ist voll von Spuren göttlicher Vorsehung. Auch die zufälligen
        Ereignisse sind nichts Unnatürliches, sind abhängig von dem
        Zusammenwirken und der Verkettung der von der Vorsehung gelenkten
        Ursachen. Alles geht von der Vorsehung aus. Hiermit verknüpft sich
        sowohl die Notwendigkeit als auch das, was zur Harmonie des
        Weltganzen nützlich ist, wovon du ein Teil bist. Was mit dem großen
        Ganzen übereinstimmt und was zur Erhaltung des Weltplanes dient, das
        ist für jeden Teil der Natur gut. Die Harmonie der Welt wird erhalten
        sowohl durch die Veränderungen der Grundstoffe als auch der daraus
        bestehenden Körper. Das genüge dir, das möge dir stets zur Lehre
        dienen. Den Bücherdurst vertreibe, damit du nicht murrend sterbest,
        sondern mit wahrem Seelenfrieden und dankbarem Herzen gegen die Götter.
      </section>
  </body>
</html>

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

HTML5 – Neues Element <embed>

Der <embed> Tag von HTML5 ist vielfältig nutzbar.  Mit Hilfe des Tags werden multimediale Inhalte, Plugins eingebunden. Das bietet die Möglichkeit Flash, Videos und andere multimediale Inhalte in der Webseite zu präsentieren. Über Attribute wird die Breite und die Höhe der genutzten Inhalte festgelegt.

Es können vier Attribute genutzt werden:

  • height = Die Höhe des genutzten Bereichs wird in Pixel angegeben.
  • width = Die Breite des Bereichs in Pixel angeben.
  • src = Den Pfad und Dateiname des eingebundenen Elements eintragen.
  • type = Die Art des genutzten Inhalts bestimmen.

Zudem 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.

In den Quellcode Beispiel wird eine lokale Flash Datei in die Webseite eingebunden. Die Breite und Höhe werden durch die Flash Datei gesetzt.

Quellcode Beispiel:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Den Tag embed nutzen</title>
  </head>
  <body>
    <h1>Video aus dem Artikel Gimp Bildverbesserung</h1>
    <p>Es wird ein Flash Video eingebunden.</p>

       <embed src="http://www.html-lernen.de/wp-content/uploads/2009/12/Gimp_verbesserung.flv" />

</body>
</html>

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

HTML5 – Neues Element <canvas>

Der Tag <canvas> ist neu und fügt mit Javascript oder Scriptsprachen erstellte Grafiken ein. Dies können zum Beispiel Statistiken, Werbung oder weitere Elemente dargestellt werden. Das ist ein Tag mit viel Potential!

Es gibt zwei Attribute:

  • width = Bei width wird die Breite der grafisch genutzten Fläche in Pixel angegeben werden.
  • height = Hier wird die Höhe der grafisch genutzten Fläche 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>Den Tag canvas einsetzen</title>
  </head>
  <body>
    <h1>Meine Webseite</h1>
    <p>Das ist der Text in meiner Webseite. Nun wird ein berechnetes
Quadrat eingebunden.</p>

       <canvas id="quadrat></canvas>

       <!-- Berechnung der Grafik -->
       <script type="text/javascript">
         var ctx=canvas.getContext('2d');
         var canvas=document.getElementById('quadrat');
         ctx.fillStyle='#6666ff';
         ctx.fillRect(10,10,120,120);
       </script>
</body>
</html>

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

HTML5 – Neues Element <article>

HTML5.2 ist vom W3C am 14.12.2017 als Recommendation verabschiedet worden. In den neueren Browser Versionen stehen die meisten HTML Erweiterungen bereits zur Verfügung.

Beginnend mit diesem Artikel stelle ich nach und nach die neuen Tags von HTML5 vor.

<article>

Der Tag <article> wird genutzt, um fremde Artikel in der eigenen Webseite einzufügen.

Es gibt zwei Attribute:

  • cite = URL des Artikels
  • pubdate = Erscheinungsdatum des Artikels

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>Den Tag article einsetzen</title>
  </head>
  <body>
    <h1>Meine Webseite</h1>
    <p>Das ist der Text in meiner Webseite. Nun folgt der
    Artikel der externen Webseite.</p>
      <article cite="http://www.w3c.org" pubdate="2009-12-20T09:38:46+01:00">
        <a href="http://www.w3c.org>W3C</a>
        <p>Wer mehr über das World Wide Web Consortium wissen möchte.</p>
      </article>
  </body>
</html>

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

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.

Universalattribute in HTML nutzen

Befehle der Seitenbeschreibungssprache HTML heißen Tags. Sie sind durch eckige Klammern gekennzeichnet. Innerhalb der Tags gibt es die Möglichkeit weitere Eigenschaften einzustellen. Dies geschieht durch Attribute im HTML Tag.

Universalattribute unterscheiden sich von normalen Attributen dadurch, dass sie in fast allen Tags genutzt werden können.

Schema:

<Tag Universalattribut=”Wert”> … </Tag>

Beispiele:

<h1> Dies ist ein HTML Tag für eine Überschrift </h1>
<h1 style="text-align:left;"> HTML Tag mit Universalattribut style </h1>
<h1 style="text-align:left;" id="Titel"> Mehrere Universalattribute </h1>

Liste der Universalattribute:

Attribut Beschreibung
title Dem Tag wird ein Kommentar hinzugefügt. Dieser erscheint in einen kleinen Fenster, das Tooltip genannt wird. Es erscheint, wenn der Mauszeiger einige Zeit über den Text gehalten wird.
style Hier werden dem HTML Tag Befehle von Cascading Style Sheets (CSS) hinzugefügt. Cascading Style Sheets diesen zur erweiterten Formatierung von HTML.
class Dem Tag wird eine Klasse zugeordnet, die mit Cascading Style Sheet Befehlen genutzt wird.
id Durch die ID ist eine eindeutige Identifizierung eines Elements möglich. Dies wird hauptsächlich bei Javascript Programmierung verwendet. Innerhalb der Datei darf der Wert dieses Attributs nicht wiederholen.
lang Dieses Attribut gibt die Sprache an, die innerhalb dieses Tags verwendet wird. Mögliche Werte wären zum Beipiel: de = Deutsch, en = Englisch, ru = Russisch, jp = Japanisch …
dir Hier wird die Leserichtung des Textes eingestellt. Denn zum Beipiel wird Arabisch von Rechts nach links gelesen. Mögliche Werte wären ltr = von Links nach Rechts, rtl = von Rechts nach Links.