HTML Layout

In den letzten beiden Modulen hast du eine Menge über HTML gelernt. Du bist jetzt in der Lage Inhalte aller Art zu erstellen.

Wie du bestimmt weißt, findest du auf Webseiten nicht nur Inhalte mit bunten Bildern und Formularen. Heutige Webseiten sind modern und interaktiv. Um diese Interaktivität zu erreichen, brauch deine Webseite ein Layout.

Es gibt verschiedene Arten von Layouts. Die meisten Layouts haben aber ähnliche Bestandteile.

Du kannst dir das Layout einer Webseite wie eine Tabelle vorstellen

(Hinweis: Für das Layout wird NICHT das table-Element verwendet. Es gibt bessere Möglichkeiten)

Webseiten-Design mit einer Spalte

Viele Webseiten werden mit einer Spalte gestaltet. Dafür hat eine Webseite einen Header-, einen Inhalts- und einen Footer-Bereich. Der Inhaltsbereich kann dann in 2-3 Spalten unterteilt werden, z.B. um eine Seitenleiste darzustellen.

Webseiten-Design mit mehreren Spalten

Manche Webseiten sind mit 2-3 Spalten gestaltet. Insbesondere dann, wenn große Seitenmenüs benötigt werden.

Das Layout wird mit CSS und Flexbox gemacht.

Keine Panik: Du musst diese beiden Technologien nicht kennen. Wir verwenden später nur das Notwendige für dein erstes Layout.