Artikelformat

Website Layout: So erstellst du das Grundgerüst einer Seite!

XOVI Banner

Heute legen wir den Hauptbereich, den Container an. Es gibt in HTML viele Tags, die im Grunde die selbe Aufgabe erfüllen: Die Definition von Bereichen. Da wären zum Beispiel <header>, <section>, <nav>, <aritcle> und viele mehr. Wenn man mit diesen arbeitet mag das vielleicht geordneter sein, aber im Grunde gibt es keinen Unterschied zwischen all diesen Tags.

Wir werden für das Definieren von Bereichen den Tag <div> benutzen. Damit wir später im Design verschiedene Divs ansprechen können, geben wir den Tags noch das sogenannte Attribut class bzw. id mit. Der Unterschied zwischen den beiden besteht darin, dass class deutlich allgemeiner verwendet werden kann, so können wir zum Beispiel mehrere Divs, die die selben Design-Eigenschaften bekommen sollen auch die selbe class geben, was bei id nicht möglich ist.
Ids verwenden wir, wenn wir einzelne Elemente direkt ansprechen wollen.

Der Quelltext sieht jetzt folgendermaßen aus:

Der Container wird später 900 Pixel breit sein und mittig in der Seite liegen.
An dieser Stelle sollte man sich das Layout für die Site überlegen. Wir verwenden jetzt ein eher klassisches Design mit Header, Navigation, Contentbereich, Sidebar und Footer.

Der Quellcode mit den dafür Notwendigen Divs sieht so aus:

Im nächsten Teil bringen wir Ordnung in das Layout.

AAWP

Bestes Amazon Affiliate Plugin: AAWP

AAWP Funktionen
  • Sehr schöne Vergleichstabellen
  • Mehr Provisionen
  • Geringer Aufwand
AAWP Button
SeedingUp

Digital Content Marketing Plattform: SeedingUp

SeedingUp Funktionen
  • Website & Produkte bekannt machen
  • Hochwertige Backlinks kaufen und verkaufen
  • Schnell und effizient
SeedingUp Button
Bewerte diesen Artikel
1 Stern2 Sterne3 Sterne4 Sterne5 Sterne

36 Bewertung(en), durchschnittlich: 5,00 von 5

Loading...

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.