HTML Version 5

HTML-5 Webseite

◀   Im blauen Rahmen links sehen sie die Browser-Ansicht einer besonders einfachen Mini-Webseite in der Version HTML-5.

Mit Klick auf diesen Link wird die Minimal-Webseite in einem eigenen Browser-Tab angezeigt.

HTML5-Quelltext

◀   Links sehen sie den HTML5-Quelltext der oberhalb vorgestellten Mini-Webseite. Diesen Text hat ihr Browser vom Webserver erhalten und daraus die links oben eingebettete Mini-Webseite erzeugt.

• Jedes HTML-5 Dokument muss mit der Deklaration des Dokument-Typs in der hier gezeigten Form beginnen.

• Das Dokument muss genau 1 <html>-Element enthalten, und darin je 1 <head> und <body>-Element.

• Das <head>-Element enthält 'Meta-Daten', die nicht angezeigt werden, sondern zur Steuerung der Darstellung und des Verhaltens verwendet werden.

• Im <body>-Element sind alle Daten enthalten, die auf der Webseite angezeigt werden sollen. Das ist in diesem Fall nur ein <h1>-Element (Überschrift) und ein einfacher Text.


Der im <title>-Element enthaltene Text wird in der Kopfzeile des Browser-Fensters angezeigt.

Oft (jedoch nicht in diesem vereinfachten Beispiel) sind im <head>-Element auch <style>- und <script>-Elemente enthalten:

Ein <style-Element enthält die → CSS-Regeln zur Formatierung.

Ein <script>-Element enthält Programme in der Programiersprache → Javascript


Jedes gute Browser-Programm bietet die Möglichkeit, den HTML-Quelltext anzuzeigen.
Das erfolgt je nach Programm und Version mit RechtsKlick in die Seite oder mit einem Menü-Befehl (Quelltext, Source-Code, ...).

HTML-5


Die (neuen zusätzlichen) Möglichkeiten von HTML-5 werden derzeit nur von wenigen Web-Angeboten genutzt.

Gerade deshalb können sich Anbieter von Web-Inhalt und EntwicklerInnen Vorteile verschaffen, wenn sie die neuen Möglichkeiten kennen und sinnvoll einsetzen.


Validator

Das W3C bietet ein kostenfreies Webseiten-Programm Validator an, mit dem man die korrekte Programmierung jeder beliebigen Webseite (auch HTML-5) prüfen kann.

Semantische Elemente


Semantische Elemente

  Dafür werden neue Elemente eingeführt, die einen ausdrücklichen Bezug zum darin eingebetteten Inhalt haben:
Beispiele: <article>, <aside>, <details>, <figure>, <footer>, <header>, <main>, <nav>, <section>, <summary>

Damit soll es für Programme einfacher werden, den Inhalt so aufzufassen wie vom Herausgeber gewünscht.

Es wird wesentlich einfacher, das Layout automatisch an den Inhalt und an das Ausgabe-Medium (z.B. SmartPhone) anzupassen.

Suchmaschinen können damit Themen identifizieren, Zusammenfassungen finden usw.
Das geschieht auch jetzt, kann jedoch vom Herausgeber nicht eindeutig, sondern nur mit zahlreichen Tricks ( SEO) beeinflusst werden.

Die Übersetzung zwischen Medien (Print, Web, Audio, ...) könnte damit wesentlich verbessert werden.

Semantische Elemente sind derzeit noch wenig verbreitet, vor allem weil sie von den populärsten Content Management Systemen ( CMS) noch kaum verwendet werden.

W3Schools:  Semantic Elements



Man kann die gewünschte Formatierung in einem → CSS-StyleSheet oder <style>-Element programmieren:
<style>header{color:red;}</style>

<header>Kopf-Segment</header>
Das wird von allen modernen Browsern unterstützt, von veralteten Browsern jedoch vollkommen ignoriert. Die alleinstehenden Beispiele (Web-Apps) dieses Webs werden so programmiert.

Dieser Kompromiss funktioniert mit allen gängigen Browsern:
Eine allfällige Formatierung durch die Browser-Vorgaben wird abgeschaltet.
In die semantischen Elemente werden traditionelle Elemente eingesetzt, deren Formatierung ausdrücklich vorgegeben wird:
<style>
header{margin:0px; padding:0px;}
h1{color:red;}
</style>

<header>
<h1>Kopf-Segment</h1>
</header>
Die Text-Seiten dieses Webs sind so programmiert und sollten daher auch mit veralteten Browsern zumindest lesbar sein.

Interaktive Elemente


Zahlreiche neue Möglichkeiten sollen den gestiegenen Ansprüchen moderner Webseiten entsprechen:

Neue Typen von <input>-Elementen (z.B. color, date, email, month, number, range, search, tel, time, url, week) und zahlreiche neue Attribute (z.B. autocomplete, autofocus, list, min, max, multiple, placeholder, readonly, required, step,... ) sowie ein eigenes <output>-Element.

Das damit erreichbare Verhalten war zwar schon bisher mit Javascript programmierbar, diese Programme lassen sich nun durch einfach anzuwendende Elemente ersetzen.

Gängige Browser unterstützen derzeit nur wenige der neuen Möglichkeiten. Erfreuliche Ausnahme: → SchiebeRegler zur Eingabe von Zahlen-Werten werden von allen modernen Browsern angezeigt:
50



Daher ist die Kreativität der EntwicklerInnen gefragt, um interaktive Steuerung mit → HyperLinks und mit jenen <input>-Elementen zu programmieren, die auch Mobil-freundlich sind, z.B. CheckBoxen, OptionsSchalter, → SchiebeReglert, → FarbSelektor, ...

Medien


Die Unterstützung durch gängige Browser-Programme ist bereits recht gut aber noch lange nicht perfekt.
Man sollte vor allem die häufig verwendeten Flash-Elemente durch Standard <audio> und <video> ersetzen, da die Möglichkeiten zur Verwendung von Zusatz-Programmen (PlugIns) aus allen zukünftigen Browser-Programmen entfernt oder stark eingeschränkt werden.

Details in diesem Web: Einbettung von → Bildern in Webseiten, → Audio-Medien, → Grafik, → SVG-Objekt-Grafik, Canvas-Pixel-Grafik, Video

W3Schools  Media, Images, Audio, Video, SVG, Inline-SVG, Canvas
SelfHTML: MultiMedia



SVG verwendet die gleiche Standard-Technologie (→ CSS, → Javascript) wie HTML. Damit kann man z.B. die Grafik interaktiv steuern und animieren.

Man kann die Roh-Daten mit → Ajax anfordern und die SVG-Grafik am eigenen PC mit einem Javascript-Programm erzeugen.

SVG entlastet insbesondere den Server und die Übetragungs-Kanäle: Die Webseiten laden für alle BesucherInnen schneller.

In diesem Web wird SVG für viele → Live-Beispiele verwendet.


Alle gängigen Browser unterstützen Canvas.
Damit wird die Erzeugung dynamischer Pixelgrafik mit anderen Methoden (→ PHP) vollständig ersetzt. Der Server wird erheblich entlastet und für alle BesucherInnen schneller.

Canvas funktioniert auch ohne Server:  Sie können den ↗ HTML-Quelltext anzeigen, die Zeilen-Nummern mit Mausklick abschalten und in einer Text-Datei *.html am eigenen PC speichern. Die Datei lässt sich mit jedem gängigen Browser öffnen und mit Grafik + Animation anzeigen.

Details und Live-Beispiele zu → Canvas Pixel-Grafik

W3Schools, SelfHTML, Mozilla



Diese Audio-Datei von Typ MP3 wurde mit dem kostenfreien Programm Audacity erzeugt.

Details und Beispiele zur → Programmierung von Audio-Medien.




Das Video-Beispiel wurde mit → SVG-ObjektGrafik hergestellt und in verschiedene Medien-Formate umgewandelt:   SVG-ObjektGrafik mit Animation, Animated GIF, Video-Formate AVI, MOV, MP4, MPEG, WEBM (Details)

Für HTML-5 ist WEBM am besten geeignet.
Adobe Flash ist veraltet und sollte durch andere Video-Formate ersetzt werden.



Der Zugriff auf (Mikrofon und) Camera ist mit Javascript möglich und könnte daher problemlos in Webseiten integriert werden.
Die dazu erforderlichen Methoden sind derzeit jedoch sehr unterschiedlich und eher experimentell. Wegen der großen Beliebtheit selbst erstellter Medien ist zu hoffen, dass die Methoden in absehbarer Zeit stabil und standardisiert werden.

Java Applets


So ähnlich wie in diesem Bild (!) wird ein Java-Applet derzeit angezeigt: Wer im eigenen Web Applets verwendet, sollte diese so rasch wie möglich ersetzen.


Java wird derzeit noch in sehr vielen Programen verwendet, Java-Applets sind allerdings fast 'ausgestorben'.
Oracle verlangt Lizenz-Gebühren für die kommerzielle Anwendung von Java. Immer mehr EntwicklerInnen wenden sich von Java ab, denn einen Rechtsstreit mit Oracle kann sich niemand leisten...


Die meisten Applets lassen sich alternativ auch mit → Javascript + SVG‑ObjektGrafik oder mit → Javascript + Canvas‑PixelGrafik programmieren.

In diesem Web werden viele → Beispiele angeboten, meist mit Live-Animation, Live-Steuerung und Grafik.

Auch die meisten Apps aus der allgegenwärtigen Flut ließen sich einfach und kostengünstig durch Web-Apps mit Javascript-Programmen ersetzen, das ist jedoch keine Frage der Technik sondern der Mode.

Cascading StyleSheets (CSS)


Die Version CSS-3 bietet zusätzliche Möglichkeiten, die von den meisten gängigen Browsern bereits gut unterstützt werden.



Mit CSS-MediaQuery kann man CSS-Regeln an Bedingungen knüpfen.
Die meist-verwendeten Bedingungen orientieren sich an Breite oder Höhe des verfügbaren Fensters. Damit kann man z.B. ein Layout programmieren, welches sich automatisch an so unterschiedliche Geräte wie PC-Monitore und → SmartPhone-Bildschirme anpasst.
CSS MediaQuery wird von allen gängigen Browsern unterstützt.



Rotation um +30°
Verzerrung um ‑30°
Rotation um 180°



Linearer Farb-Gradient von Gelb zu Hellgrün


Live-Experiment:
Fassen sie dieses hellgrau unterlegte Element an der rechten unteren Ecke an: Der Mauszeiger ändert seine Form und ermöglicht die interaktive Änderung der Größe.

Stand der Technik


Die Bedeutung von CSS, Javascript und Ereignis-Steuerung (Event-driven programs) hat stark zugenommen: In Zukunft werden weniger Webseiten geladen, diese bleiben jedoch länger in Gebrauch und werden laufend ergänzt und aktualisiert.


Die Webseite bleibt längere Zeit geladen. Die AnwenderInnen fordern beliebig oft weitere Elemente (Text, Grafik, ... ganze Editor-Programme) an und arbeiten damit.

Diese Technologie ist gut eingeführt und wird von vielen Web-Programm-Paketen (CMS, Groupware, ...) verwendet.
W3Schools, Wikipedia



Die aktuellen Orts-Daten dürfen nur mit ausdrücklicher Zustimmung ermittelt gegeben werden. Leider empfinden das die meisten AnwenderInnen als lästig und erteilen die Genehmigung sehr freizügig.
W3Schools, MDN, W3C


Ziehen sie die Icons mit der Maus zwischen den beiden Feldern:


Diese Methode wurde modernisiert und wesentlich erweitert:
In den Javascript-Objekten localStorage und sessionStorage kann man wesentlich mehr Daten lokal speichern.

W3Schools


Mit dieser Technik wird die Anwendung beschleunigt und der Server entlastet.

Der Webserver sollte für diese Anwendung speziell konfiguriert werden. Das ist bei den meisten aktuellen Web-Providern noch nicht der Fall.

W3Schools


Javascript bietet nun das Objekt Worker
Damit kann man aufwändige Javascript-Programme im Hintergrund ausführen. Ein Worker kann spezielle Ereignisse (Events) auslösen und so mit den Vordergrund-Programmen kommunizieren.

W3Schools


Der Webserver sollte für diese Anwendung speziell konfiguriert werden. Das ist bei den meisten aktuellen Web-Providern noch nicht der Fall.

W3Schools