Hauptmenü

Untermenü

HTML - Überblick

1. Ein Wort zuvor

Früher in der Steinzeit des Internets war es nicht möglich, das Design und den Inhalt der Seiten voneinander zu trennen, da die damaligen Browser ziemlich eigenwillig bei der Darstellung reagierten. Darum presste man alles in so genannte Frames und Layout-Tabellen und werkelte mit "optischen" Attributen herum, um den Ansprüchen der Designer zu genügen. Der Nachteil war offensichtlich. Sobald man etwas an der Gestaltung ändern wollte, musste man sich durch alle(!) Seiten hangeln und die Korrekturen vornehmen. Und glaubt mir, das war eine echte Sisyphos-Arbeit. Hab das damals selber miterlebt.

Leider basieren heute immer noch viele Bücher und Tutorials auf diesen Steinzeittechniken. Fragt mich bitte nicht nach dem Warum. Deshalb werde ich einen anderen Weg gehen. Der ist zwar zu Beginn recht steinig und steil, führt euch aber auf bessere Weise zum Ziel.

2. Der aktuelle Stand der Dinge

Heutzutage werden Content und Layout strikt voneinander getrennt. Für den Inhalt nimmt man HTML, für die Gestaltung CSS. Das bedeutet leider, dass ihr mit ausschließlichen HTML-Kenntnissen keine vernünftigen Seiten entwerfen könnt. Oder zumindest nicht solltet. Das funktioniert erst in Kombination mit CSS, und darum werde ich euch auch nicht zeigen, wie man noch vor ein paar Jahren gearbeitet hat. Nein, wir gehen mit der Zeit.

Das bedeutet leider, dass man sich erst das Grundwissen respektive die Theorie von HTML und CSS aneignen muss, bevor man vernünftig loslegen kann. Das ist dann der schon erwähnte steinige Weg. Lasst euch aber davon nicht abschrecken. So kompliziert ist die Materie nicht, wenn man bereit ist, ein paar Stunden dafür zu investieren. Der Rest ist dann Erfahrungssache.

3. Klickibunti

Dieses Wort wird euch hier noch öfter begegnen. Dabei handelt es sich um alles, was Mausschubser so machen. In diesem Fall geht es also um die Leute unter euch, die sich mit solchen Programmen wie Dreamweaver oder dergleichen ihre Seiten zusammenklicken. Mein eindringlicher Rat an die unter euch, die dazu gehören. Lasset ab von diesem Tun. So werdet ihr es nie lernen. Besorgt euch einen vernünftigen Editor und schreibt euren Code per Hand. Seiten "zusammenklicken" ist schon lange megaout. Und warum dem so ist, werdet ihr hier im weiteren Verlauf lernen.

4. Noch etwas

HTML ist keine(!) Programmiersprache (noch mal drei Ausrufungszeichen). Also erzählt bitte keinem, dass ihr HTML programmiert. Richtige Programmiersprachen zeichnen sich dadurch aus, dass man damit zumindest einfache mathematische Berechnungen durchführen kann. Sagt also bitte so was wie:

"Ich hacke meinen HTML-Code per Hand"

5. Vorgehensweise

Grundlagen

Hier werdet ihr mit den Grundprinzipien von HTML vertraut gemacht. Ich versuche, euch zu erklären, welches Konzept dahinter steckt, auf was man wieso achten muss und was der ganze Blödsinn überhaupt soll.

Elemente

Unter diesem Punkt werde ich euch einen Überblick über (fast) alle Elemente geben, die es im HTML gibt. Da ich selber mit einigen noch nie gearbeitet habe, ist die Liste natürlich nicht vollständig. Sie umfasst nur das, was man im praktischen Einsatz halt so braucht. Dabei werde ich, wie oben schon gesagt, all die Dinge ignorieren, mit denen man noch bis vor ein paar Jahren gearbeitet hat, die heutzutage aber schlichtweg überflüssig sind.

Strukturierung

Hier wird es neben einer grundsätzlichen Einführung noch ein paar Beispiele geben, wie man Abschnitte einer HTML-Seite vernünftig aufbauen kann. Dabei handelt es sich um eine Trockenübung am nicht lebenden Objekt. Das entspricht in etwa dem berühmt berüchtigten Erste-Hilfe-Kurs, den jeder Fahrschüler (durch)machen muss.

Vom Verständnis her müsst ihr euch das so vorstellen. Besagter Kurs beim DRK, Thema Mund-zu-Mund-Beatmung. Bei mir lief es damals so. Übungspuppe, ich gebe mein Bestes und der Leiter meinte dann knochentrocken:

"Herr Kropff, ich sagte beatmen, nicht aufpusten! Das ist keine Luftmatratze." [Quelle: ein Kerl vom DRK]

So in etwa läuft das hier ab. Der reale Bezug ist eigentlich nicht vorhanden. Trotzdem lernt ihr ein paar wichtige Dinge. Nämlich euren Code nicht übermäßig und unnötig aufzublasen.

Ein wichtiger Hinweis!

Bei den folgenden Codebeispielen gibt es an der einen oder anderen Stelle einen Zeilenumbruch mitten in einem so genannten Tag (zu dem später mehr). Das liegt leider daran, dass der vorformatierte Code im Browser nicht automatisch umbrochen wird. Da muss ich mich halt an den Leuten mit kleiner Auflösung orientieren. Als Maßstab habe ich 1024x768 genommen.

weiter zum nächsten Abschnitt