Little Boxes – die HTML-Basics

Layoutbereiche erstellen: header, nav, footer und main

Testen Sie unsere 1931 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Eine typische Webseite besteht aus einem Kopfbereich, einem Navigationsbereich, einem Inhaltsbereich und einem Fußbereich. Zusätzlich umschließt ein fünfter Bereich alle anderen Bereiche wie ein Schutzumschlag.

Transkript

Fast alle Webseiten haben typische Layout-Bereiche, hier zum Beispiel sehen Sie die Startseite von little-boxes.de. Und das beginnt oben mit einem Kopfbereich, der die Identität einer Seite bestimmt, Logo und eventuell noch'n Slogan. Dann kommt ein Navigationsbereich, hier horizontal mit verschiedenen Navigationspunkten und einer Suchfunktion. Dann kommt ein Inhaltsbereich, der ein-, zwei- oder dreispaltig ist, meistens. Und ganz unten ein Fußbereich, in dem zusätzliche Informationen stehen und meistens auch ein Impressumslink und anderer Flichtkram. Das sind so die typischen Layout-Bereiche für eine Webseite. Und diese Layout-Bereiche, die werden Sie jetzt hier im Editorfenster zwischen body und /body schon einmal einbauen. Es gibt ein paar recht neue Elemente, HTML 5-Elemente, die diese Bereiche kennzeichnen. Der Kopfbereich zum Beispiel, der heißt header. So, und der bekommt eine id dazu, damit wir ihn auch noch mit anderem Namen ansprechen können. So, und dann wird er geschlossen. Da können Sie schon hier ein bisschen Platz darunter lassen, da kommt nachher noch was dazwischen. Das ist der Kopfbereich. Unterhalb des Kopfbereiches baue ich schon mal einen Navigationsbereich ein. Auch der bekommt eine id und heißt navibereich. So, auch der wird etwas nach unten geschoben. So. Da kommt später die Navigation rein, dann gibt es einen Inhaltsbereich. Der Hauptinhaltsbereich einer Seite, der bekommt das Element main. Und das bekommt zusätzlich id="inhaltsbereich". Das sind Texte, Graphiken, Videos und dergleichen, was da mehr reinkommt. So, da lassen wir gleich mal ein bisschen mehr Platz, da wird natürlich viel dran gearbeitet nachher. Und ganz unten kommt hier noch ein Fußbereich und der heißt footer und bekommt die id="fussbereich" (ohne ß, mit einem doppelten s) So, und da kommt später Adresse, Impressumslink und so'n Kram rein. So, das sind die vier Layout-Bereiche, die auf fast jeder Webseite in irgendeiner Form vorhanden sind. Viele Bücher haben jetzt einen Schutzumschlag, also einen zusätzlichen Umschlag um den festen Einband drum rum, der die Aufgabe hat, den Einband zu schützen. Und ein solcher Schutzumschlag ist auf einer Webseite auch manchmal sinnvoll, dazu gibt es einen Wrapper, das heißt also Schutzumschlag, wörtlich übersetzt. Und ein allgemeines Element, das heißt div, division, Abteilung, und der bekommt die id=wrapper. Der legt sich um alle anderen Elemente drum rum. Das /div, das schneide ich aus mit Steuerung x und setze das ganz unten direkt vor das /body wieder rein und schreibe einen Kommentar dazu, damit man auch übermorgen noch weiß, was man heute tut. Ist das eine gute Angewohnheit. Ende wrapper So, und dieser Wrapper, Sie sehen den jetzt hervorgehoben, der umschließt alle anderen Elemente, das ist später beim Gestalten, wird das manchmal sehr praktisch. Das ist eigentlich'ne Doppelung vom body, aber trotzdem ist so'n Wrapper manchmal sehr vorteilhaft. Also, vier Layout-Bereiche: header, nav, main und footer, umgeben von einem Schutzumschlag. Der hat manchmal auch andere Namen, hier container oder page oder Seite oder drum-herum. Da gibt es verschiedene Namen, ich bin bei Wrapper geblieben, das ist ein durchaus üblicher Name. So, ich gehe jetzt mal rüber in den Browser wieder. Hier ist die Seite, ich lade neu. Und wir sehen immer noch nichts hier. Aber wenn ich jetzt hier den Seitenquelltext formatiert anzeigen lasse, mit dem Add-on View Source Chart, dann sehen Sie hier ein paar Kästchen. Der Wrapper geht um alles drum rum. Der header, nav und footer, die haben ein eigenes Kästchen. main erkennt dieses Add-on noch nicht. Hier sollte eigentlich, wenn die Welt perfekt wäre, auch ein Kästchen sein, aber das müssen wir uns dann denken. Das Add-on ist trotzdem sehr hilfreich, um zu sehen, dass man wirklich ganz oft Kästchen hat im Quelltext eigentlich. View Source Chart, das ist dieses Add-on, das ich da eben benutzt habe. Und das können Sie aufrufen hier mit dem Befehl Seitenquelltext formatiert anzeigen. Das werden wir noch öfter mal eben zwischendurch machen, um die HTML-Elemente zu visualisieren.

Little Boxes – die HTML-Basics

Sehen Sie, wie HTML und CSS funktionieren und lernen Sie die dabei die unabdingbaren Grundlagen der Webprogrammierung kennen.

3 Std. 5 min (41 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:11.03.2015
Aktualisiert am:28.09.2016

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!