vorheriges KapitelInhaltsverzeichnisIndexInfoseitenächstes Kapitel


Was HTML ist ... und was nicht

So sehen HTML-Dateien aus

Programme, die Ihnen beim Schreiben von HTML helfen

Strukturierung Ihres HTML-Codes

Der Titel

Überschriften

Absätze

Listen, Listen und nochmals Listen

Kommentare

Zusammenfassung

Fragen und Antworten



Tag 2


Kapitel 3 - Die Grundlagen

Nach dem gestrigen Tag mit einer Menge Text zum Lesen und Konzepten zum Verdauen fragen Sie sich wahrscheinlich, wann Sie denn nun endlich eine richtige Webseite schreiben werden. Schließlich haben Sie ja deshalb dieses Buch gekauft. Willkommen am zweiten Tag! Heute erfahren Sie, wie man Webseiten gestaltet, und lernen HTML kennen, die Sprache, in der Web-Dokumente geschrieben werden, und erfahren im einzelnen das Folgende:



Was HTML ist ... und was nicht

Bevor Sie damit loslegen, tatsächlich etwas in HTML zu schreiben, sollten Sie wissen, was HTML ist, was HTML kann, und besonders, was HTML nicht kann. HTML steht für Hypertext Markup Language (Hypertext-Auszeichnungssprache). HTML basiert auf SGML (die Standard Generalized Markup Language), bei der es sich um ein viel umfassenderes System zur Bearbeitung von Dokumenten handelt. Um HTML-Seiten zu schreiben, brauchen Sie nicht viel über SGML zu wissen, es ist jedoch hilfreich, wenn Sie verstehen, daß eine der Haupteigenschaften von SGML darin besteht, daß sie die generelle Struktur des Inhalts innerhalb eines Dokuments beschreibt, nicht jedoch die endgültige Darstellungsweise des Inhalts auf der Seite oder auf dem Bildschirm. Dies könnte neu für Sie sein, wenn Sie daran gewöhnt sind, mit grafischen Editoren (Editoren, die nach dem WYSIWYG-Prinzip arbeiten = What You See Is What You Get, d.h., Sie bekommen das, was Sie sehen) zu arbeiten.



HTML beschreibt die Struktur eines Dokuments

HTML ist, kraft ihres SGML-Erbes, eine Sprache, welche die Struktur eines Dokuments beschreibt und nicht seine tatsächliche Gestaltung. Die Theorie dahinter ist, daß die meisten Dokumente gemeinsame Elemente besitzen - zum Beispiel Titel, Absätze oder Listen -, und wenn Sie einige solcher Elemente, die ein Dokument beinhaltet, bevor Sie mit dem Schreiben beginnen, definieren, können Sie diese Teile des Dokuments mit ihren jeweiligen Namen bezeichnen (vgl. Abbildung 3.1).


siehe Abbildung

Abbildung 3.1:
Elemente eines Dokuments

Wenn Sie schon einmal mit Textverarbeitungsprogrammen gearbeitet haben, die sogenannte »Dokumentvorlagen« (style sheets) (wie Microsoft Word) oder Absatz-Kataloge (wie FrameMaker) verwenden, dann haben Sie bereits etwas Ähnliches gemacht; jeder Abschnitt des Textes richtet sich nach einer der »Vorlagen« (styles), die bereits definiert wurden, bevor Sie mit der Arbeit beginnen.


HTML beschreibt eine Reihe von gemeinsamen Webseiten-Formaten: Überschriften, Absätze, Listen und Tabellen. Sie beschreibt auch Schriftarten wie Fettdruck und Code-Beispiele. Jedes Element hat einen Namen und ist in einem HTML-Tag (»tag«, Kennung) enthalten. Wenn Sie eine Webseite in HTML erstellen, dann bezeichnen Sie die unterschiedlichen Elemente Ihrer Seite mit diesen Kennungen, die z.B. so aussehen können: »dies ist eine Überschrift« oder »dies ist ein Listenpunkt.« Es ist so, als arbeiteten Sie für eine Zeitung oder ein Magazin, wo Sie zwar schreiben, aber jemand anderer sich um das Layout kümmert; Sie erklären dann vielleicht der Layouter, daß diese Zeile den Titel darstellt, jene eine Bildüberschrift und eine weitere eine Überschrift. Genauso ist es mit HTML.



HTML beschreibt das Seiten-Layout nicht

Wenn Sie mit einem Textverarbeitungs- oder Seiten-Layoutprogramm arbeiten, beinhalten die Formate nicht nur die Seiteninformationen, vielmehr beschreiben sie auch die Schriftarten, die Größe, die Einrückung, Unterstreichungen usw. Wenn Sie einen Text also als Überschrift definieren möchten, können Sie das Überschriftsformat darauf anwenden, und das Programm wird den Absatz automatisch für Sie im korrekten Stil formatieren.


HTML geht nicht so weit. Im großen und ganzen sagt HTML nichts darüber aus, wie eine Seite aussieht, wenn sie betrachtet wird. Alles, was die HTML-Kennungen angeben, ist, daß es sich beim jeweiligen Element um eine Überschrift oder eine Liste handelt - sie sagen nichts darüber aus, wie diese Überschrift oder Liste denn nun formatiert werden soll. Also ist es genau so wie im Beispiel des Magazinartikels und des Setzers, der Ihren Artikel formatiert; es ist der Job des Setzers, darüber zu entscheiden, wie groß die Überschrift sein und in welcher Schriftart sie gesetzt werden sollte - das einzige, worum Sie sich kümmern müssen, ist, zu markieren, welcher Absatz als Überschrift dienen soll.


Web-Browser dienen nicht nur der Abwicklung der Netzwerkfunktionen wie dem Laden von Dokumenten aus dem Netz, sie formatieren auch HTML-Dokumente. Wenn Sie ein HTML-Dokument mit einem Browser wie Netscape oder Lynx laden, liest und/oder parst (parse = Zergliederung in die Bestandteile und damit verbundene Kontrolle der Syntax) der Browser die HTML-Informationen und stellt den Text und die Abbildungen auf dem Bildschirm formatiert dar. Der Browser erstellt aus den Namen der Seitenelemente die tatsächlichen Formate auf dem Bildschirm; Überschriften könnten dann z.B. in einer größeren Schrift als der restliche Text auf der Seite erscheinen. Der Browser packt den Text auch dement-sprechend zusammen, so daß er in die gegenwärtige Fensterbreite hineinpaßt.


Verschiedene Browser, die auf verschiedenen Plattformen operieren, können für dieselben Seitenelemente unterschiedliche Formatkonvertierungen benutzen. Einige Browser verwenden vielleicht andere Schriftarten als die übrigen. So könnte ein Browser z.B. Kursivschrift auch kursiv darstellen, während ein anderer sie als invertierten oder unterstrichenen Text auf Systemen darstellt, die keine kursive Darstellung unterstützen. Oder er könnte eine Überschrift mit Großbuchstaben darstellen, anstatt eine größere Schrift einzusetzen. Für Sie als Webseiten-Designer bedeutet das, daß die Seiten, die Sie mit HTML gestalten, auf unterschiedlichen Systemen und mit unterschiedlichen Browsern ganz anders aussehen können. Die tatsächlichen Informationen und Verknüpfungen innerhalb der Seiten werden noch vorhanden sein, aber ihre Darstellung auf dem Bildschirm wird sich ändern. Sie können eine Webseite so entwerfen, daß sie auf Ihrem Computersystem perfekt aussieht, wenn man sie jedoch auf einem anderem System betrachtet, kann sie vollkommen anders aussehen (vielleicht sogar unlesbar sein).



Warum dies so ist

Wenn Sie gewohnt sind, auf Papier zu schreiben und zu entwerfen, dann wird Ihnen dieses Konzept fast pervers vorkommen. Keine Kontrolle über das Seiten-Layout? Das ganze Design kann sich ändern, je nach dem, wo die Seite betrachtet wird? Das ist ja schrecklich! Warum in aller Welt sollte es wohl so funktionieren?


Erinnern Sie sich noch daran, daß ich im ersten Kapitel erwähnte, daß eine der erfreulichen Eigenschaften des Web die ist, daß es plattformübergreifend ist und daß Webseiten auf jedem beliebigen Computersystem, mit jeder beliebigen Bildschirmgröße und beliebiger Grafikfähigkeit dargestellt werden können? Wenn Sie möchten, daß Ihre Seiten von jedermann in der Welt gelesen werden können, dann können Sie sich nicht darauf verlassen, daß Ihre Leser das gleiche Rechnersystem, einen genauso großen Bildschirm, die gleiche Anzahl von Farben oder dieselbe Schriftart wie Sie haben. Das Web zieht alle diese Unterschiede in Betracht und erlaubt es allen Browsern und Rechnersystemen, sich auf einer gemeinsamen Ebene zu treffen.


Das Web, als Design-Medium, ist keine neue Art von Papier. Das Web ist ein völlig neues Medium mit neuartigen Beschränkungen und Absichten, die sich vom Umgang mit Papier sehr unterscheiden. Die wichtigsten Regeln beim Design von Webseiten, die ich Ihnen in diesem Buch näherbringen möchte, sind folgende:


Gestalten Sie Ihre Dokumente NICHT danach, wie sie in Ihrem Browser oder Computersystem aussehen. Entwerfen Sie Ihre Seiten statt dessen so, daß sie in den meisten Browsern erkennbar sind. Konzentrieren Sie sich darauf, einen klaren, gut strukturierten Inhalt anzubieten, der leicht zu lesen und zu verstehen ist.

Durch das ganze Buch hindurch werde ich Ihnen immer wieder Beispiele von HTML-Code und wie dieser aussieht, wenn er dargestellt wird, zeigen. In vielen Beispielen werden ich Ihnen im Vergleich zeigen, wie der Code in zwei sehr unterschiedlichen Browsern aussieht: unter Netscape, dem wohl momentan beliebtesten Browser auf dem Markt, und unter Lynx, einem Browser, der auf rein textbasierten Terminals läuft und der nicht so beliebt, aber immer noch weithin gebräuchlich ist. Durch diese Beispiele werden Sie einen Eindruck davon bekommen, wie unterschiedlich ein und dieselbe Seite in verschiedenen Browsern aussehen kann.


Obwohl die Regel, das Design nicht über das Erscheinungsbild sondern über die Struktur zu entwickeln, der richtige Weg ist, um gutes HTML zu erstellen, werden Sie überrascht sein, wenn Sie durch das Web surfen. Beim Gros der Web Sites scheint es so, als seien sie mit Überlegungen zum Erscheinungsbild entworfen worden - meistens dem Erscheinungsbild in einem bestimmten Browser, wie z.B. dem Netscape Navigator oder Microsoft Internet Explorer. Lassen Sie sich von diesen Designs nicht beeinflussen. Wenn Sie sich an die Regeln, die ich vorschlage, halten, werden Ihre Webseiten und Web Sites am Ende die insgesamt erfolgreicheren sein - ganz einfach deswegen, weil mehr Leute diese auf einfache Weise lesen und verwenden können.


HTML ist eine Auszeichnungssprache

HTML ist eine Auszeichnungs- bzw. Kennungssprache markup language«). In einer Kennungssprache zu schreiben bedeutet, daß Sie mit dem Text Ihrer Seite anfangen und dann spezielle Kennungszeichen um Worte und Absätze setzen. Wenn Sie bereits mit anderen Kennungssprachen wie troff oder LaTeX oder sogar mit älteren DOS-basierten Textverarbeitungsprogrammen gearbeitet haben, bei denen Sie spezielle Codes für solche Befehle wie »Fettdruck« einsetzen mußten, dann wird Ihnen dies nicht fremd vorkommen.

Die Kennungen bestimmen die verschiedenen Teile der Seite und führen zu unterschiedlichen Effekten im Browser. Im nächsten Abschnitt werden Sie mehr über die Kennungen und ihre Verwendung erfahren.

HTML hat einige Kennungen (tags) definiert, die Sie benutzen können. Sie können allerdings keine eigenen Tags erfinden, um neue Darstellungsweisen oder Merkmale zu erschaffen. Und, um die Sache noch richtig schwierig zu machen, es unterstützen unterschiedliche Browser unterschiedliche Arten von Tags.

Gewissermaßen der »Basiswortschatz« von HTML-Tags wird als HTML 2.0 bezeichnet. HTML 2.0 ist der gegenwärtige Standard für HTML (es gibt eine schriftliche Festlegung davon, die vom W3-Konsortium entwickelt wurde und aufrechterhalten wird) und beschreibt die Tags, die die Browser verstehen müssen. In den nächsten paar Kapiteln werden Sie vor allem etwas über HTML-2.0-Tags lernen, die Sie überall anwenden können.

HTML 3 wird als die »aktuelle HTML-Generation« betrachtet und ist ein Sammelsurium von vielen neuen Merkmalen, die Ihnen viel mehr Flexibilität beim Seitenentwerfen geben als HTML 2.0. Wenn ein Browser angibt, daß er HTML 3 unterstützt, dann ist damit gewöhnlich gemeint, daß er einige der HTML-3-Merkmale, wie Tabellen und Hintergründe, unterstützt.

HTML 3.2 ist inzwischen annähernd vollständig. HTML 3.2 bringt einige neue Elemente, die aus dem Ausstattungskrieg zwischen den beiden führenden Browsern entstanden sind: Netscape Navigator und Microsoft Internet Explorer. HTML 3.2 unterstützt neben anderen Merkmalen Formulare, neue Ausrichtungsoptionen für Absätze und Schriftkontrolle.

Wenn Sie daran interessiert sind, wie die HTML-Entwicklung vor sich geht und was nun genau beim W3-Konsortium passiert, dann prüfen Sie doch die Seiten über HTML beim Site des Konsortiums unter : http://www.w3.org/pub/WWW/MarkUp/.

Zusätzlich zu den Markup-Befehlen, die durch HTML 2.0, 3.0 und 3.2 definiert werden, gibt es noch Browser-spezifische Erweiterungen zu HTML, die von den jeweiligen Browser-Herstellern entwickelt werden und die für die Aufnahme in HTML 4.0 vorgeschlagen sind. Netscape und Microsoft tragen hierzu ganz besonders bei und bieten viele neue Browser-spezifische Merkmale an.

Obwohl es noch nicht so lang her ist, daß HTML 3.2 fertiggestellt wurde, wird beim W3C am Nachfolger von HTML 3.2 entwickelt. Der ganze Aufwand mit dem Code-Namen Cougar verspricht viele neue Features, wie z.B. Frames und Scripts auf Client-Seite, die von Netscape bzw. Microsoft in ihre Browser integriert wurden. Vieles davon wird in diesem Buch wie Browser-spezifische Erweiterungen behandelt, da Cougar noch keine offizielle HTML-Spezifikation ist und damit für manche Punkte noch nicht sicher ist, ob sie ihren Weg in die endgültige Spezifikation finden werden.

Sind Sie schon verwirrt? Dann stehen Sie nicht alleine da. Sogar Web-Designer mit jahrelanger Erfahrung und Hunderten von publizierten Seiten kämpfen mit dem Problem, welche Tags sie auswählen sollen, um ein Optimum zwischen weitestgehender Unterstützung eines Designs (mit HTML 2.0) und der Möglichkeit, mehr Flexibilität im Layout, dafür aber weniger Übereinstimmung zwischen den Browsern zu haben, (mit HTML 3.2 oder den Browser-Erweiterungen) zu erzielen. Alles dies im Blick zu behalten, kann einen sehr verwirren. Im weiteren Verlauf des Buchs werde ich Sie, sobald ich eine neue HTML-Kennung (Tag) einführe, darauf hinweisen, zu welcher HTML-Version sie gehört, wie weit sie unterstützt wird und wie sie bei den verschiedenen Browsern am bestem eingesetzt werden kann. Später in diesem Buch werden Sie auch Hinweise dazu bekommen, wie Sie mit den unterschiedlichen HTML-Zeichen umzugehen haben, so daß Ihre Seiten in allen Arten von Browsern gut lesbar sind und gut aussehen.


Aber trotz all dieser unterschiedlichen Tags bleibt HTML eine besonders kleine und leicht zu erlernende Sprache - viel kleiner als andere Sprachen wie PostScript oder troff unter Unix. Diese Sprachen sind so umfangreich und komplex, daß es oft Ewigkeiten dauert, bis Sie ein einfaches Dokument schreiben können. Mit HTML können Sie sofort loslegen.

Und mit diesem Hinweis lassen Sie uns endlich anfangen.

So sehen HTML-Dateien aus

In HTML geschriebene Seiten bestehen aus schlichtem Text (ASCII), was bedeutet, daß sie keine plattform- oder programmspezifischen Informationen enthal-ten - deshalb können sie auch von jedem Texteditor gelesen werden, HTML-Dateien enthalten folgendes:

<TagName> betroffener Text </TagName>

Der Name des Tag ist in spitzen Klammern (<>) eingeschlossen.

HTML-Tags haben im allgemeinen eine Anfangs- und eine Ende-Kennung, womit sie den Text umgeben, den sie beeinflussen. Die Anfangs-Kennung »schaltet« ein Merkmal ein (etwa Überschriften, Fettdruck und so weiter), und die Ende-Kennung schaltet es wieder aus. Ende-Kennungen enthalten generell den Namen der Tags, eingeleitet durch einen Schrägstrich (/).

HTML-Tags (HTML-Kennungen) sind die Dinge innerhalb von spitzen Klammern (<>), die die Merkmale oder Elemente einer Seite anzeigen.

Eine Warnung vorweg: Achten Sie auf den Unterschied zwischen dem normalen Schrägstrich (Slash, »/«), wie er oben erwähnt wurde und dem inversen Schrägstrich (Backslash, »\«), wie er in Pfadangaben unter DOS und Windows verwendet wird (z.B. C:\Window etc.). Wenn Sie in einer HTML-Anweisung versehentlich den Backslash anstelle des Slash verwenden, erkennt der Browser die schließenden Tags nicht.

Doch nicht alle HTML-Tags haben einen Beginn und ein Ende. Manche Tags sind nur einseitig, und wieder andere Tags sind »container« (Behälter), die weitere Informationen und Text innerhalb der Klammern enthalten. Sie werden diese Tags im Verlauf des Buchs kennenlernen.

Alle HTML-Tags berücksichtigen keine Groß- und Kleinschreibung; das bedeutet, Sie können sie in Groß- oder Kleinbuchstaben schreiben oder in irgendeiner Mischung. Also ist <HTML> das gleiche wie <html> und das wiederum das gleiche wie <HtMl>. Ich ziehe es vor, meine Tags in Großbuchstaben zu schreiben (<HTML>), so daß ich sie im Text besser erkennen kann. Dies sehen Sie auch in den Beispielen in diesem Buch.

 

Übung 3.1: Schauen Sie sich HTML-Quellcodes an

Bevor Sie tatsächlich mit dem Schreiben Ihrer eigenen HTML-Seiten beginnen, ist es hilfreich, ein Gefühl dafür zu bekommen, wie ein HTML-Dokument aussieht. Glücklicherweise gibt es da draußen Quellcodes im Überfluß für Sie, die man sich ansehen kann - jede Seite, die in Ihrem Browser kommt, ist im HTML-Format. (Sie sehen fast niemals die Codes in Ihrem Browser; Sie bekommen lediglich das Endresultat zu sehen.)

Die meisten Web-Browser besitzen eine Möglichkeit, den HTML-Quellcode der Seite, die Sie gerade ansehen, anzuzeigen. Sie könnten einen Menüpunkt oder einen Button für »View Source« oder »View HTML« dafür haben. In Lynx schaltet der Backslash-Befehl (\) zwischen der Anzeige des Quellcodes und der formatierten Seite hin und her.

Manche Browser verfügen nicht über die Fähigkeit, den Quellcode einer Webseite direkt anzuzeigen, gestatten Ihnen jedoch, die aktuelle Seite als Datei auf Ihrer lokalen Platte zu speichern. In der Dialog-Box zum Speichern der Datei könnte es ein Format-Menü geben, zum Beispiel für Text, PostScript oder HTML. Sie können die aktuelle Seite als HTML speichern und dann diese Datei mit einem Texteditor oder einem Textverarbeitungsprogramm öffnen, um den HTML-Quellcode anzusehen.

Versuchen Sie zu einer typischen Homepage zu gehen und sich dann den Quellcode der Seite anzusehen. Als Beispiel zeigt Abbildung 3.2, wie die normale Alta-Vista-Homepage aussieht, die eine beliebte Such-Seite mit folgender URL ist: http://www.altavista.digital.com/:

siehe Abbildung

Abbildung 3.2:
Die Alta-Vista-Homepage

Der HTML-Code dieser Seite sieht etwa so aus, wie in Abbildung 3.3 dargestellt.

Versuchen Sie, sich den Quellcode einiger der von Ihnen bevorzugten Webseiten anzusehen. Sie dürften einige Ähnlichkeiten entdecken in der Art, wie Webseiten organisiert sind, und ein Gefühl für die Art von Tags bekommen, die HTML verwendet. Sie können eine Menge über HTML lernen, indem Sie den Text auf dem Bildschirm mit dem Quellcode dieses Textes vergleichen.

siehe Abbildung

Abbildung 3.3:
Ein wenig HTML-Code

Übung 3.2: Erzeugen eines HTML-Dokuments

Sie haben jetzt gesehen, wie HTML aussieht - nun sind Sie an der Reihe. Lassen Sie uns mit einem recht einfachen Beispiel beginnen, so daß Sie ein Grundgefühl für HTML bekommen.

Um ein HTML-Dokument zu schreiben, brauchen Sie keinen Web-Server, Web-Provider und noch nicht mal eine Verbindung zum Web selbst. Alles, was Sie wirklich brauchen, ist etwas, womit Sie Ihre HTML-Dateien schreiben können, und noch mindestens einen Browser, mit dem Sie sie anschauen können. Sie können ganze Reihen von Webseiten schreiben, verknüpfen und testen, ohne jemals mit einem Netzwerk in Berührung zu kommen. Tatsächlich ist es das, was wir im Hauptteil dieses Buchs unternehmen werden - ich werde später darüber reden, wie Sie alles im Web publizieren, so daß andere es auch sehen können.

Zuerst brauchen Sie einen Texteditor. Ein Texteditor ist ein Programm, das Dateien im ASCII-Format erzeugen kann. ASCII-Format ist einfach klarer Text, ohne Schriftformatierung oder Spezialzeichen. Auf dem Unix-System gibt es die vi-, emacs- und pico-Texteditoren. Unter Windows sind Notepad, Microsoft Write bzw. WordPad und DOS edit gute, einfache Texteditoren (diese kommen kostenlos mit dem System!); ein Shareware-Editor wie WED oder WinEdit kann genau so gut funktionieren. Auf dem Macintosh können Sie die SimpleText-Applikationen benutzen, die im Systemlieferumfang enthalten sind, oder auch einen raffinierteren Texteditor wie BBedit oder Alpha (beide Shareware).

Wenn Sie nur ein Textverarbeitungsprogramm wie Microsoft Word haben, brauchen Sie keine Panik zu bekommen. Sie können Seiten in Textverarbeitungsprogrammen genauso gut wie in Texteditoren schreiben, obwohl dies ein wenig komplizierter sein kann. Wenn Sie den Befehl »Speichern« oder »Speichern unter« geben, sehen Sie ein Menü mit verschiedenen Formaten, unter denen Sie die Datei speichern können. Eines davon sollte »Nur Text«, »Text mit Zeilenumbrüchen« oder »DOS- Text« sein. Alle diese Optionen speichern Ihre Datei als reinen ASCII-Text, genau so, wie es auch ein Texteditor täte. Wenn Sie bei HTML-Dateien die Wahl zwischen DOS-Text und reinem Text haben, wählen Sie DOS-Text, und benutzen Sie auch die Zeilenumbruch-Option, wenn möglich.


Wenn Sie ein Textverarbeitungsprogramm für Ihre HTML-Entwicklung verwenden, seien Sie sehr vorsichtig. Viele neue Textverarbeitungsprogramme beinhalten einen Modus für HTML oder andere Mechanismen, um HTML-Code zu schreiben. Das Textverarbeitungsprogramm kann Ihnen das HTML-Kodieren auf einmal ungewollt abnehmen oder Sie mysteriöserweise, ohne Vorwarnung, in diesen Modus umschalten. Dies kann ungewöhnliche Resultate zur Folge haben. Wenn Sie Probleme mit einem Textverarbeitungsprogramm haben, probieren Sie es einfach mit einem Texteditor, und sehen Sie, ob das besser ist.

Wie sieht es nun aber mit der Flut der kostenlosen und kommerziellen HTML-Editoren aus, die behaupten, Ihnen dabei zu helfen, HTML einfacher zu schreiben? Die meisten von ihnen sind einfache Texteditoren mit einigen Buttons, die die Kennungen (Tags) für Sie einsetzen. Wenn Sie bereits einen besitzen, können Sie ihn ruhig benutzen. Wenn Sie jedoch einen ausgefallenen Editor haben, der von sich behauptet, alle HTML-Befehle für Sie zu verstecken und alle Arbeit für Sie zu erledigen, so legen Sie ihn mal für ein paar Tage beiseite, und verwenden Sie für eine kleine Weile einen rein textbasierten Editor. Ich werde noch mehr auf HTML-Editoren eingehen, wenn wir mit diesem Beispiel fertig sind.

Starten Sie den Texteditor, und schreiben Sie folgenden Code. Sie müssen an dieser Stelle noch nicht verstehen, was das alles bedeutet; Sie lernen das später in diesem Kapitel. Dies ist nur ein einfaches Beispiel, um zu beginnen:

<HTML><HEAD>
<TITLE>Meine erste HTML-Seite</TITLE></HEAD>
<BODY>
<H1>Dies ist eine HTML-Seite</H1>
</BODY></HTML>

Viele der Beispiele in diesem Buch, einschließlich des obigen, sind auf der CD-ROM enthalten. Dieses Beispiel sollten Sie vielleicht noch selbst eintippen, um ein Gefühl dafür zu bekommen, aber bei den zukünftigen Beispielen wollen Sie vielleicht die Online-Versionen benutzen, damit Sie nicht alles nochmal eintippen müssen.

Nachdem Sie Ihre HTML-Datei nun erzeugt haben, speichern Sie sie auf Platte - und denken Sie daran, wenn Sie ein Textverarbeitungssystem benutzen, sie als reinen ASCII-Text zu speichern. Wenn Sie einen Namen für die Datei auswählen, gibt es zwei Regeln, die Sie befolgen müssen:

 

 

Übung 3.3: Sehen Sie sich das Resultat an

Nun, da Sie eine HTML-Datei haben, starten Sie Ihren Web-Browser. Sie müssen jetzt nicht mit dem Netzwerk verbunden sein, da Sie ja keine Dokumente auf irgendeinem anderen System öffnen wollen (obwohl Ihr Browser nach einer Verbindung verlangen könnte; oft wird er sich aber damit abfinden, keine Verbindung zu haben, und weiter arbeiten).


Wenn Sie einen Web-Browser unter Windows verwenden, so ist es leider komplizierter als bei anderen Systemen, ihn ohne Netzverbindung zu benutzen. Die meisten Browser unter Windows 3.1 (einschließlich einiger Versionen von Netscape) sind nicht in der Lage, ohne eine Netzwerkverbindung zu arbeiten, und hindern Sie so daran, sich Ihre lokalen Dateinen anzuschauen, ohne Online-Gebühren zu bezahlen. Versu-chen Sie, Ihren Browser zu starten, wenn Sie nicht online sind, um dies auszuprobieren. Wenn Ihr Browser dieses Problem hat, haben Sie verschiedene Lösungsmöglichkeiten. Je nachdem, welche Netzwerk-Software Sie verwenden, können Sie vielleicht Ihr Netzwerk-Paket starten (Trumpet oder Chameleon), ohne sich jedoch ins Netzwerk einzuwählen. Dies reicht bei vielen Browsern aus.

Wenn dies nicht funktioniert, müssen Sie die Datei winsock.dll in Ihrem Windows-Verzeichnis mit etwas ersetzen, das als »null sock« bezeichnet wird, eine spezielle Datei, die Ihrem System vortäuscht, daß es mit einem Netzwerk verbunden ist. Die CD, die diesem Buch beiliegt, enthält eine nullsock.dll-Datei, die Sie für Ihren Windows-Browser benutzen können. Wenn Sie Netscape benutzen, können Sie statt dessen mozock.dll einsetzen.

Zuerst müssen Sie Ihre winsock.dll zu einem »sicheren Ort« kopieren; denn Sie werden alles wieder so einrichten müssen wie zuvor, um zurück aufs Web zu kommen. Als nächstes nennen Sie die »null-sock«-Datei winsock.dll, und kopieren Sie sie in Ihr Windows-Verzeichnis. Mit der gefälschten »winsock«-Datei, die Sie installiert haben, sollten Sie in der Lage sein, Ihren Browser ohne Netzwerk zu benutzen (er kann zwar immer noch Fehlermeldungen ausgeben, sollte aber funktionieren).

Wenn Sie also Ihren Browser gestartet haben, suchen Sie in Ihrem Browser nach einem Menü-Punkt oder Auswahl-Button für »Datei öffnen« oder einfach »Öffnen«. Es ist ein Menü-Punkt, der Sie die lokale Platte durchstöbern läßt. (Wenn Sie Lynx benutzen, gehen Sie zu dem Verzeichnis, das Ihre HTML-Datei enthält, und verwenden Sie einfach das Kommando lynx myfile.html, um Lynx zu starten.)

Der »Öffnen«-Befehl (oder sein Äquivalent) veranlaßt den Browser, eine HTML-Datei von Ihrer lokalen Platte einzulesen, sie (in Text und Auszeichnungen) zu parsen und sie anzuzeigen, als wäre diese Seite bereits draußen im Web. Mit Hilfe Ihres Browser und dem »Öffnen«-Befehl können Sie Ihre HTML-Seiten auf Ihrem eigenen Computer testen, in der Privatsphäre Ihrer eigenen Wohnung.

Wenn Ihre Darstellung nicht so wie in der Abbildung aussieht (wenn z.B. Teile fehlen oder alles als Überschrift dargestellt wird), dann sollten Sie zu Ihrem Texteditor zurückgehen und Ihre Datei nochmals mit dem Beispiel vergleichen. Vergewissern Sie sich, daß alle Ihre Tags Abschluß-Kennungen haben und daß alle <-Zeichen von >-Zeichen begleitet werden. Sie brauchen Ihren Browser dazu nicht zu verlassen (sofern Sie mit einem Multitasking-System arbeiten); korrigieren Sie einfach die Datei, und speichern Sie diese unter demselben Namen ab.

siehe Abbildung

Abbildung 3.4:
Eine Beispiel-HTML-Datei

Danach, wieder in Ihrem Browser, wählen Sie »Reload« oder sein Äquivalent (in Lynx ist das Ctrl-R bzw. Strg-R). Der Browser wird nun die neue Version Ihrer Datei lesen, und voilà, Sie können editieren und ansehen und editieren und ansehen, bis Sie alles richtig hingekriegt haben.

Wenn Sie den tatsächlichen HTML-Text in Ihrem Browser zu sehen bekommen und nicht den Inhalt der Abbildung 3.4, dann versichern Sie sich, daß Ihre HTML-Datei eine .html- oder .htm-Extension hat. Diese Datei-Extension ist wichtig, denn sie zeigt Ihrem Browser an, daß es sich um eine HTML-Datei handelt.

Wenn die Dinge absolut nicht stimmen - wenn Sie einen leeren Bildschirm zu sehen bekommen oder seltsame Zeichen sehen -, dann stimmt etwas mit Ihrer Originaldatei nicht. Wenn Sie ein Textverarbeitungsprogramm benutzt haben, um Ihre Dateien zu editieren, versuchen Sie zur Abwechslung, Ihre gespeicherte HTML-Datei in einem rein textbasierten Editor zu öffnen (hier werden NotePad oder SimpleText wieder gute Dienste leisten). Wenn der Texteditor es nicht lesen kann oder das Resultat vermurkst ist, dann haben Sie die Originaldatei nicht im richtigen Format gespeichert. Gehen Sie zu Ihrem Originaleditor zurück, und versuchen Sie noch einmal, die Datei als »Nur Text« zu speichern, und probieren Sie sie dann nochmal in Ihrem Browser aus, bis Sie es richtig hinkriegen.


Ein Hinweis zum Formatieren

Wenn ein HTML-Dokument von einem Browser untersucht wird, werden alle Formatierungen, die Sie womöglich von Hand gemacht haben - wie etwa zusätzliche Leerzeichen, Tabulatoren, Zeilenumbrüche -, ignoriert. Das einzige, das ein HTML-Dokument formatiert, ist eine HTML-Kennung (HTML-Tag). Wenn Sie Stunden damit verbracht haben, eine Text-Datei so zu editieren, daß sie optimal formatierte Absätze hat und Spalten mit Zahlen, aber keinerlei HTML-Kennungen eingefügt haben, dann wird der Text, wenn Sie das Dokument in einen HTML-Browser laden, insgesamt in einem einzigen Absatz zusammenfließen, und all Ihre Arbeit wird vergeblich gewesen sein.

Es gibt eine Ausnahme dieser Regel: eine Kennung namens <PRE>. Sie erfahren morgen in Kapitel 5, »Noch mehr HTML«, mehr über diesen Tag.

Der Vorteil des Ignorierens aller sogenannten »white spaces« (Leerzeichen, Tabulatoren, Zeilenumbrüche) besteht darin, daß Sie Ihre Tags einfügen können, wo immer Sie mögen.

Die folgenden Beispiele führen alle zum gleichen Ergebnis. (Probieren Sie's!)

<H1>If music be the food of love, play on.</H1>
<H1>
If music be the food of love, play on.
</H1>
<H1>
If music be the food of love, play on. </H1>
<H1> If music be the food of love,
play on. </H1>

Programme, die Ihnen beim Schreiben von HTML helfen

Sie denken vielleicht, daß das Herumgetue mit den Tags eine wahre Pein ist, besonders dann, wenn Sie das kurze Beispiel nicht gleich beim ersten Mal richtig zum Laufen bekommen haben. (Ärgern Sie sich deshalb nicht; ich habe das Beispiel auch nicht gleich beim ersten Mal hingekriegt, und ich habe es immerhin entworfen.) Sie müssen an all die Tags denken. Und Sie müssen sie richtig eingeben und auch beenden. Was für ein Aufwand!

Es gibt eine Menge Freeware- und Shareware-Programme zum Editieren von HTML-Dateien. Die meisten dieser Programme sind im wesentlichen Texteditoren mit zusätzlichen Menü-Einträgen oder Auswahl-Buttons, welche die gewünschten HTML-Kennungen in Ihren Text einfügen. Diese HTML-basierten Texteditoren haben zwei Vorteile: Sie brauchen sich nicht an all die Tags zu erinnern und müssen sich nicht die Zeit nehmen, um sie alle einzugeben.

Ich bespreche einige HTML-basierte Editoren in Kapitel 6, »HTML-Hilfsmittel: Editoren und Konverter«. Einstweilen fühlen Sie sich frei, sofern Sie einen HTML-Editor besitzen und ihn für die Beispiele in diesem Buch zu verwenden. Wenn Sie lediglich einen Texteditor besitzen: kein Problem; das bedeutet nur, daß Sie ein bißchen mehr zu tippen haben.

Was ist mit WYSIWYG-Editoren? Das Problem ist, daß es kein echtes WYSIWYG gibt (WYSIWYG: What You See Is What You Get, »Was Sie sehen, ist, was Sie kriegen«, na ja, fast...), wenn Sie mit HTML arbeiten, denn WYG (»Was Sie kriegen«) hängt stark vom Browser ab, der benutzt wird, um Ihr Dokument zu lesen. Wenn Sie sich also dessen bewußt sind, daß die Ergebnisse Ihrer Arbeit von Editor zu Editor variieren können, dann können Ihnen WYSIWYG-Editoren bei der Erstellung von HTML-Dateien viel Zeit sparen. Wenn Sie jedoch professionelle Web-Entwicklung betreiben und viele erweiterte Merkmale anwenden, sind WYSISWYG-Editoren oft unzureichend und Sie müssen sowieso »unter die Haube« gehen, um mit dem HTML-Code zu spielen. Auch wenn Sie beabsichtigen, einen WYSIWYG-Editor für den Hauptteil Ihrer Arbeit einzusetzen, empfehle ich Ihnen, daß Sie für ein paar Tage Geduld üben und diese Beispiele in Texteditoren ausprobieren, damit Sie ein Gefühl dafür bekommen, was HTML wirklich ist, bevor Sie sich dazu entschließen, zu einem Editor überzuwechseln, der die Kennungen versteckt.

Neben den HTML-Editoren gibt es auch Konverter, welche die Dateien vieler populärer Textverarbeitungsprogramme einlesen und sie nach HTML konvertieren. Mit einem einfachen Schablonensatz (templates) könnten Sie Ihre Dokumente komplett mit dem Programm schreiben, das Sie üblicherweise verwenden, und das Ergebnis dann konvertieren.

In vielen Fällen können Konverter außerordentlich hilfreich sein, insbesondere, wenn Sie bereits vorhandene Dokumente möglichst schnell ins Web stellen wollen. Gleichwohl haben Konverter oft dieselben Probleme wie WYSIWYG-Editoren: Die Ergebnisse unterscheiden sich von Browser zu Browser, und viele der neueren und erweiterten Merkmale sind mit ihnen nicht verfügbar. Die existierenden Konverter-Programme sind ziemlich eingeschränkt, nicht unbedingt in ihren eigenen Möglichkeiten, sondern vor allem durch die Einschränkungen von HTML selbst. Auch ein großer Aufwand an einfallsreichen Konvertierungen bringt HTML nicht dazu, etwas zu tun, was es nicht kann. Wenn es eine bestimmte Fähigkeit in HTML nicht gibt, kann auch kein Konverter daran etwas ändern (aber er kann mit Ihren HTML-Dateien seltsame Dinge anstellen und Ihnen damit mehr Arbeit bereiten, als wenn Sie die Formatierung selbst vorgenommen hätten).

Strukturierung Ihres HTML-Codes

HTML definiert drei Tags, die benutzt werden, um die Gesamtstruktur eines Dokuments zu beschreiben und um einige einfache »Header«-Informationen (ein Begriff aus der elektronischen Post, [E-Mail], wo »Header« gewissermaßen den »Briefumschlag« bezeichnet) anzubieten. Diese drei Tags identifizieren Ihre Seite in Browsern oder HTML-Werkzeugen. Sie stellen auch einige einfache Angaben über die Seite (wie Titel oder Autor) zur Verfügung, bevor die ganze Sache geladen wird. Diese Struktur-Kennungen für das Dokument beeinflussen die Art, wie das Dokument aussieht, wenn es formatiert angezeigt wird nicht; sie sind nur dazu da, um anderen Programmen und Tools zu helfen, die HTML-Datei zu interpretieren oder zu filtern.

Wenn man sich an die genaue HTML-Definition hält, dann sind diese Kennungen nicht zwingend. Wenn Ihre Seite sie nicht enthält, können die Browser sie normalerweise immer noch lesen. Da es jedoch möglich ist, daß in Zukunft diese Struktur-Kennungen zwingend erforderliche Elemente sein werden, und es Programme geben mag, die sie erwarten, brauchen Sie sich nicht später um eine Anpassung all Ihrer Dateien zu kümmern, wenn Sie sich von vornherein angewöhnen, diese Struktur-Kennungen in Ihr Dokument einzufügen.

 

<HTML>

Die erste Struktur-Kennung in jedem HTML-Dokument ist das <HTML>-Tag, welches anzeigt, daß der Inhalt dieser Datei in HTML geschrieben wurde.

Der gesamte Text und alle HTML-Befehle in Ihrem HTML-Dokument sollten wie hier zwischen der einleitenden und abschließenden <HTML>-Kennung stehen:

<HTML>
...Ihre Seite...
</HTML>

 

<HEAD>

Das <HEAD>-Tag bestimmt, daß die Zeilen zwischen der einleitenden und der abschließenden Kennung als Dateivorspann angesehen werden. Generell gibt es nur wenige Kennungen, die in den <HEAD>-Teil der Seite gehören (vornehmlich der unten beschriebene Dokumententitel). Sie sollten niemals Teile des Textes Ihrer Seite in den <HEAD>-Teil schreiben.

Hier ist ein typisches Beispiel dafür, wie Sie das <HEAD>-Tag richtig benutzen (über <TITLE> erfahren Sie nachher mehr):

<HTML>
<HEAD>
<TITLE> Hier steht der Titel. </TITLE>
</HEAD>
...
</HTML>

 

<BODY>

Der Rest Ihres HTML-Dokuments, einschließlich des gesamten Textes und anderen Inhalts (Verknüpfungen, Bilder und so weiter), ist in ein <BODY>-Tag eingeschlossen. In Kombination mit den <HTML>- und <HEAD>-Kennungen sieht das dann so aus:

<HTML>
<HEAD>
<TITLE> Dies ist der Titel. Er wird spaeter erklaert </TITLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>

Sie werden bemerken, daß jede HTML-Kennung verschachtelt ist, die beiden <BODY>- und </BODY>-Tags gehören zwischen die beiden <HTML>-Kennungen; das gleiche gilt für die beiden <HEAD>-Kennungen. Alle HTML-Tags funktionieren auf diese Weise, indem sie individuelle verschachtelte Abschnitte von Text bilden. Sie sollten darauf achten, Kennungen niemals zu überlappen, d.h., vermeiden Sie folgendes zu tun:

<HTML>
<HEAD>
<BODY>
</HEAD>
</BODY>
</HTML>

Vergewissern Sie sich, wenn Sie eine HTML-Kennung abschließen, daß Sie jeweils die Kennung abschließen, die zuletzt geöffnet wurde (Sie werden später noch mehr darüber erfahren).


Der Titel

Jede HTML-Seite braucht einen Titel, der anzeigt, was sie beschreibt. Der Titel wird von den Lesezeichen Ihres Browser, von Hotlist-Programmen sowie von anderen Programmen, die Webseiten katalogisieren, benutzt. Um einer Seite einen Titel zu geben, benutzen Sie die HTML-<TITLE>-Kennung.

<TITLE> gehört immer in den Dokumenten-Header (also zwischen die HEAD-Kennungen) und beschreibt den Inhalt der Seite wie hier:

<HTML>
<HEAD>
<TITLE> Der Loewe, die Hexe und der Kleiderschrank </TITLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>

Der Titel zeigt an, wovon Ihre Webseite handelt, und dient als Bezugspunkt der Seite für Lesezeichen- oder Hotlist-Eintragungen. Titel werden in vielen Browsern mit grafischer Benutzeroberfläche in deren Titelleiste angezeigt (das ist z.B. beim Netscape Navigator und Microsoft's Internet Explorer der Fall).

Sie können nur einen Titel auf Ihrer Seite haben, und der Titel darf nur reinen Text enthalten; d.h., es sollten keine anderen HTML-Tags innerhalb des Titels vorkommen.

Entscheiden Sie sich für einen Titel, der sowohl kurz ist als auch den Inhalt der Seite wiedergibt. Außerdem sollte man, auch ohne den Inhalt der Seite zu kennen, mit dem Titel etwas anfangen können. Wenn jemand durchs Web streift, einer zufälligen Verbindung folgt und auf dieser Seite landet oder wenn jemand Ihren Titel in der History-Liste vom Browser eines Freundes gefunden hat, würde man erkennen können, um was es auf dieser Seite geht? Sie beabsichtigen womöglich nicht, daß jemand diese Seite unabhängig von jenen Dokumenten benutzt, von denen aus Sie spezielle Verknüpfungen erzeugt haben. Da sich jedoch jeder zu jeder Zeit mit jeder beliebigen Seite verbinden kann, sollten Sie auf diese Konsequenzen vorbereitet sein und einen aufschlußreichen Titel wählen.

Außerdem können Sie in der Anzahl der Wörter eingeschränkt sein, weil viele Browser den Titel in eine Titelzeile des Bildschirmfensters schreiben. (Obwohl der Text innerhalb der <TITLE>-Tags von beliebiger Länge sein darf, könnte er durch den Browser abgeschnitten werden, wenn er angezeigt wird.) Hier sind einige Beispiele für aufschlußreiche Titel:

<TITLE>Poisonous Plants of North America</TITLE>
<TITLE>Image Editing: A Tutorial</TITLE>
<TITLE>Upcoming Cemetery Tours, Summer 1997</TITLE>
<TITLE>Installing The Software: Opening the CD Case</TITLE>
<TITLE>Laura Lemay's Awesome Home Page</TITLE>

Und einige weniger gelungene Titel:

<TITLE>Part Two</TITLE>
<TITLE>An Example</TITLE>
<TITLE>Nigel Franklin Hobbes</TITLE>
<TITLE>Minutes of the Second Meeting of the Fourth Conference of the
Committee for the Preservation of English Roses, Day Four, After Lunch</TITLE>

Das folgende Beispiel zeigt, wie Titel zum einen in Netscape und zum anderen in Lynx angezeigt werden (vergleichen Sie die Abbildungen 3.5 und 3.6).

Icon

<TITLE>Poisonous Plants of North America</TITLE>

siehe Abbildung

Abbildung 3.5:
Die Darstellung mit Netscape: Der Titel wird in der Titelzeile des Browser-Fensters angezeigt.

Icon

siehe Abbildung

Abbildung 3.6:
Die Darstellung mit Lynx

 

Überschriften

Überschriften werden benutzt, um verschiedene Textabschnitte zu unterteilen, genau so, wie dieses Buch unterteilt ist. HTML definiert sechs Stufen von Überschriften. Die Tags der Überschriften sehen so aus:


<H1> Installation der Backup-Software </H1>

Die Ziffern bezeichnen die Stufe der Überschrift (H1 bis H6). Die Überschriften selbst sind, wenn sie angezeigt werden, nicht numeriert; sie werden entweder mit größeren oder fetten Zeichen, zentriert oder unterstrichen oder in Großbuchstaben dargestellt - aber immer auf eine Weise, die sie vom normalen Text abhebt.

Stellen Sie sich Überschriften so vor, als seien sie die Stichwörter eines Themenabrisses. Wenn der Text, den Sie schreiben, eine Struktur hat, benutzen Sie die Überschriften, um diese Struktur zu verdeutlichen, wie es in den nächsten Code-Zeilen gezeigt wird. (Beachten Sie, daß ich die Überschriften in diesem Beispiel eingerückt habe, um die Hierarchie besser darzustellen. In Ihrem Dokument müssen sie nicht eingerückt sein, und vom Browser werden die Einrückungen ohnehin ignoriert.)

<H1>Engine Tune-Up</H1>
<H2>Change The Oil</H2>
<H2>Adjust the Valves</H2>
<H2>Change the Spark Plugs</H2>
<H3>Remove the Old Plugs</H3>
<H3>Prepare the New Plugs</H3>
<H4>Remove the Guards</H4>
<H4>Check the Gap</H4>
<H4>Apply Anti-Seize Lubricant</H4>
<H4>Install the Plugs</H4>
<H2>Adjust the Timing</H2>


Beachten Sie, daß die Überschriften, anders als der Titel, von beliebiger Länge sein können, auch über mehrere Textzeilen hinweg (da Überschriften jedoch hervorgehoben dargestellt werden, können Zeilen über Zeilen hervorgehobenen Textes auf Ihre Leser ermüdend wirken).

Es ist eine verbreitete Praxis, die erste Stufe der Überschriften zu Beginn Ihres Dokuments zu verwenden, um entweder den Titel zu duplizieren (der normalerweise woanders angezeigt wird) oder um eine kürzere Form des Titels vorzusehen. Wenn Sie zum Beispiel eine Seite haben, die Bestandteil eines langen Dokuments über das Zusammenlegen von Bettwäsche ist und verschiedene Beispiele für das Falten von Bettlaken zeigt, dann könnte der Titel ungefähr so aussehen:

<TITLE> Wie man Bettlaken zusammenlegt: Einige Beispiele </TITLE>

Die oberste Überschrift könnte dann einfach lauten:

<H1> Beispiele </H1>

Benutzen Sie Überschriften nicht, um Fettschrift zu erzeugen oder um einzelne Teile Ihres Dokuments hervorzuheben. Obgleich es in Ihrem Browser ganz toll aussehen mag, wissen Sie nicht, wie es aussieht, wenn andere Leute einen anderen Browser verwenden, um Ihr Dokument zu lesen. Andere Browser numerieren vielleicht die Überschriften oder formatieren sie auf eine unerwartete Weise. Außerdem können Programme, die Webseiten-Indexe erstellen, Ihre Überschriften herausziehen, um wichtige Teile der Seite anzuzeigen. Wenn Sie Überschriften zweckentfremden, können einige Suchprogramme seltsame Ergebnisse hervorbringen.

Die folgenden Beispiele zeigen Überschriften und deren Darstellung in Netscape (Abbildung 3.7) und Lynx (Abbildung 3.8):

 

Icon

<H1>Engine Tune-Up</H1>
<H2>Change The Oil</H2>
<H2>Change the Spark Plugs</H2>
<H3>Prepare the New Plugs</H3>
<H4>Remove the Guards</H4>
<H4>Check the Gap</H4>

Icon

siehe Abbildung

Abbildung 3.7:
Die Darstellung mit Netscape

siehe Abbildung

Abbildung 3.8:
Die Darstellung mit Lynx


Absätze

Nachdem Sie nun also einen Seitentitel und unterschiedliche Überschriften haben, lassen Sie uns einige gewöhnliche Absätze in das Dokument einfügen.


Die erste Version von HTML spezifizierte die <P>-Kennung als einseitige Kennung. Es gab kein korrespondierendes </P>, und die <P>-Kennung wurde benutzt, um das Ende eines Absatzes zu kennzeichnen, nicht den Anfang. Somit sahen Absätze in der ersten Version von HTML folgendermaßen aus:

 

Icon

The blue sweater was reluctant to be worn, and wrestled with her as she attempted to put it on. The collar was too small, and would not fit over her head, and the arm holes moved seemingly randomly away from her searching hands.<P>
Exasperated, she took off the sweater and flung it on the floor. Then she vindictively stomped on it in revenge for its recalcitrant behavior.<P>

Die meisten Browser, die zu Anfangszeiten des Web geschrieben wurden, unterstellen, daß Absätze auf diese Weise formatiert sind. Wenn sie auf eine <P>-Kennung stoßen, beginnen sie eine neue Zeile und fügen zusätzlichen Abstand zwischen der Zeile, die gerade beendet wurde, und der neuen Zeile ein.

In den Spezifikationen HTML 2 und HTML 3.2 und auch in Zusammenhang mit den gängigsten Browsern wurde das Absatz-Tag revidiert. In diesen HTML-Versionen werden die Absatz-Kennungen auf beiden Seiten gesetzt (<P>...</P>), wobei <P> den Beginn des Absatzes kennzeichnet. Somit ist die abschließende Kennung ( </P> ) optional. Die Sweater-Geschichte würde also in den aktuellen HTML-Versionen so aussehen:

<P>The blue sweater was reluctant to be worn, and wrestled with her as she attempted to put it on. The collar was too small, and would not fit over her head, and the arm holes moved seemingly randomly away from her searching hands.</P>
<P>Exasperated, she took off the sweater and flung it on the floor. Then she vindictively stomped on it in revenge for its recalcitrant behavior.</P>


Es ist gut, wenn Sie es sich angewöhnen, <P> am Anfang eines Absatzes einzusetzen; dies wird dann wichtig werden, wenn Sie Text linksbündig, rechtsbündig oder zentriert ausrichten möchten. Ältere Browser werden diese Art der Absatzformatierung ohne Schwierigkeiten annehmen. Ob Sie dann die </P>-Kennung verwenden, bleibt Ihnen überlassen; sie weist Sie jedoch darauf hin, daß der Absatz hier zu Ende ist; vielleicht erscheint Ihnen dies aber auch überflüssig. Ich verwende die </P>-Kennung jedenfalls im gesamten Buch.

Einige Leute verwenden zusätzliche <P>-Kennungen, um etwas mehr Platz um andere Kennungen herum zu schaffen und den Text auf der Seite etwas aufzulokkern. Daher erneut die grundsätzliche Mahnung: Gestalten Sie den Inhalt, nicht die Erscheinungsweise! Jemand mit einem textbasierten Browser oder einem kleinen Bildschirm wird sich nicht allzusehr um den zusätzlichen Leerraum kümmern, den Sie so sorgfältig eingefügt haben. Einige Browser werden vielleicht sogar mehrere <P>-Kennungen auf eine einzige verkürzen und so Ihre ganze mühsame Formatierung zunichte machen.

Das folgende Beispiel zeigt einen Absatz und seine Darstellung in Netscape (Abbildung 3.9) und Lynx (Abbildung 3.10):

Icon

<P>The sweater lay quietly on the floor, seething from its ill treatment. It wasn't its fault that it didn't fit right. It hadn't wanted to be purchased by this ill-mannered woman.</P>

Icon

siehe Abbildung

Abbildung 3.9:
Die Darstellung in Netscape

siehe Abbildung

Abbildung 3.10:
Die Darstellung in Lynx


Listen, Listen und nochmals Listen

Abgesehen von Überschriften und Absätzen ist das wohl häufigste HTML-Element, mit dem Sie sich auseinandersetzen müssen, die Liste. Wenn Sie sich durch diesen Abschnitt gearbeitet haben, werden Sie nicht nur wissen, wie eine Liste erzeugt wird, sondern fünf verschiedene Arten von Listen erzeugen können, eine Liste für jede Gelegenheit!


HTML definiert fünf Arten von Listen:

Listen-Kennungen

Alle Listen-Kennungen (List-Tags) haben gemeinsame Bestandteile:

Obgleich die Kennungen und die Listeneinträge in Ihrem HTML-Code beliebig angeordnet sein können, ziehe ich es vor, den Listen-Code so anzuordnen, daß die Listen-Kennungen jeweils in einer eigenen Zeile stehen und jeder neue Eintrag ebenfalls mit einer neuen Zeile beginnt. Das macht es leicht, sowohl die Liste selbst als auch die einzelnen Listeneinträge schnell zu erkennen. Mit anderen Worten, ich finde Anordnungen wie diese:

<P> Dantes Goettliche Komoedie besteht aus drei Buechern: </P>
<UL>
<LI> Hoelle
<LI> Fegefeuer
<LI> Paradies
</UL>

leichter zu lesen als die folgende Anordnung, obwohl beides zur gleichen Darstellung im Browser führt:

<P>Dantes Goettliche Komoedie besteht aus drei Buechern:</P>
<UL><LI>Hoelle<LI>Fegefeuer<LI>Paradies</UL>

Numerierte Listen

Numerierte Listen werden durch die <OL>...</OL>-Tags eingeschlossen (OL steht für Ordered List, geordnete Liste), und jeder Eintrag in der Liste beginnt mit der <LI>-Kennung (LI = List Item, Listen-Eintrag).

Auch die <LI>-Kennung ist einseitig, d.h., Sie brauchen keine abschließende Kennung anzugeben. Das Auftreten der nächsten <LI>-Kennung (oder der abschließenden </OL>-Kennung) bezeichnet zugleich das Ende des Eintrags in der Liste.

Wenn der Browser eine geordnete Liste interpretiert, numeriert er jeden der Einträge fortlaufend (und rückt sie häufig etwas ein). Sie brauchen die Numerierung also nicht selber durchzuführen, und wenn Sie Einträge hinzufügen oder entfernen, numeriert der Browser sie neu, sobald er das Dokument erneut lädt.

Geordnete Listen sind Listen, in denen jeder Punkt numeriert ist.

Der folgende Quelltext z.B. ist eine geordnete Liste mit den einzelnen Schritten eines Rezepts für vegetarische Lasagne. Dabei ist jeder Eintrag in dieser Liste ein Schritt der gesamten Prozedur:

<P> Vegetarische Lasagne </P>
<OL>
<LI> Auberginen oder Zucchini in Scheiben schneiden,
salzen und Saft ablaufen lassen.
<LI> Aus den Tomaten, Zwiebeln und Knoblauch eine dicke
Tomatensauce herstellen.
<LI> Das andere Gemuese in Oel anbraten, den Mozzarella in
Scheiben schneiden und den Emmentaler reiben.
<LI> Nudelplatten in Salzwasser vorgaren, eine Auflaufform einfetten.
<LI> Nudelplatten einschichten, das Gemuese und den Kaese darauf
verteilen und zum Schluss mit Tomatensauce uebergiessen.
<LI> Bei 200°C ca. 45 Minuten backen.
<LI> Guten Appetit!
</OL>

Verwenden Sie numerierte Listen nur, wenn Sie deutlich machen wollen, daß die Elemente geordnet sind, d.h., daß sie in einer bestimmten Reihenfolge auftreten müssen. Wenn Sie nur zeigen wollen, daß etwas einige Elemente in beliebiger Reihenfolge besitzt, benutzen Sie statt dessen eine ungeordnete Liste.

Das folgende Beispiel zeigt eine einfache geordnete Liste und wie sie in Netscape (Abbildung 3.11) und Lynx (Abbildung 3.12) dargestellt wird:

Icon

<P> For the best mango Chutney: </P>
<OL>
<LI> Go to the Store
<LI> Buy some mango Chutney
<LI> Open the Bottle
<LI> Serve
</OL>


Icon

siehe Abbildung

Abbildung 3.11:
Die Darstellung in Netscape

siehe Abbildung

Abbildung 3.12:
Die Darstellung in Lynx

Geordnete Listen verfügen über einige Attribute, über die Sie Einfluß darauf nehmen können, wie der Browser die Liste darstellt. Diese erlauben es Ihnen, einige Merkmale geordneter Listen zu kontrollieren, darunter das zu verwendende Numerierungsschema und bei welcher Zahl begonnen werden soll (falls Sie nicht bei eins beginnen wollen).

Attribute sind besondere Bestandteile von HTML-Tags, die entweder bestimmte Optionen oder zusätzliche Informationen zu den Tags selbst enthalten.

Sie können bei geordneten Listen im wesentlichen zwei Dinge anpassen: Zum einen wie diese numeriert werden und zum anderen, bei welcher Zahl die Numerierung beginnt. HTML 3.2 verfügt über das TYPE-Attribut. Dieses Attribut kann einen der folgenden fünf Werte annehmen, der festlegt, welche Art der Numerierung verwendet wird:

Die Art der Numerierung kann im <OL>-Tag wie folgt festgelegt werden: <OL TYPE="a">. Standardmäßig wird TYPE="1" verwendet.


Das angenehme an Web-Browsern ist, daß sie im allgemeinen Attribute, die sie nicht verstehen, ignorieren. Wenn ein Browser z.B. das TYPE-Atribute des <OL>-Tag nicht unterstützt, wird er es einfach ignorieren, sobald er darauf stößt.

Nehmen Sie die folgende Liste als Beispiel:

<P>Cheescake ingredients:</P>
<OL>
<LI>Quark Cheese
<LI>Honey
<LI>Cocoa
<LI>Vanilla Extract
<LI>Flour
<LI>Eggs
<LI>Walnuts
<LI>Margerine
</OL>

Würden Sie, wie im folgenden geschehen, das Attribut TYPE="I" dem <OL>-Tag hinzufügen, dann würde die Liste in Netscape wie in Abbildung 3.13 dargestellt werden.

Icon

<P>Cheescake ingredients:</P>
<OL TYPE="I">
<LI>Quark Cheese
<LI>Honey
<LI>Cocoa
<LI>Vanilla Extract
<LI>Flour
<LI>Eggs
<LI>Walnuts
<LI>Margerine
</OL>

Icon

siehe Abbildung

Abbildung 3.13:
Die Darstellung in Netscape (für Windows 95)

Das TYPE-Attribut kann auch im <LI>-Tag verwendet werden. Dadurch erreicht man einen Wechsel in der Art der Numerierung innerhalb der Liste. Wird das TYPE-Attribut mit dem <LI>-Tag verwendet, so wirkt es sich auf den fraglichen Eintrag und alle darauffolgenden in der Liste aus.

Durch die Verwendung eines anderen Attributs - START - können Sie festlegen, mit welcher Zahl bzw. mit welchem Buchstaben die Numerierung Ihrer Liste beginnt. Die Standard-Startposition ist natürlich die 1. <OL START=4> würde z.B. dafür sorgen, daß die Liste bei Nummer 4 beginnt. Wohingegen <OL TYPE="a" START=3> dafür sorgen würde, daß die Liste bei c beginnt und von dort im Alphabet fortfährt.

Sie könnendas Beispiel von oben dazu veranlassen, die Numerierung mit der römischen Ziffer V, wie im folgenden geschehen, zu beginnen. Die Abbildung 3.14 zeigt das Ergebnis.

Icon

<P>Cheescake ingredients:</P>
<OL TYPE="I" START=5>
<LI>Quark Cheese
<LI>Honey
<LI>Cocoa
<LI>Vanilla Extract
<LI>Flour
<LI>Eggs
<LI>Walnuts
<LI>Margerine
</OL>

Icon

siehe Abbildung

Abbildung 3.14:
Die Darstellung in Netscape (für Windows 95)

Ein letztes Attribut - COMPACT - gibt an, daß weniger Leerraum innerhalb einer geordneten Liste verwendet werden soll. Dieses Attribut steht auch für alle anderen Listen-Typen zur Verfügung, die in diesem Kapitel beschrieben werden. In einer geordneten Liste können Sie das COMPACT-Attribut wie folgt verwenden: <OL COMPACT>

Die meisten Browser scheinen das COMPACT-Attribut zu ignorieren und Listen mit diesem Attribut auf die gleiche Weise zu formatieren wie normale Listen.

Wie auch mit dem TYPE-Attribute können Sie an jedem Punkt einer Liste die Nummer eines Eintrags ändern. Dies erreichen Sie über das VALUE-Attribut des <LI>-Tag. Die Numerierung wird beginnend mit dem angegebenen Wert bei dem betroffenen Eintrag neu gestartet.

Was wäre z.B. wenn die letzten drei Einträge in der Liste der Zutaten von oben anstatt der Nummern 6, 7, 8 die Nummern 10, 11, 12 haben sollten? Sie können die Numerierung bei dem Eintrag Eggs über das VALUE-Attribut entsprechend zurücksetzen:

<P>Cheescake ingredients:</P>
<OL TYPE="I">
<LI>Quark Cheese
<LI>Honey
<LI>Cocoa
<LI>Vanilla Extract
<LI>Flour
<LI VALUE=10>Eggs
<LI>Walnuts
<LI>Margerine
</OL>

Ungeordnete Listen

Ungeordnete Listen sind Listen, deren Elemente in beliebiger Reihenfolge erscheinen können. Ungeordnete Listen sehen in HTML genauso aus wie geordnete Listen, abgesehen davon, daß die Liste durch die <UL>...</UL>-Kennung anstelle von OL gekennzeichnet wird. Die einzelnen Einträge der Liste werden durch die <LI>-Kennung unterteilt, genau wie in geordneten Listen, z.B. so:

<P>Lists in HTML</P>
<UL>
<LI>Ordered Lists
<LI>Unordered Lists
<LI>Menus
<LI>Directories
<LI>Glossary Lists
</UL>

Browser formatieren ungeordnete Listen normalerweise mit einem dicken Punkt oder einer anderen symbolischen Markierung; Lynx verwendet das Sternchen (*, Asterisk).

Ungeordnete Listen sind Listen, bei denen die Listenpunkte mit einem dicken Punkt oder einer anderen symbolischen Markierung versehen sind.

Das folgende Beispiel zeigt eine ungeordente Liste und wie sie in Netscape (Abbildung 3.13) und Lynx (Abbildung 3.14) dargestellt wird:

Icon

<P>The three Erinyes, or Furies, were:</P>
<UL>
<LI>Tisiphone
<LI>Megaera
<LI>Alecto
</UL>

Icon

siehe Abbildung

Abbildung 3.15:
Die Darstellung in Netscape

siehe Abbildung

Abbildung 3.16:
Die Darstellung in Lynx

Ungeordnete Listen können wie geordnete Listen angepaßt werden. Standardmäßig verwenden die meisten Browser (darunter auch Netscape) dicke Punkte, um die einzelnen Einträge ungeordneter Listen zu kennzeichnen (Text-Browser, wie z.B. Lynx, verwenden im allgemeinen ein Sternchen). Über das TYPE-Attribut des <UL>-Tag können Sie einige Browser dazu veranlassen, andere Arten von Blickfangpunkten zu verwenden, um die Einträge zu kennzeichnen. Nach der HTML-3.2-Spezifikation kann das TYPE-Attribut drei verschiedene Werte annehmen:

Im nachfolgenden Eingabe/Ausgabe-Beispiel sehen Sie einen Vergleich der drei Typen, wie sie im Netscape Navigator dargestellt werden (siehe Abbildung 3.17).

Icon

<UL TYPE="disc">
<LI>DAT - Digital Audio Tapes
<LI>CD - Compact Discs
<LI>Cassettes
</UL>
<UL TYPE="square">
<LI>DAT - Digital Audio Tapes
<LI>CD - Compact Discs
<LI>Cassettes
</UL>
<UL TYPE="circle">
<LI>DAT - Digital Audio Tapes
<LI>CD - Compact Discs
<LI>Cassettes
</UL>

Icon

siehe Abbildung

Abbildung 3.17:
Die Ausgabe in Netscape

So wie Sie die Art der Numerierung innerhalb einer geordneten Liste ändern können, können Sie die Art der Blickfangpunkte im Lauf einer Liste ändern, indem Sie das TYPE-Attribut des <LI>-Tag verwenden.

Wie in geordneten Listen können Sie auch das COMPACT-Attribut mit dem <UL>-Tag verwenden, obwohl diese Kombination von den meisten Browsern ignoriert wird.

Glossar-Listen

Glossar-Listen, bisweilen auch Definitions-Listen genannt, unterscheiden sich ein wenig von den anderen Listen. Jedes Element einer Glossar-Liste besteht aus zwei Teilen:

Jeder Teil der Glossar-Liste hat seine eigenen Kennungen: <DT>definition term«) für das Stichwort und <DD> (»definition definition«) für seine Definition. <DT> und <DD> sind beides einseitige Kennungen, und normalerweise tauchen sie paarweise auf, obwohl die meisten Browser auch mit einzelnen Stichwörtern oder Definitionen umgehen können. Die ganze Glossar-Liste wird durch die <DL>...</DL>-Kennung (»defintion list«) gekennzeichnet.

Glossar-Listen sind Listen, bei denen jeder Listenpunkt aus zwei Teilen besteht: einem Ausdruck und seiner Definition. Deswegen werden Glossar-Listen manchmal auch Definitions-Listen genannt.

Hier folgt das Beispiel einer Glossar-Liste anhand von einigen Kräutern und darüber, wie sie wachsen:

<DL>
<DT>Basil<DD>Annual. Can grow four feet high; the scent of its
tiny white flowers is heavenly
<DT>Oregano <DD>Perennial. Sends out underground runners and is
difficult to get rid of once stablished.
<DT>Coriander <DD>Annual. Also called cilantro, coriander likes
cooler weather of spring and fall.
</DL>

Glossar-Listen werden im allgemeinen mit den Stichwörtern und Definitionen in jeweils eigenen Zeilen formatiert, und der linke Rand der Definitionen wird eingerückt.

Glossar-Listen werden natürlich nicht nur für Stichwörter und Definitionen verwendet. Sie können überall dort benutzt werden, wo eine eingerückte Liste benötigt wird. - Hier ein Beispiel:

<DL>
<DT>Macbeth<DD>I'll go no more. I am afraid to think of what I have done; look on't again I dare not.
<DT>Lady Macbeth<DD>Infirm of purpose! Give me the daggers. The sleeping and the dead are as but pictures. 'Tis the eye if childhood that fears a painted devil. If he do bleed, I'll gild the faces if the grooms withal, for it must seem their guilt. (Exit. Knocking within)
<DT>Macbeth<DD>Whence is that knocking? How is't wit me when every noise apalls me? What hands are here? Ha! They pluck out mine eyes! Will all Neptune's ocean wash this blood clean from my hand? No. This my hand will rather the multitudinous seas incarnadine, making the green one red. (Enter Lady Macbeth)
<DT>Lady Macbeth<DD>My hands are of your color, but I shame to wear a heart so white.
</DL>

Das folgende Beispiel zeigt, wie eine Glossar-Liste in Netscape (Abbildung 3.18) und Lynx (Abbildung 3.19) dargestellt wird:

Icon

<DL>
<DT>Basil<DD>Annual. Can grow four feet high; the scent of its tiny white
flowers is heavenly
<DT>Oregano <DD>Perennial. Sends out underground runners and is difficult
to get rid of once stablished.
<DT>Coriander <DD>Annual. Also called cilantro, coriander likes cooler
weather of spring and fall.
</DL>

siehe Abbildung

Abbildung 3.18:
Die Darstellung in Netscape

siehe Abbildung

Abbildung 3.19:
Die Darstellung in Lynx

Glossar-Listen bieten nicht so viele Attribute zur Kontrolle des Erscheinungsbildes, wie das bei den vorangegangenen Listentypen der Fall war. Das einzige Attribut, das das <DL>-Tag zur Verfügung stellt, ist COMPACT. In diesem Fall scheint COMPACT mehr Beachtung gefunden zu haben. Der Netscape Communicator z.B. macht die Liste kompakter und nutzt den Platz effizienter, wenn Sie dieses Attribut verwenden.

 

Menü- und Verzeichnis-Listen

Menüs sind Listen von Stichwörtern oder kurzen Absätzen ohne Punkte, Nummern oder ähnliche Markierungen. Sie sind vergleichbar mit einer einfachen Liste von Absätzen, abgesehen davon, daß manche Browser sie vielleicht einrücken oder sonst irgendwie anders formatieren als normale Absätze. Menü-Listen werden von den <MENU>- und </MENU>-Kennungen umschlossen, und jeder Listenpunkt wird, wie im folgenden Beispiel durch <LI> eingeleitet:

<MENU>
<LI>Go left
<LI>Go right
<LI>Go up
<LI>Go down
</MENU>

Verzeichnis-Listen (Directory-Lists) sind für Einträge gedacht, die noch kürzer sind als Menü-Listen und von Browsern horizontal in Spalten formatiert werden sollen, wie ein Inhaltsverzeichnis auf einem Unix-System. So wie auch bei Menü-Listen sind Verzeichnis-Listen von den Kennungen <DIR> und </DIR> umgeben und verwenden <LI> für jeden individuellen Aufzählungspunkt, wie im folgenden Beispiel:

<DIR>
<LI>apples
<LI>oranges
<LI>bananas
</DIR>

Menü-Listen werden für kurze Listen einzelner Punkte eingesetzt. Verzeichnis-Listen sind sogar noch kürzere Listen von Punkten, wie Sie sie in einem Unix- oder DOS-Inhaltsverzeichnis finden würden.

Obwohl Menü- und Verzeichnis-Listen in den HTML-2.0-Spezifikationen enthalten sind, werden sie in Webseiten nicht oft angewendet. In HTML 3.2 werden sie deutlich von ungeordneten und Glossar-Listen unterschieden - dahingehend, daß sie anders als diese dargestellt werden. Allerdings wurde diese Unterscheidung nicht in den Browsern implementiert. Wenn wir davon ausgehen, daß die meisten Browser Menüs und Verzeichnisse auf ähnliche Weise anzeigen wie Glossar-Listen (oder ungeordnete Listen) und nicht in der Art, wie sie in der Spezifikation beschrieben wird, ist es vermutlich am besten, sich mit den anderen drei Listenformen zu begnügen.

Das folgende Beispiel zeigt die Darstellung einer Menü- und Verzeichnis-Liste in Netscape (Abbildung 3.20) und Lynx (Abbildung 3.21):

Icon

<MENU>
<LI>Canto 1: The Dark Wood of Error
<LI>Canto 2: The Descent
<LI>Canto 3: The Vestibule
<LI>Canto 4: Circle One: Limbo
<LI>Canto 5: Circle Two: The Carnal
</MENU>

<DIR>
<LI>files
<LI>applications
<LI>mail
<LI>stuff
<LI>phone_numbers
</DIR>

Icon

siehe Abbildung

Abbildung 3.20:
Die Darstellung in Netscape

siehe Abbildung

Abbildung 3.21:
Die Darstellung in Lynx

Verschachtelte Listen

Was passiert nun, wenn Sie eine Liste in eine andere Liste setzen? Das geht in Ordnung, soweit es HTML betrifft; fügen Sie einfach die komplette Listenstruktur als einen Eintrag in eine andere Liste ein. Die eingefügte Liste wird einfach zu einem weiteren Element der anderen Liste und vom Rest dieser Liste eingerückt abgesetzt. Derartige Listen eignen sich besonders gut für Menü-artige Einträge, bei denen eine Hierarchie abgebildet werden soll (beispielsweise in Inhaltsverzeichnissen), oder bei Entwürfen.

Das Einrücken von verschachtelten Listen im HTML-Code zeigt, wie sie sich im endgültigen Layout verhalten:

<OL>
<UL>
<LI>WWW
<LI>Organization
<LI>Beginning HTML
<UL>
<LI>What HTML is
<LI>How to Write HTML
<LI>Doc structure
<LI>Headings
<LI>Paragraphs
<LI>Comments
</UL>
<LI>Links
<LI>More HTML
</OL>

Manche Browser formatieren verschachtelte geordnete und ungeordnete Listen abweichend von der sie umschließenden Liste; beispielsweise könnten sie ein anderes Symbol und nicht den Punkt für eine verschachtelte Liste verwenden oder die umschließende Liste mit Buchstaben anstelle von Zahlen numerieren. Gehen Sie aber nicht davon aus, sondern beziehen Sie sich in Ihrem Text auf »Absatz 8, Abschnitt b«, da Sie nicht sicher sein können, wie die genaue Formatierung in der endgültigen Darstellung aussehen wird.

Das folgende Beispiel zeigt, wie eine verschachtelte Liste in Netscape (Abbil-dung 3.22) und Lynx (Abbildung 3.23) dargestellt wird:

Icon

<H1>Peppers</H1>
<UL>
<LI>Bell
<LI>Chile
<UL>
<LI>Serrano
<LI>Jalapeno
<LI>Habanero
<LI>Anaheim
</UL>
<LI>Szechuan
<LI>Cayenne
</UL>

 


siehe Abbildung

Abbildung 3.22:
Die Darstellung in Netscape

siehe Abbildung

Abbildung 3.23:
Die Darstellung in Lynx


Kommentare

Sie können Kommentare in HTML-Dokumente aufnehmen, um das Dokument selbst zu beschreiben oder um irgendwelche Angaben zum Status des Dokuments zu machen; einige Quellcode-Kontroll-Programme können solche Statusangaben beispielsweise in Kommentare schreiben. Der Kommentartext wird ignoriert, wenn die HTML-Datei ausgewertet wird; Kommentare erscheinen auch nicht auf dem Bildschirm - deshalb sind sie ja Kommentare.

Kommentare sehen so aus:

<!- Dies ist ein Kommentar ->

Jede Zeile sollte einzeln kommentiert sein, und es ist normalerweise von Vorteil, keine anderen HTML-Kennungen in die Kommentarzeilen einzufügen. (Obwohl dies nicht verboten ist, kommen viele Browser durcheinander, wenn sie in Kommentarzeilen auf HTML-Kennungen treffen, und zeigen sie dann trotzdem an.) Als Faustregel sollte man beachten die Zeichen <, > oder -- innerhalb eines HTML-Kommentars nicht zu verwenden.

Hier sind einige Beispiele:

<!- Schreib diesen Abschnitt weniger humorvoll noch einmal ->
<!- Neil half mir in diesem Abschnitt ->
<!- Go Tigers! ->

 

Übung 3.4: Erzeugen eines richtigen HTML-Dokuments

Mittlerweile sollten Sie schon genug wissen, um einfache HTML-Dokumente erzeugen zu können: Sie wissen, was HTML ist, Sie haben einige HTML-Tags kennengelernt, und Sie haben sogar probiert, eine HTML-Datei mit dem Browser anzusehen. Sie haben allerdings noch keine Verknüpfungen verwendet, doch das lernen Sie im nächsten Kapitel.

Diese Übung zeigt Ihnen, wie eine HTML-Datei erzeugt wird, die die HTML-Tags, die Sie in diesem Kapitel kennengelernt haben, benutzt. So bekommen Sie ein Gefühl dafür, wie sie aussehen, wenn sie am Bildschirm angezeigt werden, und welche typischen Fehler Sie dabei machen können. (Niemand bleibt davon verschont, und das ist der Grund, aus dem es oft hilfreich ist, einen HTML-Editor zu verwenden, der Ihnen das Schreiben der HTML-Tags abnimmt. Die Editoren vergessen weder die abschließenden Kennungen noch lassen sie den Schrägstrich weg oder verschreiben sich bei der Kennung selbst.)

Gut, erzeugen wir also ein einfaches Beispiel, verwenden Sie Ihren Editor dazu. Es muß alles in allem nicht viel aussagen; alles, was wir tun müssen, ist, die Struktur-Kennungen einzufügen, einen Titel, ein paar Überschriften und ein oder zwei Absätze. Hier ist das Beispiel:

<HTML>
<HEAD>
<TITLE>Company Profile, Camembert Incorporated</TITLE>
</HEAD>
<BODY>
<H1>Camembert Incorporated</H1>
<P>"Many's the long night I dreamed of cheese -- toasted, mostly."
-- Robert Louis Stevenson</P>
<H2>What We Do</H2>
<P>We make cheese. Lots of cheese; more than eight tons of cheese
a year.</P>
<H2>Why We Do It</H2>
<P>We are paid an awful lot of money by people who like cheese.
So we make more.</P>
<H2>Our Favorite Cheeses</H2>
<UL>
<LI>Brie
<LI>Havarti
<LI>Camembert
<LI>Mozzarella
</UL>
</BODY>
</HTML>

Speichern Sie es als HTML-Datei, laden Sie es in Ihren Browser, und schauen Sie sich an, was daraus geworden ist.

Wenn Sie Zugriff auf einen anderen Browser auf Ihrer oder einer anderen Plattform haben, empfehle ich dringend, daß Sie versuchen, die gleiche HTML-Datei auch mit dem anderen Browser zu betrachten, so daß Sie sehen, wie die verschiedenen Browser Ihre HTML-Seite darstellen. Bisweilen können diese Unterschiede Sie überraschen; Zeilen, die im einen Browser gut aussehen, erscheinen im anderen ziemlich seltsam.

Als Verdeutlichung dafür sehen Sie die Käsefabrik Camenbert Incorporated in Abbildung 3.24 in Netscape (Mac-Version) und in Abbildung 3.25 in Lynx.

Sehen Sie, was ich meine?

siehe Abbildung

Abbildung 3.24:
Die Käsefabrik in
Netscape

siehe Abbildung

Abbildung 3.25:
Die Käsefabrik in Lynx

 

Zusammenfassung

HTML ist eine reine Text-Auszeichnungssprache, die verwendet wird, um Hypertext-Seiten im World Wide Web zu erstellen. Sie beschreibt die Struktur einer Seite, nicht ihr Erscheinungsbild.

In diesem Kapitel haben Sie gelernt, was HTML ist und wie Sie einfache HTML-Dateien schreiben und betrachten können. Sie haben darüber hinaus folgende HTML-Kennungen aus Tabelle 3.1 kennengelernt.

Tabelle 3.1: Die HTML-Kennungen aus Kapitel 3

Kennung

Attribute

Verwendungszweck

<HTML> ... </HTML>

 

Das gesamte HTML-Dokument

<HEAD> ... </HEAD>

 

Der Header oder Vorspann des
HTML-Dokuments

<BODY> ... </BODY>

 

Der restliche Inhalt des HTML-Dokuments

<TITLE> ... </TITLE>

 

Der Titel des HTML-Dokuments

<H1> ... </H1>

 

Überschrift, Stufe 1

<H2> ... </H2>

 

Überschrift, Stufe 2

<H3> ... </H3>

 

Überschrift, Stufe 3

<H4> ... </H4>

 

Überschrift, Stufe 4

<H5> ... </H5>

 

Überschrift, Stufe 5

<H6> ... </H6>

 

Überschrift, Stufe 6

<P> ... </P>

 

Absatz

<OL>...</OL>

 

Eine geordnete (numerierte) Liste. Die Listeneinträge beginnen jeweils mit <LI>.

 

TYPE

Legt das Schema der Numerierung für die Liste fest.

 

START

Legt fest, mit welcher Nummer die Liste beginnen soll.

 

COMPACT

Legt fest, daß ein kompaktes Format für die Liste verwendet werden soll.

<UL>...</UL>

 

Eine ungeordnete (mit Punkten oder anders markierte) Liste. Die Listeneinträge beginnen jeweils mit <LI>.

 

TYPE

Legt die Art der Blickfangpunkte für die Liste fest.

 

COMPACT

Legt fest, daß ein kompaktes Format für die Liste verwendet werden soll.

<MENU>...</MENU>

 

Eine Menü-Liste (eine Liste mit kurzen Einträgen oder Absätzen).

 

COMPACT

Legt fest, daß ein kompaktes Format für die Liste verwendet werden soll.

<DIR>...</DIR>

 

Eine Liste mit besonders kurzen (1-2 Wörter) Einträgen. Verzeichnis-Listen werden in den meisten HTML-Dateien nicht oft benutzt.

 

COMPACT

Legt fest, daß ein kompaktes Format für die Liste verwendet werden soll.

<LI>

 

Ein einzelner Listeneintrag in geordneten, ungeordneten, Menü- oder Verzeichnis-Listen.

 

TYPE

Legt innerhalb der Liste, beginnend mit dem aktuellen Listeneintrag, eine neue Numerierungsart bzw. neue Blickfangpunkte fest. Funktioniert nur mit <UL>- und <OL>-Listen.

 

VALUE

Legt innerhalb einer <OL>-Liste, beginnend mit dem aktuellen Eintrag, eine neuen Wert für die weitere Numerierung fest.

<DL>..</DL>

 

Eine Glossar- oder Definitions-Liste. Einträge in der Liste haben zwei Bestandteile: den Ausdruck und seine Definition.

 

COMPACT

Legt fest, daß ein kompaktes Format für die Liste verwendet werden soll.

<DT>

 

Der Ausdruck einer Glossar-Liste.

<DD>

 

Die Definition einer Glossar-Liste.

<!- ... ->

 

Kommentar.


Fragen und Antworten

Frage:

Kann ich mit HTML wenigstens irgendeine Art von Formatierung durchführen?

Antwort:

Man kann die Zeichenfolgen ein wenig formatieren, zum Beispiel ein oder zwei Wörter fett setzen. Verschiedene Tags in HTML 3.2 erlauben es Ihnen, die Größe und Farbe des Textes in Ihrer Webseite zu verändern (für Leser, die einen Browser verwenden, der diese Tags unterstützt - darunter sind Netsscape Navigator und Microsoft Internet Explorer). Sie werden in den Kapiteln 5 und 6 mehr darüber erfahren.

Frage:

Ich benutze Windows. Mein Textverarbeitungsprogramm erlaubt mir nicht, eine Textdatei mit einer anderen Erweiterung als .txt zu speichern. Wenn ich »index.html« eintippe, speichert es die Datei als »index.html.txt«. Was kann ich tun?

Antwort:

Sie können Ihre Dateien nach dem Speichern umbenennen, so daß sie eine html- oder htm-Extension bekommen, jedoch kann dies mühsam sein, wenn es sich um viele Dateien handelt. Versuchen Sie es doch mal, Ihre Webseiten mit einem Text- oder HTML-Editor zu schreiben.

Frage:

Ich habe bei vielen Webseiten bemerkt, daß die Struktur-Tags (<HTML>, <HEAD>, <BODY>) oft nicht verwendet werden. Muß ich sie wirklich einfügen, auch wenn die Seiten ohne sie funktionieren?

Antwort:

Sie müssen nicht, nein. Die meisten Browser werden schlichte HTML-Dokumente auch ohne die Strukturauszeichnungen verarbeiten. Doch das Einfügen dieser Kennungen erlaubt es, die Dokumente auch von allgemeineren SGML-Tools einlesen zu lassen und in den Genuß der Möglichkeiten zukünftiger Browser zu kommen. Und es ist die »korrekte« Art, es zu tun, wenn Sie wollen, daß Ihre Dokumente dem eigentlichen HTML-Format entsprechen.

Frage:

Ich hab' in manchen HTML-Dateien Kommentare gesehen, die so aussahen:

<!- dies ist ein Kommentar>


Antwort:

Das ist eine alte Form der Kommentierung, die in sehr frühen HTML-Versionen benutzt wurde. Obgleich viele Browser sie noch akzeptieren, sollten Sie in Ihren Dokumenten doch die neue Form benutzen (und jede Zeile einzeln kommentieren).

Frage:

Meine Glossare erschienen mit sehr seltsamen Formatierungen. Die Ausdrücke sind weiter eingerückt als die Definitionen!

Antwort:

Haben Sie die <DD>- und <DT>-Kennungen verwechselt? Die <DT>-Kennung (der Definitions-Term) muß immer zuerst eingesetzt werden, dann folgt <DD> (die Definition). Dies ist ein häufig begangener Fehler. Es gibt einfach zu viele D-Kennungen in Glossar-Listen.

Frage:

Ich habe HTML-Seiten gesehen, die das <LI> außerhalb einer Listenstruktur benutzen, ganz allein auf der Seite, z.B. so:

Antwort:

Die meisten Browser werden diese Kennung zumindest außerhalb einer Listen-Kennung annehmen und sie entweder als einfachen Absatz oder als nichteingerückten Gliederungspunkt formatieren. Es ist jedoch, gemäß der eigentlichen HTML-Definition, nicht erlaubt, <LI> außerhalb einer Listen-Kennung einzusetzen, weswegen man dies auf »guten« HTML-Seiten nicht tun sollte. Und da wir ja alle danach streben, gute HTML zu schreiben (nicht wahr?), sollten Sie dies ebenfalls nicht tun. Stecken Sie Ihre Listenpunkte innerhalb der Listen dahin, wo sie hingehören.


Copyright ©1998 by SAMS, einem Imprint der Markt&Technik Buch- und Software-Verlag GmbH.
Elektronische Fassung des Titels: HTML 4 in 14 Tagen, ISBN: 3-8272-2019-X


vorheriges KapitelTop Of PageInhaltsverzeichnisIndexInfoseitenächstes Kapitel