JavaScript Grundkurs

HTML5

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
HTML5 ist der zukünftige Standard im Web. In diesem Film werden Ihnen die ersten Neuerungen von HTML5 vorgestellt, die sich aufgrund der Neuerungen und Tags bzw. Attribute ergeben.
08:46

Transkript

Im Laufe dieses Trainings war immer wieder von HTML5 die Rede. Wir wollen uns jetzt diesen Punkt etwas genauer widmen und klären was sich eigentlich hinter diesem Schlagwort verbirgt. Es ist natürlich eine neue Version von HTML. HTML4 ist derzeit noch der Standard den alle Browser im Web unterstutzen und dieser Standard ist auch schon sehr alt:1997 ist er verabschiedet worden. Und diese Versionsnummer 5 macht deutlich, dass das der Nachfolger sein soll, aber eigentlich ist HTML 5 viel mehr als nur HTML . HTML 5 hat sehr viel mit JavaScript zu tun, beziehungsweise einem Objektmodell was jeder Webseite zu Gunde liegt, im sogennante DOM: Document Object Model. Von daher kann man auch von DOM5 reden oder auch HTML5 als eine Erweiterung von JavaScript, von dem Objektmodell von JavaScript betrachten. In der derzeitigen Phase ist das noch etwas abstrakt, aber wir wollen uns anschauen, was HTML5 wirklich für Sie bringen wird, beziehungsweise für das Web bringen wird. Sie sehen hier eine Webseite mit einem neuen Grundgerüst. Das heißt, Sie erkennen hier, dass es zum Beispiel in den Grundgerüst nach dem HTML5 Standard eine neue DOCTYPE-Anweisung gibt. Auch sollten Sie erkennen, dass die Metainformation im Header viel kürzer notiert werden als bisher und Sie sollten erkennen, dass es hier neue Tags gibt, beispielsweise header oder nav oder hier auch article, section. Offensichtlich gibt es also neue Tags, die die bisherigen Tags erweitern. Das interessante ist aber in welcher Hinsicht. Es ist die sogenannte Semantiik. Semantik ist die Bedeutung. Es sind in diesem Falle Strukturinformationen. Strukturinformationen, die genauer beschreiben, was eigentlich als Inhalt in so einem Block hier enthalten ist. Sie können sich vorstellen, was ein Header ist. Das ist ein Überschriftenbereich, allerdings ist eine visuelle Vorstellung vollkommen falsch. Es geht nicht darum, dass dieser Bereich oberhalb von einem anderen Bereich einzusortieren oder anzuzeigen ist, sondern es ist wirklich nur eine Bedeutung, die natürlich mit einer visuelen Darstellung gekoppelt werden kann. Wenn Sie sich die Optik von dieser Seite einmal ansehen, Dann haben Sie im Grunde überhaupt keine erkennbare Struktur, die hier mit festgelegt wird. Es verhält sich im Wesentlichen so, als würde man dort divs oder gegebenenfalls Absätze notieren. aber für ein Ausverten des Programm wir ein Suchmaschine oder ein Lesegerät für Sehbehinderte oder aber mobile Applikationen mit klein Bildschirmenen sind das strukturelle Bedeutungen, die man in einer gewissen Weise nutzen kann. Eine Suchmaschine könnte zum Beispiel zu diesem Text noch eine Metainformation aufnehmen, dass das als eine Art Überschrift zu sehen ist und hier könnte sie eine Navigationsstruktur erkennen, die sie beispielsweise überhaupt nicht spidern brauch und lesegeräte für Sehbehinderte könnten das auch vorlesen, könnten also sagen hier ist die Navigation. Diese Links hier sind zum Navigationsbereich zu zahlen. Von daher wird diese sogenannte Semantik ein ganz großes Schwerpunkt für HTML5 und auch ein Highlight, wobei man auf keinen Fall die visuelle Repräsentation dort in den Vordergrund stellen darf. Es ist sogar so, dass die visuelle Umsetzung erhebliche Schwierigkeiten macht. Wir schauen uns diese Seite mal mit Firebug an, indem Sie wieder mit der rechten Maustaste klicken und Element untersuchen anklicken. Und tatsächlich werden diese Elemente auch genau so auftauchen, wie Sie sie im Quelltext notiert haben. Etwas ganz anderes ist es jedoch, wenn Sie diese Seite in einen Internet Explorer laden. Sie können sich hier über die Entwicklertools die Struktur anzeigen. Und auch diese sieht gut aus. Allerding bin ich jetzt im Browsermodus IE9. Wenn ich hier umstelle auf beispielsweise in Internet Explorer 8 oder in die sogenannte Kompatibilitätsansicht umschalte, dann werden sich Dinge verändern. Sie sehen hier dass der Tag header, den der Internet Explorer 8 noch nicht kennt, er ist noch nicht HTML5 kompatibel, dass er diesen Tag einfach abgeschlossen hat. Er hat ein leeres Element daraus gemacht, darunter wurde der Text, aus diesem knoten herausgerendert und hier gibt es plötzlich ein Element / header und auch das wird als leer verstanden, genau so mit nav und allen andern Tags aus dem neuen HTML5-Standard. Dieses Verhalten, dass es als leere Elemente betrachtet wird, erlaubt es dann auch nicht, diese als Blockelemente mit Stylesheet zu formatieren und beispielsweise dafür zu sorgen, dass Sie in einer gewissen Weise vernünftig in der Webseite angezeigt werden. In allen neueren Browsern geht das, in IE9 entsprechend auch, aber eben in den alten Browsern vom Typ Internet Explorer nicht. Interessanterweise andere Browser ignorieren diese Elemente auch, aber in einer anderen Art und Weise. Und obwohl sie ignoriert werden, könnte man sie mit Stylesheet formatieren. Das geht im Internet Exolorer nicht. Von daher würde eine Darstellung dieser Elemente zur Zeit noch viele Probleme bereiten, sofern Sie Internet Explorer bis zur Version 8 unterstützen wollen. Mehr für das Auge und für das Ohr gibt es aber auch. Es ist in HTML5 vorgesehen, dass sowohl Tondateien als auch Videodatein nativ in Webseiten implementiert werden können. Nicht wie bisher mit einem Embedded Tag, beziehungsweise als Flash, sondern wirklich nativ und das soll auf die entsprechenden Engines auf dem Pc, auf der Plattform direkt durchgreifen. Dazu gibt es einen neuen Tag oder ein neues Element video und die Syntax ist relativ einfach zu verstehen. Sie geben über Source die Videodatei an und können die Breite und Höhe spezifizieren, so wie noch mit einigen weiteren Attributen bestimmte Verhaltensweisen von dem Player. Allerdings werden diese Videos noch nicht in allen Browsern vernünftig unterstützt und es setzt auch vorraus, dass auf einer Plattform ein spezifischer Player auch installiert ist. Hier ist eine zweite Variante von diesem Tag, in dem Sie im inneren über ein Source-Element verschiedene Formate von einem Video angeben und der Browser wird, so fern er HTML5 fähig ist, der Reihe nach durchprobieren, ob er ein bestimmtes Fomat unterstützt, denn auch hier muss man leider festhalten, dass aktuell die sogenannten Kodex noch nicht in allen Browsern gleich unterstützt werden. Das ist ein sehr guter Ansatz mit dieser Darstellung dieser nativen Implementierung von Videos, aber es wird noch etwas Zeit ins Land gehen, bis das in allen Browsern wirklich verfügbar ist. Selbst einige moderne Browser wie der Opera, kommen hier noch nicht so gut zu Recht und das Gleiche gilt im Grunde auch für die Möglichkeit Tondateien nativ über HTML5 in Webseiten zu implementieren. Sie sehen hier einen neuen Tag audio, den es genau so wie den video Tag in zwei Varianten gibt, um verschiedene Kodex, verschiedene Audioformate einzubinden. Und einige Browser unterstützen den und anderen ist es noch nicht ganz so weit gedienen. Sie erkennen, dass es hier ein Player-Element gibt, worüber man diese Tondatei starten kann. Sie kann auch automatisch starten, das kann man alles einstellen. Eine weitere Neuerung von HTML 5 betrift Formulareingaben. Sie sehen hier, dass es bestimmte neue Werte für das Attribut type gibt, beispielsweise color, email, url, number, Sie können hierrüber einen Farbauswähler festlegen, Sie können eine Datumkomponente festlegen, Sie können einen Bertebereich festlegen, also viele Dinge, die man so bei der Engegennahme von Benutzereingaben braucht. Leider ist es so, dass die Unterstützung aktuell in den Browsern sehr sehr unterschiedlich nur vorhanden ist. Schauen wir uns diese Datei einfach in drei Browsern parallel an und Sie erkennen auf den ersten Blick, dass Opera hier eine viel weitergehende Unterstützung zeigt, wie beispielsweise Internet Explorer oder auch Firefox. Das sieht man schon visuell, dass hier gewisse Widgets vorhanden sind, die in den anderen Browsern fehlen oder auch hier der Farbwider. Von daher wird man auf diese Formularelemente in den nächsten Jahren noch verzichten müssen, wenn man ein einheitliches Layout in verschiedenen Browsern gewährleisten möchte. Die weiteren Erweiterungen von HTML5 sind nun sehr stark in Hinsicht auf JavaScript zu sehen und sollen auch an dieser Stelle erst behandelt werden, das heißt, wenn wir genügend JavaScript Grundlagen haben, um diese auch zu verstehen und ausnutzen zu können, wobei es noch einige Spezialitäten gibt, die wir hier in diesem Training überhaut nicht ansprechen werden, Es ist immerhin ein JavaScript Training und kein HTML5 Training.

JavaScript Grundkurs

Lernen Sie die Möglichkeiten der universellen Sprache JavaScript kennen und machen Sie sich mit der Syntax vertraut, um Ihre Web-Applikationen durch effektive Skripts zu ergänzen.

8 Std. 20 min (134 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!