Copyright
Soweit nicht anders vermerkt, alle Inhalte
© 2010 Hans Schmucker.
Lizensierbar unter den Bedingungen der
Einführung in HTML
Webseiten werden in HTML geschrieben, zumindest glauben das viele. Tatsächlich bestehen Webseiten aus vielen verschiedenen Sprachen und Formaten: Unicode für Text. XML für Struktur. HTML für Bedeutung. CSS für Formatierung. SVG, GIF, PNG und JPEG für Grafiken. Javascript für Interaktivität. Dieses Tutorial versucht diese verschiedenen Sprachen nach und nach zu erklären und ihr Zusammenspiel zu erläutern.
Was macht HTML?
Zurück zu Anfang
HTML ist eine Sprache um Text mit einer menschen- und maschienlesbaren Bedeutung zu versehen. Bedeutungen wie das ist eine Überschrift
, oder das ist eine Liste
.
HTML definiert diese Bedeutungen und eine (nicht bindende) Möglichkeit diese zu Schreiben. Auch ist die Art wie diese Bedeutungen dargestellt werden (z.B. dass eine Überschrift groß, auf einer eigenen Linie und fettgedruckt ist) nicht teil von HTML. Nur die Bedeutung, also dass es sich hier um eine Überschrift handelt, ist was HTML definiert.
HTML Schreibweisen
Zurück zu Anfang
Wie gesagt, die Art HTML Bedeutungen zu schreiben ist nicht fix. Es existieren mehrere Möglichkeiten, wovon zwei (sehr eng verwante) Sprachen die höchste Verbreitung haben:
- HTML Schreibform
- XML Schreibform (XHTML)
Die HTML Schreibform ist ein eigenes Format, das auf SGML basiert. Es wurde designed um den Zugang zu HTML möglichst einfach zu gestalten, indem ein zusätzliches
Regelwerk bestimmte Fehler automatisch korrigiert. Das Problem ist, das diese automatische Fehlerkorrektur oft zu unvorhergesehenem Verhalten führt: z.B. ist es dadurch
unmöglich eine Tabelle in einen Absatz zu setzen, denn der Beginn einer Tabelle beendet automatisch jeden Absatz. Generell verfolgt die HTML Schreibform einen
best effort
Ansatz, bei der der Browser jegliche Fehlermeldungen unterdrückt, was die Fehleranalyse quasi unmöglich macht. Im Internet findet man zwar immernoch
mehrheitlich diese Schreibform (da bei der Darstellung im Internet Explorer lediglich dieses Format unterstützt wird), zum Lernen von HTML ist sie jedoch ungeeignet.
Die Alternative ist HTML in der XML Schreibform (XHTML genannt). XML ist ein von der HTML Schreibform abgeleitetes Format zum Schreiben beliebiger Daten, nicht nur von HTML Bedeutungen. XHTML ist größtenteils mit der HTML Schreibform kompatibel, so dass ein Programm das nur die HTML Schreibform versteht auch XHTML Daten verarbeiten kann.
XML
Zurück zu Anfang
Bevor wir mit HTML anfangen können, müssen wir also eine dieser Schreibformen lernen, in diesem Fall XML. XML beschreibt lediglich die Struktur eines Datensatzes und gibt Anhaltspunkte, denen durch weitere Definitionen, wie in diesem Fall von HTML, eine Bedeutung zugewiesen werden kann.
Die Struktur ist dabei eine sogennante Baumstruktur, d.h. das ein Element in einem Dokument aus mehreren Unterelementen bestehen kann
Knoten
Zurück zu Anfang
Ein Beispiel einer solchen Struktur währe (wenn eine Box wie diese in diesem Tutorial erscheint kann mit den Buttons zwischen verschiedenen Darstellungsvarianten gewählt werden):
Eine Familie hat zwei Kinderoder in XML Schreibweise
XML ist sehr, sehr einfach und tatsächlich, haben wir hier schon fast die Hälfte aller wichtigen Funktionen von XML abgedeckt: Die Knoten (Nodes).
Ein Knoten besteht aus einem Namen, z.B. familie. üblicherweiße klein geschrieben, nur aus alphanummerischen Zeichen bestehend und in
Dreiecksklammern eingeschloßen. Er ist allen nachfolgenden Knoten übergeordnet, bis er durch die gleiche Sequenz, allerdings diesmal mit einem
Geteiltstrich nach der öffnenden Dreiecksklammer geschloßen wird.
Wenn ein Knoten keine Unterknoten enthält, kann er durch das Einfügen eines Geteiltstriches vor der schließenden Dreiecksklammer sofort wieder geschloßen werden.
]]>
ist also nur eine verkürzte Schreibweise für
]]>
Attribute
Zurück zu Anfang
Einem Knoten können dabei noch weitere Eigenschaften zugewiesen werden:
Die Schreibweise ist dabei wieder extrem einfach: Eigenschaftsname, dann ein Istgleich, dann der Wert in doppelten Anführungszeichen innerhalb der öffnenden Struktur.
Attributwert kann dabei ein beliebiger Text sein, allerdings müssen einige Zeichen besonders geschrieben werden, da die Zeichen selbst eine besondere Bedeutung haben:
- : >]]>
Hier, unser vorheriges Beispiel mit ein paar Attributen mehr, die diese Zeichen enthalten. Zwischen den Ansichten hin-und-her schalten um den Unterschied zu sehen.
Wurzel Knoten
Zurück zu Anfang
Wir brauchen noch eine Regel mehr, dann können wir anfangen unsere eigenen Dokumente zu erstellen:
Es darf immer nur einen Knoten oberster Ordnung geben. In der XML Struktur Ansicht sehen wir hier deshalb eine Fehlermeldung junk after document element
. Mit document ist der erste Knoten oberster Ordnung gemeint. Da es nur einen dieser Knoten geben darf, informiert uns Firefox, dass danach wohl noch irgendwelcher Müll steht, nämlich unser zweiter familie Knoten.
]]>
Wenn wir eine solche Liste in XML angeben wollen müssen wir einfach einen Knoten oberster Ebene einfügen, der diese Knoten bündelt:
]]>
Formatierung
Zurück zu Anfang
... und jetzt können wir loslegen. Die hier gewählte Formatierung, bei der untergeordnete Elemente eingerückt werden, ist übrigens optional. sie dient lediglich der Lesbarkeit. Nach XML wäre es ebenso gültig alles auf einer Linie zu schreiben... allerdings wird eine solche Formatierung dringend empfohlen, da sie insbesondere die Fehleranalyse dramatisch erleichtert.
Übung: XML Knoten mit Attributen
Zurück zu Anfang
In dem untenstehenden Feld kann XML Code getestet werden: Wenn Bearbeiten
ausgewählt ist einfach in das Feld schreiben. Durch
einen Click auf XML Struktur
bekommt man dann entweder die XML Struktur oder eine Fehlermeldung die auf die Stelle wo der Fehler
aufgetreten ist hinweist. Füge hier eine weitere Familie mit einem Kind und einem Hund mit dem seltsamen Namen "Me & U" (inklusive Anführungszeichen) hinzu.
]]>
Textknoten
Zurück zu Anfang
Fehlen noch die Textknoten. Textknoten sind sehr einfache Knoten die keinen Namen, keine Attribute und keine untergeordneten Knoten haben. Sie bestehen lediglich aus einem Wert und finden Verwendung wenn die Bedeutung durch das übergeordnete Element bereits klar ist. Geschrieben werden sie als einfacher Text ohne spezielle Markierungen, allerdings müssen die Less-Than (<), Greater-Than (>) und Ampersand (&) Zeichen auch hier mit der selben Notation wie in Attributwerten geschrieben werden.
Wenn wir unserem vorherigen Beispiel ein name Element hinzufügen könnten wir diesem Element ein Wert
oder Name
Attribut hinzufügen, oder wir verwenden einfach Textknoten:
Schmidt
Peter
Maria
]]>
Namespaces
Zurück zu Anfang
Namespaces sind Anweisungen, die dem interpretierenden Programm sagen nach welchem Regelwerk den Knotentypen Bedeutungen zugewiesen werden sollen. "http://www.w3.org/1999/xhtml" ist Beispielsweise der Namespace von XHTML. Bis jetzt haben wir nur mit Dokumenten ohne definierte Bedeutung gearbeitet, allerdings wollen wir ja später XHTML schreiben, also müssen wir wissen wie man einen solchen Namespace wählt:
Der Namespace wird einfach in das xmlns
Attribut des Wurzelelements gepackt. Das war's schon. Tatsächlich hat diese Adresse keine Bedeutung, außer den Namespace eindeutig zu identifizieren. Die Seite muss nicht einmal existieren.
Hello World