Einführung in HTML 5

1. HTML 5
Erster Einblick, H. Mittendorfer
http://www.whatwg.org/
P. Kröner: „HTML 5- Webseiten Innovativ und zukunftssicher

2. HTML 5
• Stammt nicht vom W3C, sondern von der whatwg
(www.whatwg.org)
• W3C Working Draft 11 October 2012
• HTML 5 ist XHTML und mehr
• Kümmert sich um Vieles, was bisher nicht Sache
von HTML war.

3. Video einbetten
http://www.whatwg.org/demos/2008-sept/video/video.html

4. Proprietär versus Standard

5. <Video>
Scenario: Embedding a video
<video src="firefox.ogg" controls></video>
To make it autoplay:
<video src="firefox.ogg" controls autoplay></video>
Remove controls and add script:
<script> var video = document.getElementsByTagName('video')[0]; </script>
<p>
<input type=button value="&#x25FC;" onclick="video.pause();">
<input type=button value="&#x25B6;" onclick="video.play();">
</p>
http://www.whatwg.org/demos/2008-sept/

6. Drag and Drop
http://www.whatwg.org/demos/2008-sept/dnd/dnd.html

7. CANVAS
http://www.whatwg.org/demos/2008-sept/color/color.html

8. Spiele mit Canvas
http://www.chip.de/artikel/HTML5-Das-Web-von-morgen-4_41539553.html

9. Lokales Speichern
http://www.whatwg.org/demos/2008-sept/editor/editor.html

10. <form>
Scenario: A text editor that stores the user's files client-side.
Start with a simple text editor:
<form name=editor>
<p><textarea name=data></textarea></p>
</form>
Then add Open and Save buttons:
<p>
<label>Filename: <input name=filename></label>
<input type=button value="Open" onclick="doOpen()">
<input type=button value="Save" onclick="doSave()">
</p>
Saving:
<script>
function doSave() {
var filename = document.forms.editor.filename.value;
var data = document.forms.editor.data.value;
localStorage.setItem('file-' + filename, data);
}
</script>

11. Validator
http://html5.validator.nu/

12. Plain HTML5

13. Wiederbelebt
aber rein semantisch
• <b> Hervorhebung (statt <strong>)
• <i> Namen und Begriffe (statt <span>)
• <hr> Inhaltlicher Bruch, stärker als Absatz
• Das CSS formatiert und sonst keiner!

14. Rausgeschmissen
• <acronym> dafür <abbr>
• <applet> dafür <object>
• <dir> dafür <ul>
• ersatzlos: <frame>, <frameset>, <noframes>, <big>,
<font>, <center>, <strike>, .. (alle
Präsentationselemente)
• aber wieder hineinurgiert: <iframe>

15. Der <div> lebt noch, aber es gibt neue,
strukturbildende Elemente
• <section>
• <header>, <footer>
• <nav>
• <aside>
• <article>
• <hgroup>

16. Und ganz neu..
• <time>
• <mark>
• <figure>, <figcaption>
• <video> <audio>
• <canvas>
• <ruby>, <rp>, <rt>