Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

HTML5 Grundkurs

Voraussetzungen für die HTML5-Entwicklung

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Neben ein paar Vorschlägen für Webeditoren, mit denen Sie dieses Video-Training nachvollziehen können, erklärt dieser Film das Grundgerüst für die HTML-Seiten, die in den folgenden Beispielen Anwendung finden.
09:18

Transkript

Bevor wir loslegen, brauchen wir natürlich irgendeine Vorform-Entwicklungsumgebung oder Editor. Klar bei HTML und damit auch bei HTML5 handelt es sich um ein Textformat. Das heißt, wir könnten jeden Texteditor nehmen Nehmen Sie im Zweifel einfach den Web-Editor, den sie sonst her nehmen. Man musste für das Videotraining Vorauswahl treffen. Weil die Aufzeichnung auf einem Windowssystem stattfindet, habe ich mich für WebMatrix von Microsoft entschieden. Verfügbar unter microsoft.com/webmatrix. Wird dann umgeleitet auf microsoft.com/web/webmatrix. Das ist ein kostenfreier Editor, der eben unter anderem auch HTML5 Features unterstützt. Sie sehen hier etwas verborgen das HTM5 Logo. Wie gesagt, ist aber ansonsten relativ egal was Sie verwenden. Bei einigen der Javascripts polymath Schnittstellen brauchen Sie unter Umständen einen zumindest lokalen Webserver, um das vollkommen nutzen zu können. Da reicht es also nicht eine Datei mit Endung HTML irgendwo auf dem Lokalsystem abzulegen und dann per Doppelklick die zu starten. Da würde ich aber entsprechend darauf hinweisen. Deswegen nehme ich das hier als Werkzeug und setze auf WebMatrix, weil es diese Webserver bereits integriert. Das heißt, es läuft sozusagen out of the box. Ich will natürlich trotzdem ein paar andere Tools erwähnen. Wie gesagt, Sie halten sich natürlich in Ihren persönlichen Referenzen, wenn ich hier zur Werbung machen, ich setzte persönlich im produktiven, professionellen Umfeld auf WebStorm, wie gesagt nur persönlich der Editor meiner Wahl ist allerdings kostenpflichtig. Gibt es schon eine 30 Tages-Trial für verschiedene Betriebssysteme. Das heißt im Zweifel ist es vielelicht eine interessante Alternative. Was definitiv kostenlos ist und auch für mehrere Platformen zur Verfügung steht ist Komodo Edit von der Firma ActiveState. ActiveState hat auch eine komplete kostenpflichtige Entwicklungsumgebung, die heißt dann Komodo IDE. Ist hier oben mit dem Link bezeichnet und darauf hingewiesen, aber die Schaltfläche darüber Download Now , die würde dann entsprechend dafür sorgen, dass Komode EDIt heruntergeladen werden kann und das ist eben die kostenfreie Variante. Ich starte, wie gesagt mal WebMatrix auf meinem System und beim Start erscheint standardmäßig so eine Auflistung, wo mann bestehende Anwendungen oder Websites öffnen kann. Auch Liste seiner Websites erhält, oder eben eine neue anlegen kann. Gibt dann beispielsweise ein Vorlagen- oder Appkatalog. Kann also eine entsprechende Vorlage herauspicken. Es gibt den Bereich HTML und da git's eine leere Website und Boilerplate. Sehen wir jetzt mal leere Website. Kann hier noch einen Namen überlegen, ich nehme einfach mal HTML5. Niicht sehr einfallsreich, aber die Vorlage wird jetzt hier entsprechend eingespielt und installiert. Und jetzt sind wir dann tatsächlich in unserem Editor. Das heißt, wir haben uns angenommen den HTML5 heißt die. Wie haben hier standardmäßig ein Icone und haben eine HTML Datei. Und diese HTML Datei ist sozusagen, der Ausgangsstand, den wie generell verwenden werden, wenn wir mit HTML5 arbeiten. Und hier gibt es jetzt schon so 1,2 Dinge zu beachten. Wollen Sie die Datei allerdings genau anschauen, zeige ich noch kurz wie Sie neue Dokumente erstellen können. Funktioniert jedenfalls fast eben anderen Editor auch. Wir haben so ein paar Ansichten, z. B Site Dateien etc. Natürlich interessiert uns Dateien und über die rechte Maustaste können wir Kontext wählen, z. B. neue Datei, dann bekommen wir eine Liste von empfohlenen Dateitypen. Wenn Sie das, was Sie wollen hier nicht finden, klicken Sie vielleicht links auf Alle, dann bekommen Sie die komplette Liste, aber was uns hier natürlich interessiert ist HTML und dann könnte man hier einen Namen eingeben, legt eine Datei an. Na ja, die sieht eigentlich genauso aus, wie die Datei, die wir gerade hatten. Deswegen können wir diese Datei auch entsprechend hier löschen. Jetzt ist sie weg und wir haben weiterhin unsere index.html Datei. Das erste, was vielleicht auffällt, istgleich die erste Zeile der DOCTYPE. Also der ja, Dokumenttyp. Es gibt für HTML4 einen speziellen DOCTYPE, es gibt für XHTML mehrere sogar spezielle DOCTYPES, denn die sagen dem Browser in welchem Modus der Browser sozusagen operieren soll. Es gibt 2 Modi, die heißen bei den Browser teilweise immer ein bisschen anders, aber es gibt prinzipiell ein Modus, der ist aktiv und unterstützt sozusagen die neueste und vor allem die korrekte Spezifikation und da gibt es den sogenannten Quirks-Modus, das ist eine Art Kompatibilitätsmodus, der würde vor allem deswegen geschaffen, weil Browser vor allem in den Anfangsjahren sehr viel haben durchgehen lassen. Das ist kein Problem, allerdings haben sich dann Webentwickler auch dazu hinreißen lassen Schlampiger Code zu schreiben. Also schlampiger Marker hat man jedenfalls und deswegen, ja Mr. Browser da hat teilweise etwas vergebender als es sein sollte, unterstützt dafür aber auch neuere Sachen teilweise nicht. Wichtig ist es also, dass wir in diesem Full-Feature-Modus sind, im Standardmodus. Wie machen wir das, der Browser schaut unter anderem in den DOCTYPE und entscheidet auf Basis des DOCTYPES haben wir keinen, sonden eher Quirks-Modus. Haben wir einen aktuellen DOCTYPE, dann schalten wir in Standard-Modus. Problem ist, HTML5 als sie konzessioniert wurde, würde sie sehr sehr für in sukzessiven Browsern umgesetzt. Allerdings ist es wichtig, dass ein aktuelles HTML5-Dokument, vielleicht doch in dem älteren Browser korrekt angezeigt wird. Wäre also schön, wenn auch ein älterer Browser, der noch gar nicht weiß, dass es HTML gibt, Diese HTML5 Inhalte korrekt anzeigt. Zumindest die, die der Browser schon kennt Geht es also darum, dass wir jetzt sagen diese Seite ist HTML5, dass der Browser da nicht denkt , OK, das ist jetzt ein HTML5 Doctype, den kenne ich nicht, deswegen schalte ich den Kompatibilitätsmodus und dann schaut die Seite vielleicht aus wie Kraut und Rüben. Deswegen ht man sich dazu entschieden für den Doctype nicht einfach einen speziellen HTML5 Doctype mit referenzierten HTML5 Schema, oder HTML5 dtd anzugeben, sondern statdessen einfach diese Kurzversion einzusetzen. Doctype HTML sonst nichts. Und das ist etwas, wo auch ältere Browser sagen ''Ok, hat ein DOCTYPE, geh ich mal in dem Standardmodus''. Und das ist schon mal der wichtigste Aspekt, den wir hier haben und den wir beachten müssen. Der Rest des Aufbaus ist eigentlich relativ unspannend. Ich habe HTML, ich habe head Abschnitt, da drin habe ich meta und title und ich habe einen body Abschnitt. Das ist so diese Standardmäßige Aufbau. Ich brauche nicht mal alle diese Elemente, denn zum eins sind sind die Browser vergeben, zum anderen sagt die Spezifikation bei einigen dieser Punkte auch tatsächlich eigentlich ist das optional. Aber es gibt ja zum einen das fachlich richtige, und zum anderen auch etwas was richtig aussieht und mein Ziel ist es natürlich so weit wie möglich kurz zu fabrizieren, vor allem Markup, der nicht nur korrekt ist, sondern auch korrekt aussieht. Und deswegen verwenden wir eben immer alle diese Elemente. Das ist also wirklich unsere Grundstruktur. DOCTYPE, HTML head Abschnitt, mit title drin zumindest, body und alle Elemente werden geschlossen. Zumindest alle diese Elemente, die einen Inhalt haben. Title hat einen Inhalt, nämlich den Seitentitel, zum Beispiel HTML 5. body hat auch einen Inhalt, Sie müssen also jeweils geschloßen werden. Schließen des body- Elements, Schließen des title- Elements, meta hat keinen Inhalt. Das heißt wir können hier eigentlich verkürzen und jetzt ist das immer noch korrekt, denn wie gesagt ich muss meta nicht schließen, der Browser weiß, dass meta ein Element ohne Inhalt ist, deswegen warnt der Browser, wenn so ein meta- Element kommt, ein ''meta tag'', nicht darauf, dass irgendwo das Ganze noch geschloßen wird, entweder die Kurzform oder jetzt hier in dieser Langform. Das heißt, das ist so auch absolut korrekt. Und das ist auch die Ausgangsbasis, die wir jeweils in unseren Arbeiten oder in unserem Code verwenden werden. Abschließend sollten wir das Ganze natürlich irgendwie im Browser aufrufen. Es gibt hier so eine Scahltfläche ''Ausführen''. das würde jetzt den Standardbrowser öffnen und dann die Website. Das heißt es wird die Seite geöffnet, also diese HTML5 Site, dann gegebenenfalls Standarddokument angezeigt wird. Etwa index.html, es wird aber nicht die aktuell geöffnete Datei ausgeführt. Das ist sehr sehr wichtig, gerade wenn eine Webapplikation aus mehreren Dateien besteht, die dann zusammen eine Seite für den Browser ergeben. Man denkt an Templates Lösungen, es ist relativ schwierig zu sagen ''Gut, zeig jetzt exakt diese Datei an''. Wenn Sie nicht direkt hier oden auf den großen Pfeil klicken, sondern hier unten auf Dispute, und dann sehen Sie auch eine Liste von allen installierten Browsern und können dann eben einen auswählen. also ich könnte jetzt beispielweise explizit den Google Chrome verwenden. Der lädt dann. Sie sehen ''localhost:10111'', Dieser Port wird zufällig zugewiesen, ist bei Ihnen wohl ein anderer. Ja, und dann erscheint hier standardmäßig index.html als Standarddokument. Sie würden entweder eine Verzeichnisauflistung oder Fehlermeldung bekommen, wenn Sie keine index.html Datei hätten. Könnten aber natürlich hinten jeweils die entsprechende Datei, oder den entsprechenden Dateinamen anhängen. Sie sehen auch HTML5 steht hier oben als Titel. Das hat also schon mal wunderbar funktioniert. Und damit sind wir gerüstet für alle weiteren Experimente rund um HTML5.

HTML5 Grundkurs

Machen Sie sich mit HTML5 fit für das Webdesign von morgen, angefangen vom Erstellen einfacher HTML-Dokumente bis hin zur Gestaltung anspruchsvoller Layouts.

3 Std. 11 min (29 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!