Fachwörterlexikon
Seiten für das World Wide Web werden in Hyper Text Markup Language (HTML) auf einem Server bereitgestellt und sind von dort weltweit abzufragen. Hypertext ist eine Textform, die in jedem Lexikon verwendet wird, sie besteht aus Informationen und Querverweisen. Die Querverweise werden in Web Dokumenten als Links bezeichnet, sie beinhalten die Anschrift (URL) einer Textstelle oder eines anderen Dokumentes irgendwo im Internet. Mit dieser Arbeit möchte ich Ihnen ermöglichen, ein einfaches Dokument für das Web zu erstellen, ich werde dabei aber nicht auf Java und Frames eingehen (Lesen Sie hierzu den Abschnitt Nützliche Hinweise).
HTML besteht aus Auszeichnungsmerkmalen (TAGS) die von einem Betrachterprogramm (Browser) interpretiert und angezeigt werden. So sind HTML Dokumente plattformunabhängig und weltweit auf Systemen wie Windows, Mac OS und UNIX zu betrachten. Hier entstehen leider aber auch Probleme, auf die ich zu einem späteren Zeitpunkt eingehen werde.
HTML Dokumente sind reine ASCII (American Standart Code for Information Interchange) Dateien, die mit jedem Textprogramm erstellt werden können. Ich möchte davon abraten, für die ersten HTML Versuche einen speziellen Editor zu verwenden, der einem zwar das lästige Eingeben der Auszeichnungen erspart, aber auch in der Gestaltung, gerade wenn man sich noch nicht perfekt auskennt, sehr stark einschränkt. Zusätzlich zu einem Texteditor sollte man einen Browser auf seinem System installiert haben, um das Aussehen der Seite überprüfen zu können. Da die Seiten von jedem Browser unterschiedlich angezeigt werden, ist es sogar sinnvoll, mehrere Browser für die Überprüfung der Web Page heranzuziehen.
Ein HTML Source besteht immer aus zwei Teilen, dem Kopf und dem Hauptteil. Im Kopf steht der Name der Seite, der später in der Titelleiste und den Bookmarks (Lesezeichen) des Browsers erscheint, im Body findet der Rest Platz. Hier stehen der anzuzeigende Text und die Auszeichnungen (TAGS). Die TAGS werden im Dokument immer in Kleiner- / Größerzeichen eingeschlossen. Der Text, auf den sich die Auszeichnungen beziehen, wird zwischen dem Anfangs- und dem EndTAG geschrieben. Die beiden TAGS unterscheiden sich durch den Schrägstrich: <HTML> und </HTML>
| <HTML> | ; Dokument in HTML |
| <HEAD> | |
| <TITLE>Ihr erstes Dokument</TITLE> | ; Erscheint in der Titelleiste |
| </HEAD> | |
| <BODY> | ; Anfang des Hauptteils |
| ... | |
| </BODY> | |
| </HTML> | ; Ende des Dokuments |
Die TAGS bestimmen grundsätzlich nur die Art des Textes, wie z.B. Überschrift der Ebene 1 (H1), die jeder Browser dann auf seine Art darstellt. Einen Einfluß auf z.B. die Schriftart ist mit einfachen Mitteln nicht möglich. Bei der Auswahl des Titels für die eigene Seite sollte man etwas Sorgfalt walten lassen, denn hiermit wird ein Dokument z.B. in den Bookmarks identifiziert. Er sollte möglichst den Inhalt komplett beschreiben aber auch nicht zu lang sein. Sinnvoll wäre etwa:
<TITEL>Erstellen einfacher HTML Dokumente</TITEL>
Eher ungeeignet sind Titel wie:<TITEL>Teil Zwei</TITEL>
<TITEL>Eindrücke vom zweiten Treffen der vierten Konferenz des Komitees zum Schutz der englischen Rosen, vierter Tag, nach dem Essen</TITEL>
|
Abb. 3.1: Die Anzeige des Titels mit dem Netscape Navigator. |
Überschriften sind bei HTML in Ebenen eingeteilt, das heißt je niedriger die Ebene um so wichtiger ist die Überschrift und um so auffallender, meist größer, wird sie vom Browser dargestellt. Es gibt sechs Ebenen, die wie folgt gekennzeichnet werden:
<H1>Überschrift Ebene 1</H1>
<H2>Überschrift Ebene 2</H2>
...
<H6>Überschrift Ebene 6</H6>
Jede Überschrift wird am Anfang mit dem Tag <Hx> (x von 1 bis 6) und am Ende mit dem schließenden Tag </Hx> gekennzeichnet.
Absätze werden in Web Dokumenten zwischen die TAGS <P> und </P> eingeschlossen, sie haben auf den Text selber keinen Einfluß. Die Auszeichnungen rufen nur einen Abstand zum vorhergegangenen Absatz hervor. Der Browser ignoriert bei der Interpretation des Source Codes etwaige Formatierungen des Textes wie z.B. Absatzmarken oder Einrückungen mit Leerzeichen. Sie müssen also um Absätze zu trennen das <P> TAG verwenden. Um die Zeilenlänge braucht man sich auch keine Gedanken zu machen, denn der Browser führt bei der Anzeige einen automatischen Zeilenumbruch durch, um unterschiedliche Bildschirmauflösungen auszugleichen. Leerzeichen und Absatzmarken sollten Sie deshalb nur verwenden, um Ihren Source Codes übersichtlicher zu gestalten. Einfache Leerzeilen erreichen Sie mit <BR>.
 |
Abb. 4.1: Darstellung der verschiedenen Überschriften im Netscape Navigator. |
HTML Level 3 spezifiziert drei Listenarten, die eine ähnliche Struktur haben. Die gesamte Liste ist in Auszeichnungen eingefaßt (z.B. <OL> und </OL>) und jeder Listenpunkt erhält eine einseitige (nur ein AnfangsTAG) Kennzeichnung, <DT> <DD> und <LI>. Bei den Listen sollte man besonders auf eine gut leserliche Form des Source Codes achten, um sich bei Änderungen zurecht finden zu können.
Vor und nach einer Gliederung müssen Sie die TAGS für eine numerierte Liste (<OL> und </OL>) setzen. Bei Ordered Lists markieren Sie die einzelnen Gliederungspunkte mit der <LI> Kennung (LI = List Item), die Numerierung übernimmt der Browser für Sie. Im Source Code könnte eine Gliederung folgendermaßen aussehen:
| <OL> | ; Beginn der numerierten Liste |
| <LI>Erster Punkt | ; Listenpunkt |
| <LI>Zweiter Punkt | |
| <LI>Dritter Punkt | |
| </OL> | ; Ende |
Listen ohne Numerierung werden ähnlich wie Gliederungen ausgezeichnet, nur verwendet man anstatt <OL> jetzt <UL> (UL = Unordered List). Der Browser setzt nun anstelle der Nummern dicke Punkte zur Kennzeichnung. Oft ist es auch sinnvoll, Gliederungen und ungeordnete Listen zu kombinieren, was auch problemlos machbar ist, wenn man korrekt schachtelt. Das heißt die zuerst geöffnete Listenart muß als letztes wieder geschlossen werden. folgendes Beispiel wird das verdeutlichen:
| <OL> | ; Beginn der numerierten Liste |
| <LI>Erster Punkt | ; Erster Listenpunkt der numerierten Liste |
| <UL> | ; Anfang der ungeordneten Liste |
| <LI>Erster Unterpunkt | ; Listenpunkt der ungeordneten Liste |
| <LI>Zweiter Unterpunkt | |
| </UL> | ; Ende der ersten ungeordneten Liste |
| <LI>Zweiter Punkt | |
| <OL> | ; Anfang einer zweiten geordneten Liste |
| <LI>Erster Unterpunkt | |
| <LI>Zweiter Unterpunkt | |
| </OL> | |
| </OL> | ; Ende der numerierten List |
Definitions - Listen werden mit <DL> und </DL> (DL = Definition List) eingeschlossen und unterscheiden sich somit nur bei den Listenpunkten etwas, die man hier in Stichwort und Definition trennt. Die Glossar - Listen gibt es auch in einer kompakteren Form, die aber nur von wenigen Browser umgesetzt wird. Man kennzeichnet sie mit dem Attribut COMPACT im AnfangsTAG (<DL COMPACT>). Hier werden etwa Schrift und Einzüge verkleinert.
 |
Abb. 5.1: Der Source Code einer Definition List im Netscape Browser. |
 |
Abb. 5.2:Verschiedene Listen im Fenster des Browsers. |
Hyperlinks sind wahrscheinlich die wichtigsten Bestandteile in einem HTML Dokument. Mit ihrer Hilfe ist es möglich, auf der Suche nach Information mit wenigen Mausklicks um die Welt zu reisen oder auch nur an eine bestimmte Stelle im Dokument zu springen. Verknüpfungen werden von vielen Browsern standardmäßig blau und unterstrichen dargestellt, aber jeder User kann diese Einstellung nach eigenen Vorstellungen ändern. Eine Beeinflussung der Farbe durch den HTML Autor sollte man der Eindeutigkeit halber vermeiden.
Die TAGS der Hyperlinks lauten <A HREF = Adresse> und </A> wobei Adresse hier für den URL eines anderen HTML Dokumentes, auf irgendeinem Server steht oder eine Textstelle im eigenen Dokument meint. Bei der Adresse unterscheidet man relative und absolute Pfadnamen. Absolute Pfandnamen kennzeichnen sich dadurch, daß sie den Pfad ab der untersten Ebene angeben, wie z.B. einen Laufwerksbuchstaben oder einen Servernamen. Letzteres ist für eine Verbindung zu einem anderen Server notwendig. Relative Angaben beziehen sich auf das aktuelle Verzeichnis. Ihr Dokument liegt z.B. auf einem Server im Verzeichnis "z:/user/maier/", eine Adresse "../schulz/home.html" zeigt somit auf die Homepage Ihres Bekannten im Verzeichnis "z:/user/schulz/". Eine Dateiangabe völlig ohne Pfad weist auf eine Datei im selben Verzeichnis wie die aktuelle Seite hin, das hat den Vorteil, daß wenn man seine Seiten auf den Server kopiert, man die Adressen nicht angleichen muß.
Für Verküpfungen im selben Dokument gibt man als Adresse den Zielpunkt hinter einem #Zeichen an. Der Zielpunkt muß im Dokument entsprechend gekennzeichnet sein. <A HREF = #ZIEL> verzweigt zu der Textstelle, die mit <A NAME = "ZIEL"> ausgezeichnet ist. Da es unübersichtlich wäre, die direkte Adresse anzuzeigen, kann man vor dem EndTAG </A> einen Text eingeben, der an Stelle der Adresse im Browser angezeigt wird.
| <A HREF =#unten>Dokument Ende</A> | ; Link zum Anker mit dem Namen „unten" |
| <A HREF = http://www.fh-muenchen.de>Homepage der FH München</A> | ; Link zu einer anderen HTML Seite |
| <A NAME = „unten">Dokument Ende</A> | ; Anker mit dem Namen „unten" |
 |
Abb. 6.1: Ansicht eines nicht verfolgten und bereits verfolgten Links. In der Infoleiste des Browsers wird die Sprungadresse angezeigt. |
Vermeiden Sie bei Links das "Hier" Syndrom wie z.B. "Weitere Seiten zum Thema HTML finden Sie hier, zum Thema WWW klicken Sie hier", formulieren Sie statt dessen folgendermaßen: "Weitere Themen: HTML und WWW".
Mit Bildern auf Ihrer Web Page können Sie Sachverhalte illustrieren oder die Seite anspruchsvoll gestalten. Bedenken Sie aber zwei wichtige Dinge: Bilder benötigen aufgrund ihrer Datenmenge erheblich längere Ladezeiten als Text und manche Browser sind nicht in der Lage, Bilder Anzuzeigen. Um zu vermeiden, daß der User abschaltet, ohne Ihre Seite gesehen zu haben, weil es zu lange dauert oder er mit dem Dokument nichts anfangen kann, da es nur aus Bildern besteht, gehen Sie sparsam mit diesem Hilfsmittel der Gestaltung um. Zeigen Sie Bilder auf Ihrer Seite nur in Miniatur, ermöglichen Sie ein optionales Herunterladen des Bildes und nutzen Sie die Möglichkeit bei den Bildern, einen Alternativtext anzugeben. Die Anwendung der TAGS für die Bilddarstellung ist ähnlich wie die der Links. Ihre Struktur lautet wie folgt: <IMG SRC = "Name" ALT = "Text"> Name ist der Dateiname des Bildes mit Pfad nach dem gleichen Prinzip wie bei den Links, und Text ist der Platzhalter für den Alternativtext, er muß nicht angegeben werden. Wenn man nach einem Bild ohne Zeilenvorschub einen Text plaziert, so steht dieser standardmäßig bündig zur Unterkante des Bildes. Um dies zu beeinflussen, verwendet man das Attribut ALIGN, es läßt die Werte TOP, MIDDLE und BOTTOM zu, die sich selbst erklären. Sie können auch Links und Bilder kombinieren, indem Sie zwischen Anfangs- und EndTAG eines Links ein Bild einsetzen. Man kann diesen Link dann durch Anklicken des Bildes verfolgen. In dem folgenden Beispiel werden Sie die verschiedenen Methoden sehen.
| <IMG SRC = "icon.gif" ALIGN = TOP>Netscape und | ; Bild mit Textausrichtung oben |
<IMG SRC = "icon.gif" ALIGN = MIDDLE>Netscape und |
; Bild mit Textausrichtung mittig |
<IMG SRC = "icon.gif" ALIGN = BOTTOM>Netscape<BR> |
; Bild mit Textausrichtung unten |
<A HREF = http://www.netscape.com> |
; Link |
| <IMG SRC = "iconk.gif" ALIGN = MIDDLE> | ; Bild vor dem EndTAG des Links |
| Netscape</A> | ; Text und EndTAG des Links |
<IMG SRC = "icon_.gif" ALIGN = MIDDLE ALT = "Bild des Netscape Icons"> |
; Alternativtext |
 |
Abb. 6.1: Ansicht eines nicht verfolgten und bereits verfolgten Links. In der Infoleiste des Browsers wird die Sprungadresse angezeigt. |
Die Darstellung von Zeichen erfolgt mit HTML im ASCII (7-Bit American Standart Code for Information Interchange), was bedeutet, daß deutsche Umlaute nicht im Zeichensatz des Browser enthalten sind, auch wenn es manche Browser erlauben einen erweiterten Zeichensatz zu verwenden. Deshalb sollte man Umlaute und Sonderzeichen durch HTML Codes ersetzen. Alle Sonderzeichen beginnen mit dem kaufmännischen Et (&) und enden mit dem Semikolon (;). Das Sonderzeichen wird in codierter Form dazwischen geschrieben. Für die codierte Form gibt es zwei Möglichkeiten, entweder die der HTML Sprache oder im ISO-Latin-1-Zeichensatz (ISO 8859-1). Die in HTML spezifizierten Zeichen haben Kürzel erhalten, die auf deren Ursprung schließen lassen, wie z.B. < = < = less than. Hierbei muß man auf die Groß- Kleinschreibung achten. Für die Methode nach ISO Norm muß man die Nummer des Zeichens kennen, vor die man ein Nummern - Zeichen setzt. Die Form lautet dann z.B. < = <. Umlaute werden erzeugt, indem man als Code den Vokal plus den Zusatz "uml" (Umlaut) einsetzt.
| Sonderzeichen - | HTML Code - | ISO Norm |
ä |
ä |
Ġ |
| ö | ö | ö |
| ü | ü | ü |
| ß | ß | ß |
| < | < | < |
| > | > | > |
| & | & | & |
| " | " | " |
| ; | ; | |
| @ | @ | |
| © | © | |
| ® | ® | |
| ¼ | ¼ | |
| ½ | ½ | |
| ¾ | ¾ |
Bei der Gestaltung muß man immer daran denken, daß der User mit Hilfe seines Browsers das Aussehen eines Dokuments beeinflussen kann. So können zum Beispiel auf einem großen Bildschirm mit einer höheren Auflösung mehr Zeichen pro Zeile dargestellt werden und ein grauer Text, der in Ihrem Browser vor weißem Hintergrund gut zu lesen ist, verschwindet glatt, wenn sich der Benutzer seine Dokumente standardmäßig mit grauem Hintergrund anzeigen läßt. Versuchen sie die Information, die Sie auf Ihrer Site anbieten, gut zugänglich zumachen, d.h. verschachteln Sie Ihr Dokument nicht unnötig und gliedern sie sinnvoll. Gestalten Sie Ihr Dokument lieber einfach und übersichtlich. Verzichten sie lieber auf Spielereien wie Frames und Java, sie erhöhen die Ladezeiten erheblich. Ein besonderer Link sei an dieser Stelle noch erwähnt, ein Link mit der Adresse "mailto: Ihre E-Mail Adresse". Ein Klick auf diese Zeile veranlaßt die meisten Browser dazu, ein E-Mail Programm zu starten und gleichzeitig Ihre Adresse in das "An:" einzutragen. Die Besucher Ihrer Site haben dadurch die Möglichkeit, sehr einfach mit Ihnen in Kontakt zu treten. Sie erhalten so Kritik und Anregungen zu Ihrer Homepage.
 |
Homepage der FH München FH München, Krisen in Computernetzen |
Philipp Burkart 01/97 