Eigenes WordPress-Theme erstellen

Die HTML-Vorlage für das Wordpress-Theme: Das HTML-Grundgerüst

∅ 4.8 / 32 Bewertungen

Das HTML-Grundgerüst

Auf dieser Seite

Bevor wir anfangen erstellen Sie einen Ordner mit dem Namen html-template. Dort speichern Sie dann der Reihe nach das HTML-Dokument (index.html), die CSS-Datei (style.css) und erstellen einen weiteren Unterordner für die Bilder (img).

So, nun wird es konkret und wir wenden uns den ersten praktischen Schritten, dem HTML-Grundgerüst zu.

Ich fange meine Arbeit immer mit folgendem Grundgerüst bzw. der index.html an:

<!DOCTYPE html>
 <html lang="de">
 <head>

 <title>akademie.de-Workshop</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <link rel="stylesheet" href="style.css" type="text/css" />
 </head>


 <body>

 <div id="container">


 </div><!-- /#container →

 </body>


 </html>

Vielen von Ihnen dürfte so ein Grundgerüst bekannt vorkommen. Ich werde dennoch kurz auf die einzelnen Bereich eingehen. In der Zeile 01 sehen Sie die Dokumenttyp-Deklaration, die oft auch als Doctype abgekürzt wird. Sie signalisiert dem Client (z. B. dem Browser), dass das folgende Dokument ein HTML-Dokument ist.

In der Zeile 02 sehen Sie den einleitenden (X)HTML-Tag:

<html lang="de">

Innerhalb des öffnenden html -Tags kommt der lang-Attribut zum Einsatz der die verwendete Sprache kennzeichnet. Hiermit ist die Sprache des Inhaltes gemeint – in unserem Fall Deutsch.

In der Zeile 03 fängt der Kopf-Bereich des Dokuments an, dieser endet in der Zeile 07. Im Kopfbereich werden üblicherweise Angaben notiert, die im Browser des Besuchers nicht sichtbar sind, z. B. Meta-Tags. Einzige Ausnahme bildet hier der title -Tag (Zeile 04). Sein Inhalt wird in der Titelleiste des Browsers angezeigt und ist auch der Titel abgelegter Lesezeichen.

In der Zeile 05 sehen Sie den Meta-Tag für den eingesetzten Zeichensatz und in der Zeile 06 wird auf die CSS-Datei verwiesen. Diese werden wir im nächsten Abschnitt erstellen.

Alles, was innerhalb der beiden body -Tags (Zeile 09 bis 15) notiert wird, ist auch später im Browser des Besuchers sichtbar. Ich füge meinem Grundgerüst immer noch zusätzlich ein div -Element hinzu. Diesem Element spendiere ich ein id -Attribut mit dem Wert container . Dieser div -Block ist sehr praktisch, weil er als die "oberste Ebene" dient und gut hilft, die nachfolgenden div -Blöcke zusammenzufassen. Der HTML-Kommentar am Ende <!-- /#container --> hilft mir bei einer möglichen Fehlersuche, weil ich im Quelltext sehen kann wo ein bestimmter div -Block aufhört.

Das Grundgerüst erweitern

Nun geht es darum, das Grundgerüst zu erweitern. Dafür ist es hilfreich, dass man sich vor der Arbeit die Struktur und die Bereiche der zukünftigen Website visualisiert. Grob betrachtet soll die neue Seite so aussehen:

illustration-5-die-grobe-struktur

Illustration 5: Die grobe Struktur

An Hand der groben Struktur wissen wir, welche weiteren Bereiche bzw. div -Blöcke wir unserem Grundgerüst hinzufügen müssen. Um folgende Elemente wird unser Gerüst erweitert. Damit die Code-Beispiele nicht zu viel Platz wegnehmen, liste ich nur den entsprechenden Bereich auf:

<body>

 <div id="container">

 <h1 id="kopfbereich"></h1>


 <div id="hauptnavi">
 
 </div><!-- /#hauptnavi →

 <div id="mittelbereich">

 <div id="inhalt">

 </div><!-- /#inhalt →

 <div id="sidebar">

 </div><!-- /#sidebar →
 <div class="clearer"><!-- hebt später die floats auf --></div>
 </div><!-- /#mittelbereich →

 <div id="footer">

 </div><!-- /#footer →

 </div><!-- /#container →

 </body>

Nachdem ich die notwendigen Bereiche abgegrenzt habe, sollte man etwas Inhalt in die jeweiligen Bereiche einfügen und mit entsprechenden HTML-Tags auszeichnen. Das machen wir zum einen, um die Bereiche durch den Inhalt visuell hervorzuheben und damit wir später in der CSS-Datei auch etwas zum stylen haben. Eingesetzt werden häufig benutzten Elemente (Überschriften, Absätze, Listen etc.):

<div id="container">

 <h1 id="kopfbereich"><a href="/">akademie.de-Workshop</a></h1>

 <div id="hauptnavi">
 <ul>
 <li><a href="#">Menüpunkt 1</a></li>
 <li><a href="#">Menüpunkt 2</a></li>
 <li><a href="#">Menüpunkt 3</a></li>
 <li><a href="#">Menüpunkt 4</a></li>
 </ul>
 </div><!-- /#hauptnavi →

 <div id="mittelbereich">

 <div id="inhalt">
 <h2>Überschrift zweiter Ordnung</h2>

 <p>Das hier ist der <strong>Inhaltsbereich</strong>.</p>

 <ul>
 <li>Listenpunkt 1</li>
 <li>Listenpunkt 2</li>
 <li>Listenpunkt 3</li>
 </ul>

 <h3>Überschrift dritter Ordnung</h3>

 <p>Etwas Blindtext mit einem Link: <a href="#">Pellentesque habitant</a> morbi …</p>

 </div><!-- /#inhalt 

 <div id="sidebar">
 <h2>Überschrift 2. Ordnung</h2>
 <p>Das hier ist die <strong>Sidebar</strong>.</p>

 <ul>
 <li>Listenpunkt 1</li>
 <li>Listenpunkt 2</li>
 <li>Listenpunkt 3</li>
 </ul>
 </div><!-- /#sidebar 

 <div class="clearer"><!-- hebt später die floats auf --></div>
 </div><!-- /#mittelbereich 

 <div id="footer">
 <h2>Überschrift 2. Ordnung</h2>
 <p>Das hier ist der <strong>Fußbereich</strong>.</p>

 <ul>
 <li>Listenpunkt 1</li>
 <li>Listenpunkt 2</li>
 <li>Listenpunkt 3</li>
 </ul>
 </div><!-- /#footer 

 </div><!-- /#container

Und so schaut das Ergebnis des erweiterten Grundgerüstes im Browser aus:

illustration-6-das-ergebnis-im-browser

Illustration 6: Das Ergebnis im Browser

Ja, wenig spektakulär. Aber das XHTML hat seine Schuldigkeit bis jetzt getan. Im nächsten Abschnitt werde ich Ihnen auch erklären warum.

Die "Arbeitsteilung“ von (X)HTML und CSS

In den Unterlagen werden Sie des Öfteren "(X)HTML" zu lesen bekommen. Mit diesem Ausdruck will ich signalisieren, dass sowohl HTML als XHTML gemeint sind. Auf SelfHTML gibt es eine schöne und kompakte Übersicht: Unterschiede zwischen XHTML und HTML . In der Praxis sind die Unterschiede zwischen HTML und XHTML sehr überschaubar.

In der Ehe von (X)HTML und CSS herrscht eine strikte Arbeitsteilung.

(X)HTML kümmert sich lediglich um die Strukturierung des Dokuments und die logische Auszeichnung einzelner Bereiche einer Seite: das ist ein Absatz, das ist eine Überschrift, hier folgt eine Aufzählung und das ist ein Zitat etc. Wie die einzelnen Bereiche ausschauen ist egal, das Visuelle interessiert HTML nicht . Daher sollte man eine Überschrift zweiter Ordnung ( <h2> ) auch dort unterbringen, wo es sinnvoll ist und nicht weil Sie dort gerne eine große und fette Schrift hätten. Genau so sollten Sie das Zitat-Element ( <blockquote> ) auch nur dort einsetzen, wo tatsächlich ein Zitat vorkommt und nicht weil Sie dort gerne eine Einrückung hätten.

Um das Aussehen kümmert sich CSS . Dass in der "nackten" HTML-Datei (siehe letzte Abbildung) die einzelnen Elemente dennoch gewisse Formatierungen aufweisen, liegt daran, dass die Browser ein internes CSS-Dokument mit sich bringen, in dem einige grundlegende visuelle Formatierungen (Abstände, Linkfarbe etc.) notiert sind.

Die Anatomie von HTML-Elementen und CSS-Regeln

Weil ich auch bei recht erfahrenen Webworkern manchmal beobachten kann, dass das Vokabular nicht wirklich beherrscht wird, möchte ich hier kurz auf die Anatomie von HTML-Elementen und CSS-Regeln eingehen.

Ein HTML-Element :

<start-tag attribut="attribut-wert">Inhalt</end-tag>

Hier ein Beispiel: <img src="bild.png" alt="Ein Berg" /> . Das alt ist ein Attribut und kein Tag, wie manchmal fehlerhaft berichtet wird. Und Ein Berg ist der Wert des Attributs.

Eine CSS-Regel besteht aus:

selektor { eigenschaft: wert; } oder selektor { deklaration }

Hier ein Beispiel für eine CSS-Regel: body {color: #333;} . body ist der Selektor, color ist die Eigenschaft und #333 ist der dazugehörige Wert. Die Eigenschaft und der dazugehörige Wert bilden die CSS-Deklaration .

So, jetzt habe ich Sie genug mit schnöder Theorie belästigt. Nun geht es darum, das erweiterte Grundgerüst zu stylen.