Wenn Sie auch nur ein einziges Mal mit dem World Wide Web gearbeitet haben, sind Sie mit großer Wahrscheinlichkeit über HTML gestolpert, also der Sprache, aus der das Web besteht. Obwohl diese Sprache nicht so kompliziert ist wie andere Programmiersprachen, hat sie dennoch einige Ecken und Kanten, mit denen Sie zurechtkommen müssen. Aus diesem Grund ist es unabdingbar, sich ein wenig intensiver mit HTML zu beschäftigen. Im Gegensatz zu den Standard-Programmiersprachen handelt es sich bei HTML um eine Formatierungssprache. Sie fangen mit einer Textseite an und fügen danach die HTML-Attribute ein, mit denen Sie Netscape mitteilen, wie die Information am Bildschirm angezeigt werden soll.
In den letzten Kapiteln wurden die Rahmenbedingungen für den Aufbau eines eigenen Web-Bereichs besprochen, was jedoch nur den ersten Schritt darstellt. Dieses Kapitel macht Sie mit HTML bekannt und dient als Einführung für den Aufbau Ihrer eigenen Web-Seiten. Neben den HTML-Markierungen lernen Sie die Verwendung der horizontalen Linien, Tabellen und anderen beliebten HTML-Attribute kennen.
Wie bereits im letzten Kapitel erwähnt, gibt es einige Werkzeuge, die Sie beim Aufbau der HTML-Dateien unterstützen. Einige automatisierte HTML-Methoden greifen auf die Drag-and-Drop- und WYSIWYG-Techniken zurück, mit denen die Erstellung von HTML-Dokumenten wesentlich vereinfacht wird. Anstatt sich die verschiedenen HTML-Markierungen und -Codes merken zu müssen, können Sie sich darauf konzentrieren, wie Ihre Web-Seite aussehen soll.
Selbst wenn Sie tiefer in HTML einsteigen möchten, ist ein spezialisierter Editor, der Ihre Arbeit überwacht, immer von Vorteil.
Die HTML-Editoren lassen sich in zwei Gruppen unterteilen: Bei der ersten, zu der z.B. der Microsoft Internet Assistant gehört, handelt es sich um Zusatzprodukte, die in eine bestehende Textverarbeitung integriert werden. Dadurch können Sie sämtliche Vorteile der Textverarbeitung (Rechtschreibprüfung etc.) nutzen. Obwohl die meisten Zusatzanwendungen kostenlos sind, müssen Sie natürlich das zugehörige Basisprogramm besitzen.
Die anderen HTML-Editoren sind Stand-alone-Produkte, die unabhängig von anderen Applikationen arbeiten. Da sich diese Applikationen explizit mit den in HTML benötigten Optionen und Markierungen beschäftigen, erfreuen Sie sich allergrößter Beliebtheit.
Im Prinzip gibt es für jede bestehende Systemplattform einen entsprechenden HTML-Editor. Wenn Sie für Ihren Rechner noch eine Applikation suchen, sollten Sie bei einem Suchdienst wie Yahoo eine Abfrage starten.Im Gegensatz zu den normalen Programmiersprachen wird eine HTML-Seite nicht kompiliert: Alle HTML-Dateien werden im Textformat abgespeichert. Sobald Netscape die ASCII-Datei liest, werden die HTML-Markierungen interpretiert und die Anzeige auf der Grundlage der hinterlegten Charakteristiken aufgebaut.
Ungeachtet dessen, mit welchem Text- oder HTML-Editor Sie Ihre Seite aufgebaut haben, sollten Sie darauf achten, daß die HTML-Seiten grundsätzlich im ASCII- oder Textformat abgespeichert werden. Die reinen HTML-Editoren führen diese Funktion selbständig aus, während man bei einer Textverarbeitung wie Microsoft Word etwas genauer aufpassen muß. Es kann durchaus sein, daß Sie eine HTML-Seite vor deren Veröffentlichung auf dem Web aus dem Word- in das Textformat konvertieren müssen.
ASCII ist ein weltweiter Standardtext, der von allen Computersystemen unterstützt wird. Über diesen Standard kann jeder Rechner eine solche Textdatei lesen und erkennt alle enthaltenen Buchstaben, Zahlen und Zeichen.Standardmäßig sollten alle HTML-Dateien die gleiche Dateierweiterung besitzen, mit der sie vom WWW-Browser als solche erkannt werden. Wenn Sie sich diesen Konventionen anpassen, fällt es Ihnen leichter, andere HTML-Dateien über deren Dateinamen zu erkennen.
Eine HTML-Datei wird normalerweise über die Dateierweiterung .HTM oder .HTML identifiziert. Genauso wie Word die eigenen Dateien anhand der Erweiterung .DOC erkennt, weiß Netscape, daß Dateien mit den Endungen .HTM und .HTML für das World Wide Web bestimmt sind.
In Abbildung 20.1 speichert Lotus Word Pro sämtliche HTML-Dateien mit der Erweiterung .HTM ab.
Abbildung 20.1: Im Dialogfeld Speichern unter achtet Lotus Word Pro 96 darauf, daß die richtige Dateierweiterung zugewiesen wird.
Viele Unix WWW-Browser erwarten, daß in Ihrem HTML-Hauptverzeichnis eine Datei namens INDEX.HTML hinterlegt wird. Der Server zeigt diese Datei normalerweise allen Besuchern an, die sich innerhalb der Verzeichnisse bewegen. Diese Web-Funktion wird immer dann eingesetzt, wenn der Anwender vergißt, eine bestimmte Datei innerhalb des Verzeichnisses anzugeben.Noch sehr viel wichtiger ist, daß andere Dateitypen, die Bilder, Video- und Soundclips etc. enthalten, die richtige Endung besitzen. Andernfalls ist Netscape nicht in der Lage, die Grafiken richtig anzuzeigen oder das richtige Hilfsprogramm für die Interpretation dieser externen Medientypen zu starten. In Tabelle 20.1 finden Sie verschiedene Dateierweiterungen, die Sie im Zusammenhang mit Ihren HTML-Dokumenten verwenden.
Tabelle 20.1: Die Dateierweiterungen, die von Netscape erkannt werden.
|
Dateierweiterung |
Beschreibung |
|
GIF |
Das Standard-Grafikformat, das von Netscape und den meisten WWW-Browsern unterstützt wird. |
|
JPEG (JPG) |
Ein anderes gängiges Standardformat auf dem Web. Dieses Format eignet sich besonders gut für die Rendering-Funktion in Netscape. |
|
TIF |
Ein weniger bekanntes Grafikformat, das nur mit einem externen Hilfsprogramm angesehen werden kann. |
|
AU |
Sound-Clips werden in diesem gängigen Audiodateiformat abgespeichert, das von Netscape erkannt und automatisch interpretiert wird. |
|
WAV |
Das Audiodateiformat unter Microsoft Windows. |
|
MPEG (MPG) |
Das beliebte Videodateiformat, das von denselben Leuten entwickelt wurde, die auch JPEG ins Leben gerufen haben. |
|
MOV (QT) |
Das Videodateiformat von Apple, in dem sehr viele Videos auf dem WWW angeboten werden. |
Über die leicht verständlichen Formatierungsmarkierungen erkennt Netscape, welche Texte als Überschriften dargestellt, wo die Absätze unterteilt und wie bestimmte wichtige Informationen hervorgehoben werden müssen. Normalerweise werden diese Markierungen paarweise gesetzt, wobei der entsprechende Text zwischen den Markierungen eingeschlossen wird. Den Titel einer Seite definiert man wie folgt:
<TITLE>Das ist mein Netscape-Titel</TITLE>
Wenn die HTML-Markierungen paarweise gesetzt werden, gehören sie immer zusammen. Die Endmarkierung ist eine Wiederholung der Anfangsmarkierung, wobei zusätzlich ein Schrägstrich (/) eingefügt wird.
Daneben gibt es einige wenige Markierungen, die ganz alleine stehen. Diese speziellen Markierungen trennen meistens Absätze oder Bilder voneinander ab und haben keinen direkten Einfluß auf die Formatierung der Texte.
Die ersten Markierungen, die Sie in Ihrem HTML-Dokument einsetzen, sind <HTML> und </HTML>. Zwischen diesen Markierungen sollte der gesamte HTML-Code eines WWW-Dokuments stehen. Damit wird angezeigt, daß in dieser Datei die Hypertext Markup Language verwendet wird. Fügen Sie diese Markierung wie folgt in Ihr Dokument ein:
Die WWW-Browser erkennen über die <HTML>-Markierung, daß es sich um ein HTML-Dokument handelt. Die meisten Browser benötigen diese Markierung nicht, aber es hat sich als praktische Regelung bewährt, diese Elemente mit einzubinden.
Bei VRML, Java und anderen zukünftigen WWW-Erweiterungen ist die Verwendung der <HTML>-Markierung ein Muß. Andernfalls erkennt Netscape nicht, welche Programmiersprache in einem Dokument vorhanden ist und kann aufgrund dessen die Inhalte nicht korrekt anzeigen.Sobald Sie die ersten Markierungen in Ihr Dokument eingetragen haben, können Sie mit der Erfassung des Textes beginnen. Über zusätzliche Markierungen sollten Sie Ihre WWW-Seiten in zwei verschiedene Bereiche unterteilen: in den Kopf- (Head) und den Hauptteil (Body).
Mit Hilfe dieser Bereichsmarkierungen erkennt Netscape, daß innerhalb eines Dokuments zwei Komponenten enthalten sind. Damit kann die eigentliche Information schneller dargestellt werden, und gleichzeitig ist die Datei besser strukturiert.
Mit der <HEAD>-Markierung leiten Sie den Header eines HTML-Dokuments ein. Standardmäßig enthält dieser Teil den Titel, die Indexinformationen und spezielle Einstellungen, die für die gesamte Seite gelten.
Genauso wie andere Container-Markierungen schließen diese Markierungen nur wenige Zeilen in Ihrer Datei ein.
Netscape nutzt diese Informationen während der Übertragung der Texte und Grafiken als Referenz. Damit kann Netscape bereits den Titel anzeigen, bevor das eigentliche Dokument am Bildschirm erscheint.
Setzen Sie die <HEAD>-Markierungen innerhalb der <HTML>-Markierungen ein:
<HTML>
<HEAD>
</HEAD>
</HTML>
Wenn Sie die in Netscape vorhandenen Indizierfunktionen nutzen möchten, sollten Sie das Schlüsselwort ISINDEX in den Dokument-Header einbinden. Damit kann Netscape die Dokumente komplett indizieren und automatisch durchsuchen. Diese Indexfunktion wird von dem WWW-Server gesteuert, auf dem Ihr Web-Bereich installiert ist.Ich habe bereits eine ganze Reihe von HTML-Dokumenten erstellt, aber jedesmal vergessen, die <HTML>-Markierung am Ende des Dokuments wieder zu schließen. Netscape scheint damit keine Probleme zu haben. Gilt das auch für alle anderen Browser?
Derzeit wird die <HTML>-Markierung nicht zwingend benötigt. Wenn Netscape das Ende Ihres Dokuments erreicht und keine Informationen mehr vorfindet, kümmert sich die Anwendung nicht darum, ob die <HTML>-Markierung wieder geschlossen wurde. Auch andere WWW-Browser haben damit kein Problem. Trotzdem sollten Sie darauf achten, daß eine geöffnete Markierung wieder geschlossen wird.
Die Markierungen <BODY> und </BODY> begrenzen den Hauptteil eines HTML-Dokuments. Diese Markierungen fassen den größten Teil Ihrer Datei ein. Obwohl die <BODY>-Markierungen keinen Einfluß auf die Anzeige der Informationen in Netscape haben, unterstützen sie die Strukturierung der Datei.
Wenn Sie die <BODY>-Markierungen in Ihrer Seite hinterlegt haben, besitzen Sie bereits drei Markierungstypen, ohne daß bisher irgendwelche Informationen angezeigt wurden:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Den ersten Text, den Sie überhaupt in Ihr HTML-Dokument eingeben, ist der Titel. Genau wie bei einem Buch sollte der Titel genaue Auskunft über den Inhalt des Dokuments geben.
Ihr HTML-Titel ist die erste Information, die ein Besucher Ihrer WWW-Seite zu Gesicht bekommt. Bei Netscape erscheint der Titel in der Titelleiste, während der Rest des Dokuments noch geladen wird. Abbildung 20.2 zeigt, an welcher Stelle Netscape den HTML-Titel anzeigt.
Abbildung 20.2: Der angegebene Titel erscheint in der Netscape Titelleiste, die quer über den ganzen Bildschirm verläuft.
Neben der Anzeige in der Titelleiste werden diese Informationen z.B zusammen mit den Lesezeichen abgespeichert.
Um einen Titel in ein HTML-Dokument einzufügen, benötigt man die <TITLE>- und die </TITLE>-Markierung. Diese werden in den Kopfteil der HTML-Datei eingebunden, wobei der Text beliebig lang sein kann. Um einem Dokument den Titel »The Virtual Translators« zu geben, fügen Sie folgende Zeile in Ihr WWW-Dokument ein:
<TITLE>The Virtual Translators </TITLE>
Genau wie bei einem Buch, sollte der Titel des HTML-Dokuments sorgfältig ausgesucht werden, da man über dieses Element die Aufmerksamkeit der Besucher auf sich zieht. Bei der Auswahl des Titels sollten Sie folgende Dinge beachten:
Ganz ähnlich wie der Dokumenttitel dient die Überschrift als Einführung in eine WWW-Seite. Für die Gestaltung der Überschrift stehen Ihnen sechs verschiedene Größen zur Verfügung, was Ihnen die Möglichkeit gibt, dieses markante Element besonders effektvoll zu gestalten.
Um eine Überschrift der Größe 1 zu definieren, setzen Sie den Text zwischen die <H1>- und die </H1>-Markierung. Abbildung 20.3 zeigt, wie die folgende Markierung in Netscape angezeigt wird:
<H1>Dewey beats Truman</H1>
Abbildung 20.3: Die Überschriften in einem WWW-Dokument ziehen das Auge magisch an.
Die Größe der Überschriften reicht von 1 (der größten) bis sechs und kann mit Hilfe der zugehörigen Markierungen im HTML-Dokument plaziert werden.
Abbildung 20.4 vergleicht die sechs verschiedenen Überschriftengrößen und zeigt, wie diese in einer Netscape-Seite aussehen.
Gibt es irgendeine Möglichkeit, in meine HTML-Datei mehr als eine Überschrift einzufügen?
Standardmäßig setzen die meisten WWW-Entwickler in den oberen Teil des Dokuments eine Überschrift mit der Größe 1 ein. Diese Überschrift ist sehr viel größer und einfacher zu lesen als der Titel, der in der Titelleiste von Netscape angezeigt wird. Um unnötige Redundanzen zu vermeiden, sollten Sie darauf achten, daß der Titel und die Überschrift nicht identisch sind.
Abbildung 20.4: Überschriften in allen Größen.
Sie wissen vielleicht, wie eine Textverarbeitung funktioniert. Nachdem Sie einige Sätze eingegeben haben, drücken Sie auf die (Eingabetaste) und beginnen in einer neuen Zeile. Dadurch teilen Sie Ihren Text in verschiedene Absätze auf, wodurch der Leser die Inhalte besser aufnehmen kann.
Die HTML-Formatierungen funktionieren etwas anders. Innerhalb der HTML-Datei können Sie die Texte mit Hilfe der (Eingabetaste) oder der Tabulatoren besser lesbar machen, doch diese Formatangaben werden ohne die Einbindung der richtigen HTML-Markierungen im Browser nicht dargestellt.
Abbildung 20.5 zeigt einen Text, der keine Absatz-Markierungen enthält. In Abbildung 20.6 wurde derselbe Text formatiert.
Mit den Absatz-Markierungen können Sie folgendes machen:
Abbildung 20.5: Diese Seite ist so gut wie unleserlich.
Abbildung 20.6: Mit wenigen Markierungen ist der Text bereits besser lesbar.
In den meisten Fällen wird für die Definition eines Absatzes innerhalb einer WWW-Seite die <P>-Markierung verwendet. Diese Markierung setzt zwischen zwei Informationseinheiten eine Leerzeile. Diese Markierung ist keine Container-Markierung und kann überall innerhalb des Dokuments eingesetzt werden.
Abbildung 20.7 zeigt, wie die <P>-Markierung die nachfolgende Information formatiert:
Normalerweise teilen Sie einen Text mit Hilfe der <P>-Markierung in verschiedene Absätze auf.
<P>
Manchmal setzen Sie die <P> Absatz- <P> -Markierung <P> auch <P> dafür <P> ein <P> um <P> Textteile optisch <P> voneinander abzusetzen.
Abbildung 20.7: Die <P>-Markierung wird zur Definition eines Absatzes verwendet.
Im Gegensatz zu den meisten anderen HTML-Markierungen kann die <P>-Markierung alleine stehen oder wie eine Container-Markierung verwendet werden. Anfangs verlangten einige WWW-Browser, daß jeder Absatz von diesen Markierungen eingeschlossen war. Weil die Endmarkierung sehr oft vergessen wurde, einigte man sich darauf, daß nur mehr die Anfangsmarkierung erforderlich ist.Ebenso wie die Absatz-Markierung wird der Zeilenumbruch zur korrekten Plazierung des Textes innerhalb einer Seite eingesetzt. Der einzige Unterschied besteht darin, daß die <BR>-Markierung den Text in die nächste Zeile setzt und keine Leerzeile einfügt.
Über diese Markierung teilen Sie dem Browser mit, wo eine Zeile bei der Anzeige am Bildschirm umgebrochen werden kann. Abbildung 20.8 zeigt, wie der folgende HTML-Code in Netscape dargestellt wird:
<H2>Was der Student so zu sich nimmt</H2>
Milch <BR>
Schokolade <BR>
Pizza <BR>
Spaghetti <BR>
Bier <BR>
Abbildung 20.8: Die <BR>-Markierung erleichtert die Auflistung in aufeinanderfolgenden Zeilen.
Die Überschriften-Markierung enthält automatisch einen Zeilenumbruch. Dabei wird keine Rücksicht darauf genommen, ob explizit eine Absatz-Markierung oder ein Zeilenumbruch angegeben wurde.HTML bietet auch zwei Erweiterungen der <BR>-Markierung an.
Eine andere Möglichkeit zur Aufteilung eines HTML-Textes in einzelne Absätze ist die <HR>-Markierung, mit der eine horizontale Linie in ein Dokument eingefügt wird. Diese Linie zieht sich quer über den ganzen Bildschirm.
Um eine solche Trennlinie in ein WWW-Dokument einzufügen, geben Sie lediglich die <HR>-Markierung ein. Netscape unterstützt eine ganze Reihe von Optionen, mit denen man das Erscheinungsbild dieser Linie nach Belieben verändern kann.
Mit dieser Markierung wird oftmals der Kopfteil vom Hauptteil und dieser wiederum vom unteren Teil des Dokuments angezeigt. Abbildung 20.9 zeigt, wie die horizontale Linie ein WWW-Dokument in verschiedene Bereiche aufteilt.
Abbildung 20.9: Die <HR>-Markierung teilt eine WWW-Seite in mehrere Bereiche auf.
Ohne die notwendigen Formatierungsanweisungen kümmert sich Netscape nicht darum, wie der Text in der aktuellen HTML-Datei aussieht.
Um dies zu umgehen, kann man mit Hilfe der Container-Markierungen <PRE> und </PRE> festlegen, daß ein bereits formatierter Text genauso angezeigt werden soll, wie in der HTML-Datei hinterlegt ist.
Sämtliche Tabulatoren, Zeilenumbrüche und Leerzeichen werden so dargestellt, wie sie innerhalb der Markierungen <PRE>- und </PRE> definiert sind. Damit kann der Entwickler Listen, Tabellen und speziell formatierte Informationen am Bildschirm anzeigen lassen, ohne sich groß mit den verschiedenen HTML-Markierungen herumschlagen zu müssen.
In Abbildung 20.10 sehen Sie, wie der nachfolgende Text dargestellt wird:
<PRE>
<H2>Was kostet die Hochzeit?</H2>
<B> Familie der Braut Familie des Bräutigams</B>
Empfang xxx
Alkohol xxx
Blumen xxx xxx
</PRE>
Abbildung 20.10: Mit einem vorformatierten Text ersparen Sie sich die Mühe, alle HTML-Markierungen einzufügen.
Bei der Anzeige eines formatierten Textes stellt Netscape sämtliche Inhalte mit einem nicht proportionalen Zeichensatz dar. Damit stellt Netscape sicher, daß sämtliche Textelemente korrekt dargestellt werden.Die Formatierung von Absätzen und bestimmten Textteilen am Bildschirm kann ein echter Horror sein. Um die verschiedenen Absätze besser zu strukturieren, müssen Sie sich zusätzlich mit Formatierungen wie Fettschrift, Kursivschrift, zentriertem Text und ähnlichem herumschlagen.
Nachfolgend werden die HTML-Markierungen erklärt, die für diese Formatierungen eingesetzt werden.
Wie oft haben Sie schon einen Absatz eingegeben, in dem Sie ein bestimmtes Wort oder einen Satz besonders hervorheben wollten? Dabei kann es sich um einen speziellen Ausdruck oder den Schwerpunkt des Absatzes handelt. Wie dem auch sei – Sie möchten auf alle Fälle, daß ein bestimmtes Wort auf Ihrer WWW-Seite hervorsticht.
Wie im letzten Kapitel bereits erwähnt wurde, tobt zwischen den HTML-Entwicklern ein Glaubenskampf darüber, ob man die logische oder die physikalische Formatierung bevorzugen soll. Nirgends kann diese Diskussion besser nachvollzogen werden als bei der Entscheidung, wie eine bestimmte Hervorhebung mit Kursivschrift oder Fettschrift erfolgen soll. Die Vertreter der physikalischen Front bevorzugen in diesem Fall die Markierungen <I> und <B>.Die Vertreter der logischen Fraktion machen sich für die Markierungen <STRONG> und <EM> stark. Allgemein geht der Trend dahin, in solchen Fällen die Markierungen <I> und <B> einzusetzen.
In Abbildung 20.11 können Sie nachvollziehen, wie Netscape die Textelemente hervorhebt, die mit den Markierungen <B> bzw. <STRONG>gekennzeichnet wurden.
Abbildung 20.11: Fettgedruckte Worte stechen aus dem normalen Text hervor.
Eine andere Möglichkeit zur Formatierung eines Textes bieten die Markierungen <I> und </I>, mit denen die eingeschlossenen Zeichen in Kursivschrift gesetzt werden.
Über die kursive Formatierung können bestimmte Worte oder Sätze hervorgehoben oder Zitate eingebunden werden. In Abbildung 20.12 finden Sie ein Beispiel für einen Text, der mit den Markierungen <I> und <EM> formatiert wurde:
Nach dem Lesen von <I>The Body Farm</I> von Patricia Cornwell, kaufte ich mir sofort alle anderen Bücher. <EM>Postmortem</EM> und <I>All that remains</I> gehören zu meinen Lieblingskrimis!
Die kursive Formatierung kann entweder allein oder zusammen mit anderen Formatierungsmarkierungen verwendet werden. So ist es durchaus möglich, einen Text fett und kursiv darzustellen. Achten Sie vor allem darauf, daß sämtliche Container-Markierungen am Ende wieder geschlossen werden, da sonst ungewollte Effekte auftreten können.Einige ältere Browser unterstützen die rekursiven Formatierungsmarkierungen nicht. Wenn Sie einen Text fett und gleichzeitig kursiv formatieren möchten, akzeptieren die älteren Mosaic- und Netscape-Versionen nur die erste Markierung und ignorieren alle weiteren Angaben.Abbildung 20.12: Die kursive Formatierung bewährt sich insbesondere beim Verweis auf andere Werke oder bei Zitaten.
Eine der Optionen, die bei der Formatierung relativ selten eingesetzt werden, ist die <BLINK>-Markierung. Mit dieser Definition können Sie bestimmte Textteile innerhalb einer WWW-Seite blinken lassen und somit die Aufmerksamkeit des Besuchers auf diese Elemente lenken.
Um ein bestimmtes Textelement als blinkend zu definieren, setzen Sie es einfach zwischen die <BLINK>-Markierungen:
<BLINK> <H1> Noch´n Buch</H1> </BLINK>
Auf blinkende Texte sollten Sie nach Möglichkeit verzichten, da diese Funktion für den Besucher nervtötend sein kann.Eine weitere HTML-Markierung erlaubt es Ihnen, Überschriften und beliebige Texte zu zentrieren. Mit den Container-Markierungen <CENTER> und </CENTER> erscheinen die so markierten Textelemente immer in der Mitte des Bildschirms.
Diese Flexibilität gibt dem Entwickler einer WWW-Seite die Möglichkeit, das Seitenlayout zu verbessern und verschiedene Designtechniken einzusetzen.
In Abbildung 20.13 sehen Sie das vorhergehende Beispiel, bei dem die Hauptüberschrift zentriert wurde.
Abbildung 20.13: Durch die Zentrierung können bestimmte Elemente einer Seite besser hervorgehoben werden.
Neben den kursiven und den fettgedruckten Texten unterstützt HTML verschiedene andere Formatierungsmarkierungen, die in Tabelle 20.2 zusammengefaßt wurden.
Tabelle 20.2: Zusätzliche logische Markierungen
|
HTML-Markierung |
Beschreibung |
|
<BIG> </BIG> |
Stellt den ausgewählten Text logisch größer als die Textelemente dar, die voran- bzw. nachgestellt sind. |
|
<SMALL> </SMALL> |
Macht den markierten Text im Vergleich zu den anderen Textelementen kleiner. |
|
<CITE> </CITE> |
Eine beliebte Möglichkeit, um andere Quellen zu zitieren. |
|
<TT> </TT> |
Ein nichtproportionaler Zeichensatz, der an eine Schreibmaschine erinnert. |
|
<BLOCKQUOTE> </BLOCKQUOTE> |
Mit diesen Markierungen werden Auszüge aus anderen Werken gekennzeichnet. |
Jeder macht sich irgendwann eine Liste, in der Informationen in einer bestimmten Reihenfolge aufgeführt sind. Dabei kann es sich um eine Einkaufsliste, eine Liste mit Aufgaben oder um einen Merkzettel handeln. Nachfolgend finden Sie eine Reihe von Argumenten, die für die Einbindung von Listen in Ihre HTML-Dokumente sprechen:
Mit den verschiedenen Listentypen bekommen Sie so gut wie jede Situation in den Griff. Nachfolgend werden Sie die Unterschiede zwischen unsortierten, geordneten und definierten Listen und die dazugehörigen HTML-Markierungen kennenlernen.
In Abbildung 20.14 finden Sie ein Beispiel für eine Liste.
Abbildung 20.14: Eine einfache unsortierte Liste finden Sie beinahe auf jeder WWW-Seite.
Um mit HTML eine Liste anzulegen, reicht es nicht aus, nur die entsprechenden Container-Markierungen einzubinden. Da verschiedene HTML-Markierungen bei der Definition einer Liste zusammengehören, müssen Sie die verschiedenen Elemente einer Liste auseinanderhalten. Nachfolgend sehen Sie den HTML-Quellcode für eine Liste:
<B>Eine Zusammenfassung der Dinge, die mich interessieren:
</B></LH>
<LI> Groupware (Lotus Notes, Collabra)
<LI> Online Informationsdienste (CompuServe, AOL, ro-online)
<LI> Bücher
<LI> HTML – Projekte
<LI> Broadway Musicals
</UL>
Als nächstes erfahren Sie, wie Sie die verschiedenen Listentypen in ein HTML-Dokument einbinden.
Auf dem WWW treffen Sie am häufigsten die unsortierten Listen an. Bei diesem Listentyp wird vor jedem Eintrag ein Markierungspunkt gesetzt.
Für die Definition einer unsortierten Liste führen Sie folgende Schritte aus:
1. Fügen Sie als erstes die Markierungen <UL> und </UL> in Ihr HTML-Dokument ein.
Unsere Live-Gäste am Samstag abend</LH>
</UL>
<LI> Chevy Chase
Unsere Live-Gäste am Samstag abend</LH>
<LI> Chevy Chase
<LI> Steve Martin
<LI> Jim Belushi
<LI> Dan Akroyd
</UL>
Abbildung 20.15: Eine einfache unsortierte Liste ist in wenigen Minuten angelegt.
Ähnlich wie eine unsortierte Liste, bietet eine numerierte Liste die verschiedenen Punkte in einer strukturierten Reihenfolge an. Der wichtigste Unterschied zwischen diesen beiden Listentypen ist, daß bei der numerierten Liste vor jeden Punkt automatisch eine Zahl gesetzt wird.
Der Aufbau einer numerierten Liste unterscheidet sich im Prinzip kaum von dem einer unsortierten Liste:
1. Fügen Sie als erstes die Markierung <OL> und </OL> in Ihr Dokument ein.
<OL>
Die besten Baseball-Teams</LH>
</OL>
<LI>Cincinnati Reds
<OL>
Die besten Baseball-Teams</LH>
<LI>Cincinnati Reds
<LI>Seattle Mariners
<LI>Chicago Cubs
</OL>
Bei den numerierten Listen können Sie auch einen Buchstaben oder ein römisches Numeral setzen. Um diese Netscape-Option einzubinden, fügen Sie in die <OL>-Markierung das Schlüsselwort TYPE= ein. Für die römischen Numerale verwenden Sie folgende Definition:
Im Gegensatz zu den anderen Listentypen besteht bei einer Definitionsliste jeder Eintrag aus zwei Elementen. Ein solcher Eintrag ist mit einem Lexikon zu vergleichen, wo am Anfang der Begriff und danach die zugehörige Definition steht.
Um eine solche Liste in Ihr HTML-Dokument einzufügen, führen Sie folgende Schritte aus:
1. Fügen Sie als erstes die Markierungen <DL> und </DL> ein.
<DL>
Wichtige Web-Terminologien</LH>
</DL>
<DT> HTML
<DD> Hyper Text Markup Language
<DL>
Wichtige Web-Begriffe </LH>
<DT> HTML
<DD> Hyper Text Markup Language
<DT> WWW
<DD> World Wide Web
<DT> VRML
<DD> Virtual Reality Markup Language
</DL>
Achten Sie darauf, daß sowohl der Begriff als auch die zugehörige Definition jeweils in eine eigene Zeile gesetzt werden.
Wie bei den meisten anderen HTML-Elementen können Sie auch Listen innerhalb einer bestehenden Liste definieren. Diese verschachtelten Listen sind erlaubt, obwohl man bei der Implementierung darauf achten muß, daß die verschiedenen Listenelemente korrekt definiert werden.
Um eine Liste in eine andere Liste einzubetten, bauen Sie zuerst die übergeordnete Liste auf:
<OL>
Die besten Baseball-Teams</LH>
<LI>Cincinnati Reds
<LI>Seattle Mariners
<LI>Chicago Cubs
</OL>
Danach fügen Sie z.B. die </UL>-Markierung in diese Liste ein. Die Darstellung der nachfolgenden Liste finden Sie in Abbildung 20.18.
<OL>
<B>Die besten Baseball-Teams</B></LH>
<LI>Cincinnati Reds
Die besten Spieler </LH>
<LI>Smiley
<LI>Larkin
<LI>Santiago
</UL>
<LI>Seattle Mariners
Die besten Spieler </LH>
<LI>Johnson
<LI>The Kid
<LI>Buhner
</UL>
<LI>Chicago Cubs
Die besten Spieler </LH>
<LI>Sosa
<LI>Grace
</UL>
</OL>
Abbildung 20.16: Diese Definitionsliste ist nur ein Beispiel für die Flexibilität dieses Listentyps.
Abbildung 20.17: Bei den verschachtelten Listen gelten die gleichen Regeln wie bei den eindimensionalen Listen.
In der oben aufgeführten Liste fügte ich in der Überschrift die <B>-Markierungen ein. Damit wird die Aufmerksamkeit des Lesers als erstes auf dieses Element gelenkt. Die Verwendung dieser Markierung in den Listenüberschriften und innerhalb der Liste ist durchaus gebräuchlich.In der Programmierung stellen die Kommentare ein wichtiges Element dar, mit dem die Transparenz des Quellcodes erhöht wird. Da es nach Monaten oder Jahren fast unmöglich ist, sich daran zu erinnern, warum an einer Stelle ein bestimmtes Format gewählt wurde, sind die Kommentare auch bei HTML nicht wegzudenken.
Kommentare sind Informationseinheiten, die ein Besucher nur dann sehen kann, wenn er den Quellcode einer Seite anschaut. Die Standardkommentare sollten darauf hinweisen, wann die Datei zum letzten Mal aktualisiert wurde, wer die Änderungen vornahm und welche Modifikationen durchgeführt wurden. Da HTML ständig weiterentwickelt wird, kann es sinnvoll sein, die Funktionsweise einiger Markierungen zu dokumentieren.
Um einen Kommentar in Ihr Dokument einzufügen, setzen Sie die entsprechenden Informationen zwischen <! und ->.
<!- Meine numerierte Baseball-Liste ->
<OL>
Die besten Baseball-Teams</LH>
<LI>Cincinnati Reds
<LI>Seattle Mariners
<LI>Chicago Cubs
</OL>
Achten Sie darauf, daß Sie weder private noch geschäftliche Informationen preisgeben, da der Quellcode vom Besucher eingesehen werden kann.Jetzt, wo der HTML-Crashkurs endgültig zu Ende ist, sehen wir uns die verschiedenen HTML-Markierungen noch einmal im Zusammenhang an. Als Beispiel erstellen wir ein HTML-Dokument für ein fiktives Restaurant und versuchen, alle uns bekannten HTML-Elemente zu verwenden.
1. Als erstes fügen wir die Markierungen ein, die in jedem HTML-Dokument vorhanden sein müssen:
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
<TITLE>OrangeBee's amerikanische Küche </TITLE>
<BODY>
<H1> OrangeBee's fantastische amerikanische Küche auf dem Web</
</BODY>
<HTML>
<HEAD> <TITLE> OrangeBee's amerikanische Küche </TITLE> </HEAD>
<BODY>
<CENTER><H1> OrangeBee's fantastische amerikanische Küche auf dem Web </H1></CENTER>
<HR>
Seit 1991 hat OrangeBee´s die amerikanische Küche auf den Kopf gestellt. Wir bieten
eine große Auswahl an Menüs, die teilweise weniger als 5 Gramm Fett enthalten.
<P>
<B> Kommen Sie einfach in eines unserer Restaurants: </B><BR>
Morse Road <BR>
Great Southern Shopping Center <BR>
Bexley <BR>
<HR>
<!- Erstellt von OrangeBee's 1995 ->
</BODY>
</HTM
<DL>
<B> OrangeBee's berühmte Speisekarte</B></LH>
<DT> Shrimp Cocktail
<DD> <I>Diese hervorragenden Shrimps werden mit einer feurigen Soße serviert.</I>
<DT> Fettfreies Caesar-Dressing
<DD> <I>Unser hausgemachtes fettfreies Caesar-Dressing macht diesen Salat besonders
bekömmlich.</I>
<DT>Steak und Eier
<DD> <I>Unser Cholesterinkiller. Dieses Gericht enthält alles, was Ihrem Hausarzt
den Schweiß auf die Stirn treibt.</I>
</DL>
In Abbildung 20.19 sehen Sie die endgültige Seite.
Beim Aufbau einer HTML-Seite verwenden die meisten HTML-Entwickler eine Vorlage. In dieser Vorlage sind bereits alle Standardelemente enthalten. Durch den Ansatz einer solchen Vorlage können auch sämtliche Seiten einheitlich gestaltet werden. Sobald Sie eine eigene Dokumentvorlage erstellt haben, müssen Sie nur noch die Texte eingeben. Damit vereinfachen Sie die Abläufe und stellen sicher, daß keine Markierungen vergessen werden.Abbildung 20.18: OrangeBee´s besitzt jetzt eine einfache, aber gut aussehende Web-Seite.
(c) 1997 Que
