Laden…

So erstellst du ein simples HTML5 Template – Part 2

Im ersten Teil dieses Beitrages habe ich dir gezeigt, welche Angaben in jedem HTML Dokument gemacht werden sollten. In Part 2 füllen wir die Webseite nun mit Inhalten und strukturieren diese.

Unsere index.html sieht aktuell folgendermaßen aus:

Da wir auf unserer Webseite natürlich mehr als nur ein „Hello World!“ ausgeben wollen, legen wir nun ein paar weitere HTML Elemente an.

1. Das header-Tag

Im Header-Tag platzierst du für gewöhnlich ein Logo, ein Navigationsmenü und z.B. Kontaktdaten, oder ein Suchfeld. In unserem Beispiel genügt erstmal ein Logo und ein Menü.

Ändere die index.html wie folgt ab:

Wie du siehst, habe ich hier im header-Tag einmal ein Image-Tag für das Logo verwendet und ein Listen-Tag für das Navigationsmenü. In der Regel sind die Inhalte des header-Tags auf jeder Seite bzw. Unterseite deiner Webseite gleich. So gibst du deinen Webseiten-Besucher die Möglichkeit sich einfach durch deine Seite navigieren zu können.

Das Image-Tag benötigt immer eine Source-Angabe. Hier sagst du dem Tag wo die Bilddatei zu finden ist. Wenn das Logo im gleichen Verzeichnis wie deine index.html liegt, siegt das Ganze so aus: src=“logo.png“. (Das gilt auch für das Favicon, oder später auch für die Einbindung von Stylesheets, aber dazu mehr im 3. Teil dieses Beitrags ;-))

Für ein Navigationsmenü sollte man immer ein Listen-Tag verwenden. In diesem Fall eine unordered-list (analog dazu gibt es auch ordered-lists). In diesem Tag verwendest du dann so viele li-Elemente (list-items) wie nötig. Damit die Menüpunkte später auch klickbar sind, setzen wir in den Listen-Elementen je einen anchor-Tag, welcher den Namen des Menüpunktes umschließt. Mit diesen Tags kannst du Links innerhalb deiner Website aufbauen, oder auch externe Websites verlinken.

2. Das main-Tag

Im Vergleich zum header-Tag ist der Inhalt deines main-tags von Unterseite zu Unterseite unterschiedlich. Öffne das main-Tag direkt nach deinem schließenden header-Tag:

Wir gehen davon aus, dass wir gerade die Startseite unsere Webseite bauen und verwenden hier zunächst mal eine Überschrift „Startseite“ mittels einem h1-Tag.

Wenn du dir nun noch einmal das Navigationsmenü anschaust, siehst du, dass hier hier auch eine Anpassung vorgenommen habe. Es gibt nur noch zwei Menüpunkte: Startseite und Unterseite. Der Menüpunkt Startseite verlinkt direkt auf die index.html. Für den Menüpunkt Unterseite kopierst du nun den Inhalt der index.html und legst ein zweites HTML-Dokument namens unterseite.html im gleichen Verzeichnis ab.

unterseite.html:

Es sollte exakt die gleiche Datei sein, nur dass der Inhalt deiner Überschrift hier natürlich „Unterseite“ lauten sollte. Wenn du die index.html nun in deinem Browser öffnest, solltest du schon zwischen den beiden Dateien hin und her wechseln können, wobei der Header immer gleich bleiben und die Überschrift sich jeder mal ändern sollte.

Man muss übrigens nicht unbedingt das main-Element verwenden. Wenn du dir andere Webseiten anschaust, wirst du statt dem main-Tag auch sehr oft etwas in dieser Art sehen „<div id=“main“></div>“ oder auch „<div class=“main-content“></div>“.

Was nun noch fehlt ist…

2. Das footer-Tag

Ähnlich wie beim header-Tag bleibt in der Regel der Inhalt des footer-Tags auf jeder Unterseite gleich. Hier werden üblicherweise auch nochmal ein Logo, weitere Navigationsmenüs oder Kontaktdaten, sowie Link zu Impressum und Datenschutz eingefügt. Wir setzen hier zunächst einfach nur die Copyright Angabe:

index.html: 

Das „&copy;“ im Footer ist die HTML Entität für ein Copyright-Symbol. Ich gehe in diesem Beitrag nicht weiter auf die Entitäten ein, du solltest jedoch wissen, dass es sie gibt. Eine Übersicht findest du z.B. hier.

Du musst das footer-Tag nun natürlich auch in der unterseite.html ergänzen. Damit auch diese Dokument einen Footer hat. Das wird auf Dauer sehr lästig, darum rate ich dir dazu erst einmal alle benötigten Unterseiten anzulegen, die Arbeiten an header und footer abzuschließen und dann einmal final header und footer in jede Datei reinzukopieren. Wenn wir später mit PHP und WordPress arbeiten, sind diese Dateien ausgelagert und können ganz einfach inkludiert werden, ohne dass du sie immer kopieren musst.

Im nächsten Teil zeige ich dir, wie du deine HTML-Dokumente mit einem Stylesheet verknüpfen und die in diesem Beitrag hinzugefügten Elemente ausrichten und positionieren kannst.

Ich freue mich immer über Kommentare und Anmerkungen. Wenn dir dieser Beitrag gefallen hat, teile ihn doch einfach auf Facebook, Xing, LinkedIn, oder wo auch immer 😉 Bis dahin – Happy Coding!

Schreibe einen Kommentar