Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Abiturprüfung Informatik

Ähnliche Präsentationen


Präsentation zum Thema: "Abiturprüfung Informatik"—  Präsentation transkript:

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" "http://www.w3.org/TR/html4/strict.dtd"> <!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?


Herunterladen ppt "Abiturprüfung Informatik"

Ähnliche Präsentationen


Google-Anzeigen