Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
1
Abiturprüfung Informatik
HTML4.01 & HTML5 im Vergleich von Marco Schönleber
2
Allgemeines zu HTML Problem: „wie tauscht man Informationen auf digitalem Weg einfach, schnell und strukturierend aus?“ - Cern Lösung: Hypertext Markup Language HTML * HTML * HTML 5 *
3
Allgemeines zu HTML5 : Web Hypertext Application Technology Working Group (WHATWG): HTML5: “Last Call” Mai 2011: World Wide Web Consortium (W3C): 2014 soll HTML5 von W3C offiziell verabschiedet werden
4
Die wichtigsten Unterschiede
HTML 4 HMTL5 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" " <!DOCTYPE html> div-Bereiche mit unterschiedlichen id‘s Bsp: <div id=„inhalt“> </div> neue strukturierende Elemente: <article> <aside> <header> <nav> <section> <footer> (<dialog> Chrome & Safari)
5
Unterschiede in der Darstellung: Beispiel für ein1-spaltiges Layout
HTML 4 HTML5 <div id=„kopf“> Bereich Kopf </div> <div id=„steuerung“> Bereich Steuerung <div id=„inhalt“> Bereich Inhalt <div id=„fuss“> Bereich Fuß <header> </header> <nav> </nav> <section> </section> <footer> </footer>
6
CSS: Design der Elemente
HTML4 HTML5 #kopf { background-color: yellow; } #steuerung background-color: orange; #inhalt background-color: yellowgreen; #fuss background-color: red; header nav section footer
7
Unterschiede in der Darstellung
- Eigene Tags benennen und in CSS verwenden: HTML5 Quellcodeauszug: CSS -codeauszug:
8
Unterschiede in der Funktion
HTML4.01: Abspielen von Video- & Audiodateien? Ja, aber nur mit zusätzlichem Plugin für den Browser! - Quicktime-, Shockwave-, WMP- oder Flashplayer-Plugin (- oder man bettet eine Seite via <iframe> ein)
9
Unterschiede in der Funktion
HTML5: Abspielen von Videodateien (.mp4, .webm, .ogg) Unterstützte Browser:
10
Unterschiede in der Funktion
HTML5: Abspielen von Audiodateien (.mp3, .wav, .ogg) Unterstützte Browser:
11
In Quellcode einfügen:
Videodatei movie.webm: Audiodatei audio.ogg: Optionen: autoplay, height & width, loop, muted, poster,
12
Neu in HTML5 <details> (Chrome, Safari) <canvas>
<embed> <figure> & <figcaption> <hgroup> <mark> <meter> (ausser IE) <progress>
13
Fazit HTML5 ist benutzerfreundlich HTML5 noch nicht fertig
Webseiten: „never touch a running system“ Browserunterstützung?
Ähnliche Präsentationen
