\\|//,
                                   /     /
                                   @ @  /|
                                  |/  ?
                                  | ~ )\
                                  /__/\ \____
                                 /   \_/    \
                                / <_ ____,_  \
+------------------------------/___/_____  \,-'--------------------------------+
|                                       \\\                                    |
|                                                                              |
|     Schritt 6 : Kleiner HTML-Kurs - Vertiefen Sie Ihre HTML-Kenntnisse       |
|                                                                              |
+------------------------------------------------------------------------------+


<-------------====================================================------------->
                      Wahl des geeigneten Web-Editors
<-------------====================================================------------->

Ich empfehlen Ihnen, bei der Erstellung Ihrer Seiten für eine gewisse Zeit bei
einem normalen Text-Editor zu bleiben. Das hilft Ihnen, Ihre HTML-Kenntnisse zu
vertiefen. Die werden Sie im Laufe Ihrer "Homepage-Karriere" immer gut brauchen
können; z.B. wenn es darum geht bestimmte Goodies in Ihre Seiten einzubauen oder
Ihre Seiten zu optimieren.

Verlassen Sie bald das Windows Notepad als Webseiten-Erstellungswerkzeug, und 
wenden Sie sich zunächst einem professionellen, textbasierten (nicht-WYSIWYG-) 
HTML-Editor zu. Ich lege Ihnen den sehr guten HTML-Editor "Phase 5" von Ulli 
Meybohm ans Herz. Dieser ist Freeware und lässt sich bei
           www.meybohm.de
herunterladen. Sehr interessant ist auch das Foto-Interview mit Ulli bei
           http://krit.de/apfel-ulli-m.shtml .

Der "Phase 5" Editor hat u.a. den Vorteil, dass die HTML-Befehle farblich
gekennzeichnet sind und sich die wichtigsten Formatierungen durch Markieren des
betroffenen Textes und Anklicken eines entsprechenden Buttons erzeugen lassen.
Außerdem kann "Phase 5" auch Dateien über 32 bzw 64 KB bearbeiten, und es lassen
sich Tools zur HTML-Fehlerüberprüfung einhängen.

Weitere gute textbasierte kostenlose Freeware HTML-Editoren sínd:

- "First Page 2000" von EVRSoft. First Page hat eine englische
     Bedienungsoberläche und steht auf www.evrsoft.com zum Herunterladen
     bereit.
- "W3E" mit englischer Bedienungsoberfläche. Erhältlich unter
     http://acd.ufrj.br/~cracky/w3e/
- "Arachnophilia" von Paul Lutus . Steht auf www.arachnoid.com zum
     Download bereit.
- "VIM" mit englischer Bedienungsoberfläche und sehr guter Sytax-Hervorhebung.
     VIM ist erhältlich für Linux, Windows und viele weitere Betriebsysteme
     auf www.vim.org .

Wenn Sie genug "unter die Haube" von HTML geschaut haben und sich einigermaßen 
damit auskennen, können Sie nach dem Durcharbeiten dieses HTML-Kurses später 
immer noch auf einen komfortablen visuellen WYSIWYG Editor umsteigen, in dem Sie 
Ihre Texte und Bilder direkt wie in einer Textverarbeitung eingeben und 
formatieren können, ohne mit HTML-Code in Berührung zu kommen. WYSIWYG heißt 
"What you see is what you get", das heißt: Sie sehen schon bei der Erstellung 
sofort, was der Browser später anzeigt.

Die besten momentan erhältlichen WYSIWYG-Editoren sind in der Reihenfolge meiner
persönlichen Bewertung:
- Dreamweaver (von Macromedia, www.macromedia.com/de/software/ )
- GoLive (von Adobe, www.adobe.de)
- Namo WebEditor (von Namo, www.namo.com )
- Frontpage 2000 (von Microsoft, www.microsoft.de)
- Fusion (von NetObjects, www.netobjects.de)

Allen diesen WISIWYG-Webeditoren ist jedoch gemeinsam, dass sie erstens recht 
teuer sind (100 bis 350 EUR) und zweitens wesentlich mehr HTML-Code absetzen als 
erforderlich ist und dadurch die Webseiten enorm aufblähen. Besonders berüchtigt 
ist in dieser Hinsicht NetObjects Fusion. Dreamweaver ist dafür bekannt, 
Webseiten zu erzeugen, die in allen Browsern weitgehend gleich aussehen. Das 
kann man von Frontpage nicht sagen: Die damit erstellten Seiten sind eindeutig 
in Richtung Internet Explorer optimiert und sehen in anderen Browsern 
gelegentlich katastrophal aus oder lassen sich gar nicht öffnen.

Von den Billig-Editoren, die einige Provider wie AOL anbieten, rate ich ab,
weil man da sehr schnell an die Grenzen stößt. Sie sind im Grunde nur für
die Erstellung der ersten kleinen "Visitenkarte" geeignet.

Von der Verwendung sogenannter HTML-Exportfilter für Office-Programme, wie etwa
Word für Windows, kann ich ebenfalls nur abraten. Sie werden Ihre Seiten nach
dem Export ins HTML-Format nicht mehr wiedererkennen, und die Ergebnisse sind in
der Regel auf das Vielfache mit völlig überflüssigem HTML- Code aufgebläht.
Schauen Sie sich das "Exportergebnis" doch einmal spaßeshalber mit einem
Texteditor an. Sie werden sich wundern!

Auch die mit den Browsern mitgelieferten WYSIWYG-Editoren Microsoft Frontpage 
Express und Netscape Composer sind nur für kleinere Webprojekte zu empfehlen. So 
beherrschen sie teilweise noch nicht einmal Frames.

Entschuldigen Sie bitte, wenn ich Sie jetzt vollkommen verwirrt haben sollte. 
Aber Sie sehen schon: D e n  idealen Webeditor, der obendrein noch kostenlos 
ist, gibt es nicht! Da muss ich Sie leider mit Ihrer Entscheidung allein lassen. 
Die wichtigsten Kriterien und Argumente kennen Sie ja nun.

Ich selbst bin bei einem normalen Texteditor geblieben, um immer alles unter 
Kontrolle zu haben. Das ist aber sicherlich Geschmacksache. Ich verwende M&I 
WinEditor. Das ist ein hervorragender Allzweck-Editor, dessen Testversion bei 
http://ourworld.compuserve.com/homepages/Mi_software zum Download bereitsteht. 
Die Vollversion kostet 25,- EUR. M&I WinEditor unterstützt neben vielen anderen 
Programmiersprachen auch HTML durch "Syntax Coloring", d.h. das Einfärben der 
Sprachbefehle und des Kommentars. Außerdem erlaubt er ein bequemes Umwandeln der 
Umlaute in HTML-Codes und umgekehrt in je einem Arbeitsgang.

                                                                    [zum Inhalt]

<-------------====================================================------------->
                    Grundsätzlicher Aufbau einer HTML-Datei
<-------------====================================================------------->

Eine HTML-Datei hat die Dateiendung "htm", ab Windows 95 ist auch "html"
möglich. HTML-Dateien sind grundsätzlich wie folgt aufgebaut (siehe auch
Schritt 4):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Text des Titels</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8559-1">
</head>
<body>
Text, Verweise, Grafikreferenzen usw.
</body>
</html>

Die in spitzen Klammern stehen HTML Befehls-Tags haben Sie schon in Schritt 4
kennengelernt. Mehr darüber erfahren Sie gleich unten im Abschnitt "Regeln für
Befehlstags".

Mit <DOCTYPE ...> spezifizieren Sie den HTML-Sprachstandard 4.0 und geben an,
daß Sie außerdem  Style-Sheets und/oder Scriptsprachen in der Datei einsetzen.
Dieses Tag ist momentan unwichtig, könnte jedoch später für die Kompatibilität
mit künftigen HTML- und Browser-Version bedeutsam werden.

Das oben angegebene Meta-Tag <meta http-equiv ... charset=iso-8559-1"> sollten
Sie immer einfügen. Hiermit definieren Sie den Zeichensatz ISO-8559-1 (Western
Latin-1) als gültigen Zeichensatz, der auch die deutschen Umlaute und das
scharfe S enthält. Wenn Sie diesen Zeichensatz aktivieren, spricht nach HTML 4.0
nichts dagegen, Text in eine HTML-Datei einzugeben, ohne darin etwa die Umlaute
mit den Codes "&auml;" , "&ouml;" usw. umschreiben zu müssen (siehe unten bei
"Sonderzeichen"). Zur Kompatibilität mit älteren Browsern kann es trotzdem
sinnvoll sein, die Sonderzeichencodes zu verwenden.

Zwischen <head> und </head> steht der Seitenkopf, der die Titeldefinition und
bei Bedarf die folgenden, nicht vom Browser angezeigten Zusatzangaben enthält:

- Metatags für die Suchmaschinen usw. (siehe unten in Schritt 10)
- Definition eines Frameset (siehe unten bei "Frames")
- Definition von JavaScripts (siehe unten)
- Definition von Stylesheets (siehe unten bei "Cascading Stylesheets")

Hinweis: In den folgenden HTML-Beispieldateien werde ich das <DOCTYPE! ...> und
das <meta http-eqiv ...> Tag der Übersichtlichkeit halber weglassen. Bei den
meisten im deutschen Sprachraum verwendeten neueren Browsern wird es trotzdem
keinerlei Probleme mit der Anzeige der Beispieldateien geben.

Der durch <body>...</body> eingeschlossene Body einer HTML-Seite enthält die
eigentliche vom Browser anzuzeigende Klartext-Information sowie HTML-
Anweisungen, die für das Layout sorgen und Hyperlinks.

      ______________________________________________________
_____/ Angabe der Text- und Hintergrundfarben im <body> Tag \___________________

Die Farben des Hintergrundes und der Textelemente können Sie als Attribute im
Body-Tag wie folgt angeben:

<body bgcolor=#FFFFFF text=#000000 link=#0000FF vlink=#800080 alink=#FF0000>

In diesem Beispiel sind die Farben so gewählt wie in der Vorbesetzung, d.h.
so wie sie der Browser anzeigt, wenn die Attribute fehlen.

- "bgcolor" kennzeichnet die Hintergrundfarbe. Ein Beispiel haben Sie bereits
            in Schritt 4 kennen gelernt.
- "text"    kennzeichnet die Textfarbe. Ich rate Ihnen: Bleiben Sie
            normalerweise bei der voreingestellten schwarzen Textfarbe.
            Die ist - zusammen mit einem hellen Hintergrund - am besten lesbar.
- "link"    definiert die Farbe der Links. Die Voreinstellung ist blau
- "vlink"   definiert die Farbe der bereits besuchten ("visited") links,
            normalerweise  dunkel-lila
- "alink"   kennzeichnet die Farbe des aktiven (gerade betätigten) Links,
            normalerweise rot

Die 3 letzeren Textfarben sollten Sie möglichst nicht ändern, damit die
Seitenbesucher ihre gewohnte Orientierung bei den Links nicht verlieren.

Unten im Abschnitt "Farbe" erhalten Sie mehr Informationen über die mit
"#xxxxxx" bezeichneten Farbcodes.

                                                                   [zum Inhalt]
      _________________________________________
_____/ Hintergrundgrafik im <body> Tag angeben \________________________________

Über das "background" Attribut im Body-Tag können Sie eine Hintergrundgrafik
für Ihre Webseite angeben. Was dazu zu sagen ist und was ich von solchen
Hintergründen halte, steht in dem folgenden Beispiel:

      ________________________________
_____/ Beispiel für Hintergrundgrafik \_________________________________________

Starten Sie die folgende HTML-Seite bgrafik.htm, um die nette Hintergrundgrafik 
"tropfen.gif" zu betrachten, und lesen Sie den Text, um mehr über 
Hintergrundgrafiken zu erfahren:

<html><title>Hintergrund-Grafik</title>
<body background="bilder/tropfen.gif" bgproperties=fixed>
Bei dem Hintergrundbild sollten Sie beachten, dass der Browser eine Grafik
kachelt. Das heißt, sobald die Grafik "zu Ende" ist, wird sie direkt daneben
erneut angesetzt. Bei manchen Hintergrundbildern bewirkt dies einen sehr
unschönen Effekt. Achten Sie also in diesem Falle darauf, Ihre Grafik
entweder so groß zu machen, dass sie nicht gekachelt wird (z.B. 1600 x 1200
Pixel) oder für einen "stoßfreien" Rand-Übergang zu sorgen. Gute
Grafikprogramme stellen spezielle Tools für eine saubere "Kachelung" zur
Verfügung.
<br><br>
Mit dem Attribut "bgproperties=fixed" erreichen Sie, daß sich die
Hintergrundgrafik sich beim Scrollen nicht mitbewegt. Der Hintergrund wirkt
dadurch wie abgelöst vom Vordergrund (Wasserzeichen-Effekt). Das ist ein
cooler Effekt, der aber bislang nur beim Internet Explorer funktioniert,
Andere Browser überlesen dies Attribut, zeigen die Seite aber trotzdem
mit fester Hintergrundgrafik korrekt an.
<br><br>
Ich persönlich finde Hintergrundgrafiken zwar eine nette Spielerei, aber total
überflüssig. Sie verbessern fast nie die Lesbarkeit und tragen überhaupt nichts
dazu bei, die eigentlichen Inhalte Ihrer Webseite 'rüberzubringen. Auf
professionellen Webseiten werden Sie Hintergrundgrafiken fast nie finden.
Schauen Sie sich doch mal www.spiegel.de,www.heise.de oder die Startseite
einer beliebigen Suchmaschine an.
</body>
</html>

... und so sieht's im Browser aus (Datei bgrafik.htm)

      _____________________________
_____/ Regeln für die Befehls-Tags \____________________________________________

Prinzipiell gibt es Tags, die alleine stehen, z.B. <meta ...> und solche, die 
ein mit einem Schrägstrich gekennzeichnetes Endetag haben müssen, z.B. 
<head>...</head>. Im letzteren Falle bewirkt das Tag-Paar eine besondere 
Interpretation oder Formatierung des zwischen den Beiden Teil-Tags stehenden 
Inhalts. Sollen mehrere solcher Tags auf eine Textpassage angewendet werden, so 
dürfen sich diese nicht "überlappen", sondern müssen ineinandergeschachtelt 
werden. Anbei ein Beispiel:

  Falsch:  <b><i>Dies ist ein fetter und schräger Text</b></i>
  Richtig: <b><i>Dies ist ein fetter und schräger Text</i></b>

Ein Tag kann auch zusätzliche Angaben - sogenannte "Attribute" - beinhalten, 
z.B. "http-equ="Content ..." im obenstehenden <meta ...> Tag. Ein Attribut 
besteht fast immer aus der Kombination <... ATTRIBUT=ATTRIBUTWERT ...>, es gibt 
aber auch einige Attribute ohne Attributwert. Sie machen keinen Fehler, wenn Sie 
alle Attributwerte in "Anführungszeichen" setzen. Dies wird in künftigen HTML-
Standards sogar bindend vorgeschrieben sein.

Die Tags können beliebig in Groß- oder Kleinbuchstaben geschrieben werden. <BR> 
ist also gleichbedeutend mit <br>. Ich bevorzuge die Kleinschreibung, weil das 
bequemer ist: Es entfällt dann ja das dauernde Drücken der Shift-Taste. Außerdem 
wird bei künftigen HTML-Standards die Kleinschreibung bindend vorgeschrieben 
sein.

                                                                    [zum Inhalt]

<-------------====================================================------------->
                         Absätze formatieren
<-------------====================================================------------->

Mehrfache Leerzeichen und alle Zeilenumbrüche werden vom Browser
grundsätzlich ignoriert und nicht angezeigt. Der Browser erzeugt die
Zeilenumbrüche automatisch - angepasst an die jeweilige Breite des
Browserfensters.

Zeilenumbrüche können Sie jedoch jederzeit mit <br> erzwingen ("Break").

Text, den Sie zwischen die Tags <nobr> ... </nobr> einfügen, wird nicht vom 
Browser umgebrochen ("No Break"). Hierdurch können Sie ein definierte 
Zeilenlänge erzwingen. Aber vorsicht: Ist die Zeile breiter als das Browser-
Fenster, dann ist sie nur durch horizontales Scrollen lesbar.

Mit <p> ... </p> erzeugen Sie einen Absatz ("Paragraph"). Hinter einem
solchen Absatz wird automatisch eine Leerzeile eingefügt.

Mit dem Tag <wbr> können Sie einen Zeilenumbruch in einem Wort zulassen    
("Word BReak"). Dies ist besonders sinnvoll nach einem Bindestrich.     
Schreiben Sie z.B. "Web-<wbr>Editor", um eine Trennung in dem Wort "Web-
Editor" zuzulassen.

      ____________________________________
_____/ Beispiel: Ausrichtung von Absätzen \_____________________________________

Wie man Absätze ausrichten kann, erfahren Sie in dem folgenden Beispiel:

<html><head><title>Absatz-Formatierung</title><body>
  (1) Hier ist ein Absatz zu Ende. Normalerweise werden Absätze linksbündig
ausgerichtet
<p align=center>
  (2) Hier beginnt ein neuer Absatz, der zentriert ausgerichtet wird, also
      mittig im Browserfenster.</p>
<p align=right>
  (3) Hier beginnt ein neuer Absatz, der rechts ausgerichtet wird.</p>
<p align=justify>
  (4) Hier beginnt ein neuer Absatz mit Blocksatz. Zwischen den  Wörtern fügt
      der Browser Leerzeichen ein, die bewirken dass der Text rechts- und
      linksbündig ausgerichtet ist - wie in einem rechteckigen Block. Ich
      persönlich halte den Blocksatz wegen der hässlichen Lücken für unschön
      und unprofessionell. Er ist höchstens dann sinnvoll, wenn man den Text
      durch blinde Tabellen in mehreren Spalten nebeneinander anordnet.</p>
</body>
</html>

... und so sieht's im Browser aus (Datei absatz.htm)


Hinweis: Ältere Browser, etwa Netscape 3, werten das align-Attribut nicht aus.
         Ich persönlich verwende daher lieber <center><p>TEXT</p></center> statt
         <p align=center>TEXT</p> .

                                                                    [zum Inhalt]

<-------------====================================================------------->
                              Links einfügen
<-------------====================================================------------->

Webseiten leben von Hyperlinks, das sind Verweise zu anderen Seiten, zu E-
Mailadressen, Stellen innerhalb der aktuellen HTML-Datei usw.

Alle Links haben den folgenden Aufbau:

    <a href="URL_DES_LINKS">BESCHREIBUNGSTEXT</a>"

Das "a" steht dabei für "Anker" (Ankerpunkt).

Die Verwendung von Links ist kinderleicht. Ich beschränke mich daher auf die 
Angabe einiger Beispiele, die weitgehend selbsterklärend sind.

      ________________________________________
_____/ Beispiele für die Verwendung von Links \_________________________________

Rufen Sie die folgende HTML-Passage einmal in Ihrem Browser auf, fahren Sie mit 
der Maus über die einzelnen Links und betrachten Sie dabei auch die untere 
Statuszeile in Ihrem Browser: Dort erscheinen die Links so, wie Ihr Browser sie 
interpretiert.

<html><head><title>Link-Beispiele</title><body>
<h2>Link-Beispiele</h2>
<pre>
<b>------------------ Link zu einer anderen Webseite -------------------</b>
<a href="http://www.antonis.de">Thomas Antonis Homepage</a>

<b>------------------ Link zu einer E-Mailadresse ----------------------</b>
Ihr Seitenbesucher kann natürlich nur dann eine E-Mail an die im Link
angegebene Adresse senden, wenn er in seinem Browser ein E-Mail Programm
konfiguriert hat, z.B. Outlook Express oder den Netscape Messenger.:

Sende eine <a href="mailto:thomas@antonis.de">Mail an Thomas</a>

<b>-------- "Relative Links" zu Dateien auf derselben Webseite ----------</b>
(Achtung: In diesem Beispiel funktionieren die Links wegen der fehlenden
Verzeichnisstruktur nicht)

<a href=datei.htm>
      Link zu Datei in demselben Verzeichnis</a>
<a href="verzeichnis/datei.htm">
      Link zu Datei in Unterverzeichnis </a>
<a href="verzeichnis/unterverz/datei.htm">
      Link zu Datei in Verzeichnis weit unterhalb</a>
<a href="../datei.htm">
      Link zu Datei ein Verzeichnis höher</a>
<a href="../../../datei.htm">
      Link zu Datei drei Verzeichnisse höher</a>
<a href="../woanders/datei.htm">
      Link zu Datei in einem anderen Verzeichnis unterhalb des nächsthöheren</a>
      
<b>------------------- Link innerhalb derselben Datei -------------------</b>
Klicken Sie <a href="#unten">hier</a>, um "unten" eine Grafik als Link zu
bewundern.

<b>------ Link zu einer Download-Datei, z.B. einem ZIP-Archiv -----------</b>
Hier können Sie <a href="gruss.zip">einen Gruss downloaden</a>

<b>--------- Link zu einer Grafik auf einer anderen Webseite ------------</b>

<img src="http://www.antonis.de/pics/thomas.jpg" alt="Foto von Thomas">

<b>------------- Ziel eines Links innerhalb derselben Seite -------------</b>
<a name="unten">Dies ist das Ziel "unten"</a>

<b>-------------------- Grafik als Link verwenden ------------------------</b>
Klick auf den Elch, um Antonis.de zu besuchen:
<a href="http://www.antonis.de">
  <img src="bilder/elch.gif"  border=0 alt="Antonis.de">
</a>
Mit "border=0" wird der hässliche Rand um die Grafik ausgeblendet.

<b>-------- gelinkte Webseite in einem neuen Browserfenster öffnen -------</b>
... das empfiehlt sich bei Links zu fremden Seiten, vor allem, wenn die
eigene Seite auf Frames basiert.
<a href="tabelle1.htm" target=_blank">Mit "target=_blank" das kleine
Tabellenbeispiel 1 in einem neuen Browserfenster öffnen </a>

</pre></body>
</html>

... und so sieht's im Browser aus (Datei links.htm)

      ________________
_____/ Relative Links \_________________________________________________________

Im obigen Beispiel sehen Sie im Abschnitt "Relative Links ...", wie Sie Links 
innerhalb desselben Datentägers (Festplatte auf dem Server oder Ihrer heimischen 
Festplatte) realisieren können.

Bei relativen Links entfällt der URL-Bestandteil "http://www.", und es wird nur 
der Pfadname bestehend aus dem Dateinamen und gegebenenfalls dem Verzeichnis 
angegeben.

Relative Links haben den Vorteil, dass sie auch dann funktionieren, wenn der
Inhalt Ihres Webordners sich zum Ändern und Testen auf Ihrer Festplatte befindet
und noch nicht auf den Webserver heraufgeladen ist.

                                                                    [zum Inhalt]
      ___________________________
_____/ Grafik als Link verwenden \______________________________________________

Das obige Beispiel verdeutlicht, wie Sie eine Grafik, in diesem Falle die GIF-
Grafik "elch.gif", als Link zu einer anderen Webseite verwenden können. Genauso
können Sie natürlich auch eine Grafik als Link zu einem "Ankerpunkt" innerhalb
derselben HTML-Seite verwenden.

Beachten Sie das Attribut "border = 0" bei der "Grafik als Link". Ohne diese
Angabe wird die Grafik in einigen Browsern (Netscape & Co) mit einem hässlichen
Rahmen angezeigt.

      ___________________________________________________
_____/ Links zu "Ankerpunkten" innerhalb derselben Datei \______________________

Mit <a name = "sprungstelle"></a> definieren Sie innerhalb einer Webseite einen
"Ankerpunkt" des Namens "sprungstelle". Aus derselben Webseite heraus verweisen
Sie mit Hilfe des Hyperlinks <a href="#sprungstelle">BESCHREIBUNG</a> auf die
Sprungstelle. Ein Beispiel hierfür finden Sie in der obenstehen Datei
"links.htm" beim Link auf den Zieltext "Dies ist das Ziel "unten"".

Sie können auch aus einer anderen HTML-Seite heraus den Ankerpunkt statt des
Seitenanfangs direkt anspringen durch Zufügung eines '#' und den Ankernamen an
die Adresse der Zielseite; Beispiel: <a href="andereseite.htm#sprungstelle">.

      ____________________________________
_____/ Verzeichnisstruktur Ihrer Webseite \_____________________________________

Legen Sie alle Dateien ihrer Webseite auf Ihrem Computer und auf dem Server in
identisch benannte Ordner und Unterordner ab. Verwenden Sie soweit wie möglich
relative Links. Dann können Sie Ihre Webseite jederzeit auch offline auf Ihrem
heimischen Computer testen, bevor Sie diese auf den Server heraufladen.

Hinterlegen Sie Ihre Grafiken in einem eigenen Verzeichnis, z.B. "pics/" oder
"bilder/".

      __________________________________
_____/ Regeln für Datei- und Pfadnamen  \_______________________________________

Ein Dateiname darf nur englische Buchstaben, Zahlen, Bindestriche und
Unterstriche "_" enthalten. Leerzeichen, Umlaute (äöüß) und Sonderzeichen, etwa
"@" sind verboten. Benutzen Sie am Besten ausschließlich Kleinbuchstaben, um
der in Schritt 5 erwähnten Groß-Kleinschreibungsfalle zu entrinnen.

      ________________________________________________________________________
_____/ Download-Dateien auf andere Webseiten auslagern (bei knappem Webspace) \_

Wenn der Webspace auf Ihrer Homepage knapp wird, können Sie problemlos
ihre Download-Dateien und Grafiken auf andere Webseiten auslagern, z.B.
auf die kostenlose Domain eines der unten bei "Links für Webworker"
angegebenen Webspace-Anbieters. Die dort sonst bei HTML-Seiten aufpoppenden
Werbefenster brauchen Sie bei "fernverlinkten" Download-Dateien und
Grafik-Dateien nicht zu befürchten.

Beipiel: Mit dem folgenden HTML-Code können Sie auf Ihrer Homepage eine
         Download-Datei "fernverlinken":
           <a href="http://freedomain.de/datei.zip">Datei herunterladen</a>

Ein Wermutstropfen ist jedoch bei der ganzen Sache zu schlucken: Viele Anbieter 
von kostenlosem Webspace löschen Domains, die große ZIP-Dateien oder zuviel -> 
Traffik aufweisen nach wenigen Tagen ohne Rückfrage.

                                                                    [zum Inhalt]

<-------------====================================================------------->
                             Grafiken einfügen
<-------------====================================================------------->

Jeder heutige Web-Browser unterstützt die Anzeige von Grafiken in den
Formaten GIF und JPG. Neuere Browser unterstützen auch das wenig verbreitete
PNG-Format.

Fotos und Grafiken müssen für die Veröffentlichung im Internet fast immer 
nachbearbeitet werden, um den Speicherbedarf zu reduzieren. So entspricht  z.B. 
ein kleines Foto  mit einer Auflösung von 640 x 480 Pixeln (Bildpunkten) und 24 
bit Farbtiefe (3 Bytes, entspricht 16 777 216 Farben) einer Datenmenge von 
921600 Bytes. Eine deartige Datei benötigt zum Herunterladen bei Verwendung 
eines 56 K Modems im idealen Falle bereits 921600 / 5600 = 164,5 sec = 2,7 min. 
In der Praxis wird meistens ungefähr die doppelte Zeit benötigt - viel zu lang 
für eine Internetseite! Wie Sie die Ladezeiten für Ihre Grafiken optimieren 
können, erfahren Sie unten im Abschnitt "Speicherbedarf für Grafiken
optimieren".

      __________________
_____/ Grafik anzeigen  \_______________________________________________________

Zur Anzeige einer Grafik dient das <img>-Tag:

- <img src="datei.gif"> zeigt eine GIF-Grafik an.
- <img src="datei.jpg"> zeigt eine JPG-Grafik an.
- <img src="http://www.antonis.de/pics/thomas.jpg"> zeigt eine Grafik
     von einer anderen Webseite an


      ____________________________________________
_____/  Grafik isoliert ohne Textumfluss anzeigen \_____________________________

Soll eine Grafik allein dastehen und nicht von Text oder anderen Grafiken
"umflossen" werden, dann setzen Sie diese in einen eigenen Absatz:

- <p><img src="datei.gif"></p>

      __________________________________________________
_____/ Grafik beschriften und von Text umfließen lassen \_______________________

Das folgende Beispiel zeigt 4 mal unseren Elch. Dreimal mit einer rechts neben
der Grafik angeordneten Beschriftung -  oben, mittig und unten sowie einmal
mit einem umfließenden Text, der rechts der Grafik angeordnet ist. Ich hoffe,
die Attribute im <img> Tag sind selbsterklärend. Ein Textumfluss wird mit
<br clear=all> beendet; dahinter stehender Text wird unter der Grafik
weitergeführt (Punkt (5))

<html><head><title>Beschriftung einer Grafik</title><body bgcolor="#00ff00">
****** Beschriftung und leerer Freiraum um Grafiken ******
<p><img src="bilder/elch.gif" align=top>
   (1) Beschriftungstext rechts oben</p>
<p><img src="bilder/elch.gif" align=middle hspace=20 vspace=40>
   (2)Beschriftungstext rechts mittig mit 20 Punkten horizontalem und 40 Punkten
      vertikalem Abstand zwischen Grafik und Umgebung </p>
<p><img src="bilder/elch.gif " align=bottom>
   (3) Beschriftungstext rechts unten.</p>
<img src="bilder/elch.gif" width=100 height=100 name="Elch" align=left>
   (4) Dies ist ein Text, der rechts um die links  ausgerichtete Grafik
       fließt. <br clear=all>
   (5) und dieser Text geht dann unterhalb der Grafik weiter.
</body>
</html>

... und so sieht's im Browser aus (Datei grafik1.htm)

      __________________________
_____/ Größe der Grafik angeben \_______________________________________________

Es empfiehlt sich, grundsätzlich immer die Größe der Grafik über das "width" und
das "Height" Attribut in Anzahl Pixeln anzugeben. Wie das geht, sehen Sie im
Beispiel bei Elch Nummer (4).
Ein anders Beispiel ist:
    <img src="bildname.gif" width=100 height=150 alt="Tante Emma">
Dann zeigt der Browser beim Laden der Seite für die Grafik schon mal einen
leeren Rahmen in der richtigen Größe der Grafik an und kann die Seite schnell
aufbauen. Wird die Grafik geladen, muss der Rest der Seite nicht zeitaufwändig
verschoben werden. Die Breite (width) und Höhe (height) einer Grafik können
Sie normalerweise in Ihrem Grafikprogramm oder in neueren Browsern im
Eigenschaftendialog (z.B. über rechte Maustaste) erfahren. Sie wird in Pixeln
angegeben.

Theoretisch können Sie mit width und height auch den Maßstab oder das
Seitenverhältnis einer Grafik manipulieren. Davon rate ich aber ab. Bei einer
Maßstabsverkleinerung muss eine überflüssig große Grafikdatei geladen werden.
Reduzieren Sie die Bildgröße (und damit den Speicherbedarf) in solchen Fällen
daher lieber in Ihrem Grafikprogramm. Bei einer Maßstabsvergrößerung erhält man
häufig Bilder mit unschöner Pixelstruktur. Also geben Sie im "width" und
"height" Attribut immer die tatsächliche Größe an. Das hat den zusätzlichen 
Vorteil, dass der Browser die Grafik nicht mehr skalieren muss und sie schneller 
laden kann,

                                                                    [zum Inhalt]
      ___________________________________________
_____/ Alternativen Text zu einer Grafik angeben \______________________________

Über das Attribut "alt="TEXT"" sollten Sie zu jeder Grafik einen kurzen, 
aussagekräftigen Text angeben, wie z.B. im obigen Beispiel bei Elch Nummer (4). 
Für diesen Text sind nur Buchstaben, Ziffern und "_" erlaubt, keine Leerzeichen. 
Der alternative Text hat den Vorteil, dass bereits ein Text erscheint, wenn die 
Grafik noch nicht geladen ist oder wenn Ihr Seitenbesucher die Grafikanzeige im 
Browser ausgeschaltet hat. Bei Grafiken, die als Links verwendet werden, 
erscheint der Alt-Text in neueren Browsern quasi als eine Art "Bubble Help" 
(Hilfe-Blase), wenn die Maus darüberfährt.

Für Behinderte kann der alternative Text essenziell sein. Außerdem ist er vom -> 
W3C im HTML-Standard bindend vorgeschrieben. Also vergessen Sie bei keiner 
Grafik den alternativen Text! Höchstens bei kleinen Buttons und Icons können Sie 
zur Not auf den alternativen Text verzichten.

      __________________________________
_____/ Freiraum um eine Grafik schaffen \_______________________________________

Wie der Elch Nummer (2) demonstriert, können Sie mit "hspace=PIXELZAHL" und 
"vspace=PIXELZAHL" einen vertikalen bzw horizontalen Freiraum um das Bild herum 
definieren, der einen angenehmen Abstand zu den umgebenden Text- und 
Grafikelementen schafft.

      _______________________
_____/ Rahmen um eine Grafik \__________________________________________________

Mit "border=Pixelzahl" können Sie einen Rahmen um die Grafik anlegen
Beispiel:
 <img src="datei.jpg" border=4>
Hiermit erzeugen Sie einen 4 Pixel dicken Rahmen um die Grafik. Ich rate jedoch
von jeglichen eingerahmten Grafiken ab, weil es nicht besonders gut aussieht.
Ich bevorzuge daher "border=0".

      _____________________
_____/ Hintergrundgrafiken \____________________________________________________

Hintergrundgrafiken werden über das <body...> Tag eingefügt. Weitere
Informationen zu Hintergrundgrafiken erhalten Sie im obenstehenden Kapitel
"Grundsätzlicher Aufbau einer HTML-Datei" .

      _______________________________________
_____/ Bilder auf andere Webseiten auslagern \__________________________________

Wenn der Webspace auf Ihrer Homepage knapp wird, können Sie problemlos
ihre speicherfressenden Grafiken auf andere Webseiten auslagern, z.B.
auf die kostenlose Domain eines der unten bei "Links für Webworker"
angegebenen Webspace-Anbieters. Die dort sonst bei HTML-Seiten aufpoppenden
Werbefenster brauchen Sie bei "fernverlinkten" Grafiken nicht zu befürchten.
Der einzige Nachteil ist eine etwas verlängerte Ladezeit Ihrer Seite durch
den Verbindungsaufbau mit dem externen Server.

Beispiel: Mit dem folgenden HTML-Code könnten Sie theoretisch ein
          Verbrecherfoto thomas.jpg von mir auf Ihrer Homepage anzeigen:

<html><head><title>-</title></head><body>
<img src="http://www.antonis.de/pics/thomas.jpg">
</body></html>

... und so sieht's im Browser aus, falls Sie gerade online sind
   (Datei tomaspic.htm)

Aber tun Sie das nicht, es ist einfach zu hässlich :-))

      _______________
_____/ GIF oder JPG? \__________________________________________________________

GIF-Grafiken eignen sich vor allem für Zeichnungen, Logos und andere Bilder mit 
wenigen Farben und großflächigen Strukturen. Für Buttons, Banner usw.  ist meist 
das GIF-Format optimal platzsparend. GIF-Bilder enthalten höchstens 256 Farben, 
die aber aus einer großen Palette frei wählbar sind. GIF ist ein verlustfrei 
komprimierendes Format. Den Speicherbedarf einer GIF-Datei können Sie 
reduzieren, indem Sie die Bildgröße oder die Anzahl der Farben verkleinern.

Übrigens: Wenn Sie sicher gehen wollen, dass Ihre selbsterstellten GIF- Grafiken 
auf allen Computern optimal dargestellt werden, dann verwenden Sie in Ihrem 
Grafikprogramm die sogenannte "sichere Webpalette", das ist eine Auswahl der 216 
Farben, die garantiert auf jedem Computer richtig dargestellt werden, auch auf 
solchen mit einem "schwachbrüstigen" Grafiksystem. Mehr zur "sicheren 
Webpalette" finden Sie unten im Kapitel "Farben".

Das JPG-Format eignet sich im Gegensatz zu GIF vor allem für Fotos, Malereien
und alle anderen Bilder mit zahlreichen Nuancen, gleitenden Farbübergängen und
feinen Strukturen. JPG Bilder können bis zu 2 hoch 24 Farben enthalten;
andererseits ist ihre Komprimierung verlustbehaftet - konvertiert man ein Bild
ins JPG-Format geht etwas von seiner Qualität verloren. Die JPG-Komprimierung
ist äußerst stark und ergibt ziemlich dramatische Reduzierungen der Dateigröße.
Gute Grafikbearbeitungsprogramme ermöglichen eine Komprimierung von JPG-Bildern
mit einstellbarem Kompressionsgrad. Reduzieren Sie auf diese Weise die
Dateigröße ihrer JPG-Bilder vor dem Heraufladen soweit, bis die
Darstellungsqualität gerade noch zufriedenstellend ist.

Neben GIF und JPG gibt es für Grafiken im WWW noch das PNG-Format, das bisher 
jedoch wenig Verbreitung gefunden hat. In vielen Fällen ist PNG eine echte 
Alternative zu GIF. Weitere Informationen hierüber finden Sie unter -> PNG im 
untenstehenden Inernet Glossar.

Wenn Sie im Zweifel sind, welches Format für Ihre Grafik das platzsparendste 
ist, GIF, JPG oder PNG, dann speichern Sie sie doch einfach in allen 3 Formaten 
ab und entscheiden Sie sich für die kleinste Datei.

Seit kurzem gibt es übrigens auch -> SVG, das ist ein Format für
-> Vektorgrafiken, das zwar seit Anfang 2001 offizieller Web-Standard ist, sich 
aber bisher noch nicht flächendeckend durchgesetzt hat.

                                                                    [zum Inhalt]
      ____________________________________
_____/ GIFs mit transparentem Hintergrund \_____________________________________

Ein GIF-Bild kann transparente Bereiche enthalten, etwa unser putziger Elch im
obigen Beispiel "grafik1.htm". Das ist nützlich bei nicht-rechteckigen Bildern,
die vor dem Hintergrund freigestellt werden sollen.

      ________________
_____/ Animierte GIFs \_________________________________________________________

In einer GIF-Datei können sich mehrere einzelne GIF-Bilder befinden, die nach
einer ebenfalls in der Datei enthaltenen Wiedergabevorschrift zu einer Animation
zusammengebaut und im Browser abgespielt werden. Sie können animierte GIFs mit
einem guten Grafikprogramm erstellen oder mit einem speziellen Tool, z.B. dem
 "GIF Animator" von Ulead ( www.ulead.de ) oder dem "GIF Construction Set" der
Firma Alchemy Mindworks ( http://alchemy-mindworks.com ).

Mit animierten GIFs wird viel Missbrauch auf Webseiten betrieben. Da gibt es
Seiten, auf denen man vor lauter blinkenden und zuckenden GIF Grafiken und
Werbebannern den eigentlichen Inhalt gar nicht mehr wahrnimmt. Als Webmaster
sollten Sie auf solchen Unsinn verzichten. Ein oder zwei Grafiken, an der
richtigen Stelle platziert können ja noch richtig gut aussehen, aber wenn die
gesamte Seite blinkt und zappelt, muss man sich doch schon fragen, ob das so
sinnvoll ist. Außerdem erhöhen sich die Ladezeiten Ihrer Seite durch den Einsatz
von animierten GIFs. Eine dezente Animation kann dagegen manchmal angebracht
sein; schauen Sie doch mal auf die Nase unseres knuffigen Elchs im Beispiel
"grafik1.htm".

Weitere Informationen zu animierten GIFs finden Sie auf der Webseite
www.webreference.com/dev/gifanim/ .

      ________________________________________
_____/ Speicherbedarf für Grafiken optimieren \_________________________________

Eine Grafik auf einer Webseite sollte höchstens 20 KB groß sein, möglichst noch
kleiner. Zum Optimieren der Grafik benötigen Sie ein Grafikbearbeitungsprogramm.
Es gibt zwei Möglichkeiten, die "Luft" aus einer Grafik herauszulassen: Das
Verkleinern der Grafik und das Komprimieren der Grafik mit dem JPG- oder GIF-
Verfahren.

Zur Reduzierung der Ladezeiten Ihrer Seiten sollten Sie Grafiken mit ihrem
Grafik-Bearbeitungsprogramm soweit wie möglich "verschlanken":
- Die maximale Dateigröße von einer von vielen Grafiken sollte bei 20 KB liegen
  - besser noch weniger. Wenn Sie nur eine Grafik auf einer Seite haben, sollte
  diese maximal 35 KB groß sein. Wenn Sie es dennoch nicht schaffen, die Datei
  kleiner zu halten, dann informieren Sie den Surfer darüber! Die Größe einer
  HTML-Datei inklusve der angezeigten Grafiken sollte maximal 40 KB, höchsten
  80 KB betragen. Ihre Startseite sollte besonders schnell ladbar und daher nie
  über 50 KB groß sein.
- Verwenden Sie das platzsparendste Format (GIF, JPG oder PNG; siehe oben)
- Reduzieren Sie bei GIFs die Pixel- und Farbenzahl. Bei einfachen GIF-Grafiken
  können Sie versuchen, die Anzahl der Farben auf 64, 32, 16 oder gar nur 8 oder
  4 Farben zu reduzieren. Das führt zu extrem kleinen Dateien. 
- Wählen Sie einen möglichst hohen Kompressionsgrad bei JPG-Bildern, und wenden
  Sie die Weichzeichnerfunktion auf unwichtige Bildstellen an.
- Verkleinern Sie Bilder niemals  über das WIDTH- und HEIGHT-Attribut,
  sondern reduzieren Sie lieber die Größe direkt in Ihrem Grafikprogramm und
  verkleinern damit die Grafik-Datei.
- Setzen Sie bei großen Bildern kleine Vorschau-Grafiken ("Thumbnails") und
  verwenden Sie diese als Links zu den eigentlichen Bildern im Vollformat.
  Dies geht z.B. So:

   <a href="gross.jpg" target=_blank><img src="klein.jpg"></a>

  Das "target=_blank" sorgt dafür, das für das große Bild ein eigenes
  Browserfenster geöffnet wird. Wenn es Sie stört, dass dieses in Vollgröße mit
  viel freiem Platz ums Bild herum "aufpoppt", dann führen Sie sich mal den
  Abschnitt "JavaScript" zu Gemüte. Dort zeige ich Ihnen in Beispiel 2, wie Sie
  das Bild in einem exakt auf die Bildgröße zugeschnittenen Browserfenster
  anzeigen können.
  
                                                                   [zum Inhalt]
      ______________________________________________
_____/ Empfehlenswerte Grafik-Bearbeitungsprogramme \___________________________

Für die webgemäße Nachbearbeitung Ihrer Fotos und Grafiken benötigen Sie ein 
Grafik-Bearbeitungsprogramm. Im Folgenden stelle ich Ihnen einige der besten 
dieser Programme vor, unterteilt in  kostenlose Freeware-Programme und 
kommerzielle, kostenpflichtige Programme. Die Reihenfolge, in der die Programme 
aufgeführt sind, spiegelt meine persönliche Wertung wider.

Empfehlenswerte kostenlose Freeware Grafikbearbeitungs- und
-konvertierungsprogramme sind:
   - Irfan View - erhältlich bei http://stud4.tuwien.ac.at/~e9227474;
               Download-Datei nur 800 KB,
               Bildbetrachter, der auch die wichtigsten
               Grafikbearbeitungsfunktionen beinhaltet. Sehr schnell,
               resourcenschonend und flexibel, mit Änderungsmöglichkeit für
               Farbtiefe und Kompressionsgrad, Screenshot-Funktion
   - GIMP -    erhältlich bei www.gimp.org , ein aus der Linux-Welt
               stammendes Grafikbearbeitungsprogramm. Sehr leistungsfähig und
               professionell, aber mit etwas gewöhnungsbedürftiger Oberfläche,
               läuft angeblich manchmal etwas instabil. GIMP braucht sich nicht
               hinter den professionellen Grafikprogrammen wie Paintshop & Co
               zu verstecken.
   - XnView -  erhältlich bei http://perso.wanadoo.fr/pierre.g .
               Grafikprogramm mit Konvertierungsfunktion für ca. 200 Formate (!)

Folgende kommerzielle Grafikbearbeitungsprogramme sind empfehlenswert:
   - Ulead Photo Impact - 30-Tage Shareware erhältlich bei www.ulead.de/,
               sehr einfache Bedienung, komfortable Webfunktionen.
   - Paintshop Pro - 30-Tage Shareware erhältlich bei www.jasc.de
   - Picture Publisher - Kann ab Version 9 auch mit GIF-Grafiken umgehen.
                wird oft als Bestandteil der "Micrografx Graphics Suite" als
                Schnäppchen in Supermärkten für ab 10,- EUR angeboten.
   - Adobe Photoshop - das bei Profis beliebteste Bildbearbeitungsprogrammm.
               Test-Version erhältlich bei www.adobe.com . Für Hobby -
               Grafiker fast zu komplex.
   - Adobe Photoshop Elements - etwas abgemagerte und einfacher zu bedienende
               Variante von Photoshop. Test-Version erhältlich bei
               www.adobe.com .
   - Fireworks - ideales Programm für Webgrafiken von Macromedia
              ( www.macromedia.com/de/software )
              
Diese kommerziellen Programme sind leider sehr teuer. Sie kosten zwischen 80,- 
und 1000,- EUR. Für den schmalen Geldbeutel sind am ehesten Ulead Photo Impact 
(ca. 80,- EUR) und Picture Publisher (Sonderangebote ab 10,- EUR) zu empfehlen.

      ___________________________
_____/ Weitere Tipps zu Grafiken \______________________________________________

- Grafiken sind immer in einer externen Datei hinterlegt und lassen sich nicht
  direkt in eine  HTML-Datei mit einbinden.
- Wie Sie eine Grafik als Link verwenden können, erfahren Sie im Abschnitt
  "Links einfügen"
- Speichern Sie Ihre Grafiken auf dem Server und Ihrer Festplatte
  möglichst immer in einem eigenen Verzeichnis, z.B. "pics/" oder "bilder/" .
  Das erhöht entscheidend die Übersicht.
- Wenn Sie vermeiden wollen, dass Seitenbesucher Grafiken von Ihrer Webseite
  über die rechte Maustaste herunterladen können, dann finden Sie hierzu einige
  Tipps unten bei "Tipps und Tricks zu HTML".

                                                                    [zum Inhalt]

<-------------====================================================------------->
           Textformatierungen (Absätze, Überschriften, Schrifttypen)
<-------------====================================================------------->

      _______________
_____/ Überschriften \__________________________________________________________

Für Überschriften stehen die Tags <h1> .... </h1> bis <h6> ... </h6> zur
Verfügung, die nach Größe geordnet sind. <h1> kennzeichnet die dickste
Überschrift. Das "h" steht übrigens für "heading" (engl. "Überschrift").

Die folgende Beispielseite demonstriert, wie Sie Überschriften verwenden können.

<html><head><title>Überschriften</title><body>
<h1>Dickste Überschrift (Nr. 1)</h1>
<h2>Zweitdickste Überschrift (Nr. 2)</h2>
<h3>Überschrift (Nr. 3)</h3>
<h4>Überschrift (Nr. 4)</h4>
<h5>Überschrift (Nr. 5)</h5>
<h6>kleinste Überschrift (Nr. 6)</h6>

Soll die Überschrift in der Mitte stehen, dann setzen Sie diese einfach in das
Center-Tag:
<center><h1> Herzlich willkommen! </h1></center>
Sie können die Ausrichtung der Überschrift auch mit Hilfe des "align"-Attributs
direkt im <H..> Tag beeinflussen:
<h2 align=center>Zentrierte Überschrift</h2>
<h2 align=right>Rechtsbündige Überschrift</h2>
</body>
</html>

... und so sieht's im Browser aus (Datei ueber.htm)

      ___________________________________
_____/ Schrifttypen (Textauszeichnungen) \______________________________________

Es gibt die folgenden Möglichkeiten für Schrift-Formatierungen:

<html><head><title>Textauszeichnungen</title></head><body>
1. Physikalische Textauszeichnungen
    <br>         <b>    Dies ist fetter text - "bold" </b>
    <br>         <i>    Dies ist Schrägschrift - "italic" </i>
    <br>         <tt>   Dies ist Schreibmaschinen-Schrift
                        - "TeleType" = Fernschreiber </tt>
    <br>Dies ist <sub>  tiefgestellter Text - "subscript" </sub>
    <br>Dies ist <sup>  hochgestellter Text - "superscript"</sup>
    <br>
    <br>
2. Logische Textauszeichnungen
    <br>      <strong> Hervorgehobener Text</strong>
    <br>      <code>   Dies ist Quellcode, z.B. in Tutorials für
                          Programmierer</code>
    <br>      <kbd>    Tastenfolgen in Bedienungsanleitungen - "Keyboard" </kbd>
    <br>      <cite>   Dies ist ein Zitat </cite>
    <br>      <big>    Dies ist große Schrift, z.B. zum Hervorheben</big>
                          <big>v</big>on <big>A</big>nfangsbuchstaben
    <br>      <small>  Dies ist kleine Schrift</small>
</body>
</html> 

... und so sieht's im Browser aus (Datei text1.htm)

      ___________________________________________________________
_____/ Vorformatierter Text (für Quellsprache, TXT-Dateien usw.) \______________

Um bereits vorformatierten Text inklusive aller Zeilenumbrüche und Leerzeichen
auf einer HTML-Seite darzustellen, verwenden Sie das Tag  <pre> ... </pre>
("preformatted Text"). Anwendungsbeispiele sind längere Quellspracheprogramme
oder bereits als TXT-Dateien vorliegende ASCII-Textdateien.

Der vorformatierte Text wird von den meisten Browsern automatisch in einer 
nichtproportionalen (dicktengleichen) Schrift angegeben, z.B. "Curier New" . Zur 
Sicherheit stellen Sie aber besser nach dem <pre> Tag eine entsprechende 
Schriftart ein. In den vorformatierten Text können Sie Links einfügen. Das <b> 
Tag für Fettschrift geht ebenfalls bei den meisten Browsern. Seien Sie jedoch 
vorsichtig mit der Verwendung anderer Tags im vorformatierten Textpassagen.

Beispiel:

<html><head><title>Vorformatierter Text</title></head><body>
<pre><font face="Courier New,Courier">
Dies ist vorformatierter Text, der inklusive
aller Zeilenumbrüche und mit
       allen
       Leerzeichen
dargestellt wird.
</font>
</pre>
</body>
</html>

... und so sieht's im Browser aus (Datei pre.htm)

                                                                    [zum Inhalt]

<-------------====================================================------------->
                        Schriftarten und -farben
<-------------====================================================------------->

      ______________
_____/ Schriftarten \___________________________________________________________

Schriftarten können Sie mit mit dem "face" Attribut des <font> Tags auswählen.
Der Text in <font face="Arial">...</font> wird z.B. in der Schriftart Arial
dargestellt.

Gehen Sie bei der Wahl der Schriftarten  behutsam vor und verwenden Sie keine 
exotischen Schriftarten wie z.B. Windings, die auf dem Computer Ihres 
Seitenbesuchers eventuell gar nicht installiert und somit nicht darstellbar 
sind. Bedenken Sie auch, dass ein Großteil der Surfer nicht mit einem Windows-
PC, sondern mit einem Linux-Browser, einem  Apple- oder einem Taschen-Computer 
unterwegs sind.

Viele Webmaster, besonders Anfänger, übersehen das Problem, dass der Browser nur
die Schriftarten anzeigen kann, die der Seitenbesucher auch auf seinem Rechner
installiert hat. Daher sollten Sie die Schriftwahl auf Ihrem Rechner auf die
Standardschriftarten beschränken. Möchten Sie unbedingt eine exotische
Schriftart verwenden, erstellen Sie kleine GIF-Grafiken.

      _____________________________________________
_____/ Beispiel: Die empfehlenswerten Schriftarten \____________________________

Ich empfehle Ihnen, ausschließlich die folgenden 5 Schriftarten zu verwenden,
die erfahrungsgemäß auf jedem Windows-PC und Apple-Computer installiert sind:

<html><head><title>Schriftarten</title></head><body>
<font face="Courier New,Courier">
                        Dies ist die dicktengleiche Courier-Schrift</font>  <br>
<font face="Arial,Helvetica">
                        Dies ist die serifenlose Arial-Schrift     </font>  <br>
<font face="Times New Roman,Times">
                        Dies ist die Serifenschrift Times          </font>  <br>
<font face="Verdana,Arial,Helvetica">
                        Dies ist die gut lesbare Verdana           </font>  <br>
<font face="Comic Sans MS,Arial,Helvetica" color="#ff0000">
                        Dies ist die Kritzel-Schrift Comic Sans MS </font>  <br>
</body>
</html>

... und so sieht's im Browser aus (Datei fonts.htm)


Die auf Apple-PCs und anderen Computer-Plattformen üblichen Schriften habe ich
in diesem Beispiel als Alternativ-Fonts durch Kommas abgetrennt angegeben. Ist
auf dem Computer des Surfers eine Schriftart nicht vorhanden, so wird die
nächste, hinter dem Komma stehende verwendet.

Verwenden Sie auf Ihrer Homepage nicht mehr als zwei dieser Schriftarten - z.B.
eine für den Fließtext und eine für die Überschriften. So werden Ihre Seiten
lesefreundlich.

      _______________
_____/ Schriftfarben \__________________________________________________________

Durch ein "color" Attribut im <font> Tag können Sie die Schriftfarbe
beinflussen, wie Sie oben im Beispiel bei der "Comic Sans MS" sehen. Sie können
auch mitten im Text die Schriftfarbe ändern, ohne die Schriftart mitzuändern. Es
sind sogar nette kleine Spielereien wie Farbverläufe in Texten möglich, wie Sie
in dem folgenden Beispiel sehen:

      ___________________________________
_____/ Beispiel für Text mit Farbverlauf \______________________________________

<html><head><title>Farbiger Text</title></head><body>
Wichtige Dinge sollten <font color=red>in roter Farbe</font> dargestellt
werden !
<h2>Textpassage mit Farbverlauf:</h2>
Farb -
<font color="#FE0001">V</font>
<font color="#DC0022">E</font>
<font color="#A90055">R</font>
<font color="#770087">L</font>
<font color="#5400AA">A</font>
<font color="#2200DC">U</font>
<font color="#0000FF">F</font>
</body>
</html>

... und so sieht's im Browser aus (Datei texcolor.htm)

Es gibt im Internet Tools, mit denen Sie Farbverläufe in Texten bequem online 
erstellen können, z.B. auf der Webseite www.pkworld.de meines alten
Bekannten Pawel Kazakow.

                                                                    [zum Inhalt]

<-------------====================================================------------->
                                Sonderzeichen
<-------------====================================================------------->

Umlaute und andere Sonderzeichen müssen Sie in einem speziellen HTML-Code
angeben, damit sie weltweit in allen Browsern richtig dargestellt werden.
Dieser Sonderzeichencode wird jeweils zwischen Kaufmanns-Und und Semikolon
( "&" und ";")  geschrieben. Die folgende Tabelle zeigt die HTML-Codes für
die wichtigsten Sonderzeichen:

 +--------------------------------------+------------------------------+
 | Sonder-  HTML                        | Sonder-  HTML                |
 | zeichen  Code                        | zeichen  Code                |
 +--------------------------------------+------------------------------+
 |   <   =  &lt;    ("lower than")      |   ä   =  &auml; ("a Umlaut") |
 |   >   =  &gt;    ("greater than")    |   ö   =  &ouml; ("o Umlaut") |
 |   &   =  &amp;   ("Ampersand")       |   ü   =  &uuml; ("u Umlaut") |
 |   "   =  &quot;  ("Quotation Mark")  |   Ä   =  &Auml; ("A Umlaut") |
 |   ©   =  &copy;  ("Copyright")       |   Ö   =  &Ouml; ("O Umlaut") |
 |   ß   =  &szlig;                     |   Ü   =  &Uuml; ("U Umlaut") |
 +--------------------------------------+------------------------------+
 |  |_|  =  &nbsp;  (Zwangs-Leerzeichen   "non-breakable space")       |
 |   •   =  &#149;  (Dicker Punkt, geeignet als Aufzählungszeichen)    |
 |   ·   =  &#183;  (Dünner Mittelpunkt, z.B. als Aufzählungszeichen)  |
 +---------------------------------------------------------------------+

Aus "öder Ärger" wird im HTML-Code also "&ouml;der &Auml;rger" .

Im Gegensatz zu den HTML-Tags kommt es in den HTML-Codes für die Sonderzeichen 
auf Groß- und Kleinschreibung an.

Die Umlaute und "ß" funktionieren in den meisten im deutschen Sprachraum 
installierten Browsern auch ohne die HTML-Codes mit direktem Eintippen. Daher 
habe ich der Übersichtlichkeit halber bei den meisten Beispielen dieses 
Kochbuchs auf die speziellen HTML-Sonderzeichencodes verzichtet. Das heißt aber 
nicht, dass Sie diesem schlechten Beispiel folgen sollen :)

Professionelle HTML-Editoren bieten Konvertierungsfunktionen, mit denen Sie alle 
Sonderzeichen in einer HTML-Datei in einem Rutsch in HTML-Codes umwandeln können 
und umgekehrt. Oder Sie verwenden das Freeware-Tool FixHTML zum "Übersetzen" der 
Umlaute in den HTML-Code. Das Programm ist deutschsprachig, schnell und 
effektiv. Eine Downloadquelle für FixHTML finden Sie über die großen 
Suchmaschinen.

Sie können auch im Seitenkopf in einem speziellen Meta-Tag den 
entsprechenden landessprachliche ISO-Code angeben. Fügen Sie dazu nach dem
<title>...</title>-Bereich die folgende Zeile ein:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8559-1">

Wenn Sie das tun, können Sie auf die HTML-Codes für die Umlaute und das
"ß" zur Not auch verzichten, denn alle moderneren Browser werden Ihre
Seiten weltweit richtig darstellen.

Mit dem geschützten Zwangs-Leerzeichen &nbsp; können Sie Texteinzüge, d.h. 
Lücken am Zeilenanfang Abstände zwischen Textpassagen erzwingen; Mehrfach-
Leerzeichen werden von HTML sonst nicht beachtet. Außerdem sollten Sie in leere 
Tabellenzellen ein &nbsp; setzen, um häßliche Lücken im Netscape-Navigator zu 
vermeiden.

Übrigens: Die HTML-Sonderzeichencodes werden auch "Entities" genannt.

                                                                    [zum Inhalt]

<-------------====================================================------------->
                             Aufzählungslisten
<-------------====================================================------------->

Aufzählungen können Sie mit <ul>...</ul> erzeugen ("unordered List" = 
ungeordnete Liste). Die einzelnen Aufzählungselemente innerhalb dieser Tags 
setzen Sie in das <li>....</li>-Tag. Sie werden dann jeweils mit einem netten 
dicken Punkt markiert (als sogenanntes "Bullet" = Aufzählungszeichen).

Sollen die einzelnen Aufzählungselemente stattdessen durchnummeriert werden, so 
verwenden Sie <ol>...</ol>  ("Ordered List" = geordnete Liste) statt <ul> ... 
</ul>.

Neben ungeordneten und geordneten Aufzählungslisten gibt es als dritte Variante 
noch die Definitionslisten. Diese werden mit <dl>...</dl> definiert. Die 
einzelnen Begriffe stehen in <dt>...</dt> Tags ("Definition Terms") und die 
Erklärungen dazu jeweils in <dd>...</dd> Tags ("Definition Description"). 
Definitionslisten sind ideal für Glossare. Ein Glossar ist eine Liste mit 
Begriffserklärungen, also quasi ein kleines Lexikon. 

      ________________________________
_____/ Beispiel für Aufzählungslisten \_________________________________________

Im folgenden Beispiel sehen Sie ungeordnete und geordnete Aufzählungslisten 
sowie eine Definitionsliste.

<html><head><title>Aufz&auml;hlung</title></head><body>
Dies ist eine ungeordnete Aufz&auml;hlung (häufigster Fall):
<ul>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
<li>Dritter Punkt</li>
</ul>

Dies ist eine durchnumerierte Aufz&auml;hlung:
<ol>
<li>Flei&szlig;</li>
<li>Beharrlichkeit</li>
<li>Ehrlichkeit</li>
</ol>

Dies ist eine Definitionsliste mit eingerückten Erklärungen:
<dl>
<dt>HTML</dt>
   <dd>Hypertext Markup Language</dd>
<dt>Bookmark</dt>
   <dd>Lesezeichen bzw. Favorit (Beim Internet Explorer)</dd>
<dt>URL</dt>
   <dd>Uniform Resource Locator = Adresse im Internet</dd>
</dl>

Dies ist eine ungeordnete Aufz&auml;hlung mit farbigen
Aufzählungszeichen (Bullets):
<font color=red>
<ul>
<li><font color=black>Erster Punkt</font>
<li><font color=black>Zweiter Punkt</font>
<li><font color=black>Dritter Punkt</font>
</ul>
</font>

</body></html>

... und so sieht's im Browser aus (Datei listen.htm)

      __________________________________________
_____/ Noch ein paar Tipps zu Aufzählungslisten \_______________________________

 - Aufzählungen können selbstverständlich ineinander verschachtelt werden
   (Aufzählung innerhalb einer Aufzählung).
 - Die Aufzählungszeichen (Bullets) in ungeordneten Listen könnnen Sie auch
   variieren, z.B.
     - <ul type=circle>     = rundes Bullet (hohler Kreis)
     - <ul type=square>     = eckiges Bullet (ausgefülltes Quadrat)
     - <ul type=disc>       = Scheibe (ausgefüllter Kreis) oder Raute
 - Ebenso gibt es bei numerierten Listen verschiedene Varianten:
     - <ol type=I start=5>  = Römische Ziffern, beginned mit V
     - <ol type=i>          = i, ii, iii, iv usw. als Aufzählungszeichen
     - <ol type=A>          = Großbuchstaben als Aufzählungszeichen
     - <ol type=a>          = Kleinbuchstaben
- Das Ende-Tag </li> können sie unbesorgt weglassen, wenn Sie sich Schreibarbeit
  sparen wollen.
- Wie Sie Definitionslisten mit farbigen Highlight-Effekten aufpeppen können,
  erfahren Sie unten im Abschnitt "Cascading Stylesheets" im "Beispiel 4 für
  CSS".
- Mit <dl compact> erhalten Sie einen Platz sparenden Aufbau einer
  Definitionsliste. Mir persönlich gefällt das weniger.
- Sie können auch eine kleine Grafik als Aufzählungszeichen (Bullet)
  verwenden. Dann müssen Sie die Liste mit den Einrückungen selbst formatieren,
  entweder durch geschachtelte Tabellen oder indem Sie Zeilenumbrüche durch
  <nobr> ... </nobr> ("No Break") verhindern und die Einrückungen durch
  Aneinandersetzen mehrerer geschützter Leerzeichen ";nbsp" realisieren.

                                                                    [zum Inhalt]

<-------------====================================================------------->
                                   Trennlinien
<-------------====================================================------------->

Eine horizontale Trennlinie können Sie mit <hr> erzeugen ("horizontal ruler").
So eine Linie eignet sich hervorragend, längeren Text optisch zu untergliedern.

Die Breite der Trennlinie ist einstellbar. Möchten Sie die Linie beispielsweise 
auf 80 Prozent des Fensters begrenzen, fügen Sie dem Tag das Attribut "width" 
(engl. Breite) hinzu: <hr width="80%">. Sie können die Linienbreite auch in 
Anzahl Bildschirmpunkten (ohne "%") angeben.

Mit <br> bewirken Sie einen Zeilenumbruch, der verhindert, dass neben der Linie
etwas steht. Bei neueren Browsern ist das <br> nicht mehr erforderlich. Ich
selbst lasse es immer weg.

      ________________________________________________
_____/ Noch ein paar Spezialitäten zu den Trennlinien \_________________________

- Dicke:
    Auch die Dicke (bzw. Höhe) der Trennlinien lässt sich über das "size"
    Attribut vorgeben. Die Dicke wird in Anzahl Bildschirmpunkten vorgegeben
    (Vorbesetzung: size=2).
- Farbe:
    Über das "color" Attribut können Sie auch die Farbe der Trennlinie
    beeinflussen (nur im Intenet Explorer, nicht im Netscape Navigator bis 4.x)
- 3D-Effekt:
    Über das Attribut "noshade" können Sie die 3D-Darstellung einer Trennlinie
    ausschalten und eine massive Darstellung erzwingen
- Ausrichtung:
    Über die Attribute "align=left" und "align=right" können Sie eine Trennlinie
    linksbündig oder rechtsbündig ausrichten.

      __________________________
_____/ Beispiele zu Trennlinien \_______________________________________________

<html><head><title>Trennlinien</title></head><body>
<hr>                   = normale Trennlinie, 100% breit, 2 Punkte dick
<hr width=400 size=8>  = Trennlinie, 400 Bildschirmpunkte breit, 4 Punkte dick
<hr width=75% size=1>  = Trennlinie mit der Breite 75% des Browser-Fensters
                         mit minimal möglicher Dicke
<hr width=70% size=5 color=red noshade align=right>
                       = Trennlinie, 70% breit, 5 Punkte dick, ohne 3D-
                         Effekt, im Internet Explorer rot dargestellt
</body>
</html>

... und so sieht's im Browser aus (Datei linien.htm)

                                                                    [zum Inhalt]

<-------------====================================================------------->
                                   Farben
<-------------====================================================------------->

      _______________________________________
_____/ Welche Elemente können Sie einfärben? \__________________________________

Sie können u.a. die folgenden Elemente einer Webseite einfärben:
- Seitenhintergrund - mit <body bgcolor="FARBCODE">
- Text - mit <font color="FARBCODE"> oder seitenübergreifend
         mit <body text="FARBCODE">
- Tabellen - mit <table bgcolor="FARBCODE">
- Tabellenreihen - mit <tr bgcolor="FARBCODE">
- Tabellenzellen mit <td bgcolor>
- Textklinks mit <body link="FARBCODE", vlink="FARBCODE" und alink="FARBCODE">
    im Body-Tag; siehe  oben im Abschnitt "Grundsätzlicher Aufbau einer
    HTML-Datei"

Die Farbe wird in allen diesen Fällen durch ihren FARBCODE oder durch einen
Farbnamen angegeben. Beachten Sie bitte, dass Farben in Tabellenreihen und -
Zellen von alten Browsern nicht unterstützt werden und Texte dort u.U.
unleserlich werden, z.B. wenn aus weißer Schrift auf schwarzem Hintergrund eine
weiße Schrift auf weißem Hintergrund wird.

      _____________________________
_____/ Farbangaben im RGB-Farbcode \____________________________________________

In HTML werden alle Farben grundsätzlich im RGB-Format angegeben. Die Buchstaben
R, G und B stehen dabei für die Grundfarben Rot, Grün und Blau. Jeder farbige
Punkt ist ein Gemisch aus diesen drei Grundfarben. Jeder Grundfarbe ist ein Byte
zugeordnet, über das deren Farbintensität festgelegt wird (je höher, desto
heller), und das Werte zwischen 0 und 255 annehmen kann.

Da jedes dieser drei RGB-Bytes 256 mögliche Werte haben kann, gibt es 
256x256x256 verschiedene Farbton-Möglichkeiten, also 16.777.216 Farben, was 
einer Farbtiefe von 24 Bit entspricht.

Die Intensität der 3 Grundfarben wird jeweils als hexadezimale Zahl angegeben.
Dabei kann jedes der 3 Bytes Werte zwischen 00 und FF annehmen (entspricht
0 bis 255 dezimal).

Ein FARBCODE besteht aus 6 Hexazeichen (Wertebereich je 0...F) und ist wie folgt
aufgebaut:

   "#RRGGBB"
      | | +--- Intensität des Blau-Anteils (Bereich 00 bis FF entspr. 0..255)
      | +----- Intensität des Grün-Anteils (Bereich 00 bis FF entspr. 0..255)
      +------- Intensität des  Rot-Anteils (Bereich 00 bis FF entspr. 0..255)


Beispiel 1: Ein sattes Gelb, das sich aus 255 Rot- und 255 Grün-Anteilen
            zusammensetzt, hat den Farbcode "#FFFF00"

Beispiel 2: Aktivierung einer mittelgrauen Textfarbe: <font color="#C0C0C0" .. >

Die Anführungszeichen kann man auch weglassen. Sie sind jedoch zur Wahrung der
Kompatibilität mit künftigen Browsern von Vorteil. Bei XHTML sind für alle
Attributwerte Anführungszeichen vorgeschrieben.

Das Zeichen "#" besagt, daß die nachfolgende Zeichenkette eine
Hexadezimalzahl ist. Diese besteht bei Farbangaben aus 6 Stellen. Je zwei davon
stehen paarweise für einen Wert eines RGB-Bytes.

   Rot  = C0
   Grün = C0
   Blau = C0

Wer sich mit Hexadezimalzahlen auskennt, erhält für "C0" den Dezimalwert
12x16 = 192 . Die Mischung dieser drei Farben ergibt das gewünschte mausgrau.

      _______________________________
_____/ Was sind hexadezimale Zahlen? \__________________________________________

Die hexadezimalen Zahlen sind nicht wie normale Dezimalzahlen auf die Basis "10" 
bezogen, sondern auf die Zahlenbasis 16. Die Einerstelle kann Werte von 0 bis 15 
annehmen, wobei die Werte 10...15 durch die Buchstaben A...F dargestellt werden. 
Danach kommt dann der Zahlensprung von F_hexa nach 10_hexa, also von 15_dezimal 
nach 16_dezimal. Die zweite Stelle hat die Wertigkeit "16". Man muss sie sich 
mit 16 multipliziert denken, z.B. FF_hexa = 15 x 16 + 15 = 255_dezimal. Die 
folgende Tabelle zeigt einige Hexazahlen in dem Bereich 00 ... FF. Dieser 
Bereich lässt sich in einem Byte darstellen (8 Bits entsprechen 2 hexadezimalen 
Stellen).

 Dezimal     |  0  1  2  3 ...  9 10 11 12 13 14 15 16 17 18 ... 32 33 ... 255
 ------------+-----------------------------------------------------------------
 Hexadezimal | 00 01 02 03 ... 09 0A 0B 0C 0D 0E 0F 10 11 12 ... 20 21 ...  FF

      _______________________
_____/ Farbnamen im Klartext \__________________________________________________

Ab der HTML-Version 3.2 gibt auch "Klartext-Namen" für ausgewählte Farben,
die inzwischen von fast allen WWW-Browsern verstanden werden.
Die 16 Grundfarben haben die folgenden Farbnamen:

   Farbe        Farbname            RGB-Code
   -----------+----------------+-----------------
   Schwarz      color="black"       color="#000000"
   Braun        color="maroon"      color="#800000"
   Dunkelgrün   color="green"       color="#008000"
   Olivgrün     color="olive"       color="#808000"
   Dunkelblau   color="navy"        color="#000080"
   Dunkel-Lila  color="purple"      color="#800080"
   Türkisgrün   color="teal"        color="#008080"
   Mittelgrau   color="gray"        color="#808080"
   Hellgrau     color="silver"      color="#C0C0C0"
   Rot          color="red"         color="#FF0000"
   Hellgrün     color="lime"        color="#00FF00"
   Gelb         color="yellow"      color="#FFFF00"
   Blau         color="blue"        color="#0000FF"
   Hell-Lila    color="fuchsia"     color="#FF00FF"
   Hellblau     color="aqua"        color="#00FFFF"
   Weiß         color="white"       color="#FFFFFF"


... und so sieht's im Browser aus (Datei farben1.htm)

Die Farbangaben <font color="yellow"> und <font color="#FFFF00"> sind also
von der Wirkung her identisch.

Wer Wert auf höchstmögliche Kompatibilität seiner Webseite mit allen Browsern 
legt, sollte auf die Klartext-Farbnamen verzichten und nur die oben 
beschriebenen "Farbangaben im RGB-Farbcode" verwenden.

      _____________________________________________________________
_____/ Wählen Sie feinere Farbabstufungen über einen "Colorpicker" \____________

Feinere Farbabstufungen können Sie über einen "Farbwähler" auswählen
(englisch "Colorpicker"). Solche Farbwähler gibt es als online-Version
(siehe unten bei den Links) und als Offline-Tool. Einen Offline-Farbwähler
können Sie z.B. bei www.rrz.uni-hamburg.de/philsem/BB/rgbtool.zip
herunterladen. Auch das elektronische HTML-Handbuch "SelfHTML" enthält eine
sehr brauchbare Farbtabelle (siehe unten bei "Links für Webworker")

Auf www.colors4webmasters.com/ finden Sie einen komfortablen
Colorpicker, bei dem Sie Hintergrund- und Schriftfarben online wählen und
optimieren können. Als Ergebnis Ihrer Auswahl erhalten Sie dort die
hexadezimalen RGB-Codes für die Text- und Hintergrundgarbe.

   +--------------------------------------------------------------+
   | Einen einfachen Farbwähler mit den 216 Farben der "sicheren  |
   | Webpalette" finden Sie gleich hier im Rezept-Teil des        |
   | Homepage-Kochbuchs in der Datei                              |
   |                               ... farbwahl.htm .             |
   +--------------------------------------------------------------+

      __________________________________________
_____/ Die 216 Farben der "sicheren Webpalette" \_______________________________

Der eben erwähnte von mir selbst erstellte kleine Farbwähler "farbwahl.htm" 
zeigt die 216 Farben der sogenannten "sicheren Webpalette" an, die auch von 
Monitoren mit einer Farbauflösung von nur 256 Farben in allen Browsern richtig 
dargestellt werden.  Dies ist besonders wichtig, wenn Ihre Homepage auch auf 
alten Computern mit Normal-VGA-Monitoren und auf schwachbrüstigen Pocket-
Computern gut aussehen soll.

Farben, die nicht der sicheren Webpalette enthalten sind, werden auf solchen 
Systemen durch Aneinandersetzen verschiedenfarbiger Farbpixel künstlich 
zusammengemischt. Dieses sogenannte "Dithering" sieht extrem hässlich aus. Im 
Zweifelsfalle stellen Sie Ihren Monitor doch mal spaßeshalber auf 256 Farben 
ein, und kontrollieren Sie damit Ihre Homepage.

                                                                    [zum Inhalt]

<-------------====================================================------------->
                                    Tabellen
<-------------====================================================------------->

Beim Thema "Tabellen" wollen wir uns nicht lange mit der Theorie aufhalten,
sondern uns gleich einmal eine kleine Beispiel-Tabelle anschauen:

      ______________________________
_____/ Beispiel 1: Einfache Tabelle \___________________________________________

<html><head><title>Tabelle 1</title></head><body>
<table border=4 cellspacing=1>
<tr>
  <td>Reihe 1, Datenzelle 1</td>
  <td>Reihe 1, Datenzelle 2</td>
</tr>
<tr>
  <td>Reihe 2, Datenzelle 1</td>
  <td>Reihe 2, Datenzelle 2</td>
</tr>
</table>
</body></html>

... und so sieht's im Browser aus (Datei tabelle1.htm)

Dies ist eine ganz einfache Tabelle mit 2 Reihen (Zeilen) und 2 Spalten,
d.h. jede Reihe enthält zwei Tabellenzellen.

Noch einige Erläuterungen zum obigen Beispiel:

- <table border=4 cellspacing=1>...</table> definiert einen Tabelle mit einer
      Rahmenlinie (border line), die 4 Punkte dick ist, wobei die einzelnen
      Tabellenzellen durch Gitterlinien (cell spacings) mit eine Dicke von einem
      Punkt voneinander getrennt sind.
- <tr>...</tr> kennzeichnet eine Tabellenzeile ("Table Row")
- <td>...</td> kennzeichnet eine Tabellenzelle ("Table Data cell")

      ________________________________
_____/ Beispiel 2: Komplexere Tabelle \_________________________________________

Starten Sie doch mal die folgende HTML-Beispieldatei "tabelle2.htm" und 
bestaunen Sie diese in Ihrem Browser: Sie sehen eine bereits recht komplexe 
Tabelle mit 3 Reihen (Zeilen):

<html><head><title>Tabelle 2</title></head><body>
<center>
<table border=4  cellspacing=4 cellpadding=6 width=80%>
<tr><th>Reihe 1, Überschrift 1</th>
    <th>Reihe 1, Überschrift 2</th>
</tr>
<tr><td bgcolor="#CCFFFF">Reihe 2, Datenzelle 1, hellblau</td>
    <td>Reihe 2, Datenzelle 2</td>
</tr>
<tr><td colspan=2 align=center>Reihe 3 (2 Zellen breit, gelb)</td>
</tr>
</table>
<center>
</body>
</html>

... und so sieht's im Browser aus (Datei tabelle2.htm)

Erklärung der HTML-Befehle und Attribute:

- <center> stellt die Tabelle zentrisch auf dem Bildschirm dar.
- <th>...</th> kennzeichnet eine Überschriften-Zelle (Table Header Cell) die in
  den  meisten Browsern in Fettschrift dargestellt wird.
- Mit "border" geben Sie die Breite des Tabellenrandes in Anzahl
  Bildschirmpixeln an
- Mit "cellpadding" bestimmen Sie den den Abstand zwischen dem Inhalt einer
  Tabellenzelle und ihrem Rand, in diesem Falle 6 Bildschirmpunkte
- Mit "cellspacing" wird die Dicke des Rahmens zwischen den Tabellenzellen
  definiert
- "width 80%" bewirkt, dass die Tabelle in der Breite 80% des Browserfensters
  einnimmt. Sie können die Breite auch in Anzahl von Bildschirmpunkten angeben.
  Hierfür lassen Sie einfach das Prozentzeichen weg und schreiben z.B.
  "width=400", um eine Tabellenbreite von 400 Punkten zu definieren.
- Mit "colspan=2" werden Sie bereits zum Tabellenprofi und definieren
  eine Tabellenzelle, die sich über zwei Spalten (engl. "COLumns") erstreckt.
- "align=center" bewirkt, dass der Text mittig in der Tabellenzelle angeordnet
  wird (siehe unten bei "Horizontale und vertikale Ausrichtung ...")
- Mit "bgcolor="FARBCODE" können Sie den Hintergrund (engl. "BackGround") einer
  ganze Tabelle oder auch einzelne Tabellen-Reihen oder Zellen einfärben.
  Die Tags sehen so aus:
    - <table bgcolor="FARBCODE">  = Ganze Tabelle einfärben
    - <tr    bgcolor="FARBCODE">  = Tabellenreihe einfärben
    - <td    bgcolor="FARBCODE">  = Tabellenzelle einfärben
  Weitere Informationen zu Farben in Tabellen erhalten Sie im obenstehenden
  Kapitel "Farben".

      ______________________
_____/ Leere Tabellenzellen \___________________________________________________

Schreiben Sie ein Zwangs-Leerzeichen ("non-breakable space") in eine leere 
Zelle, sonst wird sie bei einigen Netscape-Browsern ohne Rand dargestellt. Das 
sieht hässlich aus. Ein solches Zwangs-Leerzeichen wird durch die 
Zeichenkombination "&nbsp;" angegeben und von Browser in jedem Falle in einer 
korrekt umrandeten Tabellenzelle angezeigt.

      ____________________________________________________________
_____/ Horizontale und vertikale Ausrichtung der Tabellen-Inhalte \_____________

Der Inhalt von Tabellenreihen oder -Zellen kann mit Hilfe der Attribute "align"
und "valign" horizontal oder vertikal beliebig ausgerichtet werden:
- Mit <td align=left | center | right> können Sie den Inhalt einer
  Tabellenzelle in Horizontalrichtung linksbündig, zentrisch oder
  rechtsbündig ausrichten. Soll diese Formatierungsvorschrift für alle Zellen
  einer Tabellenreihe gelten, so verwenden Sie
  <tr align=left | center | right>.
- Mit (td valign=top> bzw. <tr valign=top> können Sie den Inhalt einer
  Tabellenreihe oder -Zelle oben beginnen lassen. Das empfiehlt sich
  grundsätzlich immer bei Tabellen, deren Zelleninhalte unterschiedliche Höhen
  aufweisen.

      ___________________
_____/ "Blinde Tabellen" \______________________________________________________

Tabellen sind ein häufig verwendetes Gestaltungsmittel, um eine bestimmte 
Anordnung von Textpassagen und Bildern auf einer Webseite zu erzwingen. Sie 
können damit z.B. die Textbreite reduzieren oder einen mehrspaltigen Textfluss 
erreichen. Da die Tabelle in diesem Falle meist randlos ist und optisch als 
solche nicht in Erscheinung tritt, spricht man von "blinden Tabellen".

      _________________________________
_____/ Hintergrundgrafiken in Tabellen \________________________________________

Mit dem Attribut "background="Grafik-Datei"" können Sie eigene 
Hintergrundgrafiken für Tabellen oder einzelnen Reihen bzw. Zellen eine Tabelle 
definieren. Aber Vorsicht: Diese Funktion steht in einigen Browsern nicht zur 
Verfügung, z.B. beim Netscape Navigator Version 4.x; bei diesen kann u.U. der 
Text in den Tabellenzellen unleserlich werden. Die Tags sehen so aus:

    - <table background="GRAFIKDATEI">  = Hintergrundgrafik für ganze Tabelle
    - <tr    background="GRAFIKDATEI">  = Hintergrundgrafik für Tabellenreihe
    - <td    background="GRAFIKDATEI">  = Hintergrundgrafik für Tabellenzelle

                                                                    [zum Inhalt]

<-------------====================================================------------->
                                   Frames
<-------------====================================================------------->

Im Folgenden zeige ich Ihnen, wie Sie eine Seite mit Frames (engl. "Rahmen") 
aufbauen können. Frames sind autarke Teilfenster. Dabei wird eines der Fenster 
häufig als feste Navigationsleiste verwendet, so auch in dem untenstehenden 
Beispiel.

Das Beispiel besteht aus 4 Dateien, die eine nette kleine Frame-Kombination - 
ein so genanntes "Frameset" - erzeugen und ganz gut das Grundprinzip aufzeigen. 
Starten Sie doch mal die Datei index.html und betrachten Sie das resultierende 
Frameset in Ihem Browser.

Auf Grundlage dieses Beispiels wird es Ihnen nicht schwerfallen, sich Ihre 
eigene Frame-basierte Seitennavigation zu basteln. Die HTML- Syntaxelemente sind 
weitgehend selbsterklärend.

Und nun zu den 4 Dateien, die unten aufgelistet sind.

- index.htm ist das "Mutterdokument" mit der Definition des Framesets und
  dient als Startseite der gesamten Website. Es werden 2 vertikale Frames
  definiert:  Der Frame "navigationsframe" mit 20% und der Frame "hauptframe"
  mit 80% Breite bezogen auf das Browserfenster.
- navigat.htm enthält die Navigationslinks zu den Hauptseiten, die jeweils
  im "hauptframe" angezeigt werden
- welcome.htm ist die Begrüßungsseite, also die eigentliche Startseite
- witze.htm ist eine weitere Einzelseite, die ebenfalls im Hauptframe
  erscheint.

1. Datei "index.htm"   (Startseite mit der Frameset-Definition)
--------------------------------------------------------------
<html><head><title>Pauls Homepage</title></head>
<frameset cols="20%,80%">
<frame src="navigat.htm" scrolling=yes name="navigationsframe">
<frame src="welcome.htm" scrolling=yes name="hauptframe">
</frameset>
</html>

2. Datei "navigat.htm" (mit der Navigationsleiste)
--------------------------------------------------
<html><head><title>-</title></head><body>
<h4>Datei NAVIGAT .HTM</h4>
<a href="welcome.htm" target="hauptframe">Home</a>
<br><a href="witze.htm" target="hauptframe">Witze</a>
</body><html>

3. Datei "welcome.htm" (Begrüßungs-Seite)
---------------------------------------------------
<html><head><title-</title></head><body>
<h1>Willkommen auf Pauls Homepage</h1>
(Datei WELCOME.HTM)
</body></html>

4. Datei "witze.htm"    (Witze-Seite)
---------------------------------------------------
<html><head><title>-</title></head><body>
<h1>Pauls Witze-Seite</h1>
(Datei WITZE.HTM)
</body></html>

... und so sieht der Frameset im Browser aus (Startdatei index.htm)

Noch einige Hinweise zu den <frame> und <frameset> - Tags:
- Mit dem Attribut <frame schrolling=yes> oder <...=no> können Sie einen Frame
  als rollbar oder nicht rollbar definieren. Bei nicht rollbaren Frames können
  Inhalte, die größer sind als das Framefenster, nicht mehr vollständig
  angezeigt werden. Dafür fällt der von manchen als hässlich angesehene
  Rollbalken weg. Mit <frame scrolling=auto> überlassen Sie es dem Browser,
  einen Rollbalken automatisch nur dann anzuzeigen, wenn der Frame-Inhalt
  nicht mehr ins aktuelle Frame-Fenster passt. Dies ist die eleganteste Methode.
- Mit dem Attribut <frame noresize> bewirken Sie, dass sich die Größe eines
  Frames nicht mit der Maus durch Ziehen der Trennlinie verändern lässt.
- Im <frame> - Tag können Sie auch einen horizontalen bzw. vertikalen Abstand
  zwischen dem Rand eines Frames und seinem Inhalt, bestehend aus Text oder
  Grafik, angeben, und zwar über die Attribute marginwidth=PIXELZAHL bzw.
  marginheight=PIXELZAHL. Besonders durch einen horizontalen Rand (z.B.
  über marginwidth=16) wird ein Text im Frame wesentlich besser lesbar
- Mit <frameset rows=20%,75%> können Sie horizontal angeordnete Frames erzeugen,
  in diesem Beispiel einen mit 20% und einen mit 75% Höhe
- Sie können Framesets natürlich auch ineinanderschachteln, z.B. um in einen
  Frame eines horizontalen Framesets einen weiteren vertikalen Frameset
  anzuordnen.
  Beispiel mit 2 horizontalen und 2 vertikalen (senkrecht angeordneten) Frames:
  
    <frameset rows=20%,70%>
       <frame ...>
       <frameset cols=20%,80%>
         <frame ...>
         <frame ...>
       </frameset>
    </frame>

      _________________________
_____/ Weitere Tipps zu Frames \________________________________________________

   .******************************************************************.
*** Sehen Sie einen <noframes>-Bereich mit einer Behelfsnavigation vor *********

Es empfiehlt sich immer, auf der Seite mit der Frameset-Definition (im obigen 
Beispiel index.htm) einen "Noframes"-Bereich einzufügen, der auch in 
Uraltbrowsern, die mit Frames noch nicht umgehen können, anstelle der Frames 
korrekt angezeigt wird. Der Internet-Explorer 2 kann z.B. mit Frames nichts 
anfangen, ebenso einige Taschencomputer. Der Noframes-Bereich wird einfach 
hinter dem </frameset> Tag angefügt und könnte etwas so aussehen:

  </frameset>
  <noframes>
    <body>Ihr Browser unterstützt keine Frames. Klicken Sie
      <a href="welcome.htm">hier</a>,um zu unserer Seite zu gelangen.
    </body>
  </noframes>
  </html>

Oder Sie fügen im Noframes-Bereich eine behelfsmäßige Navigation zu Ihren 
Seiteninhalten ein oder einen Link zu einer Navigationsseite bzw. -> Sitemap.

Ein Beispiel für einen Noframes-Bereich finden Sie unten im Abschnitt
"Wie realisiere ich eine Webseiten-Umleitung?" im Kapitel "Tipps und Tricks zu
HTML" (Datei umleit02.htm)


   .********************.
*** Nachteile von Frames *******************************************************

Wie sie gesehen haben, haben Frames eine Menge Vorteile. Ich will Ihnen aber
auch die Nachteile von Frames nicht verschweigen:

- Ihre Seitenbesucher können die einzelnen Seiten nicht in ihre Favoriten bzw.
  -> Bookmarks aufnehmen, sondern es erscheint dort immer nur der -> URL des
  Framesets. Außerdem erscheint in der Titelzeile des Browsersfensters ebenfalls
  immer nur der <title>...<Title>-Text der Seite mit der Frameset-Definition.
- Frames werden in jedem Browser etwas anders dargestellt. Eine pixelgenaue 
  Darstellung der Seiteninhalte, die in allen Browsern gleich aussieht, ist 
  unmöglich.


   .*******************************************.
*** So erzeugen Sie einen Frame ganz ohne Rand  ********************************
Mit Hilfe des folgenden Tags erzeugen Sie einen Frame ganz ohne störenden Rand:

<frameset ... border=0 frameborder=0 framespacing=0>

Aber Vorsicht: Normalerweise lässt sich der so erzeugte Frame nicht mehr 
nachträglich vom Seitenbesucher mit der Maus in der Größe verändern, und die 
Rollbalken funktionieren auch nicht mehr.


   .********************************.
*** Weitere Informationen zu Frames  *******************************************

Das Thema "Frames" habe ich hier nur kurz angerissen. Die Komplett-Information
erhalten Sie - wie immer - in Stefan Münz' SelfHTML; siehe unten bei den "Links
für Webworker". 

                                                                    [zum Inhalt]

<-------------====================================================------------->
                                  Formulare
<-------------====================================================------------->

Mit Hilfe von Formularen können Sie Besucher aktiv werden lassen. Diese können 
dort Text in verschiedene Felder eintragen und zum Schluss an Ihre E-Mailadresse 
mailen. Einen Haken gibt es jedoch dabei: Ein Seitenbesucher kann nur dann ein 
Formular per E-Mail an Sie versenden, wenn er in seinem Browser ein E-
Mailprogram eingebunden hat. Bei Netscape Browsern ist dies normalerweise der 
Netscape-Messenger, bei Microsoft-Browsern Outlook oder Outlook Express. 
Besucher, die grundsätzlich eine webbasierten E-Mail-Oberfläche verwenden, etwa 
auf den Webseiten der Anbieter GMX oder WEB.de, "schauen in die Röhre".

Formulare können auch durch Auswerteprogramme (so genannte "CGI-Scripts) direkt 
auf dem Server weiterverarbeitet werden, z.B. in Form von Datenbankabfragen. Auf 
diese Möglichkeit wollen wir hier aber nicht weiter eingehen. Sie finden darüber 
unten im Glossar unter -> CGI einige Informationen

Anhand der folgenden Beispiele lernen Sie das Wichtigste über Formulare.

      __________________________________
_____/ Einfaches Beispiel für Formulare \_______________________________________

Ein einfaches Formular (engl. "form") über das Ihre Seitenbesucher Ihren
Newsletter abonnieren können, sähe etwa so aus:

<html><head><title-</title></head><body>
Senden Sie uns im untenstehenden Formular Ihre E-Mailadresse, um den
Newsletter von Antonis.de zu abonnieren:
<br>
<form method="post" action="mailto:webmaster@antonis.de" enctype"text/plain">
Ihre E-Mailadresse: <input name="News_Abonnent" Value="@" size=20 maxlength=100>
<input type=submit value="Newsletter abonnieren">
</form>
</body>
</html>

... und so sieht's im Browser aus (Datei form1.htm)

      ____________________________________
_____/ Komplexeres Beispiel für Formulare \_____________________________________

In diesem Beispiel kann der Seitenbesucher seine E-Mailadresse, seine Homepage-
Adresse und in einem mehrzeiligen Feld eine Mitteilung eintragen und an Ihre E-
Mailadresse senden.

<html><head><title-</title></head><body>
<b>Hier können Sie Kommentare und Verbesserungsvorschläge
   zu meiner Homepage loswerden...</b>
<br><br>
<form action="mailto:thomas@antonis.de" method="post" enctype="text/plain">
Dein Name:
<br> <input type="Text" name="Absender" value="" size="30" maxlength="60">
<br>
<br>
Ihre E-Mailadresse:
<br>
<input type="Text" name="E_Mail_Adresse" value="@" size="30" maxlength="60">
<br>
<br>
Ihre Homepage:
<br> <input type="Text" name="Homepage" value="http//www." size="30"
      maxlength="60">
<br>
<br>
Betreff:
<br> <input type="Text" name="Subject" size="50" maxlength="100">
<br>
<br>
Kommentare, Verbesserungsvorschläge
<br>
<textarea name="Kommentare" cols="50" rows="12" wrap="physical">
Hallo Webmaster von Antonis.de !</textarea>
<br>
<br>
<input type="submit" value="Mail absenden"></input>
&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="Alles l&ouml;schen"></input>
</form>
</body></html>

... und so sieht's im Browser aus (Datei form2.htm)

Die einzelnen Tags sind weitgehend selbsterklärend. Daher verzichte ich auf eine
detaillierte Erläuterung. Wer mehr über Formulare wissen  möchte, der schaue
bitte in Stefan Münz's "SelfHTML" (siehe unten bei den "Links für Webworker").

                                                                    [zum Inhalt]

<-------------====================================================------------->
                                 Kommentare
<-------------====================================================------------->

Kommentare sind Textpassagen, die Ihnen selbst helfen sollen, sich in Ihrem 
HTML-Dokument später noch zurechtzufinden. Der Browser überliest diese Passagen 
und zeigt sie nicht an.

Sie können Kommentare folgendermaßen angeben:

<!-- Dies ist ein Kommentar -->

Mit Hilfe des Kommentars können Sie bestimmte Programmiertricks beschreiben oder
die Seite durch Kommentar-Überschriften in logische Seitenbereiche unterteilen
und auf diese Weise übersichtlicher machen, z.B. so:

<!-- ========= Links zu befreundeten Seiten ======== -->

In einem Kommentar dürfen keine Bindestriche und Größer-Zeichen ">" erscheinen. 
Kommentar kann sich über mehrere Zeilen erstrecken. Zur Wahrung der 
Kompatibilität mit älteren Browsern sollten Sie mehrzeiligen Kommentar mit
"//-->" statt mit "-->" abschließen, also z.B. so:

   <!-- Dies ist
   mehrzeiliger
   Kommentar //-->

Sie können Kommentar auch zum Ausblenden experimenteller HTML-Befehlsfolgen für
Testzwecke verwenden. Der Programmierer nennt dies "auskommentieren von Code".

                                                                    [zum Inhalt]

<-------------====================================================------------->
                       Sound, Video und Flash-Animationen
<-------------====================================================------------->

      _________________
_____/ Sound einbinden \________________________________________________________

Nachdem Sie so fleißig all das trockene HTML Zeugs gelernt haben, dürfen Sie zur 
Belohnung jetzt etwas spielen und einen kleinen Soundeffekt in Ihre Seite 
einbinden. Das folgende Beispiel ist eine  HTML-Seite, in der ich, Thomas 
Antoni, Ihnen einen artigen kleinen Gruß aufsage - als WAV-Datei mit meiner 
Originalstimme:


<html><head><title>Wav Sound abspielen</title></head>
<body>
<center>
<embed src="mulmedia/thomas.wav" width=150 height=60 align=center>
<br>
Drück die "Play" Taste, um einen Gruß von Thomas Antoni (mir selbst) zu hören !
</center></body></html>

... und so sieht's im Browser aus (Datei sound.htm)

Dieses Beispiel habe ich mit Internet Explorer 5.5 und Netscape Navigator 4.7
getestet. Ob es mit anderen Browsern funktioniert, kann ich also nicht
garantieren. Seien Sie vorsichtig mit dem Einbau von Sound in ihre Seite.
Erstens verlängert die Sounddatei erheblich die Ladezeit. Zweitens nervt der
Sound Ihre Besucher normalerweise schon nach kurzer Zeit. Besonders MIDI-Dateien
mit ihrem "piepsigen" Sound sollt man meiden. Sie sind zwar platzsparend, aber
das Gedudel ödet den Besucher schon beim zweiten Besuch Ihrer Seite mächtig an.

Noch ein paar Tipps zur Sound-Einbettung über das <embed> Tag:
- Über "width" und "height" wird die Größe des Abspielfensters angepasst.
- Mit hidden="true" können Sie den Soundplayer unsichtbar machen.
- Über das Attribut autostart="true" können Sie einen sofortigen Start des
  Sounds beim Öffnen der HTML-Seite bewirken.
- Mit loop="true" erhalten Sie einen sich ewig wiederholenden Dauersound.
  Sie können loop="true"  auch mit autostart=true kombinieren. Dann kann der
  Seitenbesucher der Musik-Dauerberieselung kaum noch entrinnen.

      __________________
_____/ Videos einbinden \_______________________________________________________

Auch ein kleiner Videofilm im AVI oder MPG-Format lässt sich in eine HTML-Seite
einbinden. Ob dies sinnvoll ist, müssen Sie angesichts der riesigen Datenmenge,
die bereits ein winziges Filmchen beansprucht, sorgfältig abwägen. Ansonsten
kommt es zu extrem langen Ladezeiten für Ihre Seite.

Im folgenden Beispiel wird ein winziger Comicfilm "kohl.avi" abgespielt, der
bereits schon 64 KB Speicherplatz beansprucht (das entspricht einer Ladezeit
von ca. 20 sec mit einem schnellen Modem):

<html><head><title>Video einbinden</title></head><body>
<center>
<h2>Hier gibt es einen kleinen Film zum Lachen</h2>
(für Netscape-Anwender: Klicken Sie auf das Bild, um den Film zu starten!)
<br>
(für IE-Anwender: Klicken Sie auf die Start-Taste, um den Film zu starten!
<br><br>
<embed src="mulmedia/kohl.avi" autostart=false width=260 height=260>
</center>
</body></html>

... und so sieht's im Browser aus (Datei video.htm)

Dieses Beispiel habe ich mit Netscape Navigator 4.7 und Internet Explorer 5.5
getestet. Ob es auch mit anderen Browsern funktioniert, kann ich nicht
garantieren.

Noch ein paar Hinweise zur Video-Einbettung:
- mit dem Attribut loop="true" im embed-Tag können Sie bewirken, dass der Film
  in einer Dauerschleife ständig wiederholt wird.
- Die Größenanpassung mit width und height funktioniert nicht beim Netscape
  Navigator.
- Geben Sie Ihren Seitenbesuchern durch entsprechende Links die Möglichkeit,
  selbst zu entscheiden, ob sie einen längeren Videofilm sehen wollen oder
  nicht.

      _____________________________
_____/ Flash-Animationen einbinden \____________________________________________

Auf immer mehr Internet-Seiten findet man heute Flash-Filme. Flash ist ein 
Format der Firma Macromedia für Filme im Vektorformat. Damit kann man außer 
Filmen auch Navigationselemente, Animationen, Spiele und sogar ganze Webseiten 
realisieren. Aufgrund des Vektorformats benötigen Flash-Objekte im Gegensatz zu 
Pixelgrafiken und Video-Filmen sehr wenig Speicherplatz. Mehr Informationen über 
-> Vektorgrafik erhalten Sie unten im Internet-Glossar.

Zum Erstellen von Flash-Animationen benötigt man die leider sehr teuere Software 
"Macromedia Flash", zum Abspielen im Browser das kostenlose Plugin "Macromedia 
Flash Player", das in jeden modernen Browser bereits integriert ist. Eine 30-
Tage Testversion von Flash ist bei www.macromedia.de erhältlich.

Ein anderes Programm zum Erstellen von Flash-Animationen ist "SWiSH ". Eine 
Testversion von SWiSH steht auf www.swishzone.com zum Herunterladen bereit.
SWiSH ist mit ca. 50$ wesentlich kostengünstiger als Macromedia Flash und ist
sehr einfach zu bedienen - ideal für Einsteiger.

Kleinere Flash-Animationen lassen sich auch mit dem preiswerten "GIF 
Animator" der Firma Ulead ( www.ulead.com/ga/features.htm ) erstellen.

Fertige Flash-Objekte haben die Dateiendung ".swf" (ShockWave Flash). Die noch
editierbaren Rohdateien die Endung ".FLA".

Und nun als kleines Beispiel eine Flash-Animation "licht.swf", bei der ein
Lichteffekt über einen Text wandert:

<html><head><title>Flash-Animation "Lichteffekt"</title></head><body>
<object width=100% height=100%> <param name=movie value="mulmedia/licht.swf">
   <embed src="mulmedia/licht.swf" width=100% height=100%> </embed>
</object>
</body>
</html>

... und so sieht's im Browser aus (Datei flash.htm)

Das <object ...> Tag ist für die Darstellung im Internet Explorer zuständig.
Da der Netscape Navigator dieses Tag nicht versteht, habe ich zusätzlich das
<embed ...> Tag eingefügt. Ich habe diese HTML-Datei mit dem Internet Explorer
5.5 und dem Netscape Navigator 4.7 getestet. Die korrekte Funktion in anderen
Browsern kann ich also nicht garantieren.

Mehr über Flash erfahren Sie unten im Internet-Glossar unter -> Flash. Da habe
ich auch meine Meinung über Flash kundgetan.

Jede Menge Tutorials, Tipps und Beispieldateien zu Flash finden Sie auf
www.flashhilfe.de und www.flashkit.com .

                                                                    [zum Inhalt]

<-------------====================================================------------->
                                JavaScript
<-------------====================================================------------->

JavaScript ist eine von Netscape "erfundene" Scriptsprache, deren Anweisungen 
meist direkt im HTML-Code stehen. Leider sind die Implementierungen der 
einzelnen JavaCript Interpreter bei den einzelnen Browsern recht 
unterschiedlich, so dass Seiten mit JavaScript auf verschieden Browsern 
sorgfältig getestet werden müssen. Meiner Meinung nach gibt es für JavaScript 
nur wenige sinvolle Anwendungen, z.B. das Erzeugen von Popup-Fenstern, in denen 
Bilder, Text oder Flash-Filme angezeigt werden oder Seitenumleitungen. Auch das 
Sperren von Seiten per Passwort, die gemeinsame Auffrischung eines gesamten 
Framesets und die Auswertung von Formularen sind sinnvolle Anwendungen von 
JavaScript.

Die meisten Anwendungen von JavaScript sind jedoch völlig überflüssige 
Spielereien wie etwa Links und Grafiken, die sich in ändern, wenn die Maus 
darüberfährt (sogenannte OnMouseOver- oder Hover-Effekte), eine Datumsanzeige, 
Laufschrift in der Statuszeile, das Sperren der rechten Maustaste und das 
Anzeigen eines Begrüßungsfensters beim Öffnen einer Webseite. Viele Surfer haben 
JavaScript wegen der nervigen JavaScript-Spielereien oder aus Sicherheitsgründen 
in ihren Browser- Einstellungen deaktiviert.

      _______________________________________________________
_____/ Beispiel 1 für JavaScript: Rechte Maustaste lahmlegen \__________________

Das folgende Script legt die rechte Maustaste lahm, ein gewisser Schutz vor dem
Diebstahl von Grafiken aus Ihrer Seite - Das hilft natürlich nur bei
unerfahrenen Surfern.

<html><head>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if (document.layers){
window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
window.onmousedown=rightclick;
window.onmouseup=rightclick;
function rightclick(e) {
if (e.which == 3) {
// Put right mouse code here
alert('Die rechte Maustaste wurde lahmgelegt');
return false;
}
else {
return true;
}
}
}
if (document.all){
function click() {
if (event.button==2) {
alert('Die rechte Maustaste wurde lahmgelegt')
}
if (event.button==3) {
alert('Die rechte Maustaste wurde lahmgelegt')}
}
document.onmousedown=click
}
// -->
</script>
</head>
<body>Gruss von Thomas Antoni - Drueck mal die rechte Maustaste!</body>
</html>

... und so sieht's im Browser aus (Datei jscript1.htm)

Das Ganze ist eine nette Spielerei, aber meiner Meinung nach total überflüssig 
und für die Besucher Ihrer Seite nichts als nervig.

Das Javascript ist hier übrigen in Kommentar-Tags "<!-- ... //-->" eingefügt,
also als HTML-Kommentar ausgeführt. Dies ist für alle JavaScripts eine
empfehlenswerte Sache, denn so wird das Script von älteren Browsern, die noch
kein JavaScript verstehen, einfach überlesen und kann keinen "Schaden"
anrichten.

Unten bei den "Tipps und Tricks" finden Sie eine weitere, wesentlich elegantere
Methode zur Bekämpfung des "Bilderklaus", die ganz ohne JavaScript auskommt.

                                                                    [zum Inhalt]
    ______________________________________________________________________
___/ Beispiel 2 für JavaScript: Browserfenster mit wählbarer Größe öffnen \_____

In diesem Beispiel sehen Sie eine ausnahmsweise recht nützlich Anwendung
von JavaScript: In einem Popup-Browserfenster der Größe 250 x 110 Pixel wird
eine zweite HTML Datei göffnet, nämlich die oben besprochene Datei bgrafik.htm
mit der "Regentropfen"-Hintergrundgrafik. Dieses JavaSript kann man z.B. prima
gebrauchen zum Anzeigen von Fotos in einem auf die Foto-Größe verkleinerten
Browserfenster.

*** Wichtiger Hinweis ***
Beachten Sie bitte, dass die an zwei Stellen am Zeilenende auftretenden drei 
Punkte "..." und den darauffolgenden Zeilenumbruch in der tatsächlichen HTML-
Datei wegfallen müssen (dort entsteht dann eine "Langzeile"). Ich habe sie nur 
wegen der besseren Lesbarkeit eingefügt.

<html><head>
<script language="JavaScript">
<!--
function PopupFenster()
{
  // open the popup window
    var popupURL = "bgrafik.htm";
    var popup = window.open(popupURL,"TripodPopup",'toolbar=0,location=0,   ...
       directories=0,status=0,menubar=0,scrollbars=1,resizable=0,width=250, ...
       height=110');
    popup.location = popupURL;
    popup.focus();
}
// -->
</script>
<!--Ende JavaScript code -->
</head>
<body>
Hallo, hier kommst Du vom Regen
<a href="jscript2.htm" ONCLICK="PopupFenster()">in die Traufe</a>
<p>
Und hier kannst Du Regen per Knopfdruck erzeugen:
<form OnSubmit="PopupFenster()">
<input type="submit" value="Regen">
</form></p>
</body>
</html>

... und so sieht's im Browser aus (Datei jscript2.htm)

Die im <head> Bereich definierte JavaScript - Funktion "PopupFenster" wird im
Body-Teil zweimal aufgerufen, einmal beim Klick auf den Textlink "in die Traufe"
und einmal beim Betätigen der "Regen"-Schaltfläche im Formular. Bei dem Textlink
habe ich keine Realisierungsmöglichkeit gefunden, die ohne das erneute Aufrufen
der aktuellen Seite "jscript2.htm" auskommt. Wer eine andere Lösung kennt, der
sende mir bitte eine Mail.

Wenn Sie übrigens den Befehl "PopupFenster()"  direkt hinter das durch die 
geschweifte Klammer "}" gekennzeichnete Ende der Script-Definition einfügen, so 
poppt das Fenster immer beim Öffnen der Seite sofort automatisch auf. Aber 
Vorsicht, dies wird von vielen Surfern - mich eingeschlossen - als äußerst 
unangenehm empfunden.

      __________________________________________________________
_____/ Beispiel 3 für JavaScript: HTML-Seite mit Passwortschutz \_______________

Haben Sie Seiteninhalte, die nicht jedermann sehen soll? Z.B. Ihr Familienalbum
oder Ihre Clubnachrichten? Dann sperren Sie doch einfach die betroffenen HTML-
Seiten durch einen Passwortschutz.

Nicht so leicht zu knacken ist die Passworfunktion in dem folgenden Beispiel:

<html><head><title>Javascript für Passwortschutz</title>
<!-- ======================= Javascript für Passwort ==================== -->
<SCRIPT LANGUAGE="JavaScript">
<!--
function passwort()
{
 location.href=document.pword.pwd.value + ".htm";
}
//-->
</SCRIPT>
</head>
<!-- ========================= Body der Seite ========================== -->
<body>
<h2>Hier dürfen nur Berechtigte hinein.</h2>
<br><b>Gib als Passwort die letzten 3 Buchstaben des Alphabets ein</b>
<br><br>Verwende dabei ausschließlich Kleinbuchstaben
<br><hr><br>

<!-- =============== Formular mit Aufruf des Javascript =============== -->
<FORM NAME="pword">
  <B>Passwort eingeben:</B>
  <INPUT TYPE="PASSWORD" NAME="pwd" SIZE="10" MAX-LENGTH="10">
  &nbsp;&nbsp;&nbsp;
  <INPUT TYPE="button" VALUE="  OK  " onClick="passwort()">
</FORM>
<!-- ================ Ende des Formulars ============================== -->
<font size="-1">Schließe die Eingabe mit dem OK-Knopf ab.
<br> Die Eingabe-Taste funktioniert hierfür nicht</font>
</body>
</html>

... und so sieht's im Browser aus (Datei passwort.htm)

In dem JavaScript im Head-Bereich wird die Passwortfunktion deklariert. In einem
Formular erfolgt die Eingabe des Passworts. Wenn Sie auf den OK-Knopf klicken,
erfolgt der Aufruf einer HTML-Seite, die denselben Namen wie das Passwort hat.
Die geschützte Seite muss also denselben Namen haben, wie das Passwort selbst
und die Dateierweiterung ".HTM". Im obigen Beispiel ist dies die datei XYZ.HTM,
die im "Rezept"-Verzeichnis dieses Kochbuchs hinterlegt ist. Bei falschem
Passwort zeigt der Browser eine Fehlermeldung "Seite nicht gefunden" an.

Dieses JavaScript hat gegenüber vielen anderen im Internet angebotenen
Passwortscripts den Vorteil, dass das Passwort selbst nicht im Script auftaucht,
also auch in der Quelltext-Ansicht des Browsers nicht ausspähbar ist.

Aber auch hier gilt dasselbe wie bei fast jedem Zugriffsschutz: Ein Profi wird
selbst diese Sperre knacken können.

                                                                    [zum Inhalt]
      _________________________________________________________
_____/ Beispiel 4 für JavaScript: Grafischer Mouse-Over-Effekt \_______________

Dieses Beispiel zeigt eine nette Spielerei: Es werden 3 Grafiken (computer.gif,
links.gif und download.gif) als Links verwendet. Fährt man mit der Maus über
eine der Grafiken,so erscheint wie von Geisterhand eine zweite Grafik anstatt
des Originals (computer2.gif, links2.gif und download2.gif). Verweilt
die Maus länger über einer Grafik, so erscheint der alternative Text der zweiten
Grafik quasi als "Bubble-Help" oder "ToolTip".

Und nun zu unserem Besipiel:

<html><head><title>Grafischer On-Mouse-Over-Effekt</title>
<script language="JavaScript">
<!--
a_low = new Image();
a_high = new Image();
b_low = new Image();
b_high = new Image();
c_low = new Image();
c_high = new Image();

a_low.src = "bilder/computer.gif";
a_high.src = "bilder/computer2.gif";
b_low.src = "bilder/links.gif";
b_high.src = "bilder/links2.gif";
c_low.src = "bilder/download.gif";
c_high.src = "bilder/download2.gif";

function bildhigh(Bildnr,Bildobjekt)
{
  window.document.images[Bildnr].src = Bildobjekt.src;
}
function bildlow(Bildnr,Bildobjekt)
{
  window.document.images[Bildnr].src = Bildobjekt.src;
}
//-->
</script>

</head><body>
<table border=1>
<tr><td>
  <a href="computer.html"
     onmouseover="bildhigh(0,a_high)"
      onmouseout="bildlow(0,a_low)">
  <img src="bilder/computer.gif" border=0 alt="Computer"></a>
</td></tr>
<tr><td>
  <a href="links.html"
     onmouseover="bildhigh(1,b_high)"
      onmouseout="bildlow(1,b_low)">
  <img src="bilder/links.gif" border=0 alt="Links"></a>
</td></tr>
<tr><td>
  <a href="download.html"
     onmouseover="bildhigh(2,c_high)"
      onmouseout="bildlow(2,c_low)">
  <img src="bilder/download.gif" border=0 alt="Download"></a>
</td></tr>
</table>
</body></html>

... und so sieht's im Browser aus (Datei mausover.htm)

Auf den JavaScript-Code will ich nicht weiter eingehen. Sie können problemlos
ihre eigenen grafischen Menüs in dies Gerüst einhängen.

Ich persönlich bin kein Freund solcher Mouse-Over Links - wegen des enormen,
Ladezeit-verlängernden Speicherbedarfs. Wenn Sie ein Menü mit 10 Buttons
gestalten, benötigen Sie 20 Grafikdateien dafür. Bei einem Mindestbedarf von
ca. 1,5 kB je Grafik beansprucht das Menü dann bereits schon 30 KB. Das ist
schon fast die Maximalgrenze für eine ganze HTML-Seite inklusive Grafiken.
Außerdem sind solche Effekte eine reine Spielerei und tragen kein bisschen
zur Vermittlung des Inhalts Ihrer Seite bei.

Wenn schon Mouse-Over-Links sein müssen, dann nehmen Sie doch lieber die
viel schlankeren Textlinks mit Mouse-Over-Effekt. Eine Anleitung hierfür finden
Sie unten unter "Beispiel 2 für CSS".

      ___________________________________________________________
_____/ Beispiel 5 für JavaScript: Laufschrift in der Statuszeile \______________

Als letztes JavaScript-Beispiel finden Sie hier eine Funktion, mit der Sie
äußerst behutsam umgehen sollten, nämlich einen animierten Lauftext in der
unteren Statuszeile des Browserfensters. Dort erscheint als Werbung für meinen
Arbeitgeber der Text "Excellence in Automation & Drives: SIEMENS" .


<html><head><titleJavascript für Laufschrift in der Statuszeile</title></head>
<!-- ========== JavaScript für Lauftext in der Statuszeile =========== -->
<script language="JavaScript">
<!--
  var Text = "+++ Excellence in Automation & Drives: SIEMENS +++            ";
  var Geschwindigkeit = 100;
  var Breite = 70;
  var TextLaenge = Text.length;
  var Position = 1 - Breite;
  function StatusLauftext()
 {
  Position++;
  var Textzustand="";
  if (Position == TextLaenge)
   {
    Position = 1 - Breite;
   }
   if (Position < 0)
   {
    for (var Zaehler=1; Zaehler <= Math.abs(Position); Zaehler++)
     {
      Textzustand = Textzustand + " ";
     };
    Textzustand = Textzustand + Text.substring(0, Breite - Zaehler + 1);
   }
   else
   {
    Textzustand = Textzustand + Text.substring(Position, Breite + Position);
   }
  window.status = Textzustand;
  setTimeout("StatusLauftext()",Geschwindigkeit);
    }
//-->
</script>
<!-- === Aufruf des Scripts im Body-Tag beim Laden der Seite ========= -->
<body onload="StatusLauftext();return true">
<!-- ============= Ende der Laufschrift in Statuszeile =============== -->
<center><h1>JavaScript für Laufschrift in der Statuszeile</h1>
&copy; Thomas Antoni, 2001</center>
</body>
</html>

... und so sieht's im Browser aus (Datei lauftext.htm)

Spielen Sie ruhig mal mit den verschiedenen Parametern des Sripts herum und
gestalten Sie Ihre eigene Laufschrift. Oben sagte ich, dass Sie behutsam mit
diesem Effekt umgehen sollten. Der Grund dafür ist, dass der Effekt sehr schnell
nervt, wenn er auf allen Ihren HTML-Seiten erscheint. Außerdem nimmt er dem
Seitenbesucher die gewohnen Funktionen der Statuszeile, z.B. die Anzeige des
aktuellen Links, auf den die Maus gerade zeigt. Bauen Sie die Laufschrift also
nur gezielt auf eine oder zwei besondere Werbeseiten ein, und verschonen Sie
Ihre Besucher ansonsten damit.

                                                                    [zum Inhalt]
      ____________________________
_____/ Mehr Infos über JavaScript \_____________________________________________

Bei diesen fünf Beispielen zu JavaScript will ich es belassen und auch auf die
Befehls-Syntax von Javascript nicht im Einzelnen eingehen. Ausführliche Infos
über JavaScript erhalten Sie in Stefan Münz' SelfHTML.

Viele weitere Informationen, Tipps und Beispiele erhalten Sie auf der wohl
bekannteste Deutsche Webseite zu JavaScript "Kakao&Kekse"
( www.javascript.seite.net/index.html ).

      _____________________
_____/ JavaScript lernen ? \____________________________________________________

Ich will Ihnen jetzt mal ein Geheimnis verraten: Es lohnt sich für Sie
vermutlich überhaupt nicht, JavaScript zu lernen. 98% der Leute, die JavaScripts
einsetzen, beherrschen diese Sprache in keiner Weise, sondern verwenden fertige
JavaScripts, die sie für Ihre Bedürfnisse zurechtbasteln, ohne genau zu wissen,
was sie eigentlich tun. Bitte verpetzen Sie mich nicht: Ich mache es auch so :)

Außerdem - wie gesagt: Die weitaus meisten JavaScript-Anwendungen, die Sie so
auf den Webseiten finden, sind sowieso total überflüssige Spielereien!

Sie können Unmengen fertiger, mundgerechte JavaScripts für alle erdenklichen
Anwendungen im Internet herunterladen, z.B. bei www.planet.mamos.de

Wenn Sie unbedingt etwas Nützliches dazulernen wollen, dann vertiefen Sie sich
statt in JavaScript lieber in die server-seitige Programmierung dynamischer
Webseiten mit der Programmiersprache "PHP"; siehe die Begriffsdefinition von
-> PHP im untenstehenden "Internet-Glossar".

                                                                    [zum Inhalt]

<-------------====================================================------------->
                        Cascading Style Sheets (CSS)
<-------------====================================================------------->

Cascading Style Sheets möchte ich hier nur kurz anreißen. CSS ist eine der
wichtigsten Erweiterungen des HTML-Standards. Mit CSS kann man unter anderem die
Gestaltung/Formatierung und den Inhalt einer Webseite voneinander trennen: Der
Body-Teil der HTML-Seite enthält nur den Text und die grundsätzlichen
Strukturierungs-Tags. Die Formatierungen lagert man in ein Datei-internes oder
externes "Style Sheet" aus, das im <head>-Bereich der Webseite eingebunden wird.
Statt in jedem Absatz erneut die Schriftart, -farbe und -größe zu definieren,
bestimmt man im Style Sheet, dass alle Absätze (oder Tabellenzellen) mit einer
bestimmten Formatierung angezeigt werden sollen.

Diese Vorgehensweise führt zu schlankere HTML-Dokumenten und vereinfacht die
Umformatierung bei Änderungen des Textlayouts. Außerdem sind Effekte möglich,
die das "normale" HTML nicht unterstützt.

Diese Vorgehensweise funktioniert sowohl innerhalb des HTML-Dokuments als auch
über eine externe Datei. Im zweitgenannten Falle teilen sich mehrere Webseiten
ein gemeinsames Stylesheet, und man kann durch Änderung dieser Stilvorlage alle
verbundenen Seiten umformatieren. In Sekundenschnelle kann der Web-Autor z.B.
die Schriftgrößen für eine komplette Website anpassen, egal, ob diese aus 10
oder aus 1000 Seiten besteht.

Leider wird CSS von den verschiedenen Browsern etwas unterschiedlich 
interpretiert. Selbst die aktuellen Browser-Versionen stellen einige CSS-Befehle 
gar nicht oder sehr eigenwillig dar. Daher gilt: Testen Sie Ihre CSS-Funktionen 
vor dem Heraufladen mit verschiedenen Versionen der gängigen Browser. Die 
folgenden CSS-Beispiele habe ich mit Internet Explorer 5.5 und Netcape Navigator 
4.7 getestet. Eine Funktionsgarantie für andere Browser kann ich nicht geben.

Dennoch: CSS gehört die Zukunft. In künftigen HTML Standards wird es z.B. das 
<font>-Tag und das <center>-Tag gar nicht mehr geben, so dass fast alle 
Textformatierungen über CSS erfolgen werden. Aber keine Angst: Wenn Sie vom 
<!DOCTYPE ...> Tag die zu Ihrer Seite kompatible HTML-Version angeben, werden 
alle künftigen Browser Ihre Seiten richtig anzeigen (zu DOCTYPE: Siehe oben in 
Schritt 5 "Grundsätzlicher Aufbau einer HTML-Datei").

      _______________________________________________
_____/ Beispiel 1 für CSS: Zentrale Textformatierung \__________________________

Und hier eine kleine Beispiel-Webseite mit CSS.

<html><head><title>CSS-Beispiel</title>
<style type="text/css">
<!--
  p.normal { font-size:10pt; color:black; }
  p.gross { font-size:12pt; color:black; }
  p.klein { font-size:8pt; color:black; }
  p.giga { font-size:60pt; color:red; }
  .rot { color:red; background-color:#FFFF00}
  .blau { color:blue; }
//-->
</style>
</head><body>
<p class="normal">Normaler Textabsatz mit Schrift, 10 Punkt, schwarz</p>
<p class="gross">Textabsatz mit Schrift 12 Punkt, schwarz</p>
<p class="klein">Textabsatz mit Schrift 8 Punkt, schwarz</p>
<p class="giga">~(°.°)~ Textabsatz mit gigantischer Schrift, rot /(°o°)\ </p>
<p class="rot">roter Textabsatz auf gelbem Hintergrund</p>
<address class="rot">roter Absatz für Adressen auf gelbem Hintergrund</address>
<blockquote class="blau">blaues Zitat</blockquote>
<br>
<font style="background-color: #E3ECF9" color="darkblue">man kann CSS aber
auch - wie hier - direkt im HTML-Code verwenden!</font>
</body></html>

... und so sieht's im Browser aus (Datei css1.htm)

Sie sehen hier Dinge, die mit normalem HTML undenkbar sind. Alles zwischen 
<style ...> und </style> ist die Stylesheet-Definition. Die Funktion der 
einzelnen Befehle ist weitgehend selbsterklärend. In der vorletzten Zeile der 
Datei gibt es noch ein Beispiel für eine "dezentrale Textformatierung" mit CSS: 
Hier wird CSS direkt - ohne spezielle Style Sheet Datei - direkt in den HTML-
Code im Body eingefügt.

                                                                    [zum Inhalt]
      _________________________________________________
_____/ Beispiel 2 für CSS: Textlinks mit Hover-Effekt  \________________________

In diesem Beispiel werden Textlinks mit eine "Hover-Funktion" versehen: Fährt
man mit der Maus über einen Textlink, dann wird der Link rot eingefärbt. Das
funktioniert leider nicht beim Netscape Navigator bis 4.x, stört dort aber auch
nicht weiter.

<html><head><title>CSS für Hover-Effekt</title></head></body>
<!-- ============ Hover-Effekte ================= -->
<!-- a:hover ist das was passiert, wenn man mit der Maus drüber fährt -->
<!-- und a das Layout wenn die Maus nicht drüber ist. -->
<style type="text/css">
<!--
a:hover {  font-weight: normal; color: #FF3333; text-decoration: underline}
a {  text-decoration: underline; color: #000000}
-->
</style>
<!-- ====== Ende Hover-Effekte ================== -->
Sind Sie ein QBasic-Fan? Dann müssen Sie
 <a href="http://www.qbasic.de">www.qbasic.de</a> besuchen.
</body>
</html>

... und so sieht's im Browser aus (Datei css2.htm)

Im Internet Explorer und genießen Sie einen netten optischen Effekt
wenn die Maus über den Link "www.qbasic.de" gleitet.

      __________________________________________
_____/ Beispiel 3 für CSS: Farbige Scrollbalken \_______________________________

Spielen Sie gerne herum? Dann habe ich für Sie einen kleines optischen "Gimmick"
auf Lager, nämlich das Einfärben der Rollbalken in den Browser- und Frame-
Fenstern mit einem einzigen CSS-Befehl, der aber nur bei neueren Internet
Explorer-Versionen funktioniert. Beim Netscape-Navigator bis 4.x funktioniert
der Trick nicht, schadet aber auch nicht weiter.

Starten Sie einmal die folgende Beispiel-Datei:

<html><head><title>Farbige Scrollbalken</title>
<style type="text/css">
 body
 {scrollbar-DarkShadow-Color:#A8CAFE;
  scrollbar-Track-Color:#A0C0FF;
  scrollbar-Face-Color:#A8CAFE;
  scrollbar-Shadow-Color:#CCFFFF;
  scrollbar-Highlight-Color:#CCFFFF;
  scrollbar-3dLight-Color:#A8CAFE;
  scrollbar-Arrow-Color:#0000FF;}
</style>
</head>
<body  bgcolor="#ffffcc">
Dieses Browserfenster hat coole Scrollbalken
- aber leider nur im "Winzigweich Zwischennetz-Erkunder"
(Microsoft Internet Explorer)
</body></html>

... und so sieht's im Browser aus (Datei scrolbar.htm)

Die einzelnen Attribute haben die folgende Bedeutung:

- DarkShadow-Color = 3D-Schatten (äußerer, etwas dunklerer Teil)
- Track-Color      = Grundfarbe
- Face-Color       = Schiebebalken
- Shadow-Color     = 3D-Schatten (äußerer, etwas hellerer Teil)
- Highlight-Color  = 3D-Lichter  (innerer, etwas hellerer Teil, "Glanzlichter")
- 3dLight-Color    = 3D-Lichter  (äußerer, etwas dunklerer Teil)
- Arrow-Color      = Pfeile

Sie sehen einen netten himmelblauen Scrollbalken statt des grauen Windows -
Einheitslooks. Verkleinern Sie mal das Browserfenster mit der Maus auf
Streicholzschachtelgröße und genießen Sie den witzigen Effekt.

Solche Sachen sind Geschmacksache. Ich selbst, als knochentrockener Techniker,
bevorzuge das Einheitsdesign der Windows - Oberfläche, bei dem sich jeder
Besucher gleich zuhause fühlt. Siehe hierzu auch den untenstehend Abschnitt "Der
normale Surfer verwenden höchst ungern den Scrollbalken !" in Schritt 7.

                                                                   [zum Inhalt]
      ___________________________________________________________
_____/ Beispiel 4 für CSS: Definitionsliste mit Highlight-Effekt \______________

Oben haben Sie im Abschnitt "Aufzählungslisten" erfahren, wie Sie 
Definitionslisten mit den Tags <dl> (Definition List") und <dt> ("Definition 
Topic") erzeugen können.

In dem folgenden Besipiel zeige ich Ihnen, wie Sie eine solche Liste optisch 
aufpeppen, indem Sie die Definitionsüberschriften farbig "highlighten".


<html><head><title>Definitionsliste mit Hightlight-Effekt</title>

<style type="text/css">
<!--
.marker {font-weight:bold; color:#ffffff; background-color:#ff0000;
width: 100%; border: 1px yellow;}
//-->
</style>

</head><body>
Dies ist eine Definitionsliste mit Highlight-Effekt bei den
Überschriften (funktioniert auch beim Netscape Navigator 4.x!). 
<dl>
<dt><span class="marker">&nbsp;HTML</span></dt>
   <dd>Hypertext Markup Language</dd>
<dt><font class="marker">&nbsp;Bookmark</font></dt>
   <dd>Lesezeichen bzw. Favorit (Beim Internet Explorer)</dd>
<dt><font class="marker">&nbsp;URL</font></dt>
   <dd>Uniform Resource Locator = Adresse im Internet</dd>
</dl>
</body></html>

... und so sieht's im Browser aus (Datei listecss.htm)

Der durch "border: 1px yellow;" erzeugte Rahmen mit 1 Pixel Breite bewirkt, dass 
der Highlight-Effekt nicht nur vom Internet Explorer, sondern auch vom Netscape-
Navigator 4.x bis zum Zeilenende reicht.


      _____________________
_____/ Mehr Infos über CSS \__________________________________________________

So, mit diesen 4 Beispielen haben wir das Thema CSS kurz angekratzt. Dabei 
möchte ich es bewenden lassen. Wer mehr über CSS wissen möchte, dem empfehle ich 
wieder einmal Stefan Münz' SelfHTML sowie die folgenden Webseiten:

- http://go4xml.com   (deutscher CSS-Kurs)
- www.w3schools.com   (englischer CSS-Lernkurs)

Beachten Sie bitte, dass ältere Browser mit CSS nichts anfangen können.  Erst 
der Internet Explorer ab Version 3.0 und Netscape Navigator ab Version 4.0 
unterstützen CSS. Gestalten Sie Ihre Seiten also möglichst so, dass sie auch 
ohne CSS-Unterstützung einigermaßen lesbar und navigierbar sind.

                                                                    [zum Inhalt]

<-------------====================================================------------->
                          Tipps und Tricks zu HTML
<-------------====================================================------------->

      ___________________________________________________________
_____/ HTML-Seiten mit einem Textverarbeitungsprogramm erstellen \______________

Zur Not können Sie auch ein normales Textverarbeitungsprogramm, etwa Word, zum 
Erstellen von HTML-Seiten verwenden. Sie müssen dabei nur darauf achten, dass 
Sie beim erstmaligen Abspeichern der Datei unbedingt als Dateityp "Nur Text 
(*.txt)" wählen und im Dateinamen die Dateierweiterung ".HTM" von Hand 
eintragen. Eventuelle Warnmeldungen können Sie dann getrost wegklicken. So 
erreichen Sie, dass die Seite ohne jegliche störenden Formatierungs-
Informationen als "nackter" ASCII-Text abgespeichert werden (je Zeichen ein 
Byte).

      ______________________________________________
_____/ Wie realisiere ich eine Webseiten-Umleitung? \___________________________

Sie wollen Ihren Seitenbesucher automatisch auf eine andere Seite umleiten?
Das ist kein Problem. Ich zeige Ihnen hierfür zwei Methoden: Eine einfache und
eine komfortable.

*** Einfache Methode
Am einfachsten bewerkstelligen Sie eine Webseitenumleitung mit einem sogenannten
"Header-Redirect" wie folgt im  <header>...</header> Bereich:

Beispiel:

<html><head><title>Seitenumleitung</title>
<meta http-equiv="refresh" content="5; URL=http://www.antonis.de">
</head>
<body>Sie werden innerhalb von 5 sec zu www.antonis.de umgeleitet.
<br><br>
Klicken Sie <a href="http://www.antonis.de">hier</a>, wenn Ihr Browser
keine automatische Seitenumleitung unterstützt.
</body>
</html>

... und so sieht's im Browser aus (Datei umleit01.htm)

Wenn Sie content="0..." verwenden, erfolgt die Umleitung sofort. Stellen Sie 
immer - wie im Beispiel - einen zusätzlichen, direkt anklickbaren Link zur 
Verfügung, da ältere Browser die automatische Weiterleitung nicht unterstützen.

*** Komfortable Methode
Bei der komfortablen Methode wird ein Frameset verwendet, der aus nur einem
fensterfüllenden Frame besteht, in den dann die Seite, zu der die Umleitung 
erfolgen soll, geladen wird:

Dies hat den entscheidenden Vorteil, dass die Kurzadresse in der Adressleiste 
des Browsers bestehen bleibt und nicht, wie bei einer echten Weiterleitung, 
durch die eigentliche Adresse ersetzt wird. Diese Technologie nutzen fast alle 
kommerziellen Weiterleitunganbieter, z.B. http://nic.de.vu . Wenn ein Besucher 
die Seite seinen Bookmarks bzw Favoriten hinzufügt, so erscheint dort ebenfalls 
die Kurzadresse und nicht die Zieladresse. Außerdem bleibt in der oberen 
Titelzeile des Browsers der Titel der umleitenden Seite erhalten.

Beispiel:

<html><head>
<title>Nette Umleitung (Datei umleit02.htm)</title>
</head>
<frameset rows="100%,*" framespacing="0" border="0" frameborder="0">
<frame scrolling="auto" noresize marginwidth="0" marginheight="0" 
  src="welcome.htm">
</frameset>

<noframes>
<body>
<font color=blue size=+2>Klicken Sie
<a href="welcome.htm">hier</a>, um zu unserer Webseite zu gelangen.
</body>
</noframes>
</html>

... und so sieht's im Browser aus (Datei umleit02.htm)

Beachten Sie die Titelzeile des Browserfensters: Hier steht "Nette Umleitung"
statt der Titelzeile der Webseite welcome.htm.

Der Noframes-Bereich <noframes>...</noframes> sorgt dafür, dass die Umleitung 
auch bei alten Browsern funktioniert, die keine Frames unterstützen (siehe auch 
oben im Abschnitt "Frames"). 

                                                                    [zum Inhalt]
      __________________________________________________________
_____/ Lassen Sie Ihre Seite nicht in fremden Frames einfangen! \_______________

Die meisten Homepage-Besitzer sehen es sehr ungern, wenn eines ihrer HTML-
Dokumente per Link von einer fremden Webseite in deren Frameset eingefangen 
wird. Dies erweckt nämlich beim Besucher den Eindruck, dass das Dokument 
Bestandteil der fremden Webseite ist, und es verbirgt dessen Urheberschaft.

Mit Hilfe der beiden folgenden beiden JavaScripts können Sie den fremden Frame 
aufbrechen und für die Anzeige Ihrer Seite in einem Browserfendster voller
Größe sorgen:

*** Erstes "Framebrecher" - JavaScript

<!-- Beginn des Frame-Brecher JavaScripts -->
   <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
   <!-- 
   if(top.frames.length > 0) top.location.href=self.location;
   // -->
   </SCRIPT>
<!-- Ende JavaScript -->

Fügen Sie dieses Script in den <head>...<head> Bereich der zu schützenden Seite
an beliebiger Stelle ein.

*** Zweites "Framebrecher" - JavaScript

<head>
...
<!-- Beginn des  JavaScripts -->
<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!--
function breakOut() {
  if (self !=top) window.open("http://www.IhreHomepage.de/Seite.htm","_top");
}
// -->
</SCRIPT>      
<!-- Ende JavaScripts -->
   ...
</head>
<body  onLoad="breakOut()">

Im Body-Tag erfolgt beim Laden der Seite der Start des im <head> Bereich 
deklarierten JavaScripts.

                                                                    [zum Inhalt]
      ___________________________________________________
_____/ Stop dem Bilderklau - verstecken Sie Ihre Bilder! \______________________

Beim Surfen im Internet lassen sich die meisten Grafiken und Bilder mit dem
Browser ganz leicht über die rechte Maustaste auf die eigene Festplatte
kopieren, z.B. über "Bild speichern unter...".

Als Inhaber einer Webseite können Sie diesen Bild-Diebstahl mit einem Trick
erschweren.

Oben im ersten JavaScript-Beispiel 1 haben Sie erfahren, wie Sie die rechte
Maustaste sperren und hierdurch einen gewissen Schutz gegen Bilderklau
realisieren können.

Hier verrate ich Ihnen jetzt einen weitaus raffinierteren Trick - ganz ohne 
JavaScript. Die Raffinesse besteht darin, dass der Bilderdieb tatsächlich eine 
Grafik herunterlädt. Nur erhält er statt des vermeintlichen atemberaubenden 
Bildes nur eine völlig wertlose Datei, die lediglich aus einer einen Pixel 
großen, transparenten GIF-Grafik besteht.

Schauen Sie sich mal die folgende Beispieldatei an:

<html><head><title>Bild verstecken</title></head>
<body>
<table border=0 cellpadding=0 cellspacing=0 width=100 height=100
   background="bilder/elch.gif">
<tr><td>
  <table border=0 cellpadding=0 cellspacing=0 width=100 height=100>
  <tr><td>
  <img src="bilder/blank.gif" width=100 height=100 align=center border=0>
  </td></tr>
  </table>
</td></tr>
</table>
</body></html>

... und so sieht's im Browser aus (Datei versteck.htm)

Starten Sie die Beispieldatei VERSTECK.HTM, laden Sie über die rechte Maustaste 
den "Elch" herunter und betrachten Sie die heruntergeladene Datei in Ihrem 
Grafikbearbeitungsprogramm. Und was sehen Sie da? Nichts!

Der Trick funktioniert folgendermaßen: Sie erzeugen im HTML-Code eine Tabelle in
der Größe des Bildes und verwenden dort das anzuzeigende Bild - im Beispiel
ELCH.GIF - als Tabellenhintergrund. Dann verschachteln Sie eine zweite Tabelle
in die erste. In der zweiten Tabelle platzieren Sie eine transparente und nur 1
Pixel große GIF-Datei (hier BLANK.GIF), die Sie mit den Attributen HEIGHT und
WIDTH auf die Größe des eigentlichen Bildes "aufblasen".

Wenn jemand das sichtbare Bild ELCH.GIF von der fertigen Webseite speichern
möchte, erhält er über das Kontextmenü nur Zugriff auf die transparente GIF-
Datei BLANK.GIF, in der er nichts sieht. Durch eine pfiffige Namensgebung für
die transparente GIF können Sie dem Bilderdieb leicht eine plausible Grafikdatei
vorgaukeln.

Eins ist natürlich klar: Absoluten Diebstahlschutz gibt es im WWW nicht. Es
braucht sich nur jemand den Quelltext Ihrer HTML-Seite anzuschauen, um zu wissen
was gespielt wird. Aber der geschilderte Trick ist immerhin eine gewisse
Barriere, die der "normale Surfer" nicht so leicht überwinden kann.

Außerdem kann ein hartnäckiger Bilderdieb mit der Taste "Druck"  natürlich 
jederzeit den Bildschirminhalt als Pixelgrafik in die Zwischenablage kopieren 
und mit jedem beliebigen Grafikprogramm weiterverarbeiten und abspeichern. Dazu 
muss er den "Betrug" aber erstmal gemerkt haben. Und es kostet ihn etwas 
Aufwand.

Noch eine Anmerkung: Der Tipp funktioniert bei einigen älteren Browsern, z.B.
dem Netscape Navigator 3, leider nicht, weil diese keine Hintergrundgrafiken in
Tabellen unterstützen.

      ________________________________________________________
_____/ Laufschrift mit "Marquee", dem meistgehassten HTML-Tag \_________________

Zum Entsetzen vieler Webworker - einschließlich mir selbst - hat das W3C-
Konsortium in der HTML-Spezifikation 4.0 dem eigenmächtig von Microsoft 
eingeführten <marquee> Tag nachträglich den Segen erteilt. Mit diesen Tag kann 
man Laufschriften aller Art erzeugen, wie das folgende Beispiel zeigt:

<html><title>Lauftext mit Marquee</title></head><body>
<h2>Lauftext mit Marquee</h2>
<h3>funktioniert nicht im Netscape Navigator bis Version 4</h3>
<p>  <marquee>
        1. Dieser Text läuft langsam von links nach rechts
      </marquee>
</p>
<p><font color=blue>
      <marquee behavior=alternate>
        2. Dieser Text rollt ruhig hin und her
      </marquee> </font>
</p>
<p><font face="Arial" size=+2 color=red>
      <marquee behavior=slide>
        3. Dieser Text rollt herein und bleibt stehen.
      </marquee></font>
</p>
<p>
      <marquee scrolldelay=10 scrollamount=30>
        4. Dies ist ein Marquee-Schnellzug
      </marquee>
</p>
<p><font color=#FFFF00><b>
     <marquee bgcolor=#990099>
        5. Dieser Scroll-Text erscheint gelb auf violettem Hintergrund
     </marquee></b></font>
</p>
</body></html>

... und so sieht's im Browser aus (Datei lauftex2.htm)

Ich hoffe, dies Beispiel ist abschreckend genug, um Sie ein für alle Mal von dem 
Einsatz dieses wohl nervigsten aller HTML-Tags abzuhalten :) Aus Protest gegen 
dieses Tag gehe ich nicht weiter auf die Attribute des <marquee>-Tags ein :) 
Wenn überhaupt, würde ich die Variante 3 im Beispiel mit dem einmaligen Scrollen 
verwenden. Weitere Informationen zu Marquee finden Sie wiederum in Stefan Münz' 
SelfHTML.

                                                                    [zum Inhalt]
      _____________________
_____/ Weitere HTML-Tipps  \____________________________________________________

In diesem Abschnitt finden Sie einen bunten Strauß von speziellen HTML-Tipps und 
-Tricks, die ich hier aufführe, um den obigen HTML-Kurs nicht mit allzuviel 
Details zu überfrachten. 

   .**********************.
*** Geschachtelte Tabellen ****************************************************

Sie können ohne weiteres in eine Tabellenzelle eine weitere Tabelle 
hineinschachteln. Sie sollten dann aber unbedingt darauf achten, dass jedes 
<tr>-Tag mit einem </tr>-Tag und jedes <td>-Tag mit einem </td>-Tag 
abgeschlossen wird. Sonst werden sich viele Browser an Ihrem Tabellenkonstrukt 
"verschlucken".

   .*****************************************************************.
*** Beenden Sie alle Links, die keinen Dateinamen beinhalten, mit "/" *********

Machen Sie es sich zur Angewohnheit, alle Links ,deren Ziel ein Verzeichnis und 
keine individuelle Datei darstellt, mit einem Schrägstrich abzuschließen.

Beispiel 1:
Schreiben Sie also <a href="http://www.antonis.de/download/"> statt
<a href="http://www.antonis.de/download"> . Dadurch ersparen Sie dem Server die 
Suche nach der nicht vorhandenen Datei "download" und ermöglichen ihm, sofort 
die Startdatei im Verzeichnis "download/" an den PC des Seitenbesuchers zu 
senden. Hierdurch wird die Wartezeit für Ihre Seitenbesucher optimal kurz.

Beispiel 2:
Bei dem Link <a href="http://www.antonis.de/download/index.htm"> entfällt
natürlich der abschließende Schrägstrich, da der Link direkt auf eine Datei
und nicht auf ein Verzeichnis verweist.

   .**************************************.
*** So verwenden Sie einen Button als Link *************************************

Manchmal wünscht man sich einen Button als Hyperlink. Das folgende Beispiel 
demonstriert, wie Sie einen Formularbutton als Link zu meiner Seite realisieren 
können (Das Beispiel funktioniert natürlich nur, wenn Sie online sind):

<html><head><title>Button als Link</title></head><body>
<form action="http://www.antonis.de/"method=get>
 Ein gut besuchtes Einsteiger-Diskussionsforum über Webdesign finden Sie auf
 <input type=submit value="Antonis.de" name="Antonis">
</form>
</body></html>

... und so sieht's im Browser aus (Datei button.htm)

   .**********************************.
*** So rücken Sie Ihren Text links ein ********************************

Wenn Sie Text in HTML-Seiten einfügen, wird er normalerweise ganz linksbündig 
angezeigt, was der Lesbarkeit nicht besonders zuträglich ist. Oft behilft man 
sich mit einer "blinen Tabellenspalte am linken Rand. Eleganter geht es mit CSS 
gemäß folgendem Beispiel, bei dem der gesamte Text um 10% der aktuellen Breite 
des Browserfensters eingerückt ist:

<html><head><title>Einrückung</title>
<style type="text/css">
 body {margin-left:7%}
</style>
</head><body>
Dieser Text ist automatisch um 10% des Browserfensters links eingerückt
</body></html>

... und so sieht's im Browser aus (Datei einrueck.htm)

Wenn Sie nur einen Teil des Textes einrücken wollen, dann funktioniert das so:

<html><head><title>Einrückung</title>
<style type="text/css">
.einrueck { margin-left: 7% }
</style>
</head><body>
Dieser Text ist nicht eingerückt
<p class="einrueck">
   Dieser Text ist um 7% des Browserfensters links eingerückt
</p>
</body></html>

... und so sieht's im Browser aus (Datei einrue2.htm)

                                                                    [zum Inhalt]

<-------------====================================================------------->
                    Weiterführende Tutorials und Bücher
<-------------====================================================------------->

So, damit wären wir am Ende unseres kleinen HTML-Kurses angelangt. Mit dem
Wissen, das Sie im Verlauf dieses Kurses erworben haben, können Sie bereits
durchaus passable und umfangreiche Webseiten gestalten. Wenn Sie wollen, können
Sie es bei diesem Wissensstand belassen.

      ________________________________
_____/ Online-Tutorials für Webworker \_________________________________________

Wenn Sie jetzt aber Blut geleckt haben und unbedingt mehr über HTML erfahren
möchten, dann empfehle ich Ihnen "SelfHTML" von Stefan Münz. SelfHTML ist ein
geniales, völlig kostenloses Online-Lehrbuch und Nachschlagewerk zu HTML,
Javascript und zur Homepage-Erstellung.

Lesen Sie SelfHTML online auf einer der folgenden Seiten:

- http://selfaktuell.teamone.de     (offizielle Seite, aber problematisch zu
                                       erreichen)
- http://de.selfhtml.org/           (offizieller Mirror)
- www.netzwelt.com/selfhtml

oder laden Sie es dort herunter. Als ambitionierter Homepage-Ersteller sollten 
Sie SelfHTML unbedingt herunterladen und als "HTML-Bibel" immer auf ihrem PC 
parat haben.

Unter http://krit.de/apfel-sm.shtml können Sie ein sehr interessantes Foto-
Interview mit Stefan Münz lesen. Dort erfahren Sie unter anderem, wohin die
Online-Sucht führen kann.

      ______________________
_____/ Bücher für Webworker \___________________________________________________

Zusätzlich sollten Sie die Anschaffung eines guten Buches in Erwägung ziehen.
Folgende Bücher über HTML und Webdesign sind empfehlenswert:

- Eines der verschiedenen sehr guten Taschenbücher zum Thema "HTML" für ca.
      10,- EURO. So ein Taschenbuch sollten Sie sich unbedingt anschaffen.
      Ich persönlich kann das  "Einsteigerseminar HTML 4" vom  bhv-Verlag
      empfehlen (ISBN: 3826671503).
- "1000 HP-Geheimnisse", Databecker, ca. 15 EURO - Super Tippsammlung,
      beleuchtet alle Facetten des Webmaster-Alltags
- "Das große Buch - Coole Websites" vom Databecker Verlag, ca. 40,- EUR
      Hier finden Sie das geballte Fachwissen mit vielen Profitricks von
      Dr.Web's Ideenreich ( www.ideenreich.com )
- Auch "SelfHTML" von Stefan Münz gibt es für "Bildschirm-Muffel" neuerdings als
     "HTML 4.0 Handbuch" von Stefan Münz und Wolfgang Nefzger, erschienen als
     Taschenbuch im Franzis-Verlag, 992 Seiten, 25,- EUR (ISBN: 3772318967)

________________________________________________________________________________

[Inhalt] [Crashkurs] [HTML-Kurs] [Tipps&Tricks] [Glossar] [Links für Webworker]



[zur Internet-Startseite www.antonis.de]    -    © 2002 Thomas Antoni    -    thomas@antonis.de