Erste Schritte

Schwupp und fertig...

Die eigene Homepage in 20 Minuten! Ohne HTML-Kenntnisse!

So ähnlich liest man es immer wieder in der Werbung. Sollten auch Sie diesem Irrglauben unterliegen, lesen Sie bitte hier zum Thema "Schwupp und fertig."

HTML

Die Grundlage einer jeden Webseite bildet die Auszeichnungssprache HTML. Eine solche HTML-Datei ist eine reine Textdatei und genau dieser Text ist es, der über das Internet vom Anwender abgerufen wird. Der von Ihnen erstellte Quelltext (auch Quellcode genannt) wird erst im Rechner Ihres Besuchers durch dessen Browser (oft leider mehr oder weniger gut) zu jener Seite zusammengebaut, die Sie zuvor geplant haben.

Damit der Browser des Anwenders den von Ihnen geschriebenen Quelltext auch lesen und interpretieren kann, ist es notwendig, dass er alle von Ihnen verwendeten Befehle auch kennt. Das ist leider gar nicht selbstverständlich, da die Internetsprachen ständig weiterentwickelt und durch neue Befehle ergänzt werden. Folglich haben ältere Browser oft Schwierigkeiten mit modernen Quelltexten und stellen einiges anders dar, als Sie es sich vorgestellt haben. Auch haben die einzelnen Browser verschiedener Hersteller ihre Besonderheiten.

Der Quelltext ist also eine Art Bauplan. Und je nachdem, wie gut der Browser des Besuchers Baupläne lesen kann, sieht dann die Webseite aus.

HTML-Quellcode wird übrigens nicht programmiert, sondern einfach nur geschrieben. HTML ist also keine Programmiersprache.

Hypertext

Das HT in HTML steht also für Hypertext. Schön. Und was ist das nun? Hypertext ist Text mit anklickbaren Querverweisen, die man Hyperlinks oder auch einfach Links nennt. Durch diese Links werden Milliarden von Webseiten im World Wide Web miteinander verbunden.

Und genau diese Verknüpfungen machen das Internet aus.

Markup

Das M steht für Markup und bedeutet Textauszeichnung oder auch frei übersetzt etikettieren. Eine Auszeichnung drankleben, wie Preisschilder im Supermarkt. Überschriften wird dadurch gesagt, dass sie Überschriften sind, Absätze definiert man als solche, bestimmte Bereiche werden durch das Markup zusammengefasst, um sie zu gestalten oder zu positionieren. Aber Achtung: Für die Gestaltung und Positionierung selbst ist HTML nicht zuständig! HTML dient nur der Struktur. Sollte es jedenfalls. Geht leider auch anders, was heute aber als veraltet gilt. Mittlerweile sind aktuelle Browser auch in der Lage, diesen modernen Ansatz zu unterstützen.

Language

Das L steht für Language oder auf deutsch Sprache. HTML ist übrigens keine Programmiersprache, sondern eine Auszeichnungssprache und wie jede Sprache kennt auch HTML Vokabeln und Grammatikregeln.

XHTML

XHTML schließlich ist die neueste Version von HTML, die sich aber im wesentlichen nur durch etwas strengere Grammatikregeln von ihrem Vorgänger unterscheidet.

HTML-Syntax

Eine HTML-Anweisung (Tag [sprich: Tääg], engl.: Schild, Etikett) beginnt immer mit einem öffnenden Tag, bestehend aus <...> und einer entsprechenden Anweisung dazwischen, teilweise ergänzt um Attribute (Eigenschaften), und wird durch ein Ende-Tag wieder ausgeschaltet. Dieses Ende-Tag sieht wie das Anfang-Tag aus, nur erhält es einen vorangestellten Slash (/) und keine weiteren Attribute.

Die Inhalte, auf die sich die Anweisungen beziehen, stehen zwischen dem öffnenden und dem schliessenden Tag.

Beispiel 

<h1>Ich bin eine Überschrift!</h1>

Einige HTML-Anweisungen:

Attribute

HTML-Elemente können Attribute (Eigenschaften) haben. Diese stehen immer im Anfangstag und bestehen aus Attributnamen + Gleichheitszeichen + Wert in Anführungszeichen.

<p id="meinname">
  Ich bin ein Absatz.
  Aber ein ganz besonderer.
  Ich habe nämlich als Attribut eine ID, bin also direkt ansprechbar.
</p>

Block und Inline

Alle Elemente sind rechteckig. Es gibt aber zwei Hauptunterschiede:

Inline-Elemente erzeugen keine neue Zeile und sind den Block-Elementen untergeordnet. Sie dürfen keine Block-Elemente enthalten, wohl aber andere Inline-Elemente.

Näheres bei Self HTML

Das World Wide Web Consortium (W3C)

Das W3C ist eine unabhängige Institution, welche sich mit der (Weiter-) Entwicklung der offenen Internet- bzw. WWW-Standards beschäftigt und ist allgemein anerkannt.

Gemäß W3C dienen HTML-Tags in erster Linie der logischen Auszeichnung (z.B. Überschrift oder Absatz) des Inhaltes von Dokumenten. Es gibt jedoch auch Anweisungen, welche konkret das Layout (z.B. Textfarbe oder Absatzausrichtung) beschreiben. Letztere sollten vermieden werden, da es dafür andere Techniken gibt. Leider unterstützen HTML-Editoren diese vom W3C als "deprecated" (engl.: unerwünscht) eingestuften Tags meist recht intensiv. Ihre Verwendung ist nicht verboten, aber (mittlerweile) unerwünscht! Sie sollten HTML nicht dazu verwenden, Dokumente zu gestalten! Dafür gibt es CSS.

HTML und CSS

Das Web ist von Wissenschaftlern für Wissenschaftler erfunden worden und diese sind oft mehr am Inhalt als am Aussehen interessiert. Mit Basis-HTML sehen Webseiten alle gleich aus: Schwarze Schrift auf weißem Hintergrund und blaue unterstrichene Hyperlinks, die lila werden, wenn sie bereits besucht wurden.

Dann wurde Ende des letzten Jahrtausends das Web zum weltweiten Boom und somit der Ruf nach Gestaltung immer lauter. CSS war noch in der Entwicklungsphase und selbst heute noch "sprechen" einige Browser schlechtes CSS. Also erdachte man sich Hilfmittel. <font>, "blinde Tabellen" und "Frames".

Ein Layout durch blinde Tabellen zu realisieren, ist immer noch durchaus gängige Technik. Durch den Einsatz von Stylesheets (CSS) ergeben sich allerdings mittlerweile andere Möglichkeiten. Man kann auch beides kombinieren, mittlerweile rate ich davon aber ab. Moderne Browser "sprechen" heute recht gut CSS. Leider ist der weit verbreitete Internet Explorer in diesem Fach Klassenschlechtester und das macht die Sache mitunter schwierig.

Merken Sie sich erst mal folgendes:

Noch ein paar Hinweise zum Quellcode

Eine HTML-Datei ist eine reine Textdatei. Theoretisch könnten Sie alle Anweisungen in eine einzige Zeile schreiben. Zeilenumbrüche dienen nur der Übersichtlichkeit für uns Menschen, dem Browser sind sie egal, er ignoriert sie.

Ebenso werden zwei oder mehr aufeinander folgende Leerzeichen ignoriert. Wenn wirklich einmal mehrere Leerzeichen hintereinander folgen sollen, können Sie das "geschützte Leerzeichen" verwenden: &nbsp;

Bitte denken Sie daran...

... ein HTML-Editor ist auch nicht mehr als ein Texteditor. Er nimmt uns Tipparbeit ab, indem wir mittels Menü oder Symbolleisten recht einfach bestimmte HTML-Anweisungen einfügen können. Wenn der Cursor jedoch an der falschen Stelle steht oder der falsche Text- oder Quellcodeabschnitt markiert ist, werden diese Anweisungen durchaus auch an der falschen Stelle eingefügt. Dem Editor ist es nämlich zunächst einmal völlig egal, ob es Sinn macht, was wir schreiben! Auf diese Art können die seltsamsten Effekte auftreten!

Also: Die HTML-Tags immer (von wenigen Ausnahmen abgesehen) paarweise verwenden, dabei auch an die spitzen Klammern denken, und den Schrägstrich im abschliessenden Tag nicht vergessen!

Es ist nicht nur erlaubt, sondern auch notwendig, Tags zu verschachteln, und zwar von innen nach außen. Wer's falsch macht, löst unter Umständen Folgefehler aus, weil nicht klar ist, welche Anweisung vom Browser wann interpretiert werden soll. Ich vergleiche es immer gern mit der Klammersetzung in der Mathematik.

Keine Übersicht über den eigenen Quellcode mehr?

Leerzeilen im Quellcode können Blöcke optisch trennen. Einrücken hilft, die Struktur mit dem Auge schneller zu erfassen. Hilft auch bei der Fehlersuche. 

<html>

  <head>
    <title>
      Hier steht der Titel
    </title>
  </head>

  <body>
    <h2>
      Eine Überschrift
    </h2>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing
      elit. Donec fermentum. Fusce vitae lorem. Curabitur
      sapien mauris, fringilla sed, feugiat et, scelerisque
      eu, augue. Cras quam erat, lobortis ut, sagittis eu,
      convallis eu, nunc. Sed odio nibh, venenatis id, rutrum
      sit amet, dignissim vel, dui. Cras sed purus. Phasellus
      id quam nec tortor egestas scelerisque. Aenean dui mi,
      tincidunt eu, nonummy id, euismod laoreet, ligula. Cras
      eleifend ullamcorper tortor. Praesent vehicula turpis
      non ipsum. Curabitur tincidunt aliquet urna. Nulla
      facilisi. Donec a ligula.
    </p>
  </body>

</html>

Das Einrücken von Quellcode ist eine sehr individuelle Vorliebe und führt vielfach zu emotionalen Kontroversen, weil jeder meint, seine Art der Einrückung sei die Beste. Jeder Stil ist Ausdruck der eigenen Ästhetik, aber auch Ergebnis schnellen Tippens oder des Drucks des Auftraggebers. Es zeigt sich glücklicherweise, dass jeder durch seinen eigenen Quellcode am schnellsten navigieren kann.