html-lernen.de

Die Programm Schnittstellen (API) von HTML5 sind nur teilweise in den aktuellen Browsern von Opera, Google Chrome und Mozilla Firefox integriert. Dazu biete ich hier eine Übersicht auf den aktuellen Stand, ohne den Anspruch auf Vollständigkeit der Liste.

Opera Browser V 10.60

• Teilweise Unterstützung von neuen Medienelementen wie <video> und <audio>.
  • Die Attribute buffered, seekable and played geben keine Spieldauer aus.
  • playbackRate and defaultPlaybackRate unterstützen die Abspielgeschwindigkeit und -Richtung nicht.

• Volle Unterstützung der Edit Funktion in Verbindung mit dem neuen, globalen Attribut  contenteditable.

Google Chrome

• Die Unterstützung von APIs in Chrome ist im 2. Quartal geplant.

Mozilla Firefox

• Die Canvas API wird ab Gecko 1.91 mit mehr Funktionalität unterstützt. Die unterstützt Textfunktionen und dient zum Erzeugen von Schatten bei Schriften.

Mit HTML5 wurden APIs eingeführt. APIs, auch Application Programming Interface genannt, das sind Programm Schnittstellen. Diese Schnittstellen unterstützen die Erstellung von Web Programmen. Das bietet interessante, neue Möglichkeiten um die zukünftigen, mobilen Geräte mit multimedialen Inhalten zu versorgen.

Neue APIs bei HTML5

• zum Abspielen von Audio, Video mit den Elementen audio und video
• um verschiedene Protokolle und Mediatypen zu registrieren
• für die Nutzung der Historie und zur Abschaltung des Back-Knopfes
• für die Nutzung von Greifen und Verschieben von Elementen in Kombination mit dem draggable Attribut
• zum Editieren mit dem neuen contenteditable Attribut
• um Offline Web Programme zu ermöglichen

Fazit:

HTML entwickelt sich als Beschreibungssprache von Inhalten weiter. In Verbindung mit Cascading Style Sheets (CSS) für das Design und Javascript zur Programmierung werden zukünftig die Applikationen für die mobilen Geräten entwickelt. Diese Programme funktionieren sowohl Online wie auch Offline. Dies ist ein Grund, warum die Entwicklung von Google Gears eingestellt worden ist. Denn ein internationaler Standard bietet für alle eine bessere Platform zur Entwicklung von Produkten.

HTML5 bringt nicht nur viele Neuerungen. Es gibt auch Elemente, die nicht mehr weiterentwickelt werden. Es sind Tags bei denen festgestellt wurde, dass diese eine nachteilige Entwicklung des Gesamtkonzepts von HTML darstellen. Zudem gibt es Elemente, die in anderen Bereichen angesiedelt wurden und nun in HTML5 nicht mehr gebraucht werden.

Elemente, die durch Cascading Style Sheets ( CSS ) ersetzt werden

basefont

Basefont wird durch die entsprechenden Cascading Style Sheet (CSS) Befehle  font und font-family abgelöst.

big

Big vergrössert die Schrift. Auch dies wird mit CSS Befehl font-size durchgeführt.

center

Der Tag center zentriert die nachfolgenden Inhalte. Er wird durch verschiedene spezifische CSS Befehle abgelöst.

font

Der Tag font wird ebenfalls mit CSS Befehlen font und font-family ersetzt.

s

Der Tag s streicht Text durch und wird durch den CSS Befehl text-decoration abgelöst.

strike

Der Tag strike streicht Text durch und wird durch den CSS Befehl text-decoration abgelöst.

tt

Mit dem Tag tt wird der Text im Schreibmaschinenstil dargestellt. Bei CSS ist dies der Befehl font.

u

Der Tag u dient zum Unterstreichen von Text und dafür wird der CSS Befehl text-decoration genutzt.

HTML Elemente, die nicht mehr weiterentwickelt und genutzt werden

frame, frameset und noframes

Die Tags frame, frameset und noframes wurden für die Entwicklung von Frame Webseiten genutzt. Die Weiterentwicklung wird hier eingestellt. Suchmaschinen können Webseiten in Frame Technik schlecht analysieren. Die Ergebnisse in Suchmaschinen zeigen als Suchergebnis  teilweise einzelne Webseiten innerhalb des Frames. Es fehlen dann Teile der anderen Framebereiche.

Eine Ausnahme bilden die Inline Frames. Das ist das Einbetten einer anderen Webseite mit Hilfe des Tags iframe.

acronym, applet, isindex, dir und noscript

Die Tags acronym, applet, isindex und dir werden ebenfalls nicht mehr genutzt. Diese Elemente wurden selten genutzt und sind durch andere ersetzt. Das Element noscript sollte nicht mehr genutzt werden, da dies nicht von der XML Syntax der HTML Parser unterstützt wird.

Video Format VP8 und Sound Format Vorbis

Google hat zusammen mit Mozilla, Opera, Adobe und vielen weiteren Unterstützern das webmproject gestartet. Ziel des Projekts ist das lizenzfreie Open Source Video Format VP8 anzubieten. Als Sound Format wird das Open Source Format Vorbis angeboten.

Dies unterstützt die Bemühung sich von dem sehr verbreiteten Videoformat H.264 zu lösen. Denn ab dem Jahr 2016 werden alle Nutzer des h.264 Videoformats Lizenzgebühren bezahlen müssen. Kommerzielle Anbieter zahlen bereits heute Lizenzgebühren.

Zweifel bei den Patenten von VP8

Es gibt bei einigen Experten Zweifel, ob das Videoformat VP8 wirklich lizenzfrei ist. Zudem ist die Qualität bei der Wiedergabe nicht so hochwertig als dies bei den kommerziellen Videoformat h.264 der Fall ist. Da das webmproject dies jetzt ein Open Source Projekt ist, können Entwickler sich den Quellcode herunterladen und verbessern.

Überzeugen Sie sich Selbst

Bei den HTML5 Videos von You Tube wird das neue Format bereits eingesetzt. Dazu brauchen Sie einen Browser der HTML5 und das neue Videoformat unterstützt. Dies wären zur Firefox und der aktuelle Opera Browser. Was meinen sie zur Bildqualität?

Hier ein Vergleich eines HTML5 Videos mit dem gleichen Video auf Flash Basis. Die gesamte Umgebung ist im Test gleich.

Danke für den Test, mbensen.

Da nun alle neuen HTML5 Tags, Attribute und Events auf dieser Webseite verfügbar sind, habe ich hier ein Inhaltsverzeichnis stellt. Durch die Übersicht können Sie leichter die gewünschte Information zu HTML 5 finden.

Neue Tags bei HTML 5

• Article – <article>
• Aside – <aside>
• Audio – <audio>
• Canvas – <canvas>
• Command – <command>
• Datalist – <datalist>
• Details – <details>
• Dialog – <dialog>
• Embed – <embed>
• Figure – <figure>
• Footer – <footer>
• Header – <header>
• Hgroup – <hgroup>
• Keygen – <keygen>
• Mark – <mark>
• Meter – <meter>
• Nav – <nav>
• Output – <output>
• Progress – <progress>
• Ruby – <ruby>
• Rt – <rt>
• Rp – <rp>
• Section – <section>
• Source – <source>
• Summary – <summary>
• Time – <time>
• Video – <video>

Neue Standard Attribute bei HTML 5

• HTML5 Standard Attribute

Neue Event Attribute bei HTML 5

• HTML5 Event Attribute

Zum Seitenanfang

Die Event Attribute ermöglichen die interaktive Nutzung von Javascript in Webseiten. In HTML5 wurden die Möglichkeiten enorm ausgeweitet, wie den unten gezeigten Tabellen entnommen werden kann. HTML5 stellt in Verbindung mit CSS3 und ECMA Javascript die zukünftige Plattform für Webprogramme von Web 3.0 dar.

Die Events, oder auch Ereignisse genannt, teilen sich in 5 Gruppen:

1. Window Events
2. Formular Events
3. Tastatur Events
4. Maus Events
5. Medien Events

Window Events Attribute:

Diese gehören zum <body> Tag.

Zur Auswahl

Formular Event Attribute:

Ereignisse, die innerhalb eines Formulars ausgelöst werden. Sie können von allen Tags verwendet werden.

Zur Auswahl

Tastatur Event Attribute:

Das sind Ereignisse, die von der Tastatur ausgelöst werden.

Zur Auswahl

Maus Event Attribute:

Das sind Ereignisse, die von der Maus ausgelöst werden.

Zur Auswahl

Medien Event Attribute:

Das sind Ereignisse, die von Medien (Videos, Töne oder Bilder) ausgelöst werden. Sie können von allen Tags verwendet werden.

Zur Auswahl

Mit diesem Artikel ist die Beschreibung der HTML5 Elemente abgeschlossen. Viel Spass beim Programmieren und Erstellen von Webseiten mit HTML, CSS und Javascript!

Mit wenigen Ausnahmen funktionieren die Standard Attribute mit allen HTML Befehlen. Sie erweitern die Funktionalität der HTML Tags. Zudem werden manche für Cascading Style Sheets ( CSS ) und Scriptsprachen verwendet.

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!

Mit dem Tag <time> kann eine Uhrzeit oder zusätzlich ein Datum in der Webseite gekennzeichnet werden. Der Tag time kann in der Webseite mehrfach verwendet werden.

Es kann ein Attribut genutzt werden:

• datetime = Es wird das Datum oder Datum und Zeit zusammen eingetragen.

Es 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 time nutzen</title>
  </head>
  <body>
    <h1>Arthur Schopenhauer</h1>
    <p>
     <time datetime="1788-02-22">Geboren</time> um <time>11:22</time> in Danzig;
     <time datetime="1860-09-21">gestorben</time> am 21.9.1860 in Frankfurt/Main.
    </p>
</body>
</html>

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