HTML- ganz easy

HTML - ganz easy

Prof. Jürgen Plate

HTML - ganz easy

Inhalt
Alles ganz einfach
Das World Wide Web?
HTML - die Sprache des WWW
Aufbau von HTML-Dokumenten
Was ist ein URL?
HTML-Editoren
Design-Regeln
Links
Grafiken
Sounds und anderes
Farbe ins Bild
Tabellen
Seiten mit Struktur

Alles ganz einfach
Inzwischen gibt es kaum jemanden, der nicht schon vom Internet gehört hat. In diesem Text möchte ich Ihnen die praktische Seite der Internetnutzung aus der Anbietersicht nahebringen. Es geht also nicht um Tips zum Surfen, sondern darum, die Internet-Dienst für ein Informationsangebot zu nutzen. Das können Sie übrigens teilweise auch ohne Internetanschluß oder sogar ohne Netzwerkanschluß. Wie das geht? Man kann beispielsweise auch im lokalen Firmennetz WWW-Dokumente anbieten - was sich dan 'Intranet'-Angebot nennt. oder man verwendet die Möglichkeit der multimedialen HTML-Darbietung von Informationen auf dem lokalen Rechner. Inzwischen werden auch auf vielen CD-ROMs HTML-Dokumente gespeichert, denn das Datenformat ist plattformübergreifend und kann auf PC, Apple Mac, Workstations und vielen anderen Rechnern dargestellt werden. Letztendlich sind auch keine besonderen Tools zum Produzieren der Dateien nötig. Es genügt ein Editor und ein WWW-Browser. Beides ist als Notpad und Internet-Explorer auf jedem Windows-95-Rechner verfügbar. Will man Bilder bearbeiten, kommt noch ein Malprogramm hinzu. Das Star-Office-Paket hat das HTML-Format bereits integriert und für viele andere Textverarbeitungen gibt es passende Makropakete oder Konvertierprogramme.

Das World Wide Web?
Richtig hip wurde das Internet erst durch das World Wide Web, zu deutsch etwa "Weltweite Informationsverknüpfung". Der Ursprung des WWW begann Anfang 1989 am CERN, dem Europäischen Zentrum für Teilchenphysik bei Genf. Ausgangspunkt war die Entwichlung eines Systems, das den Angehörigen des CERN erlaubte, in der Vielfalt der vorhandenen Daten auf einfache Art und Weise zu navigieren. Die Inkompatibilität der vorhandenen Hard- und Software machte das Auffinden relevanter Information innerhalb der Organisation nahezu unmöglich. Als Lösung dieses Problems wurde von Tim Berners-Lee und Robert Cailliau ein auf Client/Server Architektur aufbauendes, hypertextbasiertes System vorgeschlagen, das auf SGML basierte (SGML = Standard Generalized Markup Language). Zum einen lassen sich damit Strukturen von Dokumenten, also Überschriften, Absätze, Aufzählungen, etc., beschreiben, zum anderen sind Querverweise und das Einbindung von Illustrationen und Tabellen und vieles mehr möglich.

HTML - die Sprache des WWW
Man braucht aber lange nicht alle Möglichkeiten von SGML und so entwickelte Tim Berners-Lee HTML, die Hyper-Text Markup Language. HTML ist eine Untermenge von SGML. HTML besteht aus einer Menge von vorgegebenen Worten, sogenannte "Tags", die der Beschreibung und Strukturierung eines Textes dienen. HTML beschreibt nicht das Aussehen des Textes, sondern seinen strukturellen Aufbau. Der grundlegende Aufbau des World Wide Web unterscheidet sich in keiner Weise von anderen Internet-Diensten. Dokumente auf Servern werden in einem bestimmten Format, im Falle von WWW dem HyperText-Format HTML, abgespeichert. Mit geeigneten Client-Programmen, "Browser" genannt, wird auf Information zugegriffen, die auf dem Server vorhanden ist. Client und Server verständigen sich untereinander über HTTP (HperText Transfer Protocol). HTML (Hypertext Markup Language) ist also ein Format zur Darstellung von Informationen aller Art, unabhängig vom verwendeten Betriebssystem oder Rechner. Das schicke Aussehen der HTML-Dokumente, die man auch WWW-Seiten oder Webseiten nennt, wird auch erst vom Browser erzeugt. Über das Internet werden nur ASCII-Dateien gesendet. Man kann im Browser auch die Standard-Schriftart und -Größe einstellen - was mitunter den Nachteil hat, daß eine Webseite beim Internet-Sufer nicht genauso aussieht, wie sich der Erzeuger der Seite das vorgestellt hat.

Aufbau von HTML-Dokumenten
HTML-Dokumente sind Text-Dateien, die spezielle Steuer- und Formatierbefehle, sogenannte Tags enthalten. Ein HTML-Tag besteht aus einem Namen und, falls notwendig, weiteren Parametern. Es ist eingeschlossen von "<" und ">". Alle Tags, die nicht leer sind, also beispielsweise Text enthalten, benötigen weiterhin ein Ende-Tag, das von "</" und ">" eingeschlossen ist. Die Groß/Kleinschreibung spielt bei Tags keine Rolle, ebensowenig Zeilenumbrüche. In diesem kleinen Kurs für angehende Webmaster werden nicht alle Tags und schon gar nicht alle Parameter besprochen, dann dazu reicht der Platz nicht aus. Wenn Sie aber die ersten Schritte erfolgreich hinter sich haben, ist alles Weitere mit Hilfe eine guten Buchs nicht schwer. In den Beispielen werde ich die Tags zur besseren Unterscheidung groß schreiben.
Ein HTML-Dokument wird eingeleitet durch "<HTML>" und abgeschlossen durch "</HTML>". Innerhalb des Dokumentes gibt es den Kopfteil, begrenzt durch "<HEAD>" und "</HEAD>", der nur einige ausgewählte administrative Daten enthält, und den Hauptteil, begrenzt durch "<BODY>" und "</BODY>". Innerhalb des Hauptteils befinden sich sämtliche Informationen und Auszeichnungen die das Dokument strukturieren. Im HEAD-Tag sind unter anderem enthalten:
<TITLE> gibt den Titel des Dokumentes an, dieser sollte kurz und aussagekräftig sein. Er erscheint in der Kopfzeile des Browser-Fensters und wird auch von Suchmaschinen verwendet. <BASE> Gibt den Pfad an, in dem sich das Dokument befindet. Dies ist dann von Nutzen, wenn im Dokument Referenzen ohne volle Pfadangabe existieren. <META> Sogenannte META-Tags enthalten Infos über Autor und Dokument, den Zeichensatz, Stichworte und ähnliches.
Damit haben wir schon das Grundgerüst eines HTML-Dokuments:
<HTML> <HEAD> <TITLE>Meine erste Webseite</TITLE> </HEAD> <BODY> . . Hier kommt dann später die Info hin . . </BODY> </HTML>
Im Fenster des Browsers sieht das noch recht dürftig aus:

Weitere Tags werden dann später behandelt, denn zuerst muß noch geklärt werden, wie die Querverweise zu behandeln sind. "HyperText" bezeichnet ja nichts anderes, als ein Dokument mit Querverweisen. Im Gegensatz zum verstaubten Lexikon im Bücherschrank muß man bei WWW-Seiten nicht blättern. Ein Mausklick auf den Querverweis führt uns nicht nur zu einer anderen Stelle im Dokument oder zu einer anderen Datei, sondern meist zu einem ganz neuen Server irgendwo auf der Welt. Deshalb heist das Ganze ja auch World Wide Web. Um einen Querverweis zu beschreiben muß man also mindestens einen Rechnernamen und einen Dateinamen angeben. Wie die Angabe erfolgt, wissen die Internet-Surfer unter Ihnen längst: Als sogenannten URL.

Was ist ein URL?
URL steht für Uniform Resource Locator. Ein URL ist eine Referenz auf eine Datei oder sonstige Quelle im Netz. Diese Referenz wird benötigt, um Verweise auf Dokumente anzugeben. Darüber hinaus kann mit einem URL auch ein Internet-Dienst spezifiziert werden. URLs dienen auch zum Einbinden von Grafiken oder anderen multimedialen Objekten in die HTML-Texte. Das Aufbau-Schema eines URL ist
Dienst://Host.Domain:Port/Pfad/Dateiname
Als "Port" bezeichnet man eine Form der Subadressierung des Internet-Protokolls TCP/IP. Die Angabe des Ports kann entfallen, es wird dann der für den angegebenen Dienst definierte Standardport verwendet. Ebenso können Host und Domain entfallen, wenn es sich um den lokalen Server handelt. Auch der Pfad kann weggelassen werden, wenn sich die gesuchte Datei im aktuellen Verzeichnis befindet. Grundsätzlich sollten bei Links auf lokale Dateien die Angaben von Host und Domain weggelassen werden, da sonst jedesmal eine (unnötige) Nameserveranfrage erfolgt. Als Dienste werden die wichtigsten Internet-Dienste unterstützt:

http gibt eine Datei oder ein Verzeichnis auf einem WWW-Server an.
file gibt eine lokale Datei an.
ftp gibt eine Datei oder ein Verzeichnis auf einem FTP-Server an. Standard ist anonymer ftp. Will man einen Usernamen angeben, muß man diesen getrennt durch '@' vor dem Host angeben.
mailto erlaubt es, eine E-Mail zu versenden.
news gibt eine Newsgruppe auf einem News-Server an.

HTML-Editoren
Es gibt Puristen, die schreiben ihre Hypertext-Dokumente mit dem Notepad-Editor. Für schnelle Änderungen oder "mal eben ein paar Seiten" geht das auch wirklich gut und auch schnell, sofern man die wichtigsten HTML-Tags im Kopf hat. Liegt der Text aber schon vor, wählt man besser eine Konvertierungssoftware oder die Konvertierungsfunktion der Textverarbeitung. Oder man greift gleich zu einem der vielen HTML-Editoren, die es auch als Shareware gibt. Den perfekten Editor für HTML gibt es nicht. Alle Produkte haben besondere Features - und stets eine längere Mängelliste. Viele Editoren sind programmierte Geheimnisse für Freaks und auch nur von solchen verwendbar.
Textbasierte Editoren bieten wenig Komfort und benötigen anfangs als Unterstützung ein HTML-Handbuch neben der Tastatur.Trotzdem werden sie von Profis bevorzugt eingesetzt.
WYSIWYG-Editoren zeigen das Layout im Entstehungsprozeß und setzen immer weniger HTML-Kenntnisse voraus. Die Vorschau ist jedoch meist nicht verbindlich. Der Grund für die mangelnde WYSIWYG-Tauglichkeit liegt in HTML selbst: Die Sprache ist nach wie vor eine Strukturbeschreibungssprache und kein System für Desktop-Publishing. Zudem hinkt die Standardisierung der notorischen Entwicklung neuer Browser-Features hinterher. Wie groß z. B. die Schrift wird, hängt von der Interpretation des Browsers (Version) ab, der das Ganze umsetzt - und außerdem vom Rechnersystem. Ein Mac stellt die gleiche Seite oft ganz anders dar als ein PC. Beim Browser von Netscape erscheint sie anders als im Internet-Explorer. Zudem kann auch der Benutzer Schriftgröße- und -Art nach eigenen Vorlieben einstellen.
Office-Pakete mit HTML-Fähigkeiten, z. B. Programmpakete wie Star Office oder MS Office 97 bieten die Möglichkeit, Dokumente direkt in HTML-Code abzulegen. Aus den eben erwähnten Formatierungsproblemen sind solche Seiten nur bedingt universell für das Web-Design einsetzbar. Nacharbeiten ist auf jeden Fall erforderlich.
Professionelle HTML-Entwickler ziehen manuell geschriebenen Code vor, da es oft genauso lange dauert, programmbedingte Unzulänglichkeiten auszubügeln wie einen sauberen Code manuell aufzubauen. Und selbst für den Gelegenheitsschreiber sind HTML-Kenntnisse sind stets nützlich. Auf jeden Fall sollte man das Ergebnis seiner Arbeit mit den beiden verbreiteten Browsern von Netscape und Microsoft überprüfen. Wir wollen in den kommenden Folgen miteinander HTML lernen und werden deshalb bei der manuellen Gestaltung von Seiten bleiben. Ein paar grundlegende HTML-Kenntnisse helfen später nicht nur bei der Auswahl von speziellen Tools für die Webseitengestaltung, sondern schärfen auch den Blick dafür, ob ein extern beauftragter Webseiten-Schmied nicht vielleicht nur ein Schmiedchen ist.

Design-Regeln
Zweck des World Wide Web ist es immer noch, untereinander verknüpfte Informationen bereitzustellen. Natürlich sollen die Webseiten keine Textwüsten auf Einheitsgrau sein, aber auf der anderen Seite sind Seiten, auf denen es an allen Ecken und Enden zappelt, genauso abschreckend. Deshalb folgen nun ein paar Tips für Webseiten-Designer.
Egal, ob das WWW-Angebot eine 'Textwüste' wird oder ob man es schrill und bunt gestaltet, man muß sich Gedanken über die Stuktur des Angebotes machen. Dabei gibt es zwei Möglichkeiten :

Ein flaches Angebot, bei dem von der Startseite (Homepage) viele Verzweigungen ausgehen und dort nach ein oder zwei Stufen das Ende erreicht ist.
Ein tiefes Angebot, bei dem wenige Links von der Homepage in jeweils tief verzweigte Strukturen münden.

Meist wird sich eine Mischform ergeben. Eine 'Textwüste kann man relativ einfach auflockern, indem man ein paar kleine Bilder einstreut. Beim Gestalten einer HTML-Seite sollte man auch an das Bildschirmformat denken. Mehr als eine Schreibmaschinenseite sollte eine einzelne Webseite nur dann sein, wenn es sich um einen zusammenhängenden Text handelt. Übergeordnete Seiten sollte in der Regel auf einen Bildschirm passen.
Nun geht es darum die Seite mit Information zu füllen. Dabei wird es sich nicht nur um Text handeln, sondern auch um Querverweise und Bilder. Doch wir müssen zunächst mit dem Text oder vielmehr dessen Struktur beginnen, denn HTML ist ja eine Sprache, die eine Textstruktur beschreibt. So ein Text besteht aus einzelnen Absätzen und dazwischen befinden sich Überschriften. So wie bei den Artikeln dieser Zeitschrift gibt es Überschriften verschiedener Ebenen: die Hauptüberschrift, Kapitelüberschriften, Zwischentitel usw. Genau das finden wir auch bei HTML. Die Überschriftstags sind durch <H1>...</H1> bis <H6>...</H6> festgelegt ("H" wie "Headline"). Wie die einzelnen Überschriften im Quelltext und im Ergebnis aussehen, zeigen die folgenden Bilder:

Die Überschrift der Ebene 1 ist schon recht groß, jene der Ebene 4 entspricht in etwa fettgedrucktem Fließtext, die Ebenen 5 und 6 sind schon kleiner und eignen sich daher schon weniger für "echte" Überschriften. Das bedeutet, daß man in der Regel mit den Überschriftsebenen 2, 3 und 4 arbeitet, was in der Regel auch ausreicht - schließlich schreiben wir Webseiten und keine technischen Handbücher.Die Headline-Tags sorgen nicht nur für die Wahl der Schriftgröße, sondern auch für entsprechende Abstände zum vorhergehenden und nachfolgenden Absatz.

Umbruch nach Bedarf
Im Gegensatz zu einer Textverarbeitung spielt der Zeilenumbruch beim Eingeben des Fließtextes für die Webseite keine Rolle, Zeilenwechsel werden vom Browser ignoriert. Ebenso werden Tabulatorzeichen oder mehrere aufeinanderfolgende Leerzeichen auf ein einziges Leerzeichen reduziert. Je nach Breite des Browserfensters bei Betrachter wird der Text passend umbrochen, jeweils zwischen zwei Wörtern. Hat der Text recht lange Wörter und ist das Browserfenster relativ schmal, kann das Ergebnis unter Umständen ziemlich übel aussehen Natürlich kann man auch Tabellen schreiben und auch den Umbruch des Textes bei der Ausgabe erhalten. Das kostet allerdings etwas Mühe und ist auch komplizierter, weshalb die dazu nötigen Tags erst später behandelt werden. Für einfache Umbruchanweisungen gibt es zwei Tags: <BR> ("Line BReak") erzwingt einen Zeilenwechsel, d. h. der Text beginnt am Anfang der nächsten Zeile. <P> markiert einen Paragraphenbeginn. Auch hier wird in der folgenden Zeile begonnen, aber zum vorhergehenden Absatz etwas Platz gelassen. Eigentlich müßte der Absatz mit </P> abgeschlossen werden, aber den schließenden <P>-Tag kann man weglassen. Der Browser reagiert auf mehrere aufeinanderfolgende <P>-Tags so, als sei nur ein einziger vorhanden. Mehrere <BR>-Tags werden dagegen auch zu mehreren Leerzeilen - man kann also hier die Abstände zwischen Absätzen variieren.
Eine weitere Form der Strukturierung ist eine horizontale Linie, die zwei Absätze trennt. Sie wird durch das Tag <HR> erzeugt. Das sieht dann so aus:

Bei vielen Tags kann man die Erscheinungsweise durch Parameter steuern. So lassen sich Überschriften linksbündig, mittig und rechtsbündig plazieren, indem man innerhalb des Tags den Parameter ALIGN verwendet:

<H1 ALIGN=LEFT> linksbündig
<H1 ALIGN=CENTER> zentriert
<H1 ALIGN=RIGHT> rechtsbündig
Bei den horizontalen Linien kann man unter anderem die Breite verändern. <HR WIDTH=50%> setzt eine zentrierte Linie, die halb so breit wie das Browserfenster ist:

Absätze bringen zwar schon etwas Struktur in den Text, aber das alleine reicht noch nicht aus. Im Gegensatz zum gedruckten Text darf die Webseite wesentlich stärker strukturiert werden. Da der Leser die Seite am Bildschirm oft nur überfliegt, muß man die wesentlichen Punkte des Inhalts deutlich herausstellen. Eine möglichkeit hierfür sind Aufzählungen.

Aufzählungen
kommen im Text relativ häufig vor. Deshalb gibt es auch bei HTML Tags dafür. Die einfachsten sind die ungeordnete Liste(<UL>...</UL>) und die geordnete Liste (<OL>...</OL>). Bei beiden wird der Text eingerückt und dort, wo ein <LI>-Tag steht, wird entweder ein Punkt bzw. Quadrat gesetzt oder die Absätze werden durchnumeriert. Solche Listen lassen sich beliebig ineinander schachteln. Das erste Bild zeigt den Quelltext und das Bild darunter die Browseransicht einer "unordered list".

Indem Sie das "UL" durch ein "OL" ersetzen, können Sie daraus eine "ordered List" machen. Es gibt noch eine dritte Form der Aufzählung, die aber seltener verwendet wird, die "definition list". Man kann sie beispielsweise für Stichwortverzeichnisse verwenden. Die Liste wird in die Tags <DL>..</DL> eingeschlossen. Statt des <LI>-Tags gibt es aber zwei Tags, <DT> für das Stichwort ("definition tag") und <DD> für den Text dazu ("definition data"), die sich abwechseln. Das sieht dann im Quelltext so aus:
<DL> <DT>URL <DD>Uniform Resource Locator - Quellenangabe im Internet <DT>FTP <DD>File Transfer Protocol - Dateiübertragungsprotokoll und -Programm im Internet ... und so weiter </DL>
Probieren Sie diese Listenform doch selbst einmal aus.

Zeichencodierung
Möglicherweise haben Sie sich schon gefragt, wie ich es in den Bildern geschafft habe, die Zeichenfolge "<P>" im Browser darzustellen, obwohl das doch ein HTML-Tag ist und eigentlich den Umbruch beeinflussen sollte. Für die speziellen Zeichen "<" und ">" gibt es, wie auch für viele andere Sonderzeichen eine Ersatzdarstellung, die bewirkt, daß das gewünschte Zeichen im Text dargestellt und nicht als Steuerzeichen von HTML interpretiert wird. Für das "<"-Zeichen wird "<" ("less than") verwendet und für ">" ">" ("greater than"). Sie erkennen schon das Schema, das vordefinierte Zeichenkürzel wird vom kaufmännischen Und sowie vom Strichpunkt eingeschlossen. Um das "&" darzustellen, schreibt man "&" ("ampersand"). Die deutschen Umlaute müssen übrigens auch umschrieben werden (ä = ä, ö = ö, ü = ü, Ä = Ä, Ö = Ö, Ü =Ü, ß = ß). Es gibt für alle Zeichen, die nicht im ASCII-Zeichensatz enthalten sind, solche Ersatzdarstellungen.

Schriftschnitte
Schön wäre natürlich auch noch, wenn man Fettdruck, Kursivschrift oder Ähnliches unterbringen könnte. HTML kennt auch Tags für Schriftschnitte (Styles), die unten gezeigt werden. Wie Sie sehen, gleichen sich etliche Ausgaben, weshalb auch einige der Tags kaum noch verwendet werden. Sie lassen sich vielfach auch durch das <FONT>-Tag ersetzen, auf das später eingegangen wird. Auch für die Schriftschnitte gilt, daß auf Webseiten wesentlich mehr mit Hervorhebungen, z. B. Fettdruck, gearbeitet werden darf und muß wie bei einem Buch. Vorsicht ist nur bei der Unterstreichung geboten. Da die Querverweise auf andere Webseiten (Links) unterstrichen sind, kann die Unterstreichung eines Wortes im Text den Leser irreführen.

<TT> Nichtproportionaler Typewriter-Zeichensatz
<B> Fettschrift
<I> Italic oder Schrägschrift
<U> unterstrichen (Achtung! Manche Browser stellen Links unterstrichen dar!)
<S> ~~durchgestrichen~~
<EM> Hervorgehoben, wird dargestellt durch Schrägschrift.
<STRONG> Stärkere Hervorhebung, wird dargestellt durch Fettschrift.
<CODE> Wird verwendet für Programmcode (nichtproportionaler Zeichensatz).
<SAMP> Eine Folge von Buchstaben.
<KBD> Wird bei Anleitungen zur Darstellung von Benutzereingaben verwendet.
<VAR> Für die Darstellung von Variablennamen.
<DFN> Für die Definition von Ausdrücken, wird dargestellt durch Fett- oder Schrägschrift.
<CITE> Wird verwendet für Zitate, dargestellt durch Schrägschrift.
<SUB> Teile der Schrift_{tiefergestellt}.
<SUP> ^{Höhergestellte} Teile der Schrift.
<BIG>> Ein Wort größer.
<SMALL> Ein Wort kleiner.
Bisher wurden einfache Strukturen des Dokuments behandelt, es fehlt aber noch das Wichtigste: die Querverweise, die aus einem einfachen Text ein Hypertext-Dokument machen (die sogenannten "Links") und natürlich das Einbinden von Bildern.

Links
Ein Link wird durch das Tag <A ... >...</A> im Text eingebunden (A steht für "Anchor"). Das öffnende Tag.enthält einen oder mehrere der folgenden Parameter:
HREF gibt einen URL auf ein Zieldokument an, auf das beim Anwählen des Links gesprungen werden soll. Nur durch Angabe des HREF-Parameters wird ein Link aktiv und selektierbar, z. B.: <A HREF="kapitel2.html"> oder <A HREF="http://www.online-de.de/">. Befindet sich das Ziel der Referenz an einer anderen Stelle im selben Dokument, verwendet man ein #-Zeichen vor dem Namen des Ziels <A HREF="#Ziel">.
NAME wird verwendet, um innerhalb eines Dokumentes eine Markierung anzugeben, welche im HREF-Parameter (mit dem #-Zeichen) angegeben werden kann. Somit können einzelne Stellen in einem Dokument (z. B. Unterkapitel) direkt angesprungen werden, z. B. <A NAME="abschnitt3">
Es gibt noch weitere Parameter, die wir aber für diese Einführung nicht benötigen. Alle Parameter, die Leer- oder Sonderzeichen enthalten, müssen in doppelte Anführungszeichen ("...") eingeschlossen werden. Es macht nichts aus, wenn man grundsätzlich die Parameterwerte in "..." einschließt. Alle diese Parameter sind optional, jedoch macht ein Link ohne HREF- oder NAME-Parameter nicht viel Sinn. Zwischen dem öffnenden Anker und dem schließenden steht ein Text oder eine Grafik, welche den Link repräsentieren soll. Dieser Text wird dann auch farbig hervorgehoben und unterstrichen dargestellt.

Einige Beispiele:

Ein typisches Link zu einer anderen WWW-Seite: Willkommen bei den <A HREF="http://www.fh-muenchen.de/">WWW-Seiten der FH</A>.
Ein Link zu einer anderen WWW-Seite des gleichen Anbieters: <A HREF="rz/index.html">WWW-Seiten des Rechenzentrums</A>.
Verweis auf eine andere Stelle im Text:: Mehr dazu in <A HREF="#kap9">Kapitel 9</A>. Die entsprechende Stelle im Text wird mit dem NAME-Tag markiert: <A NAME="kap9"><H4>Kapitel 9</H4></A>

Bei Links innerhalb des Angebots eines Servers sollte man die vollständige URL mit Angabe des Rechnernamens (z. B. http://www.e-technik.fh-muenchen.de) vermeiden, denn bei solchen Angaben erfolgt jedesmal eine Anfrage zum Nameserver. Ein lokales Link sollte also wie im zweiten Beispiel oben aussehen . Zu beachten ist auch, daß der Schrägstrich Verzeichnistrenner ist, nicht der Backslash(\), der bei DOS und Windows verwendet wird.
Bei den lokalen Links gibt es auch noch einen Unterschied: Ein Link kann vom Stammverzeichnis des Serverangebots ausgehen. In diesem Fall beginnt die Angabe des Dateipfades mit einem Schrägstrich (/). Man nennt dies einen absoluten Pfad. Man kann aber auch vom aktuellen Verzeichnis ausgehen, z. B. "news/index.html". Es wird dann in das Verzeichnis "news" gewechselt und die Datei "index.html" an den Browser geschickt. Will man dann wieder ins übergeordnete Verzeichnis aufsteigen, kann die Verzeichnisangabe ".." verwendet werden (wie bei DOS und Windows), z. B. "../index.html". Da sich solche Links auf das aktuelle Arbeitsverzeichnis beziehen, nennt man sie "relative Links". Die relativen Links haben den Vorteil, daß man komplette Verzeichnisstrukturen innerhalb der Dateistruktur des Servers "umziehen" kann, ohne daß eine einzige WWW-Seite geändert werden muß.

Grafiken
Grafiken können auf zwei Arten in HTML-Dokumente eingebunden werden, einmal über Hyperlinks, hier wird die Grafik erst bei Anwählen des Links geladen und über ein Anzeigeprogramm dargestellt, oder als sogenanntes "inline image", hier befindet sich die Grafik im Dokument zwischen den Textzeilen und wird direkt bei Laden des Dokumentes mit geladen und angezeigt. Der Befehl zum Einbinden von Grafiken lautet
<IMG SRC="Bild-URL" ALIGN="Textansatz" ALT="Alternativdarstellung" WIDTH="www" HEIGHT="hhh" BORDER="Randbreite" VSPACE="vvv" HSPACE="hhh">
Die Parameter sind:

Bild-URL: Dies ist ein URL auf die Grafik, im einfachsten Fall ist es eine lokale Datei, es kann aber auch ein Link auf eine Grafik auf einem weit entfernten Rechner sein.
Textansatz: Dieser Wert gibt an, wo die dem <IMG> nachfolgenden Textzeilen beginnen sollen, an der Oberkante, in der Mitte oder der Unterkante des Bildes. Mögliche Werte sind LEFT, RIGHT, TOP, MIDDLE oder BOTTOM. Diese Angabe ist optional, der voreingestellte Wert ist BOTTOM.
Alternativdarstellung: Gibt an, was bei nicht-grafikfähigen Browsern oder bei abgeschalteter Bilddarstellung an Stelle der Grafik gezeigt werden soll. Bei neueren Browserversionen wird der Text auch gezeigt, wenn man den Mauszeiger über die Grafik bewegt. Hier sollte in wenigen Worten erklärt werden, was das Bild darstellt. Auch diese Angabe ist optional, voreingestellt ist das Wort "IMAGE". Will man keine Angabe, schreibt man ALT="".
Mit WIDTH und HEIGHT kann optional die Bildgröße in Pixeln angegeben werden. Das erleichtert dem Browser die Berechnung der Seitenaufteilung, da er die Bildgröße schon vor dem Laden des Bildes kennt. Die meisten Browser können auch das Bild entsprechend der Angaben vergrößern oder verkleinern.
Der Parameter BORDER gibt schließlich an, wie breit der farbige Rand sein soll, wenn das Bild als Link dient. Will man keinen Rand, gibt man 0 an.
Die Parameter VSPACE und HSPACE geben an, wieviele Pixel Abstand zwischen Bild und umgebenden Text vertikal und horizontal frei bleiben sollen.

Man kann auch verkleinernte Bilder auch zu Hyperlinks machen und beim Anklicken dieses Vorschaubildes ('Thumbnail') dann das Bild in voller Größe zeigen. In der Regel wird man zum kleinen Bild noch die Größe des Originals dazuschreiben (z. B. 'Original 1024 x 512 Pixel, 245 KByte'). Grafiken können also auch innerhalb von Links verwendet werden, so daß ein Anwählen der Grafik zu einem neuen Dokument führt. Dies wird folgendermaßen realisiert:
<A HREF="Text.html"><IMG SRC="bild.gif"> Click Me!</A>
Hier sind sowohl die Worte "Click Me!" als auch die Grafik sensitiv. Die Grafik erhät in diesem Fall eine farbige Umrandung in der Farbe, die auch für den Linktext verwendet wird (links unten). Will man dies nicht, fügt man dem IMG-Tag die Option BORDER=0 hinzu.
Man sollte mit eingebundenen Grafiken sorgfältig umgehen. Insbesondere bei sehr langsamen Übertragungsleitungen sind lange Ladezeiten für Bilder ein Ärgernis. Viele Browser geben dem Benutzer auch die Möglichkeit, das automatische Laden von eingebundenen Grafiken auszuschalten und diese erst auf Wunsch anzuzeigen.

Sounds und anderes
Sounddateien, Animationen, VRML-Dateien öffnen das entsprechende Abspielprogramm im Browser. Entweder es ist fest eingebaut (z. B. für Sounds), ein sogenanntes 'Plug-In' oder man hat dem Browser angegeben, welches externe Programm er verwenden soll. Bei unbekannten Dateiformaten bietet der Browser an, die Datei abzuspeichern.

Farbe ins Bild
Man kann die Farbe von Text, Links und Hintergrund der Seite im BODY-Tag definieren. Dabei erfolgt die Farbangabe Sedezimal (also zur Basis 16), wobei für die drei Grundfarben rot, grün und blau jeweils ein Wert zwischen 0 und FF (dezimal 0 .. 255) angegeben wird. #000000 ist beispielsweise Schwarz, #FFFFFF ist weiß. Die reinen Grundfarben haben die Werte rot = #FF0000, grün = #00FF00 und blau = #0000FF.
Man könnte im BODY-Tag definieren:
Die Farbe der normalen Schrift (schwarz): TEXT="#000000"
Die Farbe des Hintergrundes (weiß): BGCOLOR="#FFFFFF"
Die Farbe eines 'frischen' Hyperlinks (blau): LINK="#0000FF"
Die Farbe eines schon mal selektierten Hyperlinks (lila): VLINK="#FF00FF"

Die Farbe eine Hyperlinks während des Anklickens (rot): ALINK="#FF0000" Komplett sieht das dann so aus:
<BODY TEXT="#000000" BGCOLOR="#FFFFFF" LINK="#0000FF" VLINK="#FF00FF" ALINK="#FF0000">
Aber Vorsicht: wer qietschblaue Schrift auf knallgelbem Hintergrund zeigt, darf sich nicht wundern, wenn der Leser irritiert ist. Besonders übel ist es, wenn die Links dann auch noch bunt dargestellt werden. Man sollte aber in jedem Fall darauf achten, daß man alle Farben angibt, also Text-, Hintergrund-, und Linkfarben.
Die Darstellung der Farbe hängt auch von der Farbauflösung des jeweiligen Bildschirms auf Betrachterseite ab. Damit die Seite auch bei geringerer Farbauflösung (256 Farben) noch toll aussieht, sollte man sich auf bestimmte Farben beschränken. Dabei sind unter Windows von den 256 Farben nur 216 wirklich verfügbar, da Windows 40 Farben für eigene Zweche reserviert. Bei zu geringer Farbauflösung würde der Browser die Bilder dann "dithern", d. h. die Farbe durch Rasterung darstellen. Denken Sie auch daran, daß bei unterschiedlichen Browsern oder Plattformen die Farbsättigung unterschiedlich behandelt wird - mal heller, mal dunkler.
Auch mit dem FONT-Tag kann man neben der Zeichengröße die Farbe (<FONT COLOR=...>) einzelner Textpassagen ändern, z. B.

H A L L O F A N S
Mit den folgenden beiden Javascript-Tools können Sie sich die passende Farbe recht komfortabel per Schieberegler aussuchen. Es stehen zwei Farbmodelle zur Verf�gung: HSB (Hue - Farbton, Saturation - Sättigung, Brightness - Helligkeit) oder RGB (Red - rot, Green - grün, Blue - blau).

HSB

Hue: ^o

Saturation: %

Brightness: %

RGB

Red:

Green:

Blue:

Die bisher behandelten Möglichkeiten sind ganz schön, um Text zu strukturieren, aber ein Layout wie bei einer Zeitschriftenseite bekommt man damit nicht hin. Wobei ich noch einmal betonen möchte, daß HTML keine Layoutsprache ist (auch wenn einige Entwicklungen in diese Richtung gehen). Eine Hilfe bei der Anordnung von Elementen auf einer Seite bieten aber die Tabellen. Oft werden Tabellen gar nicht ihrem eigentlichen Zweck entsprechend eingesetzt, sondern als Layouthilfe verwendet. Zuvor aber noch ein Tipp: Wenn Sie bei Surfen auf eine Webseite stoßen, die Ihnen gut gefällt, dann klicken Sie einfach auf "Ansicht"-"Seitenquelltext" bei Ihrem Browser. Dann können Sie sehen, wie die Seite gemacht wurde.

Tabellen
Tabellen sind recht einfach strukturiert. Sie werden vom <TABLE>-Tag eingeleitet und durch </TABLE> abgeschlossen. Mit <CAPTION> und </CAPTION> wird die Überschrift der Tabelle definiert. Danach folgen die einzelnen Zeilen der Tabelle, die zwischen <TR> und </TR> stehen. Die einzelnen Felder (Spalten) der Tabelle werden in <TD> und </TD> eingeschlossen. Der Browser berechnet automatisch die Maße der Tabellenfelder. Durch die Option BORDER kann der Tabellenrand festgelegt werden; Border=1 zeichnet einen dünnen Rand, BORDER=0 zeichnet die Tabelle ohne Rand. Wird anstelle von <TD> der Tag <TH> verwendet, erscheint die Schrift im Feld fett. Man kann Spalten auch über mehrere Zeilen ziehen (z. B. zwei Zeilen : <TD COLSPAN=2>) oder eine Zeile über mehrere Spalten (z. B. zwei Spalten : <TD ROWSPAN=2>). Der Quelltext einer Tabelle sieht dann so aus:
<TABLE BORDER=1> <CAPTION>Tabelle mit gedehnten Zellen</CAPTION> <TR><TH> </TH> <TH COLSPAN=2>Spalten 1 und 2</TH> <TH>Spalte 3</TH></TR> <TR><TH>Zeile 1</TH> <TD>Feld 1,1</TD> <TD ROWSPAN=2>Feld 2</TD> <TD>Feld 3,1</TD></TR> <TR><TH>Zeile 2</TH> <TD>Feld 1,2</TD> <TD>Feld 3,2</TD></TR> </TABLE>
sieht dann so aus:

Tabelle mit gedehnten Zellen
Spalten 1 und 2 Spalte 3

Zeile 1 Feld 1,1 Feld 2 Feld 3,1

Zeile 2 Feld 1,2 Feld 3,2

Der <TABLE>-Tag kann viele Parameter haben, die wichtigsten sind: Mit dem Parameter WIDTH und einer Prozentangabe kann man festlegen, wie breit die Tabelle sein soll. Die Angabe WIDTH="90%" würde beispielsweise dafür sorgen, daß die Tabelle nicht die volle Breide des Browserfensters einnimmt.

Mit ALIGN=CENTER (bzw. LEFT oder RIGHT) kann man erreichen, daß die Tabelle mittig (bzw. links- oder rechtsbündig) liegt. Die Kombination von ALIGN=CENTER und WIDTH="90" würde dafür sorgen, daß links und rechts der Tabelle etwas Rand bleibt - was meist besser aussieht. Die Optionen ALIGN=LEFT oder ALIGN=RIGHT ermöglichen es, den Text links oder rechts neben der Tabelle weiterlaufen zu lassen. Mit dem Tag <BR CLEAR=ALL> wird das Weiterlaufen des Textes unterhalb der Tabelle erzwungen.
Mit CELLPADDING wird der Abstand zwischen Zelleninhalt und Zellenrahmen in Pixel festgelegt. Man kann so dafür sorgen, daß der Text in der Tabelle nicht zu stark links und rechts am Rand "klebt".
Mit CELLSPACING verändern Sie den Abstand der Tabellenfelder zueinander. Es wird also der Abstand zweier benachbarter Felder (horizontal und Vertikal) festgelegt.
Dazu einige Beispiele (Schauen Sie sich dazu den Quelltext dieses Dokuments an). Übrigens soll das geschützte Leerzeichen ( ) in der linken oberen Zelle nur vermeiden, daß dieses Feld der Tabelle erhaben erscheint. Viele Browserversionen unterscheiden nämlich zwischen einer leeren Zelle und einer Zelle mit Inhalt.

Tabelle mit gedehnten Zellen
CELLPADDING=10
Spalten 1 und 2 Spalte 3

Zeile 1 Feld 1,1 Feld 2 Feld 3,1

Zeile 2 Feld 1,2 Feld 3,2

Tabelle mit gedehnten Zellen
CELLSPACING=10
Spalten 1 und 2 Spalte 3

Zeile 1 Feld 1,1 Feld 2 Feld 3,1

Zeile 2 Feld 1,2 Feld 3,2

Tricks mit Tabellen
Tabellen kann man auch ganz anders verwenden. Die Tabelle hat nur ein einziges Feld. Der Rand wurde mit BORDER=10, CELLSPACING=10 und CELLPADDING=10 passend verbreitert. Wenn man nun noch den Hintergrund mit <TH BGCOLOR="#FF0000"> einfärbt, erhält man ein fettes, rotes Warnschild.

ACHTUNG!
Nicht weiterlesen, wenn Sie keine
eigenen Webseiten basteln wollen!

Womit wir schon bei Attributen für die einzelnen Tabellenfelder sind. Neben anderen sind im TD- oder TH-Tag wichtig:

WIDTH gibt die Breite des Feldes an. Hier kann entweder eine absolute Zahlenangabe in Pixel stehen oder eine prozentuale Angabe (% der Gesamtbreite). HEIGHT gibt die Höhe des Feldes an (in Pixeln oder in % der Höhe des Anzeigefensters).
ALIGN legt fest, wie der Text des Zelleninhaltes ausgerichtet wird. Hier sind die Werte LEFT, RIGHT und CENTER möglich.
VALIGN legt die vertikale Ausrichtung fest. Hier sind die Werte TOP, BOTTOM oder MIDDLE möglich.
BGCOLOR erlaubt das Färben des Zellenhintergrundes.

Oder wollen Sie mal ein paar Buttons ohne Grafikprogrann basteln? Bitte sehr:

Nummer 1

Nummer 2

Nummer 3

Nummer 4

Auch Bilder lassen sich in Tabellen sauber ausrichten, wobei man den Rand wegläßt:

Immer zündende Ideen
mit der tollen Webseite
von den famosen Designern
der Firma Dings & Bums GmbH

Das obige Beispiel ist nicht etwa ein einziges Bild, sondern es setzt sich aus zwei Bildern und einem Textteil zusammen. Wenn man BORDER=1 setzt zeigt sich die Anordnung in der Tabelle. Zur bessern Sichtbarkeit wurden die Feldgrenzen rot eingefärbt.

Der Quelltext der Tabelle ist schon verzwickter, denn es dürfen zwischen den Tabellenfeldern ja keine Lücken sichtbar sein:
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR><TD ROWSPAN=2 VALIGN=BOTTOM><IMG SRC="zuendh1.jpg"></TD> <TD VALIGN=MIDDLE>Immer zündende Ideen<BR> mit der tollen Webseite<BR> von den famosen Designern<BR> der Firma <B>Dings & Bums GmbH</B></TD></TR> <TR><TD VALIGN=BOTTOM><IMG SRC="zuendh2.jpg"></TD></TR> </TABLE>
Bei älteren Netscape-Browsern kann es vorkommen, daß die Leerzeichen oder Zeilenvorschübe zwischen den einzelnen <TD>-Tags zu einem 1 Pixel breiten Zwischenraum führen. Wer sicher gehen will, hängt nach dem Testen alle Tags in einer langen Zeile hintereinander. Sie sollten auch immer daran denken, daß die Browser zwar versuchen, aus dem HTML-Code etwas Vernünftiges zu erzeugen, aber auch dort gibt es Grenzen. Wenn die Tabellenspalten zu schmal gewählt werden, kann es vorkommen, daß Wörter willkürlich getrennt werden. Viele Konvertierprogramme geben eine Tabellenbreite in Pixeln vor, wobei der Wert abhängig von der gewählten Druckerauflösung und vom Zeichensatz berechnet wird. Hier ist auf jeden Fall Nacharbeit erforderlich.
Wenn Ihre Tabelle im Browser nicht so dargestellt wird, wie Sie sich das vorgestellt haben oder wenn der Browser die Tabelle überhaupt nicht zeigt, dann gehen Sie den Quellcode durch. Meist wurde nur ein schließendes Tag vergessen oder ein öffnendes Tag zweimal hingeschrieben. Da man Tabellen ineinander schachteln darf, führt sowas den Browser in die Irre.
Man sollte aber bei all dem darauf achten, daß sich die Seiten auch mit abgeschalteten Bildern lesen lassen und daß man in den Seiten auch noch navigieren kann. Ein sehr schönes Beispiel sind auch die WWW-Seiten des Deutschen Museums in München (http://www.deutsches-museum.de/). Dort finden Sie auch ein weiteres Hilfsmittel für die Strukturierung einer Seite, die sogenannten "Frames". Sie dienen nicht nur der Seitengestaltung sondern primär der Benutzerführung und Navigation.

Seiten mit Struktur
Bisher haben wir versucht, die Texte zu strukturieren. Nun geht es darum, Möglichkeiten zur Navigation innerhalb eines Webangebotes zu finden. Eine Möglichkeit wurde schon besprochen, der "Link". Man kann beispielsweise Seiten erstellen, die etliche Links in Menüform enthalten, die dann weiterführen. Spätestens bei der dritten oder vierten "Unterseiten" wird es für den Besucher unübersichtlich. Auch Menüs, die über die Größe eines Bildschirms hinausgehen, sind nicht besonders schön. Eine gewisse Abhilfe bringen kleine Menüleisten am oberen und unteren Ende der Seite. Wenn man aber von Menüstrukturen verwöhnt ist, wie sie beim Apple Mac oder bei Windows üblich sind, dann wirken solche Seitenstrukturen etwas antiquiert. Deshalb wurde ein weiteres Hilfsmittel für die Strukturierung einer Seite entwickelt, die sogenannten "Frames". Sie dienen nicht nur der Seitengestaltung sondern primär der Benutzerführung und Navigation. Aber sie bringen auch Probleme mit sich. Oft lassen sich auf Frame-Inhalte keine Bookmarks legen und so gibt es später keinen direkten Weg zu einer bestimmten Information. Das frühere Problem, daß viele Browser nicht Frame-fähig waren, hat sich inzwischen in Wohlgefallen aufgelöst.

Frames
Mit Hilfe von Frames können Sie den Anzeigebereich des Browsers in verschiedene, frei definierbare Segmente (gewissermaßen einzelne 'Fenster') aufteilen. Jedes Segment, 'Frame' genannt, kann eigene Inhalte enthalten. Die einzelnen Frames können wahlweise einen statischen Inhalt (non SCROLLING regions) oder einen wechselnden Inhalt haben. Links in einem Frame können Dateien aufrufen, die dann in einem anderen Frame angezeigt werden. Frames stellen an das Design von HTML-Seiten besonders hohe Ansprüche. Einige Tips, die Sie beachten sollten, finden Sie weiter unten. Das Frame-Konzept erlaubt Hypertext-Funktionalitäten, die bislang nur mit Hilfe professioneller Hypertext-Systeme realisierbar waren. In jedem Frame stehen alle Anzeige-Features zur Verfügung - so ist es z. B. denkbar, in einem Frame Textinformation anzuzeigen, während in einem anderen Frame gleichzeitig ein passendes Video abläuft.
Mit Frames in Verbindung mit Formularen können Sie anwenderfreundliche Bedien-Oberflächen realisieren. So können Sie z. B. in einem linken Frame ein Formular für Sucheingaben zur Verfügung stellen, während rechts daneben in einem anderen Frame die jeweils aktuellen Suchergebnisse präsentiert werden.
Frames bergen aber auch Gefahren. Unüberlegte Anwendung von Frames kann den Anwender mehr verwirren als ihm zu helfen. Oft wird der Bildschirm mit Frames überladen und die einzelnen Fenster dadurch sehr klein. Oder einzelne Frames werden überhaupt nicht genutzt. Ein gewichtiger Nachteil ist, daß man Seiten, die in einem Frame dargestellt werden, nicht in die 'Bookmarks' aufnehmen kann. Daran sollte man denken, wenn man eine tief verschachtelte Hierarchie von Seiten in einem Frame darstellt.

Frame-Sets definieren
Mehrere zusammengehörige Frames bilden ein Frame-Set. Ein Frame-Set definieren Sie anstelle des herkömmlichen BODY-Tags. Wenn Sie in einer HTML-Datei ein Frame-Set definieren, sieht das Grundgerüst der Datei folgendermaßen aus:
<html> <head> <title>Frame-Test</title> </head> <FRAMESET ...> ... Frame-Definitionen ... </FRAMESET> </html>
<FRAMESET ...> leitet die Definition eines Frame-Sets ein. Dahinter folgen die Definitionen der einzelnen Frames. </FRAMESET> schließt die Definition des Frame-Sets ab. Beim Definieren von Frame-Sets bestimmen Sie auch, wie das Anzeigefenster aufgeteilt werden soll. Dabei müssen Sie sich das Anzeigefenster wie den leeren Rahmen einer Tabelle vorstellen. Damit die Tabelle Gestalt annimmt, müssen Sie Zeilen (Rows) und Spalten (Cols) definieren. Die Definition der Zeilen und Spalten erfolgt bei der Definition der Frame-Sets. Was in den einzelnen Zellen (Frames) stehen soll, geben Sie bei der Definition der einzelnen Frames an.

Das Bild zeigt eine Unterteilung des Browserfensters in zwei waagrechte Frames, die Definition dazu lautet:
<FRAMESET ROWS="20%,80%"> Erzeugt zwei Frames, deren Inhalt hier festgelegt wird... </FRAMESET>
Auch die vertikale Teilung läßt sich realisieren, indem man statt der Angabe ROWS (Zeilen) den Parameter COLS (Columns = Spalten) nimmt. Das Browserfenster wird dann geteilt wie im Bild angedeutet.

Die Definition dazu lautet:
<FRAMESET COLS="40%,60%"> Erzeugt zwei Frames, deren Inhalt hier festgelegt wird... </FRAMESET>
Man kann in einem Frameset natürlich mehr als zwei Spalten oder Zeilen angeben, aber nicht mischen. Will man eine Struktur wie im nächsten Bild erreichen, teilt man das Browserfenster erst in zwei Spalten und danach die rechte Spalte nochmals in zwei Zeilen.

<FRAMESET COLS="40%,60%"> Erzeugt zwei Frames, deren Inhalt hier noch festgelegt wird... <FRAMESET ROWS="20%,80%"> Erzeugt nochmal zwei Frames, deren Inhalt hier festgelegt wird... </FRAMESET> </FRAMESET>

Sie sehen, man kann Framesets schachteln. Über die Inhalte der Frames ist noch nichts festgelegt worden. Würde man diese WWW-Seite aufrufen, bekommt man lediglich drei leere Fenster. Durch die Angabe ROWS="xx%" im einleitenden Frameset-Tag bestimmen Sie die "Zeilen" und deren Höhen. Die Höhenangaben der einzelnen Zeilen trennen Sie durch Kommata. Anstelle der Prozentangaben können Sie auch absolute Zahlenwerte (in Pixel) benutzen, z.B. ROWS="120,520". Im Zusammenhang mit absoluten Zahlenwerten können Sie auch einen '*' als Jokerzeichen verwenden. So bewirkt beispielsweise ROWS="120,*,120" ein Set, das aus drei Zeilen für Frames besteht, wobei die erste und die letzte Zeile jeweils 120 Pixel hoch sind (z. B. für Kopf- und Fußzeilen). Die Höhe der mittleren Zeile ist durch einen Stern markiert und somit variabel. Sie ist durch die Größe des Anzeigefensters beim Anwender bestimmt. Durch die Angabe COLS="xx%" im einleitenden Frameset-Tag bestimmen Sie die "Spalten" und deren Breiten. Hierbei gelten die gleichen Regeln wie bei den "Zeilen". Alle Angaben hinter ROWS= und COLS= müssen in Anführungszeichen stehen.
Wenn Sie Anordnungen wie in Beispiel 3 erreichen wollen, müssen Sie, wie gezeigt, verschachtelte Frame-Sets definieren. Gehen Sie dabei hierarchisch vor. Im Bild dazu besteht die erwünschte Gesamtanordnung zunächst einmal aus zwei Spalten. Daß die rechte Spalte nochmals unterteilt werden soll, ist zunächst nicht wichtig. Sie definieren in diesem Fall zuerst ein Frame-Set mit zwei Spalten, im <FRAMESET COLS="40%,60%">. Da Ihre gedachte Tabelle in der rechten Spalte in zwei Zeilen unterteilt werden soll, brauchen Sie im nächsten Schritt Angaben zu den Zeilen. Die rechte Spalte, die zwei Zeilen enthalten soll, definieren Sie durch die entsprechenden Angabe <FRAMESET ROWS="20%,80%">.

Frames definieren
Nachdem Sie durch die Definition von Frame-Sets geeignete Segmente des Anzeigefensters bestimmt haben, geben Sie mit der Definition der Frames an, was in den einzelnen Segmenten angezeigt werden soll. Ferner können Sie verschiedene Eigenschaften für die Segmente bestimmen. Zum Beispiel:

<<html> <head> <title>Frame-Test</title> </head> <FRAMESET COLS="40%,60%"> <FRAME SRC="verweise.html"> <FRAMESET ROWS="20%,80%"> <FRAME SRC="kurzinfo.html"> <FRAME SRC="langinfo.html"> </FRAMESET> </FRAMESET> </html>

Mit <FRAME SRC="Dateiname"> definieren Sie innerhalb eines Frame-Sets den Inhalt der zugehörigen Frames. Bei der Adressierung der Dateien, die in einem Frame angezeigt werden sollen, gelten die gleichen Regeln wie bei der Referenzierung von Grafiken oder Links. Definieren Sie für jede "Zelle" Ihrer gedachten Tabelle einen Frame. Wenn Sie zu Beginn noch keinen Inhalt in einem Frame anzeigen wollen, lassen Sie die Angabe SRC= einfach weg und schreiben ein nacktes <FRAME>. Wenn Sie einen Frame ganz leer lassen wollen, schreiben Sie anstelle von <FRAME> einfach <noFRAME>.

Eigenschaften von Frames definieren
Jeder Frame wird, abhängig von der verwendeten Benutzeroberfläche des Anwenders, in einem eigenen Fenster angezeigt. Solche Fenster können verschiedene Eigenschaften haben: sie können Scroll-Leisten haben oder nicht, und sie können einen Mindestabstand zwischen Fensterrahmen und Fensterinhalt haben. Dazu ein Beispiel:
<FRAMESET COLS="40%,60%"> <FRAME SRC="links.html" SCROLLING=yes> <FRAME SRC="pics.html" SCROLLING=no> </FRAMESET>
Durch die Angabe SCROLLING=yes im Definitions-Tag eines Frames legen Sie fest, daß das Anzeigefenster des Frames in jedem Fall Scroll-Leisten besitzt. Durch die Angabe SCROLLING=no verhindern Sie dies. Wenn Sie das Scrollen des Fensterinhalts verhindern, können Inhalte, die größer sind als das Fenster, nicht vollständig angezeigt werden. Machen wir weiter:
<FRAMESET COLS="40%,60%"> <FRAME SRC="links.html" MARGINWIDTH=5 MARGINHEIGHT=12> <FRAME SRC="pics.html" MARGINWIDTH=5 MARGINHEIGHT=12> </FRAMESET>
Durch die Angabe MARGINWIDTH=x (Pixel) im Definitions-Tag eines Frames bestimmen Sie den Abstand zwischen rechtem bzw. linkem Fensterrand und dem Fensterinhalt. Durch die Angabe MARGINHEIGHT=x (Pixel) bestimmen Sie den Abstand zwischen oberem bzw. unterem Fensterrand und dem Fensterinhalt.
Frame-Fenster sind normale Dokument-Fenster innerhalb des Browser-Hauptfensters. Solche Dokument-Fenster kann der Anwender normalerweise in der Größe verändern. Sie können dies mit NORESIZE aus gestalterischen Gründen verhindern:
<FRAMESET COLS="40%,60%"> <FRAME SRC="links.html" MARGINWIDTH=5 MARGINHEIGHT=12> <FRAME SRC="pics.html" MARGINWIDTH=5 MARGINHEIGHT=12 NORESIZE> </FRAMESET>
Durch die Angabe NORESIZE im Definitions-Tag eines Frames verhindern Sie, daß der Anwender die Größe des Frame-Fensters verändern kann. Es genügt, die Angabe bei einem Frame zu schreiben. Benachbarte Frames können dann auch nicht bewegt werden.
Der MS Internet Explorer und der Netscape Navigator unterstützen beide ab Version 3.0 Frames ohne sichtbare Fensterrahmen oder mit frei bestimmbarer Rahmendicke. Bei unsichtbaren Fensterrahmen wirken die Frame-Fenster wie nahtlos aneinander gefügte Flächen am Bildschirm.
<FRAMESET COLS="40%,60%" FRAMEBORDER=0> <FRAME SRC="links.html" FRAMEBORDER=0> <FRAME SRC="pics.html" FRAMEBORDER=0> </FRAMESET>
Wenn Sie im einleitenden <FRAMESET>-Tag die Zusatzangabe FRAMEBORDER=0 schreiben, wird das gesamte Frame-Set ohne sichtbare Rahmen angezeigt. Nur erforderliche oder gewünschte Scroll-Leisten werden angezeigt. Wenn Sie in einem einleitenden <FRAME>-Tag die Zusatzangabe FRAMEBORDER=0 schreiben, wird bei diesem Frame-Fenster der sichtbare Rahmen unterdrückt. Wenn Sie bei FRAMEBORDER= eine Zahl größer Null angeben, bestimmen Sie die Rahmendicke in Pixeln. Mit FRAMEBORDER=10 definieren Sie also beispielsweise eine Rahmendicke von 10 Pixeln.
Um einen weiteren Zweck von Frames zu erreichen, nämlich durch Ankliken eines Links in einem Fenster, Information in einem anderen Fenster anzuzeigen, können Frames Namen erhalten. Einen benannten Frame können Sie dann in Links adressieren, d. h. Sie können beim Link angeben, daß das Linkziel in einem bestimmten (benannten) Frame angezeigt werden soll.
<FRAMESET COLS="40%,60%"> <FRAME SRC="links.html" NAME="KlickMe"> <FRAME SRC="pics.html" NAME="ShowMe"> </FRAMESET>
Durch die Angabe NAME= "Fenstername" im Definitions-Tag eines Frames weisen Sie dem Frame einen Namen zu. Fensternamen müssen in Anführungszeichen stehen, dürfen nicht zu lang sein und nur aus Buchstaben, Ziffern und dem Unterstrichen bestehen. Bei selbst vergebenen Namen darf das erste Zeichen des Namens kein Unterstrich sein. Folgende reservierte Fensternamen haben bei Links eine spezielle Bedeutung:

_blank: Das Linkziel wird in einem neuen Fenster angezeigt.
_self: Das Linkziel wird im gleichen Fenster angezeigt wie der Link.
_parent: Das Linkziel wird im übergeordneten Fenster angezeigt. Falls es kein übergeordnetes Fenster gibt, wird das Linkziel im gleichen Fenster angezeigt wie der Link selbst.
_top: Das Linkziel wird im ersten Fenster einer Fensterhierarchie angezeigt. Falls es kein übergeordnetes Fenster gibt, wird das Linkziel im gleichen Fenster angezeigt wie der Link selbst.

Links zu anderen Frames schreiben
Sie können bei Links zu anderen Dateien festlegen, daß die adressierte Datei in einem bestimmten Frame angezeigt wird.
<a href="info.html" TARGET="rechts">Link zum Fenster</a>
Zur Adressierung eines Frames in einem Link schreiben Sie einen gewöhnlichen Hyperlink-Befehl. Im einleitenden Tag schreiben Sie jedoch die zusätzliche Angabe TARGET=Frame-Fenster-Name. Der Name des Fensters muß in Anführungszeichen stehen. Sie können hinter TARGET= sowohl selbst definierte Fenster als auch reservierte Fensternamen angeben.
Sie können in einer HTML-Datei angeben, daß alle darin enthaltenen Links zu einem bestimmten anderen Frame-Fenster führen. So müssen Sie nicht bei jedem Link die gleiche Frame-Adressierung mit angeben. Besonders sinnvoll ist dies, wenn Sie z. B. ein Fenster mit sehr vielen Links haben, deren Linkziele in einem anderen Fenster angezeigt werden sollen. Das voreingestellte Frame-Fenster für Links können Sie im Dateikopf einer HTML-Datei bestimmen. Dazu müssen Sie zwischen <HEAD> und </HEAD> die Anweisung <BASE TARGET=...> schreiben. Hinter TARGET= folgt der Name des gewünschten Frame-Fensters. Der Name des Fensters muß in Anführungszeichen stehen:
<head> <base TARGET="Rechtes_Fenster"> .... </head>
Frames sind ein Werkzeug, mit dem man viel verkehrt machen kann. Generell gilt: jeder Einsatz von Frames muß gerechtfertigt sein. Das bedeutet: die Verwendung der Frame-Technik muß dem Anwender als sinnvoll und vorteilhaft erscheinen. Wer Frames aus purem Selbstzweck einsetzt, muß damit rechnen, als technikverliebter HTML-Novize statt als souveräner Web-Designer betrachtet zu werden. Der Grund dafür sind gewisseNachteile von Frames: Frames werden nicht von älteren WWW-Browsern angezeigt. Bei kleineren Bildschirmen, z. B. bei 15-Zoll-Monitoren mit einer Bildschirmauflösung von 640 x 480 Pixeln, sind mehr als zwei Frame-Fenster bereits eine Zumutung fürs Auge und die Übersicht. Frames verlangen in der Regel mehr Arbeitsspeicher, da mehrere WWW-Seiten inclusive HTML- und zugehörigen Grafikdateien gleichzeitig geladen werden müssen. Im WWW kann es unter ungünstigen Verhältnissen auch leichter zu unzumutbaren Ladezeiten kommen.
In folgenden Fällen ist der Einsatz von Frames für den Anwender am ehesten nachvollziehbar:
Schnelles Wechseln zwischen Informationseinheiten: In diesem Fall enthält ein Frame-Fenster ein umfangreiches Verzeichnis mit anklickbaren Links auf einzelne Informationsseiten, die in einem anderen, festen Frame-Fenster angezeigt werden. Das "Inhaltsverzeichnis" bleibt also jederzeit eingeblendet, und der Anwender kann zu jedem Zeitpunkt einen neuen Link daraus auswählen. Ständiges Einblenden von NAvigationshilfen: Bei umfangreichen Projekten, in denen dem Anwender das Gefühl des "lost in hyperspace" droht, ist es sinnvoll, in einem separaten Frame-Fenster immer gültige Steuerverweise anzubieten, z.B. zur Homepage, zur nächsthöheren logischen Ebene, zum Stichwortverzeichnis oder zur Suchdatenbank. Gleichzeitiges Anzeigen von zu vergleichenden Informationen: Hypertext bedeutet nicht nur, dem Anwender per Mausklick weitere Information zur Verfügung zu stellen, sondern auch, dem Anwender die Möglichkeit zu bieten, sich selbst Information so zusammenzustellen. Zu diesem Zweck eignet sich die Frame-Technik hervorragend, da sie es erlaubt, verschiedene, getrennt voneinander gespeicherte Information auf Anwenderwunsch gleichzeitig anzuzeigen.

Schaufenster-Effekte
Mit Hilfe von Frames ist es auch möglich, fremde WWW-Seiten innerhalb eines Frame-Fensters im eigenen Web-Angebot darzustellen. Dies ist jedoch sehr problematisch und in den meisten Fällen unfair. Denn auf diese Weise verkommen fremde WWW-Seiten zu "Schaufenstern" innerhalb des eigenen Web-Projekts. Das ist eine unfeine Geste gegenüber den Fremdanbietern, weil es das eigene Web-Projekt in den Augen des Anwenders als "Mega-Projekt" erscheinen läßt. Wenn Sie innerhalb eines Frame-Projekts auf fremde Seiten verweisen, sollten Sie den ursprünglichen Fensterzustand wiederherstellen Setzen Sie den Link so, daß der Anwender Ihr definiertes Frame-Set verläßt und wieder den Fensterzustand erhält, den er vor Aufruf Ihres Projekts hatte. Dies erreichen Sie durch Links von der Art
<A HREF="http://..." TARGET="_parent">Linktext</a>

Frames und Gestaltung
Mindestens ein Frame-Fenster sollte einen unveränderbaren Inhalt haben. Wenn Sie etwa mit zwei Frame-Fenstern arbeiten, sollte das eine davon konstant eingeblendete Links und das andere die variabel anzuzeigenden Linkziele enthalten. Wenn Sie drei Frame-Fenster einsetzen, sollte ein Fenster eine konstante Leiste mit wichtigen Navigationsverweisen enthalten. Wenn Sie Frames verwenden, ist es noch wichtiger als bei "einzelnen" WWW-Seiten, auf ein einheitliches, nachvollziehbares Design und eine klare Farbgestaltung zu achten.
Zum Schluß will ich Ihnen noch ein einfaches Frame-Muster mit auf den Weg geben. Es besteht aus wenigen Dateien. Die erste, "index.html" definiert dien Frameset:
<html> <head><title>Frame-Beispiel</title></head> <FRAMESET COLS="20%,80%" border=0 frameborder="NO" framespacing=0 framepadding=0 marginheight=0 marginwidth=0> <FRAME SRC="navigation.html" NAME="Klicky"> <FRAMESET ROWS="80,*" border=0 frameborder="NO" framespacing=0 framepadding=0 marginheight=0 marginwidth=0> <FRAME SRC="top.html"> <FRAME SRC="inhalt.html" NAME="Inhalte"> </FRAMESET> </FRAMESET> </html>
Die zweite Datei bildet den Inhalte des linken Frames und heißt naviagation.html". Hier ist oben ein Bild und dann ein einfaches Menü definiert. Alle über das Menü aufgerufenen Infos werden im rechten unteren Frame angezeigt:
<html> <head><title>Frame-Beispiel</title></head>
<BODY BGCOLOR="#99CCFF" LINK="#000033" ALINK="#669900" VLINK="#660000"> <BR> <center><img src="Afraid.gif" border=0 alt=""></center> <BR> <H3>Musikauswahl</H3> <P> <BLOCKQUOTE> <A HREF="inhalt.html" target="Inhalte">Rap</A><BR> <A HREF="xxx.html" target="Inhalte">Hiphop</A><BR> <A HREF="xxx.html" target="Inhalte">Techno</A><BR> <A HREF="xxx.html" target="Inhalte">House</A><BR> <A HREF="xxx.html" target="Inhalte">Pop</A><BR> <A HREF="xxx.html" target="Inhalte">Rock</A><BR> <A HREF="xxx.html" target="Inhalte">Klassik</A><BR> <A HREF="../index.html" target="_top">Startseite</A><BR> </BLOCKQUOTE> </body> </html>
Der rechte obere Frame ("top.html")ist recht schmal und enthält nur den Firmennamen. Er bleibt stehen, auch wenn im Info-Frame gescrollt wird.
<html> <head><title>Frame-Beispiel</title></head> <BODY BGCOLOR="#99CCFF" LINK="#000033" ALINK="#669900" VLINK="#660000"> <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0> <TR> <TD ALIGN=LEFT VALIGN=TOP WIDTH="100%"> <FONT SIZE="+2" FACE="Arial,Helvetica,Swiss"> BOAH! Unlimited</FONT><BR> <FONT SIZE="+1" FACE="Arial,Helvetica,Swiss"> New York - Berlin - Tokio</FONT> </TD> <TD ALIGN=RIGHT VALIGN=TOP> <FONT SIZE="+2" FACE="Arial,Helvetica,Swiss"> Musik-CDs<BR>Musik-MCs</FONT><BR> </TD> </TR></TABLE> </body> </html>
Der letze Frame rechts unten nimmt jeweils die aktuell gewählte Infodatei auf. Hier habe ich eine Platzhalterdatei verwendet, die dann später mit sinnvoller Info gefüllt wird.
<html> <head><title>Frame-Beispiel</title></head> <body bgcolor="#ffffff" text="#000000" link="#0000ff" alink="#000000" vlink="#000099">
<H2>Informationen</H2> Blablablablablablablablablablablablablablablablablablablabla Blablablablablablablablablablablablablablablablablablablabla Blablablablablablablablablablablablablablablablablablablabla Blablablablablablablablablablablablablablablablablablablabla Blablablablablablablablablablablablablablablablablablablabla Blablablablablablablablablablablablablablablablablablablabla Blablablablablablablablablablablablablablablablablablablabla </body> </html>
Das Ergebnis können Sie unten bewundern. Durch die Parameter der Frameset-Definition gibt es auch keine Lücke zwischen linkem und oberen Frame.

Wenn Sie sehen wollen, wie es gemacht wird, dann HIER klicken.
Damit ist auch unser kleiner Ausflug in die Webseiten-Gestaltung zuende. Schon Heraklit sagte, das einzig Beständige sei der Wandel. Das gilt auch für WWW-Seiten. Fangen Sie einfach mal an, denken Sie daran, welchen Nutzen die Seiten für andere haben sollen, übernehmen Sie Ideen anderer Webseiten, vermeiden Sie Dinge, die Ihnen bei anderen Webseiten nicht gefallen, und dann kann nicht allziviel schief gehen. Zum Schluß noch ein paar Links mit HTML-Informationen und -Anleitungen:
Tabelle der Zeichen-Entities
http://de.selfhtml.org/
http://www.boku.ac.at/htmleinf/
http://www.franken.de/users/tychen/faq/htmlfaq.html
http://www.karzauninkat.com/Goldhtml/goldhtml.htm
Farbspektrum als HTML-Datei
Download dieses Skripts

	Immer zündende Ideen mit der tollen Webseite von den famosen Designern der Firma Dings & Bums GmbH