Nokia Handy

Inhaltsverzeichnis

HTML

• Abgezählte Besucher
  
• Absatzanfang hervorheben
  
• Absätze einrücken
  
• Accesskey
  
• Anführungszeichen unten
  
• Automatische Weiterleitung mit Meta-Tag
  
• Bedingte Kommentare
  
• Bewegte Bilder
  
• Bilder ausrichten
  
• Blocksatz
  
• Blocksatz
  
• Bookmark mit Icon
  
• Browser-Fenster öffnen
  
• Bunter Hintergrund
  
• Button als Link
  
• Dehnbare Linie
  
• Dokument einrücken
  
• Dokumente in Webseiten einbetten
  
• Eigene Aufzählungspunkte
  
• Euro-Zeichen
  
• Farbige Scrollbars im Internet Explorer
  
• Favicons einrichten
  
• Fixe Tabellen
  
• Formular-Maildienste
  
• Formulare gezielt absenden
  
• Grafiken auf Webseiten platzieren
  
• Grafiken einbetten
  
• Grafiken ohne Hintergrund
  
• Größe von Frames
  
• Hello Engines!: Anmeldefilter setzen
  
• Höhe einer Tabelle festlegen
  
• Hyperlinks auf bestimmte Stellen
  
• Im Text springen
  
• Kein Seitenrand
  
• Keine Rollbalken
  
• Klingende Seiten
  
• Laufschrift mit Bildern
  
• Laufschriften mit Hyperlink einbauen
  
• Linie zeichnen
  
• Links neu laden
  
• mailto-Befehle verfeinern
  
• Mehrspaltig formatieren
  
• Meta-Tags einfügen
  
• Mit Schwarzweiß anfangen
  
• Ohne <basefont>
  
• Saubere Auswahlmenüs
  
• Schädliche Leerzeichen
  
• Schnelles Surfen im Internet
  
• Seite für Seite
  
• Seitenübergänge mit Pfiff
  
• Silbentrennung mit &shy;
  
• Spaß mit Formularen
  
• Statisches Zielfenster
  
• Suchmaschinen- Ausschluss
  
• Tool-Tipp überall
  
• Umlaute definieren
  
• Universelle Tool-Tipps
  
• Unsichtbare Frames
  
• Vorgefertigte E-Mails per Mausklick
  
• Werkzeuge
  
• Zeilenumbruch verhindern
  
• Sonderzeichen maskieren
  
• Image Maps zweckentfremdet!
  
• Grafik-SmartTags im Internet Explorer 6 deaktivieren
  
• Längst vergessene Frame-Attribute
  
• Schöne Aufzählungszeichen
  
• Gut aussehen im Text-Modus
  
• Hilfreiche Hinweistexte
  
• Umleitung per Frameset
  
• Bookmark-Link
  
• Cache blockieren
  
• Mail-Betreff vorgeben
  
• Schnelle Veröffentlichung über TXT
  
• Scroll-Leisten in Tabellen
  
• Schriftgröße beeinflusst Reihenfolge
  
• Rollen oder herunterklappen?
  
• Bilder anordnen ohne Tabelle
  
• Spam-Bots ausgetrickst
  
• Ein Klick für zwei Frames
  
• Bedingte Kommentare
  
• Jetzt bekommen Sie was auf die Ohren
  
• Farbige Trennlinien
  
• Regeln für die Keyword-Auswahl
  
• Bild vorausladen
  
• Seitenübergänge mit Pfiff
  
• Kopierschutz mit Blind-Gif
  
• Bildunterschrift sauber platzieren
  
• Formulare gestalten mit Bereichen
  
• AutoVervollständigen ausschalten
  
• Textänderungen markieren
  
• Schaltflächen mit <button>-Tag
  
• Freigeben oder fixieren
  
• Speicherschonende Hintergrundbilder
  
• Flexible Seiten mit relativen Größen
  
• Mehr Struktur mit Themenpfaden
  
• Scrollbalken auf der linken Seite
  
• Verdeckte Formulareingabe
  
• Vertikale Trennlinien
  
• HTML 4.0 am Ende
  
• Auf dem Prüfstein
  
• Anti-Spam mit ASCII
  
• Browser Offset ausschalten
  
• Hyperlink-Ziel für eine Site
  
• E-Mail-Hyperlinks mit Pepp
  
• Hyperlink mit Kommentar
  
• Gruppierte Auswahllisten
  
• Beschriftete Formularrahmen
  
• Tunneleffekt und Seitenaktualisierung
  
• Inline-Frames ­ externe Inhalte
  
• Pfiffiger Editor
  
• Diashow abspielen
  
• Zeilenumbrüche beachten
  
• Wandernder Tabelleninhalt
  
• RSS-Newsfeed anzeigen
  
• Tooltips für Verweise
  
• Animierter Bilderrahmen
  
• Logo als Lesezeichen
  
• Mehrzeilige Buttons
  
• Whitespace-Problem
  
• Umbruch steuern
  
• Ladeinformationen bei Bildern
  
• Eingabefelder beschriften
  
• Validator auf deutsch
  

HTML

• Abgezählte Besucher

  Abgezählte Besucher
  Niemand im Netz ist allein unterwegs, wie Besuchzähler beweisen.
  Wollen Sie vielleicht einen Zähler auf Ihrer Seite verankern, der dem Besucher mitteilt, wie viele schon vor ihm da waren? Nichts leichter als das. Es gibt im Internet einige Provider, die Privatanwendern solche Zähler gratis zur Verfügung stellen. Den bekanntesten finden Sie unter
  www.digits.com
  Derzeit ist er wegen Überlastung geschlossen. Empfehlenswert ist ein russischer Zähler, erreichbar unter
  counter.dux.ru
  Dieser Anbieter erfreut Sie mit Hunderten von Anzeigearten. Sie müssen den Zähler noch nicht einmal beantragen, weil die Angabe Ihrer eigenen URL genügt. Unter dieser URL legen Sie den Zähler an. Falls Sie einen einfachen String wie mike angeben, bekommen Sie unter Garantie Anschluß an einen existierenden Zähler. counter.htm (Listing in Databox 9/97) bettet diesen Zähler in Ihre Seite ein.
  
  

• Absatzanfang hervorheben

  Absatzanfang hervorheben
  Wie geschickte Layouter Heftseiten bereichern, machen Sie mit HTML-Befehlen nach.
  Wenn Sie den ersten Buchstaben eines Absatzes hervorheben wollen, setzen Sie den FONT-Tag ein:
  <FONT SIZE=7>D</FONT>ie Erde war w&uuml;st und leer.
  Wenn Sie eine künstlerische Ader haben, entwerfen Sie doch einen eindrucksvollen Buchstaben, und binden Sie ihn in Ihr Dokument ein. Das Grafikprogramm soll Ihren Buchstaben im gif-Format mit transparentem Hintergrund speichern, wie es Paint Shop Pro vermag. Damit Text passend die Grafik umfließt, binden Sie sie mit dem entsprechenden Alignment ein:
  <IMG SRC="d.gif" ALIGN=Left>ie Erde war w&uuml;st und leer.
  
  

• Absätze einrücken

  Absätze einrücken
  Eingerückte Absätze lockern den Lesefluß auch auf HTML-Seiten auf.
  Einen Absatz rücken Sie mit einem Sonderzeichen ein: &nbsp;, dem "Non-Breaking Space", in HTML schlicht ein Leerzeichen. HTML ignoriert mehrere Leerzeichen hintereinander, weil es sich immer nur auf die Ausgabe eines einzigen Leerzeichens beschränkt. Dies umgehen Sie mit &nbsp;, womit Sie zum Beispiel Ihren Absatz um vier Leerzeichen einrücken:
  &nbsp;&nbsp;&nbsp;&nbsp;Absatz einger&uuml;ckt.
  
  

• Accesskey

  Accesskey
  Weisen Sie Formularelementen oder Links einen Hotkey für den schnellen Aufruf zu.
  Tastenkombinationen (Hotkeys) rufen eine Funktion oft schneller auf als die entsprechenden Mausklicks. Das Attribut accesskey weist Elementen einer Webseite Hotkeys zu. Drückt der Surfer den Hotkey, erhält das entsprechende Element der Webseite den Fokus. Was dann passiert hängt vom einzelnen Element ab. Wenn Sie beispielsweise einem Link (<a>) einen Hotkey zuweisen, folgt der Browser beim Drücken des Hotkeys dem Link und ruft die Zielseite auf. Bei einem Radioknopf in einem Formular ändert der Browser den Zustand des Radioknopfs (gedrückt/nicht gedrückt).
  <input type"text" name="vorname" accesskey="V">
  Das Beispiel zeigt einen Ausschnitt aus einem Formular mit einem Eingabefeld. Das Eingabefeld hat einen Hotkey. Mit den Tastenkombinationen [Alt-V] erhält das Eingabefeld den Fokus. Ohne die Maus zu benutzen, gibt ein Surfer so direkt über die Tastatur Text in das passende Feld ein. Groß-/Kleinschreibung spielt beim Hotkey keine Rolle, im Beispiel könnte accesskey="v" stehen. Der Hotkey funktioniert immer in Verbindung mit einer Sondertaste. Bei Windows ist das [Alt], beim Macintosh [Cmd]. Das macht die Auszeichnung der Hotkeys schwierig. In einer Webseite kann es mehrere Elemente mit gleichem Hotkey geben. Der Browser springt dann bei erneuter Eingabe des Hotkeys zum nächsten entsprechenden Element. Zur besseren Übersicht sollten Sie aber darauf achten, ein Zeichen nur einmal pro Webseite zu vergeben. Ist ein Hotkey bereits für eine Funktion des Browsers vergeben ([Alt-D] öffnet beim Internet Explorer das Datei-Menü), so überschreibt die Webseite die Standardbelegung des Browsers. HTML 4.0 und Netscape 6 erlauben accesskey bei den Tags a, area, button, input, label, legend, textarea. Der Internet Explorer unterstützt dagegen das Attribut bei nahezu allen HTML-Tags.
  
  

• Anführungszeichen unten

  Anführungszeichen unten
  Im deutschen Sprach- und Schriftgebrauch sind unten stehende Anführungszeichen Standard. Möchten Sie diese auch auf Ihrer Homepage verwirklichen, behelfen Sie sich eines kleinen Tricks.
  Während heutzutage alle Textverarbeitungsprogramme mit unten stehenden Anführungszeichen umgehen, unterstützt HTML diese leider nicht auf direktem Wege. Behelfen Sie sich, indem Sie jedes Anführungszeichen am Beginn eines Zitats im Quellcode mit dem sub-Attribut umgeben. Es setzt die eingeschlossenen Zeichen tiefer:
  _"eigentlicher Text"
  In Zukunft werden auch auf Ihrer Webseite die Gänsefüßchen die richtige Position finden.
  
  

• Automatische Weiterleitung mit Meta-Tag

  Automatische Weiterleitung mit Meta-Tag
  Sie haben Ihre Website auf einen anderen Server verlegt und möchten, dass Besucher auf diesen weitergeleitet werden, auch wenn in Ihrem Browser JavaScript deaktiviert ist.
  Mit einen Meta-Tag sorgen Sie dafür, dass Besucher auf Ihre neue Website weitergeleitet werden, auch wenn JavaScript nicht funktioniert.
  <meta http-equiv="refresh" content="5; URL=">http://www.pc-magazin.de/">
  Der Zahlenwert im Attribut content gibt die Zeitverzögerung in Sekunden an. Mit dem Wert Null legen Sie also eine sofortige Weiterleitung fest. Da dieser Meta-Tag nicht von allen Browsern unterstützt wird, sollten Sie sicherheitshalber einen Link setzen, über den der Besucher Ihre neue Seite erreichen kann.
  
  

• Bedingte Kommentare

  Bedingte Kommentare
  Der Internet Explorer 5.x kann HTML-Tags abhängig von bestimmten Bedingungen interpretieren oder übergehen.
  Wenn Sie Webseiten auf bestimmte Browser abstimmen wollen, müssen Sie den Typ des Browsers mit JavaScript ermitteln, verschiedene Webseiten laden oder im Script Kommandos überspringen. Mit dem Internet Explorer ab Version 5.0 geht es anders. Der Browser verarbeitet bedingte Kommentare (bekannt aus dem C- oder Pascal-Compiler). Dabei definieren Sie einen Teil des HTMLCodes als Kommentar. Internet Explorer 5 erkennt an Hand eines Schlüsselworts am Anfang, dass es diese HTMLTags verarbeiten soll:
  <!--[if IE ]>
  Dieser Text erscheint nur im
  IE 5.
  <![endif] //-->
  Für jeden anderen Web-Browser sieht das wie ein Kommentar aus, den er überspringt. Nur der Internet Explorer 5.x tut so, als wären die Kommentarzeichen gar nicht vorhanden. Das funktioniert auch umgekehrt: Der Internet Explorer soll HTML-Tags übergehen, die andere Browser verarbeiten.
  <![if ! IE ]>
  <img src=untergang.jpg>
  <![endif]>
  In diesem Fall würden "andere" Browser ein Bild anzeigen, der Internet Explorer aber nichts. Das können Sie etwa dazu verwenden, um den Filtereffekt aus Tipp 24 auf der nächsten Seite nur im Internet Explorer anzuzeigen und in anderen Browsern direkt das Endbild. Dieses Verfahren funktioniert auch ohne JavaScript, das viele Surfer aus Sicherheitsgründen (oder wegen lästiger Pop-ups) ausgeschaltet haben. Zudem können Sie damit unter Umständen das Laden von unnötigen Bildern komplett umgehen und so den Seitenaufbau beschleunigen.
  
  

• Bewegte Bilder

  Bewegte Bilder
  Mit einem Shareware-Programm animieren Sie gif-Grafiken.
  Wenn Sie eine Seite mit einem kleinen Briefkasten sehen, der ständig auf- und zuklappt, handelt es sich um eine animierte gif-Grafik ("animated GIF"). Die gif-Spezifikation erlaubt eine beliebige Anzahl von Grafiken in einer Datei, die Steuerbefehle anzeigen. Diese Befehle definieren, wann und wo die nächste Grafik aufklappt. Das Internet wimmelt von bunten, bewegten Bildern, von denen Sie viele frei verwenden können. Einen guten Ausgangspunkt dafür bietet
  www.clipart.com
  Diese Site enthält neben vielen Cliparts lange Listen mit weiteren Grafikservern. Wollen Sie selbst eine gif-Grafik animieren, speichern Sie die Einzelbilder in diesem Format und verbinden sie dann mit einem Shareware-Programm wie dem GIF Construction Set von Alchemy Mindworks:
  www.mindworkshop.com/alchemy/gifcon.html
  
  

• Bilder ausrichten

  Bilder ausrichten
  Sie möchten den Text, der ein Bild umfließt, kontrollieren und nach Ihren Erfordernissen anpassen.
  Grafiken werden in HTML mit dem IMG-Tag eingebunden. Um den Textfluss um eine Grafik herum zu beeinflussen, können Sie die Attribute HSPACE, VSPACE und ALIGN verwenden. Mit HSPACE und VSPACE bestimmen Sie den horizontalen bzw. vertikalen Abstand des Textes zur Grafik in Pixelangaben. Es entsteht eine Art unsichtbarer Rahmen. Mit ALIGN können Sie die Grafik in der Positionierung bestimmen. Die Eigenschaft right bewirkt beispielsweise, dass umfließender Text an der oberen Kante der Grafik und zwar links daneben beginnt, left erzielt den umgekehrten Effekt. Sie können mit ALIGN: unter anderem die folgenden Eigenschaften setzen:
  LEFT: Textausrichtung am oberen Bildrand, Bild am linken Fensterrand,
  RIGHT: Textausrichtung am oberen Bildrand, Bild am rechten Fensterrand,
  TOP: Textausrichtung am oberen Bildrand, Bild am linken Fensterrand,
  MIDDLE: Textausrichtung in der Mitte, Bild am linken Fensterrand,
  BOTTOM: Textausrichtung am unteren Bildrand, Bild am linken Fensterrand,
  TEXTTOP: Textausrichtung am größten Zeichen am oberen Bildrand, Bild am linken Fensterrand,
  Am besten experimentieren Sie ein wenig mit diesen Eigenschaften, um die Wirkungsweise zu sehen. Damit nachfolgende Absätze oder Text nicht von diesem Effekt betroffen sind, können Sie das BR-Tag mit dem Attribut CLEAR verwenden:
  <BR CLEAR="all">
  Diese Angabe bewirkt, dass der Textfluss um die Grafik herum unterbrochen wird und die weiteren Inhalte nach üblichem Schema formatiert werden. Wenn Sie geschickt mit dieser Möglichkeit hantieren, erübrigt sich in manchen Fällen das Arbeiten mit Tabellen.
  
  

• Blocksatz

  Blocksatz
  Sie haben im Netz Seiten gesehen, in denen der Fließtext im Blocksatz formatiert war, finden im HTML-Editor jedoch keinen entsprechenden Befehl.
  HTML-Editoren, auch moderne, unterstützen Textformatierung nicht auf direktem Wege. Behelfen Sie sich, indem Sie das zuständige Attribut align eigenhändig bearbeiten. Homepage-Programme unterstützen menügesteuert nur die align-Schalter right, left und center. Sie können aber im Quellcode den Wert justify mit einem einfachen Texteditor wie Notepad setzen. Das sieht etwa so aus:
  <p align="justify">
  TEXTTEXTTEXTTEXTTEXTTEXTTEXT
  TEXTTEXTTEXTTEXTTEXTTEXTTEXT
  TEXTTEXTTEXTTEXTTEXTTEXTTEXT
  </p>
  Dieser Effekt lässt sich auch HTML-4-konform mit Cascading Style Sheets realisieren:
  p.blocksatz {
  text-align : justify;
  }
  Wenn Sie keine externe Stil-Datei verwenden, fügen Sie obige Definition in den Tag
  <style type="text/css" ></style>
  in den Kopfbereich der HTML-Seite ein. Den Absatz, der Blocksatz enthalten soll, weisen Sie mit
  <p class="blocksatz"></p>
  aus.
  
  

• Blocksatz

  Blocksatz
  Ein Attribut im <p>-Tag sorgt für beidseitig sauber ausgerichteten Text.
  In vielen Büchern und Zeitschriften ist Blocksatz Standard. Dabei bilden die Ränder in einem Textabsatz links und rechts eine saubere Linie. In HTML definieren Sie einen Absatz mit dem Tag-Paar <p> und </p>. Standardmäßig erscheint so ein Absatz linksbündig: Auf der linken Seite bilden die Buchstaben eine saubere Linie. Rechts hängt die exakte Länge von der Länge des letzten Worts ab. Um einen Blocksatz zu erreichen, fügen Sie ein Attribut ein:
  <p align=justify>
  Damit erreichen Sie einen sauberen rechten Rand. Auch mit dem Attribut align=right lässt sich ein rechtsbündiger Satz erzielen manchmal ein interessanter Effekt, etwa bei Bildbeschriftungen. Als moderne Alternative zum HTML-Attribut (das Teil der HTML-4.0-Spezifikation ist) dürfen Sie auch Style Sheets verwenden. In diesem Fall benutzen Sie das div-Tag:
  <div style="text-align:justify">
  Lorem ipsum dolor sit amet in veritas
  humus bla bla ...
  </div>
  
  

• Bookmark mit Icon

  Bookmark mit Icon
  Der Internet Explorer (ab Version 5) weist allen gespeicherten Favoriten automatisch das Standard-Icon zu. Wer hier ein wenig Abwechslung ins Spiel bringen will, kann seine Webseite um ein eigenes Mini-Bildchen erweitern.
  Mit einem eigenen Icon versehene Bookmarks sind weitaus auffälliger als deren standardmäßige Pendants. Viele kommerzielle Seiten, wie die von Providern oder Suchmaschinen nutzen diese Form der Corporate Identity. Aber auch private Seiten werden durch dieses Detail attraktiver. Wer diesen Service den Besuchern seiner Webseite anbieten möchte, muss zunächst das gewünschte Icon (16x16 Pixel) bereitstellen. Hier greifen Sie entweder auf die zahlreichen kostenlos zur Verfügung gestellten Bildersammlungen zurück oder gestalten die Grafik mit einem Shareware-Tool wie Microangelo (www.im pactsoft.com) in Eigenregie. Sichern Sie die Datei unter der Bezeichnung favicon.ico und legen Sie das Icon dann im Root-Verzeichnis des Webservers ab. Weitere Anweisungen sind nicht nötig, da der Internet Explorer automatisch nach dieser Datei sucht und sie anzeigt. Falls Sie keinen direkten Zugriff auf den Server haben oder aber Ihre Seite von einem Provider wie Geocities gehostet wird, müssen Sie den HEAD-Bereich derjenigen Seiten, bei denen das Icon angezeigt werden soll, um folgende Zeile erweitern:
  <LINK rel="SHORTCUT ICON" href="http://www.meinserver.de E /favicon.ico">
  Dabei spielt es keine Rolle, auf welchem Server das Icon abgelegt ist. Darüber hinaus ist es in diesem Fall erlaubt, den vorgegebenen Dateinamen favicon.ico durch eine beliebige Bezeichnung zu ersetzen. Sobald ein Besucher die angepasste Seite seinen Favoriten hinzufügt, wird diese von Ihrem Icon visuell unterstützt und er findet es in der Bookmarkliste.
  
  

• Browser-Fenster öffnen

  Browser-Fenster öffnen
  Mit einem einfachen Hyperlink öffnen Sie eine HTML-Datei in einem neuen Browser-Fenster.
  Damit der Browser beim Klick auf einen Link die Webseite in einem neuen Fenster anzeigt, ist kein JavaScript nötig. Die Mittel von HTML genügen. Fügen Sie in das Link-Tag einfach das Attribut target="" ein:
  <a href="http://www.pcmagazin.de"
  target="egal">
  Schau dir das an!
  </a>
  Wie der HTML-Code schon andeutet, ist es egal, wie Sie das Zielfenster nennen. Wollen Sie mehrere Links anbieten, die eine Webseite in einem neuen Fenster anzeigen, beachten Sie Folgendes: Verwenden Sie den gleichen Namen als Target, erscheinen die Webseiten auch im selben Browser-Fenster. Nutzen sie unterschiedliche Namen, öffnet sich jedes Mal ein neues Fenster.
  
  

• Bunter Hintergrund

  Bunter Hintergrund
  Farbliche Vielfalt hält immer häufiger auf HTML-Seiten Einzug.
  Simples Grau auf einer HTML-Seite findet man inzwischen selten. Mit einem einfachen Zusatz zum BODY-Tag ändern Sie die Hintergrundfarbe Ihrer Seite zum Beispiel in flottes Rot:
  <BODY BGCOLOR="red">
  Netscape Navigator wie auch Internet Explorer gestatten es Ihnen, Farben mit Namen anzugeben. Die komplette Liste aller Farben finden Sie unter:
  www.developer.netscape.com/library/documentation/htmlguid/colortab.htm
  Wollen Sie Ihre Seite mit Rauhfaser hinterlegen, binden Sie diese Information im BODY-Tag ein:
  <BODY BACKGROUND="rauhfasr.gif">
  Die Grafik wird automatisch gekachelt, wenn sie zu klein für den Hintergrund ist.
  Der Internet Explorer kann eine Grafik auch als "Wasserzeichen" darstellen, wenn Sie im BODY-Tag das Attribut BGPROPERTIES=FIXED angeben. So sehen Web- wie Buchseiten aus, linksseitig wirken sie gar wie gebunden oder mit bunten Streifen versehen. Den Hintergrund liefert ebenfalls eine Grafik, die mit 1000 Pixeln und mehr sehr breit ausfällt. Die Höhe hingegen bescheidet sich mit wenigen Pixeln, die für den bunten Rand reichen.
  Denken Sie bei der Wahl Ihres bunten Hintergrunds daran, daß sich noch viele Surfer mit 16 Bildschirmfarben begnügen müssen. Daher sollten Sie Ihre Seiten auch mit dem Standard-VGA-Treiber unter Windows testen. Lesen Sie auch damit Ihre Seiten, bevor Sie sie ins Netz stellen.
  
  

• Button als Link

  Button als Link
  Statt eines Wortes oder Bildes benutzen Sie einen Formular-Button als Link.
  Ganz ohne JavaScript realisieren Sie mit einem HTML-Formular einen Button, der beim Anklicken zu einer Webseite verzweigt. Die neue Seite kann auf dem eigene Web-Server liegen oder auf einem fremden. Der Button funktioniert auch, wenn ein Besucher JavaScript in seinem Browser deaktiviert hat. Fügen Sie ein Formular in Ihre Webseite ein:
  <form action="seite.htm">
  <input type=submit
  value="Hier klicken">
  </form>
  Im Attribut action="" tragen Sie den Namen der Webseite ein, zu der gesprungen werden soll. Das Attribut value="" enthält die Beschriftung für den Button. Im Text für die Beschriftung verwenden Sie für Umlaute die HTMLCodierungen, also &auml; für ein ä etc. Die Schaltfläche definieren Sie mit dem Tag <input>. Definieren Sie den Button mit type=submit. Dann geht der Browser davon aus, dass er beim Anklicken eine Aktion ausführen soll, was Sie mit dem Attribut action="" im einleitenden <form>-Tag festlegen.
  
  

• Dehnbare Linie

  Dehnbare Linie
  Eine Bilddatei mit einem Pixel Größe verwenden Sie als dehnbare Linie.
  Mit einer Grafik von 1 x 1 Pixel Größe lässt sich eine Menge anstellen: Wie wäre es beispielsweise mit einer Trennlinie an Stelle des <hr>-Tags, die sich in Breite und Höhe beliebig verformen lässt? Dazu erzeugen Sie zunächst mit einem Bildbearbeitungsprogramm wie Paint Shop Pro ein 1 x 1-Pixel-Bild. Als Farbe kommt Rot zum Einsatz. Dieses Pixelbild bauen Sie mit dem <img>-Tag in Ihre Webseiten ein. Je nach Erfordernis steuern Sie die Länge und Dicke der Linie:
  <img width=600 height=2>
  Es entsteht eine rote Linie von 600 Pixel Breite und 2 Pixel Höhe. So erzeugen Sie farbige Trennlinien und sparen sich die Übertragung verschiedener Grafiken.
  
  

• Dokument einrücken

  Dokument einrücken
  Beleben Sie am Bildschirm Gutenbergs bewährte Tradition.
  Wollen Sie einen Hintergrund verwenden, der einem aufgeschlagenen Buch gleicht, so sollte sich Ihr Text nicht ganz links verstecken, wo die virtuelle Buchseite Schatten wirft. Hier hilft Ihnen eine versteckte Tabelle mit einer Reihe und zwei Spalten weiter. Damit der Browser die Tabelle nicht anzeigt, bestimmen Sie die Rahmenbreite mit dem Wert 0:
  <TABLE BORDER=0>
  <TR>
  <TD WIDTH=100>
  <TD>
  Hier das Dokument:
  </TABLE>
  Genaue Beobachter mögen die End-Tags </TD> und </TR> vermissen. Sie sind optional. Bei einfachen Tabellen wie dieser lassen Sie sie wegen der besseren Lesbarkeit weg. Sollten Sie allerdings Tabellen verschachteln müssen, ist die Angabe der End-Tags unumgänglich.
  Leider betrachten die meisten Browser das WIDTH-Attribut wie manche Autofahrer die Verkehrsregeln: als unverbindliche Empfehlung. Wenn Sie Ihr Dokument pixelgenau einrücken wollen, hilft Ihnen der Trick mit der unsichtbaren Grafik weiter. Bauen Sie eine gif-Grafik mit einer Größe von einem Pixel, das Sie als transparent definieren. Setzen Sie dann diese Grafik in die linke Tabellenspalte, und geben Sie die Breite in Pixeln an. Diese Breite wird vom Browser in jedem Fall als verbindlich betrachtet. buch.htm (Listing in Databox 9/97) verdeutlicht das Verfahren.
  <TABLE BORDER=0>
  <TR>
  <TD>
  <IMG SRC="winzig.gif" WIDTH=100 HEIGHT=1>
  <TD>
  Hier Ihr Dokument:
  </TABLE>
  Diese gif-Datei ist schnell übertragen. Sie verwenden sie überall dort, wo Sie einen genau definierten freien Raum im Dokument benötigen.
  
  

• Dokumente in Webseiten einbetten

  Dokumente in Webseiten einbetten
  Sie haben beim Surfen eine Webseite entdeckt, in die eine andere Seite wie ein Bild integriert war. Das möchten Sie für Ihre Homepage auch realisieren.
  Das Inline-Frame Tag <iframe> ermöglicht dem Webseiten-Gestalter eine Reihe Effekte. Sie können komplette Webseiten in eine andere Seiten einbetten, ähnliche einem Frame. Nur stellt der Browser die Seite als Fenster dar. Alle moderneren Browser unterstützten diesen Tag. Für den Netscape Navigator 4.x verwenden Sie anstatt dessen den Tag <ilayer>. Beide Tags zeigen Inhalte, die zwischen ihren Anfangsund Ende-Tags stehen, nur an, wenn der Browser den Tag selbst nicht interpretiert. Mit der folgenden Schachtelung können Sie eine Lösung für alle Browser verwirklichen. Für ganz einfache Browser ist eine Mitteilung mit einem Link vorgesehen, so dass auch mit ihnen die Inline-Seite erreichbar ist:
  <iframe src="seite2.html"
  width="300" height="200"
  align="left" hspace="30"
  vspace="50">
  <ilayer src="seite2.html"
  width=300 height=200>Hier sollte
  eigentlich die Datei
  <a href="seite2.html">
  Seite2.html </a>
  angezeigt werden. Aber Ihr Browser
  versteht weder IFrames oder
  ILayer!</ilayer>
  </iframe>
  
  

• Eigene Aufzählungspunkte

  Eigene Aufzählungspunkte
  Auf folgende Art und Weise verwenden Sie für Ihre Aufzählungspunkte statt der Standardsymbole Ihr eigenes Symbol.
  Aufzählungspunkte werden üblicherweise mit Listen-Elementen dargestellt. Dabei können Sie geordnete oder ungeordnete Listen implementieren.
  <OL>
  <LI> geordnete Liste, Punkt
  1</LI>
  </OL>
  oder
  <UL>
  <LI> ungeordnete Liste, Punkt
  1</LI>
  </UL>
  Geordnete Listen verwenden als Default-Einstellung für die Aufzählungspunkte eine numerische Formatierung. Über das TYPE-Attribut können Sie aus weiteren Möglichkeiten wählen:
  <OL TYPE="i"> römisch klein geschrieben
  <OL TYPE="a"> alphanumerisch
  klein geschrieben
  <OL TYPE="A"> alphanumerisch groß
  geschrieben
  <OL TYPE="i"> römisch klein geschrieben
  <OL TYPE="I"> römisch groß geschrieben
  Ungeordnete Listen verwenden als Aufzählungspunkte einfache Symbole (in der Standardeinstellung: kleine Kugeln). Auch bei dieser Listenform können Sie weitere Formatierungen wählen:
  <UL TYPE="disc"> kleine Kugel
  (Voreinstellung)
  <UL TYPE="square"> kleines
  Quadrat
  <UL TYPE="circle"> kleiner Kreis
  Sie können die Attribute auch direkt in den Aufzählungspunkten (<LI> ... </LI>) unterbringen und auf diese Weise unterschiedliche Formatierungen in einer Liste bewirken. Falls Ihnen diese Vorgaben nicht gefallen, können Sie mit einer Style-Sheet-Zuweisung eigene Symbole bestimmen. Die folgenden Beispiele zeigen Ihnen, wie Sie einer Liste einen Style zuweisen.
  <OL STYLE="list-style:url
  (bullet.gif);">
  <UL STYLE="list-style:url
  (bullet.gif);">
  <LI STYLE="list-style:url
  (bullet.gif);">
  Als Wert für url( pfad/dateiname) geben Sie den Pfad und den Namen zur gewünschten Datei an. Wenn Sie dem Style eine einleitende Listendefinition (<OL> oder <UL>) zuweisen, gilt die Grafik für alle Listenelemente. Wenn Sie einen Style einem Listenelement direkt zuweisen (<LI>), können Sie unterschiedliche Grafiken für die Aufzählungspunkte bestimmen. Leider funktioniert diese Angabe nicht mit Netscape 4. Sie können aber mit einem kleinen Trick eine ähnliche Formatierung erreichen. Die Lösung dazu bietet Ihnen eine Definitionliste (DL):
  <DL>
  <DT><DD><IMG SRC="bullet.gif"
  WIDTH="5" HEIGHT="5" VSPACE="3"
  BORDER="0"> Aufzählungspunkt 1
  </DL>
  Stellen Sie dem Punkt einfach eine Grafik voran, womit Sie Aufzählungspunkte simulieren können. Eine weitere Variante ist der Einsatz von Tabellen:
  <TABLE>
  <TR>
  <TD VALIGN="top"><IMG SRC="bullet.
  gif" WIDTH="5" HEIGHT="5"
  VSPACE="7" BORDER="0"></TD>
  <TD>Aufzählungspunkt 1 </TD>
  </TR>
  </TABLE>
  Um eine Liste zu simulieren, wird bei diesem Beispiel eine Tabelle mit zwei Zellen pro Zeile eingerichtet. In der linken Zelle wird der Aufzählungspunkt als Grafik untergebracht und in der rechten Zelle der dazugehörige Text.
  

• Euro-Zeichen

  Euro-Zeichen
  Sie bieten auf Ihren Seiten Inhalte mit Preisangaben an und müssen diese als Euro darstellen.
  Web-Anbieter müssen künftig mit dem Euro-Zeichen ebenso arbeiten wie andere Anbieter. Sie können das Kürzel EUR einsetzen oder das entsprechende grafische Symbol. Das Unicode-Konsortium hat das Euro-Symbol ins Unicode-System aufgenommen. Der Wert lautet U+20AC und entspricht dem hexadezimalen Wert 20AC (dezimal: 8364). Web-Browser, die dem HTML-4.0-Standard entsprechen, können Werte q aus dem Unicode-System mit folgender Syntax anzeigen: &#xHEXWERT; oder &#DEZIMALWERT; Für das Euro-Zeichen notieren Sie in Ihren HTML-Dokumenten die folgende Schreibweise:
  &#x20AC;
  oder
  &#8364;
  Mittlerweile können Sie für das Euro-Zeichen ein benanntes Zeichen verwenden: &euro;
  Zur Darstellung dieses Zeichens muss
  der Anwender über eine Schriftart verfügen, die dieses Zeichen beinhaltet.
  
  

• Farbige Scrollbars im Internet Explorer

  Farbige Scrollbars im Internet Explorer
  Wer viel im Web unterwegs ist, stößt immer häufiger auf grafisch anspruchsvolle Webseiten, bei denen sogar die seitlichen Scrollbars farbig dargestellt werden. Was nach viel Arbeit aussieht, lässt sich binnen weniger Minuten in die eigene Seite einbauen.
  Ab Version 5.5 ist der Internet Explorer in der Lage, bunte Scrollbars darzustellen. Noch besser: Ein simples Style-Sheet reicht aus, um auch die Bildlaufleisten an die Optik des Seiteninhalts anzupassen. Folgende Befehle sind für das Aussehen zuständig:
  scrollbar-3d-light-color /*
  innere Begrenzungslinie */
  scrollbar-arrow-color /*
  Navigationspfeile */
  scrollbar-base-color /* Erste
  Grundfarbe der Bildlaufleisten */
  scrollbar-dark-shadow-color /*
  äußere Begrenzungslinie */
  scrollbar-face-color /* Zweite
  Grundfarbe der Bildlaufleiste */
  scrollbar-highlight-color /*
  Farbe des Untergrunds */
  scrollbar-shadow-color /*
  Schattenwurf */
  Falls Sie sich nicht in Eigenregie mit den diversen Parametern und Farben auseinandersetzen möchten, nehmen Sie das kostenlose MSDN-Angebot an und arbeiten mit dem Online-Codegenerator
  msdn.microsoft.com/workshop/sample s/author/dhtml/refs/scrollbarColor.htm. Hier wählen Sie die gewünschten Farben aus, klicken in der rechten Spalte auf die Schaltfläche Copy Code to Clipboard und fügen den Quelltext in Ihren HTML-Editor ein.
  
  

• Favicons einrichten

  Favicons einrichten
  Beim Surfen haben Sie eine Seite in die Favoriten aufgenommen, die im Menü ein individuelles Icon hat. Das möchten Sie auch für Ihre Homepage realisieren.
  Mit den so genannten Favicons bietet der Internet Explorer seit der Version 5 dem Webmaster die Möglichkeit, eigene Icons für seine Webseiten zu entwerfen, die in der Favoritenliste statt des Standard- Icons angezeigt werden. Um Ihre Seite auf diese Weise aus den Favoriten hervorzuheben, gehen Sie folgendermaßen vor: Gestalten Sie zunächst mit einem Icon-Editor wie MicroAngelo oder IconEdit Ihr Logo in den Größen 16 x 16 und eventuell 32 x 32 Pixel, und speichern Sie die beiden Bilder als favicon.ico. Im Browser wird das kleinere Icon benutzt, bei einer Verknüpfung etwa im Start-Menü dagegen die Größe 32 x 32 bzw. wird auf diese Größe skaliert. Sie brauchen diese Datei nur noch ins Rootverzeichnis Ihrer Domain oder Subdomain zu legen. Alternativ können Sie einen anderen Dateinamen oder Speicherort wählen, müssen dann aber folgende Angabe in den Head-Bereich Ihrer Seite aufnehmen, wobei die href-Angabe die URL Ihres Icons ist:
  <head>
  <link rel="shortcut icon"
  href="http://www.mydomain.com/ myicon.ico">
  <title>Seitentitel</title>
  </head>
  Weitere Informationen finden Sie bei Microsoft unter: msdn.microsoft.com/ workshop/author/dhtml/howto/Short cutIcon.asp
  
  

• Fixe Tabellen

  Fixe Tabellen
  Beschleunigen Sie den Aufbau umfangreicher Tabellen mit Bildern im Browser.
  Die Darstellung einer umfangreichen Tabelle, in die ein paar Bilder eingebaut sind, überfordert den Browser: Solange nicht sämtliche Bilder und sonstige Elemente geladen sind, steht deren Größe nicht fest. Deshalb zeigt der Browser erst einmal gar nichts an oder verändert die Zellengröße nachträglich und "rutscht" damit Elemente auf dem Bildschirm hin und her. Sie können das abschwächen, wenn Sie bei Bildern Größenangaben ins Bild-Tag einbauen:
  <img src="sonne.jpg"
  width="300" height="225">
  Viele Web-Editoren wie HomeSite oder Dreamweaver fügen diese Angaben automatisch ein. Eine Alternative bietet der Internet Explorer ab Version 5 an. Die CSS2-Angabe
  <table style="table-layout:fixed">
  bewirkt, dass der Browser die Angaben zur Spaltenbreite und Zeilenhöhe in der obersten Zeile für die ganze Tabelle übernimmt. So kann der Browser die Tabelle sofort aufbauen, ohne die Übertragung des Inhalts abzuwarten. Ältere Browser überlesen die CSS-Angabe.
  
  

• Formular-Maildienste

  Formular-Maildienste
  Für die Auswertung der Formulardaten auf Ihrer Homepage stehen Ihnen keine CGI-Scripts zur Verfügung, Sie möchten aber das mailto vermeiden.
  Wer keinen unbeschränkten Zugang zu einem Server hat und auf diesem die Eingabedaten aus Formularen verarbeiten kann, lässt sie sich als E-Mail zusenden, um sie auf dem lokalen Rechner auszuwerten. Das erledigen meist fertige CGIScripts, wie sie inzwischen auch Provider wie AOL oder 1&1 zur Verfügung stellen. Bietet Ihr Provider diesen Service nicht und erlaubt er auch keine eigenen CGIs, können Sie auf einen Formular- Maildienst zurückgreifen. Empfehlenswert und für private Seiten kostenlos ist Formmailer (www.formmailer.com). Nach der Anmeldung setzen Sie Formmailer als URL im action-Attribut ein und fügen ein verstecktes Feld in Ihr Formular ein, dessen genauen Quellcode Formmailer Ihnen mitteilt:
  <form action="http://send.formmailer.
  com/" method="post">
  ....
  <input type="Hidden" name="formmailer"
  value="12345">
  ....
  </form>
  
  

• Formulare gezielt absenden

  Formulare gezielt absenden
  Formulare können an beliebige Zielfenster versandt werden und die Rückgabeseite darin darstellen.
  Üblicherweise werden die Rückgabeseiten von Formularen im gleichen Fenster angezeigt, in dem sich das Formular beim Absenden befand. Mit dem optionalen Attribut TARGET im einleitenden Formularelement können Sie auch andere Zielfenster für die Rückgabeseite bestimmen. Nehmen wir an, Ihre Seiten sind in drei Frames unterteilt: einen linken Navigations-Frame und einen horizontal zweigeteilten Frame auf der rechten Seite. Ein Formular wird jetzt im oberen rechten Frame untergebracht, und die Antwort soll im unteren rechten Frame ausgegeben werden. Dies erreichen Sie mit der folgenden Anweisung im einleitenden
  Formular-Tag:
  <FORM ACTION=
  "/cgi-bin/
  test.cgi" TARGET=
  "name_des_
  zielframes">
  Dieses Beispiel könnte das Interface für eine Suchmaschine darstellen, bei der die Ergebnisse getrennt vom Eingabeformular ausgegeben werden sollen. Für das TARGETAttribut können Sie alle erlaubten Werte (zum Beispiel _blank für ein neues Browser-Fenster) sowie gültige Frame-Namen verwenden. Falls Sie einen unbekannten Namen angegeben haben, öffnet sich standardmäßig ein neues Browser-Fenster für die Ausgabeseite.
  
  

• Grafiken auf Webseiten platzieren

  Grafiken auf Webseiten platzieren
  Ihre erste Homepage entsteht. Sie soll Text und Bilder enthalten. So gehen Sie vor, um Bilder richtig in den Text zu integrieren.
  Browser behandeln Bilder wie Zeichen. Ebenso wie eine Textverarbeitung bei einem besonders großen Zeichen den Zeilenabstand erhöht, schaffen auch Browser Raum für das Bild, statt den Text um das Bild fließen zu lassen. Abhilfe schafft das Attribut align. Es sorgt bei den Werten left und right dafür, dass Text um das Bild herumfließt. Dabei sollten Sie zwei weitere Attribute, vspace und hspace, einsetzen. Sie bewirken, dass ein ausreichender Abstand zwischen Bild und Text eingehalten wird:
  <img src="bild.gif" width="300"
  height="200"
  align="right" vspace="10px"
  hspace="10px">
  
  

• Grafiken einbetten

  Grafiken einbetten
  Wenn sich Text gleichsam um die Grafik schmiegt, haben Sie Ihr Bild mit einem Alignment versehen.
  Grafiken, kombiniert mit Text, sollten stets ein Alignment aufweisen. Anderenfalls steht die erste Textzeile neben der Grafik und der Resttext unter ihr. Verwenden Sie wahlweise eines der Attribute ALIGN=Left oder ALIGN= Right: So betten Sie Ihre Grafik links- oder rechtsbündig ein, damit Texte Bilder umfließen.
  Die Grafik positionieren Sie am besten mit WIDTH- und HEIGHT-Attributen. Der Browser lädt bereits den korrekt formatierten Text, weil er "weiß", wo eine Grafik steht. Wenn Sie Ihre Grafik zudem mit dem ALT-Attribut ausstatten, definieren Sie damit einen Text, den Sie anstelle der Grafik zuvor anzeigen lassen. Mit folgendem Tag binden Katzenfreunde ihren Vierbeiner kunstgerecht in Fließtext ein:
  <IMG SRC="katze.gif" WIDTH=200 HEIGHT=200 ALT="Meine kleine Katze">
  
  

• Grafiken ohne Hintergrund

  Grafiken ohne Hintergrund
  Eine durchscheinende Grafik läßt Sie den Hintergrund sehen.
  Die meisten Grafiken im Internet sind nicht schlicht quadratisch, sondern lassen den Hintergrund durchscheinen. Dies ist eine Besonderheit des Formats gif. Eine gif-Datei kann neben der Grafik noch Steuerbefehle enthalten, und einer davon definiert eine bestimmte Farbe als nicht vorhanden. Der Browser ignoriert nun alle Pixel der Grafik in dieser Farbe bei der Ausgabe. Mit diesen "transparent GIFs" arbeiten auch viele Shareware-Programme. Eines der bekanntesten ist Paint Shop Pro, Sie finden es unter der Adresse
  www.jasc.com/pspdl.html
  
  

• Größe von Frames

  Größe von Frames
  In einem Frameset müssen Sie bei der Größenangabe für Frames genau aufpassen, sonst erhalten Sie nicht das gewünschte Ergebnis.
  Mit einem Frameset teilen Sie das Browserfenster in mehrere unabhängige Bereiche auf. Die Definition sieht zum Beispiel so aus:
  <frameset cols="30%,400,*,2*">
  ... Definition der Frames
  </frameset>
  Das Attribut cols teilt das Browserfenster senkrecht in ein einzelne Frames. Als Attributwert geben Sie die Breite der einzelnen Frames durch Komma getrennt an. Dabei gibt es verschiedene Varianten:
  Ein Zahlenwert ohne Zusatz gibt die Breite/Höhe des Frames in Pixel an.
  Ein Prozentwert (mit nachgestelltem %) weist dem Frame den entsprechenden Anteil an der gesamten Fensterbreite zu. Es spielt keine Rolle, wie viel Platz für andere Frames reserviert ist.
  Anders als Prozentwerte beziehen sich relative Angaben mit dem Sternzeichen (*) auf den Platz, der abzüglich anderer Frames noch zur Verfügung steht. Ein Sternzeichen steht für den "restlichen Platz", der noch zur Verfügung steht. Geben Sie bei mehreren Frames einen Stern an, so teilen sich diese beiden Frames den Platz gleichmäßig auf (je die Hälfte). Die Aufteilung lässt sich mit einer vorangestellten Zahl noch beeinflussen: cols="1*, 3*, 1*" erzeugt beispielsweise drei Spalten. Zusammen gibt es fünf Einheiten zu verteilen (1+3+1 = 5). Der erste Frame erhält 1/5 (=20 Prozent), der zweite Frame 3/5 (=60 Prozent) und der Dritte wieder 1/5 (20 Prozent). Das Beispiel oben kombiniert alle drei Varianten und erzeugt damit vier Frames. Wenn Sie dieses Frameset in einem Browserfenster mit 1000 Pixel Breite darstellen ergeben sich folgende Frame-Ausmaße: Der erste Frame nimmt 30 Prozent des gesamten Fensters ein, also 300 Pixel. Der zweite Frame hat eine feste Breite von 400 Pixel. Das macht zusammen 700 Pixel, es bleiben also noch 300 Pixel übrig. Diese teilen sich die beiden restlichen Frames im Verhältnis 1:2 (*, 2*). Der dritte Frame ist 100 Pixel breit, der vierte Frame 200 Pixel. Wenn Sie das Browserfenster verkleinern verschwinden zunächst die Frames 3 und 4, denn der restliche freie Platz schrumpft auf 0. Verkleinern Sie das Browserfenster weiter wird der erste Frame immer kleiner (30 Prozent der Gesamtbreite). Der zweite Frame mit 400 Pixel bleibt dagegen erhalten. Erst wenn auch der erste Frame gar nicht mehr zu sehen ist und das Browserfens-ter immer schmäler wird verkleinert der Browser auch den zweiten Frame.
  
  

• Hello Engines!: Anmeldefilter setzen

  Hello Engines!: Anmeldefilter setzen
  Sie wollen Ihre Homepage bei Suchmaschinen anmelden, wissen aber nicht, wo und wie Sie anfangen sollen.
  Webpromoter-Programme melden Ihre Homepage automatisch bei Hunderten von Suchmaschinen weltweit auf einen Rutsch an. Doch nicht immer ist es erstrebenswert, überall rund um den Globus registriert zu sein: Werbemails, unerwünschte Newsletter etc. können dann zur Plage werden. In Hello Engines! setzen Sie einfach Suchdienst-Filter, um ein wahlloses Anmelden zu vermeiden. Dazu wählen Sie der Reihe nach Suchdienste Auto und Filter aktivieren. Im sich öffnenden Fenster finden Sie alle notwendigen Schalter und die zugehörigen Beschreibungen.
  
  

• Höhe einer Tabelle festlegen

  Höhe einer Tabelle festlegen
  Mit einer unsichtbaren Grafik erzwingen Sie die Höhe einer Tabelle in allen Browsern.
  Während Tabellen mit Breitenangaben, Attribut width, zurechtkommen, wird height, um die Höhe festzulegen, nicht allgemein unterstützt. Wenn Sie für Layoutzwecke eine Tabelle mit einer bestimmten Höhe benötigen, verwenden Sie einen einfachen Trick: Erstellen Sie eine GIF-Datei mit einem transparenten Hintergrund. Sie braucht nur eine Größe von einem Pixel zu haben. Diese fügen Sie in die Tabelle ein und skalieren sie mit den Größen- Attributen auf die gewünschte Höhe. Soll das Layout mehrere Tabellenzeilen enthalten, sorgen Sie mit rowspan dafür, dass die Zelle mit der Grafik über alle Zeilen ausgedehnt wird:
  <table><tr>
  <td rowspan="2"><img
  src="leer.gif" width="1"
  height="100"></td>
  <td>... Hier folgt der eigentliche</
  td>
  </tr>
  <tr><td> Inhalt der Tabelle ...
  </td></tr>
  </table>
  
  

• Hyperlinks auf bestimmte Stellen

  Hyperlinks auf bestimmte Stellen
  So verbessern Sie den Bedienkomfort für Besucher Ihrer Homepage.
  Sie präsentieren auf Ihrer Homepage ein sehr langes Dokument und möchten erreichen, dass Besucher über ein Inhaltsverzeichnis zu einzelnen Inhaltspunkten bequem über Hyperlinks springen können. Das erhöht die Übersicht und erleichtert dem Besucher die Navigation. Dazu benötigen Sie ein Inhaltsverzeichnis mit Sprungbefehlen und im Text Sprungmarken, die die Ziele darstellen. Benutzen Sie Rahmen, setzen Sie den target-Befehl auf self. Schreiben Sie in Ihren Quelltext zuerst einen Sprungbefehl, beispielsweise:
  <a href="#Kapitelueberrschift" target="_self">nach oben</a>
  Definieren Sie das Ziel, indem Sie eine Marke setzen, zu der gesprungen werden soll:
  <a name="#Kapitelueberschrift"></
  a>
  An der Raute # erkennt der Browser den textinternen Link.
  
  

• Im Text springen

  Im Text springen
  Große HTML-Dokumente überblicken Sie besser mit internen Sprungzielen.
  Größere HTML-Seiten sind oft mit einem eigenen Inhaltsverzeichnis versehen. Dieses besteht aus Hyperlinks, die auf die eigene Seite verweisen. Für derartige interne Links nehmen Sie am besten den Tag <A NAME=>. Er definiert ein internes Sprungziel. Der dort angegebene Name ist frei wählbar. Der Hyperlink verweist auf diesen Tag mit der Pseudo-URL #name:
  <A HREF="#Teil2">Zu Teil 2</A>
  Teil 1: Wie zum HTML-Dokument?
  ...
  <A NAME="Teil2">
  Teil 2: Wie werden Sie die Surfer wieder los?
  Sie können solch einen Namen direkt an eine URL anfügen. Haben Sie das Inhaltsverzeichnis auf Ihrer Hauptseite, verzweigen Sie direkt auf Teil 2 Ihrer Abhandlung mit folgendem Link:
  <A HREF="abhandlung.html#Teil2">Zu Teil 2</A>
  
  

• Kein Seitenrand

  Kein Seitenrand
  Unterdrücken Sie den Seitenrand, den die Browser zwischen Webseite und Fenster- oder Frame-Rand einfügen.
  Internet Explorer und Netscape Navigator zeigen eine Webseite innerhalb des Browser-Fensters nicht an derselben Stelle an. Während IE standardmäßig direkt am Rand beginnt, lässt Netscape links und oben einige Pixel Freiraum. Normalerweise fällt das kaum ins Gewicht, bei einem dunklen Seitenhintergrund oder etwa bei nahtlosen Frames stört der Effekt. Um den Seitenrand einzustellen gibt es zusätzliche Attribute für das <body>-Tag. Diese sind allerdings nicht im HTML-Standard festgelegt, sondern unterscheiden sich bei den beiden Browsern. Beim IE geht es so:
  <body leftmargin=0 topmargin=0>
  Weniger bekannt sind die entsprechenden Parameter von Netscape:
  <body marginwidth=0 marginheight=0>
  
  

• Keine Rollbalken

  Keine Rollbalken
  Mit einem Attribut unterdrücken Sie im Internet Explorer die Anzeige von Rollbalken für eine Webseite.
  Wenn der Platz im Browser-Fenster nicht ausreicht, um eine Webseite komplett darzustellen, blendet der Browser Rollbalken ein. Diese Steuerelemente können sowohl waagerecht als auch senkrecht erscheinen. Beim Internet Ex-TIPP TIPP plorer haben Sie die Option, die Anzeige der Rollbalken zu beeinflussen. Ein Beispiel:
  <body scroll="yes">
  Das Attribut scroll steuert die Darstellung der Rollbalken. Es gibt drei erlaubte Werte: no unterdrückt die Rollbalken komplett. Dabei wird in der Darstellung kein Platz für den Rollbalken reserviert. yeszeigt den senkrechten Rollbalken immer an. Ist der Rollbalken gar nicht erforderlich, erscheint er in deaktivierter Darstellung. Der waagerechte Rollbalken bleibt davon unbeeinflusst. Der Internet Explorer zeigt ihn nur an, wenn das Browser-Fenster zu schmal für die Webseite ist. yes ist der Standardwert des Internet Explorer. auto zeigt die Rollbalken nur dann, wenn es notwendig ist. Der Platz für den rechten Rollbalken ist bereits reserviert, so dass beim Einblenden keine Änderung am Layout der Webseite erforderlich ist. Beachten Sie: Das Attribut scroll gehört nicht zum HTML-Standard und wird auch von anderen Browsern nicht interpretiert.
  
  

• Klingende Seiten

  Klingende Seiten
  PC-Power lockt längst nicht mehr nur mit optischen Reizen. Klänge tönen von der nächsten Dimension.
  Mit dem gleichen Trick wie zuvor lassen Sie nach dem Laden eines Dokuments noch eine Melodie erklingen:
  <HTML>
  <META HTTP-EQUIV="Refresh" CONTENT="1; URL=file:///c|/windows/media/ding.wav">
  <BODY>
  Ding!
  </BODY></HTML>
  Das Beispiel spielt nach Laden des Dokuments das bekannte "Ding"! Die Pfadangabe mag variieren, je nachdem, wo sich ding.wav auf Ihrem Rechner befindet. Das Ganze klappt auch nur, wenn Ihr Browser mit dem entsprechenden Plugin zum Abspielen von Sounds ausgestattet ist. Falls Sie Sounds im Internet anbieten, sollten Sie diese Dateien im au-Format ablegen, das die meisten Browser verstehen.
  
  

• Laufschrift mit Bildern

  Laufschrift mit Bildern
  Die Laufschriftfunktion des Internet Explorer bewegt nicht nur Text, sondern beliebige Elemente wie etwa Bilder.
  Microsoft hat den Internet Explorer um ein spezielles Tag für Laufschrift erweitert. Andere Browser ignorieren die Angabe und zeigen nur den Text an. Eine Laufschrift leiten Sie mit dem Tag <marquee> (marquee = Festzelt!) ein und beenden sie mit </marquee>. Alle Elemente wie Text oder auch Bilder, die Sie zwischen die beiden Tags notieren werden von der Bewegung erfasst.
  <marquee>
  <img src="logo.gif">
  </marquee>
  Der Browser bewegt damit das Bild von links nach rechts über das Browserfenster. Auf einer Webseite dürfen Sie mehrere unabhängige Laufschriften verwenden. Die Geschwindigkeit der Laufschrift steuern Sie über die beiden Attribute scrollamount und scrolldelay im einleitenden Tag.
  scrollamount steuert, wie weit die Laufschrift bei jedem Animationsschritt versetzt wird. Die Einheit ist Pixel, der Standardwert ist 6. Der IE akzeptiert ganze Zahlen ab 1 als Attributwert.
  scrolldelay: Die Wartezeit zwischen zwei Animationsschritten beträgt standardmäßig 85 Millisekunden. Mit diesem Attributwert setzen Sie die Anzahl Millisekunden ( 1 Sekunde = 1000 Millisekunden) als ganze Zahl und steuern so die Geschwindigkeit der Animation.
  <marquee scrolldelay="5"
  scrollamount="1" truespeed="1">
  <img src="logo.gif">
  Blitzschnelles Logo
  <marquee>
  Beide Attribute bestimmen in Abhängigkeit voneinander die Geschwindigkeit der Animation. Je kleiner scrollamount ist, desto langsamer und feiner wird die Bewegung. Je kleiner scolldelay ist, desto schneller und rechenaufwändiger wird die Bewegung. Dabei gibt es eine Besonderheit: Standardmäßig benutzt der Internet Explorer das Zeitsignal der Systemuhr, das nur alle 60 Millisekunden auftritt. Deshalb "verschluckt" der IE alle Delay-Werte kleiner 60. Aus scrolldelay="30" macht der IE intern scrolldelay="60". Erst das zusätzliche Attribut truespeed="1" sorgt dafür, dass es der Browser mit der Zeitangabe genau nimmt. Besonders wenn Sie Bilder mit einem kleinen Wert bei scrollamount sauber bewegen wollen führt kein Weg an truespeed="1" vorbei.
  
  

• Laufschriften mit Hyperlink einbauen

  Laufschriften mit Hyperlink einbauen
  Mit Hilfe eines Newstickers stellen Sie animierte Botschaften auf Ihrer Homepage dar.
  Mit Lauftexten übermitteln Sie Ihren Website-Besuchern Kurzinformationen, beispielsweise über Neuigkeiten auf Ihrer Homepage. Wenn Sie dazu den Marquee-Tag verwenden, gehen Netscape-Anwender zwar leer aus, dafür können Sie aber auf jedes JavaScript verzichten. Einen simplen Lauftext erzeugen Sie folgendermaßen:
  <marquee>Text läuft von links nach rechts </marquee>
  Die Laufrichtung wechseln Sie so:
  <marquee direction=right> Text läuft von links nach rechts </marquee>
  Mit folgenden Schaltern definieren Sie die Geschwindigkeit und Verzögerung des Tickers:
  scrollamount=50
  scrolldelay=5
  Mit dem alternate-Attribut läuft der Text abwechselnd von links nach rechts und umgekehrt:
  <marquee behaviour=alternate>Lauftext mit wechselnder Richtung</marquee>
  Die Hintergrundefarbe bestimmen Sie folgendermaßen:
  <marquee bgcolor=red>Lauftext auf rotem Hintergrund</marquee>
  Formatieren Sie die Schrift in Größe und Farbe:
  <font size=7 color=blue><marquee bgcolor=red>Lauftext in blauer Schrift auf rotem Hintergrund</marquee></font>
  Die Höhe und die Breite des Banners bestimmen Sie in Pixeln oder in Prozent:
  <font size=7 color=blue><marquee bgcolor=red width=250 height=25>Lauftext in blauer Schrift auf rotem Hintergrund</marquee></font>
  Abschließend können Sie Ihrem Laufband noch Hyperlinks beifügen:
  <font size=7 color=blue><marquee bgcolor=red width=250 height=25> <a href="hyperlink.html">Newsticker in blauer Schrift auf rotem Hintergrund mit Hyperlink</a></marquee></font>
  
  

• Linie zeichnen

  Linie zeichnen
  Zeichnen Sie eine Linie an beliebiger Stelle in Ihrem HTML-Dokument, ohne das HR-Tag zu verwenden.
  Für horizontale Linien nutzt man üblicherweise das HR-Tag. Zur Formatierung des Tags können Sie unter anderem die Attribute SIZE (für die Höhe), WIDTH (für die Breite) und COLOR (für die Linienfarbe) verwenden. Mit einer einfachen Tabelle ist das Darstellen einer horizontalen Linie ebenfalls möglich:
  <TABLE WIDTH="800">
  <TR>
  <TD WIDTH="1"
  BGCOLOR="#0000FF"></TD>
  </TR>
  </TABLE>
  Diese Technik bietet sich zur Layoutsteuerung innerhalb verschachtelter Tabellen an. Für andere Aufgaben macht dies keinen Sinn, da Sie mit dem speziell dafür vorgesehenen HR-Tag einfacher zum Ziel gelangen. Richtig interessant wird diese Technik beim Erzeugen von vertikalen Linien. Für diesen Zweck gibt es keinen Tag. Das folgende Beispiel zeigt Ihnen, wie Sie in einer Tabelle eine vertikale Linie zeichnen können:
  <TABLE WIDTH=
  "1" HEIGHT=
  "300">
  <TR>
  <TD>linke
  Seite</TD>
  <TD WIDTH="1" BGCOLOR="#
  0000FF"></TD>
  <TD>rechte Seite</TD>
  </TR>
  </TABLE>
  Die linke und rechte Spalte werden in diesem Beispiel mit einer vertikalen Linie getrennt. Dies kann beispielsweise beim Darstellen von Inhalten im Zeitschriften-Layoutstil eine nette Idee sein.
  
  

• Links neu laden

  Links neu laden
  Ihre Homepage ist in einen Frame für das Menü und einen zweiten für den Inhalt geteilt. Alle Verweise des Menüs sollen mit einem Befehl im anderen Frame geladen werden.
  Normalerweise laden Browser bei einem Klick auf einen Hyperlink die neue Seite ins aktuelle Fenster bzw. den aktuellen Frame. Mit dem Attribut target im Tag des Links bestimmen Sie ein anderes Ziel. Statt in Ihrem Menü zu jedem Link die Attribut-Angabe zu schreiben, geben Sie den Ziel- Frame global an. Fügen Sie im Head-Bereich der Seite für den Menü-Frame die Zeile
  <base target="zielFrame">
  ein. "zielFrame" ist der Name des Frames, wie Sie ihn im Frameset vergeben haben. Analog können Sie Ihren Besuchern gestatten, Links auf Ihren Seiten zu folgen, ohne Ihre Site zu verlassen. Die folgende Angabe lädt Verweise jeweils in ein neues Fenster:
  <base target="_blank">
  So bleibt das Fenster, von dem der Link aufgerufen wurde, im Hintergrund erhalten. Das lohnt sich beispielsweise, wenn Sie Linklisten anbieten und davon ausgehen, dass der Besucher immer wieder auf Ihre Seite zurückkehren möchte. Dann vereinfacht das offene Fenster die Navigation. Die Technik kann auch ägerlich wirken. Wenn es keinen Grund gibt, zur ursprünglichen Seite zurückzukehren. Der Besucher muss das alte Fenster schließen und vermutet, dass der Autor seinen Auftritt aufdringlich in den Vordergrung rücken will.
  
  

• mailto-Befehle verfeinern

  mailto-Befehle verfeinern
  Mit dem mailto-Befehl erleichtern Sie es Besuchern, Ihnen eine E-Mail zu senden.
  Sie möchten die Betreffzeile für eingehende Mails von vornherein festlegen oder Textinhalte vordefinieren. Dazu stehen Ihnen einige Befehle zur Verfügung. Der einfache mailto-Befehl sieht so aus:
  mailto:mein@name.deUm die E-Mail als carbon copy an weitere Adressen versenden zu lassen, ergänzen Sie den obigen Befehl:
  mailto:mein@name.de?cc=durch@schlag.deund für eine blind copy:
  mailto:mein@name.de?bcc=durch@schlag.deLegen Sie anschließend den Betreff fest:
  mailto:mein@name.de?cc=durch@schlag.de&subject=Ihr Betreff
  Selbst ganze Mailtexte können Sie integrieren:
  mailto:mein@name.de?cc=durch@schlag.de&subject=Ihr Betreff&body=Lieber Empfänger...
  
  

• Mehrspaltig formatieren

  Mehrspaltig formatieren
  Ob Sie im WWW Buch- oder mehrspaltigen Magazinsatz vorgaukeln, entscheiden wenige Befehle.
  Sie wollen, daß Ihre Seite mehrspaltig wie in der Zeitung erscheint? Das ist nicht einfach. Netscape bietet ab Version 3 den MULTICOL-Tag an. Leider erkennt der Explorer ihn nicht an. Andere Browser wollen ihn auch nicht darstellen, da er nicht Bestandteil von HTML 3.2 ist. Weitaus mehr Browser können aber unsichtbare Tabellen wie mit einer Zeile und beliebig vielen Spalten darstellen:
  <TABLE BORDER=0>
  <TR><TD>
  Text in der linken Spalte!
  <TD>
  Text in der nächsten Spalte!
  <TD>
  Text in der rechten Spalte!
  </TABLE>
  Da der Text dabei leider nicht automatisch umbricht, müssen Sie selbst entscheiden, was Sie in welche Spalte schreiben.
  
  

• Meta-Tags einfügen

  Meta-Tags einfügen
  Sie haben eine informative Seite gebaut, die die Suchmaschinen aber nicht finden.
  Wer seine Homepage bei Suchmaschinen anmeldet, sollte nicht vergessen, dass Web.de, Yahoo!, Lycos etc. zum korrekten Auffinden Ihrer Seiten Hilfestellung benötigen. Das bedeutet, Sie sollten mindestens eine Beschreibung Ihrer Seiten sowie Schlüsselwörter, nach denen die Suchmaschine fahnden soll, von vornherein im Quelltext Ihrer Website verankert haben. Darüber hinaus stehen weitere Attribute zur Verfügung, um Ihre Seite besser zu platzieren. Meta-Tags sind HEAD-Elemente, dementsprechend setzen Sie sie zwischen die beiden Tags <head> und </head>. Um eine Beschreibung Ihrer Homepage zu definieren, benutzen Sie folgenden Meta-Tag:
  <META NAME="description" CONTENT="Geben Sie hier eine Beschreibung Ihrer Homepage an">
  Folgender Tag dient zur Eingabe Ihrer Schlüsselwörter:
  <META NAME="keywords" CONTENT="Hier zählen Sie Ihre Schlüsselwörter auf, trennen Sie sie aber durch Kommata">
  Damit die Suchmaschine sich Ihrer Homepage mit sämtlichen Unterseiten annimmt, sollten diese Attribute nicht fehlen:
  <META NAME="robots" CONTENT="INDEX,FOLLOW">
  Den Autor und das Copyright geben Sie an mit:
  <META NAME="author" CONTENT="Ihr Name">
  <META NAME="copyright" CONTENT="zum Beispiel: Ihr Name ">
  Überbegriffe, Zielgruppe und Seitentyp legen Sie folgendermaßen fest:
  <META NAME="page-topic" CONTENT="beispielsweise: Dienstleistungen">
  <META NAME="audience" CONTENT="Alle">
  <META NAME="page-type" CONTENT="beispielsweise: Kommerziell">
  Legen Sie noch den Europäischen Zeichensatz fest:
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  
  

• Mit Schwarzweiß anfangen

  Mit Schwarzweiß anfangen
  Wer zuerst die Grafik ohne Farbattribute über die Leitung schickt, hilft Anwendern bei langsamen Übertragungsraten.
  Ein anderer Anwendungsbereich für animierte gif-Grafiken erfreut insbesondere diejenigen, die Zeit und Telefongebühren noch mit langsamen Modems vergeuden. Fürsorgliche Designer stellen zwei Versionen einer größeren Grafik her. Die schnell zu ladende Schwarzweiß-Version kommt als erstes Image in die gif-Datei, gefolgt von der ausladenden Farbversion. Da animierte gif-Bilder immer auch während des Ladens angezeigt werden, bekommen Sie zunächst die Schwarzweiß-Version zu sehen, die sich dann mit Farbe füllt.
  
  

• Ohne <basefont>

  Ohne <basefont>
  Auf den Einsatz des Tags <basefont> sollten Sie aus Kompatibilitätsgründen verzichten.
  Das HTML-Tag <basefont> war bei HTML 3.2 fester Bestandteil in HTML 4.0 ist es als missbilligt (deprecated) aufgeführt. Das bedeutet, dass es nicht mehr verwendet werden soll, weil es in der nächsten HTML-Version voraussichtlich ganz entfällt. Es gibt eine ganze Reihe solcher Tags, die aber weiter benutzt werden sie unterstützen die aktuellen Browser. <basefont> setzt im Kopf einer HTML-Datei die Schriftgröße für die ganze Webseite:
  <head>
  <basefont size=2>
  </head>
  Der Attributwert bei size darf zwischen 1 und 7 liegen, 3 ist die Normalgröße. Das klappt gut, nur nicht bei Netscape 6: In vorauseilendem Gehorsam gegenüber dem W3C-Standard (World Wide Web Consortium) haben die Entwickler <basefont> gestrichen.
  
  

• Saubere Auswahlmenüs

  Saubere Auswahlmenüs
  HTML 4.0 erlaubt verschachtelte Auswahllisten: ein nützlicher Weg, um für Übersicht zu sorgen.
  Auswahllisten innerhalb eines Formulars präsentieren dem Surfer eine vorgegebene Zahl von Optionen. Zusammen mit JavaScript lassen sich so praktische Auswahlmenüs programmieren. Ab einer gewissen Zahl an Listeneinträgen wird es aber unübersichtlich. Mit HTML 4.0 bauen Sie Zwischenüberschriften in die Auswahlliste ein. Leider klappt das nur mit dem Internet Explorer 6 und Netscape 6, andere Browser ignorieren die Angaben. Eine Auswahlliste definieren Sie so:
  <form>
  <select>
  <option>M&uuml;nchen</option>
  <option>Augsburg</option>
  ...
  </select>
  </form>
  Für eine Zwischenüberschrift klammern Sie die betroffenen Option-Elemente einfach mit dem Tagpaar <optgroup>...</ optgroup> ein. Mit dem Attribut label geben Sie den Text an, der in der Liste als Zwischenüberschrift erscheinen soll:
  <optgroup label="Bayern">
  <option>M&uuml;nchen</option>
  <option>Augsburg</option>
  </optgroup>
  Die Zwischenüberschriften kann der Anwender im Browser nicht markieren, sie werden übersprungen. Dieser Effekt ist vom HTML-Standard nicht vorgesehen. Laut World Wide Web Consortium soll <optgroup> ein verschachteltes Menü erzeugen: Die Liste ist ein Menü zum Aufklappen, das wiederum Untermenüs unter Label-Namen enthält.
  
  

• Schädliche Leerzeichen

  Schädliche Leerzeichen
  Vermeiden Sie überflüssige Leerzeichen in Tabellen, die Ihr Seitenlayout durcheinander bringen.
  In HTML spielen Leerzeichen, Zeilenumbrüche etc. normalerweise keine Rolle für die Darstellung der Webseite im Browser. Der Browser übergeht diese Zeichen und fasst beispielsweise mehrere Leerzeichen zu einem zusammen. In Einzelfällen reagieren Browser aber anders als gedacht. In einer Tabelle wollen Sie mehrere Bilder in verschiedenen Zellen nahtlos aneinander fügen. Im Internet Explorer und im Netscape 6.2 ist das letzte Bild um einen Pixel nach unten versetzt, Netscape 4.x sowie Opera 5 zeigen einen hässlichen Spalt zwischen den Bildern. Ein Effekt am Rande: Machen Sie das Browser-Fenster sehr schmal, dann verschwindet der Spalt bei allen Browsern. Suchen Sie nach einem Leerzeichen in den einzelnen Tabellen-Tags: Zwischen dem einleitenden <td> und dem abschließenden </td> sollten absolut keine Leerzeichen außerhalb eines Tags vorkommen. Die Schreibweise
  <td><img src="wolk000.jpg"> </td>
  verursacht den Fehler, während
  <td><img src="wolk000.jpg"></td>
  eine korrekte Anzeige bewirkt. Noch tückischer wird es, wenn Sie ein Leerzeichen vor dem Bild einbauen. Dann kann es beim Internet Explorer unter Umständen passieren, dass das Bild nach dem Leerzeichen um ein paar Pixel nach unten verschoben ist. Letztlich bleibt nur der Merksatz: Keine überflüssigen Leerzeichen in Tabellenzellen.
  
  

• Schnelles Surfen im Internet

  Schnelles Surfen im Internet
  Aus mehreren HTML-Dokumenten fassen Sie mit einem Aufruf eine umfangreiche Link-Liste zusammen.
  adressen.cpp (Listing in Databox 4/98) faßt die Links mehrerer HTML-Dokumente übersichtlich in einem neuen zusammen. Somit ersparen Sie sich bei der nächsten Online-Sitzung das Suchen nach bestimmten Links in alten HTML-Dokumenten.
  Sie rufen einfach die mit adressen.cpp gespeicherte Link-Seite auf und klicken dort den gesuchten Link an. Die Befehlszeile, um diese Seite anzulegen, lautet:
  adressen LINKS.HTM
  Adok1.htm dok2.htm ...
  Die Datei links.htm listet dann die einzelnen Links der Dokumente dok1.htm, dok2.htm etc. übersichtlich auf. Falls Sie an eine bereits bestehende Link-Seite die Links neuer HTML-Dokumente anhängen wollen, rufen Sie den folgenden Befehl auf:
  adressen linksNEU.htm A
  linksALT.htm dok1.htm ...
  Damit Sie die Link-Seite zügig speichern, liest das Programm die einzelnen HTML-Dokumente in Blöcken von maximal 1000 Zeichen ein. Findet das Programm in einem Block einen Link, so prüft es zuerst, ob es sich um eine vollständige Adresse handelt. Wenn ja, wird die Adresse in der Link-Seite gespeichert und die Suche im momentanen Block fortgesetzt.
  Die Suchprozedur basiert auf der Brute-Force-Methode (rohe Gewalt), die hierfür gut geeignet ist. Komplexere Suchprozeduren würden bei den kurzen Such-Strings zu keiner nennenswerten Verbesserung führen.
  Alexander Albrecht/et
  
  

• Seite für Seite

  Seite für Seite
  Ersparen Sie dem Anwender das Blättern, indem Sie ihm neue Seiten automatisch aufschlagen.
  Mit Hilfe eines speziellen Tag am Dokumentanfang laden Sie nach einer vorgegebenen Zeit die nächste Seite:
  <HTML>
  <META HTTP-EQUIV="Refresh" CONTENT="5; URL=folgeseite.html"> <BODY> In f&uuml;nf Sekunden mehr!
  </BODY></HTML>
  Die Ziffer 5 läßt es nach fünf Sekunden mit der angegebenen URL weitergehen.
  
  

• Seitenübergänge mit Pfiff

  Seitenübergänge mit Pfiff
  Eine einzige Zeile Code sorgt dafür, dass einfache Seitenübergänge zu einem wahren Blickfang für alle Benutzer des Internet Explorer werden.
  Jeder Videokenner weiß um die Vorzüge von Überblendeffekten, die thematisch unterschiedliche Szenen nahtlos verknüpfen. Die Entwickler des Internet Explorer waren von den Qualitäten dieser Überblendungen scheinbar ebenfalls so begeistert, dass sie sie bereits in die Browserversion 4.0 implementierten. Das ist kaum bekannt. Um diese Effekte einzubinden, erweitern Sie den Head-Bereich um folgende Zeile:
  <META http-equiv="Page-Enter" content="revealTrans(Transition=23,Duration=1.000)">
  Die Parameter Transition und Duration legen fest, welche der 23 Effekte verwendet werden soll und wie schnell (in Sekunden) die beiden Seiten ineinander übergehen. Zur Auswahl stehen beispielsweise: 0 = Box in (quadratische Überblendung in die Seitenmitte); 3 = Circle out (Kreisförmige Überblendung aus der Seitenmitte); 8 = Vertical blinds (Blockweiser, vertikaler Seitenaufbau - Jalousieneffekt); 11 = Checkerboard across (Schachbrettmuster von links nach rechts); 12 = Random dissolv (Partikelähnliche Auflösung); 21 = Random bars horizontal (Vertikales Streifenmuster); 23 = Random (zufälliger Effekt). Ebenso setzen Sie die Übergänge beim Verlassen einer Seite ein. Dazu erweitern Sie den Code um die Anweisung Page-Exit oder Site-Exit.
  
  

• Silbentrennung mit &shy;

  Silbentrennung mit &shy;
  Über ein Sonderzeichen erreichen Sie im Internet Explorer automatische Silbentrennung wie im Textverarbeitungsprogramm.
  Bei jedem Textverarbeitungsprogramm gehört die automatische Silbentrennung zum Standardrepertoire. Auch HTML 4.0 trifft hierfür Vorkehrungen. Der Standard unterscheidet zwischen dem einfachen Trennstrich und dem weichen Trennstrich. Den einfachen Trennstrich, den Sie über die Tastatur als Minuszeichen (-, ASCII-Code 45) eingeben behandelt der Browser wie ein normales Zeichen. An einem solchen Trennstrich setzt der Browser folglich keinen Zeilenumbruch. Das weiche Trennzeichen ist das Sonderzeichen &shy; oder numerisch &#173;. Laut HTML-Standard sollen Browser an entsprechend markierten Stellen einen Zeilenumbruch durchführen. Bei einem Zeilenumbruch setzt der Browser an das Ende der Zeile einen Trennstrich. Erfolgt keine Silbentrennung an der markierten Stelle, so zeigt der Browser keinen Trennstrich.
  <body>
  Es war einmal mitten im Winter,
  und die Schnee&shy;flocken
  fie&shy;len wie Fe&shy;dern vom
  Him&shy;mel herab.
  </body>
  Setzen Sie das Sonderzeichen &shy; an genau der Stelle in den Text ein, an der eine Silbentrennung erfolgen soll. Normalerweise sehen Sie das Zeichen im Browser nicht. Aber wenn das Wort an den Rand rückt erfolgt eine Silbentrennung mit einem Trennstrich am Zeilenende. Die Silbentrennung beherrscht aber nicht die komplexe deutsche Trennung von ck. Das Wort backen trennt der Internet Explorer als bac-ken und nicht korrekt als bak-ken. Solche Trennstellen dürfen Sie deshalb nicht mit einem weichen Trennzeichen markieren. Von den aktuellen Browsern unterstützt nur der Internet Explorer den weichen Trennstrich. Bei Opera und Netscape 6.x passiert gar nichts, die weichen Trennstriche bleiben unsichtbar. Aus der Reihe tanzt wieder einmal Netscape 4.x. Dieser Browser zeigt auch die weichen Trennstriche als Minuszeichen an. Das Ergebnis ist hässlicher und teilweise schwer lesbarer Text. Da Netscape 4.x immer seltener Verwendung findet, ist der Einsatz von weichen Trennstrichen vor allem bei Blocksatz trotzdem eine Überlegung wert.
  
  

• Spaß mit Formularen

  Spaß mit Formularen
  Statt in Web-Formularen auf graue HTML-Buttons oder mit Texturen aufgepeppte Schaltflächen zu bauen, setzen Sie besser Grafiken ein.
  Um einer Webseite den letzten Schliff zu geben, verzichten viele Designer auf Standard-Formularschaltflächen und setzen eigene, farbenfrohe Lösungen ein, die sich harmonisch ins einheitliche Seitendesign einfügen. Die Einbindung ist einfach, da die optischen Details mit einer einzigen Zeile festgelegt werden. Fügen Sie den folgenden HTML-Code in den Body-Bereich der Seite ein. Die Parameter action, method und name passen Sie an die von Ihnen verwendeten Auslesemethoden an. Wer eine bereits bestehende Formular-Auswahlliste anpassen will, erweitert den Quellcode nur um die vorletzte Zeile und stellt die entsprechende Grafik bereit.
  <form action="beliebig.html" method="
  get" name="Auswahl">
  <select name="menu" size="3"
  multiple>
  <option value="1"> Menüpunkt
  1 </option>
  <option value="2"> Menüpunkt
  2 </option>
  <option value="3"> Menüpunkt
  3 </option>
  <option value="4"> Menüpunkt
  4 </option>
  </select>
  <input type="image" alt="Auswahlbutton"
  src="button1.gif">
  </form>
  
  

• Statisches Zielfenster

  Statisches Zielfenster
  Beim Klick auf einen Link öffnet sich ein Zusatzfenster, weitere Links schicken ihre Ausgabe in genau dieses Fenster.
  Mit dem Attribut target in einem Verweis-Tag geben Sie das Zielfenster an, in dem die referenzierte Webseite erscheinen soll. Normalerweise kommt die Technik bei Frames zum Einsatz aber sie kann mehr. Als Attributwert geben Sie target="_ blank" an, damit die Webseite in einem neuen Browser-Fenster erscheint. Haben Sie mehrere derartige Links auf einer Seite, öffnet der Browser jedes Mal ein neues Fenster, das Surfer von Hand wieder schließen müssen. Besser wäre es, wenn der erste Link ein neues Fenster öffnet und alle weiteren Links dieses Fenster "mitbenutzen". Denken Sie an eine Bildergalerie mit Thumbnails, deren Vergrößerung im Zusatzfenster erscheint. Die Lösung: Geben Sie einen beliebigen Text als Target an, bei allen Links denselben. Beim ersten Klick auf einen Link stellt der Browser fest, dass noch kein Fenster dieses Namens existiert, und öffnet eines. Beim zweiten Link gibt es das Fenster bereits, und der Browser ersetzt nur den Inhalt.
  
  

• Suchmaschinen- Ausschluss

  Suchmaschinen- Ausschluss
  So erreichen Sie, dass untergeordnete Seiten Ihrer Homepage von Suchmaschinen nicht indiziert werden.
  Sie haben Ihre Homepage bei Suchmaschinen angemeldet. Doch Sie möchten erreichen, dass einige untergeordnete Seiten von Suchmaschinen nicht gefunden werden. Das erreichen Sie, indem Sie im Head-Bereich der Seite folgendes Meta-Tag notieren:
  <meta name="robots"
  content="noindex">
  
  

• Tool-Tipp überall

  Tool-Tipp überall
  Mit den Attributen title und alt statten Sie die Elemente Ihrer Webseiten mit Tool-Tipps aus, die beim überfahren mit der Maus erscheinen.
  In HTML 4.0 gibt es ein neues Universalattribut, das Sie in jedem HTML-Tag verwenden dürfen (auch wenn es nicht überall Sinn macht). Mit dem Attribut title="" realisieren Sie die unter Windows oft anzutreffenden Tool-Tipps: Sobald der Mauszeiger kurze Zeit ruhig über einem Element steht, erscheint in einem kleinen gelben Fenster ein kurzer Erklärungstext. Praktisch sieht das folgendermaßen aus:
  <a href="http://www.pcmagazin.de"title="Hier geht's zum PC Magazin">PC Magazin</a>
  Das funktioniert auch bei Bildern oder mit einer Tabelle. Die Länge des Textes ist nicht beschränkt. So könnten Sie etwa bei Bildern eine umfangreiche Beschreibung unterbringen. Der Nachteil: Das Verfahren funktioniert zwar mit Internet Explorer, Opera 5.x und Netscape 6, aber nicht mit älteren Netscape-4.x-Browsern. Zumindest bei Bildern kann man das ausgleichen: Hier gibt es das alt-Attribut, das Sie immer einsetzen sollten. Der Text, den Sie mit alt angeben, erscheint im Browser während des Ladevorgangs eines Bildes oder wenn das Bild nicht geladen werden konnte. Um kompatibel zu sein, setzen Sie beide Attribute ein. Allerdings ist es bei alt angebracht, kurze Texte zu verwenden: Normalerweise sind Zeilenumbrüche in HTML ohne Bedeutung. Allerdings sollten Sie den Text innerhalb der Anführungszeichen bei title="" in eine Zeile schreiben. Sonst übernimmt der Internet Explorer den Zeilenumbruch in den Tool-Tipp. Leider reagiert Netscape 6 sehr empfindlich und fügt statt dessen ein paar unleserliche Sonderzeichen in den Tool-Tipp ein. Und Opera ignoriert den Umbruch.
  
  

• Umlaute definieren

  Umlaute definieren
  Betriebssysteme definieren Umlaute auf ihre eigene Art. HTML bietet dafür eine allgemeingültige Konvention.
  Tippen Sie Umlaute niemals direkt ein, wenn Sie für Ihre HTML-Seiten einen ASCII-Editor verwenden. Die Zeichensätze der Betriebssysteme unterscheiden sich in den Umlauten und Sonderzeichen voneinander. Wenn Sie unter DOS ein ü eintippen, sehen Sie in einem Windows-Browser nur ein Kästchen. Der HTML-Standard sieht für Umlaute und Sonderzeichen spezielle Zeichenfolgen vor, die mit einem &-Zeichen beginnen und mit einem Semikolon enden (siehe Tabelle unten). Achten Sie auf die korrekte Schreibweise, vor allem auf Groß- und Kleinbuchstaben. Eine komplette Liste aller HTML-Sonderzeichen finden Sie im WWW:
  www.sandia.gov/sci_compute/symbols.html
  
  

• Universelle Tool-Tipps

  Universelle Tool-Tipps
  Die in erster Linie bei der Auszeichnung von Grafiken zum Einsatz kommenden Tool-Tipps lassen sich auch bei weiteren Seiten-Elementen einsetzen.
  Erfahrene Web-Designer nutzen bei allen eingebundenen Grafikelementen das ALT-Tag konsequent aus, um dem Besucher bei eventuellen Übertragungsproblemen zumindest eine Beschreibung des Bilds anzuzeigen. Die wenigsten wissen aber, dass sich diese Hinweistexte nicht nur mit Hilfe des ALT-Tags realisieren lassen, sondern auch bei Komponenten wie Separatoren, Überschriften, Textblöcken und sogar Tabellen verwendet werden können. Möglich wird dies durch das fast nur bei der Auszeichnung von Hyperlinks eingesetzte TITLE-Tag. Wollen Sie beispielsweise die Überschrift PC Magazin um den entsprechenden Tool-Tipp "Das ist die Überschrift PC Magazin" erweitern, sieht der Quellcode folgendermaßen aus:
  <font size="7" title="Das ist die Überschrift PC Magazin"> PC Magazin </font>
  
  

• Unsichtbare Frames

  Unsichtbare Frames
  Sie möchten Frames zur Gliederung Ihrer Seite einsetzen, aber der hässliche graue Rahmen stört Sie.
  Unter Homepage-Bastlern meist verpönt und verspottet, verbessern Frames die Darstellung und die Navigation. Während Sie in einem Rahmen Ihre Navigationsleiste platzieren, die dadurch ständig im Blickfeld ist und nur einmal geladen werden muss, werden nach Klick auf letztere die zugehörigen Inhalte im Haupt-Frame dargestellt. Das spart Ladezeit und Bastelarbeit. Sie können nun Scrollbalken und Leisten so verstecken, dass der Besucher auf den ersten Blick keine Rahmenstruktur erkennt. Laden Sie dazu Ihre Homepage mit einem HTML- oder Text-Editor. Nun können Sie den Quellcode bearbeiten. Mit den Attributen frameborder= "NO", border="0" und framespacing=" 0" verhindern Sie die Darstellung der unschönen Rahmen, mit scrolling=" NO" werden auch die Rollbalken unsichtbar, und letztlich sorgen Sie mit noresize für eine stets identische Rahmenfenstergröße. Der Quellcode könnte so aussehen:
  <frameset cols="200,85%" rows="*" frameborder="NO">
  <frame src="linkerframe.html" name="links" scrolling="NO" frameborder="NO" noresize>
  <frameset rows="120,520*" frameborder="NO" border="0" framespacing="0" cols="*">
  <frame src="obererframe.htm" name="oben" scrolling="NO" frameborder="NO" >
  <frame src="zielframe.html" name="ziel" scrolling="AUTO" frameborder="NO" bordercolor="#FFFFFF">
  </frameset>
  </frameset>
  In Zukunft vereint Ihre Homepage die bequemen Navigationseigenschaften der Frametechnik und das zeitgemäße Chic des Webdesigns. Beachten Sie, dass sich auch auf kleineren Displays sämtliche Fensterinhalte immer vollständig darstellen: Das gilt insbesondere für den Zielframe, der im Quelltext mit dem Attribut scrolling="AUTO" versehen sein sollte. Er zeigt bei Bedarf einen Rollbalken an.
  
  

• Vorgefertigte E-Mails per Mausklick

  Vorgefertigte E-Mails per Mausklick
  Viele Webseiten setzen vordefinierte E-Mails ein, um den Besuchern ein Feedback zur Webseite zu erleichtern. Das alles lässt sich mit wenigen Variablen realisieren.
  Sobald der Surfer auf einen E-Mail-Link klickt, startet der standardmäßige E-Mail-Client automatisch mit einer neuen Nachricht. In dieser sollen wichtige Kontaktparameter bereits eingetragen sein: die E-Mail-Adresse des Webmasters und ein Betreff. Der Besucher hat nur noch den eigentlichen Nachrichtentext einzugeben. Der erste Schritt besteht darin, dass Sie einen E-Mail-Link definieren und diesen um die Betreffzeile der Nachricht erweitern. Dies geschieht mit der Variablen ?subject. Um dem Webmaster einer Site eine Mail mit dem Betreff "Meine Meinung zu Ihrem Web-Angebot" zukommen zu lassen, erweitern Sie den Quellcode um folgende Zeile:
  <a href href="mailto:webmaster@meinserver.de?subject=MeineMeinung zu Ihrem Web-Angebot">Kritik & Anregungen</a>
  Doch damit nicht genug. Auch der Inhalt der Mail lässt sich gezielt vorgeben. Soll die E-Mail gleich um die Anrede erweitert werden, greifen Sie auf die Variable ?body zurück. Ein wichtiger Hinweis: Die einzelnen Variablen lassen sich jederzeit mithilfe des logischen Operators & verknüpfen. In Beispiel sieht der HTML-Code folgendermaßen aus:
  <a href href="mailto:webmaster@meinserver.de?subject=MeineMeinung zu Ihrem Web-Angebot ?body=Guten Tag Herr Webmaster, %0Aich habe folgendes Problem:">Kritik & Anregungen</a>
  %0A erzwingt dabei einen Zeilenumbruch. Als dritte sinnvolle Erweiterung bietet es sich an, Kopien der Mails an einen oder mehrere Accounts zu versenden. Kopien einer Nachricht verschicken Sie per cc (Carbon Copy) oder bcc (Blind Carbon Copy). Erweitern Sie also den Quelltext um die Variablen ?cc und ?bcc. Die einzelnen Empfängeradressen trennen Sie, wie bei vielen Mail-Clients üblich, per Semikolon:
  <a href href="mailto:webmaster@meinserver.de?subject=MeineMeinung zu Ihrem Web-Angebot ?body=Guten Tag Herr Webmaster, %0Aich habe folgendes Pro Problem:&cc=email1@meinserver.de;email2@meinserver.de">bcc=email3@meinserver.de">Kritik & Anregungen</a>
  
  

• Werkzeuge

  Werkzeuge
  So programmieren Sie je ein HTML-Werkzeug für DOS, Windows, Linux und Unix, um verschiedene Zeichensätze zu konvertieren.
  Möchten Sie manchmal HTML-Dokumente im ASCII-Format weiterverarbeiten, ohne auf teure Werkzeuge für die Web-Seitengestaltung zurückgreifen zu müssen? h2a.c (Listing in Databox 4/98) konvertiert HTML-Dokumente ins ASCII-Format, wobei sämtliche HTML-Tags ausgefiltert werden. Zunehmend tauchen aber auch deutschsprachige Web-Seiten im Internet auf, und hier genügt dies nicht mehr.
  Bei deutschsprachigen Texten kommen Umlaute und ß vor, und dann wäre eine umfangreiche Nachbearbeitung in einem ASCII-Editor nötig. Auch dies erledigt h2a.c automatisch. Das Programm erkennt Umlaut- und Sonderzeichendarstellung in sogenannten Entities wie ä = &auml; oder im ISO-8879-Code wie ä = &#228;. Diese Zeichen wandelt das Programm entweder in den erweiterten IBM-Zeichensatz (MS-DOS/ Deutsch), in ANSI-Format (Windows) oder in 7-Bit-ASCII um (ältere Unix-Versionen).
  Die gewünschte Einstellung legen Sie vor der Kompilierung des Quellcodes mit der ersten Präprozessordirektive #define BIT7 fest. Die Voreinstellung ist der kleinste gemeinsame Nenner, der 7-Bit-ASCII-Code. Sie stellt Umlaute wie ä als ae oder ß als ss dar.
  Liegt im HTML-Dokument ein Fehler vor (meist ein fehlendes Semikolon am Entity-Ende), so unterbricht h2a.c den Konvertierungsvorgang und gibt eine entsprechende Fehlermeldung aus. Sie sollten dann nachsehen, wo die bereits angelegte Textdatei abbricht und dann an entsprechender Stelle das HTML-Dokument berichtigen. Danach starten Sie h2a.c erneut. Während des Konvertierungsvorgangs wird der eingelesene Quelltext ohne Sonderzeichen auf dem Bildschirm ausgegeben. Sie rufen das Programm mit folgender Syntax auf:
  h2a [Quelldatei] [Zieldatei]
  Die Quelldatei erwartet die Erweiterung htm, die Sie nicht mehr mit angeben dürfen, eine Zieldateiangabe ist optional. Geben Sie keine Zieldatei an, so erhält diese den gleichen Namen wie die Quelldatei mit der Erweiterung .txt.
  Ohne Argumente aufgerufen, gibt h2a.c einen kurzen Hilfetext mit der richtigen Aufrufsyntax aus.
  Vom IBM-Code ins HTML-Format
  a2hibm.c (Listing in Databox 4/98) konvertiert Texte aus dem erweiterten IBM-Code für den deutschen Zeichensatz ins HTML-Format. Dies mag einem kundigen Web-Autor oder HTML-Programmierer zunächst seltsam vorkommen, denn kein Programm kann die vielfältigen Formatierungen, die HTML bietet, aus einem ASCII-Text ohne Tags gewinnen. Zwar erzeugt a2hibm.c kein ausgefeiltes HTML-Dokument, doch zunächst einen gültigen HTML-Dokumentenkopf und zuletzt ein Ende. Weiterhin macht es sich das <PRE>... </PRE>-Tag zunutze, das ASCII-Text in seiner vorformatierten Form übernimmt. Das heißt, mehrere Leerzeichen werden nicht (HTML-üblich) zu einem einzigen zusammengezogen, und Zeilenumbrüche werden direkt übernommem. Damit behält das Dokument im Web-Browser sein ehemaliges Aussehen.
  Zudem werden aber Umlaute und die wichtigsten Sonderzeichen, die bei einer fremdsprachigen Umgebungseinstellung falsch dargestellt würden, von a2hibm.c durch Entities ersetzt und erscheinen damit überall in gewohnter Form. Eine umfangreiche und arbeitsintensive Umarbeitung alter MS-DOS-Textdokumente entfällt damit, wenn Sie bereit sind, auf spezielle Schriftformatierungen zu verzichten. Allerdings können Sie dann nachträglich in einem Editor entsprechende Tags ebenso hinzufügen wie Links, die Sie einbauen möchten.
  Ein besonderes Feature von a2hibm.c ist noch erwähnenswert. In vielen alten MS-DOS-Textdokumenten sind Grafikzeichen aus dem erweiterten IBM-Code (128 bis 255) enthalten, mit denen Sie Kästen mit einfachem oder doppeltem Rahmen oder Blockdiagramme realisieren. Diese ersetzt a2hibm.c ebenfalls durch Zeichen aus dem 7-Bit-ASCII-Zeichensatz (0 bis 127).
  Damit stellt auch Ihr HTML-Dokument diese einfachen Grafiken direkt dar. Sie müssen also nichts von Hand nachbearbeiten. Mit diesem Werkzeug können Sie viele alte MS-DOS- und Linux-Dokumente in kürzester Zeit zu einem umfangreichen Hypertext-Informationssystem zusammenfassen.
  a2hibm rufen Sie mit folgender Syntax auf:
  a2hibm [Quelldatei.EXT]
  A[Zieldatei]
  Die Quelldatei geben Sie mit Erweiterung ein, da Sie nicht davon ausgehen können, daß alle Textdateien die Erweiterung .txt besitzen. Die Erweiterung der Zieldatei setzt das Programm automatisch auf .htm.
  Vom ANSI-Code ins HTML-Format
  a2h.c (Listing in Databox 4/98) arbeitet genau wie a2hibm.c, nur daß es ANSI-Zeichensatz (Windows) ins HTML-Format umwandelt.
  Alle Programme, h2a.c, a2hibm.c und a2h.c, überprüfen auf erfolgreiches Schreiben in die Zieldatei. Dafür verwenden sie eine spezielle Test-Variable t, die den Rückgabewert der fgetc- und fgets-Funktionen auswertet. Nach dem Schließen der Dateien und vor dem Beenden des Programms zeigt eine Fehlerstatistik, wie viele Schreiboperationen vielleicht nicht richtig waren.
  Die drei Programme orientieren sich streng am ANSI-89-Standard der Programmiersprache C. So können Sie sie mit dem GNU-C/C++-Compiler auch in Linux- oder andere Unix-Systeme übersetzen.
  Wilfried Franz/et
  
  

• Zeilenumbruch verhindern

  Zeilenumbruch verhindern
  Sie möchten selbst bestimmen, wie die Zeilen Ihres Textes umlaufen.
  Browser bauen Webseiten je nach Fensterbreite unterschiedlich auf. Dabei besorgen sie den Zeilenumbruch in Fließtexten selbstständig. Wenn Sie das nicht wünschen, umschließen Sie den Text mit dem Tag <nobr>. Dann erzeugt der Browser Zeilenwechsel nur da, wo Sie es explizit angeben. Ist der Text länger als die Fensterbreite, wird er nicht umbrochen, sondern der Browser zeigt eine Scrollleiste.
  
  

• Sonderzeichen maskieren

  Sonderzeichen maskieren
  Beim Versuch, eine mathematische Arbeit ins Netz zu stellen, fällt auf, dass der Browser keine Sonderzeichen darstellt.
  Auch wenn die HTML-Formatierungsoptionen nicht an die Features einer Textverarbeitung herankommen, reicht der Befehlssatz dennoch aus, um aufwändige Dokumente wie mathematische Abhandlungen oder fremdsprachige Texte auf die Homepage zu bringen. Hierbei sollten Sie allerdings daran denken, dass die verwendeten Sonderzeichen maskiert werden müssen. Nur dann ist sichergestellt, dass Ihre Seite in den Browsern aller Besucher korrekt dargestellt wird. In der Tabelle rechts auf dieser Seite stellen wir Ihnen die am häufigsten verwendeten Sonderzeichen und deren HTML-konformen "Übersetzungen" vor.
  
  

• Image Maps zweckentfremdet!

  Image Maps zweckentfremdet!
  Dass eine seit den Anfängen des Webs bekannte HTMLFunktion durch das Weglassen von Informationen in neuem Glanz erstrahlen kann, zeigen Image Maps.
  Image Maps dienen in erster Linie dazu, weiterführende Links in einem Bild unterzubringen und so der Webseite mit geringem Aufwand einen multimedialen Touch zu verleihen. Diese verweissensitiven Grafiken lassen sich auch dazu verwenden, um Bilder exakt zu beschreiben. Der Trick: Sie löschen die Angabe href und erweitern den jeweiligen area-Bereich um ein title-Tag, in dem der Beschreibungstext steht. Auf diese Weise lassen sich Gruppenfotos beschreiben, da der Infotext in einer Pop-up-Box angezeigt wird. Zunächst müssen Sie mit einem Shareware-Programm wie CoffeeCup Image Mapper++ 3.0 (www.coffeecup.com) oder Map Edit 2.64 (www.boutell.com/ mapedit/) die einzelnen Bereiche der Grafik definieren. Anschließend öffnen Sie die entsprechende HTML-Datei und werfen einen Blick auf den Code im Bereich <map>.
  <map name="4marx">
  <area shape=rect coords=
  "37,113,274,482" href="">
  <area shape=rect coords=
  "282,118,484,483" href="">
  <area shape=rect coords=
  "493,62,726,481" href="">
  <area shape=rect coords=
  "735,82,971,481" href="">
  </map>
  Die Textinformationen werden nun durch den Befehl title definiert, die Länge des Infotextes ist nicht begrenzt:
  <map name="4marx">
  <area shape=rect coords=
  "37,113,274,482" title="Das ist
  Groucho Marx, der Ideengeber der
  legendären Marx Brothers" >
  <area shape=rect coords=
  "282,118,484,483" title="Chico
  Marx mimte in nahezu jedem Film
  den Hinterwäldler">
  <area shape=rect coords=
  "493,62,726,481" title="Auch wenn
  er nie zu Wort kam - Harpo Marx
  war weder taub noch stumm">
  <area shape=rect coords=
  "735,82,971,481" title="Zeppo
  Marx spielte immer nur die Rolle
  des Schönlings">
  </map>
  
  

• Grafik-SmartTags im Internet Explorer 6 deaktivieren

  Grafik-SmartTags im Internet Explorer 6 deaktivieren
  Sobald der Besucher mit dem IE6 den Mauszeiger über eine Grafik bewegt, taucht ein buntes Kontextmenü auf, das dem Surfer Befehle wie Drucken und Speichern bereitstellt. Kann man dies deaktivieren?
  Auch wenn die mit dem Internet Explorer 6 im Web eingeführten Smart-Tags recht hilfreich sind, wirken sich die permanenten Einblendungen negativ auf das Erscheinungsbild grafisch anspruchsvoller Webseiten aus. Nur gut, dass man dieses Feature mit einer einzigen Codezeile aushebeln kann. Erweitern Sie einfach den <head>-Bereich Ihrer Seite um die Zeile
  <>META HTTP-EQUIV="imagetoolbar"
  CONTENT="no">
  schon hat der Spuk ein Ende und Ihre in mühsamer Kleinarbeit programmierte Homepage wird nicht mehr durch Kontextmenüs verunstaltet. Möchten Sie hingegen nur bestimmte Grafiken vor SmartTags schützen, müssen Sie jeden einzelnen Bildverweis mit der Option GALLERYIMG="no" explizit auszeichnen. Bei einer Grafik namens bild.jpg sieht die entsprechende Zeile so aus:
  <>img src="bild.jpg"
  GALLERYIMG="no">
  
  

• Längst vergessene Frame-Attribute

  Längst vergessene Frame-Attribute
  Auch wenn es heutzutage jede Menge anderer Webtechniken gibt, stellen Frames immer noch eines der wichtigsten Stilelemente dar. Aber kennen Sie noch die einzelnen Attribute?
  In Zeiten von Flash, CSS und DHTML sind Frames ein wenig in den Hintergrund getreten. Dabei stellt das klassische Drei-Fenster-Layout nach wie vor die erste Wahl für Webseiten dar. Doch während die grundlegende Definition eines Framesets keine Probleme bereitet, ist die Verwendung der Attribute ein wenig diffiziler. Aus diesem Grund stellen wir Ihnen in der Übersicht rechts die wichtigsten Optionen nebst möglicher Parameter und deren Auswirkungen vor.
  
  

• Schöne Aufzählungszeichen

  Schöne Aufzählungszeichen
  Die in HTML vorgegebenen Aufzählungszeichen sehen nicht schön aus. Wie definieren Sie ansprechende Bulletts selbst?
  Die übliche Aufzählung mit dem <list>-Befehl erzeugt recht hässliche Zeichen vor den einzelnen Gliederungspunkten. Sie können einerseits darauf verzichten, indem Sie mit der <ul>-Variante keine Aufzählungszeichen erzeugen. Um den Überblick zu bewahren und trotzdem ästhetisch ansprechend zu sein, können Sie aber auch eigene Zeichen definieren. Dazu lässt sich jedes beliebige Zeichen oder jede beliebige Grafik verwenden. Sie sollte aber entsprechend klein sein, um den Aufzählungscharakter nicht zu stören. Gegen bunte Kugeln oder rote Häkchen ist nichts einzuwenden. An Stelle des <list>-Befehls verwenden Sie <dl> und für die eigentliche Aufzählung <dd>. Dann lassen sich jeweils Grafik-Links integrieren:
  <dl>
  <dd><img
  src="/bilder/rotekugel.gif">
  Erstens</dd>
  <dd><img
  src="/bilder/grünekugel.gif">
  Zweitens</dd>
  <dd><img
  src="/bilder/blauekugel.gif">
  Drittens</dd>
  </dl>
  
  

• Gut aussehen im Text-Modus

  Gut aussehen im Text-Modus
  Trotz neuer Browser-Generationen und schneller Internet-Zugänge surfen immer noch viele Menschen im Text-only-Modus. Wie kann man da gut aussehen?
  Der wohl ultimative Test einer gut aufgebauten und programmierten Webseite ist der Text-only-Modus. In diesem Fall hat der Nutzer sämtliche Grafiken und Bilder abgeschaltet. Auch JavaScripts funktionieren dann meist nicht. In diesem Fall noch eine gut aussehende Website zu präsentieren, ist schwierig, aber möglich. Sie sollten dabei folgende Dinge berücksichtigen:
  Wenn Sie Bilder auf Ihren Seiten verwenden, geben Sie im IMG-Tag immer die absoluten Größen an. Jeder Browser setzt dann einen entsprechend großen, schwarz umrandeten, leeren Kasten an die entsprechende Stelle. Außerdem sollten Sie ALT-Tags verwenden, um einen Alternativ-Text anzuzeigen. Dann erfährt der Nutzer zumindest, was auf diesem Bild zu sehen wäre. Ist sein Browser grundsätzlich grafikfähig, kann er bei Interesse das Bild sogar anzeigen lassen. Imagemaps sollten Sie dagegen weitgehend vermeiden oder durch alternative Links ergänzen. Hintergrundbilder werden ebenfalls nicht angezeigt. Um das einfache Grau zu vermeiden, können Sie eine Hintergrundfarbe verwenden. Sie sollte aus der 16-Farben-Palette stammen, da der Browser sie sonst möglicherweise dithert, also ein unansehnliches Streuraster einfügt. Problematisch ist nur, dass diese 16 Farben oft sehr kräftig sind und das Lesen des Textes stören. Hier sollten Sie mit entsprechenden Kontrasten arbeiten, ohne dass dem Leser dabei die Augen schmerzen. Kommen Sie zu keinem guten Ergebnis, empfiehlt sich die Hintergrundfarbe Weiß. Bei eingeschalteter Grafik-Anzeige stört die Hintergrundfarbe das Hintergrundbild nicht.
  Überraschenderweise treten im Textonly-Modus auch bei Tabellen häufig Fehler auf, da diese nicht sauber programmiert sind. Während vor allem der Internet Explorer bei Tabellen viele Programmierfehler verzeiht, geben sich andere Browser weit weniger flexibel. Daher sollten Sie Tabellen zumindest im Netscape-Browser prüfen, der die Regeln etwas enger auslegt. Und selbst im IE können Tabellen furchtbar aussehen, wenn Bilder nicht angezeigt werden und sich dadurch die Aufteilung der Seite verschiebt.
  
  

• Hilfreiche Hinweistexte

  Hilfreiche Hinweistexte
  Alle HTML-Tags lassen sich mit Titel-Informationen versehen, die als Tooltipp angezeigt oder vorgelesen werden.
  Grafiken werden häufig mit dem Title-Tag ergänzt. Damit werden zusätzliche Informationen beim Drüberfahren mit der Maus als Tooltip angezeigt. Doch auch Links, Tabellen oder Formulare lassen sich damit auszeichnen. Diese Hilfstexte erleichtern die Übersicht wesentlich. Außerdem werden diese Texte berücksichtigt, wenn sich Blinde oder Sehbehinderte eine Seite über die Sprachausgabe eines Browsers vorlesen lassen. Beispiele:
  <body>
  Weitere Informationen finden Sie
  auf unseren <a
  href="http://www.pc-magazin.de"
  title="Link auf die Seiten des
  PC-Magazins">Internet-Seiten</a>.
  <p>
  <table width="90%" border="1">
  <tr title="Tabelle mit Verlagsinformationen">
  <td width="40%">WEKA-Verlag</td>
  <td width="60%">PC-Magazin</td>
  </tr>
  </table>
  <form name="Formular1"
  title="Formular zur Auswahl der
  Informationen">
  <select name="roll" size="3">
  <option>Bilder
  <option>Downloads
  <option>Freunde
  </select>
  </form>
  </body>
  
  

• Umleitung per Frameset

  Umleitung per Frameset
  Wie lässt sich erreichen, dass nach der Umleitung auf einen neuen Server die URL des alten in der Adresszeile erscheint?
  Bei einem Server-Umzug ändert sich die Adresse zum Beispiel, wenn Sie von einem kostengünstigen Angebot mit wenig Webspace zu einem kommerziellen Provider wechseln. Sie können zwar eine automatische Weiterleitung einrichten, doch dann erscheint in der Adresszeile die neue, unter Umständen recht lange URL. Sie können mit einem kleinen Trick die bisherige URL in der Adresszeile anzeigen lassen. Dazu erzeugen Sie ein Frameset aus zwei Spalten oder Reihen, bei dem Sie dem ersten Frame die Breite bzw. Höhe von einem Pixel geben. Dem zweiten überlassen Sie den Rest des Bildschirms ("*"). Weisen Sie beiden Frames Nullwerte für Framespacing und Frameborder zu, und verhindern Sie im ersten Frame Resize und Scrolling. Dieser erste Frame verweist auf eine leere HTML-Datei, der andere auf die aktuelle Internet-Seite. Wegen des Framesets bleibt die Ursprungsadresse in der Adresszeile stehen. Dieser Effekt wird auch genutzt, wenn Seiten eines Angebots auf verschiedenen Servern ausgelagert sind, die Adressen außerhalb des Hauptservers aber nicht gebookmarkt werden sollen.
  
  

• Bookmark-Link

  Bookmark-Link
  Sie möchten die Wahrscheinlichkeit erhöhen, dass ein Besucher Ihre Seiten erneut anklickt? Bieten Sie ihm einen Link, mit dem er per Mausklick Ihre Site in seine Bookmarks aufnehmen kann.
  Kennen Sie die Situation? Man surft im Internet, trifft zufällig auf eine sehr interessante Seite und vergisst, die URL zu speichern. Viele Internet-Seiten bieten einen Link, mit dessen Hilfe die URL per Mausklick in den Bookmarks des Besuchers landet. Dabei können Sie festlegen, mit welchem Info-Text der Eintrag in der Favoriten-Liste gespeichert wird:
  <a href="javascript:window.external.AddFavorite('http://www.meineseite.de','Veronas Homepage macht das Leben lustiger')">Diese Seite zu den Favoritenhinzufügen</a>
  
  

• Cache blockieren

  Cache blockieren
  So erreichen Sie, dass die Besucher immer die aktuelle Version einer Website sehen und sich deren Computer die Seite nicht aus dem Browser-Cache holt.
  Das Erzwingen der Aktualisierung ist sinnvoll, wenn die entsprechende Internet-Seite häufig aktualisiert wird. In diesem Fall können Sie das Verfallsdatum der Seite auf 0 setzen. Dies geschieht im <head>-Bereich mit folgendem Meta-Tag:
  <META HTTP-EQUIV="expires" CONTENT="0">
  Nun können Sie sicher sein, dass Ihre Besucher immer die neueste Version dieser Seite auf den Bildschirm bekommen.
  
  

• Mail-Betreff vorgeben

  Mail-Betreff vorgeben
  Sie haben auf verschiedenen Seiten Ihre Mail-Adresse angegeben. Wenn Sie wissen wollen, auf welche Seite sich eine Mail bezieht, können Sie die Betreffzeile vorgeben.
  In der Betreffzeile lässt sich mit einem Blick erkennen, welches Thema eine Mail behandelt. Der Empfänger kann sie vom Mail-Server direkt in einen eigenen Unterordner kopieren. Falls Sie auf mehreren Webseiten Ihre Mail-Adresse angegeben haben, können Sie den Absendern jeweils eine entsprechende Betreffzeile vorgeben. Dies funktioniert über den Subject-Befehl in der mailto-Zeile:
  <a href href="mailto:webmaster@meineseite.de?subject=MeineMeinung zur Rubrik Downloads"> Meine Meinung</a>
  Sie können auch mehrere Vorgaben kombinieren, indem Sie diese mit dem &-Zeichen verbinden. Zum Beispiel können Sie neben der Betreffzeile mehrere CC-Adressen und den Textanfang vorgeben. Der Absender kann diese Vorgaben jedoch ändern:
  <a href href="mailto:webmaster@meineseite.de?subject=MeineMeinungzur Rubrik Dow Meine">Downloads&cc=johann.meier@t-online.de">MeineMeinung an den Webmaster</a>
  
  

• Schnelle Veröffentlichung über TXT

  Schnelle Veröffentlichung über TXT
  Manchmal muss es schnell gehen, und eine Nachricht soll sofort online erscheinen. Welches ist der schnellste Weg?
  Wenn eine Seite so schnell wie möglich aktualisiert werden soll, muss jeder Programmieraufwand vermieden werden. Auch die Dateigröße spielt dann eine Rolle. Mit dem TXT-Format geht es immer noch am Schnellsten, eine Datei zu übertragen, da es sich auf die reinen Text-Informationen ohne Formatierung oder Grafiken beschränkt. Browser können TXT-Dateien zwar nicht direkt anzeigen, aber über den Umweg eines Framesets funktioniert es. Einen Frame reservieren Sie dabei für die aktuelle TXT-Datei. Sie setzen in einem zweiten Frame einen Link, mit dem Sie diese Datei im entsprechenden Frame öffnen. Wenn Sie über einen Link eine TXT-Datei öffnen, wird sie im reinen Textmodus unformatiert dargestellt. Ebenso lassen sich auch JPG- oder GIF-Bilder direkt einfügen.
  
  

• Scroll-Leisten in Tabellen

  Scroll-Leisten in Tabellen
  Scroll-Leisten in Tabellen zu erzeugen gilt selbst bei vielen Experten als unmöglich. Es funktioniert aber doch.
  Soll innerhalb einer Tabelle eine Scroll-Leiste angezeigt werden, verwenden Sie das Form-Element. Der Besucher Ihrer Seite kann das Formular aber nicht bearbeiten oder abschicken, sondern es sich nur anzeigen lassen. Dies erlaubt das Attribut readonly. Durch eine unsichtbare Tabelle (border="1") können Sie so auch sehr elegant größeren und umfangreichen Text extrem übersichtlich auf kleinem Raum gliedern. Ein vollständiges Beispiel zeigt folgendes Listing:
  <table width="50%" border="1">
  <tr>
  <td width="40%">Rechts sehen Sie
  eine Scroll-Leiste innerhalb einer
  Tabelle</td>
  <td width="60%">
  <form name="Formular1">
  <textarea cols="25" rows="4"
  name="Fenster" readonly>
  Diesen etwas längeren Text können
  Sie vollständig lesen, indem Sie
  den Scrollbalken rechts betätigen.
  </textarea> </form> </td>
  </tr> </table>
  
  

• Schriftgröße beeinflusst Reihenfolge

  Schriftgröße beeinflusst Reihenfolge
  Das Design einer Internet-Seite lenkt den ersten Blick eines Besuchers an eine bestimmte Stelle. Dabei erzielen oft die einfachsten Effekte die größte Wirkung, zum Beispiel die Schriftgröße.
  Dem Betrachter einer Seite fallen zuerst die größten Buchstaben auf. Diese Orientierungshilfe spielt daher eine wichtigere Rolle als Grafiken oder Bilder, die oft erst auf den zweiten Blick gesehen werden. Die wichtigsten Informationen sollten daher auch in der größten verwendeten Schrift stehen. So kann der Webdesigner die Aufmerksamkeit von der traditionellen Richtung von links oben nach rechts unten zuerst auf andere Stellen lenken. Selbst innerhalb eines Textes lassen sich durch unterschiedliche Schriftgrößen interessante Effekte und Betonungen erzielen. Ein Beispiel:
  <font size=1>Dies
  ist</font> <font
  size=2>e</font>
  <font size=3>i
  </font><font
  size=4>n</font>
  <font size=5>
  wichtiger </font>
  <font size=4>
  A</font> <font
  size=3>r</font>
  <font size=2>t
  </font><font
  size=1>ikel des </font> <font
  size=3>PC-Magazins</font>
  
  

• Rollen oder herunterklappen?

  Rollen oder herunterklappen?
  Um den Besuchern eine größere Auswahl an Unterpunkten zu bieten, eignen sich Roll- und Dropdown-Menüs. Sie können diese Variationen mit einem Parameter umschalten.
  Roll- und Drop-down-Menüs erfreuen sich für die Anzeige mehrerer Optionen großer Beliebtheit. Sie vereinfachen die Navigation innerhalb einer Website unter Umständen recht stark. Um Rollin Drop-down-Menüs umzuwandeln, genügt die Änderung der Größe (size) in der Auswahlzeile (select) auf den Wert 1. Größere Werte erzeugen ein Roll-Menü mit der entsprechenden Anzahl angezeigter Optionen. Sie erleichtern die Navigation innerhalb einer Website wesentlich, wenn Sie auf allen Seiten einheitlich aussehende Menüs verwenden, also entweder Drop-down- oder Roll-Menüs mit einer bestimmten Zahl angezeigter Optionen.
  <form name="form2" action="/cgibin/
  auswert.pl" method=get>
  Ein Roll-Menü sieht so aus:
  <br>
  <select name="roll" size="3">
  <option>Bilder
  <option>Downloads
  <option>Freunde
  <option>Nachrichten
  <option>Sonstiges
  </select>
  </form>
  
  

• Bilder anordnen ohne Tabelle

  Bilder anordnen ohne Tabelle
  Eine Bilderserie wird zumeist mit einer unsichtbaren Tabelle angeordnet. Es geht aber auch ohne, wenn die Bilder gleich groß sind. Kleine Vorschaubilder auf Internet-
  Seiten lassen sich auch ohne den Trick einer unsichtbaren Tabelle sauber anordnen. Dazu müssen die Bilder aber gleich groß sein, was bei Dia- oder Foto-Serien meist gegeben ist. Laden Sie die Bilder im HTML-Code nacheinander über den <img>-Tag ein. Wollen Sie mehrere Reihen anzeigen, setzen Sie ans Ende einer Zeile den <br>-Tag. Die Abstände zwischen den Bildern legen Sie mit <hspace> und <vspace> fest. Sie entsprechen der horizontalen bzw. vertikalen Distanz in Pixeln. Aber aufgepasst: Die Abstandsangabe wird bei den Bildern an allen Seiten, also zum Beispiel bei <hspace> links und rechts berücksichtigt. Versehen Sie etwa fünf Bilder mit dem <hspace>-Wert von 3, dann ist das linke Bild 3 Pixel vom linken Fensterrand entfernt. Zwischen den Bildern beträgt der Abstand dann aber jeweils zweimal 3, also 6 Pixel. Um den gleichen Abstand zu erreichen, müssen Sie jedem zweiten Bild, also dem ersten, dritten und fünften, den Wert 3 zuweisen. Das zweite und das vierte Bild erhalten den <hspace>-Wert 0.
  
  

• Spam-Bots ausgetrickst

  Spam-Bots ausgetrickst
  Roboter sind Programme, die Websites automatisch nach Informationen durchforsten.
  Das können zum einen die nützlichen Roboter der Suchmaschinen sein, zum anderen treiben sich aber auch unerwünschte Besucher auf den Websites herum. Dazu zählen etwa Roboter, die E-Mail-Adressen sammeln, um an diese dann unverlangte Werbebotschaften zu verschicken. Mit einem einfachen Trick kann man die meisten dieser Spione außer Gefecht setzen. Geben Sie alle Kontaktadressen statt in der Form
  <A HREF Mailen">HREF="mailto:heinz@mustermann.de">MailenSie uns</A>
  wie folgt an
  <A HREF="mailto:heinz&#64;mustermann.de">Mailen Sie uns</A>
  Der Roboter erkennt Mail-Adressen gewöhnlich am @-Symbolund wird diese Version deshalb einfach ignorieren. Der Browser hingegen zeigt die Seite richtig an.
  
  

• Ein Klick für zwei Frames

  Ein Klick für zwei Frames
  Wenn Sie Frames auf Ihrer Homepage benutzen, beispielsweise ein Inhaltsverzeichnis und ein Fenster, in dem der ausgewählte Inhalt angezeigt wird, stellt sich oft das Problem, dass nicht nur das Ausgabefenster einen neuen Inhalt anzeigen soll, sondern auch das Inhaltsverzeichnis selbst im anderen Fenster.
  Das gelingt mit einem einfachen Trick: Statt im alten Frameset zu bleiben, benutzen Sie den Target-Parameter "_top". Damit verlassen Sie Ihr aktuelles Frameset und schaffen ein leeres Browserfenster. Die Seite, die Sie mit dem Link anspringen, enthält ein neues Frameset, in dem Sie die beiden gewünschten Seiten aufrufen. Der Link sieht folgendermaßen aus:
  <A HREF="Frameset02.html"
  TARGET="_top">Menüpunkt XYZ</A>
  Diese Lösung bietet zudem den Vorteil, dass Sie auf Wunsch ein völlig neues Frame-Layout anlegen können.
  
  

• Bedingte Kommentare

  Bedingte Kommentare
  Ab dem Internet Explorer 5 ist es möglich, so genannte Conditional Comments zu benutzen. Diese bedingten Kommentare erlauben es, auf einfache Weise zwischen verschiedenen Browserversionen zu unterscheiden und entsprechende Inhalte bereit zu stellen.
  Diese Technik ist zwar auf den Internet Explorer begrenzt, auf Grund seiner großen Verbreitung ist dieses Feature für Entwickler jedoch interessant. Mit Hilfe der bedingten Kommentare ist es möglich, den Code innerhalb der Kommentar-Tags entweder nur einem bestimmten Browser zugänglich zu machen oder auf der anderen Seite nur alle anderen Versionen anzusprechen und den fraglichen Browser auszuschließen.
  <!--[if IE 5]>
  Sie benutzen Internet Explorer 5
  <![endif]-->
  oder
  <!--[if ! IE 5]>
  Sie benutzen
  NICHT den Internet
  Explorer 5
  <![endif]-->
  Angezeigt wird der Text im ersten Fall, wenn der Besucher den Internet Explorer 5 benutzt, im zweiten Fall wird der Text angezeigt, wenn der Besucher nicht den IE 5 benutzt. Auf die gleiche Weise lassen sich auch die Internet-Explorer-Versionen 5.5 und 6 identifizieren. Die Angabe für die Version 5.5 sollte vierstellig sein (5.5000):
  <!--[if IE 5.5000]>
  Sie benutzen Internet Explorer 5.5
  <![endif]-->
  Die bedingten Kommentare stellen ihnen fünf Operatoren zur Verfügung. Damit lassen sich dann auch komplexere Bedingungen formulieren:
  <!--[if gte IE 5]>
  Sie benutzen den Internet Explorer
  5 oder höher
  <![endif]-->
  
  

• Jetzt bekommen Sie was auf die Ohren

  Jetzt bekommen Sie was auf die Ohren
  Multimedia ist in aller Munde, doch Töne findet man immer noch auf sehr wenigen Internetseiten. Peppen Sie Ihre Page auf und bieten Ihren Besuchern etwas Besonderes.
  Bevor Sie jedoch Ihren Lieblingssound integrieren, sollten Sie unbedingt die Dateigröße überprüfen. Denken Sie stets an die Ladezeit. Je kleiner desto besser. Es gibt zwei Arten, die unterschiedlichen Formate von Sounddateien in Ihre Webseite einzubinden: Haben Sie einen Hyperlink auf eine Sound-Datei gelegt, kann der Besucher Ihrer Seite selbst bestimmen, ob und wann er den Sound herunterladen und dann abspielen möchte:
  <a href="sound/ihredatei.wav">Klicken Sie hier.</a>
  Den Ton spielt der Browser entweder selbst ab, oder er greift auf ein Plugin oder ein externes Programm (z.B. WinAmp, Real Player) zurück. Eine Fehlermeldung erscheint, wenn Browser bzw. Plugin den Dateityp des Sounds nicht unterstützen. Sie können die Audio-Datei auch direkt in die Seite einbauen. Dann wird der Sound abgespielt, sobald die Webseite geladen ist. Voraussetzung hierfür ist ebenfalls ein entsprechendes Plugin beim Benutzer. Sie haben eine größere Kontrolle, wenn Sie den Sound auf diese Weise in Ihre Seite integrieren. So können Sie den Anfang, das Ende und die Lautstärke kontrollieren.
  <bgsound src="sound/ihredatei.wav"loop="infinite" autoplay="true" volume="0">
  
  

• Farbige Trennlinien

  Farbige Trennlinien
  Eine sinnvolle Eigenschaft der Trennlinien ist, dass Sie sie über Parameter formatieren können. Durch folgenden einfachen HTML-Code erzeugen sie eine rote Linie der Stärke 3, die sich über drei Viertel des Bildschirms erstreckt.
  <HR WIDTH="75%" COLOR="#FF0000" SIZE="3">
  
  

• Regeln für die Keyword-Auswahl

  Regeln für die Keyword-Auswahl
  Mit den richtigen Keywords werden Sie besser in Suchmaschinen gelistet.
  Bauen Sie Keywords in den Head Ihrer Seite ein. Versetzen Sie sich in die Lage Ihrer Zielgruppe und überlegen Sie, welche Schlüsselbegriffe diese in die Suchmaschine eingeben würde. Schrecken Sie nicht zurück, auch häufig benutzte Begriffe auf Ihrer Seite zu hinterlegen. Wenn Sie glauben, dass viele Anbieter die gleichen Begriffe einsetzen werden, können Sie auch Kombinationen verwenden. Benutzen Sie hier nicht mehr als drei Wörter. Sie erhöhen damit die Chance, in den Suchmaschinen besser gefunden zu werden. Ein Beispiel:
  <meta name="keywords" content="Wein
  kaufen, Rebenkunde, Arbeiten im
  Weinberg, Weingut besuchen, Urlaub,
  Weinstraße">
  
  

• Bild vorausladen

  Bild vorausladen
  Das Herunterladen großer Bilder dauert oft sehr lange. Diese Ladezeit können Sie zwar nicht verkürzen, doch können Sie Ihren Besuchern die Wartezeit überbrücken.
  Hierfür definieren Sie ein Bild mit einer geringeren Auflösung als vorläufigen Platzhalter. Es wird dann so lange angezeigt, bis das "große" Bild fertig heruntergeladen ist. Schreiben Sie hierfür folgenden Quelltext in Ihr HTML-Dokument:
  <img src="ihrimage.gif" width="300"
  height="450" lowsrc="platzhalter.gif">
  
  

• Seitenübergänge mit Pfiff

  Seitenübergänge mit Pfiff
  Den Wechsel zwischen zwei Webseiten inszeniert der Internet Explorer mit beeindruckenden Effekten.
  Wenn Sie auf einen Link klicken, zeigt der Browser normalerweise einfach die neue Webseite an. Der Internet Explorer ab Version 5 kann aber auch anders. Wie bei einem Präsentationsprogramm blendet er zwischen den Webseiten um, etwa mit einem Vorhangeffekt. Weil dies nicht dem offiziellen HTML-Standard entspricht, ist das Kommando als Meta-Information verpackt. Sie fügen im Kopfbereich der HTML-Datei eine Zeile ein:
  
  <head>
  <meta http-equiv="page-enter"
  content="RevealTrans(Duration=4,Transi
  tion=12)">
  </head>
  
  Der Parameter Duration gibt die Dauer des Effekts in Sekunden an. Bei Transition stellen Sie ein, welchen Effekt Sie haben wollen. Es sind 24 Effekte erlaubt (Transition=0 bis Transition= 23). Probieren Sie einfach aus, bis Sie den gewünschten Effekt entdeckt haben. Effekt 23 ist übrigens eine Zufallfunktion, die einen beliebigen der 23 anderen Effekte aufruft. Wenn Sie den Effekt nicht beim Betreten, sondern beim Verlassen einer Webseite anwenden wollen, tragen Sie http-equiv="page-exit" ein. Andere Browser ignorieren die Meta-Angabe einfach, eine Fehlermeldung müssen Sie nirgends befürchten.
  
  

• Kopierschutz mit Blind-Gif

  Kopierschutz mit Blind-Gif
  Schützen Sie die Bilder auf Ihrer Homepage vor Langfingern, die ungefragt die Dateien herunterladen und weiterverwenden.
  Es ist im Internet gängige Praxis: Bilder "ausleihen", ohne zu fragen. Das lässt sich zwar nicht verhindern, aber ein Trick macht es den Langfingern zumindest schwerer. Dazu brauchen Sie kein JavaScript, und es funktioniert mit praktisch jedem Browser. Die Idee: Für jedes Bild legen Sie eine Tabelle mit einer Zelle an. Das Bild fügen Sie als Hintergrundbild für diese Tabelle ein. In der Tabellenzelle zeigen Sie ein Gif-Bild mit 1x1 Pixel Größe an, das transparent ist. Über die Attribute width und height vergrößern Sie das Gif-Bild auf die Ausmaße des Hintergrundbildes.
  
  <table border="0" cellspacing="0"
  cellpadding="0" background="bild.jpg">
  <tr>
  <td><img src="pixel.gif" width="589"
  height="426" ></td>
  </tr>
  </table>
  
  Achten Sie darauf, zwischen <td>, <img> und </td> keine Leerzeichen einzufügen. In der fertigen Webseite sieht das so aus, als wäre einfach ein Bild vorhanden. Ruft ein Surfer das Kontextmenü des Bildes auf, kann er tatsächlich ein Bild speichern und zwar das wertlose Pixel-Bild. Mit dem Internet Explorer lässt sich der Schutz nicht aushebeln. Aber gegen Mozilla, einen WebRipper, der sämtliche Dateien der Webseite auf die lokale Festplatte holt, hilft es auch nicht.
  
  

• Bildunterschrift sauber platzieren

  Bildunterschrift sauber platzieren
  Bilder im Fließtext haben ein Problem: Wohin mit der Beschriftung? Mit einer blinden Tabelle lösen Sie die Aufgabe.
  In HTML gibt es einige Attribute zum <img>-Tag, mit denen Sie eine Bildunterschrift platzieren können. In der Praxis machen diese Attribute jedoch erhebliche Probleme, da die Browser sie nur unvollständig unterstützen. Viel effektiver ist der Einsatz einer blinden Tabelle mit zwei Zellen eine für das Bild und eine für die Beschriftung. Für die Ausrichtung am Rand sorgt das Attribut align, das auch beim <img>-Tag gültig ist. Damit der Untertitel nicht über das Bild hinausragt, setzen Sie die Breite des Bildes in Pixel als Tabellenbreite ein. Das einleitende Tabellentag sieht dann etwa so aus:
  
  <table border=0 align=right width=320
  cellspacing=0 cellpadding=1>
  
  Mit diesem Ungetüm schalten Sie die Darstellung der Tabellenlinien ab, platzieren die Tabelle am rechten Rand, und setzen rundum einen Abstand von 8 Bildpunkten zum umgebenden Text. Die Breite des Bildes beträgt wie die der Tabelle im Beispiel 320 Bildpunkte den Wert müssen Sie natürlich anpassen. cellspacing steuert die Dicke der Rahmenlinien innerhalb der Tabelle, cellpadding den Abstand zwischen Zellinhalt und Rahmenlinien. Wollen Sie ein luftigeres Layout, so erhöhen Sie den Wert von cellspacing.
  
  

• Formulare gestalten mit Bereichen

  Formulare gestalten mit Bereichen
  Zusammengehörige Felder in einem Formular fassen Sie mit dem Tag <fieldset> zusammen. Moderne Browser zeichnen einen Rahmen um diese Elemente.
  Größere Formulare werden schnell unübersichtlich. Gruppieren Sie zusammengehörige Felder wie beispielsweise Adressangaben mit Bereichen und Überschriften. Moderne Browser umgeben den Bereich mit einem Rahmen, die Platzierung der Überschrift übernimmt ebenfalls der Browser. Schematisch sieht das so aus:
  
  <form>
  <fieldset>
  <legend align="left">Ihre
  Adresse</legend>
  Vorname: <input type="text" size="45"
  name="vorname">
  ... </fieldset> </form>
  
  Die Definition eines Bereichs beginnt im Formularbereich mit <fieldset> (field = Bereich, set = justieren). Alle Kontrollelemente und sonstigen HTML-Tags wie Tabellen oder Bilder bis zum abschließenden </fieldset> gehören zu diesem Bereich. Innerhalb des <fieldset>-Tags geben Sie optional mit <legend>...</legend> eine Überschrift an. Das Tag muss unmittelbar auf <fieldset> folgen. Der Text zwischen Anfang- und Endtag dient als Überschrift, Sie können ihn mit HTMLTags nach Wunsch formatieren. Die aktuellen Browser unterbrechen für die Überschrift die Rahmenlinie. Über das Attribut align richten Sie die Bereichsüberschrift aus, es sind folgende Werte erlaubt: top (links oben), bottom (links unten), left (links), right (rechts). Allerdings unterstützen nicht alle Browser alle Werte. Wenn Sie blinde Tabellen und <fieldset>-Bereiche gleichzeitig einsetzen, sollten Sie Vorsicht walten lassen. Achten Sie beim Verschachteln darauf, dass eine Tabelle immer komplett zwischen <fieldset> und </fieldset> eingeschlossen ist. Es ist nicht möglich, nur Teile einer Tabelle als Bereich zu markieren. Der Internet Explorer zieht den Rahmen dann automatisch um die ganze Tabelle.
  
  

• AutoVervollständigen ausschalten

  AutoVervollständigen ausschalten
  In Formularen unterstützt der Internet Explorer ab Version 5.0 das automatische Vervollständigen. Mit einem Attribut schalten Sie die Funktion für einzelne Felder aus.
  Beim AutoVervollständigen speichert der Internet Explorer die Eingaben in häufig benutzten Eingabefeldern für Namen, Adresse etc. Füllt der Surfer ein anderes Formular mit identischen Eingabefeldern aus, so schlägt der Browser nach Eingabe der ersten Buchstaben die gespeicherten Werte als Auswahlliste vor. Das Attribut autocomplete für das <form>-Tag steuert für ein Formular, ob das AutoVervollständigen aktiviert ist. Erlaubt sind die Attributwerte off (Funktion aus) und on (Funktion eingeschaltet).
  
  <form action="..." method="post"
  autocomplete="off">
  ... Kontrollelemente ... </form>
  
  Ist die Funktion ausgeschaltet, so macht der Explorer für sämtliche Kontrollelemente keine Vorschläge und speichert die Benutzerdaten nicht. Das Attribut autocomplete ist auch bei einzeiligen Texteingabefeldern und Passworteingabefeldern erlaubt. So können Sie gezielt einzelne Eingabefelder sperren oder freigeben.
  
  

• Textänderungen markieren

  Textänderungen markieren
  Markieren Sie Änderungen in Webseiten, um später die Originalfassung rekonstruieren zu können.
  HTML sieht Tags vor, mit denen Sie gelöschte oder neu eingefügte Stellen im Text markieren. Mit diesen Text geben Sie das Datum der Änderung und einen Verweis auf zusätzliche Details an. Die aktuellen Browser sind sich bei der Darstellung ausnahmsweise einig: Gelöschter Text erscheint durchgestrichen, eingefügter unterstrichen. Das Tag <ins> ist fürs Einfügen zuständig, <del> fürs Löschen. Ein gelöschtes Wort markieren Sie so:
  <del cite="http://www.domain.de/aende rung/kommentar.htm"
  datetime="2003-07-11T13:15:30Z"
  title="Gel&ouml;scht am 11.7.2003">
  Sebastian </del>
  Über das Attribut cite geben Sie den URI eines Dokuments oder eine Nachricht an. Der Attributwert soll Informationen liefern, die den Grund für die Änderung erklären. Momentan wertet nur Netscape/Mozilla dieses Attribut aus, allerdings höchst eigenwillig: Der Surfer muss die markierte Stelle mit der rechten Maustaste anklicken und im Kontextmenü Eigenschaften wählen. Dann zeigt der Browser ein Dialogfeld an, in dem der Attributwert von cite aufgeführt ist. Das Datum (und die Uhrzeit) geben Sie mit dem Attribut datetime an. Dabei kommt das in HTML übliche Format für Datums- und Zeitangaben zum Einsatz. Damit auch die Benutzer aktueller Browser Details zur Markierung erfahren, nutzt das Beispiel das Universalattribut title. Die Browser stellen den Attributwert als ToolTip-Fenster dar, wenn der Mauszeiger über dem markierten Objekt verweilt. So können die Surfer die Änderungshinweise leicht nachvollziehen. Es lohnt also, sowohl cite als auch title zu nutzen.
  
  

• Schaltflächen mit <button>-Tag

  Schaltflächen mit <button>-Tag
  HTML 4.0 hat für die Gestaltung von Schaltflächen in Formularen neue Möglichkeiten geschaffen.
  Die in einem HTML-Formular verwendeten Schaltflächen werden meist noch durch ein entsprechendes type-Attribut des input-Tags erzeugt, typischerweise etwa <input type="button"> oder ... type="submit">. Das <button>-Tag hat den Vorteil, dass zwischen dem Start-Tag und dem Ende-Tag Informationen eingefügt werden können, wie die Schaltfläche auf der Seite angeboten wird. Dabei können Texte und Abbildungen beliebig gemischt werden. Nur Imagemaps dürfen nicht eingefügt werden. Die Abbildung zeigt zwei Schaltflächen, die vor der Beschriftung noch ein entsprechendes Zeichen anzeigen. Das Listing bildet einen Auszug aus dem entsprechenden Quellcode:
  <title>Buttons</title>
  <style type="text/css"
  media="screen"><!- -
  #ok { font-weight: bold; textalign:
  left; padding: 1ex; width:
  17em; height: 2ex }
  #no { font-weight: bold; textalign:
  left; padding: 1ex; width:
  17em; height: 2ex }
  - -></style>
  ...
  <form
  action="http://...bestaetigung.htm"
  method="get" name="papierauswahl">
  <p>Bitte bestätigen Sie die
  angezeigten Bedingungen:</p>
  <button name="quittieren"
  value="Einverstanden">
  <div id="ok"><img src="ok.gif"
  align="absmiddle">
  Ich bin einverstanden</div>
  </button><br>
  <button name="ablehnen" value="Nicht
  einverstanden">
  <div id="no"><img src="no.gif"
  align="absmiddle">
  Ich bin nicht einverstanden</div>
  </button>
  ...
  Für jede Schaltfläche wird ein <div>-Tag verwendet, das mit Hilfe von zwei ID-Styles individuell formatiert wird.
  
  

• Freigeben oder fixieren

  Freigeben oder fixieren
  Wenn größere Texte in kleiner Schrift verwendet werden, sollte den Besuchern die Anpassung der Schriftgröße durch die Browsereinstellung offengehalten werden.
  Um das Design der Seite zu fixieren, benutzen Designer häufig Stylesheets, die die Schriftgröße durch absolute Punkt-Werte festlegen. Die Folge ist, dass die im Internet Explorer angebotenen Ansicht-Optionen zur Vergrößerung des Schriftgrads nicht zum Zuge kommen, während Text-Zoom bei Mozilla funktioniert. Für die Lesebrillenfraktion, die mit Weitsichtigkeit kämpft, ist dieses ästhetische Diktat oft quälend. Sie sollten deshalb den Besuchern die Vergrößerung der Schriftanzeige auch auf dem IE wenigstens offenhalten. Dazu brauchen Sie bei der Festlegung der Schriftgröße nur mit relativen Größenangaben zu arbeiten, am besten mit der Maßeinheit em, die der Größe der aktuellen Schrift entspricht, aber skalierbar ist, wenn eine andere Ansicht gewählt wird. Die Abbildung zeigt die Auswirkung. Der Quellcode-Auszug zeigt die unterschiedlichen Größenangaben für beide Abschnitte:
  <style type="text/css" media="screen">
  <!--.fix { font-size: 10pt }
  .variabel { font-size: 1em }
  --></style>
  ...
  <p class="fix">Schriftgr&ouml;&szlig;e
  mit einen absoluten Punkt-Wert </p>
  <p class="variabel">
  Schriftgr&ouml;&szlig;e durch einen
  relativen Wert angegeben.</p>
  
  

• Speicherschonende Hintergrundbilder

  Speicherschonende Hintergrundbilder
  Webbrowser kacheln das Browserfenster automatisch mit Hindergrundbildern aus, wenn in dem <body>-Tag das Attribut background verwendet wird, um den URL des Bildes anzugeben. Damit können Sie ziemlich schreckliche Effekte erzielen, wenn größere Bilder den Hintergrund unruhig und den darauf liegenden Text schwer lesbar machen. Dagegen lassen sich mit sehr kleinen Bildern durchaus ansprechende Lösungen erzeugen, falls beachtet wird, dass die Kachelränder nicht zu hart hervorstechen. Abhilfe bieten hier Weichzeichnerfunktionen, wie sie etwa ImageReady von Adobe zur Verfügung stellt. Interessante Effekte können Sie auch mit Bitmaps erreichen, die nur ein Bit breit oder lang sind und in der anderen Richtung einen Farbverlauf enthalten, der mindestens das ganze Browserfenster abdeckt. Wird das Attribut background verwendet, sollte zusätzlich auch ein passender Wert für bgcolor angegeben werden.
  <body background="struktur.gif" bgcolor="#f0e68c">
  Schaltet ein Besucher die Anzeige von Bildern ab, wird ihm wenigstens diese Farbe angezeigt. Soll nur der linke Rand ausgekachelt werden, kann mit dem style-Attribut gearbeitet werden.
  <body style="backgroundimage:
  url(struktur.gif); backgroundrepeat:
  repeat-y">
  erzeugt eine Bahn von Kacheln am linken Rand des Fensters.
  
  

• Flexible Seiten mit relativen Größen

  Flexible Seiten mit relativen Größen
  Eine geschickte Kombination von relativen und absoluten Maßen erlaubt einen Seitenaufbau, der sich dem Browserfenster anpasst.
  Sie suchen eine einfache Lösung für ein Seitendesign, in dem der Seitenkopf und eine Spalte für Navigationselemente fixiert sind, während sich der Bereich der Inhalte an die Fenstergröße anpasst? Ein Weg ist die Kombination von zwei zweispaltigen Tabellen. In der ersten Tabelle für den Kopfbereich wird die Breite mit Prozentangaben geregelt. Für die Spalte, die das Logo aufnimmt, wird 1% angegeben, was dazu führt, dass die Spalte trotzdem an die tatsächliche Bildgröße angepasst wird. In der zweiten Spalte wird für die Navigationsleiste auf der linken Seite ein fixer Wert angegeben, die zweite Spalte verwendet dann automatisch den Rest, der von 100% bleibt, egal wie groß oder klein der Besucher das Fenster aufzieht.
  <table width="100%" border="0"
  cellspacing="0" cellpadding="0">
  <tr><td valign=bottom align=left
  width="1%"><img src="bilder/logo.gif"
  alt="logo" border="0"></td>
  <td valign=top align=right>Home</td>
  </tr></table>
  <hr><table width="100%" border="0"
  cellspacing="0" cellpadding="0">
  <tr><td valign=top align=left
  width="150">Aktuelles<br>Links
  <br>Angebote</td>
  <td valign=top align=left>
  <em>Die Qualität einer Website</em>
  hat ganz unterschiedliche
  Dimensionen...</td>
  </tr></table>
  
  

• Mehr Struktur mit Themenpfaden

  Mehr Struktur mit Themenpfaden
  Bei tief verschachtelten Websites ist es für den Besucher von großer Bedeutung, dass er jederzeit weiß, wo er sich in dem Geäst der Seiten befindet.
  Ein probates Mittel ist hier die Anzeige von übersichtlichen Themenpfaden im Kopf der Website. Ihr Einsatz setzt allerdings voraus, dass der Inhalt der Website sorgfältig von oben nach unten strukturiert wurde. Der Pfad sollte nicht nur anzeigen, wie die Abfolge von Hauptthema zu Unterthema und Unterunterthema fortschreitet, sondern auch die aktuell angewählte Ebene deutlich erkennen lassen. Der Themenpfad sollte auf jeder Seite an derselben Stelle stehen.
  
  

• Scrollbalken auf der linken Seite

  Scrollbalken auf der linken Seite
  Dass der Scrollbalken stets am rechten Seitenrand zu finden ist, gilt nicht immer. In Ländern, in denen z.B. von rechts nach links geschrieben wird, steht der Rollbalken links.
  Den Scrollbalken nach links zu verschieben, ist einfach. Der Internet Explorer ab Version 5 beherrscht diese Funktion standardmäßig. Sie schreiben lediglich den Parameter dir="rtl" in das <body>-Tag - schon ist der Balken auf der linken Seite. Allerdings stellt er dadurch auch alle anderen Elemente etwa Textblöcke spiegelverkehrt dar. Um das ursprüngliche Seitendesign beizubehalten, fassen Sie den kompletten Inhalt zusätzlich zu einem übergeordneten Blockelement zusammen:
  <body dir="rtl">
  <div dir="ltr">
  Seitenelemente
  </div>
  </body>
  
  

• Verdeckte Formulareingabe

  Verdeckte Formulareingabe
  Möchten Sie einen Bereich Ihrer Homepage durch ein Passwort schützen, sollten Sie nicht vergessen, die Eingabe zu verdecken.
  Bei der Eingabe von Benutzernamen und Passwort zeigt der Browser nur die erste Benutzereingabe im Klartext an; im Passwort-Feld sieht der Besucher hingegen nur ***. Dafür zuständig sind die beiden <input>-Parameter text und password.
  <input name="Benutzername" size="20"
  type="text">
  <input name="Passwort" size="10"
  type="password">
  
  

• Vertikale Trennlinien

  Vertikale Trennlinien
  Anstatt Seitenelemente durch CSS-Formatierungen oder JavaScript zu gliedern, können Sie auch ungewöhnliche vertikale Trennlinien einsetzen.
  Webdesigner, die bestimmte Seitenelemente durch vertikale Linien hervorheben möchten, suchen vergeblich nach einem Tag wie <vr>. Um dennoch Elemente, etwa Textabschnitte, mit senkrechten Linien abzuteilen und hervorzuheben, müssen Sie zu einem Trick greifen: Verwenden Sie farbige Tabellenzellen, den Befehl spacer und das Attribut justify. Sehr hilfreich: Die Länge der vertikalen Linien passt sich automatisch an die Höhe des Textblocks an. Der Code des auf dem Bildschirmfoto zu sehenden Textblocks sieht so aus:
  <table width="68%" cellpadding=0
  align="center" cellspacing="4"><tr>
  <td width=3 bgcolor="red">
  <spacer type="block" width=1> </td>
  <td> <p align="justify">Lauftext</p>
  </td>
  <td width=3 bgcolor="red">
  <spacer type="block" width=1></td>
  </tr> </table>
  
  

• HTML 4.0 am Ende

  HTML 4.0 am Ende
  XML (oder XHTML) ist dabei, HTML abzulösen. XHTML ist XML-gerechtes HTML, ein "Nachbau" von HTML 4.0. Sie müssen in Zukunft Ihre Webseiten nur etwas genauer und mit einer leicht veränderten Syntax schreiben (www.w3.org/Consortium/Offices/Germa ny/Misc/XML-in-10-points.html). Bei reinen XML-Daten hat ein Browser keine Anhaltspunkte für die Darstellung. Es fehlen also Maßgaben für das Ausgabemedium, wie Computermonitor, Drucker, Lautsprecher oder Fernseher. Auch fehlen Formatierungsangaben für Farben, Schriften und Größen. Mit einer Stil-Sprache werden Formatierungen für das jeweilige Ausgabemedium erzeugt - für Homepages Cascading Style Sheets (CSS).
  
  

• Auf dem Prüfstein

  Auf dem Prüfstein
  Möchten Sie wissen, ob Ihre Homepage HTML 4.01 oder sogar XHTML-tauglich ist? Sie können das professionell prüfen lassen: validator.w3.org. Geben Sie dort einfach Ihre URL ein und warten die Ergebnisse ab. Gleiches können Sie für Ihre StyleSheets vornehmen lassen: jigsaw.w3.org/css-validator/va lidator-uri.html. Gute Webeditoren besitzen ebenfalls solche Prüffunktionen (z.B. Dreamweaver).
  
  

• Anti-Spam mit ASCII

  Anti-Spam mit ASCII
  Codieren Sie Ihre E-Mail-Adresse auf Ihrer Homepage mittels dem zur verfügungstehenden ASCIIZeichensatz (American Standard Code for Information Interchange).
  Um schnell an beachtliche E-Mail-Adress-Sammlungen zu kommen, benutzen Spammer u.a. Programme, die E-Mail-Adressen auf Homepages herausfiltern können. Ausreichend ist dafür die Suche nach dem @-Zeichenund dem Punkt irgendwo dahinter. Die gesamte Buchstaben-/Zahlenkombination dazwischen und drumherum ist dann höchstwahrscheinlich eine E-Mail-Adresse und wird extrahiert. Verstecken Sie mittels ASCII nicht nur das @-Zeichenund den Punkt, sondern die komplette E-Mail-Adresse. info@pc-magazin.de hätte dem zufolge folgende Codierung:
  
  &#105;& #110; &#102; &#111; &#64; &#112;
  &#99; &#45;&#109; &#97; &#103; &#97;
  &#122; &#105;&#110; &#46; &#100; &#101;
  
  Vergessen Sie nicht, den erstellten ASCII-Code auch in Ihren <a href="mailto: "> -Tag zu kopieren. Eine ausführliche Beschreibung, jede Menge Information zum Thema Zeichen und die benötige Tabelle finden Sie unter: unicode.e-workers.de/ascii.php.
  
  

• Browser Offset ausschalten

  Browser Offset ausschalten
  Standardmäßig halten Browser leider einen uneinheitlich Abstand zwischen Browserrahmen und Webseiteninhalt. Das ist natürlich nicht immer gewünscht.
  Der Internet Explorer für Macintosh gibt 8 Pixel, für Windows sogar 15 Pixel Abstand vor. Einheitlich werden durch topmargin=0 (für Oben) und leftmargin=0 (für die linke Seite) die Inhalte auf die Koordinaten x=0 und y=0 gesetzt, von der linken oberen Ecke des Anzeigefensters des Browers gerechnet. Netscape 6 akzeptiert diese Angaben auch, dafür nicht sein älterer Bruder Netscape Navigator 4.x. Unbedenklich können Sie zusätzlich folgende Angaben machen: marginheight="0" und marginwidth="0". Allerdings handelt es sich hierbei um spezielle Netscape-4-TAGs, die kein HTML-Standard sind. Der body-TAG sieht dann so aus:
  
  <body leftmargin="0" topmargin="0"
  marginheight="0" marginwidth="0">
  
  Viel eleganter können Sie mittels CSS die Abstände zum Browserrahmen definieren. Bei externen Stylesheets reicht dazu natürlich eine einmalige Definition, die selbstverständlich alle anderen Webseiten, die das CSS benutzen, übernehmen. Das Stylesheet sieht dann so aus:
  
  body {
  margin-top: 0px;
  margin-left: 0px;
  }
  
  Netscape 4.x bedarf dann allerdings immer noch, wie oben beschrieben, einer Sonderbehandlung.
  
  

• Hyperlink-Ziel für eine Site

  Hyperlink-Ziel für eine Site
  Zahlreiche Websites basieren auf Framesets, wobei in separatem Frame das Dokument mit der Navigationsleiste geladen wird.
  Sie erleichtern sich aelbst die Programmierung, wenn Sie das Zielfenster nicht jedes Mal neu angeben müssen. In der üblichen Syntax referenzieren Sie den Link mit folgender Befehlszeile:
  
  <a href="http://www.bacchuswelt.de" target="framename">
  
  Nun müssen Sie für jeden einzelnen Hyperlink den Ziel-Frame (target="framename") nicht mehr separat schreiben. Es genügt, wenn Sie diesen target einmal festgelegt haben. Fügen Sie hierzu das base-Tag in den Kopf des Quelltextes ein: <base target="framename">. Geben Sie als target entweder den entsprechenden individuellen Frame-Namen an oder benutzen Sie ein so genanntes generisches Ziel wie _blank. Damit öffnet sich ein leeres Browserfenster oder mit _top das übergeordnete Hauptfenster, das sich über alle Frames öffnet. Das base-Tag interpretiert der Browser nun automatisch für alle Hyperlink-Tags. Soll das Zieldokument eines Hyperlink nun ausnahmsweise in einem anderen Frame geöffnet werden, legen Sie dieses wie gewohnt im Tag <a href> fest.
  
  

• E-Mail-Hyperlinks mit Pepp

  E-Mail-Hyperlinks mit Pepp
  E-Mail-Hyperlinks öffnen meist das Mailprogramm des Benutzers. So schreibt dieser schneller, ohne die Adresse des Empfängers eintragen zu müssen.
  Haben Sie auf einer Webseite eine E-MailAdresse hinterlegt, kann diese im Zusammenhang zum Inhalt stehen. Sinnvoll wäre hier, wenn neben der Empfänger-Adresse auch automatisch der gewünschte Betreff im Mailprogramm eingetragen wäre. Das gelingt mit einer einfachen HTML-Erweiterung. Ein E-MailVer weis sieht folgendermaßen aus: <a href &quo ">"mailto:mail@susanne-rupp.de">Vor der Empfänger-Adresse steht immer mailto. Sollen zwei Empfänger die E-Mail erhalten, setzen Sie die zweite Adresse hinter die erste und trennen sie per Semikolon (;): <a hr ef=& ef="mailto:mail@susanne-rupp.de; .">ethomas@pc-magazin.de">.Für einen vordefinierter Text im Betreff ergänzen Sie die EMail-Adresse mit ?subject und setzen dahinter den Text: <a href href="mailto:mail@susanne-rupp.de?subject=Artikelim PC Magazin"></a>. Nach dem Fragezeichen ? können Sie dem href-Attribut weitere Angaben zuweisen:
  cc: sichtbare Empfänger-Kopie der E-Mail,
  bcc: unsichtbare Empfänger-Kopie,
  body: vordefinierte Botschaft.
  Diese können Sie ohne die subject-Option einsetzen. Die Optionen trennen Sie durch das kaufmännische Und (&) voneinander. Damit die Browser dies umsetzen, müssen Sie dieses & entsprechend des Zeichensatzes ISO-8859-1 maskieren: &amp;. Achtung: Kodieren Sie Sonderzeichen und Zeichen in E-Mail-Verweisen außerhalb des ASCII-Zeichensatzes. Abhängig vom Browser oder E-Mail-Programm werden unter Umständen nicht alle Optionen umgesetzt. Ältere Browser können die maskierten Zeichenketten häufig nicht korrekt interpretieren.
  
  

• Hyperlink mit Kommentar

  Hyperlink mit Kommentar
  Ergänzende Erläuterungen zu Hyperlinks helfen dem Besucher wie Alt-Tag bei Bildern.
  Bei Bildern kennt sie jeder. Es gehört zum guten Programmierstil, sie auch zu nutzen: die Texte in Alt-Tags. Ursprünglich waren sie dazu gedacht, den Surfer bei abgeschalteter oder nicht vorhandener Bilddarstellung zumindest über den Inhalt des Bildes zu informieren. Doch auch Hyperlinks können Sie um eine entsprechende Zusatzinformation bereichern. Diese sieht der Besucher Ihrer Site, sobald er wie bei den Alt-Texten der Bilder einen Hyperlink mit dem Mauszeiger überfährt. Der nötige Code lautet:
  
  <a href= "http://www.meine_addresse.de" title= "Geben Sie hier den Informationstext wie im Bild unten ein">Zu meiner Homepage</a>
  
  Obgleich dieser Tipp denkbar einfach zu verwirklichen ist, nutzen bisher wenige Betreiber einer Site diesen kleinen, hilfreichen Fingerzeig.
  
  

• Gruppierte Auswahllisten

  Gruppierte Auswahllisten
  In einer Auswahlliste im Formular gruppieren Sie die Einträge mit Zwischenüberschriften.
  Lange Auswahllisten in Formularen mit vielen Einträgen sind ziemlich unübersichtlich. Denn nicht immer ist eine alphabetische Sortierung der Einträge sinnvoll. Fassen Sie Listeneinträge zu Gruppen zusammen. Dazu markieren Sie eine Gruppe von <option>-Tags mit dem TagPaar <optgroup> und </optgroup>:
  
  <form action="..." method="post">
  Ihr Bundesland:<br>
  etc.
  </optgroup>
  
  Das einleitende <optgroup> beginnt eine Gruppe, die bis </optgroup> reicht. Im einleitenden Tag legt das Attribut label den Namen für die Gruppe fest. Beachten Sie, dass <optgroup> nur innerhalb von <select> vorkommen darf. Mehrfach verschachtelte Gruppen sind nicht erlaubt. Laut HTML 4.0 soll die Darstellung im Browser wie ein typisches Menü mit Untermenüs aufgebaut sein. Klickt der Anwender einen Eintrag an, so öffnet sich ein Untermenü. Dieses Verhalten unterstützt kein aktueller Browser.
  
  

• Beschriftete Formularrahmen

  Beschriftete Formularrahmen
  In Formularen umranden Sie eine Gruppe von Elementen mit einem beschrifteten Rahmen.
  Formulare sind oft sehr unübersichtlich, besser wäre es, zusammengehörige Elemente mit einem Rahmen zu markieren. Genau das leistet das <fieldset>, das zum offiziellen HTMLStandard gehört. Ein einfaches Beispiel:
  
  <form>
  <fieldset">
  <legend>Ein Bereich</legend>
  <input type="checkbox">Rotwein<br>
  ...
  </fieldset>
  </form>
  
  Sämtliche Elemente, die in den Formularrahmen kommen sollen, gehören zwischen <fieldset> und </fieldset>. Innerhalb des </fieldset>-Tags geben Sie optional mit <legend>...</legend> eine Überschrift an. Das Tag muss unmittelbar auf <fieldset> folgen. Der Text zwischen Anfang- und Endtag dient als Überschrift, Sie können ihn mit HTML-Tags und CSS nach Wunsch formatieren.
  Achtung: Wenn Sie das Tabellenlayout mit blinden Tabellen gestalten, sollten Sie Bereiche vorsichtig einsetzen. Die Tabelle muss immer komplett innerhalb des Fieldset-Bereichs liegen. Sonst zeichnet der Internet Explorer den Rahmen um die gesamte Tabelle und nicht um den markierten Bereich.
  
  

• Tunneleffekt und Seitenaktualisierung

  Tunneleffekt und Seitenaktualisierung
  Per Meta-Tag refresh lassen Sie entweder dieselbe Seite neu laden oder leiten den Besucher auf eine weitere Webseite.
  Die erste Variante ist besonders wichtig, wenn Sie häufig die Inhalte einer Webseite aktualisieren. Dies ist beispielsweise der Fall, wenn Sie Aktienkurse veröffentlichen oder Bilder zeigen, die eine Webcam liefert. Wird dieselbe Seite neu geladen, verhindern Sie, dass der Webbrowser Ihres Besuchers unter Umständen eine veraltete Version aus dem Cache lädt. Fügen Sie folgendes Tag in den <head> Ihres Dokuments ein:
  
  <meta http-equiv="refresh" content="10">
  
  Mit der Anweisung content="10" bestimmen Sie, dass nach zehn Sekunden die Seite im Browser neu geladen wird. Geben Sie hier den Wert ,,0" an, wenn die Seite sofort aktualisiert werden soll. Mit der zweiten Variante entwickeln Sie einen so genannten Tunneleffekt. Durch eine vorgeschaltete Seite können Sie so beispielsweise Ihren Besucher begrüßen. Nach einer festgelegten Dauer wird dann die nächste Seite, wie etwa die eigentliche Homepage, geladen.
  
  <meta http-equiv="refresh" content="20;URL= ">http://www.pc-magazin.de">
  
  Das Beispiel lädt nach 20 Sekunden (content="20") die Homepage des PC Magazins. Ist diese Zielseite auf dem gleichen Server gespeichert, können Sie auch absolute oder relative Pfadangaben benutzen. Das richtige Timing ist wichtig! Eine sofortige Umleitung ist sinnvoll, wenn Sie mit Ihrer Website umgezogen und nun unter einer neuen Domain im Web zu finden sind. Enthält Ihre Begrüßungsseite jedoch große Bilder oder Animationen, die ohnehin etwas länger brauchen, bis Sie fertig geladen sind, sollten Sie den Zeitrahmen großzügiger planen. Damit ungeduldige Besucher nicht warten müssen, sollten sie per Hyperlink zur weiteren Seite springen können. Diesen sollten Sie ohnehin setzen, da in einigen Browsern die automatische Weiterleitung überhaupt nicht funktioniert. Auch sollten Sie beachten, dass einige Suchmaschinen Webseiten mit dem Meta-Tag refresh nicht indizieren.
  
  

• Inline-Frames ­ externe Inhalte

  Inline-Frames - externe Inhalte
  Framesets in Websites legen fest, an welcher Stelle welches Dokument geladen werden soll.
  Inline-Frames übernehmen eine ähnliche Aufgabe, ohne allerdings eine Frameset-Datei zu benötigen. Denn Inline-Frames binden Sie direkt an der gewünschten Stelle des HTML-Dokuments ein. Der Inhalt des Inline-Frames ist ebenfalls in einem separaten, unabhängigen Dokument gespeichert. Großer Vorteil der Inline-Frames ist, dass mehrere Webseiten deren Inhalt gleichzeitig anzeigen können. Aktualisierungen sind sehr schnell durchgeführt, da Sie nur diese eine Datei ändern müssen. So ist ein Impressum schnell in jede Seite eingebunden, indem Sie dies per iframe-Tag einfügen:
  
  <iframe name="content_iframe" src="inhalt.htm" width="500" height="300" vspace="0" hspace="0" marginwidth="0" marginheight="0" frameborder="1"></iframe>
  
  Dieser Code für einen Inline-Frame zeigt die Datei inhalt.htm an. Mit src geben Sie das Dokument an, das der Inline-Frame laden soll. Mit vspace bestimmen Sie den vertikalen, mit hspace den horizontalen Abstand zu darüber bzw. daneben stehenden Seitenelementen. Auch Abstände innerhalb des Inline-Frames können Sie definieren: marginwidth gibt den horizontalen Abstand zum Rahmen des Inline-Frames an; marginheight sorgt für den gewünschten Abstand zum oberen bzw. unteren Frame-Rand. Setzen Sie den frameborder auf 0, wenn kein Rahmen um den Inline-Frame erscheinen soll. Die meisten Webbrowser zeigen dann höchstens die Scrollbalken. Auch die Bildlaufleisten können unterdrückt werden. Geben Sie in diesem Fall die Option scrolling="no" an. Sollen dagegen Scrollbalken unabhängig von dem Umfang des Inhalts immer sichtbar sein, geben Sie scrolling="yes" an. scrolling="auto" ist die Standardeinstellung, die auch verwendet wird, wenn Sie keine weiteren Angaben machen.
  
  

• Pfiffiger Editor

  Pfiffiger Editor
  PSPad (www.pspad.com/de/) ist ein Freeware-Editor auch für HTML. Er besitzt zwar nicht die komfortablen Hilfen wie ein dedizierter HTML-Editor, bietet aber eine Reihe nützlicher Funktionen: So ist das Programm in der Lage, nach sehr komplexen Ausdrücken zu suchen, was das Austauschen von Tags, die verschiedene Parameter enthalten, erleichtert. Zudem integriert PSPad den CSS-Editor Topstyle Lite und besitzt einen automatischen Konverter von HTML zu CSS. Damit ist der Editor prädestiniert, HTML-formatierte Seiten auf Stylesheets umzustellen.
  
  

• Diashow abspielen

  Diashow abspielen
  Eine Meta-Angabe blättert automatisch zur nächsten Webseite weiter und ist kompatibel zu allen Browsern.
  Zunächst legen Sie für jedes einzelne Bild der Diashow eine eigene Webseite an. Benutzen Sie dabei im Dateinamen fortlaufende Nummern wie diaschau1.htm, diaschau2.htm etc. Das erleichtert die nachfolgende Aufgabe erheblich. Die Weiterleitung erfolgt über ein Meta-Tag im Kopfbereich jeder einzelnen Webseite. Im Beispiel sieht die Zeile in der ersten Webseite so aus:
  
  <meta http-equiv="refresh" content="5; URL=diaschau2.htm">
  
  Die 5 steht für die Anzahl der Sekunden bis zum Aufruf der nächsten Webseite. Den Wert dürfen Sie natürlich anpassen. diaschau2.htm ist die Webseite, die als nächste zu laden ist. So geben Sie jeweils die nächste Webseite in der Bildreihenfolge an. Bei der letzten Webseite springen Sie entweder zurück zur ersten Seite und erhalten so eine Endlosschleife. Oder Sie lassen das Meta-Tag einfach weg. Bedenken Sie bei der Auswahl der Verzögerungszeit Folgendes: Die Ladezeiten der Webseiten müssen kür zer sein als die Pause, die Sie angegeben haben. Sonst bekommt der Besucher vielleicht gar nicht die fertige Webseite zu sehen, sondern der Browser holt gleich die nächste Seite.
  
  

• Zeilenumbrüche beachten

  Zeilenumbrüche beachten
  Normalerweise spielen Zeilenumbrüche im HTML-Code für die Darstellung einer Webseite keine Rolle. Der Internet Explorer sieht das auch in der aktuellen Version bisweilen anders und fügt hässliche Zwischenräume ein. Der folgende HTML-Ausschnitt beschreibt ein Bild, gefolgt von einem div-Bereich:
  
  <img src="bild.jpg"> <div class="beispiel"> Text </div>
  
  Beide Elemente stehen untereinander, aber der IE fügt einen kleinen Zwischenraum ein. Verantwortlich ist der Zeilenumbruch hinter dem img-Tag. Der Zwischenraum verschwindet so:
  
  <img src="bild.jpg"><div class="beispiel"> Text </div>
  
  Dieses Problem tritt gelegentlich auch bei Tabellen und einzelnen Zellen auf.
  
  

• Wandernder Tabelleninhalt

  Wandernder Tabelleninhalt
  Wer komplexe Tabellenlayouts im HTML-Editor bearbeitet, verliert schon mal den Überblick. Schnell ist zum Beispiel eine Zeile Text getippt, die nicht innerhalb von td-Tags steht. Dieser Text erscheint nicht etwa an einer falschen Stelle in der Tabelle, sondern über der Tabelle. Das passiert auch mit allen anderen Elementen, etwa Bildern. Tritt ein solches Phänomen bei Ihnen auf, sollten Sie bei der Fehlersuche entsprechend systematisch vorgehen.
  
  

• RSS-Newsfeed anzeigen

  RSS-Newsfeed anzeigen
  Eine zusätzliche Navigationsleiste erleichtert den Zugriff auf einen RSS-Newsfeed.
  Einen RSS-Newsfeed signalisiert man mit einer beschrif teten Grafik RSS oder XML auf der Homepage. Die aktuellen Versionen von Mozilla, Opera und dem Mac-Safari machen anders auf das RSS-Angebot aufmerksam. Fügen Sie im Kopfbereich folgende Zeile ein:
  
  <link rel="alternate" type="application/rss+xml" title="RSSNewsfeed" href="">http://www.domain.de/feed.xml">
  
  Passen Sie die URL des RSS-Feeds an. Den Eintrag title wählen Sie frei. Opera 7 zeigt unter der Symbolleiste eine zusätzliche Liste mit dem Button Newsfeed an. Dazu muss aber Ansicht/Symbolleisten/Navigationsleiste eingeschaltet sein.
  
  

• Tooltips für Verweise

  Tooltips für Verweise
  Mozilla und Firefox unterdrücken die veraltete Methode zur Anzeige von Tooltips in Webseiten.
  Jeder Windows-Anwender kennt sie: die kleinen gelben Fenster, die erscheinen, wenn man den Mauszeiger zum Beispiel über einer Symbolleiste einige Sekunden verweilen lässt. Diesen Effekt können Sie auch auf Webseiten für fast jedes Objekt einsetzen. Das Universalattribut title ist nach dem HTML-Standard genau dafür vorgesehen. Die folgenden Zeilen
  
  <a href="http:..." title="Zur Startseite"> Link </a>
  
  bewirken, dass der Text Zur Startseite als Tooltip erscheint. Das gelingt auch bei <img>Tags, Überschriften und vielen anderen Tags. Das klappt mit so ziemlich allen relevanten Browsern, nur ältere Netscape-Versionen spielen nicht mit. Es gibt noch einen anderen Weg, um solche Tooltips zum Beispiel für Bilder zu erzeugen. Das Attribut alt ist eigentlich für eine Bildbeschreibung gedacht, die der Browser alternativ anzeigt. Das ist bei Übertragungsfehlern sinnvoll, oder wenn etwa Sehbehinderte eine Webseite mit einem Seitenleser abtasten. Netscape 4 und Internet Explorer zeigen den Text zusätzlich als Tooltip an. Dies widerspricht aber dem HTML-Standard, weshalb Mozilla und Firefox keinen Tooltip anzeigen Sie sollten deshalb diese Variante nicht einsetzen. Opera 7.5 geht mit Tooltips recht eigenwillig um. Zum einen ignoriert der Browser wie Mozilla das alt-Attribut. Zum anderen erscheinen Tooltips hier nicht als kleines gelbes Fenster, sondern in der Statuszeile. Und Sie sollten genau darauf achten, wo Sie das title-Attribut einsetzen. Denn Opera vererbt den Tooltip nicht an untergeordnete Elemente. Ein Beispiel:
  
  <li title="Eine lange Erkl&auml;rung ..."> Tooltip mit <em>title</em> </li>
  
  

• Animierter Bilderrahmen

  Animierter Bilderrahmen
  Es gibt viele Methoden, mit denen Sie Seitenelemente hervorheben können. Wie wäre es alternativ zu Flash mit einem animierten Bilderrahmen?
  Bilderinhalte können Sie mit Animationen herausstellen. Bei hochwertigen Fotos wird es ohne Flash schwierig. Einfacher animieren Sie Bilderrahmen: Sie legen eine Tabelle von drei mal drei Elementen an, bei der die obere und untere Zeile aus miteinander verbundenen Zellen bestehen (colspan="3"). Tabellenrahmen gelten als wenig ästhetisch und bleiben daher of t ausgeblendet (border="0"). Setzen Sie cellpadding und cellspacing auf ,,0". Anschließend legen Sie eine GIF-Animation für den Bilder rahmen an. Gute Ergebnisse erzielen Sie mit einer Bildbreite und -höhe von jeweils drei Pixeln, wobei der Rahmen nicht zu wuchtig erscheint und die Dateigröße klein bleibt. Diese Maße müssen mit denen der verbundenen Zellen übereinstimmen. Bleiben Sie bei den drei Pixeln, muss die erste Zeile also drei Pixel hoch sein. Die Höhe kann sich automatisch dem mittleren Zelleninhalt, Ihrem hervorgehobenen Foto, anpassen. Die Animation kann aus zwei Einstellungen bestehen: Der erste Frame ist gelb, der zweite rot eingefärbt. Zum HTML-Code: Legen Sie die Animation in den Hintergrund der jeweiligen Tabellenzelle, und bauen Sie damit den Rahmen um den eigentlichen Tabelleninhalt auf. Die GIF-Animation wird automatisch gekachelt und passt sich der Zellengröße an. Vorsicht! Legen Sie die Tabelle beispielsweise mit Dreamweaver an, müssen Sie die geschützten Leerzeichen (&nbsp;) aus den verbundenen Zellen entfernen, da sonst die Zeilenhöhe zu groß angezeigt wird. Damit das Foto nicht direkt an den Rahmen stößt, sollten Sie einen horizontalen bzw. vertikalen Abstand z. B. mit jeweils fünf Pixeln wählen. In dem Fall definieren Sie: hspace="5" vspace="5". Einen animierten Rahmen legen Sie um beliebige Seitenelemente.
  
  

• Logo als Lesezeichen

  Logo als Lesezeichen
  Sie erhöhen den Wiedererkennungswert Ihrer Site, wenn Ihr Logo neben dem Seitentitel in den Bookmarks gespeichert wird.
  Als Erstes benötigen Sie ein kleines Bild. Dieses Icon speichern Sie mit 16 x 16 Pixel im Stammverzeichnis Ihres Servers. Als Dateiname wird häufig favicon.ico gewählt. Wie Sie die Datei nennen, ist egal, wichtig ist nur die Dateiendung .ico, die für das Windows-IconFormat steht. So können Sie auch mehrere dieser so genannten Favicons für Ihre Site anlegen und speichern. Favicon ist die Abkürzung für Favorites Icon. Unter http://favicon.com finden Sie Tools, mit denen Sie einfach und schnell Favicons anlegen. Aber auch mit Ihrem Standardgrafikprogramm können Sie diese Bildchen erzeugen. Speichern Sie die Grafik wie gewohnt als GIF, und ändern Sie anschließend die Dateiendung im Explorer. In dem <head> Ihrer Webseite hinterlegen Sie die Verknüpfung zu Ihrem Mini-Logo folgendermaßen:
  
  <link rel="shortcut icon" href="http://pc-magazin.de/ images/favicon.ico">
  
  Internet Explorer 5.0, Netscape 6 und Mozilla 0.9.6 unterstützen Favicons unter allen Betriebssystemen.
  
  

• Mehrzeilige Buttons

  Mehrzeilige Buttons
  Die Beschriftung eines Formularbuttons lässt sich auch mehrzeilig gestalten.
  Das Tag <button> ver wendet den Text bis zum End-Tag als Beschriftung der Schaltfläche. Dabei wird der Button automatisch so breit, dass der gesamte Text in einer Zeile Platz findet. Einen Umbruch macht der Browser nicht einmal dann, wenn der Button über den Browserrand hinausragt. Im Beschriftungstext dür fen Sie aber die üblichen HTML-Tags für Textfor matier ung (und andere) verwenden. Die Kennzeichnung <br> er zeugt entsprechend einen Umbruch. Beim Internet Explorer gibt es wieder ein Detail zu beachten: Vor dem <br> darf kein Leerzeichen stehen, sonst fügt der IE einen größeren Zeilenabstand ein:
  
  <form action=""> <button type="submit"> Bitte hier klicken! </button><br>
  
  <button type="submit"> Hier <br>klicken! </button> <button type="submit"> Hier<br>klicken! </button> </form>
  
  Beachten Sie bitte dazu im Beispiel den Unterschied zwischen dem zweiten und dritten Button.
  
  

• Whitespace-Problem

  Whitespace-Problem
  Die Browser reagieren auf Leerzeichen und Umbrüche (whitespace) sehr empfindlich.
  Laut HTML-Standard übergehen Browser Leerzeichen und Zeilenumbrüche im Quellcode. Manchmal sehen die Browser das anders, wobei Lücken und Abstände bei Tabellen und Bildern entstehen. Die Zeilen
  
  <img src="bild1.gif"> <img src="bild2.gif">
  
  und
  
  <img src="bild1.gif"><img src="bild2.gif">
  
  sollten identische Ergebnisse liefern. Im Browser erzeugt jedoch der Zeilenumbruch oder einen Absatz. Das Problem tritt auch in Verbindung mit Div-Bereichen auf. Lassen Sie die Formatierung weg, so passt wieder alles.
  
  

• Umbruch steuern

  Umbruch steuern
  Führen Sie Trennstellen für lange Wörter ein, die in schmalen Browserfenstern lesbar sein sollen.
  Bei langen Wörtern franst Text am rechten Rand aus, wenn ein Wort entweder ganz oder gar nicht in die nächste Zeile wandert. Eine Silbentrennung wie bei Word gibt es nicht. Blocksatz zerrupft diese Zeilen. HTML 4.0 trennt jedoch mit dem Zeichencode &shy; am Ende einer Zeile zeigt der Browser so an dieser Stelle ein Trennzeichen (-) und bricht um. Das funktioniert mit dem IE ab Version 4.0 sowie Opera ab 7. So trennen Sie ein langes Wort:
  
  Donau&shy;dampf&shy;schiff&shy;fahrts&s hy;gesell&shy;schafts&shy;kapit&auml;n
  
  Der Nachteil: Firefox kann sich mit den Trennstellen nicht anfreunden, es erfolgt kein Umbruch.
  
  

• Ladeinformationen bei Bildern

  Ladeinformationen bei Bildern
  Nicht jeder Webreisende verfügt über einen schnellen Internetzugang. Viele müssen lange warten, bis ein Bild geladen ist und in der Webseite erscheint.
  Damit Ihr Besucher erkennt, dass etwas geschieht und sich nicht sein Browser verabschiedet hat, können Sie auch bei Bildern entsprechende Textinformationen einblenden ähnlich wie Sie es schon von einigen Flash-Animationen her kennen. Diese Variante eignet sich besonders für hochauflösende und hochformatige Fotos, die als große Datei gespeichert sind. Während Sie mit dem Attribut alt lediglich einfache Textinformationen hinterlegen, können Sie diese mit der folgenden Variante grafisch ansprechend gestalten. Zudem ist diese Variante eine Alternative zu dem Attribut lowsrc, das nicht zum HTML-Standard gehört. Legen Sie eine GIFGrafik an, die so lange angezeigt werden soll, bis das eigentliche Bild geladen ist. Diese sollten die gleichen Maße haben, wobei die fertige Datei nicht größer als fünf KByte sein sollte. Fügen Sie hier den Text Bitte warten Sie ein. Öffnen Sie das HTML-Dokument, in dem die große Grafik bereits in einer Tabellenzelle eingebunden ist. Auch wenn Sie eigentlich keine Tabelle benötigen, muss das Bild zumindest in einer 1x1-Tabelle integriert sein. Anschließend setzen Sie das Bild mit der Ladeinformation in den entsprechenden Zellenhintergrund:
  
  <td background="bildinfo.gif">
  <img src="bild.jpg" width="502" height="375"/> </td>
  
  Dauert es nun mal etwas länger, bis das Bild erscheint, sieht die Webseite trotzdem optisch ansprechend aus.
  
  

• Eingabefelder beschriften

  Eingabefelder beschriften
  Gerade Checkboxen benötigen eine Beschriftung, um die Übersicht zu behalten.
  Um auszudrücken, dass ein Text als Beschriftung zu einem bestimmten Eingabefeld gehört, sieht HTML 4 den Tag label vor. Das erleichtert die Lesbarkeit des Quelltextes. Ein Klick auf das Label fokussiert automatisch das Steuerelement.
  
  <label for="chk1">Beschriftung</label>
  <input id="chk1" type="checkbox" name="chk1" value="1">
  
  

• Validator auf deutsch

  Validator auf deutsch
  Fehler in Webseiten gefährden bei modernen Browsern zunehmend die saubere Darstellung - ein Online-Validator schafft Abhilfe.
  Moderne Browser halten sich immer mehr an die W3C-Standards und reagieren auf Code-Fehler mit Darstellungsproblemen. Ein Validator überprüft den Code der Webseite auf Abweichungen vom Standard. Am bekanntesten dürfte das W3C-Angebot sein:
  http://validator.w3.org
  Die englischen Ergebnisse sind aber nicht jedermanns Sache. Einen vergleichbaren Service auf deutsch gibt es bei Validome:
  www.validome.org
  Sie geben wahlweise eine URL mit der fraglichen Webseite an oder laden eine HTML-Datei von Ihrer Festplatte hoch. Die Ergebnisse dieser Untersuchung sehen Sie dann. Validome beherrscht HTML, XHTML, WML und XML.