HTML 5

HTML 5
Workshop
Montag, 18. Oktober 2010

Kurzbeschreibung
Mit der Einführung des HTML5-Standards und der

Unterstützung durch aktuelle Browserversionen steht Web-
Entwicklern eine Vielzahl von neuen Möglichkeiten zur
Verfügung.
Insbesondere für dynamische und auch mobile Web-
Anwendungen ergeben sich interessante Aspekte.
Noch sind nicht alle HTML5-Sprachelemente einsetzbar, aber
viele Dinge lassen sich schon jetzt sinnvoll verwenden.

Seminarziel
In diesem Grundlagen-Kurs erhalten Ein- und Umsteiger die

Kenntnis um HTML5 konkret einzusetzen.
Neben den sprachlichen Neuerungen zum Vorgänger, werden
die Themen Formulare, Geolocation, Multimedia, Drag-and-Drop
und Anwendungsunterstützung praxisnah vorgestellt.

Themen
Überblick Drag-und-Drop
Grundlagen Canvas-Element
Semantik Geolocation-API
Formulare Webanwendungen
Multimedia Zusammenfassung

Ihre Themen

History of HTML
1991 HTML
1994 HTML 2
1996 CSS 1 + JavaScript
1997 HTML 4
1998 CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2009 HTML 5

History von HTML 5
22. Januar 2008 Erster „Working Draft“ (Arbeitsentwurf).
10. Juni 2008 Zweiter Arbeitsentwurf, in den der bis dahin separate Web-Forms-2.0-Entwurf eingearbeitet
wurde.
12. Februar 2009 Dritter Arbeitsentwurf.
23. April 2009 Vierter Arbeitsentwurf.
25. August 2009 Fünfter Arbeitsentwurf.
4. März 2010 Sechster Arbeitsentwurf. HTML Canvas 2D[9] und HTML Microdata als eigene
Arbeitsentwürfe ausgelagert. Neues Dokument „HTML: The Markup Language“.
25. Juni 2010 Siebter Arbeitsentwurf und Überarbeitung der verwandten Spezifikationen und Dokumente.
Neu hinzugefügt wurden die unterstützenden Dokumente HTML5: Techniques for providing useful text
alternatives und Polyglot Markup: HTML-Compatible XHTML Documents.
Quelle: Wikipedia

Das content model von HTML 4
FLOW
BLOCK
INLINE

Das content model von HTML 5
FLOW
INTERACTIVE HEADING
PHRASING
EMBEDDED
SECTIONING
METADATA

Metadata
Metadaten, die für das gesamte aktuelle HTML-Dokument

gelten, können in HTML5 einerseits im Dokumentkopf
vorkommen, andererseits aber auch im Dokumentkörper.

Metadata im Dokumentenkopf
meta link base
script style title

Metadata im Dokumentenkörper
script noscript command

Metadata
Das script-Element kann jedoch auch im Dokumentkörper

vorkommen, ebenso wie sein Pendant, das noscript-
Element, und ein weiteres in HTML5 neues, script-
auslösendes Element, command, kommt im Dokumentkörper
vor.
Weil Meta-Daten auch außerhalb des Dokumentkörpers
vorkommen, hat der Bereich für Metadata in der obigen
Grafik nur eine Teilschnittmenge mit dem sonst alles
umschließenden Flow-Content.

HTML + CSS + JS APIs = 5
HTML5
CSS 1, 2, 3
Javascript
jQuery
JQTouch
MooTools
AJAX
...

HTML

Neue Semantik - Neue Tags, Neue Link Relationen,
Microdata
Accessibility (ARIA roles)
Web Forms 2.0 - Neue Eingabefelder
Multimedia - Audio Tag, Video Tag
2D/3D Zeichenfläche - Canvas, WebGL, SVG

Neue semantische HTML Tags
<header> <aside>
<hgroup> Top links...
</hgroup> </aside>
</header>
<footer>
<article> Copyright © 2010.
<header> ... </header> </footer>
<section> ... </section>
</article>
<nav>
<ul> Navi ... </ul>
</nav>

Geänderte und umdefinierte Elemente
Folgende semantische Elemente werden jetzt mehr ihrer
ursprünglichen Bedeutung nach eingesetzt.
Die Änderungen sind für Search Engine Optimizer wichtig
und interessant.

<i>
Bisher für Kursivschrift.
Jetzt Text, der üblicherweise kursiv geschrieben wird, also

beispielsweise Gedanken, veränderte Stimmungslage,
usw.

<b>
Bisher für Fettschrift.
Kennzeichnet jetzt Text, der zwar stilistisch hervorgehoben

werden soll, aber keine wichtigere Bedeutung als der
umgebende Text hat.

<em>
Emphasis (Betonung)
Das em-Element kann nun verschachtelt werden, um die

Betonung eines Textes zu verstärken.

<hr>
Bisher eine horizontae Linie.
Das <hr>-Element symbolisiert nun einen thematischen

Umbruch zwischen Absätzen in einem Text.
Dabei kann es weiterhin wie eine Linie aussehen. Muss

aber nicht. (hr {border:0;} ).

<small>
Bisher kleine Schrift.
Nun dient es nun der Auszeichnung von Kleingedrucktem,

wie Rechtshinweisen oder zusätzlichen Angaben zu
Preisen.

<strong>
Bisher wichtig.
Das strong-Element zeichnet einen Text als inhaltlich

extrem wichtig aus. Es löst damit bereits seit einiger Zeit
das <b>-Element ab, das Text nur aus typografischer Sicht
fett schreibt.

Nur noch über CSS formatieren
Deshalb fallen zum Beispiel <font> oder <u> für
underlined weg.

Deshalb dürfen Attribute in Kombination mit bestimmten
Elementen nicht mehr genutzt werden:
align, <color, size, width, hspace, vspace und margin
in Verbindung mit <body>, <table>, <iframe>, <img>.

Anstelle von Frames werden CSS oder iframes verwendet.

Elemente, die nicht mehr genutzt werden
applet, acronym, bgsound, basefont, big, blink,
center, dir, font, frame, frameset, (endlich!)
isindex, listing,
marquee, noframes, nobr,
s, spacer, strike, tt, u,wbr

Warum?
Sie dienen nur der Formatierung.
Und die wird nun von CSS erledigt.

Neue semantische Tags

<article>
Kennzeichnet einen inhaltlichen Artikel.
Das article-Element umfasst einen unabhängigen

Abschnitt, der jedoch im Kontext zu den Vorfahren-
Elementen steht. Damit sind unter anderem
Nachrichtenartikel, Blog- oder Foreneinträge gemeint.

<aside>
Nebenbeiinhalt.
Bezeichnet Inhalt, der thematisch zum umschließenden

Inhalt passt, aber nicht direkt dazugehört. Ein politischer
Nachrichtentext könnte in einem aside-Element
Querverweise zu ähnlichen Nachrichten beinhalten.

<audio>
Bettet Sound ein.
Audio soll zukünftig mit diesem Elementen eingebunden

werden. HTML5 stellt zu diesen Elementen einige
Schnittstellen bereit, beispielsweise um die Wiedergabe
steuern zu können.
<audio src="sound.mp3" controls></audio>

document.getElementById("audio").muted = false;

<canvas>
Macht eine Zeichenfläche auf.
Das canvas-Element erzeugt eine Zeichenoberfläche, auf

der mit Hilfe von DOM-Methoden gezeichnet werden kann.
Die Spezifikation sieht nur eine zweidimensionale
Zeichenoberfläche vor, geht aber davon aus, dass in
Zukunft auch dreidimensionale Kontexte eingeführt
werden könnten.
Die ersten Beispiele sind bereits im Netz ...

Canvas (Zeichenfläche)
<canvas id="canvas" width="838" height="220"></canvas>
<script>
var canvasContext = document.getElementById("canvas").getContext("2d");
canvasContext.fillRect(250, 25, 150, 100);
canvasContext.beginPath();
canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
canvasContext.lineWidth = 15;
canvasContext.lineCap = 'round';
canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
canvasContext.stroke();
</script>

Canvas 3D (Web Graphics Language)
<canvas id="canvas" width="800" height="300"></canvas>
<script>
var gl = document.getElementById("canvas").getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
...
</script>

<command>
Button für Befehle.

<datalist>
Dropdown Liste.

<details>
Details zu einem Element.

<embed>
Ermöglicht das Einbinden von interaktiven Inhalten und
Anwendungen.
Flash, swf, ... aber nicht audio und video

<figcaption> <figure>
Definiert eine Mediencontent Gruppe und deren
Beschriftung.
Das figure-Element erlaubt es, ein bestimmtes Medium

(z. B. Bilder, Videos etc.) mit einer Bildunterschrift zu
versehen.

<footer>
Fußteil einer Sektion oder einer Seite.
Das footer-Element definiert eine Fußzeile für den

aktuellen Abschnitt (z. B. in einem article-Element) und
gibt z. B. Auskunft über den Autor oder die Erstellungszeit
des Textes.

<header>
Kopfteil einer Sektion oder einer Seite.
Das header-Element definiert den Kopfbereich für den

aktuellen Abschnitt (z. B. in einem section-Element).
Neben einer Überschrift kann es auch weitere
Informationen (z. B. Versionsdaten) enthalten.

<hgroup>
Information über eine Sektion eines Dokuments.

<keygen>
Generierter Key in einem Formular.

<mark>
Markierter Text.
Das mark-Element stellt hervorgehobenen Text dar. Dies

ist nicht zu verwechseln mit betonten Texten. Stattdessen
geht es hier etwa um Text, der von einer Suchmaschine
gefunden wurde und sichtbar markiert wird, sodass er
schnell von Benutzern und deren Darstellungsprogrammen
gefunden werden kann.

<meter>
Messwerte (innerhalb eines definiertes Wertebereich).
Das meter-Element stellt einen Anteil seinem Maximum

gegenüber. Verwenden kann man dieses Element
beispielsweise um anzuzeigen, wie gut ein Suchergebnis
im Vergleich zum Suchwort ist, wie gut ein Produkt im
Vergleich zur besten Bewertung abschneidet etc.

<nav>
Ein Navigationsbereich.
Dieses Element umschließt einen Navigationsbereich.

Damit sind nicht nur Verweise zu anderen Seiten eines
Webauftritts gemeint, sondern auch Verweise, die auf
Abschnitte innerhalb eines Dokuments zeigen.

<output>
Für verschiedene Ausgabetypen

<progress>
Eine Fortschrittsanzeige.
Das progress-Element gibt den Fortschritt einer

bestimmten Aufgabe wieder. Das Element wird ebenfalls
mit dem DOM gesteuert. Anwendungsbeispiel wäre z. B.
der Fortschritt bei einer mehrseitigen Umfrage.

<rp>
Ruby Notiz für Nicht-Rubybrowser.

<rt>
Erklärung für eine Ruby Notiz.

<ruby>
Eine Ruby Notiz.

<section>
Definiert eine inhaltliche Sektion.
Ein section-Element gruppiert thematisch

zusammenhängenden Inhalt und besitzt meist einen Kopf-
und Fußbereich. Anhand einer typischen Webseite wären
Beispiele für ein section-Element ein Vorstellungs-, ein
Nachrichten- und ein Kontaktbereich.

<source>
Definiert Medienquelldaten.
Mit diesem Element können für ein Medienelement

verschiedene Quellen angegeben werden, aus denen das
Darstellungsprogramm die passende aussucht.

<summary>
Header eines <detail> Elementes.

<svg>
Eröffnet eine Scalable Vector Graphics Zeichnung.
<html>
<svg>
<circle id="myCircle" class="important" cx="50%" cy="50%" r="100"
fill="url(#myGradient)"
onmousedown="alert('hello');"/>
</svg>
</html>

<time>
Definiert eine Datums-/Zeitangabe.
Das time-Element wird verwendet, um Zeitangaben

auszuzeichnen und Zeitangaben mit Metadaten
auszustatten, sodass ein Browser damit z. B. einen
interaktiven Kalender erzeugen kann.

<video>
Bindet eine Videodatei ein.
Videodateien sollen zukünftig mit diesem Element

eingebunden werden. HTML5 stellt wie beim Audioelement
einige Schnittstellen bereit, beispielsweise um die
Wiedergabe steuern zu können.
<video src="movie.mp4" autoplay controls></video>

document.getElementById("video").play();

<wbr>
Setzt einen möglichen Zeilenumbruch.

Neue relations für das <link> Tag

alternate
<link rel="alternate" type="application/rss+xml"
href="http://myblog.com/feed" />
<link rel="icon" href="/favicon.ico" />
<link rel="pingback" href="http://myblog.com/

xmlrpc.php">
<link rel="prefetch" href="http://myblog.com/main.php">

icon

xmlrpc.php">

pingback

xmlrpc.php">

prefetch

archives
<a rel="archives" href="http://myblog.com/archives">
old posts</a>

external
<a rel="external" href="http://notmysite.com">
tutorial</a>

license
<a rel="license" href="http://www.apache.org/licenses/
LICENSE-2.0">license</a>

nofollow
<a rel="nofollow" href="http://notmysite.com/
sample">wannabe</a>

tag
<a rel="tag" href="http://myblog.com/category/
games">games posts</a>

Microdaten
Einbinden maschinenlesbarer Informationen in HTML-
Dokumente.
Eindeutigkeit der Daten.
Kompatibilität zu anderen Formaten wie dem Resource

Description Framework (RDF) und der JavaScript Object
Notation (JSON) kompatibel ist.

Microdaten
<div itemscope itemtype="http://example.org/band">
<p>My name is <span itemprop="name">Neil</span>.</p>
<p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
<p>I am <span itemprop="nationality">British</span>.</p>
</div>

Attribute für Accessible Rich Internet
Applications (ARIA)
<ul id="tree1" role="tree" tabindex="0"
aria-labelledby="label_1">
<li role="treeitem" tabindex="-1"

aria-expanded="true">Fruits</li>
<li role="group">
<ul>
<li role="treeitem" tabindex="-1">Oranges</li>
<li role="treeitem" tabindex="-1">Pineapples</li>
...
</ul>
</li>
</ul>

Web Forms 2.0
Definierte Eingabetypen beispielsweise für
Internetadressen, Emailadressen, Datum und Zeitangaben,

Zahlenwerte, etc. - Die Prüfung auf syntaktische
Korrektheit kann dann vom Browser übernommen
werden, wobei natürlich alle eingehenden Daten vom
Backend wie bisher eingehend geprüft werden müssen.

Web Forms 2.0
Eingabefelder können als Pflichtfelder definiert werden
Dynamische Eingabefelder mit der Möglichkeit, weitere

Felder hinzuzufügen
Sinnvolle Attribute wie autocomplete (an/aus) oder

required für Formularfelder
Reguläre Ausdrücke (Regex) sowie "Ranges" (min/max)

für Eingabefelder

Neue Formularfeldtypen
Zweckgebundene Userinterface Elemente:
<input type="range" min="0" max="50" value="0" />
<input results="10" type="search" />
<input type="text" placeholder="Search inside" />
Validierung von Eingabewerte:

<style> :invalid { background-color: red; } </style>
<input type="color" />
<input type="number" />
<input type="email" />
<input type="tel" />
...

Definierbare Eingabetypen
<input type="email">
<input type="url">
<input type="number"> Ein numerischer Wert wird
erwartet
<input type="range"
min="10" max="100"
step="5" value="55"> Min / Max in 5er Schritten
auswählbar

Eingabefeld für Suchanfragen
<form action="http://www.google.com/search"
method="get">
<label>
Google:
<input type="search" name="q">
</label>
<input type="submit" value="Suchen">
</form>

Eingabefeld für Farben in sRGB 8-bit
Auswahl einer bestimmten Farbe mit Hilfe einer
Farbtabelle ohne Eingabe eines Farbwertes.
<input type="color">

Attribute für Eingabefelder
accept alt autocomplete autofocus checked
disabled form formaction formenctype formmethod
formnovalidate formtarget height list max
maxlength minmultiple name pattern placeholder
readonly required size src step
type value width

Datentyp für Datums- und Zeitangaben
<input type="day">
<input type="month">
<input type="year">
<input type="datetime"> Jahr, Monat, Tag, Stunde, Minute,
Sekunde und Millisekunde nach
UTC (Weltzeit)
<input type="date"> Jahr, Monat, Tag ohne Zeitzone
<input type="week">
<input type="time"> Stunde, Minute, Sekunde
und Millisekunde ohne Zeitzone

Javascript

Neue Selektoren
Elemente nach class ermitteln (DOM API)
var el = document.getElementById('section1');
el.focus();
var els = document.getElementsByTagName('div');

els[0].focus();
var els = document.getElementsByClassName('section');

els[0].focus();

Neue Selektoren
Elemente mit CSS Syntax ermitteln (Selectors API)

var els = document.querySelectorAll("ul li:nth-child
(odd)");
var els = document.querySelectorAll("table.test > tr >
td");

Javascript APIs
Clientseitige Speichermechanismen :
Web SQL Datenbanken, App Cache, Web Storage
Kommunikationmechanismen:
Web Sockets, Worker Workers
Desktop experience:
Mitteilungen, Drag and Drop API
Geolocation

Web SQL Datenbank
var db = window.openDatabase("Database Name", "Database
Version");
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM test", [],
successCallback, errorCallback);
});

Web Storage

Datenspeicherung durch den Client
HTML5 biete 2 neue Methoden, um Daten auf dem

Clientrechner zu speichern:
localStorage - Datensicherung ohne Zeitlimit

sessionStorage - Datensicherung für eine Session

Bisher wurde das mit Cookies umgesetzt. Cookoes eigenen

sich aber nicht für das Handling von grßeren Datenmengen,
da sie bei JEDEM Request an den Server abgerufen werden.
Das ist langsam und wenig effizient.
HTML5 ruft die Daten nicht bei jedem Aufruf ab, sondern nur
bei einer Abfrage. So stellt auch das Handling größerer
Datenmengen keine Beeinträchtigung der Performance dar.

Daten werden pro Website in einem eigenen, isolierten

Bereich gespeichert. Sie können nur über dieselbe Site
wieder abgerufen werden.
Zum Speichern und Abrufen der gespeicherten Daten wird
Javascript verwendet.

The localStorage Method
Die Mehode localStorage speichert Date ohne Zeitlimit. Die

Daten sind am nächsten Tag, in der nächsten Woche oder im
nächsten Jahr verfügbar.
Einen localStorage erzeugen und abrufen:
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

A user visits counter
<script type="text/javascript">
if (localStorage.pagecount) {
localStorage.pagecount=Number
(localStorage.pagecount) +1;
} else {
localStorage.pagecount=1;
}
document.write("Visits "+ localStorage.pagecount + " time
(s).");
</script>

Cache für Anwendungen
<html manifest="cache.manifest">
window.applicationCache.addEventListener('checking',
updateCacheStatus, false);
CACHE MANIFEST
# version 1
CACHE:
/html5/src/refresh.png
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png

Web Workers
main.js:
var worker = new Worker('extra_work.js');
worker.onmessage = function(event) {
alert(event.data);
};
extra_work.js:
self.onmessage = function(event) {
// Do some work.
self.postMessage(some_data);
}

Web Sockets
var socket = new WebSocket(location);
socket.onopen = function(event) {
socket.postMessage(“Hello, WebSocket”);
}
socket.onmessage = function(event) {
alert(event.data);
}
socket.onclose = function(event) { alert(“closed”); }
Implementierung von Full-Duplex Kanälen für eine

bidirektionale Kommunikation in Webbrowser und
Webserver (über einen TCP Socket).

Notifications
if (window.webkitNotifications.checkPermission() == 0) {
// you can pass any url as a parameter
window.webkitNotifications.createNotification
(tweet.picture, tweet.title,
tweet.text).show();
} else {
window.webkitNotifications.requestPermission();
}

Drag and Drop
document.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', 'Customized text');

event.dataTransfer.effectAllowed = 'copy';
}, false);

Geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function
(position) {
var lat = position.coords.latitude;

var lng = position.coords.longitude;
var options = { position: new google.maps.LatLng
(lat, lng) }
var marker = new google.maps.Marker(options);
marker.setMap(map);
});
}

CSS

CSS
Typographie
Visuelle Effekte
Übergänge, Transformationen und Animationen

CSS Selektoren
Selectoren Fließendes Blockelement

.row:nth-child(even) { div {
background: #dde; display: inline-block;
} }
.row:nth-child(odd) {
background: white;
}

CSS Selektoren
Spezifikation von Attributen Präzisere Ansprache im

input[type="text"] {
DOM
background: #eee;
h2:first-child { ... }
}
div.text > div { ... }
Negation
h2 + header { ... }
:not(.box) {
color: #00c;
}
:not(span) {
display: block;
}

Neue Zeichensätze
@font-face {
font-family: 'LeagueGothic';
src: url(LeagueGothic.otf);
}
@font-face {
font-family: 'Droid Sans';
src: url(Droid_Sans.ttf);
}
header {
font-family: 'LeagueGothic';
}

Texte abschneiden
div {
text-overflow: ellipsis;
}

Mehrspaltensatz
-webkit-column-count: 3;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

Textkonturen
div {
-webkit-text-fill-color: black;
-webkit-text-stroke-color: red;
-webkit-text-stroke-width: 4.00px;
}

Deckkraft und Transparenz
color: rgba(255, 0, 0, 0.75);
background: rgba(0, 0, 255, 0.75);

Abgerundete Ecken
border-radius: 0px;

Farbverläufe
background: background:
-webkit-gradient( -webkit-gradient(
linear, radial,
left top, 430 50,
left bottom, 0,
from(#00abeb), 430 50,
to(white), 200,
color-stop(0.5, white), from(red),
color-stop(0.5, #66cc00) to(#000)
) )

Schatten und Reflektion
text-shadow: -webkit-box-reflect:
rgba(64, 64, 64, 0.5) below 10px;
0px
0px
0px;
box-shadow:
rgba(0, 0, 128, 0.25)
0px
0px
0px;

Hintergrunderweiterungen
Größensteuerung Mehrfacher Hintergrund

#logo { div {
background:
background: url(logo.gif)
center center no-repeat; url(src/zippy-plus.png)
10px center no-repeat,
background-size:
contain; url(src/
} gray_lines_bg.png)
10px center repeat-x;
}

Übergänge
#box.left {
margin-left: 0;
}
#box.right {
margin-left: 1000px;
}
#box {
-webkit-transition: margin-left 1s ease-in-out;
}
3document.getElementById('box').className = 'left';
document.getElementById('box').className = 'right';

Animationen
@-webkit-keyframes pulse {
from { opacity: 0.0;
font-size: 100%; }
to { opacity: 1.0;
font-size: 200%; }
}
div {
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-direction: alternate;
}

Transformationen
-webkit-transform: rotateY(45deg);
-webkit-transform: scaleX(25deg);
-webkit-transform: translate3d(0, 0, 90deg);
-webkit-transform: perspective(500px)
#threed-example {
-webkit-transform: rotateZ(5deg);
-webkit-transition: -webkit-transform 2s ease-in-out;

}
#threed-example:hover {
-webkit-transform: rotateZ(-5deg);
}

HTML 5

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

HTML 5

Hochgeladen von

Copyright:

Verfügbare Formate

HTML 5

Montag, 18. Oktober 2010

Mit der Einführung des HTML5-Standards und der

Montag, 18. Oktober 2010

In diesem Grundlagen-Kurs erhalten Ein- und Umsteiger die

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Metadaten, die für das gesamte aktuelle HTML-Dokument

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Das script-Element kann jedoch auch im Dokumentkörper

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Accessibility (ARIA roles)

Web Forms 2.0 - Neue Eingabefelder

Multimedia - Audio Tag, Video Tag

2D/3D Zeichenfläche - Canvas, WebGL, SVG

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Jetzt Text, der üblicherweise kursiv geschrieben wird, also

Montag, 18. Oktober 2010

Kennzeichnet jetzt Text, der zwar stilistisch hervorgehoben

Montag, 18. Oktober 2010

Das em-Element kann nun verschachtelt werden, um die

Montag, 18. Oktober 2010

Das <hr>-Element symbolisiert nun einen thematischen

Dabei kann es weiterhin wie eine Linie aussehen. Muss

Montag, 18. Oktober 2010

Nun dient es nun der Auszeichnung von Kleingedrucktem,

Montag, 18. Oktober 2010

Das strong-Element zeichnet einen Text als inhaltlich

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Das article-Element umfasst einen unabhängigen

Montag, 18. Oktober 2010

Bezeichnet Inhalt, der thematisch zum umschließenden

Montag, 18. Oktober 2010

Audio soll zukünftig mit diesem Elementen eingebunden

<audio src="sound.mp3" controls></audio>

Montag, 18. Oktober 2010

Das canvas-Element erzeugt eine Zeichenoberfläche, auf

Die ersten Beispiele sind bereits im Netz ...

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Montag, 18. Oktober 2010

Flash, swf, ... aber nicht audio und video

Montag, 18. Oktober 2010

Das figure-Element erlaubt es, ein bestimmtes Medium