HTML Grundstruktur

<div>, <h1> bis <h6> und <p>

Beginnen Sie zuerst damit, ein neues Dokument mit einem Grundgerüst zu erstellen. Je nach Editor wird ein solches Grundgerüst mehr oder weniger gut vorgegeben, manchmal kann man die Voreinstellungen auch ändern.

Erstellen Sie sich ein Muster-Grundgerüst, speichern Sie dieses als muster.htm und verwenden Sie es als Grundlage jedes neuen Dokumentes.

Wir werden hier als Basis für weitere Seiten ein HTML-Dokument erstellen und dieses zunächst einmal strukturieren. Die folgende Struktur hat sich als Fundament für Webseiten etabliert.

Üblicherweise besteht eine Webseite je aus einem

Kopfbereich für das Firmenlogo oder einen immer wiederkehrenden Bereich (HEADER)
Navigationsbereich mit anklickbaren Menüelementen (NAVI)
Inhaltsbereich für die eigentlichen Inhalte der Seite (CONTENT)
Fußbereich für unterschiedliche Zwecke (FOOTER)

Aus rein gestalterischen Gründen ist es oft ratsam, diese vier Bereiche zusammen in eine Art "Schutzumschlag" zu stecken, um sie gemeinsam ansprechen zu können. Dieser wird häufig als WRAPPER bezeichnet.

Die Bezeichnungen WRAPPER, HEADER, NAVI, CONTENT und FOOTER für die Bereiche einer Webseite sind willkürlich gewählt, haben sich jedoch als brauchbar erwiesen, da man sich mit einer möglichst einheitlichen Benennung besser zurechtfindet.

Kommentare im Quellcode

erzeugt einen Kommentar. Wenn später die einzelnen Bereiche mit Inhalt gefüllt sind, fällt die Anfangs- und Ende-Zuordnung leichter, wenn man sich per Kommentar im Quellcode notiert, welcher DIV wo geschlossen wurde.

Die Kommentare werden später nicht im Browserfenster angezeigt, sie werden jedoch dennoch im Quellcode an den Browser übertragen. Seien Sie also zwar vorsichtig mit Ihren Kommentaren... aber:

Verwenden Sie Kommentare!

Kommentare können für beliebige Zwecke verwendet werden. Sie können sich notieren, was wo anfängt und aufhört, welchen Zweck ein bestimmter Codebereich erfüllt oder auch, am besten am Dokumentanfang, wer dieses Dokument wann und warum erstellt hat.

Bereiche mit <div>

Um also diese Bereiche zu erzeugen, benötigen wir ein HTML-Element zur Gruppierung. <div> ist ein blockbildendes Element und umschließt beliebige andere Elemente. Um einen <div>-Bereich adressieren zu können, bekommt jeder von ihnen eine ID.

Diese ID ist frei wählbar, muß jedoch dokumentweit eindeutig sein. Sie darf aus Buchstaben, Ziffern und dem Unterstrich bestehen, darf allerdings keine Sonderzeichen (wie Umlaute oder ß) oder Leerschritte enthalten (muß also nur aus einem Begriff bestehen).

Schreiben Sie nun folgendes in den <body>:

<div id="wrapper">
  <div id="header">
  </div> <!-- Ende Header -->

  <div id="navi">
  </div> <!-- Ende Navi -->

  <div id="content">
  </div> <!-- Ende Content -->

  <div id="footer">
  </div> <!-- Ende Footer -->
</div>

Der WRAPPER umschließt die anderen Bereiche. Dieses wird auch durch die Einrückung des Quellcodes deutlich. Gewöhnen Sie sich am besten sofort an, mit Texteinrückungen zu arbeiten. Quellcode, erst recht fremder Quellcode, ist dadurch für uns Menschen wesentlich besser zu lesen. Dem Browser dagegen sind Einrückungen und auch Leerzeilen völlig egal.

Überschriften und Absätze: <h1> und <p>

Schreiben Sie nun folgendes in den CONTENT-Bereich:

<h1>Ich bin eine Überschrift</h1>
<p>
  Lorem ipsum dolor sit amet, consectetuer adipiscing
  elit. Donec fermentum. Fusce vitae lorem. Curabitur
  sapien mauris, fringilla sed, feugiat et, scelerisque
  eu, augue. Cras quam erat, lobortis ut, sagittis eu,
  convallis eu, nunc. Sed odio nibh, venenatis id, rutrum
  sit amet, dignissim vel, dui. Cras sed purus. Phasellus
  id quam nec tortor egestas scelerisque. Aenean dui mi,
  tincidunt eu, nonummy id, euismod laoreet, ligula. Cras
  eleifend ullamcorper tortor. Praesent vehicula turpis
  non ipsum. Curabitur tincidunt aliquet urna. Nulla
  facilisi. Donec a ligula.
</p>

Öffnen Sie ihr Dokument in einem Browser. So ähnlich sollte Ihre Seite nun aussehen.

Achten Sie auch auf den Titel oben in der blauen Titelleiste des Browsers.

Weitere HTML-Elemente

Unter addedbytes.com finden Sie eine Übersicht an HTML-Elementen, die ausgedruckt auf eine DIN-A4-Seite passt. Der Link im nächsten Absatz verweist auf eine ähnliche Liste bei Self HTML, nur mit einer A4-Seite kommt man dann nicht mehr hin...

Blockelemente

Überschriften und Absätze sind Blockelemente. Diese werden, sofern man nichts anderes vorgibt, grundsätzlich so breit wie ihr Elternelement (das Browserfenster bzw. das Element, in dem sie stehen) und so hoch wie ihr jeweiliger Inhalt. Auch haben sie einen integrierten Zeilenumbruch.

Inline-Elemente dagegen wie z.B. Anker sind untergeordnete Elemente und können in normalem Fließtext verwendet werden. Sie sind nur so breit wie ihr Inhalt.

CSSKiste.de