Anzeige
Tutorialbeschreibung

Professionelle Websites: Basiswissen HTML und CSS Teil 1

Professionelle Websites: Basiswissen HTML und CSS Teil 1

Dieses Kapitel soll die beiden grundsätzlichen Sprachen vermitteln, mit denen moderne Webseiten erstellt werden: HTML und CSS. In HTML strukturieren Sie Inhalte durch Elemente für Überschriften, Absätze, Listen, Tabellen und andere. Mithilfe von CSS bestimmen Sie, wie diese Elemente z.B. im Browser-Fenster angeordnet und formatiert werden. Beide Sprachen sind computerlesbar, aber auch für Menschen genießbar. Sie bestehen aus englischsprachigen Begriffen oder Abkürzungen davon sowie aus einfachen Steuerzeichen, die auf jeder Tastatur zu finden sind.


Das nun folgende Tutorial ist ein Auszug aus dem Buch: Professionelle Websites von Stefan Münz.
Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Pearson Education .


1. HTML und XHTML

Vielleicht haben Sie bereits von XHTML gehört und kennen Aussage wie die, dass man kein HTML mehr verwenden solle, sondern nur noch XHTML. In diesem Zusammenhang sollten Sie ein paar grundsätzliche Hintergründe kennen.

1.1 SGML und XML

HTML ist ein wohldefinierter Standard. Die Regeln für korrektes HTML werden jedoch nicht mithilfe natürlicher Sprache, sondern in einer ebenfalls computerlesbaren Meta- Sprache namens SGML (Structured Generalized Markup Language) formuliert. Die Computerlesbarkeit ist wichtig, damit z.B. ein Programm eine in HTML geschriebene Webseite gegen die in SGML formulierten HTML-Regeln auf syntaktische Korrektheit testen kann.
Diesen Vorgang nennt man Validierung (Gültigkeitsüberprüfung). SGML ist sehr leistungsfähig, aber auch recht komplex und für viele praktische Anwendungsfälle überdimensioniert. Als praxisnähere Alternative zu SGML hat sich mittlerweile XML (Extensible Markup Language) etabliert. XML ist wie SGML eine computerlesbare Meta-Sprache zum Formulieren der Regeln von Markup-Sprachen wie HTML. XHTML (Version 1.0) ist zunächst einmal nichts anderes als eine Neuformulierung der Sprachregeln von HTML (Version 4.01) in XML. Mit XHTML 1.0 können Sie also nicht mehr und nicht weniger und nichts anderes tun als mit der aktuellen HTML-Version 4.01: nämlich die Inhalte Ihrer Webseiten strukturieren. Es gibt in diesem Stadium von XHTML auch keine wesentlich anderen Sprachbestandteile als in HTML. Da allerdings die Markup-Regeln von XML etwas anders aussehen als die von SGML, gibt es einige syntaktische Abweichungen und Besonderheiten. In Abschnitt 4.3.6 werden wir auf diese Abweichungen und Besonderheiten gegenüber HTML eingehen.

1.2 Interpretation von HTML und XHTML

Ein Parser leistet die Verarbeitung von Markup-Sprachen entsprechend der Regeln der Markup- prache. Jeder Browser, der eine Webseite am Bildschirm anzeigt, muss deren HTML-Quelltext parsen. Aus dem Markup geht hervor, aus welchen Elementen die Webseite besteht und welche Elemente innerhalb welcher anderer Elemente vorkommen. So kann beispielsweise ein einzelnes Wort wie »Mensch« Inhalt einer Kopfzelle einer Tabelle sein, die sich in einem bestimmten Bereich innerhalb des Dateikörpers befindet. Zum Verarbeiten von HTML verfügt jeder Browser über einen HTML-Parser. Bei XHTML ist die Angelegenheit etwas komplizierter: Wenn das HTML- okument vom Browser als HTML akzeptiert wird, verwendet der Browser seinen HTML-Parser. Wird es jedoch als XML-Dokument akzeptiert, so wird der XML-Parser verwendet, sofern der Browser über einen entsprechenden Parser verfügt. In der Darstellung kann dies erhebliche Auswirkungen haben. So stellen einige Browser XML-geparste Dokumente nur als Markup-Strukturbaum dar, also letztlich als eine sauber formatierte Quelltextansicht. Andere bieten XMLgeparste Dokumente möglicherweise nur zum Download an und stellen gar nichts dar. Ob ein Browser bei einem XHTML-Dokument den HTML-Parser oder den XML-Parser verwendet, hängt in erster Linie vom zugewiesenen Mime-Type ab. Der Mime-Type legt den Datentyp fest. Jeder Browser hat lokal eine eigene Liste von Mime-Typen gespeichert, mit deren Hilfe er z.B. Dateiendungen und Datentypen zuordnen kann. Beim MS Internet Explorer ist diese Liste eng verzahnt mit den Dateiendungsverknüpfungen des Betriebssystems. Wird eine beliebige Datei im Browser lokal geöffnet, kann dieser an Hand seiner Mime-Type-Liste entscheiden, wie er mit der Datei verfahren soll. Anders sieht es aus, wenn der Browser Daten von einem Webserver anfordert und empfängt. In diesem Fall übermittelt der Webserver Kopfdaten an den Browser, in denen unter anderem eine Angabe zum Mime-Type der übertragenen Daten stehen kann, die dem Browser zur Orientierung dient.
Für HTML-Dokumente lautet der Mime-Type text/html. Für XHTML sollte jedoch laut Spezifikation nicht dieser Mime-Type verwendet werden, sondern application/xhtml+xml. Alternativ dazu sind auch die Angaben text/xml und application/xml möglich. Dies führt jedoch je nach Server- und Browser-Einstellungen zu Problemen. Der immer noch am weitesten verbreitete MS Internet Explorer kann mit dem Mime-Type application/xhtml+xml sogar bei angepasster Server-Konfiguration nichts anfangen und bietet ein Dokument mit diesem Mime-Type zum Download an. Daher wird in der Praxis doch noch der Mime-Type text/html verwendet.
Wenn Sie sichergehen wollen, dass Ihre XHTML-Seiten als Webseiten im Browser erscheinen, dann weisen Sie statischen XHTML-Dateien am besten ebenso wie HTML-Dateien die Dateiendung .htm oder .html zu.

Links zu weiteren Informationen:

W3C-Übersicht SGML-Ressourcen:
http://www.w3.org/MarkUp/SGML/
W3C-Übersicht zu XML:
http://www.w3.org/XML/
Artikel »SGML, die leise Revolution«:
http://mintert.com/xml/leise-revolution/leise_revolution.html
Wikipedia-Artikel über Parser:
http://de.wikipedia.org/wiki/Parser
RFC 2045 (Mime):
http://www.faqs.org/rfcs/rfc2045.html
RFC 2046 (Mime-Medientypen):
http://www.faqs.org/rfcs/rfc2046.html
Liste der Mime-Typen:
http://www.iana.org/assignments/media-types/

1.3 Argumente für XHTML

Bei neu zu erstellenden Webseiten sprechen durchaus einige Gründe dafür, von vorneherein XHTML statt »herkömmlichem« HTML zu verwenden. Diese Gründe hängen letztlich alle mit der Integration von XHTML in der XML-Welt zusammen:
- Kombination mit anderen XML-Sprachen: In einem XHTML-Dokument können Sie beispielsweise direkt mathematisch/naturwissenschaftliche Formeln in MathML oder Vektorgrafiken in SVG notieren. Der Grund ist, dass in XML-basierende Dokumente, zu denen XHTML-Dokumente ja gehören, Daten aus beliebigen anderen XML-basierenden Sprachen eingebettet werden können.
- Konvertierung in andere XML-Sprachen oder Ausgabeformate: Mithilfe von XSLT, einer standardisierten, XML-basierten Markup-Sprache zum Übertragen von Inhalten aus XML-basierten Sprachen in andere XML-basierten Sprachen oder beliebige andere Ausgabeformate ist XHTML optimal für die Konvertierung in andere Ausgabeformate gerüstet. Dies ist beispielsweise für Inhalte sinnvoll, die nicht nur als Webseite, sondern z.B. auch als Print-Dokument veröffentlicht werden sollen.
- Zukunftssicherheit: Die Spezifikation zu XHTML wird in jedem Fall weiterentwickelt. So ist XHTML 2.0 bereits in Entwicklung. Eine parallele Weiterentwicklung von herkömmlichem HTML ist dagegen nicht vorgesehen. Zwar ist XHTML 2.0 für die aktuelle Praxis noch irrelevant, doch kann sich dies in wenigen Jahren ändern. Eine Konvertierung von XHTML-1.0-Dokumenten nach XHTML 2.0 ist vermutlich unproblematischer zu bewerkstelligen als eine Konvertierung von herkömmlichem HTML 4.01 auf XHTML 2.0.

Andererseits ist sauberes HTML auch nicht zwangsläufig schlechter konvertierbar als sauberes XHTML. Die Einbettung anderer XML-Formate ist ebenfalls nur schöne Theorie, die in den heutigen Browsern höchstens ansatzweise funktioniert. So betrachtet spricht aus praktischer Sicht nichts gegen die Verwendung von HTML. Die Quelltexte in diesem Buch verwenden ebenfalls »gewöhnliches« HTML.

2 Eine vollständige Webseite mit HTML

Betrachten wir nun den Quelltext einer vollständigen HTML-Datei, um die Funktionsweise von HTML zu verstehen. Der Quelltext lässt sich so wie hier abgedruckt in einem Texteditor eingeben und als Datei mit der Endung .html oder .htm abspeichern. Aus Gründen der Übersichtlichkeit ist der abgedruckte Quelltext mit Einrückungen versehen. Die Einrückungen verdeutlichen die Struktur der HTML-Datei.

2.1 Quelltext und Verschachtelungsstruktur

Listing 4.1: Eine vollständige HTML-Datei

Bilder


Markup-Sprachen wie HTML sind für die Abbildung von verschachtelten Datenstrukturen ausgelegt. Der Quelltext ist am leichtesten nachvollziehbar, wenn er als Schachtelstruktur verstanden wird. Die äußerste Schachtelebene stellt das html-Element dar, markiert durch den Anfang mit der Zeichenfolge <html> und das Ende mit </html>. Die Dokumenttypangabe vor <html> lassen wir an dieser Stelle außen vor. Das html-Element schließt zwei bedeutende Elemente ein. Das erste dieser Elemente ist das head-Element, markiert durch den Anfang <head> und das Ende </head>. Das head-Element ist für HTML-Kopfdaten gedacht, wie zum Beispiel den Titel des Dokuments, markiert durch den Anfang <title> und das Ende </title>. Das zweite Element innerhalb des html-Elements ist das body-Element für die im Browser sichtbaren Inhalte, markiert durch <body> bzw. </body>.
Innerhalb des body-Elements enthält das Beispiel-Listing weitere Elemente, auf die wir an dieser Stelle nicht weiter eingehen. Zu erkennen ist jedoch, dass die Verschachtelung der Elemente den gleichen Gesetzen folgt: Elemente beginnen und enden innerhalb anderer Elemente.

2.2 HTML-Darstellung im Browser

Wie eine HTML-Datei im Browser dargestellt wird, das hängt von den Einstellungen des Browsers und von Umgebungseinstellungen ab.

Bilder

Abbildung 4.1: HTML-Datei in einem modernen grafischen Webbrowser

Bilder

Abbildung 4.2: HTML-Datei in einem textbasierten Browser (Lynx)

Das Listing enthält keinerlei Anweisungen, in welcher Weise die Daten darzustellen sind. Webbrowser verwenden umgebungsabhängig realisierbare Defaultwerte für Textattribute, Abstände usw., um die HTML-Elemente im Browser-Fenster anzuzeigen. Je nach Browser kann das, was dabei herauskommt, sehr unterschiedlich sein, wie die beiden Abbildungen zeigen.
Der Grund ist, dass in HTML nur die Bedeutung von Daten markiert wird, nicht deren Darstellung – man spricht auch von »semantischem Markup«. HTML-Authoring ist also keine gestalterische, sondern eine architektonische Arbeit. Die Sprache ist bewusst so konzipiert, dass sie »geräteunabhängig« ist. Ausgabegeräte können nicht nur grafische Browser sein, sondern z.B. auch rein akustische Reader, Mini-Displays von PDAs oder Handys oder auch eine Braille-Leiste. Befreien Sie sich also von vorneherein von der Vorstellung, dass Sie mit HTML das Aussehen von Webseiten optisch gestalten können. Gewöhnen Sie sich gleich an, diese Aufgabe
allein der Ergänzungssprache CSS zu überlassen.

2.3 Fehlertoleranz bei Browsern

Während Compiler oder Interpreter ein Programm oder Script sofort abbrechen oder gar nicht erst ausführen, sobald darin ein Syntaxfehler vorkommt, gehen Browser mit Syntaxfehlern in HTML- okumenten meist sehr gnädig und tolerant um. Dies hat bedauerlicherweise dazu geführt, dass zahllose Webseiten, nicht selten auch diejenigen bekannter Sites und großer Firmen, syntaktisch voller Fehler sind. Dazu kommt, dass HTML bereits eine wechselvolle Geschichte hinter sich hat. Die Ausrichtung auf »semantisches Markup« ist noch nicht so alt wie die Sprache selbst. Viele Webdesigner der ersten Generation, die heute oft als besonders erfahren gelten, produzieren ein völlig veraltetes und nicht mehr standardkonformes HTML.
An dieser Stelle sei daher gewarnt vor der Laxheit der Browser im Umgang mit HTML. Die Tendenz der Weiterentwicklung geht auf jeden Fall in die Richtung, Syntaxfehlern gegenüber intoleranter zu sein. Wenn ein Browser beispielsweise eine XHTML-Datei mit seinem XML-Parser verarbeitet und dabei auf Syntaxfehler stößt, wird die Verarbeitung abgebrochen. Es lohnt sich also, sorgfältig auf syntaktisch korrektes HTML zu achten!

3 Allgemeine Regeln bei HTML

Bevor Sie die HTML-Elemente im Einzelnen kennen lernen, sollten Sie mit den allgemeinen Regeln von HTML vertraut sein.

3.1 Elemente und Tags

Ein HTML-Element besteht in den meisten Fällen aus einer Anfangsmarkierung und einer Endmarkierung, den so genannten Tags. So wird beispielsweise der Dokumenttitel durch das Anfangs-Tag <title> und das End-Tag </title> markiert. Anfangs- und End-Tags werden in spitze Klammern eingeschlossen. End-Tags sind jederzeit daran zu erkennen, dass unmittelbar hinter der öffnenden spitzen Klammer ein Schrägstrich folgt.
Es gibt auch Elemente, die nur aus einem Anfangs-Tag bestehen. Dies sind Elemente, die keinen weiteren Inhalt haben können, beispielsweise <br>, was einen Zeilenumbruch an der notierten Stelle im Text erzwingt.
HTML unterscheidet nicht zwischen Groß- und Kleinschreibung, weshalb Schreibweisen wie <title>, <Title> oder <TITLE> gleichermaßen korrekt sind. Aus heutiger Sicht empfiehlt es sich jedoch, alles klein zu schreiben, und zwar in Hinblick auf eine mögliche spätere Umstellung auf XHTML. In XHTML müssen nämlich alle HTML-Auszeichnungen klein geschrieben werden. Da die heute üblichen Quelltext-Editoren meist Syntax-Highlighting für HTML unterstützen, entfällt auch das Argument, die Großschreibung von Element- oder Attributnamen erhöhe die Quelltextlesbarkeit.

Elementverschachtelung
Wie bereits ersichtlich wurde, entsteht die Strukturierung von Inhalten in HTML durch Verschachtelung von Elementen. Die meisten Elemente mit Anfangs- und End-Tag können also andere Elemente enthalten, was allerdings nicht automatisch bedeutet, dass beliebige Elemente beliebige andere Elemente enthalten können. Die HTML-Spezifikation legt genau fest, welche Elemente innerhalb welcher anderer Elemente vorkommen dürfen und welche nicht. So kann beispielsweise eine Tabellenzelle so ziemlich alles enthalten, von Überschriften über Grafikreferenzen bis hin zu kompletten inneren Tabellen. Dagegen kann eine Überschrift keine Textabsätze oder Tabellen enthalten. Die Grundregel beim Verschachteln lautet, dass innere Elemente auch tatsächlich innerhalb des Elternelements geschlossen werden müssen. Falsch ist also ein derartiges Konstrukt:
<p>Er war in sie <strong>verliebt.</p>
<p>Sie</strong> war ebenfalls verliebt, aber nicht in ihn.</p>
Richtig ist dagegen dieses:
<p>Er war in sie <strong>verliebt</strong>.</p>
<p><strong>Sie</strong> war ebenfalls verliebt, aber nicht in ihn.</p>
Viele Fehler beim Notieren von HTML entstehen dadurch, dass die Regeln verletzt werden in Bezug darauf, welche Elemente innerhalb welcher anderer Elemente vorkommen dürfen. Im Zweifelsfall benötigen Sie eine Referenz, der eindeutig zu entnehmen ist, ob ein Element innerhalb eines anderen Elements erlaubt ist oder nicht. Im Anhang dieses Buches finden Sie eine entsprechende Element-Referenz zu HTML. Zu empfehlen ist hierfür jedoch auch der Blick in die Original-HTML-Spezifikation des W3-Konsortiums.

Block- und Inline-Elemente
Bei den Elementen, die im sichtbaren Dateikörper, also zwischen <body> und </body> notiert werden können, wird zwischen Block-Elementen und Inline-Elementen unterschieden. Block- lemente erzeugen per definitionem eine neue Zeile im Textfluss. Inline-Elemente tun dies nicht. So gehören beispielsweise <h1> (Überschrift 1. Ordnung) oder <div> (Bereich) zu den Block-Elementen, während <strong> (betont) oder <cite> (Zitat) zu den Inline-Elementen gehören.
Wie groß bei Block-Elementen die Abstände zum vorhergehenden und zum nachfolgenden Element sind, ist in HTML nicht festgelegt. Auch hierfür verwenden die Browser Default-Werte. Kontrollierbar werden solche Abstände erst durch entsprechende Formatierung mit CSS.
Die Unterscheidung nach Block- und Inline-Elementen ist für die Formulierung allgemeiner Verschachtelungsregelungen recht praktisch. So gibt es Block-Elemente, die keine anderen Block- lemente, sondern nur Inline-Elemente enthalten dürfen (z.B. <h1>), aber auch Block-Elemente, die sehr wohl andere Block-Elemente enthalten dürfen (z.B. <div>). Doch auch im Hinblick auf CSS ist die Unterscheidung von Block- und Inline-Elementen von Bedeutung. Näheres dazu erläutern wir später in Zusammenhang mit dem Boxmodell von CSS.

3.2 Attribute und Attributwerte

HTML-Elemente können Attribute mit variablen Wertzuweisungen enthalten. Solche Attribute werden im Anfangs-Tag eines Elements notiert.

Ein Beispiel:
<p title="Ich bin ein p-Element" lang="de">Fahr mit der Maus über mich, und ich
erkläre dir, was ich bin</p>

Die meisten Tags können auch mehrere Attribute enthalten, wie das Beispiel zeigt. Alle Attribute werden im Anfangs-Tag notiert, durch Leerraum vom Elementnamen getrennt und vor der schließenden spitzen Klammer. Attributname und Wertzuweisung werden durch ein =-Zeichen getrennt. Wertzuweisungen stehen immer in Anführungszeichen. Erlaubt sind einfache und doppelte Anführungszeichen, doppelte sind jedoch üblicher. Typografische Anführungszeichen sind nicht erlaubt, sondern nur diejenigen, die auf deutsch belegten Tastaturen beispielsweise über die Tastenkombination (Shift)+(2) erreichbar sind.
Welche Attribute in welchen Elementen möglich sind, legt die HTML-Spezifikation fest. Neben diversen elementspezifischen Attributen gibt es in HTML auch eine Reihe von universell verwendbaren Attributen. Die beiden Attribute im obigen Beispiel, title= (Tooltipp- Inhalt) und lang= (Textsprache), gehören zu diesen universellen Attributen.
In der HTML-Spezifikation ist nicht nur festgelegt, welche Elemente welche Attribute enthalten dürfen, sondern auch, wie die Wertzuweisung an ein Attribut beschaffen sein muss. So gibt es Attribute, die nur bestimmte Werte zulassen, beispielsweise ein Attribut namens dir=, welches die Schriftrichtung anzeigt. Erlaubt sind hierbei nur die Wertzuweisungen dir="rtl" (von rechts nach links) oder dir="ltr" (von links nach rechts). Andere Attribute, wie das title-Attribut, lassen dagegen relativ freie Angaben zu. Wieder andere Attribute erwarten eine frei wählbare Angabe, die jedoch einem bestimmten Wertebereich oder einem bestimmten Schema entsprechen muss. So erwartet beispielsweise das lang-Attribut, welches die Sprache des Elementinhalts angibt, die Angabe eines Sprachenkürzels nach den Listen in RFC 1766 oder RFC 3066. Erlaubt sind also Angaben wie lang="de" (Deutsch), lang="de-at" (österreichisches Deutsch) oder lang="en-us" (amerikanisches
Englisch), nicht aber Angaben wie lang="german".

3.3 Notation von Zeichen

Webseiten werden in allen Sprachen dieser Welt erstellt und gelesen. Die Element- und Attributnamen von HTML sind dabei immer die gleichen. Doch Elementinhalte oder Wertzuweisungen an Attribute können auch kyrillische, arabische oder chinesische Schriftzeichen erfordern. Der Zeichenvorrat von HTML basiert daher auf dem des Unicode- Systems, das alle bekannten Schriftzeichen, Ziffern, Symbole usw. verzeichnet. Das Unicode-System ist in der internationalen Norm ISO 10646 festgeschrieben. Wir werden an dieser Stelle nicht auf die ganze theoretische Komplexität von Zeichenvorräten, Zeichenkodierungen, Zeichenklassen, Zeichensätzen usw. eingehen. Stattdessen werden wir an der Praxis orientierte Regeln und Vorgehensweisen vorstellen. Wichtig ist jedoch, dass Sie diese beherzigen. Denn andernfalls können Sie böse Überraschungen erleben, weil beispielsweise die Umlaute und diverse andere Zeichen in Ihren Texten auf Nachbars Macintosh-Rechner oder im Internetcafé von Trinidad völlig verhunzt dargestellt werden.

HTML-eigene Zeichen
Wenn in Ihren Texten Zeichen vorkommen sollen, die von HTML- oder XML-Parsern als Indikatoren für Markup erkannt werden, müssen Sie die entsprechenden Zeichen in jedem Fall »maskieren«. Benutzen Sie dazu am besten die dafür vorgesehenen HTMLEntities wie in der nachfolgenden Tabelle gezeigt.

Bilder

Tabelle 4.1: Notation HTML-eigener Zeichen

Einige Beispiele:
<p>In HTML notiert sieht dieser Satz so aus: &lt;p&gt;In HTML notiert sieht
dieser Satz so aus:&lt;/p&gt;</p>
<p>Und das Baby sprach &quot;Hicks&quot;</p>
<p>Die Firma &apos;Meier &amp; Söhne&apos; existiert bereits seit 1865 und
produziert seitdem &lt;spitze Klammern&gt;.</p>

Achten Sie bei der Notation stets auf die korrekte Zeichenfolge, bestehend aus führendem &, gefolgt vom Namen der HTML-Entity und abgeschlossen durch ein Semikolon ;. Webbrowser wandeln die Notationen bei der Anzeige in die gewünschten Zeichen um.
Viele HTML-Editoren oder Texteditoren mit HTML-Features unterstützen das automatische Einfügen solcher Notationen beim Eintippen der entsprechenden Zeichen oder erlauben zumindest ein bequemes Suchen und Ersetzen, um alle betroffenen Zeichen mit einem Befehl in ihre entsprechenden HTML-Notationen umzuwandeln.

Webseiten vorwiegend in Deutsch und/oder anderen westlichen Sprachen
Wenn die Inhalte Ihrer Webseiten vorwiegend deutschsprachig sind oder auch englisch, französisch, spanisch, portugiesisch, italienisch, schwedisch, dänisch, norwegisch oder finnisch oder gemischt in zwei oder mehreren dieser Sprachen, dann ist die nachfolgend beschriebene Vorgehensweise am einfachsten:

1. Verwenden Sie einen Text- oder HTML-Editor, der Ihnen beim Speichern explizit die Option anbietet, im Zeichensatz ISO-8859-1, ISO-8859-15 oder zumindest im »Default-Zeichensatz« zu speichern, wobei bei Letzterem maßgeblich ist, in welcher Betriebssystemumgebung und mit welcher Benutzersprache Sie arbeiten. Wenn Sie beispielsweise ein deutschsprachiges MS Windows einsetzen, werden Textdateien per Default in einem Zeichensatz gespeichert, der die Zeichensätze ISO-8859-1 bzw. ISO-8859-15 abdeckt.

2. Notieren Sie in allen HTML-Dokumenten im Kopfbereich, also zwischen <head> und </
head>, folgende Angabe:
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-1">
oder:
<meta http-equiv="content-type" content="text/html;
charset=ISO-8859-15">

3. Notieren Sie im Text nur Zeichen aus dem ASCII-Zeichensatz und dem Wertebereich dezimal 32 bis 127 (siehe weiter unten) sowie aus dem Zeichensatz ISO-8859-1 oder ISO 8859-15 und dem Wertebereich dezimal 160 bis 255 (siehe weiter unten).

4. Notieren Sie für alle Zeichen, die nicht in diesem Zeichenvorrat vorkommen, die numerische Schreibweise oder, sofern es eine benannte HTML-Entity dafür gibt, die entsprechende Zeichenfolge. Mehr zu diesen Notationsmöglichkeiten finden Sie weiter unten im Abschnitt »Die Lösung für Sonderzeichen: HTML-Entities und numerische Notation«.

Die folgenden beiden Tabellen enthalten die Zeichen, die Sie bei der zuvor beschriebenen Vorgehensweise direkt, also ohne numerische Umschreibung oder Entity-Notation, verwenden können.

Bilder

Tabelle 4.2: ASCII-Zeichensatz

Bilder

Bilder

Tabelle 4.3: Zeichensatz ISO-8859-1

Den dezimalen Zeichenwert eines Zeichens ermitteln Sie aus diesen Tabellen, indem Sie die Werte aus Spalten- und Zeilenüberschrift des Zeichens addieren. Ein großes K hat in der Tabelle zum ASCII-Zeichensatz beispielsweise den Zeilenwert 70 und den Spaltenwert 5. Daraus ergibt sich der Wert 75 für dieses Zeichen.
Zeichen aus diesen Tabellen, die Sie nicht auf der Tastatur finden, können Sie entweder über Softwaretools (unter MS Windows z.B. über die »Zeichentabelle«) einfügen oder indem Sie die (ALT)-Taste gedrückt halten und dabei auf dem separaten Nummernblock der Tastatur eine 0 und anschließend den dezimalen Zeichenwert des gewünschten Zeichens eingeben, also z.B. (ALT) und (0) (2) (3) (4) zum Erzeugen des Zeichens ê.
Weil der Zeichensatz ISO-8859-1 das mittlerweile so häufig benötigte Euro-Symbol vermissen lässt und in der Praxis auch einige andere Schwächen aufweist, wurde der neuere Standard ISO-8859-15 geschaffen. Die nachfolgende Tabelle listet die Unterschiede zwischen ISO-8859-1 und ISO-8859-15 auf.

Bilder

Tabelle 4.4: Unterschiede zwischen ISO-8859-1 und ISO-8859-15

Beachten Sie aber Folgendes: Wenn Sie den Zeichensatz ISO-8859-15 in einem <meta>-Tag explizit angeben, wird beim Editieren auch tatsächlich dieser Zeichensatz unterstützt. Tippen Sie beispielsweise unter MS Windows zum Test bei gedrückter (ALT)-Taste auf dem separaten Nummernblock der Tastatur die Ziffern (0) (1) (6) (4). Wenn Sie dadurch das Zeichen ¤ erzeugen, wird bei Ihnen ISO-8859-1 unterstützt. Wenn das Euro-Zeichen € erzeugt wird, wird dagegen ISO-8859-15 unterstützt.
Falls Sie ISO-8859-1 verwenden und das wichtige Euro-Zeichen in HTML benötigen, geben Sie im Editor einfach die dafür vorgesehene HTML-Entity ein:

Webseiten in bestimmten Sprachen mit anderem Alphabet
Wenn Sie komplette Webseiten etwa in kyrillischer oder arabischer Schrift erstellen möchten, empfiehlt sich dringend eine entsprechende Editierumgebung. Richten Sie also Ihr Betriebssystem und Ihre Software so ein, dass die entsprechenden Zeichensätze unterstützt werden, und verwenden Sie eine geeignete Tastatur. Ansonsten ist die Vorgehensweise ganz ähnlich zu der beim Arbeiten mit den Zeichensätzen ISO-8859-1 oder ISO-8859-15. Speichern Sie statische HTML-Dateien im entsprechenden Zeichensatz ab und geben Sie den korrekten Zeichensatz im <meta>-Tag ein.
Die nachfolgende Tabelle listet geeignete Angaben für einige wichtige Sprachen bzw. Schriftkulturen auf.

Bilder

Tabelle 4.5: Meta-Angaben für diverse Sprachen bzw. Schriftkulturen

Die moderne Universallösung: Webseiten mit UTF-8-Kodierung
In den beiden vorhergehenden Unterabschnitten wurden zeichensatzorientierte Lösungen
vorgestellt. Mittlerweile entscheiden sich aber viele Entwickler von Webseiten für eine zeichensatzunabhängige Lösung. Dabei ist es erlaubt, im Editor beliebige Zeichen aus dem gesamten Zeichenvorrat des Unicode-Systems direkt einzugeben. Voraussetzung ist allerdings, dass der Editor und gegebenenfalls auch die verwendete Betriebssystemumgebung das Unicode-System intern und auf Schriftebene unterstützen.
Wenn Sie diese moderne Universallösung bei Ihren Webseiten verwenden möchten, gehen Sie wie folgt vor:

1. Verwenden Sie einen Text- oder HTML-Editor, der Ihnen beim Speichern explizit die
Option anbietet, Dateien im Kodierungsformat UTF-8 zu speichern.

2. Notieren Sie in allen HTML-Dokumenten folgende Angabe:
<meta http-equiv="content-type" content="text/html;
charset=UTF-8">

Nun können Sie mitten im Text Zeichen aller Art eintippen und beliebig mischen. Um jedoch etwa arabische oder japanische Schriftzeichen verwenden zu können, muss auf dem System eine Schriftart vorhanden und im Texteditor eingestellt sein, die das Unicode-System zu größeren Teilen oder vollständig abdeckt und solche Schriftzeichen abbilden kann. UTF steht übrigens für USC Transformation Formats (»USC-Umwandlungsformate«) und USC wiederum für Universal Character Set (»universeller Zeichensatz«). Das Prinzip besteht darin, dass alle Zeichen, die zum klassischen ASCII-Zeichensatz gehören, mit einem Byte Breite abgespeichert werden, während alle übrigen Zeichen intern mit zwei oder mehr Bytes abgespeichert werden. Ein ausgeklügelter Algorithmus sorgt dafür, dass die Bytefolgen beim Lesen solcher Dateien wieder korrekt in Zeichenwerte umgesetzt werden. Gerade diese Tatsache ist jedoch auch dafür verantwortlich, dass falsch interpretierte UTF-8-Dateien zu sehr hässlichen Darstellungen führen können. Das ist auch dann der Fall, wenn Sie im <meta>-Tag UTF-8 angeben, die Datei aber gar nicht als UTF-8 abspeichern.

Die Lösung für Sonderzeichen: HTML-Entities und numerische Notation
Wenn Sie mit einer zeichensatzorientierten Lösung arbeiten, brauchen Sie in Ihren Texten dennoch nicht auf beliebige Zeichen aus dem Unicode-Zeichenvorrat zu verzichten. Das Gleiche gilt auch für den Fall, dass Sie die UTF-8-Kodierung verwenden, jedoch ein benötigtes Zeichen nicht direkt eintippen können. HTML erlaubt für diese Fälle verschiedene Notationsmöglichkeiten, um beliebige Zeichen direkt im Quelltext einzugeben.
Für häufiger benötigte Schrift- und Sonderzeichen stellt HTML ein ganzes Arsenal an so genannten Entities dar. Dies sind sinnige Namen oder Abkürzungen für Zeichen, denen ein kaufmännisches Und (&) vorangestellt wird und die von einem Semikolon (;) beendet werden. Ein paar Entities haben Sie bereits kennen gelernt: nämlich diejenigen, mit deren Hilfe HTML-eigene Zeichen maskiert werden müssen, also z.B. die Notation &lt;, um das Zeichen < in HTML darzustellen. Ebenfalls hingewiesen wurde bereits auf die Entity &euro; zur Darstellung des €-Symbols.
HTML stellt bereits seit Version 3.2 für alle höherwertigen Zeichen des Zeichensatzes ISO-8859-1 Entities zur Verfügung. Die nachfolgende Tabelle listet die HTML-Entities für höherwertige Zeichen im Deutschen auf:

Bilder

Tabelle 4.6: HTML-Entities für Sonderzeichen im Deutschen

HTML 4.0 erweitert die Entities um zahlreiche weitere Symbole, etwa für das komplette große und kleine griechische Alphabet mit Entities wie &Alpha;, &alpha;, &Beta; und &beta; oder für mathematische Symbole wie &sum; für ? usw. In der Referenz im hinteren Buchteil (Abschnitt 17.1.3) finden Sie eine systematische Auflistung aller verfügbaren HTML-Entities.
Beliebige Zeichen, für die es keine Entity gibt, können Sie in HTML numerisch umschreiben. Dabei existieren zwei Schemata: &#[Dezimalwert]; oder &#x[Hexadezimalwert];. In beiden Fällen beginnt die Zeichenfolge mit &#. Wenn Sie den Zeichenwert dezimal angeben, notieren Sie direkt dahinter den Wert. Bei einer hexadezimalen Angabe des Zeichenwerts müssen Sie noch ein x oder X einfügen. Falls Sie ein kleines x einfügen, sollten Sie die Hexadezimalziffern a bis f klein schreiben und bei einem großen X groß. So können Sie beispielsweise durch Eingabe von &#9762; (dezimale Angabe) oder &#x2622; (hexadezimale Angabe) das übliche Symbol für Radioaktivität erzeugen.
Die numerischen Zeichenwerte müssen Sie in diesem Fall natürlich kennen. Da das Unicode- System mittlerweile zigtausend Zeichen mit zugeordneten Zeichenwerten umfasst, kann auch der Referenzteil dieses Buches in diesem Fall nicht weiterhelfen. Um nach Zeichen und deren Zeichenwerten zu suchen, müssen Sie direkt die Zeichentabellen von Unicode aufrufen. Auf http://www.unicode.org/ werden solche Zeichentabellen in PDF-Form zur Verfügung gestellt.

Links zu weiteren Informationen:

Wikipedia-Artikel zu ISO 8859:
http://de.wikipedia.org/wiki/ISO_8859
Wikipedia-Artikel zu Unicode:
http://de.wikipedia.org/wiki/Unicode
RFC 3629 (UTF-8):
http://www.faqs.org/rfcs/rfc3629.html
ECMA-Standards (in der Tabelle nach ISO 8859 suchen):
http://www.ecma-international.org/publications/standards/Standard.htm

3.4 Dokumenttyp-Deklarationen

Im Quelltextbeispiel in Abschnitt 4.2 haben wir gleich am Anfang der Datei, noch vor und außerhalb des alles umschließenden html-Elements, eine recht kompliziert wirkende Angabe notiert:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Solche Angaben finden sich in allen SGML- und XML-basierten Markup-Sprachen. Es handelt sich um die so genannte Dokumenttyp-Deklaration, die der verarbeitenden Software mitteilen, um welche Markup-Sprache in welcher Version es sich nachfolgend handelt. Die gesamte Angabe wird in spitze Klammern eingeschlossen. Direkt hinter der öffnenden spitzen Klammer folgt ein Ausrufezeichen. Dies markiert einen Verarbeitungshinweis. Das Wort DOCTYPE bezeichnet die Art des Verarbeitungshinweises: In diesem Fall betrifft der Hinweis also den Dokumenttyp. Anschließend folgt die Angabe HTML, die der verarbeitenden Software mitteilt, dass es sich um die Markup-Sprache HTML handelt. Der Zusatz PUBLIC bedeutet, dass die verarbeitende Software das Markup gegen eine öffentlich verfügbare DTD (»Document Type Definition«, die SGML- oder XML-basierte Definition des Regelwerks von HTML) prüfen kann. Die URL der DTD wird am Ende der Dokumenttyp-Deklaration explizit genannt.

Die Zeichenfolge //W3C//DTD HTML 4.01//EN enthält weitere Angaben zur Markup-Sprache. W3C (also das W3-Konsortium) ist Herausgeber und verantwortlich für den Sprachstandard. Die Document Type Definition (DTD) betrifft die HTML-Version 4.01, mit EN wird darauf hingewiesen, dass die natürliche Sprache für Elementnamen und andere Bezeichnungen der Markup-Sprache auf der englischen Sprache basieren. HTML-Varianten
Von besonderer Bedeutung bei der Dokumenttyp-Deklaration zu HTML sind der Mittelteil und die URL am Ende. Diese sind veränderlich, und zwar je nachdem, für welche Variante von HTML 4.01 Sie sich entscheiden. HTML 4.01 hat nämlich leider noch mit Sünden der Vergangenheit zu kämpfen. Durch führende Browser-Anbieter wie Netscape und Microsoft, aber auch durch das W3- onsortium selbst ist HTML in den Anfangsjahren des Webbooms in eine andere Richtung als heute gewünscht entwickelt worden. Da die Browser noch kein CSS kannten oder es nur völlig unzureichend unterstützten, entstand eine Fülle von HTML-Elementen und -Attributen, deren Zweck die optische Gestaltung von Inhalten war.

Viele dieser heute unerwünschten Elemente und Attribute wurden noch in HTML 4.01 übernommen, damit durch den neuen Sprachstandard nicht gleich Millionen von Webseiten völlig fehlerhaft würden. Um jedoch deutlich zu machen, dass HTML mittlerweile in eine andere Richtung zielt, hat sich das beim W3C für HTML verantwortliche Entwicklerteam einen Kompromiss ausgedacht. Dieser besteht darin, dass HTML 4.01 in drei verschiedenen Varianten angeboten wird, wobei eine Variante die eigentlich erwünschte ist, während die beiden anderen Varianten eher als ein vorübergehendes Tolerieren früher üblicher HTML-Praxis zu betrachten sind. Je mehr Jahre allerdings ins Land gehen, desto mehr schwindet diese Toleranz, und auch wenn nach wie vor alle HTML-Varianten offizieller Standard sind, so ist mittlerweile doch dringend anzuraten, für neu zu erstellende Webseiten nur noch die eigentlich gewünschte Variante zu verwenden. Die eigentlich gewünschte Variante – das ist die Strict-Variante von HTML. Die dazu notwendige Dokumenttyp-Deklaration haben wir bereits in unserem ersten Quelltextbeispiel verwendet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Falls Sie aus besonderen Gründen auf die früher verbreiteten HTML-Elemente und -Attribute zurückgreifen wollen oder müssen, müssen Sie stattdessen die Transitional-Variante von HTML verwenden und folgende Deklaration notieren:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Die dritte Variante von HTML 4.01 betrifft ausschließlich Dateien, in denen Framesets oder eingebettete Frames definiert werden. Diesen Spezialfall behandeln wir in Abschnitt 6.1.
Neben den Varianten für HTML 4.01 gibt es auch noch folgende möglichen Dokumenttyp-
Deklarationen für ältere HTML-Versionen:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 2.0//EN"> für HTML 2.0 (älteste heute noch
deklarierbare Version von HTML)
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> für HTML 3.2 (Zwischenversion
aus den 90er Jahren)

Diese Deklarationen sollten Sie jedoch nur in wirklich begründeten Ausnahmefällen verwenden.

Dokumenttypen für XHTML
Wenn Sie Ihre Dokumente in XHTML auszeichnen, müssen Sie andere Dokumenttyp-Deklarationen verwenden. In XHTML entspricht die Spezifikationsversion 1.0 dem
HTML-Standard 4.01. Dabei wird auch wieder zwischen der strict-Variante und der transitional-Variante unterschieden.

Die Dokumenttyp-Deklaration für die zu bevorzugende Variante strict lautet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Die Dokumenttyp-Deklaration für die transitional-Variante lautet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Neben XHTML 1.0 ist mittlerweile auch eine Version 1.1 offizieller Standard. In XHTML 1.1 gibt es keine Varianten mehr – alle Dokumente müssen der strict-Variante entsprechen. Die Dokumenttyp-Deklaration für XHTML 1.1 lautet:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Es ist jedoch nicht unbedingt sinnvoll, aus reinem Modernitätseifer die XHTML-Version 1.1 der Version 1.0 vorzuziehen. Denn erstens ist die Version 1.0 von den HTML-Parsern der meisten Browser problemloser zu verarbeiten und zweitens bringt XHTML 1.1 keine für die meisten HTML-Autoren relevanten Neuerungen, abgesehen vielleicht von der Möglichkeit, so genannten Ruby-Text auszeichnen zu können (Ruby-Text ist eine Textform, die vor allem in fernöstlichen Sprachen verwendet wird, um Silben- oder Wortzeichen mit zusätzlichen Bedeutungshinweisen zu versehen). Die Zwischenversion von XHTML wurde hauptsächlich geschaffen, um ein XML- spezifisches Konzept für XHTML zu etablieren, nämlich die Möglichkeit der Modularisierung der Sprache. Dies ist jedoch recht komplex und wird in der heutigen Praxis so gut wie kaum genutzt, weshalb wir nicht näher darauf eingehen. Gleiches gilt für die Weiterentwicklung von XHTML 1.1,
nämlich XHTML 2.0, das zur Drucklegung dieses Buches noch in der Entwicklung ist.

3.5 Editierregeln

HTML-Text wird vom Browser ähnlich wie in einem Textverarbeitungsprogramm automatisch umgebrochen. Darum brauchen Sie sich also nicht zu kümmern. HTML hat eine besondere Art, mit Leerraum umzugehen: Mehrere so genannte Whitespace-Zeichen (das können Leerzeichen, Tabulatoren oder Zeilenumbrüche sein) werden per Default zu einem einzigen Leerzeichen zusammengefasst. Einzelne Tabulatoroder Zeilenumbruchzeichen werden bei der Darstellung im Browser zu einem Leerzeichen. Nur wenn Sie Text mit dem pre-Element für »präformatierten Text« auszeichnen oder in CSS für ein Element die Eigenschaft »präformatierte Darstellung« vergeben, wird der Text so wiedergegeben wie im Editor eingegeben. Dieses Grundverhalten von HTML erleichtert das Bearbeiten auf Quelltextebene, da Sie den Quelltext sauber formatieren können, ohne dabei die HTML-Darstellung im Browser zu beeinflussen.
Das genannte Verhalten ist allerdings auch dafür verantwortlich, dass Sie, um mitten in einem darzustellenden Text mehrere Leerzeichen hintereinander zu erzwingen, das »erzwungene Leerzeichen« mit der numerischen Dezimalnotation &#160; mehrfach hintereinander eingeben müssen.
Tabulatoren gibt es in HTML überhaupt nicht. Da diese auch nicht wirklich für die saubere Formatierung taugen, sollten Sie auf Alternativen ausweichen, z.B. das Arbeiten mit randlosen (»blinden«) Tabellen.
Um innerhalb eines Block-Elements, also etwa eines Textabsatzes (zwischen <p> und </p>), einen Zeilenumbruch an einer bestimmten Stelle zu erzwingen, müssen Sie das dafür vorgesehene HTML-Tag <br> verwenden.

Kommentare
HTML erlaubt es, beliebige Passagen im Quelltext auszukommentieren. Das bedeutet, dass solche Passagen vom HTML-Parser ignoriert und etwa im Webbrowser nicht angezeigt werden. Die Kommentarfunktion von HTML ist nützlich, um aktuell nicht anzuzeigenden, aber mit zu speichernden Text auszuzeichnen. Sie lassen sich aber auch dazu einsetzen, um alternative Markup-Konstrukte zu speichern, jedoch nur eines davon zu verwenden, oder um bestimmte Markup-Passagen zu erläutern.

Dazu ein Quelltextbeispiel:
<div id="Inhalt">
<h1>Mein Leben mit <!-- Susi --><!-- Rosi -->Sissi</h1>
<!-- <p>Da gibt es gar nichts zu berichten</p> -->
<p>Es war langweilig</p>
</div><!-- Ende von div mit id="Inhalt" -->

Alles, was zwischen einem einleitenden <!-- und einem schließenden --> steht, gilt in HTML als Inhalt eines Kommentars.
Sie können beliebig viele solcher Kommentare notieren, aber Sie können keine Kommentare ineinander verschachteln. Achten Sie auch darauf, dass durch das Setzen von Kommentaren kein syntaktisch fehlerhaftes (invalides) Markup entsteht. Verwenden Sie innerhalb eines Kommentars niemals zwei Bindestriche (--) hintereinander, da dies den HTML-Parser dazu veranlassen kann, das Ende des Kommentars zu erwarten. In der Abbildung ist zu sehen, was von dem Quelltext-Beispiel am Ende im Browser zu sehen ist.

3.6 XHTML-spezifische Syntaxregeln

Auf die unterschiedlichen Mime-Typen bei HTML und XHTML sind wir bereits eingegangen. Auch die unterschiedlichen Dokumenttyp-Deklarationen wurden bereits behandelt. Daneben gibt es jedoch auch konkrete Unterschiede bei der Notation. Die folgende Aufzählung fasst die wichtigsten Unterschiede kurz zusammen:
- Für XHTML-Dateien empfiehlt sich unter Umständen eine XML-Deklaration.
- Namensraumangabe im html-Element.

Bilder

Abbildung 4.4: Wie der Webbrowser HTML-Kommentare verschweigt

- Zwingende Kleinschreibung von Element- und Attributnamen.
- Abweichende Notation von Elementen ohne Inhalt.
- Keine Elemente mit optionalem Abschluss-Tag.
- Keine Attribute ohne Wertzuweisung.

Einige weitere Unterschiede betreffen konkrete Elemente oder Attribute. Wir werden im Buch an entsprechender Stelle darauf hinweisen.

XML-Deklaration
XML-Daten beginnen normalerweise in der ersten Zeile mit einer XML-typischen Deklaration. Diese ist in spitze Klammern eingeschlossen. Unmittelbar nach der öffnenden Klammer und vor der schließenden Klammer wird ein Fragezeichen notiert.

Ein Beispiel:
<?xml version="1.0" encoding="UTF-8"?>

Bei XHTML können Sie diese Zeile weglassen, wenn Sie als Zeichenkodierung UTF-8 oder UTF- 6 wählen. Das bedeutet aber auch, dass Sie, wie weiter oben bereits beschrieben, Ihre Dateien mit dieser Zeichenkodierung abspeichern müssen. Wenn Sie eine andere Kodierung verwenden möchten, etwa den Zeichensatz ISO-8859-1, dann müssen Sie die XML-Deklaration unbedingt notieren, und zwar mit der entsprechenden Angabe, also z.B.:

<?xml version="1.0" encoding="ISO-8859-1"?>

Namensraumangabe im html-Element
Das alles einschließende Wurzelelement in HTML hat keine zwingend erforderlichen Attribute und wird meist einfach als <html>[Inhalt]</html> notiert. In XHTML muss das Wurzelelement eines Dokumenttyps jedoch eine Namensraumangabe besitzen. Dazu steht das xmlns-Attribut zur Verfügung, das es in HTML gar nicht gibt. Notieren Sie bei XHTML folgende Angabe:
<html xmlns="http://www.w3.org/1999/xhtml">

Zwingende Kleinschreibung
Viele HTML-Editoren fügen HTML-Tags in Großschreibweise ein. Für XHTML ist dies auf jeden Fall verkehrt. Alle Element- und Attributnamen müssen durchgängig klein geschrieben werden.

Falsch ist also:
<H1 STYLE="font-size:150%">Das Neue ist <Em>notwendig</Em></H1>

Richtig ist dagegen:
<h1 style="font-size:150%">Das Neue ist <em>notwendig</em></h1>

Elemente ohne Inhalt (Singleton-Elemente)
So genannte Singleton-Elemente oder Standalone-Tags, also Elemente, die nur aus einem Anfangs- Tag bestehen, sind in der XML-Syntax im Gegensatz zur SGML-Syntax nicht möglich. Für entsprechende Elemente gibt es zwei mögliche Schreibweisen.

Verkürzte Schreibweise:
<meta name="author" content="halogen@gmx.de" />

Ausführliche Schreibweise:
<meta name="author" content="halogen@gmx.de"></meta>

Bei der verkürzten Schreibweise wird nur ein Tag notiert. Dieses wird jedoch durch einen Schrägstrich unmittelbar vor der schließenden spitzen Klammer als leeres Element gekennzeichnet. Lassen Sie vor dem Schrägstrich stets ein Leerzeichen, um den Parser nicht durcheinander zu bringen. Bei der ausführlichen Schreibweise werden »leere« Elemente einfach wie Elemente mit Inhalt notiert, nämlich durch Anfangs- und Abschluss-Tag. Dazwischen darf jedoch nichts stehen, nicht einmal ein Leerzeichen.

Aus praktischer Sicht ist die verkürzte Schreibweise vorzuziehen. Sie wird auch häufiger eingesetzt, da sie weniger fehleranfällig ist.

Keine Elemente ohne optionale Abschluss-Tags
In HTML gibt es einige Elemente, bei denen laut Spezifikation nur ein Anfangs-Tag zwingend vorgeschrieben ist, jedoch kein Abschluss-Tag. Das betrifft vor allem in Serie vorkommende Tags wie <td> (Tabellenzelle), <li> (Listenpunkt) oder <option> (Eintrag in einer Auswahlliste). Obwohl die Notation ohne Abschluss-Tag ohnehin eine zweifelhafte Freiheit ist, von der man besser keinen Gebrauch machen sollte, besteht bei XHTML die zwingende Pflicht, solche Elemente durch Tags wie </td>, </li> oder </option> zu schließen.

Keine Attribute ohne Wertzuweisung
Eine andere Spezialität von SGML-basierten Sprachen sind Attribute, deren Wert als »Boolean« zu verstehen ist in dem Sinne, dass bei Nennung des Attributs der Wert als 1 oder wahr interpretiert wird und ansonsten auf 0 oder falsch stehen bleibt. In HTML kommen einige wenige Attribute dieser Art vor, z.B. <td nowrap> (Tabellenzelle, deren Inhalt nicht automatisch umgebrochen werden darf). In XHTML müssen solche Attribute eine Wertzuweisung erhalten. Per Konvention hat man festgelegt, dass als Wert einfach der Attributname zugewiesen wird. Die korrekte XHTML- Version von <td nowrap> lautet daher <td nowrap="nowrap">.

3.7 Beispiel einer vollständigen XHTML-Datei

Um die Unterschiede zwischen HTML und XHTML am konkreten Beispiel zu sehen, werden wir nun noch einmal das Quelltextbeispiel aus Abschnitt 4.2.1 listen, diesmal jedoch in XHTML- Syntax. Vergleichen Sie die Quelltexte und testen Sie sich selbst, ob Sie die Unterschiede gleich erkennen.

Bilder

Listing 4.2: Eine vollständige XHTML-Datei

Im Beispiel sind die Unterschiede ausschließlich im oberen Teil zu finden: XML-Deklaration wegen Zeichensatz ISO-8859-1, XHTML-Dokumenttyp-Deklaration, html-Element mit Namensraumangabe für XHTML, alleinstehendes <meta>-Tag für HTML-interne Zeichensatzangabe mit XHTML-spezifischer Abschlussmarkierung. Im Beispiel ist das jedoch schon alles. Wie Sie daraus ersehen können, sind die Unterschiede zu XHTML bei sauberer HTML- Codierung eher geringfügig und eine spätere automatisierte Umstellung auf XHTML sollte keine größeren Probleme bereiten.

Links zu weiteren Informationen zu XHTML:

Wikipedia-Artikel zu ISO 8859:
http://de.wikipedia.org/wiki/ISO_8859
Artikel »Keine Angst vor XHTML«:
http://www.webwriting-magazin.de/sogehts/xhtml.shtml
Modularization of XHTML (W3C-Recommendation): Wikipedia-Artikel zu ISO 8859:
http://www.w3.org/TR/xhtml-modularization/
Modularisierung von XHTML (deutsche Übersetzung):
http://www.edition-w3c.de/TR/xhtml-modularization


Das Tutorial ist ein Auszug aus dem Buch von Stefan Münz:

Professionelle Websites - Programmierung, Design und Administration von Webseiten
Addison-Wesley, 2. Auflage, 1136 Seiten, gebunden, komplett in Farbe, mit DVD

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von
Pearson Education.

Mehr Informationen zu diesem wunderbaren Fachbuch für Webmaster und Webentwickler
gibt es hier: Professionelle Websites

Alle Teile des Buches: 

1 Intro
2 HTML und CSS
3 Dynamische Seiten mit JavaScript/DOM
4 Die Server-Seite
5 PHP und MySQL
6 XML
7 Betrieb von Websites
8 Referenz
Bilder

 

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von MaoMao
  • 09.01.2013 - 16:58

Gute Tutorial leicht erklärt.

Portrait von DrNormal
  • 24.11.2011 - 18:45

Sehr umfangreich, kommt drauf an, ob man das ganze Detailwissen haben möchte oder nicht.

Portrait von Elchblender
  • 15.08.2011 - 00:00

Interessant, wie hier die Meinungen auseinander gehen.

Ich findes es OK!!!

Portrait von DaNino
  • 14.07.2011 - 19:57

für Einsteiger JA, für Anfänger NEIN

Portrait von Ai_relav
  • 05.05.2011 - 01:10

Sehr viele Informationen, vielleicht etwas zuviel aber es ist sehr hilfreich :)

Portrait von artesmaracay
  • 24.11.2010 - 20:59

Sehr viel Information. Ist nicht alles gleich zu verdauen, aber man muss mit etwas Geduld mehrfach lesen, wieder etwas sacken lassen und frisch nochmal lesen. Nicht einfach nur WYSIWYG. Vielen Dank, habe einiges lernen koennen hier.

Portrait von Beedee1308
  • 28.05.2010 - 11:30

Alles etwas unstrukturiert und unübersichtlich :-(

Portrait von TATLIMELEK
  • 19.05.2010 - 14:06

Schade das man dirket so viele Punkte verschänkt...

Portrait von jaggo
  • 10.04.2010 - 22:30

sehr schlechtes tut. ist mehr eine auflistung von befehlen aber kein anschauliches und verständliches tutorial. rausgeschmissene punkte!

lg julchen

Portrait von Andie
  • 27.03.2010 - 02:42

Ich find das es ziemlich viel Text ist!!! Zu viel aufeinmal. Ist man unten angekommen hat man was oben steht wieder vergessen..

Portrait von miactive
  • 02.03.2010 - 13:15

Danke, gut beschrieben!

Portrait von hasturfog
  • 24.11.2009 - 17:12

hat mich auf jeden fall weiter gebraucht

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.10.2009 - 19:50

Tiefgehende Infos, ohne Vorwissen etwas schwierig aber dafür ohne Lücken

Portrait von williamo
  • 21.08.2009 - 14:31

Um nochmal nachzuschlagen OK

Portrait von roger1
  • 20.06.2009 - 14:13

Sehr schön erklärt.
Und wieder etwas dazu gelernt.

Portrait von greske
  • 27.05.2009 - 13:49

Die Grundlegenden Sachen für XHTML sind sehr schön erklärt
und ich denke auch für Eisteiger geeignet die sich schon ein wenig mit dem Thema beschäftig haben

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 18.12.2008 - 20:57

Soll ich ehrlich sein?
Für einen Laien der absolute Horror....
Das ist kein wirkliches Tutorial Buch, sondern eher ein Nachschlagewerk für erfahrene Coder.
Bzw. nicht einmal das, dafür beinhaltet es zu viel (unnötigen) Text

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 20.08.2008 - 22:06

wozu gibt es selfhtml.org?

Portrait von philigran
  • 22.07.2008 - 10:48

Sehr hilfreich für Anfänger! Danke

Portrait von Sunny160100
  • 07.06.2008 - 20:38

Weiterso. Danke. Echt genial

x
×
×