Laden…

So erstellst du ein simples HTML5 Template – Part 1

In diesem Beitrag lernst du, wie du ein einfaches HTML5 Template erstellst und was du dafür benötigst.

1. Der Code/Text-Editor

Es ist natürlich möglich HTML mit einem gewöhnlichen Text-Editor, wie du ihn z.B. von Windows kennst, Code zu schreiben. Ich empfehle dir allerdings von Anfang an einen Text-Editor bzw. einen Quelltext-Editor zu verwenden, welcher speziell zum schreiben von Code entwickelt wurde. Durch Features wie auto complete und syntax highlighting kannst du so nämlich viel schneller und übersichtlicher coden.

Ich persönlich verwende den Editor Visual Studio Code. Wenn du allerdings blutiger Anfänger bist, empfehle ich dir für den Anfang Sublime Text zu verwenden. Warum? Weil Sublime Text meiner Meinung nach nicht so viele Ablenkungsfaktoren hat und du dich damit erst einmal aufs Wesentliche konzentrieren kannst.

Die Entscheidung liegt bei dir. Sowohl Sublime Text als auch Visual Studio Code sind für Linux, Windows und MacOS verfügbar.

2. Das HTML5 Template

Wirf zunächst mal einen Blick auf das fertige Template. Ich erkläre dir anschließend Schritt für Schritt die einzelnen Bestandteile bzw. Zeilen.

index.html:

 

3. Die Struktur

Jedes HTML Dokument sollte möglichst strukturiert aufgebaut sein. Solange dein HTML valide ist (was du übrigens hier prüfen kannst), ist dem Browser zwar ziemlich egal, ob die Einrückungen machst, oder wie viele Leerzeilen du verwendest. Für dich als Entwickler ist es jedoch viel leichter den Überblick über den geschriebenen Code zu behalten 😉

Es gibt jedoch Angaben, welche in jedem Dokument gemacht werden sollten und bei denen es definitiv eine Rolle spielt, wo du diese Angaben machst…

3.1 Der Doctype

Damit sollte jedes HTML Dokument beginnen. Im Prinzip sagst du dem Browser damit, dass es sich bei deinem Dokument um ein Dokument vom Typ HTML handelt. In HTML5 reicht die simple Angabe <!DOCTYPE html>. In früheren HTML Versionen war diese Angabe etwas aufwendiger. Wenn du mehr dazu wissen möchtest, schau dir einfach mal den Beitrag von w3school.com an.

3.2 Das html-Tag

Auf das generelle Prinzip von Tags gehe ich hier nicht ein. Grundlegend solltest du zunächst wissen, dass es öffnende, schließende und sogenannte selbstschließende Tags gibt.

Das html-Tag besteht immer aus einem öffnenden Tag, welches direkt nach dem Doctype eingefügt wird, und einem schließenden Tag, welches immer ganz unten am Ende des Dokuments platziert wird. Schau dir das am besten noch einmal in meinem Beispiel Template an. Wie du siehst habe ich hier außerdem ein Attribut (lang=“de“) gesetzt. Hiermit sagst du dem Browser in welcher Sprache die für den Webseiten-Besucher lesbaren Texte sind.

3.3 Das head- und das body-Tag

Auch diese Tags bestehen immer aus einem öffnenden und einem schließenden Tag.

Mit dem öffnenden head-Tag beginnst du direkt nach dem öffnenden html-Tag. Innerhalb des „HTML Kopfes“ machst du weitere Auszeichungen, auf die ich im folgenden natürlich noch eingehe. Aber im Groben, kannst du dir den Kopf des HTML Dokuments als eine Art Angaben- und Meta-Angaben-Sammlung vorstellen, welche für den Browser und dein Dokument selbst von Bedeutung sind.

Die Inhalte deiner eigentlichen Webseite kommen wiederum zwischen das öffnende body- und das schließende body-Tag. Diese bilden sozusagen den Körper des Dokuments und damit den für deinen Webseiten-Besucher sichtbaren Bereich. Das öffnende body-Tag setzt du immer unter das schließende head-Tag. Und das schließende body-Tag platzierst du vor das schließende html-Tag.

3.4 Der Inhalt des head-Tags

3.4.1 Der Zeichensatz

In der Welt der Computer gibt es unterschiedlicher Zeichensätze. Mit der Angabe <meta charset=“utf-8″> legst du fest, dass der Browser auf den Zeichensatz UTF-8 zurückgreifen soll. Dieser Zeichensatz enthält so gut wie alle nötigen Zeichen. So zum Beispiel auch Umlaute. Wenn du mehr dazu wissen möchtest, schau dir einfach mal den Beitrag von w3school.com an.

3.4.2 Der Titel

Mit dem title-Tag gibst du deinem Dokument einen Titel. Dieser erscheint dann oben im Tab deines Browsers:

3.4.3 Die Beschreibung

Eine Beschreibung deines Dokuments bzw. deiner Website kannst du über <meta name=“description“ content=“Ein simples HTML5 Template“> integrieren. Die Beschreibung ist zwar für deinen Browser nicht wirklich relevant, jedoch sehr wichtig für Suchmaschinen. Besser noch: Für die Darstellung deiner Website auf der Ergebnisseite einer Suchmaschine. In unserem Beispiel würde das Ganze bei Google so aussehen:

3.4.4 Das Favicon

Das Favicon ist das kleine Icon, das links neben deinem Title ausgegeben wird. Dieses wird über die Angabe <link rel=“shortcut icon“ href=“pfad/zu/favicon.ico“>. Über das href-Attribut legst du fest wo das Icon auf dem Server, oder deinem Rechner zu finden ist.

Für eine optimale Darstellung des Icons auf allen Endgeräten (Smartphones, Tablets, …) verschiedenster Hersteller empfiehlt es sich, das Icon mehrmals in den unterschiedlichen Größen zu bereitzustellen und dementsprechend im Dokument zu verlinken. Ich verwende dazu meistens einen Favicon Generator. Hier kannst du das Icon ganz einfach hochladen und bekommst ein Paket fertig generierter Größen und Dateiformate zum Download bereitgestellt. Außerdem liefert dir das Tool bereits den fertigen HTML-Schnipsel, den du dann nur noch in deinem Dokumenten-Kopf platzieren musst.

3.5 Der Inhalt des body-Tags

In das body-Tag kommen nun sämtliche Inhalte der Website, sprich Texte, Bilder, Navigationsmenüs, Header, Footer, … In unserem Beispiel genügt erstmal eine H1-Überschrift. In Part 2 dieses Beitrages erkläre ich dir wie man den Inhalt des Body auf gängige Art und Weise strukturiert und zeige dir natürlich eine Beispiele dazu.

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!

Hier gehts zu Part 2!

Schreibe einen Kommentar