Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

HTML5 für Webdesigner

HTML5: Layoutbereiche im Überblick

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Auf Webseiten gibt es verschiedene Layoutbereiche, die früher alle mit div ausgezeichnet wurden. In HTML5 gibt es dafür spezielle Elemente, die dieser Film kurz vorstellt.

Transkript

Fast jede Webseite lässt sich in bestimmte Layout-Bereiche unterteilen, in denen dann jeweils verschiedene Inhalte sitzen. Hier z.B. beim HTML5 Doctor ist oben der Kopfbereich mit Logo und Slogan hier drunter - "tagline" heißt es manchmal auch im Englischen. Hier gibt es eine Meta-Navigation, hier gibt es die Hauptnavigation für die Webseiten mit einem Suchfeld, das ist oft so da drunter. Dann der Inhaltsbereich mit verschiedenen Abschnitten von Inhalten. Und ganz unten drunter dann hier ein Fußbereich mit Informationen über die ganze Site und zusätzlichen Infos. Solche und ähnliche Bereiche lassen sich fast immer finden, wie z.B. noch eine Seitenspalte mit zusätzlichen Inhalten. Hier wird das zweispaltig, hier ist auch noch eine Seitenspalte, hier ist es einspaltig. Solche und ähnliche Inhaltsbereiche gibt es fast überall. Und bis jetzt gab es dafür eigentlich keine richtigen HTML-Elemente, da wurde eigentlich immer nur gedifft. In HTML5 ist das etwas anders. Es gibt hier richtige Elemente für diese Layout-Bereiche, die ich Ihnen jetzt ganz kurz im Überblick vorstellen möchte. Zunächst einmal gibt es auf fast jeder Seite einen Kopfbereich. Dafür hat man traditionell ein Diff-Element genommen und dem dann eine ID oder eine Class namens "Header" oder "Kopf" oder "Kopfbereich" oder etwas ähnliches gegeben. In HTML5 gibt es dafür ein neues Element und das hat den treffenden Namen "Header". Es gibt also jetzt nicht nur den "Head" oben ganz am Anfang des Dokumentes, unsichtbar, der den Vorspann für die Seite enthält, sondern es gibt jetzt auch einen "Header", das ist der Kopfbereich. Navigationsbereich kann es durchaus mehrere geben auf einer Seite. Auch die wurden traditionell mit einem Diff ausgezeichnet. Damit man die beiden überhaupt auseinanderhalten und gestalten konnte, brauchte man wieder eine ID oder eine Class. Häufige Namen waren "Nav" oder "Navi-Bereich". In HTML5 heißt das neue Element "Nav". "Inhaltsbereich" gibt es auf fast jeder Webseite, wo der Hauptinhalt drin ist und Nebeninhalte, und das ist der Hauptbereich auf der Seite. Auch hierfür wurde natürlich früher das Diff genommen. Sie werden es erraten: Viel mehr kommt hier nicht. Und dann hat man ID oder Klassen genommen für "Main" oder "Hauptinhalt" oder "Content". Es gab keine Konventionen, wie diese Bereiche wirklich hießen. In HTML5 ist brandneu das Element "Main", das den Hauptinhaltsbereich umschließt. Header und Nav können öfter auftauchen auf einer Seite, Main darf es nur ein Mal geben. Auch wenn Ihnen das beim Header vielleicht komisch vorkommt, dass der öfter auftaucht, da erfahren Sie später noch mehr dazu. Zusätzliche Inhalte:" Sidebars", Seitenspalten, die aber natürlich nicht immer an der Seite stehen müssen, wurden früher - man glaubt es nicht - mit einem Diff gekennzeichnet und einer ID, oder Class Sidebar, oder Col 1, 2, 3 oder irgendwie so etwas. Heutzutage gibt es "Aside" für solche Sachen. "Aside" - also frei übersetzt "Nebensächliches" - und das dient dazu, um Layout-Bereiche in HTML5-Dokumenten auszuzeichnen, die zusätzliche Inhalte enthalten. Und last but not least haben wir einen Fußbereich auf fast jeder Seite. Das war früher natürlich ein Diff und hatte eine ID oder eine Class wie "Footer" oder "Fußbereich". Oder "Untendrunter" - habe ich auch schon gesehen, solche Namen, da konnte man der Phantasie freien Lauf lassen. Inzwischen gibt es in HTML5 ein Element dafür und das trägt den treffenden Namen "Footer". D.h. also, für Layout-Bereiche braucht man das Diff-Element nicht mehr. Das Diff-Element hat trotzdem noch seine Berechtigung. Das ist nämlich ein neutrales Element. Immer wenn man andere Elemente gruppieren möchte, ohne dass sie eine bestimmte Bedeutung haben - zu Zwecken der Gestaltung oder so etwas - dann nimmt man das Diff. Ansonsten gibt es zum Gruppieren von Elementen hier Header, Nav, Main, Aside und Footer. Es gibt noch ein paar mehr, aber für die Layout-Bereiche ist das ein guter Einstieg.

HTML5 für Webdesigner

Lernen Sie, wie Sie in HTML5 Layoutbereiche strukturieren, die richtigen Elemente für Inhalte benutzen, Formulareingaben optimieren und Multimedia ohne Plug-in einbauen.

3 Std. 14 min (39 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!