HTML-Grundgerüst einer HTML5-Seite

Worum geht´s?

Eine jede HTML-Seite besteht aus einem immer gleichen HTML-Grundgerüst. Dieses kann „händisch“ programmiert werden oder auch (z.B. mit Hilfe der Programmiersprachen PHP oder JavaScript) dynamisch generiert werden. Letzteres erspart dir später viel Arbeit. Aber egal, wie der HTML-Code erzeugt wird: Das HTML-Grundgerüst ist dabei immer gleich. Und dieses werden wir nun lernen.

1. Unsere erste HTML-Seite erstellen

Programm-Code ist in erster Linie nichts Anderes als Text, der in einer bestimmten Sprache (eben einer Programmier-Sprache) verfasst ist. Weil es sich um Text handelt, wird dieser auch in Text-Dateien gespeichert.

Allerdings enden diese nicht mit .txt, sondern je nach Programmier-Sprache mit einem anderen Kürzel. HTML-Code wird z.B. in Textdateien mit der Datei-Endung .htm oder .html gespeichert (verwende im Zweifelsfall .html, das ist verbreiteter). CSS-Code in Textdateien mit der Endung .css, JavaScript in Textdateien mit der Endung .js, PHP mit der Endung .php, Java-Code mit der Endung .java – das Prinzip dürfte klar sein.

In unserem Fall wollen wir HTML-Code verwenden. Deswegen erstellen wir eine Datei, die „index.html“ heißt (die Anführungszeichen gehören nicht zum Namen, sie sollen nur zeigen, wo der Name beginnt und aufhört).

Erstelle dazu am besten einen neuen Ordner auf deinem Desktop (damit du alles schnell wiederfindest), und öffne ihn mit einem Doppelklick. Ich habe ihn z.B. „HTML lernen“ getauft.

In dem Ordner erstellst du mit Rechtsklick->Neu->Textdokument eine neue Text-Datei. Vermutlich heißt sie anfangs „Neues Textdokument.txt“. Diese müssen wir nun in eine .html-Datei umbenennen.

Profi-Tipp: Falls deine Datei nur „Neues Textdokument“ heißt (also ohne .txt), dann ist dein Windows so eingestellt, dass es Datei-Endungen nicht anzeigt. Das macht es, damit du möglichst wenig kaputt machen kannst. Du kannst das ändern, indem du im Windows-Explorer oben bei den Reitern wo „Datei“, „Start“, „Freigeben“ und „Ansicht“ steht auf den Reiter „Ansicht“ klickst:

Bei der Vergabe des Namens sind mehrere Dinge zu beachten:

• Datei-Endung: Der Dateiname muss mit .html aufören. Damit klar ist, dass es eine HTML-Datei ist.
• Schreibweise: Tu dir selbst einen Gefallen und verwende nur Kleinbuchstaben und keine Sonderzeichen oder Umlaute (Ausnahme: – und _).Wenn du nicht darauf achtest, kann es sein, dass du später Stunden damit verbringst Fehler zu suchen, die durch eine ungenaue Schreibweise entstanden sind.
• Der Name der Datei selbst: Es gibt mehrere „reservierte“ Dateinamen, die alleine aufgrund ihres Dateinamens eine besondere Funktion erfüllen. Für uns relevant ist jetzt vorerst nur „index.html“. Warum? Wenn in einem Ordner mehrere HTML-Dateien zu finden sind und ein Domain auf den Ordner zeigt (nicht auf eine exakte .html-Datei), dann erkennt der Browser die index.html in diesem Ordner immer als Startseite. Hat sich einmal jemand so ausgedacht, und seitdem ist das so üblich 😉

Die Datei „index.html“ ist somit perfekt geeignet, um eine Startseite zu sein – genau das wollen wir erreichen! Nenne deine erste HTML-Datei daher am besten ebenso „index.html“.

Falls du dich vertan hast und die Datei einen anderen Namen bekommen hat, kannst du sie mit Rechtsklick->Umbenennen noch abändern.

Sobald deine index.html erstellt ist, kannst du sie mit Rechtsklick->Öffnen mit->WordPad öffnen. Du solltest nun eine leere Textdatei vor dir sehen.

1.1 Das HTML-Grundgerüst unserer Seite erstellen: Unser erster Programm-Code

Nun wird es aber wirklich Zeit! Lass uns endlich mit dem Programmieren beginnen! Füge den folgenden HTML-Code in deine leere index.html ein. Du kannst ihn entweder einfach kopieren und einfügen oder selbst abtippen.

Profi-Tipp: Kopieren kannst du mit dem Shortcode STRG + C, einfügen mit dem Shortcode STRG + V, und ausschneiden (löschen und gleichzeitig kopieren) mit dem Shortcode STRG + X. Diese Shortcodes funktionieren übrigens in fast allen Programmen, auch z.B. in Word oder Excel – wenn du sie dir angewöhnt, wirst du ganz allgemein viel schneller in der Arbeit mit dem Computer werden 🙂

Profi-Tipp: Falls du dich fragst wo auf der Tastatur eigentlich diese seltsamen <>-Klammern zu finden sind: Die sind zumindest auf meiner Tastatur gleich links unten neben dem Y zu finden. Auf anderen Tastaturen meist links neben den Pfeiltasten. Normal auf die Taste drücken öffnet die Klammer, zusammen mit SHIFT (die Taste die auf Großbuchstaben umschaltet) und der selben Taste schließt sie sich wieder.

<!DOCTYPE html>
<html lang="de"> 
<head> 
    <meta charset="utf-8"> 
    <title>Ich bin der schönste Titel der Welt!</title> 
</head>
<body> 
    <!-- Das ist der Inhalt -->
    Ich bin der Inhalt der Seite! 
</body> 
</html>

Du hast nun den obigen Code in deine Datei „index.html“ eingefügt oder geschrieben, als nächstes musst du sie speichern.

Profi-Tipp: Wenn du programmierst ist es ratsam, häufig zu speichern. Es ist einfach ziemlich nervig falls irgendetwas schief geht, du dann irgendetwas noch einmal programmieren musst und vielleicht gar nicht mehr weißt wie du das vorher gemacht hast. Ich selbst speichere im Grunde nach fast jeder Zeile die ich programmiere. Weil das Mit Hilfe von Datei->Speichern recht umständlich ist, hier einer der nützlichsten Shortcodes, den du dir merken solltest: STRG + S. Das speichert die aktuelle Datei und geht mit etwas Übung dann sehr rasch und unkompliziert. Am besten gewöhnst du dir den Shortcut und das regelmäßige Speichern von Anfang an an. Praktischerweise funktioniert STRG + S auch bei fast allen anderen Programmen.

Nun wollen wir uns einmal ansehen, wie unsere Webseite im Browser aussieht. Dazu musst du die Datei mit deinem Browser öffnen.

1.1.1 Wie du deine Webseite im Browser ansiehst

Mit einem Rechtsklick auf die Datei und dem dann ausgewählten „Öffnen mit…“ wählst du einen Browser deiner Wahl aus. Und schon kannst du deine erste eigene Webseite in Aktion sehen. Alternativ kannst du die erstellte HTML-Datei auch einfach in deinen schon geöffneten Browser ziehen, dann sollte dieser auch einen neuen Tab mit deiner Webseite öffnen. Oder du machst einen Doppel-Klick auf die Datei (Falls dann „Öffnen mit…“ kommt, wählst du einen Browser aus).

Du solltest nun eine weitgehend leere Webseite vor dir haben, auf der in schwarzer Schrift auf weißen Hintergrund „Ich bin der Inhalt der Seite!“ zu lesen ist. Außerdem hat die Webseite einen Titel, nämlich „Ich bin der schönste Titel der Welt!“. Kannst du ihn entdecken?

So oder so ähnlich sieht eine kleinstmögliche HTML-Datei im Browser aus, in diesem Fall die HTML-Seite, die du erstellt hast. Ziemlich.. kläglich, findest du auch? Keine Angst, das werden wir schon noch ändern. Aber bevor wir das tun, werden wir uns nochmal kurz im Detail ansehen, was wir denn da gerade programmiert haben.

Die allererste Zeile heißt „<!DOCTYPE hmtl>“ und ist vermutlich ein Stück weit selbsterklärend. Diese sagt dem Browser – falls er es anhand der .html-Datei-Endung noch nicht erraten hat – dass es sich um eine HTML-Datei handelt, und dass er alles was danach kommt auch entsprechend interpretieren soll. Seit der HTML-Version HTML5 sollte man dies hinzufügen.

1.1.2 Was sind HTML-Tags, und wie funktionieren sie?

Darauf folgt das erste „richtige“ HTML-Tag, das sinnigerweise gleich <html> heißt. Ein „Tag“ ist ein Name für eine bestimmte Art von Webseiten-Baustein. Man könnte sagen, HTML-Tags sind die Grundbausteine einer jeden Webseite. Von denen gibt es zwei Grund-Arten:

• Tags, die in sich abgeschlossen sind
• Tags, die andere Inhalte einschließen

Die erste Gruppe an Tags steht alleine für sich im Programm-Code, z.B. das <img>-Tag, das für Bilder zuständig ist, oder ein <br>-Tag, das einen Zeilenumbruch darstellt. Bei diesen musst du nicht groß mitdenken, die kann man einfach dort verwenden, wo du sie brauchst.

Die zweite Gruppe an Tags kommt immer doppelt vor: einmal ganz normal und beim zweiten Mal mit einem Schrägstrich ( / ) vor dem Tag-Namen. Das erste Mal wenn es vorkommt nennt man es „öffnendes Tag“, beim zweiten Mal „schließendes Tag“, und alles dazwischen wird durch dieses Tag dann beeinflusst. Da gibt es z.B. das <h1>-Tag, das bewirkt, dass alles, was zwischen dem öffnenden <h1>-Tag und dem schließenden </h1>-Tag steht, eine Überschrift sein soll.

Unser <html>-Tag ist ein Tag der zweiten Gruppe, deswegen kommt es im Code auch zwei Mal vor, einmal zum Öffnen des Tags und einmal zum Schließen des Tags. Bei einem <html>-Tag weiß der Browser, dass alles zwischen dem öffnenden <html>-Tag und dem schließenden </html>-Tag als HTML-Code zu verstehen ist.

Innerhalb von unserem öffnenden HTML-Tag findet sich nun auch noch ein lang=“de“. Dies sagt dem Browser dass die Sprache des Dokuments Deutsch ist. Würden wir hier lang=“en“ schreiben, würde der Browser davon ausgehen dass es eine englische Seite ist.

Dieses „lang“-Attribut ist u.A. für Besucher wichtig die einen sogenannten Screen-Reader verwenden, der ihnen die Webseite vorliest – also zum Beispiel blinde Menschen. Aber auch Google freut sich darüber, wenn es weiß, welche Sprache deine Webseite hat, weil es seinen Nutzern dann leichter Ergebnisse in der richtigen Sprache anzeigen kann.

So ziemlich jedes HTML-Tag kann jeweils eigene Attribute haben, aber was das ist und wie diese funktionieren wird später noch genauer erklärt. Fürs erste reicht es, wenn du im <html>-Tag deiner HTML-Seiten einfach diese Zeile einbaust, damit Browser wissen, um welche Sprache es sich handelt.

1.1.3 Die Meta-Informationen der Seite: das <head>-Tag

Als nächstes folgt ein <head>-Tag, auch dieses besteht aus zwei Teilen. Im Head-Tag finden sich normalerweise Verweise zu CSS-Style-Dateien oder Javascript-Dateien. Aber dazu später mehr.

In unserem Fall sind zwei Befehle in unserem <head>-Tag zu finden. Die erste Zeile (die mit dem charset=“utf-8″) sagt dem Browser, dass er eine bestimmte Art von Zeichen-Set verwenden soll. Zeichensets bestimmen, welche Zeichen im Text vorkommen können. In manchen solchen Zeichensätzen kommen z.B. keine Umlaute vor, oder dafür japanische Zeichen. Mit UTF-8 bist du im Deutschen und Englischen meist auf der sicheren Seite.

Interessanter ist für uns das <title>-Tag. Wie du vielleicht schon entdeckt hast, handelt es sich auch bei diesem um ein zwei-teiliges Tag. Innerhalb von diesem Tag findet sich der Titel der Webseite wieder. Der Titel erfüllt vor allem zwei Aufgaben:

• Er wird im Browser ganz oben als Tab-Beschreibung angezeigt
• Er wird z.B. als Ergebnis einer Google-Suche als Überschrift angezeigt und hilft Suchmaschinen dabei zu verstehen, worum es in der Webseite geht

Wenn du den Text innerhalb des <title>-Tags veränderst, veränderst du den oben in den Tabs angezeigten Titel deiner Webseite.

Das kannst du auch gleich ausprobieren. Einfach etwas zwischen den <title>-Tags verändern, speichern (STRG + S) und dann die Webseite im Browser neu laden. Das machst du entweder über das „Aktualisieren“-Symbol (im Firefox so ein Pfeil der im Kreis läuft), oder du benutzt die Taste F5 auf der Tastatur. Bei einigen Tastaturen kann es sein, dass du zusätzlich noch die Taste „Fn“ gedrückt halten musst, daher dann Fn + F5.

1.1.4 Der eigentliche Inhalt der Webseite: das <body>-Tag

Zwischen den beiden <body>-Tags wird alles hineingeschrieben, was auf deiner Webseite zu sehen sein soll: Texte, Bilder, Videos, Menüs, … In unserem Fall ist dort bisher nur ein kleiner Beispiel-Text zu finden. Wenn du ihn veränderst und dann die Seite im Browser neu lädst, solltest du die Veränderung sehen können.

Damit ist unser erstes HTML-Dokument eigentlich auch schon wieder zu Ende, es folgt nur noch das schließende <html>-Tag mit dem Schrägstrich davor (</html>).

1.1.5 Kommentare: Was sie bringen

Wobei, das stimmt so nicht ganz. Es gibt auch dieses sehr seltsam anmutende Ding mit dem Rufzeichen darin. Was das wohl ist?

Alles, was zwischen einem <!– und einem –> steht, ist in der Sprache HTML ein sogenannter Kommentar. Das bedeutet, dass alles was als Kommentar gekennzeichnet ist vom Browser ignoriert wird. Warum aber soll man etwas programmieren, was dann gar nichts tut?

Bei unserer kleinen Mini-Webseite macht das tatsächlich gar nicht so viel Sinn. Aber wenn die Webseite mit der Zeit größer wird und man vielleicht über mehrere Wochen an ihr gearbeitet hat, dann weiß man vielleicht nicht mehr genau, was man sich vor zwei Wochen dazu überlegt hatte. Und da können Kommentare sehr nützlich sein, um sich später besser daran erinnern zu können.

Weil Kommentare auch im Programmier-Programm in einer anderen Farbe dargestellt werden, sind sie auch nützlich, um Bereiche im Programm-Code grafisch abzugrenzen.

In HTML selbst wirst du nur selten Kommentare brauchen, einfach weil die Beispiele vergleichsweise einfach sein werden. Aber wenn du dir selbst einen Gefallen tun willst, dann gewöhnst du dir am besten gleich an, Kommentare zu verwenden.

2. Du hast dein erstes eigenes HTML-Grundgerüst erstellt!

Du kannst nun wenn du möchtest noch ein wenig damit herumexperimentieren was passiert, wenn du den Titel oder den Haupt-Inhalt (zwischen den zwei <body>-Tags) abänderst.

Kannst du dich noch an das Überschriften-Tag <h1> erinnern? Wo glaubst du, dass es eher hingehört – innerhalb des <head>-Tags oder innerhalb des <body>-Tags? Versuche doch mal, deiner Webseite eine Überschrift zu verpassen – schaffst du es?

Wenn nicht, keine Sorge! In den nächsten Tutorials werden wir uns ausführlich mit dem Text unserer Webseite befassen. Der soll doch auch etwas hermachen, oder?

Diskussion zum Tutorial