Was HTML ist ... und was nicht
Programme, die Ihnen beim Schreiben von HTML helfen
Strukturierung Ihres HTML-Codes
Listen, Listen und nochmals Listen
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).
Abbildung 3.1: |
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/:
Abbildung 3.2: |
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.
Abbildung 3.3: |
▄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.
Abbildung 3.4: |
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>
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).
<TITLE>Poisonous Plants of North America</TITLE>
Abbildung 3.5: |
Abbildung 3.6: |
▄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):
<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>
Abbildung 3.7: |
Abbildung 3.8: |
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:
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):
<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>
Abbildung 3.9: |
Abbildung 3.10: |
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:
<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>
Abbildung 3.11: |
Abbildung 3.12: |
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.
<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>
Abbildung 3.13: |
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.
<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>
Abbildung 3.14: |
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:
<P>The three Erinyes, or Furies,
were:</P>
<UL>
<LI>Tisiphone
<LI>Megaera
<LI>Alecto
</UL>
Abbildung 3.15: |
Abbildung 3.16: |
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).
<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>
Abbildung 3.17: |
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:
<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>
Abbildung 3.18: |
Abbildung 3.19: |
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ⁿ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):
<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>
Abbildung 3.20: |
Abbildung 3.21: |
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:
<H1>Peppers</H1>
<UL>
<LI>Bell
<LI>Chile
<UL>
<LI>Serrano
<LI>Jalapeno
<LI>Habanero
<LI>Anaheim
</UL>
<LI>Szechuan
<LI>Cayenne
</UL>
Abbildung 3.22: |
Abbildung 3.23: |
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:
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?
Abbildung 3.24: |
Abbildung 3.25: |
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 |
Das gesamte HTML-Dokument |
||
Der Header oder Vorspann des |
||
Der restliche Inhalt des HTML-Dokuments |
||
Der Titel des HTML-Dokuments |
||
▄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 |
|
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. |
|
<!- ... -> |
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>
Ist das erlaubt?
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:
<LI>Und dann sagte das Huhn: ╗Ein hartes Ei, bitte.½
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
