HTML5 – Neuer Tag <video>

Der Tag <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.

Der Tag <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 Vidoefensters 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 Sounds 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>Den Tag sound einsetzen</title>
  </head>
  <body>
    <h1>Ein Video auf der Webseite</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 den video Tag nicht.
      </video>
  </body>
</html>

Der Tag 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.