Successfully reported this slideshow.
HTML 5       Erster Einblick, H. Mittendorfer                 http://www.whatwg.org/P. Kröner: „HTML 5- Webseiten Innovati...
HTML 5•   Stammt nicht vom W3C, sondern von der whatwg    (www.whatwg.org)•   W3C Working Draft 11 October 2012•   HTML 5 ...
Video einbetten http://www.whatwg.org/demos/2008-sept/video/video.html
Proprietär versus Standard
<Video>Scenario: Embedding a video  <video src="firefox.ogg" controls></video>To make it autoplay:  <video src="firefox.og...
Drag and Drophttp://www.whatwg.org/demos/2008-sept/dnd/dnd.html
CANVAShttp://www.whatwg.org/demos/2008-sept/color/color.html
Spiele mit Canvashttp://www.chip.de/artikel/HTML5-Das-Web-von-morgen-4_41539553.html
Lokales Speichernhttp://www.whatwg.org/demos/2008-sept/editor/editor.html
<form>Scenario: A text editor that stores the users files client-side.  Start with a simple text editor:    <form name=edi...
Validatorhttp://html5.validator.nu/
Plain HTML5
Wiederbelebt aber rein semantisch• <b> Hervorhebung (statt <strong>)• <i> Namen und Begriffe (statt <span>)• <hr> Inhaltli...
Rausgeschmissen•   <acronym> dafür <abbr>•   <applet> dafür <object>•   <dir> dafür <ul>•   ersatzlos: <frame>, <frameset>...
Der <div> lebt noch, aber es gibt neue,     strukturbildende Elemente•   <section>•   <header>, <footer>•   <nav>•   <asid...
Und ganz neu..• <time>• <mark>• <figure>, <figcaption>• <video> <audio>• <canvas>• <ruby>, <rp>, <rt>
Upcoming SlideShare
Loading in …5
×

Html5 einführung

1,184 views

Published on

Einführung in HTML 5

  • Be the first to comment

  • Be the first to like this

Html5 einführung

  1. 1. HTML 5 Erster Einblick, H. Mittendorfer http://www.whatwg.org/P. Kröner: „HTML 5- Webseiten Innovativ und zukunftssicher
  2. 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. 3. Video einbetten http://www.whatwg.org/demos/2008-sept/video/video.html
  4. 4. Proprietär versus Standard
  5. 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="◼" onclick="video.pause();"> <input type=button value="▶" onclick="video.play();"> </p>http://www.whatwg.org/demos/2008-sept/
  6. 6. Drag and Drophttp://www.whatwg.org/demos/2008-sept/dnd/dnd.html
  7. 7. CANVAShttp://www.whatwg.org/demos/2008-sept/color/color.html
  8. 8. Spiele mit Canvashttp://www.chip.de/artikel/HTML5-Das-Web-von-morgen-4_41539553.html
  9. 9. Lokales Speichernhttp://www.whatwg.org/demos/2008-sept/editor/editor.html
  10. 10. <form>Scenario: A text editor that stores the users 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. 11. Validatorhttp://html5.validator.nu/
  12. 12. Plain HTML5
  13. 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. 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. 15. Der <div> lebt noch, aber es gibt neue, strukturbildende Elemente• <section>• <header>, <footer>• <nav>• <aside>• <article>• <hgroup>
  16. 16. Und ganz neu..• <time>• <mark>• <figure>, <figcaption>• <video> <audio>• <canvas>• <ruby>, <rp>, <rt>

×